@logicflow/extension 1.2.5 → 1.2.7

package/es/bpmn-adapter/index.js

@@ -140,7 +140,7 @@ function toNormalJson(xmlJson) {
  * 2）如果只有一个子元素，json中表示为正常属性
  * 3）如果是多个子元素，json中使用数组存储
  */
-function convertLf2ProcessData(bpmnProcessData, data) {
+function convertLf2ProcessData(bpmnProcessData, data, retainedFields) {
     var nodeMap = new Map();
     data.nodes.forEach(function (node) {
         var _a;
@@ -151,7 +151,7 @@ function convertLf2ProcessData(bpmnProcessData, data) {
             processNode['-name'] = node.text.value;
         }
         if (node.properties) {
-            var properties = toXmlJson()(node.properties);
+            var properties = toXmlJson(retainedFields)(node.properties);
             Object.assign(processNode, properties);
         }
         nodeMap.set(node.id, processNode);
@@ -188,7 +188,7 @@ function convertLf2ProcessData(bpmnProcessData, data) {
             edgeConfig['-name'] = (_b = edge.text) === null || _b === void 0 ? void 0 : _b.value;
         }
         if (edge.properties) {
-            var properties = toXmlJson()(edge.properties);
+            var properties = toXmlJson(retainedFields)(edge.properties);
             Object.assign(edgeConfig, properties);
         }
         return edgeConfig;
@@ -461,9 +461,14 @@ var BpmnAdapter = /** @class */ (function () {
     function BpmnAdapter(_a) {
         var _this = this;
         var lf = _a.lf;
-        this.adapterOut = function (data) {
+        /**
+         * @param retainedFields?: string[] (可选)属性保留字段，retainedField会和默认的defaultRetainedFields:
+         * ["properties", "startPoint", "endPoint", "pointsList"]合并，
+         * 这意味着出现在这个数组里的字段当它的值是数组或是对象时不会被视为一个节点而是一个属性。
+         */
+        this.adapterOut = function (data, retainedFields) {
             var bpmnProcessData = __assign({}, _this.processAttributes);
-            convertLf2ProcessData(bpmnProcessData, data);
+            convertLf2ProcessData(bpmnProcessData, data, retainedFields);
             var bpmnDiagramData = {
                 '-id': 'BPMNPlane_1',
                 '-bpmnElement': bpmnProcessData['-id'],
@@ -486,7 +491,7 @@ var BpmnAdapter = /** @class */ (function () {
             }
         };
         lf.adapterIn = function (data) { return _this.adapterIn(data); };
-        lf.adapterOut = function (data) { return _this.adapterOut(data); };
+        lf.adapterOut = function (data, retainedFields) { return _this.adapterOut(data, retainedFields); };
         this.processAttributes = {
             '-isExecutable': 'true',
             '-id': "Process_" + getBpmnId(),
@@ -538,8 +543,8 @@ var BpmnXmlAdapter = /** @class */ (function (_super) {
             var json = lfXml2Json(bpmnData);
             return _this.adapterIn(json);
         };
-        _this.adapterXmlOut = function (data) {
-            var outData = _this.adapterOut(data);
+        _this.adapterXmlOut = function (data, retainedFields) {
+            var outData = _this.adapterOut(data, retainedFields);
             return lfJson2Xml(outData);
         };
         var lf = data.lf;

package/es/bpmn-adapter/json2xml.js

@@ -75,16 +75,16 @@ function toXml(obj, name, depth) {
                     (children_1 !== "" ? ">" + children_1 + (tn + frontSpace) + "</" + name + ">" : " />");
         }
         else {
-            str += tn + frontSpace + ("<$" + name + ">" + obj.toString() + "</" + name + ">");
+            str += tn + frontSpace + ("<" + name + ">" + obj.toString() + "</" + name + ">");
         }
     }
     return str;
 }
 function lfJson2Xml(o) {
-    var xmlStr = "<LogicFlow>\t\n";
+    var xmlStr = "";
     for (var m in o) {
         xmlStr += toXml(o[m], m, 0);
     }
-    return xmlStr + "\t\n</LogicFlow>";
+    return xmlStr;
 }
 export { lfJson2Xml, handleAttributes };

package/es/bpmn-adapter/xml2json.d.ts

@@ -1,2 +1,2 @@
 declare const lfXml2Json: (xmlData: any) => any;
-export { lfXml2Json, };
+export { lfXml2Json };

package/es/bpmn-adapter/xml2json.js

@@ -1,24 +1,25 @@
 // @ts-nocheck
-// ========================================================================  
-//  XML.ObjTree -- XML source code from/to JavaScript object like E4X  
-// ========================================================================  
+// ========================================================================
+//  XML.ObjTree -- XML source code from/to JavaScript object like E4X
+// ========================================================================
 var XML = function () { };
-//  constructor  
+//  constructor
 XML.ObjTree = function () {
+    // @ts-ignore
     return this;
 };
-//  class variables  
-XML.ObjTree.VERSION = "0.23";
-//  object prototype  
+//  class variables
+XML.ObjTree.VERSION = '0.23';
+//  object prototype
 XML.ObjTree.prototype.xmlDecl = '<?xml version="1.0" encoding="UTF-8" ?>\n';
 XML.ObjTree.prototype.attr_prefix = '-';
-//  method: parseXML( xmlsource )  
+//  method: parseXML( xmlsource )
 XML.ObjTree.prototype.parseXML = function (xml) {
     var root;
     if (window.DOMParser) {
         var xmldom = new DOMParser();
-        //      xmldom.async = false;           // DOMParser is always sync-mode  
-        var dom = xmldom.parseFromString(xml, "application/xml");
+        //      xmldom.async = false;           // DOMParser is always sync-mode
+        var dom = xmldom.parseFromString(xml, 'application/xml');
         if (!dom)
             return;
         root = dom.documentElement;
@@ -33,24 +34,24 @@ XML.ObjTree.prototype.parseXML = function (xml) {
         return;
     return this.parseDOM(root);
 };
-//  method: parseHTTP( url, options, callback )  
+//  method: parseHTTP( url, options, callback )
 XML.ObjTree.prototype.parseHTTP = function (url, options, callback) {
     var myOpt = {};
     for (var key in options) {
-        myOpt[key] = options[key]; // copy object  
+        myOpt[key] = options[key]; // copy object
     }
     if (!myOpt.method) {
-        if (typeof (myOpt.postBody) == "undefined" &&
-            typeof (myOpt.postbody) == "undefined" &&
-            typeof (myOpt.parameters) == "undefined") {
-            myOpt.method = "get";
+        if (typeof myOpt.postBody == 'undefined' &&
+            typeof myOpt.postbody == 'undefined' &&
+            typeof myOpt.parameters == 'undefined') {
+            myOpt.method = 'get';
         }
         else {
-            myOpt.method = "post";
+            myOpt.method = 'post';
         }
     }
     if (callback) {
-        myOpt.asynchronous = true; // async-mode  
+        myOpt.asynchronous = true; // async-mode
         var __this = this;
         var __func = callback;
         var __save = myOpt.onComplete;
@@ -65,16 +66,16 @@ XML.ObjTree.prototype.parseHTTP = function (url, options, callback) {
         };
     }
     else {
-        myOpt.asynchronous = false; // sync-mode  
+        myOpt.asynchronous = false; // sync-mode
     }
     var trans;
-    if (typeof (HTTP) != "undefined" && HTTP.Request) {
+    if (typeof HTTP != 'undefined' && HTTP.Request) {
         myOpt.uri = url;
         var req = new HTTP.Request(myOpt);
         if (req)
             trans = req.transport;
     }
-    else if (typeof (Ajax) != "undefined" && Ajax.Request) {
+    else if (typeof Ajax != 'undefined' && Ajax.Request) {
         var req = new Ajax.Request(url, myOpt);
         if (req)
             trans = req.transport;
@@ -94,23 +95,24 @@ XML.ObjTree.prototype.parseDOM = function (root) {
             this.__force_array[this.force_array[i]] = 1;
         }
     }
-    var json = this.parseElement(root); // parse root node  
+    var json = this.parseElement(root); // parse root node
     if (this.__force_array[root.nodeName]) {
         json = [json];
     }
-    if (root.nodeType != 11) { // DOCUMENT_FRAGMENT_NODE  
+    if (root.nodeType != 11) {
+        // DOCUMENT_FRAGMENT_NODE
         var tmp = {};
-        tmp[root.nodeName] = json; // root nodeName  
+        tmp[root.nodeName] = json; // root nodeName
         json = tmp;
     }
-    return json["LogicFlow"];
+    return json;
 };
-//  method: parseElement( element )  
+//  method: parseElement( element )
 /**
  * @reference node type reference https://www.w3schools.com/xml/dom_nodetype.asp
  */
 XML.ObjTree.prototype.parseElement = function (elem) {
-    //  PROCESSING_INSTRUCTION_NODE  
+    //  PROCESSING_INSTRUCTION_NODE
     if (elem.nodeType == 7) {
         return;
     }
@@ -118,7 +120,7 @@ XML.ObjTree.prototype.parseElement = function (elem) {
     if (elem.nodeType == 3 || elem.nodeType == 4 || elem.nodeType == 8) {
         var bool = elem.nodeValue.match(/[^\x00-\x20]/);
         if (bool == null)
-            return; // ignore white spaces  
+            return; // ignore white spaces
         return elem.nodeValue;
     }
     var retVal = null;
@@ -127,7 +129,7 @@ XML.ObjTree.prototype.parseElement = function (elem) {
         retVal = {};
         for (var i = 0; i < elem.attributes.length; i++) {
             var key = elem.attributes[i].nodeName;
-            if (typeof key != "string")
+            if (typeof key != 'string')
                 continue;
             var val = elem.attributes[i].nodeValue;
             try {
@@ -139,17 +141,17 @@ XML.ObjTree.prototype.parseElement = function (elem) {
             if (!val)
                 continue;
             key = this.attr_prefix + key;
-            if (typeof cnt[key] == "undefined")
+            if (typeof cnt[key] == 'undefined')
                 cnt[key] = 0;
             cnt[key]++;
             this.addNode(retVal, key, cnt[key], val);
         }
     }
-    //  parse child nodes (recursive)  
+    //  parse child nodes (recursive)
     if (elem.childNodes && elem.childNodes.length) {
         var textOnly = true;
         if (retVal)
-            textOnly = false; // some attributes exists  
+            textOnly = false; // some attributes exists
         for (var i = 0; i < elem.childNodes.length && textOnly; i++) {
             var nType = elem.childNodes[i].nodeType;
             if (nType == 3 || nType == 4 || nType == 8)
@@ -158,7 +160,7 @@ XML.ObjTree.prototype.parseElement = function (elem) {
         }
         if (textOnly) {
             if (!retVal)
-                retVal = "";
+                retVal = '';
             for (var i = 0; i < elem.childNodes.length; i++) {
                 retVal += elem.childNodes[i].nodeValue;
             }
@@ -168,12 +170,12 @@ XML.ObjTree.prototype.parseElement = function (elem) {
                 retVal = {};
             for (var i = 0; i < elem.childNodes.length; i++) {
                 var key = elem.childNodes[i].nodeName;
-                if (typeof (key) != "string")
+                if (typeof key != 'string')
                     continue;
                 var val = this.parseElement(elem.childNodes[i]);
                 if (!val)
                     continue;
-                if (typeof (cnt[key]) == "undefined")
+                if (typeof cnt[key] == 'undefined')
                     cnt[key] = 0;
                 cnt[key]++;
                 this.addNode(retVal, key, cnt[key], val);
@@ -182,35 +184,38 @@ XML.ObjTree.prototype.parseElement = function (elem) {
     }
     else {
         // @see issue https://github.com/didi/LogicFlow/issues/1068
-        // if retVal is null, that means the elem doesn't have any attributes and children, 
+        // if retVal is null, that means the elem doesn't have any attributes and children,
         // the elem would be like: <a /> or <a></a>, so set retVal to empty object {}
         retVal === null && (retVal = {});
     }
     return retVal;
 };
-//  method: addNode( hash, key, count, value )  
+//  method: addNode( hash, key, count, value )
 XML.ObjTree.prototype.addNode = function (hash, key, counts, val) {
     if (this.__force_array[key]) {
         if (counts == 1)
             hash[key] = [];
-        hash[key][hash[key].length] = val; // push  
+        hash[key][hash[key].length] = val; // push
     }
-    else if (counts == 1) { // 1st sibling  
+    else if (counts == 1) {
+        // 1st sibling
         hash[key] = val;
     }
-    else if (counts == 2) { // 2nd sibling  
+    else if (counts == 2) {
+        // 2nd sibling
         hash[key] = [hash[key], val];
     }
-    else { // 3rd sibling and more  
+    else {
+        // 3rd sibling and more
         hash[key][hash[key].length] = val;
     }
 };
-//  method: writeXML( tree )  
+//  method: writeXML( tree )
 XML.ObjTree.prototype.writeXML = function (tree) {
     var xml = this.hash_to_xml(null, tree);
     return this.xmlDecl + xml;
 };
-//  method: hash_to_xml( tagName, tree )  
+//  method: hash_to_xml( tagName, tree )
 XML.ObjTree.prototype.hash_to_xml = function (name, tree) {
     var elem = [];
     var attr = [];
@@ -219,13 +224,13 @@ XML.ObjTree.prototype.hash_to_xml = function (name, tree) {
             continue;
         var val = tree[key];
         if (key.charAt(0) != this.attr_prefix) {
-            if (typeof (val) == "undefined" || val == null) {
-                elem[elem.length] = "<" + key + " />";
+            if (typeof val == 'undefined' || val == null) {
+                elem[elem.length] = '<' + key + ' />';
             }
-            else if (typeof (val) == "object" && val.constructor == Array) {
+            else if (typeof val == 'object' && val.constructor == Array) {
                 elem[elem.length] = this.array_to_xml(key, val);
             }
-            else if (typeof (val) == "object") {
+            else if (typeof val == 'object') {
                 elem[elem.length] = this.hash_to_xml(key, val);
             }
             else {
@@ -233,59 +238,64 @@ XML.ObjTree.prototype.hash_to_xml = function (name, tree) {
             }
         }
         else {
-            attr[attr.length] = " " + (key.substring(1)) + '="' + (this.xml_escape(val)) + '"';
+            attr[attr.length] =
+                ' ' + key.substring(1) + '="' + this.xml_escape(val) + '"';
         }
     }
-    var jattr = attr.join("");
-    var jelem = elem.join("");
-    if (typeof (name) == "undefined" || name == null) {
-        // no tag  
+    var jattr = attr.join('');
+    var jelem = elem.join('');
+    if (typeof name == 'undefined' || name == null) {
+        // no tag
     }
     else if (elem.length > 0) {
         if (jelem.match(/\n/)) {
-            jelem = "<" + name + jattr + ">\n" + jelem + "</" + name + ">\n";
+            jelem = '<' + name + jattr + '>\n' + jelem + '</' + name + '>\n';
         }
         else {
-            jelem = "<" + name + jattr + ">" + jelem + "</" + name + ">\n";
+            jelem = '<' + name + jattr + '>' + jelem + '</' + name + '>\n';
         }
     }
     else {
-        jelem = "<" + name + jattr + " />\n";
+        jelem = '<' + name + jattr + ' />\n';
     }
     return jelem;
 };
-//  method: array_to_xml( tagName, array )  
+//  method: array_to_xml( tagName, array )
 XML.ObjTree.prototype.array_to_xml = function (name, array) {
     var out = [];
     for (var i = 0; i < array.length; i++) {
         var val = array[i];
-        if (typeof (val) == "undefined" || val == null) {
-            out[out.length] = "<" + name + " />";
+        if (typeof val == 'undefined' || val == null) {
+            out[out.length] = '<' + name + ' />';
         }
-        else if (typeof (val) == "object" && val.constructor == Array) {
+        else if (typeof val == 'object' && val.constructor == Array) {
             out[out.length] = this.array_to_xml(name, val);
         }
-        else if (typeof (val) == "object") {
+        else if (typeof val == 'object') {
             out[out.length] = this.hash_to_xml(name, val);
         }
         else {
             out[out.length] = this.scalar_to_xml(name, val);
         }
     }
-    return out.join("");
+    return out.join('');
 };
-//  method: scalar_to_xml( tagName, text )  
+//  method: scalar_to_xml( tagName, text )
 XML.ObjTree.prototype.scalar_to_xml = function (name, text) {
-    if (name == "#text") {
+    if (name == '#text') {
         return this.xml_escape(text);
     }
     else {
-        return "<" + name + ">" + this.xml_escape(text) + "</" + name + ">\n";
+        return '<' + name + '>' + this.xml_escape(text) + '</' + name + '>\n';
     }
 };
-//  method: xml_escape( text )  
+//  method: xml_escape( text )
 XML.ObjTree.prototype.xml_escape = function (text) {
-    return text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '<')
+        .replace(/>/g, '>')
+        .replace(/"/g, '"');
 };
 /*
 // ========================================================================
@@ -536,4 +546,4 @@ which I will do instead of keeping this documentation like it is.
 var lfXml2Json = function (xmlData) {
     return new XML.ObjTree().parseXML(xmlData);
 };
-export { lfXml2Json, };
+export { lfXml2Json };

package/es/components/mini-map/index.js

@@ -181,8 +181,6 @@ var MiniMap = /** @class */ (function () {
         miniMapWrap.style.width = this.width + 4 + "px";
         miniMapWrap.style.height = this.height + "px";
         this.lfMap = new this.LogicFlow({
-            width: this.lf.graphModel.width,
-            height: (this.lf.graphModel.width * this.height) / this.width,
             container: miniMapWrap,
             isSilentMode: true,
             stopZoomGraph: true,

package/es/insert-node-in-polyline/index.js

@@ -84,6 +84,7 @@ var InsertNodeInPolyline = /** @class */ (function () {
         };
     };
     InsertNodeInPolyline.prototype.insetNode = function (nodeData) {
+        var _this = this;
         var edges = this._lf.graphModel.edges;
         var nodeModel = this._lf.getNodeModelById(nodeData.id);
         for (var i = 0; i < edges.length; i++) {
@@ -91,39 +92,43 @@ var InsertNodeInPolyline = /** @class */ (function () {
             var _a = isNodeInSegment(nodeModel, edges[i], this.deviation), crossIndex = _a.crossIndex, crossPoints = _a.crossPoints;
             if (crossIndex >= 0) {
                 var _b = edges[i], sourceNodeId = _b.sourceNodeId, targetNodeId = _b.targetNodeId, id = _b.id, type = _b.type, pointsList = _b.pointsList, sourceAnchorId = _b.sourceAnchorId, targetAnchorId = _b.targetAnchorId;
+                // fix https://github.com/didi/LogicFlow/issues/996
+                var startPoint = cloneDeep(pointsList[0]);
+                var endPoint = cloneDeep(crossPoints.startCrossPoint);
+                this._lf.deleteEdge(id);
                 var checkResult = this.checkRuleBeforeInsetNode(sourceNodeId, targetNodeId, sourceAnchorId, targetAnchorId, nodeData);
-                if (checkResult.isPass) {
-                    // fix https://github.com/didi/LogicFlow/issues/996
-                    var startPoint = cloneDeep(pointsList[0]);
-                    var endPoint = cloneDeep(crossPoints.startCrossPoint);
-                    this._lf.addEdge({
-                        type: type,
-                        sourceNodeId: sourceNodeId,
-                        targetNodeId: nodeData.id,
-                        startPoint: startPoint,
-                        endPoint: endPoint,
-                        pointsList: __spread(pointsList.slice(0, crossIndex), [
-                            crossPoints.startCrossPoint,
-                        ]),
-                    });
-                    this._lf.addEdge({
-                        type: type,
-                        sourceNodeId: nodeData.id,
-                        targetNodeId: targetNodeId,
-                        startPoint: cloneDeep(crossPoints.endCrossPoint),
-                        endPoint: cloneDeep(pointsList[pointsList.length - 1]),
-                        pointsList: __spread([
-                            crossPoints.endCrossPoint
-                        ], pointsList.slice(crossIndex)),
-                    });
-                    this._lf.deleteEdge(id);
-                    break;
-                }
-                else {
+                this._lf.addEdge({
+                    type: type,
+                    sourceNodeId: sourceNodeId,
+                    targetNodeId: nodeData.id,
+                    startPoint: startPoint,
+                    endPoint: endPoint,
+                    pointsList: __spread(pointsList.slice(0, crossIndex), [
+                        crossPoints.startCrossPoint,
+                    ]),
+                });
+                this._lf.addEdge({
+                    type: type,
+                    sourceNodeId: nodeData.id,
+                    targetNodeId: targetNodeId,
+                    startPoint: cloneDeep(crossPoints.endCrossPoint),
+                    endPoint: cloneDeep(pointsList[pointsList.length - 1]),
+                    pointsList: __spread([
+                        crossPoints.endCrossPoint
+                    ], pointsList.slice(crossIndex)),
+                });
+                if (!checkResult.isPass) {
                     this._lf.graphModel.eventCenter.emit(EventType.CONNECTION_NOT_ALLOWED, {
                         data: nodeData,
                         msg: checkResult.targetMsg || checkResult.sourceMsg,
                     });
+                    // FIXME:在关闭了历史记录的情况下，撤销操作会不生效。
+                    setTimeout(function () {
+                        _this._lf.undo();
+                    }, 200);
+                    break;
+                }
+                else {
                     break;
                 }
             }

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

@@ -22,4 +22,4 @@ declare class Snapshot {
     getCanvasData(svg: SVGGraphicsElement, backgroundColor: string): Promise<unknown>;
 }
 export default Snapshot;
-export { Snapshot, };
+export { Snapshot };

package/es/tools/snapshot/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable operator-linebreak */
+/* eslint-disable implicit-arrow-linebreak */
 /**
  * 快照插件，生成视图
  */
@@ -13,39 +15,16 @@ var Snapshot = /** @class */ (function () {
             _this.getSnapshot(fileName, backgroundColor);
         };
         /* 获取Blob对象，用户图片上传 */
-        lf.getSnapshotBlob = function (backgroundColor) { return _this.getSnapshotBlob(backgroundColor); };
+        lf.getSnapshotBlob = function (backgroundColor) {
+            return _this.getSnapshotBlob(backgroundColor);
+        };
         /* 获取Base64对象，用户图片上传 */
-        lf.getSnapshotBase64 = function (backgroundColor) { return _this.getSnapshotBase64(backgroundColor); };
+        lf.getSnapshotBase64 = function (backgroundColor) {
+            return _this.getSnapshotBase64(backgroundColor);
+        };
     }
     /* 获取svgRoot对象 */
     Snapshot.prototype.getSvgRootElement = function (lf) {
-        var _this = this;
-        this.offsetX = Number.MAX_SAFE_INTEGER;
-        this.offsetY = Number.MAX_SAFE_INTEGER;
-        lf.graphModel.nodes.forEach(function (item) {
-            var x = item.x, width = item.width, y = item.y, height = item.height;
-            var offsetX = x - width / 2;
-            var offsetY = y - height / 2;
-            if (offsetX < _this.offsetX) {
-                _this.offsetX = offsetX - 5;
-            }
-            if (offsetY < _this.offsetY) {
-                _this.offsetY = offsetY - 5;
-            }
-        });
-        lf.graphModel.edges.forEach(function (edge) {
-            if (edge.pointsList) {
-                edge.pointsList.forEach(function (point) {
-                    var x = point.x, y = point.y;
-                    if (x < _this.offsetX) {
-                        _this.offsetX = x - 5;
-                    }
-                    if (y < _this.offsetY) {
-                        _this.offsetY = y - 5;
-                    }
-                });
-            }
-        });
         var svgRootElement = lf.container.querySelector('.lf-canvas-overlay');
         return svgRootElement;
     };
@@ -80,7 +59,8 @@ var Snapshot = /** @class */ (function () {
         this.fileName = fileName || "logic-flow." + Date.now() + ".png";
         var svg = this.getSvgRootElement(this.lf);
         this.getCanvasData(svg, backgroundColor).then(function (canvas) {
-            var imgURI = canvas.toDataURL('image/png')
+            var imgURI = canvas
+                .toDataURL('image/png')
                 .replace('image/png', 'image/octet-stream');
             _this.triggerDownload(imgURI);
         });
@@ -145,15 +125,14 @@ var Snapshot = /** @class */ (function () {
                 else {
                     // 删除锚点
                     var lfBase = graph.childNodes[i];
-                    lfBase && lfBase.childNodes.forEach(function (item) {
-                        var element = item;
-                        _this.removeAnchor(element.firstChild);
-                    });
+                    lfBase &&
+                        lfBase.childNodes.forEach(function (item) {
+                            var element = item;
+                            _this.removeAnchor(element.firstChild);
+                        });
                 }
             }
         }
-        // offset值加10，保证图形不会紧贴着下载图片的左边和上边
-        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, " + (-this.offsetX + 10) + ", " + (-this.offsetY + 10) + ")";
         var dpr = window.devicePixelRatio || 1;
         var canvas = document.createElement('canvas');
         /*
@@ -163,9 +142,16 @@ var Snapshot = /** @class */ (function () {
         */
         var base = this.lf.graphModel.rootEl.querySelector('.lf-base');
         var bbox = base.getBoundingClientRect();
+        var layout = document
+            .querySelector('.lf-canvas-overlay')
+            .getBoundingClientRect();
+        var offsetX = bbox.x - layout.x;
+        var offsetY = bbox.y - layout.y;
         var graphModel = this.lf.graphModel;
         var transformModel = graphModel.transformModel;
-        var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y;
+        var SCALE_X = transformModel.SCALE_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
+        // offset值加10，保证图形不会紧贴着下载图片的左边和上边
+        copy.lastChild.style.transform = "matrix(1, 0, 0, 1, " + (-offsetX + 10 + TRANSLATE_X) + ", " + (-offsetY + 10 + TRANSLATE_Y) + ")";
         var bboxWidth = Math.ceil(bbox.width / SCALE_X);
         var bboxHeight = Math.ceil(bbox.height / SCALE_Y);
         // width,height 值加40，保证图形不会紧贴着下载图片的右边和下边
@@ -221,7 +207,10 @@ var Snapshot = /** @class */ (function () {
             fixme: XMLSerializer的中的css background url不会下载图片
             */
             var svg2Img = "data:image/svg+xml;charset=utf-8," + new XMLSerializer().serializeToString(copy);
-            var imgSrc = svg2Img.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
+            var imgSrc = svg2Img
+                .replace(/\n/g, '')
+                .replace(/\t/g, '')
+                .replace(/#/g, '%23');
             img.src = imgSrc;
         });
     };
@@ -229,4 +218,4 @@ var Snapshot = /** @class */ (function () {
     return Snapshot;
 }());
 export default Snapshot;
-export { Snapshot, };
+export { Snapshot };