|
|
|
(function (window, d3) { |
|
|
|
"use strict"; |
|
|
|
if (window.PackTree) { return console.log("PackTree has been loaded!"); } |
|
|
|
// svg filter |
|
d3.select(document.body) |
|
.append("svg") |
|
.attr("class", "filter_only_svg") |
|
.attr("style", "position:absolute;width:0;height:0;z-index:-5;") |
|
.html('<defs> \ |
|
<filter id="packTreeBlur" x="-25%" y="-25%" width="150%" height="150%"> \ |
|
<feOffset dx="0" dy="0" in="SourceGraphic" result="o1" /> \ |
|
<feGaussianBlur in="o1" stdDeviation="5" result="b1" /> \ |
|
<feMerge> \ |
|
<feMergeNode in="b1" /> \ |
|
<feMergeNode in="SourceGraphic" /> \ |
|
</feMerge> \ |
|
</filter> \ |
|
</defs>' |
|
); |
|
|
|
function clearEmptyOrOnlyOneChildLogicalNode (node, parent) { |
|
// checking if node is leaf node |
|
if (node.type == "data") { return; } |
|
|
|
var index; |
|
(parent && (index = parent.children.findIndex(function (d) { return d === node; }))); |
|
|
|
if (parent && node.children.length == 0) { |
|
parent.children.splice(index, 1); |
|
} |
|
else if (parent && node.children.length == 1) { |
|
var nNode = node.children[0]; |
|
parent.children.push(nNode); |
|
parent.children.splice(index, 1); |
|
clearEmptyOrOnlyOneChildLogicalNode(nNode, parent); |
|
} |
|
else { |
|
for (var i = 0, l = node.children.length; i < l; i++) { |
|
clearEmptyOrOnlyOneChildLogicalNode(node.children[i], node); |
|
} |
|
} |
|
} |
|
|
|
|
|
var rootInit = (function () { |
|
|
|
var loosePack = d3.pack().padding(15); |
|
|
|
var sum = function (d) { return d.value; }, |
|
sort = function (a, b) { return b.r - a.r; }, |
|
andNodeOnly = function (node) { return node.data.type == "and"; }, |
|
nodeLocReassignment = function (node) { |
|
// container origin is the offset for children |
|
var x = node.x, y = node.y, |
|
circle, |
|
childNodes = node.children; |
|
d3.packSiblings(childNodes); |
|
childNodes.forEach(function (d) { |
|
d.x += x; |
|
d.y += y; |
|
}); |
|
circle = d3.packEnclose(childNodes); |
|
node.r = circle.r; |
|
}; |
|
|
|
var f = function () { |
|
clearEmptyOrOnlyOneChildLogicalNode(this._tree); |
|
|
|
var root = d3.hierarchy(this._tree).sum(sum).sort(sort), |
|
nodes = root.descendants(); |
|
loosePack.radius(() => this._r).size([this._w, this._h])(root); |
|
|
|
// find all "and" container and relocat all data nodes |
|
nodes |
|
.filter(andNodeOnly) |
|
.forEach(nodeLocReassignment); |
|
|
|
return nodes; |
|
}; |
|
|
|
return f; |
|
})(); |
|
|
|
|
|
var uuid = (function () { |
|
var i = 0, prefix = "w", f; |
|
f = function () { return prefix + "" + i++; }; |
|
f.prefix = function (v) { prefix = v; return f; }; |
|
return f; |
|
})(); |
|
|
|
|
|
// extract tspan text based on bind data |
|
var appendText = function (selection, d, clipId) { |
|
var f = [], |
|
i = 0, |
|
q = d.data.bind.querys, |
|
y = {"4": -30, "3": -20, "2": -10, "1": 0}; |
|
f.push("[" + d.data.bind.collection + "]"); |
|
while (q[i] && i < 3) { |
|
f.push(q[i].name + " " + q[i].logic + " " + q[i].query); |
|
i++; |
|
} |
|
|
|
selection.select(".svg__text").remove(); |
|
selection.append("text") |
|
.attr("class", "svg__text") |
|
.attr("y", y[f.length]) |
|
.attr("clip-path", "url(#" + clipId + ")") |
|
.selectAll("tspan") |
|
.data(f) |
|
.enter() |
|
.append("tspan") |
|
.attr("x", (j, i) => i ? 0 : null) |
|
.attr("dy", (j, i) => i ? 20 : null) |
|
.text(j => j); |
|
}; |
|
|
|
|
|
// vm dialog callback function |
|
var dataNodeUpdateFn = function (pack) { |
|
/** |
|
* _node: <g> dom node |
|
* _data: obj.bind |
|
*/ |
|
var _node, _data, fn; |
|
|
|
fn = function (bind) { |
|
// update tree |
|
var child = findItemFromHierarchy(pack._tree, _data).child; |
|
child.bind = JSON.parse(JSON.stringify(bind)); |
|
|
|
// update node |
|
var node = d3.select(_node); |
|
node.datum().data.bind = bind; |
|
node.call(appendText, node.datum(), pack._clipId); |
|
node.select("circle") |
|
.attr("r", 70) |
|
.transition() |
|
.duration(1000) |
|
.ease(d3.easeBounceOut) |
|
.attr("r", pack._r) |
|
.attr("fill", d => d.data.bind.color); |
|
|
|
_node = null; |
|
_data = null; |
|
}; |
|
fn.node = function (n) { _node = n; return fn; }; |
|
fn.data = function (d) { _data = d; return fn; }; |
|
|
|
return fn; |
|
}; |
|
|
|
|
|
|
|
function TreeNode (child, parent, grandParent) { |
|
this.child = child; |
|
this.parent = parent; |
|
this.grandParent = grandParent; |
|
} |
|
TreeNode.prototype = { |
|
parentRemoveNode: function (childNode) { |
|
var index = this.parent.children.findIndex(function (node) { |
|
return node === childNode; |
|
}); |
|
if (index < 0) { |
|
return console.error("child node is NOT exist in parent node!"); |
|
} |
|
this.parent.children.splice(index, 1); |
|
}, |
|
removeChild: function () { |
|
this.parentRemoveNode(this.child); |
|
}, |
|
parentAdd: function (node) { // an node or an node array |
|
if (node instanceof Array) { |
|
Array.prototype.push.apply(this.parent.children, node); |
|
} |
|
else { |
|
this.parent.children.push(node); |
|
} |
|
}, |
|
childAdd: function (node) { // an node or an node array |
|
if (!this.child.children) { |
|
return console.error("child is a prime node that can NOT contain any sub nodes."); |
|
} |
|
|
|
if (node instanceof Array) { |
|
Array.prototype.push.apply(this.child.children, node); |
|
} |
|
else { |
|
this.child.children.push(node); |
|
} |
|
} |
|
}; |
|
|
|
function findItemFromHierarchy (hierarchyData, nodeData) { |
|
// [currentNode, parentNode, grandParentNode, ... root] |
|
var path = nodeData.ancestors(), |
|
length = path.length, |
|
i = length - 2, |
|
child = hierarchyData, |
|
grandParent, |
|
parent, |
|
name; |
|
while (i >= 0) { |
|
name = path[i].data.name; |
|
grandParent = parent; |
|
parent = child; |
|
child = child.children.find(function (d) { return d.name === name; }); |
|
i--; |
|
} |
|
|
|
return new TreeNode(child, parent, grandParent); |
|
} |
|
|
|
// General pick for all PackTreee instance, |
|
// only one PackTree is focused by PackTree.focusMe(). |
|
var ctrPick = (function () { |
|
var pickedNodes = [], |
|
pack = null; |
|
|
|
// global keypress listener |
|
var keyUp = function () { |
|
// In case ctr is pressed while pressing other keys |
|
if (d3.event.key.toUpperCase() !== "CONTROL") { return; } |
|
|
|
// remove keyUp listener |
|
d3.select(this).on("keyup.ctr", null); |
|
|
|
var subChildren = [], |
|
rootChildren = pack._tree.children; |
|
|
|
// if picked node is less than 2 or all ROOT nodes are picked will do nothing |
|
//if (pickedNodes.length < 2 || pickedNodes.length == rootChildren.length ) { |
|
if (pickedNodes.length < 2) { |
|
pack.gMain.selectAll(".svg__picked").classed("svg__picked", false); |
|
return; |
|
} |
|
|
|
rootChildren.push({ |
|
name: uuid.prefix("o")(), |
|
type: "or", |
|
children: subChildren |
|
}); |
|
pickedNodes.forEach(function (node) { |
|
var name, index, target; |
|
name = d3.select(node).datum().data.name; |
|
index = rootChildren.findIndex(function (d) { return d.name === name; }); |
|
target = rootChildren.splice(index, 1)[0]; |
|
subChildren.push(target); |
|
}); |
|
|
|
pack.gMain.selectAll(".svg__picked").classed("svg__picked", false); |
|
pack.nodesUpdate(pack.rootInit()); |
|
}; |
|
var onKeydown = function () { |
|
if (d3.event.key.toUpperCase() !== "CONTROL" || !pack) { return; } |
|
pickedNodes = []; // clear content |
|
d3.select(this).on("keyup.ctr", keyUp); |
|
}; |
|
|
|
d3.select(window).on("keydown.ctr", onKeydown); |
|
|
|
var click = function (d) { |
|
/** |
|
* 1) Ctrl key should be enabled |
|
* 2) only dataNode is pickable |
|
* 3) dataNode but its parent node is orNode and is not the ROOT |
|
*/ |
|
if ( |
|
!d3.event.ctrlKey || |
|
d.data.type !== "data" || |
|
(d.parent.data.type == "or" && d.parent.data.name !== "ROOT") |
|
) { return; } |
|
|
|
var self = this, index; |
|
if (d.parent.data.type == "and") { |
|
self = pack.gMain |
|
.selectAll(".svg__node") |
|
.filter(function ($) { return $ === d.parent; }) |
|
.nodes()[0]; |
|
} |
|
self.classList.toggle("svg__picked"); |
|
index = pickedNodes.findIndex(function (node) { |
|
return node === self; |
|
}); |
|
|
|
// if this node is included in pickNodes remove it, |
|
// or push it into pickNodes. |
|
index > -1 ? pickedNodes.splice(index, 1) : pickedNodes.push(self); |
|
}; |
|
|
|
return { |
|
clickFn: click, |
|
clearNodes: function () { |
|
pickedNodes = []; |
|
return this; |
|
}, |
|
setPack: function (v) { |
|
if (!arguments.length) { return pack; } |
|
pack = v; |
|
return this; |
|
} |
|
}; |
|
})(); |
|
|
|
|
|
var nodeDragFn = function (pack) { |
|
// nodeList is a live HTMLCollection object which contained all g-nodes under gMain |
|
// nodesArray is an alternaltive to nodeList except needed repeately updated |
|
var nodeList, nodesArray = []; |
|
|
|
var targetNode = null, // node element, this element will comparing with matchNodes |
|
triggeredNode = null, // one of "matchNodes" member which have insection with targetNode |
|
relatedNodes = [], // targetNode's related nodes, if any. |
|
matchNodes = []; // targetNode's match node array. |
|
|
|
// calculation functions |
|
var slice = Array.prototype.slice, |
|
getDistance = function (c1, c2) { |
|
return Math.sqrt((c1.x - c2.x) * (c1.x - c2.x) + (c1.y - c2.y) * (c1.y - c2.y)); |
|
}, |
|
innerReset = function () { |
|
targetNode = null; |
|
triggeredNode = null; |
|
relatedNodes = []; |
|
matchNodes = []; |
|
nodesArray = []; |
|
}; |
|
|
|
function onDragStart (d) { |
|
// In case onEnd event don't trigged by user, |
|
// reassure every thing on the same page. |
|
innerReset(); |
|
|
|
// update nodesArray |
|
nodeList = nodeList || pack.gMain.node().getElementsByClassName("svg__node"); |
|
nodesArray = slice.call(nodeList, 0); |
|
|
|
var self = this, parent = d.parent, descendants; |
|
if (parent.data.type == "or") { |
|
targetNode = self; |
|
descendants = d.descendants(); |
|
nodesArray.forEach(function (node) { |
|
if (self === node) { return; } |
|
|
|
var datum = d3.select(node).datum(), |
|
children = parent.children; // or-Node's children |
|
if (children.includes(datum)) { matchNodes.push(node); return; } |
|
if (d.children && descendants.includes(datum)) { relatedNodes.push(node); } |
|
}); |
|
} |
|
else { // d.parent.data.type == "and" |
|
targetNode = nodesArray.find(function (node) { |
|
return d3.select(node).datum() === parent; |
|
}); |
|
descendants = parent.descendants(); |
|
|
|
nodesArray.forEach(function (node) { |
|
//if (self === node) { return; } |
|
|
|
var datum = d3.select(node).datum(), |
|
children = parent.parent.children; // or-Node's children |
|
if (descendants.includes(datum)) { relatedNodes.push(node); return; } |
|
if (children.includes(datum)) { matchNodes.push(node); } |
|
}); |
|
} |
|
|
|
} // onDragStart__End |
|
|
|
|
|
|
|
|
|
function onDrag (d) { |
|
var x = d3.event.x, y = d3.event.y, |
|
dx = d3.event.dx, dy = d3.event.dy; |
|
|
|
/** |
|
* Detecting if targetNode moved outside of parentNode's domain, |
|
* if it does stop coordinates updating by skipping onDrag loop. |
|
* targetNode under the ROOT will be excepted. |
|
*/ |
|
var moveCircle = (this === targetNode ? d : d3.select(targetNode).datum()), |
|
fenceCircle = moveCircle.parent, |
|
maxDis1 = fenceCircle.r - d.r - 1, |
|
maxDis2 = fenceCircle.r - moveCircle.r - 1; |
|
if ( |
|
(fenceCircle.data.name != "ROOT") && |
|
( |
|
((moveCircle === d) && (getDistance(fenceCircle, {x: x, y: y}) > maxDis1)) || |
|
((moveCircle !== d) && (getDistance(fenceCircle, {x: moveCircle.x + dx, y: moveCircle.y + dy}) > maxDis2)) |
|
) |
|
) { |
|
return; |
|
} // true: stop onDrag loop, code underbelow will not be excuted. |
|
|
|
if (this === targetNode) { |
|
Object.assign(d, {x: x, y: y}); |
|
d3.select(this).attr("transform", "translate(" + [x, y] + ")"); |
|
} |
|
relatedNodes.forEach(function (node) { |
|
var _node = d3.select(node), datum = _node.datum(); |
|
datum.x += dx; |
|
datum.y += dy; |
|
_node.attr("transform", "translate(" + [datum.x, datum.y] + ")"); |
|
}); |
|
|
|
/** |
|
* This code block used for testing if targetNode have intersection with matchNodes. |
|
* Find the triggeredNode which is the closest node to targetNode and should |
|
* have intersection with it too. |
|
*/ |
|
var wanted = matchNodes.map(function (node) { |
|
var dm = d3.select(node).datum(), |
|
dt = d3.select(targetNode).datum(), |
|
distance = getDistance(dm, dt), |
|
isIntersected = (distance <= Math.abs(dt.r + dm.r)); |
|
return { |
|
node : node, |
|
distance : distance, |
|
isIntersected: isIntersected |
|
}; |
|
}) |
|
.sort(function (a, b) { return a.distance - b.distance; }) |
|
.find(function (d) { return d.isIntersected; }); |
|
|
|
(triggeredNode && triggeredNode.classList.remove("svg__active")); |
|
if (wanted) { |
|
triggeredNode = wanted.node; |
|
triggeredNode.classList.toggle("svg__active"); |
|
} |
|
else { |
|
triggeredNode = null; |
|
} |
|
|
|
d3.select(targetNode).classed("svg__active", true); |
|
} // onDrag End |
|
|
|
|
|
|
|
function onDragEnd (d) { |
|
pack.gMain.selectAll(".svg__active").classed("svg__active", false); |
|
|
|
if (!triggeredNode) { return innerReset(); } |
|
|
|
var target = d3.select(targetNode).datum(), |
|
trigger = d3.select(triggeredNode).datum(), |
|
tt = findItemFromHierarchy(pack._tree, target), |
|
tg = findItemFromHierarchy(pack._tree, trigger); |
|
|
|
// 1) If two dataNodes come close merge them into a new andNode |
|
if (target.data.type == "data" && trigger.data.type == "data") { |
|
tt.removeChild(); |
|
tg.removeChild(); |
|
tt.parentAdd({ |
|
name: uuid.prefix("a")(), |
|
type: "and", |
|
children: [tt.child, tg.child] |
|
}); |
|
} |
|
|
|
// 2) If two andNodes come close tt grow into a bigger andNode and remove tg |
|
else if (target.data.type == "and" && trigger.data.type == "and") { |
|
tg.removeChild(); |
|
tt.childAdd(tg.child.children); |
|
} |
|
|
|
// 3) If two orNodes come close merge them into a new bigger orNode |
|
else if (target.data.type == "or" && trigger.data.type == "or") { |
|
tt.removeChild(); |
|
tg.removeChild(); |
|
tg.parentAdd({ |
|
name: uuid.prefix("o")(), |
|
type: "or", |
|
children: Array.prototype.concat([], tt.child.children, tg.child.children) |
|
}); |
|
} |
|
|
|
// 4) one node is dataNode and another is logic node(wrapper node) |
|
// dataNode will be merged into that logic node |
|
else if ( |
|
(target.data.type == "data" && trigger.data.type != "data") || |
|
(trigger.data.type == "data" && target.data.type != "data") |
|
) { |
|
if (target.data.type == "data") { |
|
tt.removeChild(); |
|
tg.childAdd(tt.child); |
|
} |
|
else { |
|
tg.removeChild(); |
|
tt.childAdd(tg.child); |
|
} |
|
} |
|
|
|
|
|
// _______________ UNTESTED _______________ |
|
// 5) both are logic node but NOT the same type |
|
// andNode will be merged into orNode |
|
else { |
|
if (target.data.type == "and" && trigger.data.type == "or") { |
|
tt.removeChild(); |
|
tg.childAdd(tt.child); |
|
} |
|
else if (trigger.data.type == "and" && target.data.type == "or") { |
|
tg.removeChild(); |
|
tt.childAdd(tg.child); |
|
} |
|
} |
|
|
|
pack.nodesUpdate(pack.rootInit()); |
|
|
|
// release memory |
|
innerReset(); |
|
} // onDragEnd End |
|
|
|
|
|
return d3.drag() |
|
.filter(function () { |
|
return !d3.event.ctrlKey && !d3.event.button; |
|
}) |
|
.on("start",onDragStart) |
|
.on("drag", onDrag) |
|
.on("end", onDragEnd); |
|
|
|
}; // nodeDragFn END |
|
|
|
|
|
function nodesUpdate (nodes) { |
|
var u = this.gMain.selectAll(".svg__node") |
|
.data(nodes.slice(1), function (d) { return d.data.name; }); |
|
var clipId = this._clipId; |
|
|
|
u.enter() |
|
.append("g") |
|
.attr("class", d => { return "svg__node svg__node-" + d.data.type; }) |
|
.call(this.onNodeDrag) |
|
.on("click", ctrPick.clickFn) |
|
.on("dblclick", this.onDataNodeDBLClick) |
|
.on("contextmenu", this.onNodeContextmenu) |
|
.each(function (d) { |
|
var self = d3.select(this); |
|
|
|
// add circle backgorund, circle is event-responsible |
|
self.append("circle") |
|
.attr("fill", d.children ? null : d.data.bind.color) |
|
.attr("r", d.r); |
|
|
|
// add text content for leaf nodes |
|
if (!d.children) { |
|
self.call(appendText, d, clipId); |
|
} |
|
}) |
|
.attr("transform", "translate(" + [this._w / 2, this._h / 2] + ")") |
|
.merge(u) |
|
.sort(function (a, b) { return b.r - a.r; }) |
|
.each(function (d) { |
|
// data rebine and change apprence |
|
d3.select(this).select("circle").datum(d).attr("r", d.r); |
|
// TODO: text should rebine if neccessory ... ... |
|
}) |
|
.transition() |
|
.duration(800) |
|
.attr("transform", d => { return "translate(" + [d.x, d.y] + ")"; }); |
|
|
|
|
|
u.exit() |
|
.attr("transform", d => { return "translate(" + [d.x, d.y] + ") scale(1) rotate(0)"; }) |
|
.transition() |
|
.duration(400) |
|
.attr("transform", d => { return "translate(" + [d.x, d.y] + ") scale(0.01) rotate(90)"; }) |
|
.remove(); |
|
} |
|
|
|
|
|
|
|
|
|
|
|
function PackTree () { |
|
this._tree = { name: "ROOT", type: "or", children: [] }; |
|
this._w = 1000; |
|
this._h = 550; |
|
this._r = 50; |
|
this._clipId = uuid.prefix("clip")(); |
|
|
|
|
|
this._count = 0; |
|
Object.defineProperty(this, "count", { |
|
get: function () { return this._count; }, |
|
set: function (v) { |
|
this._count = v; |
|
if (this.onCount) { this.onCount(this._count); } |
|
} |
|
}); |
|
|
|
|
|
this.svg = null; |
|
this.gMain = null; |
|
this.vm = null; // pop window |
|
|
|
var self = this; |
|
this.dataNodeUpdate = dataNodeUpdateFn(this); |
|
this.onNodeDrag = nodeDragFn(this); |
|
this.onDataNodeDBLClick = function (d) { |
|
if (d3.event.ctrlKey || d.data.type !== "data" || !self.vm) { return; } |
|
|
|
self.vm.show( |
|
self.dataNodeUpdate.data(d).node(this), |
|
JSON.parse(JSON.stringify(d.data.bind)) |
|
); |
|
}; // onDataNodeDBLClick END |
|
|
|
this.onNodeContextmenu = function (d) { |
|
d3.event.preventDefault(); |
|
|
|
var node = findItemFromHierarchy(self._tree, d); |
|
|
|
// dataNode under the ROOT will be removed after user confirmed |
|
if (node.parent.name == "ROOT" && node.child.type == "data") { |
|
if (window.confirm("确认删除该节点？")) { |
|
node.removeChild(); |
|
self.count -= 1; |
|
return self.nodesUpdate(self.rootInit()); |
|
} |
|
return; |
|
} |
|
|
|
// this code block will never be excuted as for |
|
// orNode point-event is set to none. |
|
if (node.child.type == "or") { |
|
node.removeChild(); |
|
node.parentAdd(node.child.children); |
|
return self.nodesUpdate(self.rootInit()); |
|
} |
|
|
|
if ( |
|
(node.child.type == "data") && |
|
(node.parent.type == "and" || node.parent.type == "or") |
|
) { |
|
node.removeChild(); |
|
node.grandParent.children.push(node.child); |
|
return self.nodesUpdate(self.rootInit()); |
|
} |
|
}; // onNodeContextmenu END |
|
|
|
} |
|
|
|
// chainabel configure functions |
|
PackTree.prototype.width = function (w) { |
|
if (!arguments.length) { return this._w; } |
|
this._w = w; |
|
return this; |
|
}; |
|
PackTree.prototype.height = function (h) { |
|
if (!arguments.length) { return this._h; } |
|
this._h = h; |
|
return this; |
|
}; |
|
PackTree.prototype.radius = function (r) { |
|
if (!arguments.length) { return this._r; } |
|
this._r = (r < 50 ? 50 : r); |
|
return this; |
|
}; |
|
PackTree.prototype.vForm = function (vm) { |
|
if (!arguments.length) { return this.vm; } |
|
this.vm = vm; |
|
return this; |
|
}; |
|
|
|
// Make ctrPick focus this instance so that subsequent |
|
// ctr + mouse pick actions will be functional on this instance. |
|
PackTree.prototype.focusMe = function () { |
|
ctrPick.setPack(this); |
|
return this; |
|
}; |
|
PackTree.prototype.rootInit = rootInit; |
|
PackTree.prototype.nodesUpdate = nodesUpdate; |
|
PackTree.prototype.svgInit = function (id) { |
|
var svg, gMain, vm = this.vm, |
|
self = this, |
|
clipId = this._clipId, |
|
radius = this._r, w = this._w, h = this._h; |
|
|
|
var formCallback = function (nodeData) { |
|
self.addDataNode(nodeData); |
|
}; |
|
|
|
var canvasDrag = d3.drag() |
|
.subject(function () { return gMain.datum(); }) |
|
.on("drag", function () { |
|
// if chart is empty diseabled drag event |
|
if (!self._tree.children.length) { return; } |
|
|
|
var x = d3.event.x, y = d3.event.y; |
|
gMain.datum({x: x, y: y}) |
|
.attr("transform", "translate(" + [x, y] + ")"); |
|
}); |
|
|
|
svg = d3.select(id).append("svg") |
|
.attr("xmlns", "http://www.w3.org/2000/svg") |
|
.attr("version", "1.1") |
|
.attr("tabIndex", 0) // focus: document.activeElement |
|
.attr("class", "svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
svg.append("defs") |
|
.html('<clipPath id="' + clipId + '"><circle r="' + (radius - 2) + |
|
'"></circle></clipPath>'); |
|
|
|
svg.append("rect") |
|
.attr("class", "svg__bg") |
|
.attr("width", w) |
|
.attr("height", h) |
|
.call(canvasDrag) |
|
.on("contextmenu", function () { |
|
d3.event.preventDefault(); |
|
if (vm) { |
|
// vm.show(callbackFn, bind) |
|
vm.show(formCallback); |
|
} |
|
}); |
|
|
|
gMain = svg.append("g") |
|
.attr("class", "svg__main") |
|
.datum({x: 0, y: 0}) |
|
.attr("transform", "translate(0,0)"); |
|
|
|
this.svg = svg; |
|
this.gMain = gMain; |
|
|
|
}; // svgInit END |
|
|
|
PackTree.prototype.initialize = function (id, isFormPop) { |
|
this.svgInit(id); |
|
//this.rootInit() |
|
|
|
if (isFormPop && this.vm && !this.vm.confirmCallbackFn) { |
|
this.svg.select(".svg__bg").dispatch("contextmenu"); |
|
} |
|
|
|
return this; |
|
}; |
|
|
|
PackTree.prototype.addDataNode = function (bind) { |
|
this._tree.children.push({ |
|
name: uuid.prefix("d")(), |
|
type: "data", |
|
bind: bind |
|
}); |
|
this.count += 1; |
|
this.nodesUpdate(this.rootInit()); |
|
}; |
|
PackTree.prototype.clearTree = function () { |
|
this._tree.children = []; |
|
this.count = 0; |
|
this.nodesUpdate([]); |
|
}; |
|
PackTree.prototype.toString = function (space) { |
|
if (!space) { space = 0; } |
|
return JSON.stringify(this._tree, null, space); |
|
}; |
|
PackTree.prototype.toJSON = function () { |
|
return JSON.parse(this.toString()); |
|
}; |
|
|
|
|
|
window.PackTree = PackTree; |
|
|
|
})(window, d3); |
|
|
