@logicflow/extension
Version:
LogicFlow Extensions
320 lines (319 loc) • 12.4 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MindMap = exports.FAKER_NODE = exports.ROOT_NODE = void 0;
var hierarchy_1 = __importDefault(require("@antv/hierarchy"));
var markEntity_1 = __importDefault(require("./markEntity"));
var fakerRoot_1 = __importDefault(require("./fakerRoot"));
var markRoot_1 = __importDefault(require("./markRoot"));
var markContent_1 = __importDefault(require("./markContent"));
var markContentOption_1 = __importDefault(require("./markContentOption"));
var theme_1 = require("./theme");
exports.ROOT_NODE = 'mark:root';
exports.FAKER_NODE = 'faker:root';
var FIRST_ROOT_X = 10;
var FIRST_ROOT_Y = 10;
var MindMap = /** @class */ (function () {
function MindMap(_a) {
var lf = _a.lf;
var _this = this;
/**
* 将传入的数据转换为logicflow格式的数据
*/
this.adapterIn = function (trees) {
var tree = {
id: 'faker:root',
type: 'faker:root',
x: 0,
y: 0,
children: trees,
};
var newtree = _this.layoutTree(tree);
var graphData = _this.treeToGraph(newtree);
return graphData;
};
/**
* 将logicflow格式的数据转换为mindmap需要的数据
*/
this.adapterOut = function (graphData) { return _this.graphToTree(graphData).children; };
this.lf = lf;
lf.adapterIn = this.adapterIn;
lf.adapterOut = this.adapterOut;
lf.setTheme(theme_1.theme);
lf.register(fakerRoot_1.default);
lf.register(markRoot_1.default);
lf.register(markContent_1.default);
lf.register(markContentOption_1.default);
lf.register(markEntity_1.default);
lf.setDefaultEdgeType('bezier');
lf.updateEditConfig({
hideAnchors: true,
adjustNodePosition: false,
edgeTextEdit: false,
adjustEdge: false,
});
lf.graphModel.transformModel.translate(200, 200);
this.setContextMenu();
/**
* 删除树上的某一个点和这个点后面所有的点
*/
lf.removeTreeNode = function (nodeId) {
var nodesMap = _this.getGraphTreeData().nodesMap;
var node = nodesMap.get(nodeId);
if (node.type === exports.ROOT_NODE) {
return;
}
_this.removeNode(node);
_this.renderTree();
};
/**
* 重新排布树
*/
lf.renderTree = function () {
_this.renderTree();
};
/**
* 监听删除
*/
this.lf.keyboard.on('backspace', function () {
var nodes = _this.lf.getSelectElements(true).nodes;
if (nodes.length > 0) {
_this.lf.clearSelectElements();
nodes.forEach(function (node) {
_this.lf.removeTreeNode(node.id);
});
}
});
}
MindMap.prototype.setContextMenu = function () {
var _this = this;
var menuItem = [
{
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAA5NJREFUWEfNmOtRFEEQgHsiACIQIkAiADOQCMAI7I0AjOCaCMQIxAg4IlAjQCIQIhjrW3uuZvf2bmf2Vov+d3Xz+LbfPUFeuYS5+JqmOU1nxRhfzOzHHGdPAlTVwxDCaYzxvYicicj+BphnEbkLISxjjN/MjN9VUgWoqsB8FBHAkJ8ishSRXyLS11gCZ+0bX38rIp/MjPVFUgSoqmhoISKXIvIiIiYit6UXqepb/6grp7oWkZsSjY4Cuta+ighrAbOSg4fUg2uICHAXrvEPY766FVBV0dhnN+Xl2GFFNhMR/+g7EYki8m7buRsBM7gHzFOiNVXF357NDL/cKq5NIPHPjZCDgO4z92jOzHD2IlHVFqx0j/s2e4A8GfLpNUDf9N2D4axEc4m+FpB9rgwgH83spK+JIUBSQZvfan1uCqBDch+BSAoiiFbSAXS/eBxaWGLjqYAOiRaPReQot1ofMGnvsMa0u5g420uuxLU6WlwBuu/9nqq9TAvFQdK3iqqioFMzO0r/5YAp5xFNkwr9Lib2D1xjyAGhJzDI9pNkBkBKKlZsKFdA5ID88cXMdBLd35RRlQeH7umfkQNSdtbCvAZ2JkAseZxyYguYpZdzM6P8TJKZAMmDV2bWsiVAyhmljZq4qqNeW+n/SoVUsal5HTqDBrZTh1W1CjD1caWARCGCmUql074NArqZ8UH6s5rDOxD/zMQZ4GsIEmJgP3VEeRQzJyzNLJmp1ESrdTNpkHL3ZGbt3JMDkhgvzOygmsw37AqYZZOVq+WAqeXpRHIN7AyAFAmGMzqadvLrdzPtHDvVzDMAkuoOzIzs0UofsM1B+Rf8Lw1mM1Ankww1rHQy92Z2XgPnmWByLVZVGuXQb1aGWv6kxeqc6CZmqksvD0XfmJJzv5KtmTid5hfRfm+dWfu3+z5SVWeu2EaZmZZOai3FbRo76QkxNdWlMyOMXIaJiwGz8fbJe9G1x6VtgzuRxIWj03+mefZg4tHHIdccKWUj3EYT9y4Eci+EoIvF4qbIqUYWqSqZAjfgdWzr7F3yeET7RH3kgRJY6vXo08YQY9M0FzFGwHAhPvZ6bHocBcy0iQNTDvcADSHcxhgfxsyJn/ljJ1UCMEzKQ1TRRxYDep5Dm6QQLiPKEYIJ584vZB3+CFAawjAnvV9VO1cFmJvNCzudOMAAAZJeUtESgdJ2SF4+q59/R4NkjoDY9YzJGtz14tL9fwB50PM48Yfe+AAAAABJRU5ErkJggg==',
className: 'lf-mindmap_addIcon',
callback: function (data) {
_this.addChild(data);
},
},
];
this.lf.setContextMenuByType(exports.ROOT_NODE, menuItem);
this.lf.setContextMenuByType('mark:entity', menuItem);
this.lf.setContextMenuByType('mark:content', menuItem);
this.lf.setContextMenuByType('mark:content-option', menuItem);
};
MindMap.prototype.addChild = function (data) {
var type = 'mark:content-option';
switch (data.type) {
case exports.ROOT_NODE:
type = 'mark:entity';
break;
case 'mark:entity':
type = 'mark:content';
break;
default:
break;
}
var nodeModel = this.lf.addNode({
type: type,
x: data.x,
y: data.y,
});
this.lf.addEdge({
sourceNodeId: data.id,
targetNodeId: nodeModel.id,
});
this.renderTree();
};
MindMap.prototype.removeNode = function (node) {
var _this = this;
if (node.children && node.children.length > 0) {
node.children.forEach(function (subNode) {
_this.removeNode(subNode);
});
}
this.lf.deleteNode(node.id);
};
MindMap.prototype.getGraphTreeData = function () {
var graphData = this.lf.getGraphRawData();
var nodesMap = new Map();
var rootNodes = [];
var root = null;
graphData.nodes.forEach(function (node) {
var treeNode = {
id: node.id,
type: node.type,
properties: node.properties,
x: node.x,
y: node.y,
children: [],
};
nodesMap.set(node.id, treeNode);
if (node.type === exports.ROOT_NODE) {
rootNodes.push(node.id);
}
if (node.type === exports.FAKER_NODE) {
root = treeNode;
}
});
graphData.edges.forEach(function (edge) {
var node = nodesMap.get(edge.sourceNodeId);
node.children.push(nodesMap.get(edge.targetNodeId));
});
rootNodes.forEach(function (nodeId) {
root.children.push(nodesMap.get(nodeId));
});
return {
root: root,
nodesMap: nodesMap,
};
};
MindMap.prototype.renderTree = function () {
var graphData = this.lf.getGraphRawData();
var tree = this.graphToTree(graphData);
tree = this.layoutTree(tree);
graphData = this.treeToGraph(tree);
this.lf.graphModel.graphDataToModel(graphData);
};
MindMap.prototype.graphToTree = function (graphData) {
var tree = null;
var nodesMap = new Map();
var roots = [];
graphData.nodes.forEach(function (node) {
var treeNode = {
id: node.id,
type: node.type,
properties: node.proerties,
text: node.text,
children: [],
};
nodesMap.set(node.id, treeNode);
if (node.type === 'mark:root') {
roots.push(node);
}
if (node.type === exports.FAKER_NODE) {
tree = treeNode;
}
});
graphData.edges.forEach(function (edge) {
var node = nodesMap.get(edge.sourceNodeId);
node.children.push(nodesMap.get(edge.targetNodeId));
});
if (tree && tree.children) {
tree.children = roots.map(function (root) { return nodesMap.get(root.id); });
}
return tree;
};
/**
* 将树这种数据格式转换为图
*/
MindMap.prototype.treeToGraph = function (rootNode) {
var nodes = [];
var edges = [];
function getNode(current, parent) {
if (parent === void 0) { parent = null; }
var node = {
id: current.id,
x: current.x,
y: current.y,
type: current.type || current.data.type,
properties: current.properties || {},
};
nodes.push(node);
if (current.children) {
current.children.forEach(function (subNode) {
getNode(subNode, node);
});
}
if (parent && parent.type !== exports.FAKER_NODE) {
var edge = {
sourceNodeId: parent.id,
targetNodeId: node.id,
type: 'bezier',
};
edges.push(edge);
}
}
getNode(rootNode);
return {
nodes: nodes,
edges: edges,
};
};
/**
* 由于树这种数据格式本身是没有坐标的
* 需要使用一些算法来将树转换为有坐标的树
*/
MindMap.prototype.layoutTree = function (tree) {
if (!tree || !tree.children || tree.children.length === 0)
return tree;
var NODE_SIZE = 40;
var PEM = 20;
tree.isRoot = true;
var rootNode = hierarchy_1.default.compactBox(tree, {
direction: 'LR',
getId: function (d) {
return d.id;
},
getHeight: function (d) {
if (d.type === exports.ROOT_NODE) {
return NODE_SIZE * 4;
}
return NODE_SIZE;
},
getWidth: function () {
return 200 + PEM * 1.6;
},
getHGap: function () {
return PEM;
},
getVGap: function () {
return PEM;
},
getSubTreeSep: function (d) {
if (!d.children || !d.children.length) {
return 0;
}
return PEM;
},
});
// const { nodes, edges } = this.treeToGraph(rootNode);
// 将根节点位置平移回原位置
// 保证第一个根节点在画布位置不变
// 为什么取第一个child呢，这里是因为一张图上存在多个树的情况下
// 我们需要使用一个虚拟的节点(faker:root)作为所有树的根节点
// 这样在使用树布局算法的时候方便统一处理。
// 但是为了在视觉上保证图形不抖动，
// 我们需要把第一个真实的根节点位置保持不动
var x = tree.children[0].x || FIRST_ROOT_X;
var y = tree.children[0].y || FIRST_ROOT_Y;
var x1 = rootNode.children[0].x;
var y1 = rootNode.children[0].y;
var moveX = x - x1;
var moveY = y - y1;
var newTree = this.dfsTree(rootNode, function (currentNode) { return ({
id: currentNode.id,
x: currentNode.x + moveX,
y: currentNode.y + moveY,
type: currentNode.data.type,
}); });
return newTree;
};
/**
* 遍历树的每一项，已传入的回调方法重新构建一个新的树
*/
MindMap.prototype.dfsTree = function (tree, callback) {
var _this = this;
var newTree = callback(tree);
if (tree.children && tree.children.length > 0) {
newTree.children = tree.children.map(function (treeNode) {
return _this.dfsTree(treeNode, callback);
});
}
return newTree;
};
MindMap.pluginName = 'MindMap';
return MindMap;
}());
exports.MindMap = MindMap;