@logicflow/extension 1.1.0-alpha.2 → 1.1.0-alpha.6

package/cjs/NodeResize/Control/Control.js

@@ -28,7 +28,6 @@ var preact_1 = require("preact");
 var core_1 = require("@logicflow/core");
 var Rect_1 = require("../BasicShape/Rect");
 var Util_1 = require("./Util");
-var index_1 = require("../index");
 var createDrag = core_1.LogicFlowUtil.createDrag;
 var Control = /** @class */ (function (_super) {
     __extends(Control, _super);
@@ -213,11 +212,11 @@ var Control = /** @class */ (function (_super) {
                 pct: 1 / 2,
             });
             // 限制放大缩小的最大最小范围
-            var _c = index_1.default.sizeRange.ellipse, minRx = _c.minRx, minRy = _c.minRy, maxRx = _c.maxRx, maxRy = _c.maxRy;
-            if (size.width < minRx
-                || size.width > maxRx
-                || size.height < minRy
-                || size.height > maxRy) {
+            var _c = _this.nodeModel, minWidth = _c.minWidth, minHeight = _c.minHeight, maxWidth = _c.maxWidth, maxHeight = _c.maxHeight;
+            if (size.width < (minWidth / 2)
+                || size.width > (maxWidth / 2)
+                || size.height < (minHeight / 2)
+                || size.height > (maxHeight / 2)) {
                 return;
             }
             // 更新中心点位置，更新文案位置
@@ -273,6 +272,7 @@ var Control = /** @class */ (function (_super) {
             // html和矩形的计算方式是一样的，共用一个方法
             if (modelType === Util_1.ModelType.RECT_NODE || modelType === Util_1.ModelType.HTML_NODE) {
                 _this.updateRect({ deltaX: deltaX, deltaY: deltaY });
+                // this.nodeModel.resize(deltaX, deltaY);
             }
             else if (modelType === Util_1.ModelType.ELLIPSE_NODE) {
                 _this.updateEllipse({ deltaX: deltaX, deltaY: deltaY });
@@ -315,10 +315,10 @@ var Control = /** @class */ (function (_super) {
         return { sourceEdges: sourceEdges, targetEdges: targetEdges };
     };
     Control.prototype.render = function () {
-        var _a = this.props, x = _a.x, y = _a.y, style = _a.style, index = _a.index;
-        var _b = index_1.default.style.controlPoint, width = _b.width, height = _b.height, fill = _b.fill, stroke = _b.stroke;
+        var _a = this.props, x = _a.x, y = _a.y, index = _a.index, model = _a.model;
+        var style = model.getControlPointStyle();
         return (preact_1.h("g", { className: "lf-resize-control-" + index },
-            preact_1.h(Rect_1.default, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { width: width, height: height, fill: fill, stroke: stroke, onMouseDown: this.dragHandler }))));
+            preact_1.h(Rect_1.default, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler }))));
     };
     return Control;
 }(preact_1.Component));

package/cjs/NodeResize/Control/ControlGroup.js

@@ -27,7 +27,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var preact_1 = require("preact");
 var Control_1 = require("./Control");
 var Rect_1 = require("../BasicShape/Rect");
-var index_1 = require("../index");
 var ControlGroup = /** @class */ (function (_super) {
     __extends(ControlGroup, _super);
     function ControlGroup() {
@@ -46,18 +45,22 @@ var ControlGroup = /** @class */ (function (_super) {
         };
         var minX = box.minX, minY = box.minY, maxX = box.maxX, maxY = box.maxY;
         var controlList = [
+            // 左上角
             {
                 x: minX,
                 y: minY,
             },
+            // 右上角
             {
                 x: maxX,
                 y: minY,
             },
+            // 右下角
             {
                 x: maxX,
                 y: maxY,
             },
+            // 左下角
             {
                 x: minX,
                 y: maxY,
@@ -67,9 +70,10 @@ var ControlGroup = /** @class */ (function (_super) {
     };
     // 一般节点被选中了会有outline, 先不用这个
     ControlGroup.prototype.getGroupSolid = function () {
-        var _a = this.props.model, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
-        var _b = index_1.default.style.outline, stroke = _b.stroke, strokeWidth = _b.strokeWidth, strokeDasharray = _b.strokeDasharray;
-        return (preact_1.h(Rect_1.default, { fill: "none", x: x, y: y, width: width, height: height, stroke: stroke, strokeWidth: strokeWidth, strokeDasharray: strokeDasharray }));
+        var model = this.props.model;
+        var x = model.x, y = model.y, width = model.width, height = model.height;
+        var style = model.getResizeOutlineStyle();
+        return (preact_1.h(Rect_1.default, __assign({ fill: "none" }, style, { x: x, y: y, width: width, height: height })));
     };
     ControlGroup.prototype.render = function () {
         return (preact_1.h("g", { className: "lf-resize-control" },

package/cjs/NodeResize/Node/DiamondResize.js

@@ -30,7 +30,12 @@ var Polygon_1 = require("../BasicShape/Polygon");
 var DiamondResizeModel = /** @class */ (function (_super) {
     __extends(DiamondResizeModel, _super);
     function DiamondResizeModel() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.minWidth = 30;
+        _this.minHeight = 30;
+        _this.maxWidth = 2000;
+        _this.maxHeight = 2000;
+        return _this;
     }
     DiamondResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
@@ -40,6 +45,21 @@ var DiamondResizeModel = /** @class */ (function (_super) {
         }
         return style;
     };
+    DiamondResizeModel.prototype.getResizeOutlineStyle = function () {
+        return {
+            stroke: '#000000',
+            strokeWidth: 1,
+            strokeDasharray: '3,3',
+        };
+    };
+    DiamondResizeModel.prototype.getControlPointStyle = function () {
+        return {
+            width: 7,
+            height: 7,
+            fill: '#FFFFFF',
+            stroke: '#000000',
+        };
+    };
     DiamondResizeModel.prototype.setAttributes = function () {
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;

package/cjs/NodeResize/Node/EllipseResize.js

@@ -35,6 +35,21 @@ var EllipseResizeModel = /** @class */ (function (_super) {
         }
         return style;
     };
+    EllipseResizeModel.prototype.getResizeOutlineStyle = function () {
+        return {
+            stroke: '#000000',
+            strokeWidth: 1,
+            strokeDasharray: '3,3',
+        };
+    };
+    EllipseResizeModel.prototype.getControlPointStyle = function () {
+        return {
+            width: 7,
+            height: 7,
+            fill: '#FFFFFF',
+            stroke: '#000000',
+        };
+    };
     EllipseResizeModel.prototype.setAttributes = function () {
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;

package/cjs/NodeResize/Node/HtmlResize.js

@@ -33,6 +33,21 @@ var HtmlResizeModel = /** @class */ (function (_super) {
         }
         return style;
     };
+    HtmlResizeModel.prototype.getResizeOutlineStyle = function () {
+        return {
+            stroke: '#000000',
+            strokeWidth: 1,
+            strokeDasharray: '3,3',
+        };
+    };
+    HtmlResizeModel.prototype.getControlPointStyle = function () {
+        return {
+            width: 7,
+            height: 7,
+            fill: '#FFFFFF',
+            stroke: '#000000',
+        };
+    };
     HtmlResizeModel.prototype.setAttributes = function () {
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;

package/cjs/NodeResize/Node/RectResize.js

@@ -33,6 +33,22 @@ var RectResizeModel = /** @class */ (function (_super) {
         }
         return style;
     };
+    RectResizeModel.prototype.getResizeOutlineStyle = function () {
+        return {
+            fill: 'none',
+            stroke: '#000000',
+            strokeWidth: 1,
+            strokeDasharray: '3,3',
+        };
+    };
+    RectResizeModel.prototype.getControlPointStyle = function () {
+        return {
+            width: 7,
+            height: 7,
+            fill: '#FFFFFF',
+            stroke: '#000000',
+        };
+    };
     RectResizeModel.prototype.setAttributes = function () {
         // @ts-ignore
         var nodeSize = this.properties.nodeSize;
@@ -41,6 +57,9 @@ var RectResizeModel = /** @class */ (function (_super) {
             this.height = nodeSize.height;
         }
     };
+    RectResizeModel.prototype.resize = function (deltaX, deltaY) {
+        console.log(deltaX, deltaY);
+    };
     return RectResizeModel;
 }(core_1.RectNodeModel));
 var RectResizeView = /** @class */ (function (_super) {

package/cjs/NodeResize/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DiamondResize = exports.EllipseResize = exports.RectResize = exports.NodeResize = void 0;
+exports.HtmlResize = exports.DiamondResize = exports.EllipseResize = exports.RectResize = exports.NodeResize = void 0;
 var RectResize_1 = require("./Node/RectResize");
 exports.RectResize = RectResize_1.default;
 var EllipseResize_1 = require("./Node/EllipseResize");
@@ -8,45 +8,11 @@ exports.EllipseResize = EllipseResize_1.default;
 var DiamondResize_1 = require("./Node/DiamondResize");
 exports.DiamondResize = DiamondResize_1.default;
 var HtmlResize_1 = require("./Node/HtmlResize");
+exports.HtmlResize = HtmlResize_1.default;
 var NodeResize = {
     pluginName: 'nodeResize',
     // 拖动step
     step: 0,
-    // 边框和contol拖动点样式的设置
-    style: {
-        outline: {
-            stroke: '#000000',
-            strokeWidth: 1,
-            strokeDasharray: '3,3',
-        },
-        controlPoint: {
-            width: 7,
-            height: 7,
-            fill: '#FFFFFF',
-            stroke: '#000000',
-        },
-    },
-    // 缩放范围
-    sizeRange: {
-        // rect: {
-        //   minWidth: 30,
-        //   minHeight: 30,
-        //   maxWidth: 300,
-        //   maxHeight: 300,
-        // },
-        ellipse: {
-            minRx: 15,
-            minRy: 15,
-            maxRx: 150,
-            maxRy: 150,
-        },
-        diamond: {
-            minRx: 15,
-            minRy: 15,
-            maxRx: 150,
-            maxRy: 150,
-        },
-    },
     install: function (lf) {
         lf.register({
             type: RectResize_1.default.type,

package/cjs/materials/group/GroupNode.js

@@ -12,6 +12,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+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 __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -34,27 +45,126 @@ var __spread = (this && this.__spread) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@logicflow/core");
+var NodeResize_1 = require("../../NodeResize");
+var defaultWidth = 500;
+var defaultHeight = 300;
 var GroupNodeModel = /** @class */ (function (_super) {
     __extends(GroupNodeModel, _super);
     function GroupNodeModel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.isGroup = true;
-        _this.children = new Set();
-        _this.isRestrict = true; // 其子节点是否被禁止通过拖拽移出分组。 默认false，允许拖拽移除分组。
+        _this.unfoldedWidth = defaultWidth;
+        _this.unfoldedHight = defaultHeight;
         return _this;
     }
-    GroupNodeModel.prototype.setAttributes = function () {
-        this.width = 500;
-        this.height = 200;
-        this.strokeWidth = 1;
-        this.zIndex = 0;
+    GroupNodeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        var children = [];
+        if (Array.isArray(data.children)) {
+            children = data.children;
+        }
+        // 初始化组的子节点
+        this.children = new Set(children);
+        this.width = defaultWidth;
+        this.height = defaultHeight;
+        this.foldedWidth = 80;
+        this.foldedHeight = 60;
+        // todo: 参考bpmn.js, 分组和未加入分组的节点重合时，未加入分组的节点在分组之下。方便标识。
+        this.zIndex = -1;
         this.radius = 0;
+        this.text.editable = false;
+        this.text.draggable = false;
+        this.isRestrict = false;
+        this.resizable = false;
+        this.autoToFront = false;
+        this.foldable = false;
+        this.properties.isFolded = false;
+    };
+    GroupNodeModel.prototype.getResizeOutlineStyle = function () {
+        var style = _super.prototype.getResizeOutlineStyle.call(this);
+        style.stroke = 'none';
+        return style;
+    };
+    GroupNodeModel.prototype.foldGroup = function (isFolded) {
+        var _this = this;
+        this.setProperty('isFolded', isFolded);
+        if (isFolded) {
+            this.x = this.x - this.width / 2 + this.foldedWidth / 2;
+            this.y = this.y - this.height / 2 + this.foldedHeight / 2;
+            this.unfoldedWidth = this.width;
+            this.unfoldedHight = this.height;
+            this.width = this.foldedWidth;
+            this.height = this.foldedHeight;
+        }
+        else {
+            this.width = this.unfoldedWidth;
+            this.height = this.unfoldedHight;
+            this.x = this.x + this.width / 2 - this.foldedWidth / 2;
+            this.y = this.y + this.height / 2 - this.foldedHeight / 2;
+        }
+        // 移动分组上的连线
+        var inCommingEdges = this.graphModel.getNodeIncomingEdge(this.id);
+        var outgoingEdges = this.graphModel.getNodeOutgoingEdge(this.id);
+        inCommingEdges.concat(outgoingEdges).forEach(function (edgeModel) {
+            _this.graphModel.deleteEdgeById(edgeModel.id);
+            if (!edgeModel.isFoldedEdge) {
+                var isCommingEdge = edgeModel.targetNodeId === _this.id;
+                var data = edgeModel.getData();
+                if (isCommingEdge) {
+                    data.endPoint = undefined;
+                }
+                else {
+                    data.startPoint = undefined;
+                }
+                data.pointsList = undefined;
+                _this.graphModel.addEdge(data);
+            }
+        });
+        this.children.forEach(function (elementId) {
+            var nodeModel = _this.graphModel.getElement(elementId);
+            nodeModel.visible = !isFolded;
+            _this.foldEdge(elementId, isFolded);
+        });
     };
     /**
-     * 设置是否允许子节点被拖动移除分组
+     * 折叠分组的时候，处理分组内部子节点上的连线
+     * 1. 为了保证校验规则不被打乱，所以只隐藏子节点上面的连线。
+     * 2. 重新创建一个属性一样的边。
+     * 3. 这个边拥有virtual=true的属性，表示不支持直接修改此边内容。
      */
-    GroupNodeModel.prototype.setIsRestrict = function (isRestrict) {
-        this.isRestrict = isRestrict;
+    GroupNodeModel.prototype.foldEdge = function (nodeId, isFolded) {
+        var _this = this;
+        var inCommingEdges = this.graphModel.getNodeIncomingEdge(nodeId);
+        var outgoingEdges = this.graphModel.getNodeOutgoingEdge(nodeId);
+        inCommingEdges.concat(outgoingEdges).forEach(function (edgeModel, index) {
+            var _a;
+            edgeModel.visible = !isFolded;
+            if (isFolded
+                && (!_this.children.has(edgeModel.targetNodeId)
+                    || !_this.children.has(edgeModel.sourceNodeId))) {
+                var isCommingEdge = edgeModel.targetNodeId === nodeId;
+                if (isFolded) {
+                    var data = edgeModel.getData();
+                    data.id = data.id + "__" + index;
+                    if (isCommingEdge) {
+                        data.endPoint = undefined;
+                        data.targetNodeId = _this.id;
+                    }
+                    else {
+                        data.startPoint = undefined;
+                        data.sourceNodeId = _this.id;
+                    }
+                    data.text = (_a = data.text) === null || _a === void 0 ? void 0 : _a.value;
+                    data.pointsList = undefined;
+                    var model = _this.graphModel.addEdge(data);
+                    model.virtual = true;
+                    // 强制不保存group连线数据
+                    model.getData = function () { return null; };
+                    model.text.editable = false;
+                    model.isFoldedEdge = true;
+                }
+            }
+        });
     };
     GroupNodeModel.prototype.isInRange = function (_a) {
         var x1 = _a.x1, y1 = _a.y1, x2 = _a.x2, y2 = _a.y2;
@@ -63,39 +173,103 @@ var GroupNodeModel = /** @class */ (function (_super) {
             && y1 >= (this.y - this.height / 2)
             && y2 <= (this.y + this.height / 2);
     };
-    // todo: 更好的方式定义分组的样式
     GroupNodeModel.prototype.setAllowAppendChild = function (isAllow) {
-        if (isAllow) {
-            this.stroke = 'red';
-        }
-        else {
-            this.stroke = 'rgb(24, 125, 255)';
-        }
+        this.setProperty('groupAddable', isAllow);
     };
+    /**
+     * 添加分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.addChild = function (id) {
         this.children.add(id);
     };
+    /**
+     * 删除分组子节点
+     * @param id 节点id
+     */
     GroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
     };
+    GroupNodeModel.prototype.getAddableOutlineStyle = function () {
+        return {
+            stroke: '#FEB663',
+            strokeWidth: 2,
+            strokeDasharray: '4 4',
+            fill: 'transparent',
+        };
+    };
     GroupNodeModel.prototype.getData = function () {
         var data = _super.prototype.getData.call(this);
         data.children = __spread(this.children);
+        var properties = data.properties;
+        delete properties.groupAddable;
+        delete properties.isFolded;
         return data;
     };
     return GroupNodeModel;
-}(core_1.RectNodeModel));
+}(NodeResize_1.RectResize.model));
 var GroupNode = /** @class */ (function (_super) {
     __extends(GroupNode, _super);
     function GroupNode() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    /**
-     * 重新toFront，阻止其置顶
-     */
-    GroupNode.prototype.toFront = function () { };
+    GroupNode.prototype.getControlGroup = function () {
+        var _a = this.props.model, resizable = _a.resizable, properties = _a.properties;
+        return resizable && !properties.isFolded ? _super.prototype.getControlGroup.call(this) : null;
+    };
+    GroupNode.prototype.getAddedableShape = function () {
+        var _a = this.props.model, width = _a.width, height = _a.height, x = _a.x, y = _a.y, radius = _a.radius, properties = _a.properties;
+        if (!properties.groupAddable)
+            return null;
+        var strokeWidth = this.props.model.getNodeStyle().strokeWidth;
+        var style = this.props.model.getAddableOutlineStyle();
+        var newWidth = width + strokeWidth + 8;
+        var newHeight = height + strokeWidth + 8;
+        return core_1.h('rect', __assign(__assign({}, style), { width: newWidth, height: newHeight, x: x - newWidth / 2, y: y - newHeight / 2, rx: radius, ry: radius }));
+    };
+    GroupNode.prototype.getFoldIcon = function () {
+        var model = this.props.model;
+        var foldX = model.x - model.width / 2 + 5;
+        var foldY = model.y - model.height / 2 + 5;
+        if (!model.foldable)
+            return null;
+        var iconIcon = core_1.h('path', {
+            fill: 'none',
+            stroke: '#818281',
+            strokeWidth: 2,
+            'pointer-events': 'none',
+            d: model.properties.isFolded
+                ? "M " + (foldX + 3) + "," + (foldY + 6) + " " + (foldX + 11) + "," + (foldY + 6) + " M" + (foldX + 7) + "," + (foldY + 2) + " " + (foldX + 7) + "," + (foldY + 10)
+                : "M " + (foldX + 3) + "," + (foldY + 6) + " " + (foldX + 11) + "," + (foldY + 6) + " ",
+        });
+        return core_1.h('g', {}, [
+            core_1.h('rect', {
+                height: 12,
+                width: 14,
+                rx: 2,
+                ry: 2,
+                strokeWidth: 1,
+                fill: '#F4F5F6',
+                stroke: '#CECECE',
+                cursor: 'pointer',
+                x: model.x - model.width / 2 + 5,
+                y: model.y - model.height / 2 + 5,
+                onClick: function () {
+                    model.foldGroup(!model.properties.isFolded);
+                },
+            }),
+            iconIcon,
+        ]);
+    };
+    GroupNode.prototype.getResizeShape = function () {
+        return core_1.h('g', {}, [
+            this.getAddedableShape(),
+            _super.prototype.getResizeShape.call(this),
+            this.getFoldIcon(),
+        ]);
+    };
     return GroupNode;
-}(core_1.RectNode));
+}(NodeResize_1.RectResize.view));
 exports.default = {
     type: 'group',
     view: GroupNode,

package/cjs/materials/group/index.js

@@ -20,13 +20,26 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Group = void 0;
+exports.GroupNode = exports.Group = void 0;
 var GroupNode_1 = require("./GroupNode");
+exports.GroupNode = GroupNode_1.default;
 var Group = /** @class */ (function () {
     function Group(_a) {
         var _this = this;
         var lf = _a.lf;
         this.nodeGroupMap = new Map();
+        this.graphRendered = function (data) {
+            // 如果节点
+            if (data && data.nodes) {
+                data.nodes.forEach(function (node) {
+                    if (node.children) {
+                        node.children.forEach(function (nodeId) {
+                            _this.nodeGroupMap.set(nodeId, node.id);
+                        });
+                    }
+                });
+            }
+        };
         this.appendNodeToGrop = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
@@ -48,14 +61,19 @@ var Group = /** @class */ (function () {
         };
         this.setActiveGroup = function (_a) {
             var data = _a.data;
-            if (_this.activeGroup) {
-                _this.activeGroup.setAllowAppendChild(false);
-                _this.activeGroup = undefined;
-            }
-            var bounds = _this.lf.getNodeModelById(data.id).getBounds();
-            _this.activeGroup = _this.getGroup(bounds);
-            if (_this.activeGroup && _this.activeGroup.id !== data.id) {
-                _this.activeGroup.setAllowAppendChild(true);
+            var nodeModel = _this.lf.getNodeModelById(data.id);
+            if (nodeModel.isGroup)
+                return;
+            var bounds = nodeModel.getBounds();
+            var newGroup = _this.getGroup(bounds);
+            if (newGroup || newGroup !== _this.activeGroup) {
+                if (_this.activeGroup) {
+                    _this.activeGroup.setAllowAppendChild(false);
+                }
+                if (newGroup) {
+                    _this.activeGroup = newGroup;
+                    _this.activeGroup.setAllowAppendChild(true);
+                }
             }
         };
         lf.register(GroupNode_1.default);
@@ -82,6 +100,7 @@ var Group = /** @class */ (function () {
         lf.on('node:drop', this.appendNodeToGrop);
         lf.on('node:dnd-move', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
+        lf.on('graph:rendered', this.graphRendered);
     }
     Group.prototype.getGroups = function () {
         var groups = [];

package/cjs/style/index.css

@@ -22,8 +22,9 @@
   background: #efefef;
 }
 .lf-control-item.disabled {
-  filter: opacity(0.6);
-  cursor: not-allowed;
+  filter: opacity(0.5);
+  /* cursor: not-allowed; */
+  pointer-events: none;
 }
 .lf-control-item.disabled:hover {
   background: #fff;

package/cjs/tools/snapshot/index.js

@@ -9,21 +9,25 @@ var Snapshot = {
     install: function (lf) {
         var _this = this;
         this.lf = lf;
-        this.offsetX = Number.MAX_SAFE_INTEGER;
-        this.offsetY = Number.MAX_SAFE_INTEGER;
         /* 下载快照 */
         lf.getSnapshot = function (fileName, backgroundColor) {
+            _this.offsetX = Number.MAX_SAFE_INTEGER;
+            _this.offsetY = Number.MAX_SAFE_INTEGER;
             _this.fileName = fileName || "logic-flow." + Date.now() + ".png";
             var svgRootElement = _this.getSvgRootElement(lf);
             _this.downloadSvg(svgRootElement, _this.fileName, backgroundColor);
         };
         /* 获取Blob对象，用户图片上传 */
         lf.getSnapshotBlob = function (backgroundColor) {
+            _this.offsetX = Number.MAX_SAFE_INTEGER;
+            _this.offsetY = Number.MAX_SAFE_INTEGER;
             var svgRootElement = _this.getSvgRootElement(lf);
             return _this.getBlob(svgRootElement, backgroundColor);
         };
         /* 获取Base64对象，用户图片上传 */
         lf.getSnapshotBase64 = function (backgroundColor) {
+            _this.offsetX = Number.MAX_SAFE_INTEGER;
+            _this.offsetY = Number.MAX_SAFE_INTEGER;
             var svgRootElement = _this.getSvgRootElement(lf);
             return _this.getBase64(svgRootElement, backgroundColor);
         };
@@ -175,6 +179,7 @@ var Snapshot = {
         canvas.width = bboxWidth * dpr + 80;
         canvas.height = bboxHeight * dpr + 80;
         var ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
         ctx.scale(dpr, dpr);
         // 如果有背景色，设置流程图导出的背景色
         if (backgroundColor) {