@logicflow/extension 1.1.12 → 1.2.0-alpha.1

package/cjs/materials/group/index.js

@@ -40,7 +40,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);
@@ -114,9 +114,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/cjs/tools/auto-layout/index.js

@@ -1,7 +1,7 @@
 "use strict";
 /**
  * 自动布局插件
- * 依赖flowpath插件
+ * 依赖flow-path插件
  * 未完善
  */
 var __assign = (this && this.__assign) || function () {
@@ -141,7 +141,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,
@@ -150,7 +150,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;
@@ -176,22 +176,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/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

@@ -54,7 +54,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 {
@@ -91,7 +91,7 @@ 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;

package/es/NodeResize/Control/Control.d.ts

@@ -49,7 +49,7 @@ declare class Control extends Component<IProps> {
         beforeNode: any;
         afterNode: any;
     }) => void;
-    onDraging: ({ deltaX, deltaY }: {
+    onDragging: ({ deltaX, deltaY }: {
         deltaX: any;
         deltaY: any;
     }) => void;

package/es/NodeResize/Control/Control.js

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import { h, Component } from 'preact';
 import { LogicFlowUtil } from '@logicflow/core';
 import Rect from '../BasicShape/Rect';
-import { getDiamondReizeEdgePoint, getEllipseReizeEdgePoint, getRectReizeEdgePoint, ModelType } from './Util';
+import { getDiamondResizeEdgePoint, getEllipseResizeEdgePoint, getRectResizeEdgePoint, ModelType } from './Util';
 var StepDrag = LogicFlowUtil.StepDrag;
 var Control = /** @class */ (function (_super) {
     __extends(Control, _super);
@@ -123,12 +123,12 @@ var Control = /** @class */ (function (_super) {
             var afterPoint;
             edges.sourceEdges.forEach(function (item) {
                 params.point = item.startPoint;
-                afterPoint = getRectReizeEdgePoint(params);
+                afterPoint = getRectResizeEdgePoint(params);
                 item.updateStartPoint(afterPoint);
             });
             edges.targetEdges.forEach(function (item) {
                 params.point = item.endPoint;
-                afterPoint = getRectReizeEdgePoint(params);
+                afterPoint = getRectResizeEdgePoint(params);
                 item.updateEndPoint(afterPoint);
             });
             _this.eventEmit({ beforeNode: beforeNode, afterNode: afterNode });
@@ -187,12 +187,12 @@ var Control = /** @class */ (function (_super) {
             var afterPoint;
             edges.sourceEdges.forEach(function (item) {
                 params.point = item.startPoint;
-                afterPoint = getEllipseReizeEdgePoint(params);
+                afterPoint = getEllipseResizeEdgePoint(params);
                 item.updateStartPoint(afterPoint);
             });
             edges.targetEdges.forEach(function (item) {
                 params.point = item.endPoint;
-                afterPoint = getEllipseReizeEdgePoint(params);
+                afterPoint = getEllipseResizeEdgePoint(params);
                 item.updateEndPoint(afterPoint);
             });
             _this.eventEmit({ beforeNode: __assign(__assign({}, beforeNode), { rx: rx, ry: ry }), afterNode: afterNode });
@@ -251,12 +251,12 @@ var Control = /** @class */ (function (_super) {
             var edges = _this.getNodeEdges(id);
             edges.sourceEdges.forEach(function (item) {
                 params.point = item.startPoint;
-                afterPoint = getDiamondReizeEdgePoint(params);
+                afterPoint = getDiamondResizeEdgePoint(params);
                 item.updateStartPoint(afterPoint);
             });
             edges.targetEdges.forEach(function (item) {
                 params.point = item.endPoint;
-                afterPoint = getDiamondReizeEdgePoint(params);
+                afterPoint = getDiamondResizeEdgePoint(params);
                 item.updateEndPoint(afterPoint);
             });
             _this.eventEmit({ beforeNode: beforeNode, afterNode: afterNode });
@@ -268,7 +268,7 @@ var Control = /** @class */ (function (_super) {
             var newNodeSize = __assign({ id: id, modelType: modelType, type: type }, afterNode);
             _this.graphModel.eventCenter.emit('node:resize', { oldNodeSize: oldNodeSize, newNodeSize: newNodeSize });
         };
-        _this.onDraging = function (_a) {
+        _this.onDragging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var modelType = _this.nodeModel.modelType;
             // html和矩形的计算方式是一样的，共用一个方法
@@ -298,7 +298,7 @@ var Control = /** @class */ (function (_super) {
         }
         _this.state = {};
         _this.dragHandler = new StepDrag({
-            onDraging: _this.onDraging,
+            onDragging: _this.onDragging,
             step: step,
         });
         return _this;

package/es/NodeResize/Control/Util.d.ts

@@ -13,7 +13,7 @@ export declare enum ModelType {
     BEZIER_EDGE = "bezier-edge",
     GRAPH = "graph"
 }
-export declare function getRectReizeEdgePoint({ point, beforeNode, afterNode }: {
+export declare function getRectResizeEdgePoint({ point, beforeNode, afterNode }: {
     point: any;
     beforeNode: any;
     afterNode: any;
@@ -21,12 +21,12 @@ export declare function getRectReizeEdgePoint({ point, beforeNode, afterNode }:
     x: any;
     y: any;
 };
-export declare function getEllipseReizeEdgePoint({ point, beforeNode, afterNode }: {
+export declare function getEllipseResizeEdgePoint({ point, beforeNode, afterNode }: {
     point: any;
     beforeNode: any;
     afterNode: any;
 }): any;
-export declare function getDiamondReizeEdgePoint({ point, beforeNode, afterNode }: {
+export declare function getDiamondResizeEdgePoint({ point, beforeNode, afterNode }: {
     point: any;
     beforeNode: any;
     afterNode: any;

package/es/NodeResize/Control/Util.js

@@ -25,7 +25,7 @@ function getNodeBox(node) {
     };
 }
 // 计算矩形radius设置后，四个圆角的圆心
-function getRidusCenter(node) {
+function getRadiusCenter(node) {
     var nodeBox = getNodeBox(node);
     var radius = node.radius;
     var minX = nodeBox.minX, minY = nodeBox.minY, maxX = nodeBox.maxX, maxY = nodeBox.maxY;
@@ -49,7 +49,7 @@ function getRidusCenter(node) {
     ];
 }
 // 获取矩形resize之后，与矩形连接边的新端点
-export function getRectReizeEdgePoint(_a) {
+export function getRectResizeEdgePoint(_a) {
     var point = _a.point, beforeNode = _a.beforeNode, afterNode = _a.afterNode;
     var x = point.x, y = point.y;
     var afterPoint = {
@@ -104,8 +104,8 @@ export function getRectReizeEdgePoint(_a) {
     }
     else {
         // 在圆角部分
-        var beeforCoc = getRidusCenter(beforeNode);
-        var afterCoc = getRidusCenter(afterNode);
+        var beforeCoc = getRadiusCenter(beforeNode);
+        var afterCoc = getRadiusCenter(afterNode);
         var nodeBox = getNodeBox(beforeNode);
         var minX = nodeBox.minX, minY = nodeBox.minY, maxX = nodeBox.maxX, maxY = nodeBox.maxY;
         var index = -1;
@@ -127,7 +127,7 @@ export function getRectReizeEdgePoint(_a) {
         }
         if (index > -1) {
             // 根据夹角角度计算位置
-            var angle = Math.atan2((y - beeforCoc[index].y), (x - beeforCoc[index].x));
+            var angle = Math.atan2((y - beforeCoc[index].y), (x - beforeCoc[index].x));
             afterPoint.x = afterCoc[index].x + radius * Math.cos(angle);
             afterPoint.y = afterCoc[index].y + radius * Math.sin(angle);
         }
@@ -135,7 +135,7 @@ export function getRectReizeEdgePoint(_a) {
     return afterPoint;
 }
 // 获取椭圆resize之后，与椭圆连接边的新端点
-export function getEllipseReizeEdgePoint(_a) {
+export function getEllipseResizeEdgePoint(_a) {
     var point = _a.point, beforeNode = _a.beforeNode, afterNode = _a.afterNode;
     var rx = afterNode.rx, ry = afterNode.ry;
     var afterPoint = point;
@@ -173,7 +173,7 @@ export function getEllipseReizeEdgePoint(_a) {
     return afterPoint;
 }
 // 获取菱形resize之后，与菱形连接边的新端点
-export function getDiamondReizeEdgePoint(_a) {
+export function getDiamondResizeEdgePoint(_a) {
     var point = _a.point, beforeNode = _a.beforeNode, afterNode = _a.afterNode;
     var afterPoint = point;
     var x;

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

@@ -1,45 +1,53 @@
-declare const BpmnAdapter: {
-    pluginName: string;
-    install(lf: any): void;
-    shapeConfigMap: Map<any, any>;
+declare class BpmnAdapter {
+    static pluginName: string;
+    static shapeConfigMap: Map<any, any>;
+    processAttributes: {
+        ['-isExecutable']: string;
+        ['-id']: string;
+    };
+    definitionAttributes: {
+        ['-id']: string;
+        ['-xmlns:xsi']: string;
+        ['-xmlns:bpmn']: string;
+        ['-xmlns:bpmndi']: string;
+        ['-xmlns:dc']: string;
+        ['-xmlns:di']: string;
+        ['-targetNamespace']: string;
+        ['-exporter']: string;
+        ['-exporterVersion']: string;
+        [key: string]: any;
+    };
+    constructor({ lf }: {
+        lf: any;
+    });
     setCustomShape(key: any, val: any): void;
-    adapterOut(data: any): {
+    adapterOut: (data: any) => {
         'bpmn:definitions': {
-            '-id': string;
-            '-xmlns:xsi': string;
-            '-xmlns:bpmn': string;
-            '-xmlns:bpmndi': string;
-            '-xmlns:dc': string;
-            '-xmlns:di': string;
-            '-targetNamespace': string;
-            '-exporter': string;
-            '-exporterVersion': string;
-            'bpmn:process': {
-                '-id': string;
-                '-isExecutable': string;
-            };
-            'bpmndi:BPMNDiagram': {
-                '-id': string;
-                'bpmndi:BPMNPlane': {
-                    '-id': string;
-                    '-bpmnElement': string;
-                };
-            };
+            [key: string]: any;
+            "-id": string;
+            "-xmlns:xsi": string;
+            "-xmlns:bpmn": string;
+            "-xmlns:bpmndi": string;
+            "-xmlns:dc": string;
+            "-xmlns:di": string;
+            "-targetNamespace": string;
+            "-exporter": string;
+            "-exporterVersion": string;
         };
     };
-    adapterIn(bpmnData: any): {
+    adapterIn: (bpmnData: any) => {
         nodes: any[];
         edges: any[];
     };
-};
-declare const BpmnXmlAdapter: {
-    pluginName: string;
-    install(lf: any): void;
-    adapterXmlIn(bpmnData: any): {
+}
+declare class BpmnXmlAdapter extends BpmnAdapter {
+    static pluginName: string;
+    constructor(data: any);
+    adapterXmlIn: (bpmnData: any) => {
         nodes: any[];
         edges: any[];
     };
-    adapterXmlOut(data: any): string;
-};
+    adapterXmlOut: (data: any) => string;
+}
 export { BpmnAdapter, BpmnXmlAdapter, };
 export default BpmnAdapter;