@logicflow/extension 1.2.14 → 1.2.17

package/es/materials/curved-edge/index.js

@@ -38,81 +38,153 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-import { PolylineEdge, PolylineEdgeModel, h } from '@logicflow/core';
-import searchMiddleIndex from './searchMiddleIndex';
-var CurvedEdge = /** @class */ (function (_super) {
-    __extends(CurvedEdge, _super);
-    function CurvedEdge() {
-        return _super !== null && _super.apply(this, arguments) || this;
+import { PolylineEdge, PolylineEdgeModel, h, } from '@logicflow/core';
+var directionMap = {
+    tr: 'tl',
+    lb: 'tl',
+    tl: 'tr',
+    rb: 'tr',
+    br: 'bl',
+    lt: 'bl',
+    bl: 'br',
+    rt: 'br',
+};
+function pointFilter(points) {
+    var all = points;
+    var i = 1;
+    while (i < all.length - 1) {
+        var _a = __read(all[i - 1], 2), x = _a[0], y = _a[1];
+        var _b = __read(all[i], 2), x1 = _b[0], y1 = _b[1];
+        var _c = __read(all[i + 1], 2), x2 = _c[0], y2 = _c[1];
+        if ((x === x1 && x1 === x2) || (y === y1 && y1 === y2)) {
+            all.splice(i, 1);
+        }
+        else {
+            i++;
+        }
     }
-    CurvedEdge.prototype.pointFilter = function (points) {
-        var allPoints = points;
-        var i = 1;
-        while (i < allPoints.length - 1) {
-            var _a = __read(allPoints[i - 1], 2), x = _a[0], y = _a[1];
-            var _b = __read(allPoints[i], 2), x1 = _b[0], y1 = _b[1];
-            var _c = __read(allPoints[i + 1], 2), x2 = _c[0], y2 = _c[1];
-            if ((x === x1 && x1 === x2)
-                || (y === y1 && y1 === y2)) {
-                allPoints.splice(i, 1);
+    return all;
+}
+function getMidPoints(cur, key, orientation, radius) {
+    var mid1 = [cur[0], cur[1]];
+    var mid2 = [cur[0], cur[1]];
+    switch (orientation) {
+        case 'tl': {
+            if (key === 'tr') {
+                mid1[1] += radius;
+                mid2[0] += radius;
             }
-            else {
-                i++;
+            else if (key === 'lb') {
+                mid1[0] += radius;
+                mid2[1] += radius;
             }
+            return [mid1, mid2];
         }
-        return allPoints;
-    };
-    CurvedEdge.prototype.getEdge = function () {
-        var model = this.props.model;
-        var points = model.points, isAnimation = model.isAnimation, arrowConfig = model.arrowConfig, _a = model.radius, radius = _a === void 0 ? 5 : _a;
-        var style = model.getEdgeStyle();
-        var animationStyle = model.getEdgeAnimationStyle();
-        var points2 = this.pointFilter(points.split(' ').map(function (p) { return p.split(',').map(function (a) { return Number(a); }); }));
-        var res = searchMiddleIndex(points2);
-        if (res) {
-            var _b = __read(res, 2), first = _b[0], last = _b[1];
-            var firstPoint = points2[first];
-            var lastPoint_1 = points2[last];
-            var flag = firstPoint.some(function (num, index) { return num === lastPoint_1[index]; });
-            if (!flag) {
-                var diff = (lastPoint_1[1] - firstPoint[1]) / 2;
-                var firstNextPoint = [lastPoint_1[0], lastPoint_1[1] - diff];
-                var lastPrePoint = [firstPoint[0], firstPoint[1] + diff];
-                points2.splice(first + 1, 0, lastPrePoint, firstNextPoint);
+        case 'tr': {
+            if (key === 'tl') {
+                mid1[1] += radius;
+                mid2[0] -= radius;
             }
+            else if (key === 'rb') {
+                mid1[0] -= radius;
+                mid2[1] += radius;
+            }
+            return [mid1, mid2];
         }
-        var _c = __read(points2[0], 2), startX = _c[0], startY = _c[1];
-        var d = "M" + startX + " " + startY;
-        // 1) 如果一个点不为开始和结束，则在这个点的前后增加弧度开始和结束点。
-        // 2) 判断这个点与前一个点的坐标
-        //    如果x相同则前一个点的x也不变，
-        //    y为（这个点的y 大于前一个点的y, 则 为 这个点的y - 5；小于前一个点的y, 则为这个点的y+5）
-        //    同理，判断这个点与后一个点的x,y是否相同，如果x相同，则y进行加减，如果y相同，则x进行加减
-        for (var i = 1; i < points2.length - 1; i++) {
-            var _d = __read(points2[i - 1], 2), preX = _d[0], preY = _d[1];
-            var _e = __read(points2[i], 2), currentX = _e[0], currentY = _e[1];
-            var _f = __read(points2[i + 1], 2), nextX = _f[0], nextY = _f[1];
-            if (currentX === preX && currentY !== preY) {
-                var y = currentY > preY ? currentY - radius : currentY + radius;
-                d = d + " L " + currentX + " " + y;
+        case 'bl': {
+            if (key === 'br') {
+                mid1[1] -= radius;
+                mid2[0] += radius;
             }
-            if (currentY === preY && currentX !== preX) {
-                var x = currentX > preX ? currentX - radius : currentX + radius;
-                d = d + " L " + x + " " + currentY;
+            else if (key === 'lt') {
+                mid1[0] += radius;
+                mid2[1] -= radius;
             }
-            d = d + " Q " + currentX + " " + currentY;
-            if (currentX === nextX && currentY !== nextY) {
-                var y = currentY > nextY ? currentY - radius : currentY + radius;
-                d = d + " " + currentX + " " + y;
+            return [mid1, mid2];
+        }
+        case 'br': {
+            if (key === 'bl') {
+                mid1[1] -= radius;
+                mid2[0] -= radius;
             }
-            if (currentY === nextY && currentX !== nextX) {
-                var x = currentX > nextX ? currentX - radius : currentX + radius;
-                d = d + " " + x + " " + currentY;
+            else if (key === 'rt') {
+                mid1[0] -= radius;
+                mid2[1] -= radius;
             }
+            return [mid1, mid2];
         }
-        var _g = __read(points2[points2.length - 1], 2), endX = _g[0], endY = _g[1];
-        d = d + " L " + endX + " " + endY;
-        var attrs = __assign(__assign(__assign({ d: d, style: isAnimation ? animationStyle : {} }, style), arrowConfig), { fill: 'none' });
+        default:
+            return null;
+    }
+}
+function getPartialPath(prev, cur, next, radius) {
+    var _a;
+    var dir1 = '';
+    var dir2 = '';
+    var realRadius = radius;
+    if (prev[0] === cur[0]) {
+        dir1 = prev[1] > cur[1] ? 't' : 'b';
+        realRadius = Math.min(Math.abs(prev[0] - cur[0]), radius);
+    }
+    else if (prev[1] === cur[1]) {
+        dir1 = prev[0] > cur[0] ? 'l' : 'r';
+        realRadius = Math.min(Math.abs(prev[1] - cur[1]), radius);
+    }
+    if (cur[0] === next[0]) {
+        dir2 = cur[1] > next[1] ? 't' : 'b';
+        realRadius = Math.min(Math.abs(prev[0] - cur[0]), radius);
+    }
+    else if (cur[1] === next[1]) {
+        dir2 = cur[0] > next[0] ? 'l' : 'r';
+        realRadius = Math.min(Math.abs(prev[1] - cur[1]), radius);
+    }
+    var key = "" + dir1 + dir2;
+    var orientation = directionMap[key] || '-';
+    var path = "L " + prev[0] + " " + prev[1];
+    if (orientation === '-') {
+        path += "L " + cur[0] + " " + cur[1] + " L " + next[0] + " " + next[1];
+    }
+    else {
+        var _b = __read(getMidPoints(cur, key, orientation, realRadius) || [], 2), mid1 = _b[0], mid2 = _b[1];
+        if (mid1 && mid2) {
+            path += "L " + mid1[0] + " " + mid1[1] + " Q " + cur[0] + " " + cur[1] + " " + mid2[0] + " " + mid2[1];
+            _a = __read(mid2, 2), cur[0] = _a[0], cur[1] = _a[1];
+        }
+    }
+    return path;
+}
+function getCurvedEdgePath(points, radius) {
+    var i = 0;
+    var d = '';
+    if (points.length === 2) {
+        d += "M" + points[i][0] + " " + points[i++][1] + " L " + points[i][0] + " " + points[i][1];
+    }
+    else {
+        d += "M" + points[i][0] + " " + points[i++][1];
+        for (; i + 1 < points.length;) {
+            var prev = points[i - 1];
+            var cur = points[i];
+            var next = points[i++ + 1];
+            d += getPartialPath(prev, cur, next, radius);
+        }
+        d += "L " + points[i][0] + " " + points[i][1];
+    }
+    return d;
+}
+var CurvedEdge = /** @class */ (function (_super) {
+    __extends(CurvedEdge, _super);
+    function CurvedEdge() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CurvedEdge.prototype.getEdge = function () {
+        var model = this.props.model;
+        var pointsStr = model.points, isAnimation = model.isAnimation, arrowConfig = model.arrowConfig, _a = model.radius, radius = _a === void 0 ? 5 : _a;
+        var style = model.getEdgeStyle();
+        var animationStyle = model.getEdgeAnimationStyle();
+        var points = pointFilter(pointsStr.split(' ').map(function (p) { return p.split(',').map(function (a) { return +a; }); }));
+        var d = getCurvedEdgePath(points, radius);
+        var attrs = __assign(__assign(__assign({ style: isAnimation ? animationStyle : {} }, style), arrowConfig), { fill: 'none' });
+        console.log(pointsStr, pointsStr.split(' ').map(function (p) { return p.split(',').map(function (a) { return +a; }); }), d);
         return h('path', __assign({ d: d }, attrs));
     };
     return CurvedEdge;
@@ -124,6 +196,10 @@ var CurvedEdgeModel = /** @class */ (function (_super) {
     }
     return CurvedEdgeModel;
 }(PolylineEdgeModel));
-export { CurvedEdge, 
-// CurvedEdgeView,
-CurvedEdgeModel, };
+var defaultCurvedEdge = {
+    type: 'curved-edge',
+    view: CurvedEdge,
+    model: CurvedEdgeModel,
+};
+export default defaultCurvedEdge;
+export { CurvedEdge, CurvedEdgeModel, getCurvedEdgePath };

package/es/materials/group/GroupNode.js

@@ -136,7 +136,8 @@ var GroupNodeModel = /** @class */ (function (_super) {
             if (nodeModel.isGroup && !nodeModel.isFolded) {
                 // 正常情况下，parent折叠后，children应该折叠
                 // 因此当parent准备展开时，children的值目前肯定是折叠状态，也就是nodeModel.isFolded=true，这个代码块不会触发
-                // 只有当parent准备折叠时，children目前状态才有可能是展开，即nodeModel.isFolded=false，这个代码块触发，此时isFolded=true，触发children也进行折叠
+                // 只有当parent准备折叠时，children目前状态才有可能是展开,
+                // 即nodeModel.isFolded=false，这个代码块触发，此时isFolded=true，触发children也进行折叠
                 nodeModel.foldGroup(isFolded);
             }
             if (nodeModel.isGroup && !isFolded) {
@@ -277,6 +278,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
      */
     GroupNodeModel.prototype.addChild = function (id) {
         this.children.add(id);
+        this.graphModel.eventCenter.emit('group:add-node', { data: this.getData() });
     };
     /**
      * 删除分组子节点
@@ -284,6 +286,7 @@ var GroupNodeModel = /** @class */ (function (_super) {
      */
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
+        this.graphModel.eventCenter.emit('group:remove-node', { data: this.getData() });
     };
     GroupNodeModel.prototype.getAddableOutlineStyle = function () {
         return {

package/es/materials/group/index.d.ts

@@ -1,4 +1,4 @@
-import LogicFlow, { BaseNodeModel } from '@logicflow/core';
+import LogicFlow, { BaseEdgeModel, BaseNodeModel, EdgeConfig } from '@logicflow/core';
 import GroupNode from './GroupNode';
 declare type BaseNodeId = string;
 declare type GroupId = string;
@@ -17,6 +17,15 @@ declare class Group {
     constructor({ lf }: {
         lf: any;
     });
+    /**
+     * 创建一个Group类型节点内部的所有子节点的副本
+     * 并且在遍历所有nodes的过程中顺便拿到所有edges（只在Group范围的edges）
+     */
+    createAllChildNodes(nodeIdMap: Record<string, string>, children: Set<string>, current: BaseNodeModel, distance: number): {
+        nodesArray: BaseNodeModel[];
+        edgesArray: EdgeConfig[];
+    };
+    createEdgeModel(edge: EdgeConfig, nodeIdMap: Record<string, string>, distance: number): BaseEdgeModel;
     /**
      * 获取一个节点内部所有的子节点，包裹分组的子节点
      */

package/es/materials/group/index.js

@@ -1,3 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+/* eslint-disable no-shadow */
+import { EventType, } from '@logicflow/core';
 import GroupNode from './GroupNode';
 var DEFAULT_TOP_Z_INDEX = -1000;
 var DEFAULT_BOTTOM_Z_INDEX = -10000;
@@ -158,13 +202,15 @@ var Group = /** @class */ (function () {
         lf.register(GroupNode);
         this.lf = lf;
         lf.graphModel.addNodeMoveRules(function (model, deltaX, deltaY) {
-            if (model.isGroup) { // 如果移动的是分组，那么分组的子节点也跟着移动。
+            if (model.isGroup) {
+                // 如果移动的是分组，那么分组的子节点也跟着移动。
                 var nodeIds = _this.getNodeAllChild(model);
                 lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true);
                 return true;
             }
             var groupModel = lf.getNodeModelById(_this.nodeGroupMap.get(model.id));
-            if (groupModel && groupModel.isRestrict) { // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
+            if (groupModel && groupModel.isRestrict) {
+                // 如果移动的节点存在分组中，且这个分组禁止子节点移出去。
                 var _a = model.getBounds(), x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
                 var r = groupModel.isAllowMoveTo({
                     x1: x1 + deltaX,
@@ -182,7 +228,143 @@ var Group = /** @class */ (function () {
         lf.on('node:dnd-drag,node:drag', this.setActiveGroup);
         lf.on('node:click', this.nodeSelected);
         lf.on('graph:rendered', this.graphRendered);
+        // https://github.com/didi/LogicFlow/issues/1346
+        // 重写addElements()方法，在addElements()原有基础上增加对group内部所有nodes和edges的复制功能
+        lf.addElements = function (_a, distance) {
+            var selectedNodes = _a.nodes, selectedEdges = _a.edges;
+            // ============== 变量初始化 ==============
+            var nodeIdMap = {};
+            var elements = {
+                nodes: [],
+                edges: [],
+            };
+            var groupInnerEdges = [];
+            // ============== 变量初始化 ==============
+            for (var i = 0; i < selectedNodes.length; i++) {
+                var node = selectedNodes[i];
+                var preId = node.id;
+                // @ts-ignore
+                var children = node.children, rest = __rest(node, ["children"]);
+                var nodeModel = lf.addNode(rest);
+                if (!nodeModel)
+                    return { nodes: [], edges: [] };
+                if (preId)
+                    nodeIdMap[preId] = nodeModel.id;
+                elements.nodes.push(nodeModel); // group的nodeModel
+                // 递归创建group的nodeModel的children
+                var edgesArray = _this.createAllChildNodes(nodeIdMap, children, nodeModel, distance).edgesArray;
+                groupInnerEdges.push.apply(groupInnerEdges, __spread(edgesArray));
+            }
+            groupInnerEdges.forEach(function (edge) {
+                _this.createEdgeModel(edge, nodeIdMap, distance);
+            });
+            // 构建的时候直接偏移，这里不需要再进行再度偏移
+            // groupInnerChildren.nodes.forEach(node => this.translationNodeData(node, distance));
+            // groupInnerChildren.edges.forEach(edge => this.translationEdgeData(edge, distance));
+            // 最外层的edges继续执行创建edgeModel的流程
+            selectedEdges.forEach(function (edge) {
+                var edgeModel = _this.createEdgeModel(edge, nodeIdMap, distance);
+                elements.edges.push(edgeModel);
+            });
+            // 返回elements进行选中效果，即触发element.selectElementById()
+            // shortcut.ts也会对最外层的nodes和edges进行偏移，即translationNodeData()
+            return elements;
+        };
     }
+    /**
+     * 创建一个Group类型节点内部的所有子节点的副本
+     * 并且在遍历所有nodes的过程中顺便拿到所有edges（只在Group范围的edges）
+     */
+    Group.prototype.createAllChildNodes = function (nodeIdMap, children, current, distance) {
+        var _this = this;
+        var lf = this.lf;
+        var edgesDataArray = [];
+        var edgesNodeModelArray = [];
+        var nodesArray = [];
+        children === null || children === void 0 ? void 0 : children.forEach(function (childId) {
+            var childNodeModel = lf.getNodeModelById(childId);
+            var x = childNodeModel.x, y = childNodeModel.y, properties = childNodeModel.properties, type = childNodeModel.type, text = childNodeModel.text, rotate = childNodeModel.rotate, children = childNodeModel.children, incoming = childNodeModel.incoming, outgoing = childNodeModel.outgoing;
+            // @ts-ignore
+            var eventType = EventType.NODE_GROUP_COPY || 'node:group-copy-add';
+            var newChildModel = lf.addNode({
+                x: x + distance,
+                y: y + distance,
+                properties: properties,
+                type: type,
+                text: __assign(__assign({}, text), { x: text.x + distance, y: text.y + distance }),
+                rotate: rotate,
+            }, eventType);
+            current.addChild(newChildModel.id);
+            nodeIdMap[childId] = newChildModel.id;
+            nodesArray.push(newChildModel);
+            // 存储children内部节点相关的输入边
+            childNodeModel.incoming.edges.forEach(function (edge) {
+                edgesNodeModelArray.push(edge);
+            });
+            // 存储children内部节点相关的输出边
+            childNodeModel.outgoing.edges.forEach(function (edge) {
+                edgesNodeModelArray.push(edge);
+            });
+            if (children instanceof Set) {
+                var _a = _this.createAllChildNodes(nodeIdMap, children, newChildModel, distance), childNodes = _a.nodesArray, childEdges = _a.edgesArray;
+                nodesArray.push.apply(nodesArray, __spread(childNodes));
+                edgesDataArray.push.apply(edgesDataArray, __spread(childEdges));
+            }
+        });
+        // 1. 判断每一条边的开始节点和目标节点是否在Group中
+        var filterEdgesArray = edgesNodeModelArray.filter(function (edge) { return nodeIdMap[edge.sourceNodeId] && nodeIdMap[edge.targetNodeId]; });
+        // 2. 为每一条group的内部边构建出EdgeData数据
+        // 从GraphModel.ts的getSelectElements()可以知道EdgeConfig就是EdgeData
+        var filterEdgesDataArray = filterEdgesArray.map(function (item) { return item.getData(); });
+        return {
+            nodesArray: nodesArray,
+            edgesArray: edgesDataArray.concat(filterEdgesDataArray),
+        };
+    };
+    Group.prototype.createEdgeModel = function (edge, nodeIdMap, distance) {
+        var lf = this.lf;
+        var sourceId = edge.sourceNodeId;
+        var targetId = edge.targetNodeId;
+        if (nodeIdMap[sourceId])
+            sourceId = nodeIdMap[sourceId];
+        if (nodeIdMap[targetId])
+            targetId = nodeIdMap[targetId];
+        var type = edge.type, startPoint = edge.startPoint, endPoint = edge.endPoint, pointsList = edge.pointsList, text = edge.text, rest = __rest(edge, ["type", "startPoint", "endPoint", "pointsList", "text"]);
+        // ====== 仿造shortcut.ts的translationEdgeData()逻辑 ======
+        var newStartPoint = {
+            x: startPoint.x + distance,
+            y: startPoint.y + distance,
+        };
+        var newEndPoint = {
+            x: endPoint.x + distance,
+            y: endPoint.y + distance,
+        };
+        var newPointsList = [];
+        if (pointsList && pointsList.length > 0) {
+            newPointsList = pointsList.map(function (point) {
+                point.x += distance;
+                point.y += distance;
+                return point;
+            });
+        }
+        var newText = text;
+        if (text && typeof text !== 'string') {
+            newText.x = text.x + distance;
+            newText.y = text.y + distance;
+        }
+        // ====== 仿造shortcut.ts的translationEdgeData()逻辑 ======
+        // 简化复制时的参数传入，防止创建出两个edge属于同个group这种情况
+        var edgeModel = lf.graphModel.addEdge({
+            type: type,
+            startPoint: newStartPoint,
+            endPoint: newEndPoint,
+            sourceNodeId: sourceId,
+            targetNodeId: targetId,
+            pointsList: newPointsList,
+            text: newText,
+        });
+        return edgeModel;
+    };
     /**
      * 获取一个节点内部所有的子节点，包裹分组的子节点
      */

package/es/tools/snapshot/index.d.ts

@@ -15,6 +15,7 @@ declare class Snapshot {
     getSvgRootElement(lf: any): any;
     triggerDownload(imgURI: string): void;
     removeAnchor(element: any): void;
+    removeRotateControl(element: any): void;
     getSnapshot(fileName: string, backgroundColor: string): void;
     getSnapshotBase64(backgroundColor: string): Promise<unknown>;
     getSnapshotBlob(backgroundColor: string): Promise<unknown>;

package/es/tools/snapshot/index.js

@@ -53,6 +53,19 @@ var Snapshot = /** @class */ (function () {
             }
         }
     };
+    Snapshot.prototype.removeRotateControl = function (element) {
+        var childNodes = element.childNodes;
+        var childLength = element.childNodes && element.childNodes.length;
+        for (var i = 0; i < childLength; i++) {
+            var child = childNodes[i];
+            var classList = (child.classList && Array.from(child.classList)) || [];
+            if (classList.indexOf('lf-rotate-control') > -1) {
+                element.removeChild(element.childNodes[i]);
+                childLength--;
+                i--;
+            }
+        }
+    };
     /* 下载图片 */
     Snapshot.prototype.getSnapshot = function (fileName, backgroundColor) {
         var _this = this;
@@ -129,6 +142,7 @@ var Snapshot = /** @class */ (function () {
                         lfBase.childNodes.forEach(function (item) {
                             var element = item;
                             _this.removeAnchor(element.firstChild);
+                            _this.removeRotateControl(element.firstChild);
                         });
                 }
             }