jui.define("chart.widget.topologyctrl", [ "util.base" ], function(_) { /** * @class chart.widget.topologyctrl * @extends chart.widget.core */ var TopologyControlWidget = function() { var self = this, axis = null; var targetKey, startX, startY; var renderWait = false; var scale = 1, boxX = 0, boxY = 0; var nodeIndex = 0; function renderChart() { if(renderWait === false) { setTimeout(function () { self.chart.render(); setBrushEvent(); renderWait = false; }, 70); renderWait = true; } } function initDragEvent() { self.on("axis.mousemove", function(e) { axis.root.attr({ cursor: "move" }); if(!_.typeCheck("string", targetKey)) return; var xy = axis.c(targetKey), dragX = e.chartX / xy.scale, dragY = e.chartY / xy.scale; xy.setX(startX + (dragX - startX)); xy.setY(startY + (dragY - startY)); renderChart(); }, axis.index); self.on("axis.mouseup", endDragAction, axis.index); self.on("bg.mouseup", endDragAction); self.on("bg.mouseout", endDragAction); function endDragAction(e) { if(!_.typeCheck("string", targetKey)) return; targetKey = null; } } function initZoomEvent() { self.on("axis.mousewheel", function(e) { var e = window.event || e, delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))), xy = axis.c(targetKey); if(delta > 0) { if(scale < 2) { scale += 0.1; } } else { if(scale > 0.6) { scale -= 0.1; } } xy.setScale(scale); renderChart(); }, axis.index); } function initMoveEvent() { var startX = null, startY = null; self.on("axis.mousedown", function(e) { if(_.typeCheck("string", targetKey)) return; if(startX != null || startY != null) return; startX = boxX + e.x; startY = boxY + e.y; }, axis.index); self.on("axis.mousemove", function(e) { if(startX == null || startY == null) return; var xy = axis.c(targetKey); boxX = startX - e.x; boxY = startY - e.y xy.setView(-boxX, -boxY); renderChart(); }, axis.index); self.on("chart.mouseup", endMoveAction); self.on("chart.mouseout", endMoveAction); self.on("bg.mouseup", endMoveAction); self.on("bg.mouseout", endMoveAction); function endMoveAction(e) { if(startX == null || startY == null) return; startX = null; startY = null; } } function getBrushElement() { var children = self.svg.root.get(0).children, index = 0, element = null; for(var i = 0; i < children.length; i++) { var cls = children[i].attr("class"); if(cls && cls.indexOf("topologynode") != -1) { if(index == self.widget.brush) { element = children[i]; break; } index++; } } return element; } function setBrushEvent() { var element = getBrushElement(); if(element == null) return; element.each(function (i, node) { (function (index) { if (isNaN(index)) return; node.on("mousedown", function (e) { if (_.typeCheck("string", targetKey)) return; var key = axis.getValue(axis.data[index], "key"), xy = axis.c(key); targetKey = key; startX = xy.x / xy.scale; startY = xy.y / xy.scale; axis.cache.activeNodeKey = targetKey; // 선택한 노드 맨 마지막으로 이동 //xy.moveLast(); }); })(parseInt(node.attr("index"))); }); } this.draw = function() { var brush = this.chart.get("brush", this.widget.brush); // axis 글로벌 변수에 설정 axis = this.chart.axis(brush.axis); if(this.widget.zoom) { initZoomEvent(axis); } if(this.widget.move) { initMoveEvent(axis); } initDragEvent(axis); setBrushEvent(axis); return this.chart.svg.group(); } } TopologyControlWidget.setup = function() { return { /** @cfg {Boolean} [move=false] Set to be moved to see the point of view of the topology map. */ move: false, /** @cfg {Boolean} [zoom=false] Set the zoom-in / zoom-out features of the topology map. */ zoom: false, /** @cfg {Number} [brush=0] Specifies a brush index for which a widget is used. */ brush: 0 } } return TopologyControlWidget; }, "chart.widget.core");