@logicflow/extension 2.0.0-beta.2 → 2.0.0-beta.4

package/lib/tools/snapshot/utils.js

@@ -0,0 +1,247 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.copyCanvas = exports.updateImageSource = exports.updateBackgroundImageWithBase64Image = exports.updateImageSrcOrHrefWithBase64Image = exports.convertImageToBase64 = exports.isTextPlainBase64 = void 0;
+/**
+ * 图片缓存, 已请求过的图片直接从缓存中获取
+ */
+var imageCache = {};
+/**
+ * 当获取图片失败时会返回失败信息，是 text/plain 类型的数据
+ * @param str - 图片内容
+ * @returns
+ */
+function isTextPlainBase64(str) {
+    return str.startsWith('data:text/plain');
+}
+exports.isTextPlainBase64 = isTextPlainBase64;
+/**
+ * 将网络图片转为 base64
+ * @param url - 图片地址
+ * @returns
+ */
+function convertImageToBase64(url) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            if (imageCache[url]) {
+                return [2 /*return*/, imageCache[url]];
+            }
+            return [2 /*return*/, new Promise(function (resolve, reject) {
+                    try {
+                        fetch(url)
+                            .then(function (response) { return response.blob(); })
+                            .then(function (blob) {
+                            var reader = new FileReader();
+                            reader.onloadend = function () {
+                                resolve((imageCache[url] = reader.result));
+                            };
+                            reader.onerror = reject;
+                            reader.readAsDataURL(blob);
+                        })
+                            .catch(function () {
+                            resolve((imageCache[url] = url));
+                        });
+                    }
+                    catch (error) {
+                        // 如果转换失败，后续大概率仍然会失败，因此直接缓存
+                        return (imageCache[url] = url);
+                    }
+                })];
+        });
+    });
+}
+exports.convertImageToBase64 = convertImageToBase64;
+/**
+ * 使用 base64 的图片替换 img 标签的 src 或 image 标签的 href
+ * @param node - html 节点或 svg 节点
+ */
+function updateImageSrcOrHrefWithBase64Image(node, attrName) {
+    return __awaiter(this, void 0, void 0, function () {
+        var url, base64Image, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    url = node.getAttribute(attrName) || '';
+                    // 已经是 base64 图片，不需要处理
+                    if (url.startsWith('data:')) {
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, convertImageToBase64(url)];
+                case 1:
+                    base64Image = _a.sent();
+                    if (isTextPlainBase64(base64Image)) {
+                        return [2 /*return*/];
+                    }
+                    node.setAttribute(attrName, base64Image);
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_1 = _a.sent();
+                    console.error(error_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.updateImageSrcOrHrefWithBase64Image = updateImageSrcOrHrefWithBase64Image;
+/**
+ * 使用 base64 的图片替换背景图片
+ * @param node - html 节点
+ * @param styleAttr - 样式属性名称
+ */
+function updateBackgroundImageWithBase64Image(node, url) {
+    return __awaiter(this, void 0, void 0, function () {
+        var base64Image, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    // 已经是 base64 图片，不需要处理
+                    if (url.startsWith('data:')) {
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, convertImageToBase64(url)];
+                case 1:
+                    base64Image = _a.sent();
+                    if (isTextPlainBase64(base64Image)) {
+                        return [2 /*return*/];
+                    }
+                    node.style.backgroundImage = "url(".concat(base64Image, ")");
+                    return [3 /*break*/, 3];
+                case 2:
+                    error_2 = _a.sent();
+                    console.error(error_2);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.updateBackgroundImageWithBase64Image = updateBackgroundImageWithBase64Image;
+/**
+ * 更新图片数据
+ * @param node - 节点
+ */
+function updateImageSource(node) {
+    return __awaiter(this, void 0, void 0, function () {
+        var nodes, nodePtr, promises, _a, background, backgroundImage, backgroundUrlMatch, imageUrl, backgroundImageUrlMatch, imageUrl;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    nodes = [node];
+                    promises = [];
+                    while (nodes.length) {
+                        nodePtr = nodes.shift();
+                        if (nodePtr.children.length) {
+                            nodes.push.apply(nodes, __spreadArray([], __read(nodePtr.children), false));
+                        }
+                        if (nodePtr instanceof HTMLElement) {
+                            _a = nodePtr.style, background = _a.background, backgroundImage = _a.backgroundImage;
+                            backgroundUrlMatch = background.match(/url\(["']?(.*?)["']?\)/);
+                            if (backgroundUrlMatch && backgroundUrlMatch[1]) {
+                                imageUrl = backgroundUrlMatch[1];
+                                promises.push(updateBackgroundImageWithBase64Image(nodePtr, imageUrl));
+                            }
+                            backgroundImageUrlMatch = backgroundImage.match(/url\(["']?(.*?)["']?\)/);
+                            if (backgroundImageUrlMatch && backgroundImageUrlMatch[1]) {
+                                imageUrl = backgroundImageUrlMatch[1];
+                                promises.push(updateBackgroundImageWithBase64Image(nodePtr, imageUrl));
+                            }
+                        }
+                        // 如果有 img 和 image 标签，尝试将 src 和 href 替换为 base64 图片
+                        if (nodePtr instanceof HTMLImageElement) {
+                            promises.push(updateImageSrcOrHrefWithBase64Image(nodePtr, 'src'));
+                        }
+                        else if (nodePtr instanceof SVGImageElement) {
+                            promises.push(updateImageSrcOrHrefWithBase64Image(nodePtr, 'href'));
+                        }
+                    }
+                    return [4 /*yield*/, Promise.all(promises)];
+                case 1:
+                    _b.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+exports.updateImageSource = updateImageSource;
+/**
+ * 重新复制canvas 用于在不裁剪原canvas的基础上通过拉伸方式达到自定义宽高目的
+ * @param originCanvas HTMLCanvasElement
+ * @param targetWidth number
+ * @param targetHeight number
+ */
+function copyCanvas(originCanvas, targetWidth, targetHeight) {
+    var newCanvas = document.createElement('canvas');
+    newCanvas.width = targetWidth;
+    newCanvas.height = targetHeight;
+    var newCtx = newCanvas.getContext('2d');
+    if (newCtx) {
+        // 注意: 自定义宽高时，可能会拉伸图形，这时候padding也会被拉伸导致不准确
+        newCtx.drawImage(originCanvas, 0, 0, originCanvas.width, originCanvas.height, 0, 0, targetWidth, targetHeight);
+    }
+    return newCanvas;
+}
+exports.copyCanvas = copyCanvas;
+//# sourceMappingURL=utils.js.map

package/lib/tools/snapshot/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/tools/snapshot/utils.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,12 +20,15 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.0-beta.2"
+    "@logicflow/core": "2.0.0-beta.4"
   },
   "dependencies": {
+    "lodash-es": "^4.17.21",
     "@antv/hierarchy": "^0.6.11",
-    "preact": "^10.17.1",
-    "@logicflow/core": "2.0.0-beta.2"
+    "@logicflow/core": "2.0.0-beta.4"
+  },
+  "devDependencies": {
+    "preact": "^10.17.1"
   },
   "scripts": {
     "clean:turbo": "rss",

package/src/components/menu/index.ts

@@ -1,5 +1,9 @@
 import LogicFlow from '@logicflow/core'
 
+import GraphData = LogicFlow.GraphData
+import NodeData = LogicFlow.NodeData
+import EdgeData = LogicFlow.EdgeData
+
 type SetType = 'add' | 'reset'
 
 export type MenuItem = {
@@ -25,7 +29,7 @@ class Menu {
   private __container?: HTMLElement
   private __menuDOM?: HTMLElement
   private menuTypeMap?: Map<string, MenuItem[]>
-  private __currentData: any
+  private __currentData: EdgeData | NodeData | GraphData | null = null
   static pluginName = 'menu'
 
   constructor({ lf }) {
@@ -107,7 +111,7 @@ class Menu {
     this.menuTypeMap?.set(DefaultSelectionMenuKey, DefaultSelectionMenu)
   }
 
-  render(lf, container) {
+  render(lf: LogicFlow, container: HTMLElement) {
     if (lf.options.isSilentMode) return
     this.__container = container
     this.__currentData = null // 当前展示的菜单所属元素的model数据
@@ -147,7 +151,7 @@ class Menu {
       )
     }
     // 通过事件控制菜单的显示和隐藏
-    this.lf.on('node:contextmenu', ({ data, position, e }: any) => {
+    this.lf.on('node:contextmenu', ({ data, position, e }) => {
       const {
         domOverlayPosition: { x, y },
       } = position
@@ -157,14 +161,14 @@ class Menu {
       if (!model) return
       let menuList: any = []
       const typeMenus = this.menuTypeMap?.get(model.type)
-      // 如果单个节点自定义了节点，以单个节点自定义为准
+      // 1.如果单个节点自定义了菜单，以单个节点自定义为准
       if (model && model.menu && Array.isArray(model.menu)) {
         menuList = model.menu
       } else if (typeMenus) {
-        // 如果定义当前节点类型的元素
+        // 2.如果当前节点类型定义了菜单，再取该配置
         menuList = typeMenus
       } else {
-        // 最后取全局默认
+        // 3.最后取全局默认
         menuList = this.menuTypeMap?.get(DefaultNodeMenuKey)
       }
       this.__currentData = data
@@ -175,7 +179,7 @@ class Menu {
         clientY: e.clientY,
       })
     })
-    this.lf.on('edge:contextmenu', ({ data, position, e }: any) => {
+    this.lf.on('edge:contextmenu', ({ data, position, e }) => {
       const {
         domOverlayPosition: { x, y },
       } = position
@@ -183,15 +187,13 @@ class Menu {
       const model = this.lf.graphModel.getEdgeModelById(id)
       if (!model) return
       let menuList: any = []
-      const typeMenus = this.menuTypeMap?.get(model.type) ?? []
-      // 如果单个节点自定义了边
+      const typeMenus = this.menuTypeMap?.get(model.type)
+      // 菜单优先级： model.menu > typeMenus > defaultEdgeMenu，注释同上节点
       if (model && model.menu && Array.isArray(model.menu)) {
         menuList = model.menu
       } else if (typeMenus) {
-        // 如果定义当前边类型的元素
         menuList = typeMenus
       } else {
-        // 最后取全局默认
         menuList = this.menuTypeMap?.get(DefaultEdgeMenuKey) ?? []
       }
       this.__currentData = data
@@ -202,14 +204,14 @@ class Menu {
         clientY: e.clientY,
       })
     })
-    this.lf.on('blank:contextmenu', ({ position }: any) => {
+    this.lf.on('blank:contextmenu', ({ position }) => {
       const menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
       const {
         domOverlayPosition: { x, y },
       } = position
       this.showMenu(x, y, menuList)
     })
-    this.lf.on('selection:contextmenu', ({ data, position }: any) => {
+    this.lf.on('selection:contextmenu', ({ data, position }) => {
       const menuList = this.menuTypeMap?.get(DefaultSelectionMenuKey)
       const {
         domOverlayPosition: { x, y },
@@ -217,6 +219,7 @@ class Menu {
       this.__currentData = data
       this.showMenu(x, y, menuList)
     })
+
     this.lf.on('node:mousedown', () => {
       this.__menuDOM!.style.display = 'none'
     })

package/src/index.ts

@@ -14,6 +14,7 @@ export * from './components/selection-select'
 export * from './components/mini-map'
 export * from './materials/curved-edge'
 export * from './materials/group'
+export * from './materials/node-selection'
 export * from './NodeResize'
 export * from './tools/flow-path'
 export * from './tools/auto-layout'

package/src/insert-node-in-polyline/index.ts

@@ -2,7 +2,7 @@ import LogicFlow, {
   BaseNodeModel,
   PolylineEdgeModel,
   EventType,
-  formateAnchorConnectValidateData,
+  formatAnchorConnectValidateData,
 } from '@logicflow/core'
 import { cloneDeep } from 'lodash-es'
 import { isNodeInSegment } from './edge'
@@ -85,9 +85,9 @@ export class InsertNodeInPolyline {
     )
 
     const { isAllPass: isSourcePass, msg: sourceMsg } =
-      formateAnchorConnectValidateData(sourceRuleResultData)
+      formatAnchorConnectValidateData(sourceRuleResultData)
     const { isAllPass: isTargetPass, msg: targetMsg } =
-      formateAnchorConnectValidateData(targetRuleResultData)
+      formatAnchorConnectValidateData(targetRuleResultData)
 
     return {
       isPass: isSourcePass && isTargetPass,

package/src/materials/node-selection/index.ts

@@ -2,17 +2,6 @@ import { get } from 'lodash-es'
 import { h, PolygonNode, PolygonNodeModel } from '@logicflow/core'
 
 class NodeSelectionView extends PolygonNode {
-  d = 10
-
-  getShapeStyle() {
-    // 设置边框为虚线
-    const style = this.props.model.getNodeStyle()
-    // @ts-ignore
-    style.strokeDashArray = '10 5'
-
-    return style
-  }
-
   getLabelShape(): h.JSX.Element {
     const { id, x, y, width, height, properties } = this.props.model
     const style = this.props.model.getNodeStyle()
@@ -21,38 +10,38 @@ class NodeSelectionView extends PolygonNode {
       {
         x: x - width / 2,
         y: y - height / 2,
+        width: 50,
+        height: 24,
         style: 'z-index: 0; background: none; overflow: auto;',
       },
-      properties.labelText
-        ? h(
-            'text',
-            {
-              x: 0,
-              y: -5,
-              width: 50,
-              height: 24,
-              fontSize: '16px',
-              fill: style.stroke,
-            },
-            '方案',
-          )
-        : '',
-      properties.disabledDelete
-        ? ''
-        : h(
-            'text',
-            {
-              x: properties.labelText ? 50 : 0,
-              y: -5,
-              width: 50,
-              height: 24,
-              fontSize: '24px',
-              cursor: 'pointer',
-              fill: style.stroke,
-              onclick: this.handleCustomDeleteIconClick.bind(this, id),
-            },
-            'x',
-          ),
+      [
+        properties.labelText
+          ? h(
+              'text',
+              {
+                x: 0,
+                y: -5,
+                fontSize: '16px',
+                fill: style.stroke,
+              },
+              properties.labelText,
+            )
+          : '',
+        properties.disabledDelete
+          ? ''
+          : h(
+              'text',
+              {
+                x: properties.labelText ? 50 : 0,
+                y: -5,
+                fontSize: '24px',
+                cursor: 'pointer',
+                fill: style.stroke,
+                onclick: this.handleCustomDeleteIconClick.bind(this, id),
+              },
+              'x',
+            ),
+      ],
     )
   }
 
@@ -72,7 +61,7 @@ class NodeSelectionView extends PolygonNode {
       this.getLabelShape(),
     ])
   }
-
+  // 避免点击时，该节点置于最高层，挡住内部节点
   toFront() {}
 
   /**
@@ -88,36 +77,46 @@ class NodeSelectionView extends PolygonNode {
 class NodeSelectionModel extends PolygonNodeModel {
   d = 10
 
-  setAttributes() {
-    // 默认不显示
-    this.points = []
-
-    this.text = {
+  initNodeData(data) {
+    data.text = {
       value: '',
-      x: 0,
-      y: 0,
+      x: data.x,
+      y: data.y,
       draggable: false,
       editable: false,
     }
-    this.stroke = this.properties.active_color || '#008000'
+    super.initNodeData(data)
     this.zIndex = 0
-    this.draggable = false
-    this.anchorsOffset = [[0, 0]]
+    this.draggable = true
+  }
 
-    // TODO: 确认此处为何使用 setTimeout, 是初始化时该设置未生效吗？
-    if ((this.properties.node_selection_ids as string[]).length > 1) {
+  setAttributes() {
+    // 默认不显示
+    this.points = []
+
+    // 图render的时候，会把所有nodes数据实例化，全部实例化完成后，放到nodesMap里。
+    // 节点的setAttributes在实例化的时候执行第一次
+    // updatePointsByNodes中的getNodeModelById方法，是从nodesMap取的数据，第一次就拿不到，所以要加setTimeout
+    if ((this.properties?.node_selection_ids as string[]).length > 1) {
       setTimeout(() => {
-        this.updatePointsByNodes(this.properties.node_selection_ids)
+        this.updatePointsByNodes(this.properties?.node_selection_ids || [])
       })
     }
   }
 
+  getNodeStyle() {
+    const style = super.getNodeStyle()
+    style.stroke = this.properties.strokeColor || '#008000'
+    style.strokeDasharray = '10 5'
+    return style
+  }
+
   getDefaultAnchor() {
     return []
   }
 
   /**
-   * 更新points
+   * 更新points - 多边形顶点坐标集合
    * @param points
    */
   updatePoints(points) {
@@ -125,7 +124,7 @@ class NodeSelectionModel extends PolygonNodeModel {
   }
 
   /**
-   * 更新x y
+   * 更新x y - 多边形中点坐标
    */
   updateCoordinate({ x, y }) {
     this.x = x
@@ -133,10 +132,9 @@ class NodeSelectionModel extends PolygonNodeModel {
   }
 
   /**
-   * 更新points
+   * 计算新的 points 和 x y
    */
   updatePointsByNodes(nodesIds) {
-    // TODO: 临时方案矩形
     const points: [number, number][] = []
     let minX = Infinity
     let minY = Infinity
@@ -164,7 +162,7 @@ class NodeSelectionModel extends PolygonNodeModel {
   }
 }
 
-export class NodeSelection {
+class NodeSelection {
   static pluginName = 'node-selection'
   lf // lf 实例
   selectNodes: any[] = [] // 选择的nodes
@@ -237,26 +235,20 @@ export class NodeSelection {
 
     lf.on('node:click', (val) => {
       if (!val.e.shiftKey || val.data.type === 'node-selection') return
-
       this.currentClickNode = val.data
 
       // 如果selectNodesIds中已存在此节点，则取消选中此节点
-      let isUnSelected = false
+      let hasExists = false
       if (this.selectNodesIds.includes(val.data.id)) {
         this.lf.getNodeModelById(val.data.id).setSelected(false)
-        isUnSelected = true
+        hasExists = true
       }
 
       // 获取所有被选中的节点，获取到的数组是无序的
       const { nodes } = lf.getSelectElements(true)
-      // 使用插件时判断是否允许使用node-selection
-      if (lf.disableNodeSelection && lf.disableNodeSelection(nodes)) {
-        return
-      }
       this.selectNodes = nodes
-
       if (this.selectNodes.length === 1) {
-        if (!isUnSelected) {
+        if (!hasExists) {
           this.addNodeSelection()
         } else {
           this.updateNodeSelection()
@@ -265,7 +257,18 @@ export class NodeSelection {
         this.updateNodeSelection()
       }
     })
+    lf.graphModel.addNodeMoveRules((model, deltaX, deltaY) => {
+      if (model.type === 'node-selection') {
+        // 如果移动的是分组，那么分组的子节点也跟着移动。
+        const nodeIds = model.properties.node_selection_ids
+        lf.graphModel.moveNodes(nodeIds, deltaX, deltaY, true)
+        return true
+      }
+      return true
+    })
   }
 }
 
 export default NodeSelection
+
+export { NodeSelection }