@logicflow/extension 1.1.12 → 1.1.15

package/cjs/tools/snapshot/index.js

@@ -4,37 +4,27 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Snapshot = void 0;
-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;
@@ -61,8 +51,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,
@@ -73,8 +63,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++) {
@@ -86,20 +76,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');
@@ -107,10 +99,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) {
@@ -119,20 +112,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;
@@ -204,12 +202,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;
+}());
 exports.Snapshot = Snapshot;
 exports.default = Snapshot;

package/cjs/turbo-adapter/index.js

@@ -10,17 +10,39 @@ var __assign = (this && this.__assign) || function () {
     };
     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;
+    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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TurboAdapter = exports.toLogicflowData = exports.toTurboData = void 0;
-var TurboType;
-(function (TurboType) {
-    TurboType[TurboType["SEQUENCE_FLOW"] = 1] = "SEQUENCE_FLOW";
-    TurboType[TurboType["START_EVENT"] = 2] = "START_EVENT";
-    TurboType[TurboType["END_EVENT"] = 3] = "END_EVENT";
-    TurboType[TurboType["USER_TASK"] = 4] = "USER_TASK";
+exports.toLogicflowData = exports.toTurboData = void 0;
+var TurboType = {
+    SEQUENCE_FLOW: 1,
+    START_EVENT: 2,
+    END_EVENT: 3,
+    USER_TASK: 4,
     // SERVICE_TASK = 5, 暂不支持
-    TurboType[TurboType["EXCLUSIVE_GATEWAY"] = 6] = "EXCLUSIVE_GATEWAY";
-})(TurboType || (TurboType = {}));
+    EXCLUSIVE_GATEWAY: 6,
+};
+var TurboTypeMap = {
+    1: 'bpmn:sequenceFlow',
+    2: 'bpmn:startEvent',
+    3: 'bpmn:endEvent',
+    4: 'bpmn:userTask',
+    6: 'bpmn:exclusiveGateway',
+};
 // 转换Turbo识别的类型
 function getTurboType(type) {
     switch (type) {
@@ -50,11 +72,11 @@ function convertNodeToTurboElement(node) {
         type: getTurboType(node.type),
         properties: __assign(__assign({}, properties), { name: (text && text.value) || '', x: x,
             y: y,
-            text: text, logicFlowType: type }),
+            text: text }),
         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 {
@@ -62,10 +84,7 @@ function convertEdgeToTurboElement(edge) {
         outgoing: [targetNodeId],
         type: getTurboType(type),
         dockers: [],
-        properties: __assign(__assign({}, properties), { name: (text && text.value) || '', text: text,
-            startPoint: startPoint,
-            endPoint: endPoint,
-            pointsList: pointsList, logicFlowType: type }),
+        properties: __assign(__assign({}, properties), { name: (text && text.value) || '', text: text, startPoint: JSON.stringify(startPoint), endPoint: JSON.stringify(endPoint), pointsList: JSON.stringify(text) }),
         key: id,
     };
 }
@@ -91,23 +110,32 @@ function toTurboData(data) {
     return turboData;
 }
 exports.toTurboData = toTurboData;
-// 将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;
+    var incoming = element.incoming, outgoing = element.outgoing, properties = element.properties, key = element.key, type = element.type;
+    var text = properties.text, name = properties.name, startPoint = properties.startPoint, endPoint = properties.endPoint, pointsList = properties.pointsList;
     var edge = {
         id: key,
-        type: logicFlowType,
+        type: TurboTypeMap[type],
         sourceNodeId: incoming[0],
         targetNodeId: outgoing[0],
-        text: text,
-        startPoint: startPoint,
-        endPoint: endPoint,
-        pointsList: pointsList,
+        text: text || name,
         properties: {},
     };
+    if (startPoint) {
+        // @ts-ignore
+        edge.startPoint = JSON.parse(startPoint);
+    }
+    if (endPoint) {
+        // @ts-ignore
+        edge.endPoint = JSON.parse(endPoint);
+    }
+    if (pointsList) {
+        // @ts-ignore
+        edge.endPoint = JSON.parse(pointsList);
+    }
     // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
-    var excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text', 'logicFlowType'];
+    var excludeProperties = ['startPoint', 'endPoint', 'pointsList', 'text'];
     Object.keys(element.properties).forEach(function (property) {
         if (excludeProperties.indexOf(property) === -1) {
             edge.properties[property] = element.properties[property];
@@ -117,18 +145,23 @@ function convertFlowElementToEdge(element) {
 }
 // 将Turbo元素数据转换为LogicFlow中的Node数据
 function convertFlowElementToNode(element) {
-    var properties = element.properties, key = element.key;
-    var x = properties.x, y = properties.y, text = properties.text, logicFlowType = properties.logicFlowType;
+    var properties = element.properties, key = element.key, type = element.type, bounds = element.bounds;
+    var x = properties.x, y = properties.y;
+    if (x === undefined) {
+        var _a = __read(bounds, 2), _b = _a[0], x1 = _b.x, y1 = _b.y, _c = _a[1], x2 = _c.x, y2 = _c.y;
+        x = (x1 + x2) / 2;
+        y = (y1 + y2) / 2;
+    }
     var node = {
         id: key,
-        type: logicFlowType,
+        type: TurboTypeMap[type],
         x: x,
         y: y,
-        text: text,
+        text: properties.text,
         properties: {},
     };
     // 这种转换方式，在自定义属性中不能与excludeProperties中的属性重名，否则将在转换过程中丢失
-    var excludeProperties = ['x', 'y', 'text', 'logicFlowType'];
+    var excludeProperties = ['x', 'y', 'text'];
     Object.keys(element.properties).forEach(function (property) {
         if (excludeProperties.indexOf(property) === -1) {
             node.properties[property] = element.properties[property];
@@ -156,26 +189,23 @@ function toLogicflowData(data) {
     return lfData;
 }
 exports.toLogicflowData = toLogicflowData;
-var TurboAdapter = {
-    pluginName: 'turboAdapter',
-    install: function (lf) {
+var TurboAdapter = /** @class */ (function () {
+    function TurboAdapter(_a) {
+        var lf = _a.lf;
         lf.adapterIn = this.adapterIn;
         lf.adapterOut = this.adapterOut;
-    },
-    shapeConfigMap: new Map(),
-    setCustomShape: function (key, val) {
-        this.shapeConfigMap.set(key, val);
-    },
-    adapterOut: function (logicflowData) {
+    }
+    TurboAdapter.prototype.adapterOut = function (logicflowData) {
         if (logicflowData) {
             return toTurboData(logicflowData);
         }
-    },
-    adapterIn: function (turboData) {
+    };
+    TurboAdapter.prototype.adapterIn = function (turboData) {
         if (turboData) {
             return toLogicflowData(turboData);
         }
-    },
-};
-exports.TurboAdapter = TurboAdapter;
+    };
+    TurboAdapter.pluginName = 'turboAdapter';
+    return TurboAdapter;
+}());
 exports.default = TurboAdapter;

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.d.ts

@@ -5,11 +5,11 @@ export declare function toLogicflowData(data: any): {
     nodes: any[];
     edges: any[];
 };
-declare const TurboAdapter: {
-    pluginName: string;
-    install(lf: any): void;
-    shapeConfigMap: Map<any, any>;
-    setCustomShape(key: any, val: any): void;
+declare class TurboAdapter {
+    static pluginName: string;
+    constructor({ lf }: {
+        lf: any;
+    });
     adapterOut(logicflowData: any): {
         flowElementList: any[];
     };
@@ -17,6 +17,5 @@ declare const TurboAdapter: {
         nodes: any[];
         edges: any[];
     };
-};
-export { TurboAdapter };
+}
 export default TurboAdapter;