@logicflow/extension 1.1.12 → 1.2.0-alpha.1

package/es/components/context-menu/index.js

@@ -174,8 +174,8 @@ var ContextMenu = /** @class */ (function () {
         var leftTopY = y - node.y / 2 - 20;
         var rightBottomX = node.x + nodeModel.width + NEXT_X_DISTANCE;
         var rightBottomY = y + node.y / 2 + 20;
-        var exsitElements = this.lf.getAreaElement([leftTopX, leftTopY], [rightBottomX, rightBottomY]);
-        if (exsitElements.length) {
+        var existElements = this.lf.getAreaElement([leftTopX, leftTopY], [rightBottomX, rightBottomY]);
+        if (existElements.length) {
             y = y + NEXT_Y_DISTANCE;
             this.addNode(node, y);
             return;

package/es/components/menu/index.js

@@ -18,10 +18,10 @@ var __spread = (this && this.__spread) || function () {
     for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
     return ar;
 };
-var DefalutNodeMenuKey = 'lf:defaultNodeMenu';
-var DefalutEdgeMenuKey = 'lf:defaultEdgeMenu';
-var DefalutGraphMenuKey = 'lf:defaultGraphMenu';
-var DefalutSelectionMenuKey = 'lf:defaultSelectionMenu';
+var DefaultNodeMenuKey = 'lf:defaultNodeMenu';
+var DefaultEdgeMenuKey = 'lf:defaultEdgeMenu';
+var DefaultGraphMenuKey = 'lf:defaultGraphMenu';
+var DefaultSelectionMenuKey = 'lf:defaultSelectionMenu';
 var Menu = /** @class */ (function () {
     function Menu(_a) {
         var _this = this;
@@ -45,7 +45,7 @@ var Menu = /** @class */ (function () {
      */
     Menu.prototype.init = function () {
         var _this = this;
-        var defalutNodeMenu = [
+        var defaultNodeMenu = [
             {
                 text: '删除',
                 callback: function (node) {
@@ -65,7 +65,7 @@ var Menu = /** @class */ (function () {
                 },
             },
         ];
-        this.menuTypeMap.set(DefalutNodeMenuKey, defalutNodeMenu);
+        this.menuTypeMap.set(DefaultNodeMenuKey, defaultNodeMenu);
         var defaultEdgeMenu = [
             {
                 text: '删除',
@@ -80,9 +80,9 @@ var Menu = /** @class */ (function () {
                 },
             },
         ];
-        this.menuTypeMap.set(DefalutEdgeMenuKey, defaultEdgeMenu);
-        this.menuTypeMap.set(DefalutGraphMenuKey, []);
-        var DefalutSelectionMenu = [
+        this.menuTypeMap.set(DefaultEdgeMenuKey, defaultEdgeMenu);
+        this.menuTypeMap.set(DefaultGraphMenuKey, []);
+        var DefaultSelectionMenu = [
             {
                 text: '删除',
                 callback: function (elements) {
@@ -92,7 +92,7 @@ var Menu = /** @class */ (function () {
                 },
             },
         ];
-        this.menuTypeMap.set(DefalutSelectionMenuKey, DefalutSelectionMenu);
+        this.menuTypeMap.set(DefaultSelectionMenuKey, DefaultSelectionMenu);
     };
     Menu.prototype.render = function (lf, container) {
         var _this = this;
@@ -139,7 +139,7 @@ var Menu = /** @class */ (function () {
                 menuList = typeMenus;
             }
             else { // 最后取全局默认
-                menuList = _this.menuTypeMap.get(DefalutNodeMenuKey);
+                menuList = _this.menuTypeMap.get(DefaultNodeMenuKey);
             }
             _this.__currentData = data;
             _this.showMenu(x, y, menuList);
@@ -159,20 +159,20 @@ var Menu = /** @class */ (function () {
                 menuList = typeMenus;
             }
             else { // 最后取全局默认
-                menuList = _this.menuTypeMap.get(DefalutEdgeMenuKey);
+                menuList = _this.menuTypeMap.get(DefaultEdgeMenuKey);
             }
             _this.__currentData = data;
             _this.showMenu(x, y, menuList);
         });
         this.lf.on('blank:contextmenu', function (_a) {
             var position = _a.position;
-            var menuList = _this.menuTypeMap.get(DefalutGraphMenuKey);
+            var menuList = _this.menuTypeMap.get(DefaultGraphMenuKey);
             var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
             _this.showMenu(x, y, menuList);
         });
         this.lf.on('selection:contextmenu', function (_a) {
             var data = _a.data, position = _a.position;
-            var menuList = _this.menuTypeMap.get(DefalutSelectionMenuKey);
+            var menuList = _this.menuTypeMap.get(DefaultSelectionMenuKey);
             var _b = position.domOverlayPosition, x = _b.x, y = _b.y;
             _this.__currentData = data;
             _this.showMenu(x, y, menuList);
@@ -253,13 +253,13 @@ var Menu = /** @class */ (function () {
         }
         // node
         config.nodeMenu !== undefined
-            && this.menuTypeMap.set(DefalutNodeMenuKey, config.nodeMenu ? config.nodeMenu : []);
+            && this.menuTypeMap.set(DefaultNodeMenuKey, config.nodeMenu ? config.nodeMenu : []);
         // edge
         config.edgeMenu !== undefined
-            && this.menuTypeMap.set(DefalutEdgeMenuKey, config.edgeMenu ? config.edgeMenu : []);
+            && this.menuTypeMap.set(DefaultEdgeMenuKey, config.edgeMenu ? config.edgeMenu : []);
         // graph
         config.graphMenu !== undefined
-            && this.menuTypeMap.set(DefalutGraphMenuKey, config.graphMenu ? config.graphMenu : []);
+            && this.menuTypeMap.set(DefaultGraphMenuKey, config.graphMenu ? config.graphMenu : []);
     };
     // 在默认菜单后面追加菜单项
     Menu.prototype.addMenuConfig = function (config) {
@@ -268,16 +268,16 @@ var Menu = /** @class */ (function () {
         }
         // 追加项时，只支持数组类型，对false不做操作
         if (Array.isArray(config.nodeMenu)) {
-            var menuList = this.menuTypeMap.get(DefalutNodeMenuKey);
-            this.menuTypeMap.set(DefalutNodeMenuKey, menuList.concat(config.nodeMenu));
+            var menuList = this.menuTypeMap.get(DefaultNodeMenuKey);
+            this.menuTypeMap.set(DefaultNodeMenuKey, menuList.concat(config.nodeMenu));
         }
         if (Array.isArray(config.edgeMenu)) {
-            var menuList = this.menuTypeMap.get(DefalutEdgeMenuKey);
-            this.menuTypeMap.set(DefalutEdgeMenuKey, menuList.concat(config.edgeMenu));
+            var menuList = this.menuTypeMap.get(DefaultEdgeMenuKey);
+            this.menuTypeMap.set(DefaultEdgeMenuKey, menuList.concat(config.edgeMenu));
         }
         if (Array.isArray(config.graphMenu)) {
-            var menuList = this.menuTypeMap.get(DefalutGraphMenuKey);
-            this.menuTypeMap.set(DefalutGraphMenuKey, menuList.concat(config.graphMenu));
+            var menuList = this.menuTypeMap.get(DefaultGraphMenuKey);
+            this.menuTypeMap.set(DefaultGraphMenuKey, menuList.concat(config.graphMenu));
         }
     };
     /**

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

@@ -167,11 +167,11 @@ var MiniMap = /** @class */ (function () {
             nodes.forEach(function (_a) {
                 var x = _a.x, y = _a.y, _b = _a.width, width = _b === void 0 ? 200 : _b, _c = _a.height, height = _c === void 0 ? 200 : _c;
                 var nodeLeft = x - width / 2;
-                var noderight = x + width / 2;
+                var nodeRight = x + width / 2;
                 var nodeTop = y - height / 2;
                 var nodeBottom = y + height / 2;
                 left = nodeLeft < left ? nodeLeft : left;
-                right = noderight > right ? noderight : right;
+                right = nodeRight > right ? nodeRight : right;
                 top = nodeTop < top ? nodeTop : top;
                 bottom = nodeBottom > bottom ? nodeBottom : bottom;
             });

package/es/components/selection-select/index.d.ts

@@ -12,7 +12,7 @@ declare class SelectionSelect {
         y: number;
     };
     __disabled: boolean;
-    isDefalutStopMoveGraph: boolean;
+    isDefaultStopMoveGraph: boolean;
     isWholeNode: boolean;
     isWholeEdge: boolean;
     static pluginName: string;

package/es/components/selection-select/index.js

@@ -3,7 +3,7 @@ var SelectionSelect = /** @class */ (function () {
         var _this = this;
         var lf = _a.lf;
         this.__disabled = false;
-        this.isDefalutStopMoveGraph = false;
+        this.isDefaultStopMoveGraph = false;
         this.isWholeNode = true;
         this.isWholeEdge = true;
         this.__draw = function (ev) {
@@ -47,9 +47,9 @@ var SelectionSelect = /** @class */ (function () {
             _this.lf.emit('selection:selected', elements);
         };
         this.lf = lf;
-        // 初始化isDefalutStopMoveGraph取值
+        // 初始化isDefaultStopMoveGraph取值
         var stopMoveGraph = lf.getEditConfig().stopMoveGraph;
-        this.isDefalutStopMoveGraph = stopMoveGraph;
+        this.isDefaultStopMoveGraph = stopMoveGraph;
         lf.openSelectionSelect = function () {
             _this.openSelectionSelect();
         };
@@ -97,7 +97,7 @@ var SelectionSelect = /** @class */ (function () {
     SelectionSelect.prototype.openSelectionSelect = function () {
         var stopMoveGraph = this.lf.getEditConfig().stopMoveGraph;
         if (!stopMoveGraph) {
-            this.isDefalutStopMoveGraph = false;
+            this.isDefaultStopMoveGraph = false;
             this.lf.updateEditConfig({
                 stopMoveGraph: true,
             });
@@ -108,7 +108,7 @@ var SelectionSelect = /** @class */ (function () {
      * 关闭选区
      */
     SelectionSelect.prototype.closeSelectionSelect = function () {
-        if (!this.isDefalutStopMoveGraph) {
+        if (!this.isDefaultStopMoveGraph) {
             this.lf.updateEditConfig({
                 stopMoveGraph: false,
             });

package/es/insert-node-in-polyline/edge.d.ts

@@ -1,6 +1,6 @@
 import { Point, PolylineEdgeModel, BaseNodeModel } from '@logicflow/core';
 export declare const isInSegment: (point: any, start: any, end: any) => boolean;
-export declare const corssPointInSegement: (node: BaseNodeModel, start: Point, end: Point) => {
+export declare const crossPointInSegment: (node: BaseNodeModel, start: Point, end: Point) => {
     startCrossPoint: {
         x: number;
         y: number;
@@ -10,12 +10,12 @@ export declare const corssPointInSegement: (node: BaseNodeModel, start: Point, e
         y: number;
     };
 };
-interface SegementCross {
+interface SegmentCross {
     crossIndex: number;
     crossPoints: {
         startCrossPoint: Point;
         endCrossPoint: Point;
     };
 }
-export declare const isNodeInSegement: (node: BaseNodeModel, polyline: PolylineEdgeModel) => SegementCross;
+export declare const isNodeInSegment: (node: BaseNodeModel, polyline: PolylineEdgeModel) => SegmentCross;
 export {};

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

@@ -42,7 +42,7 @@ var segmentDirection = function (start, end) {
     return direction;
 };
 // 节点是够在线段内，求出节点与线段的交点
-export var corssPointInSegement = function (node, start, end) {
+export var crossPointInSegment = function (node, start, end) {
     var bBox = getNodeBBox(node);
     var direction = segmentDirection(start, end);
     var maxX = Math.max(start.x, end.x);
@@ -83,12 +83,12 @@ export var corssPointInSegement = function (node, start, end) {
 };
 // 节点是否在线段内
 // eslint-disable-next-line max-len
-export var isNodeInSegement = function (node, polyline) {
+export var isNodeInSegment = function (node, polyline) {
     var x = node.x, y = node.y;
     var pointsList = polyline.pointsList;
     for (var i = 0; i < pointsList.length - 1; i++) {
         if (isInSegment({ x: x, y: y }, pointsList[i], pointsList[i + 1])) {
-            var bBoxCross = corssPointInSegement(node, pointsList[i], pointsList[i + 1]);
+            var bBoxCross = crossPointInSegment(node, pointsList[i], pointsList[i + 1]);
             if (bBoxCross) {
                 return {
                     crossIndex: i + 1,

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

@@ -18,7 +18,7 @@ var __spread = (this && this.__spread) || function () {
     for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
     return ar;
 };
-import { isNodeInSegement } from './edge';
+import { isNodeInSegment } from './edge';
 var InsertNodeInPolyline = /** @class */ (function () {
     function InsertNodeInPolyline(_a) {
         var lf = _a.lf;
@@ -59,7 +59,7 @@ var InsertNodeInPolyline = /** @class */ (function () {
         var nodeModel = this._lf.getNodeModelById(nodeData.id);
         for (var i = 0; i < edges.length; i++) {
             // eslint-disable-next-line max-len
-            var _a = isNodeInSegement(nodeModel, edges[i]), crossIndex = _a.crossIndex, crossPoints = _a.crossPoints;
+            var _a = isNodeInSegment(nodeModel, edges[i]), 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;
                 this._lf.addEdge({

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

@@ -101,7 +101,7 @@ declare class GroupNodeModel extends RectResize.model {
 }
 declare class GroupNode extends RectResize.view {
     getControlGroup(): h.JSX.Element;
-    getAddedableShape(): import("preact").VNode<any>;
+    getAddAbleShape(): import("preact").VNode<any>;
     getFoldIcon(): import("preact").VNode<any>;
     getResizeShape(): import("preact").VNode<any>;
 }

package/es/materials/group/GroupNode.js

@@ -293,7 +293,7 @@ var GroupNode = /** @class */ (function (_super) {
         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 () {
+    GroupNode.prototype.getAddAbleShape = 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;
@@ -339,7 +339,7 @@ var GroupNode = /** @class */ (function (_super) {
     };
     GroupNode.prototype.getResizeShape = function () {
         return h('g', {}, [
-            this.getAddedableShape(),
+            this.getAddAbleShape(),
             _super.prototype.getResizeShape.call(this),
             this.getFoldIcon(),
         ]);

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

@@ -17,7 +17,7 @@ declare class Group {
         lf: any;
     });
     graphRendered: (data: any) => void;
-    appendNodeToGrop: ({ data }: {
+    appendNodeToGroup: ({ data }: {
         data: any;
     }) => void;
     deleteGroupChild: ({ data }: {

package/es/materials/group/index.js

@@ -36,7 +36,7 @@ var Group = /** @class */ (function () {
                 });
             }
         };
-        this.appendNodeToGrop = function (_a) {
+        this.appendNodeToGroup = function (_a) {
             var data = _a.data;
             // 如果这个节点之前已经在group中了，则将其从之前的group中移除
             var preGroupId = _this.nodeGroupMap.get(data.id);
@@ -110,9 +110,9 @@ var Group = /** @class */ (function () {
             return true;
         });
         lf.graphModel.group = this;
-        lf.on('node:add', this.appendNodeToGrop);
+        lf.on('node:add', this.appendNodeToGroup);
         lf.on('node:delete', this.deleteGroupChild);
-        lf.on('node:drop', this.appendNodeToGrop);
+        lf.on('node:drop', this.appendNodeToGroup);
         lf.on('node:dnd-drag', this.setActiveGroup);
         lf.on('node:drag', this.setActiveGroup);
         lf.on('graph:rendered', this.graphRendered);

package/es/tools/auto-layout/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * 自动布局插件
- * 依赖flowpath插件
+ * 依赖flow-path插件
  * 未完善
  */
 import LogicFlow from '@logicflow/core';
@@ -26,7 +26,7 @@ declare class AutoLayout {
      * source一定在target左边。
      * 1. 如果source和target在同一x, y坐标内容。
      * 2. 如果source在target左上方。
-     * 3. 如果souce在target左下方。
+     * 3. 如果source在target左下方。
      */
     private getRelativePosition;
     /**

package/es/tools/auto-layout/index.js

@@ -1,6 +1,6 @@
 /**
  * 自动布局插件
- * 依赖flowpath插件
+ * 依赖flow-path插件
  * 未完善
  */
 var __assign = (this && this.__assign) || function () {
@@ -138,7 +138,7 @@ var AutoLayout = /** @class */ (function () {
         var target = this.newNodeMap.get(targetNodeId);
         var _a = this.getShape(sourceNodeId), width = _a.width, height = _a.height;
         var _b = this.getShape(targetNodeId), targetWidth = _b.width, targetHeight = _b.height;
-        var postionType = this.getRelativePosition(source, target);
+        var positionType = this.getRelativePosition(source, target);
         var startPoint = {
             x: source.x,
             y: source.y,
@@ -147,7 +147,7 @@ var AutoLayout = /** @class */ (function () {
             x: target.x,
             y: target.y,
         };
-        switch (postionType) {
+        switch (positionType) {
             case POSITION_TYPE.LEFT:
                 startPoint.x = source.x + width / 2;
                 endPoint.x = target.x - targetWidth / 2;
@@ -173,22 +173,22 @@ var AutoLayout = /** @class */ (function () {
      * source一定在target左边。
      * 1. 如果source和target在同一x, y坐标内容。
      * 2. 如果source在target左上方。
-     * 3. 如果souce在target左下方。
+     * 3. 如果source在target左下方。
      */
     AutoLayout.prototype.getRelativePosition = function (source, target) {
         var y = source.y;
         var y1 = target.y;
-        var postionType;
+        var positionType;
         if (y < y1) {
-            postionType = -1;
+            positionType = -1;
         }
         else if (y === y1) {
-            postionType = 0;
+            positionType = 0;
         }
         else {
-            postionType = 1;
+            positionType = 1;
         }
-        return postionType;
+        return positionType;
     };
     /**
      * 获取边节点图形的宽高。

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

@@ -1,17 +1,25 @@
 /**
  * 快照插件，生成视图
  */
-declare const Snapshot: {
-    pluginName: string;
-    install(lf: any): void;
+declare class Snapshot {
+    static pluginName: string;
+    lf: any;
+    offsetX: number;
+    offsetY: number;
+    fileName: string;
+    customCssRules: string;
+    useGlobalRules: boolean;
+    constructor({ lf }: {
+        lf: any;
+    });
     getSvgRootElement(lf: any): any;
     triggerDownload(imgURI: string): void;
     removeAnchor(element: any): void;
-    downloadSvg(svg: SVGGraphicsElement, fileName: string, backgroundColor: string): void;
-    getBase64(svg: SVGGraphicsElement, backgroundColor: string): Promise<unknown>;
-    getBlob(svg: SVGGraphicsElement, backgroundColor: string): Promise<unknown>;
+    getSnapshot(fileName: string, backgroundColor: string): void;
+    getSnapshotBase64(backgroundColor: string): Promise<unknown>;
+    getSnapshotBlob(backgroundColor: string): Promise<unknown>;
     getClassRules(): string;
     getCanvasData(svg: SVGGraphicsElement, backgroundColor: string): Promise<unknown>;
-};
+}
 export default Snapshot;
 export { Snapshot, };

package/es/tools/snapshot/index.js

@@ -1,37 +1,27 @@
 /**
  * 快照插件，生成视图
  */
-var Snapshot = {
-    pluginName: 'snapshot',
-    install: function (lf) {
+var Snapshot = /** @class */ (function () {
+    function Snapshot(_a) {
         var _this = this;
+        var lf = _a.lf;
         this.lf = lf;
+        this.customCssRules = '';
+        this.useGlobalRules = true;
         /* 下载快照 */
         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);
+            _this.getSnapshot(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);
-        };
+        lf.getSnapshotBlob = function (backgroundColor) { return _this.getSnapshotBlob(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);
-        };
-    },
+        lf.getSnapshotBase64 = function (backgroundColor) { return _this.getSnapshotBase64(backgroundColor); };
+    }
     /* 获取svgRoot对象 */
-    getSvgRootElement: function (lf) {
+    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;
@@ -58,8 +48,8 @@ var Snapshot = {
         });
         var svgRootElement = lf.container.querySelector('.lf-canvas-overlay');
         return svgRootElement;
-    },
-    triggerDownload: function (imgURI) {
+    };
+    Snapshot.prototype.triggerDownload = function (imgURI) {
         var evt = new MouseEvent('click', {
             view: window,
             bubbles: false,
@@ -70,8 +60,8 @@ var Snapshot = {
         a.setAttribute('href', imgURI);
         a.setAttribute('target', '_blank');
         a.dispatchEvent(evt);
-    },
-    removeAnchor: function (element) {
+    };
+    Snapshot.prototype.removeAnchor = function (element) {
         var childNodes = element.childNodes;
         var childLength = element.childNodes && element.childNodes.length;
         for (var i = 0; i < childLength; i++) {
@@ -83,20 +73,22 @@ var Snapshot = {
                 i--;
             }
         }
-    },
+    };
     /* 下载图片 */
-    downloadSvg: function (svg, fileName, backgroundColor) {
+    Snapshot.prototype.getSnapshot = function (fileName, backgroundColor) {
         var _this = this;
+        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, fileName);
+            _this.triggerDownload(imgURI);
         });
-    },
+    };
     /* 获取base64对象 */
-    getBase64: function (svg, backgroundColor) {
+    Snapshot.prototype.getSnapshotBase64 = function (backgroundColor) {
         var _this = this;
+        var svg = this.getSvgRootElement(this.lf);
         return new Promise(function (resolve) {
             _this.getCanvasData(svg, backgroundColor).then(function (canvas) {
                 var base64 = canvas.toDataURL('image/png');
@@ -104,10 +96,11 @@ var Snapshot = {
                 resolve({ data: base64, width: canvas.width, height: canvas.height });
             });
         });
-    },
+    };
     /* 获取Blob对象 */
-    getBlob: function (svg, backgroundColor) {
+    Snapshot.prototype.getSnapshotBlob = function (backgroundColor) {
         var _this = this;
+        var svg = this.getSvgRootElement(this.lf);
         return new Promise(function (resolve) {
             _this.getCanvasData(svg, backgroundColor).then(function (canvas) {
                 canvas.toBlob(function (blob) {
@@ -116,20 +109,25 @@ var Snapshot = {
                 }, 'image/png');
             });
         });
-    },
-    getClassRules: function () {
+    };
+    Snapshot.prototype.getClassRules = function () {
         var rules = '';
-        var styleSheets = document.styleSheets;
-        for (var i = 0; i < styleSheets.length; i++) {
-            var sheet = styleSheets[i];
-            for (var j = 0; j < sheet.cssRules.length; j++) {
-                rules += sheet.cssRules[j].cssText;
+        if (this.useGlobalRules) {
+            var styleSheets = document.styleSheets;
+            for (var i = 0; i < styleSheets.length; i++) {
+                var sheet = styleSheets[i];
+                for (var j = 0; j < sheet.cssRules.length; j++) {
+                    rules += sheet.cssRules[j].cssText;
+                }
             }
         }
+        if (this.customCssRules) {
+            rules += this.customCssRules;
+        }
         return rules;
-    },
+    };
     // 获取图片生成中中间产物canvas对象，用户转换为其他需要的格式
-    getCanvasData: function (svg, backgroundColor) {
+    Snapshot.prototype.getCanvasData = function (svg, backgroundColor) {
         var _this = this;
         var copy = svg.cloneNode(true);
         var graph = copy.lastChild;
@@ -201,12 +199,15 @@ var Snapshot = {
             因为svg中存在dom存放在foreignObject元素中
             SVG图形转成img对象
             todo: 会导致一些清晰度问题这个需要再解决
+            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');
             img.src = imgSrc;
         });
-    },
-};
+    };
+    Snapshot.pluginName = 'snapshot';
+    return Snapshot;
+}());
 export default Snapshot;
 export { Snapshot, };

package/es/turbo-adapter/index.js

@@ -51,7 +51,7 @@ function convertNodeToTurboElement(node) {
         key: id,
     };
 }
-// 将LogicFlow中的Eedg数据转换为Turbo元素数据
+// 将LogicFlow中的Edge数据转换为Turbo元素数据
 function convertEdgeToTurboElement(edge) {
     var id = edge.id, type = edge.type, sourceNodeId = edge.sourceNodeId, targetNodeId = edge.targetNodeId, startPoint = edge.startPoint, endPoint = edge.endPoint, pointsList = edge.pointsList, _a = edge.text, text = _a === void 0 ? '' : _a, properties = edge.properties;
     return {
@@ -87,7 +87,7 @@ export function toTurboData(data) {
     });
     return turboData;
 }
-// 将Turbo元素数据转换为LogicFlow中的Eedg数据
+// 将Turbo元素数据转换为LogicFlow中的Edge数据
 function convertFlowElementToEdge(element) {
     var incoming = element.incoming, outgoing = element.outgoing, properties = element.properties, key = element.key;
     var text = properties.text, startPoint = properties.startPoint, endPoint = properties.endPoint, pointsList = properties.pointsList, logicFlowType = properties.logicFlowType;