@logicflow/extension 2.0.0-beta.1 → 2.0.0-beta.11

package/lib/tools/snapshot/utils.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 当获取图片失败时会返回失败信息，是 text/plain 类型的数据
+ * @param str - 图片内容
+ * @returns
+ */
+export declare function isTextPlainBase64(str: string): boolean;
+/**
+ * 将网络图片转为 base64
+ * @param url - 图片地址
+ * @returns
+ */
+export declare function convertImageToBase64(url: string): Promise<string>;
+/**
+ * 使用 base64 的图片替换 img 标签的 src 或 image 标签的 href
+ * @param node - html 节点或 svg 节点
+ */
+export declare function updateImageSrcOrHrefWithBase64Image(node: HTMLImageElement | SVGImageElement, attrName: 'src' | 'href'): Promise<void>;
+/**
+ * 使用 base64 的图片替换背景图片
+ * @param node - html 节点
+ * @param styleAttr - 样式属性名称
+ */
+export declare function updateBackgroundImageWithBase64Image(node: HTMLElement, url: string): Promise<void>;
+/**
+ * 更新图片数据
+ * @param node - 节点
+ */
+export declare function updateImageSource(node: HTMLElement | SVGElement): Promise<void>;
+/**
+ * 重新复制canvas 用于在不裁剪原canvas的基础上通过拉伸方式达到自定义宽高目的
+ * @param originCanvas HTMLCanvasElement
+ * @param targetWidth number
+ * @param targetHeight number
+ */
+export declare function copyCanvas(originCanvas: HTMLCanvasElement, targetWidth: number, targetHeight: number): HTMLCanvasElement;

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;GAEG;AACH,IAAM,UAAU,GAA2B,EAAE,CAAA;AAE7C;;;;GAIG;AACH,SAAgB,iBAAiB,CAAC,GAAW;IAC3C,OAAO,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;AAC1C,CAAC;AAFD,8CAEC;AAED;;;;GAIG;AACH,SAAsB,oBAAoB,CAAC,GAAW;;;YACpD,IAAI,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;gBACpB,sBAAO,UAAU,CAAC,GAAG,CAAC,EAAA;YACxB,CAAC;YACD,sBAAO,IAAI,OAAO,CAAC,UAAC,OAAO,EAAE,MAAM;oBACjC,IAAI,CAAC;wBACH,KAAK,CAAC,GAAG,CAAC;6BACP,IAAI,CAAC,UAAC,QAAQ,IAAK,OAAA,QAAQ,CAAC,IAAI,EAAE,EAAf,CAAe,CAAC;6BACnC,IAAI,CAAC,UAAC,IAAI;4BACT,IAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAA;4BAC/B,MAAM,CAAC,SAAS,GAAG;gCACjB,OAAO,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAgB,CAAC,CAAC,CAAA;4BACtD,CAAC,CAAA;4BACD,MAAM,CAAC,OAAO,GAAG,MAAM,CAAA;4BACvB,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;wBAC5B,CAAC,CAAC;6BACD,KAAK,CAAC;4BACL,OAAO,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;wBAClC,CAAC,CAAC,CAAA;oBACN,CAAC;oBAAC,OAAO,KAAK,EAAE,CAAC;wBACf,2BAA2B;wBAC3B,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA;oBAChC,CAAC;gBACH,CAAC,CAAC,EAAA;;;CACH;AAxBD,oDAwBC;AAED;;;GAGG;AACH,SAAsB,mCAAmC,CACvD,IAAwC,EACxC,QAAwB;;;;;;;oBAGhB,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAA;oBAC7C,sBAAsB;oBACtB,IAAI,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;wBAC5B,sBAAM;oBACR,CAAC;oBACmB,qBAAM,oBAAoB,CAAC,GAAG,CAAC,EAAA;;oBAA7C,WAAW,GAAG,SAA+B;oBACnD,IAAI,iBAAiB,CAAC,WAAW,CAAC,EAAE,CAAC;wBACnC,sBAAM;oBACR,CAAC;oBACD,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAA;;;;oBAExC,OAAO,CAAC,KAAK,CAAC,OAAK,CAAC,CAAA;;;;;;CAEvB;AAlBD,kFAkBC;AAED;;;;GAIG;AACH,SAAsB,oCAAoC,CACxD,IAAiB,EACjB,GAAW;;;;;;;oBAGT,sBAAsB;oBACtB,IAAI,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;wBAC5B,sBAAM;oBACR,CAAC;oBACmB,qBAAM,oBAAoB,CAAC,GAAG,CAAC,EAAA;;oBAA7C,WAAW,GAAG,SAA+B;oBACnD,IAAI,iBAAiB,CAAC,WAAW,CAAC,EAAE,CAAC;wBACnC,sBAAM;oBACR,CAAC;oBACD,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,cAAO,WAAW,MAAG,CAAA;;;;oBAElD,OAAO,CAAC,KAAK,CAAC,OAAK,CAAC,CAAA;;;;;;CAEvB;AAjBD,oFAiBC;AAED;;;GAGG;AACH,SAAsB,iBAAiB,CAAC,IAA8B;;;;;;oBAC9D,KAAK,GAAG,CAAC,IAAI,CAAC,CAAA;oBAEd,QAAQ,GAAU,EAAE,CAAA;oBAC1B,OAAO,KAAK,CAAC,MAAM,EAAE,CAAC;wBACpB,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;wBACvB,IAAI,OAAO,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;4BAC5B,KAAK,CAAC,IAAI,OAAV,KAAK,2BAAS,OAAO,CAAC,QAAQ,WAAC;wBACjC,CAAC;wBACD,IAAI,OAAO,YAAY,WAAW,EAAE,CAAC;4BAE7B,KAAkC,OAAO,CAAC,KAAK,EAA7C,UAAU,gBAAA,EAAE,eAAe,qBAAA,CAAkB;4BAC/C,kBAAkB,GAAG,UAAU,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAA;4BACrE,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;gCAC1C,QAAQ,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAAA;gCACtC,QAAQ,CAAC,IAAI,CAAC,oCAAoC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;4BACxE,CAAC;4BACK,uBAAuB,GAAG,eAAe,CAAC,KAAK,CACnD,wBAAwB,CACzB,CAAA;4BACD,IAAI,uBAAuB,IAAI,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;gCACpD,QAAQ,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAA;gCAC3C,QAAQ,CAAC,IAAI,CAAC,oCAAoC,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;4BACxE,CAAC;wBACH,CAAC;wBACD,kDAAkD;wBAClD,IAAI,OAAO,YAAY,gBAAgB,EAAE,CAAC;4BACxC,QAAQ,CAAC,IAAI,CAAC,mCAAmC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;wBACpE,CAAC;6BAAM,IAAI,OAAO,YAAY,eAAe,EAAE,CAAC;4BAC9C,QAAQ,CAAC,IAAI,CAAC,mCAAmC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAA;wBACrE,CAAC;oBACH,CAAC;oBACD,qBAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAA;;oBAA3B,SAA2B,CAAA;;;;;CAC5B;AAjCD,8CAiCC;AAED;;;;;GAKG;AACH,SAAgB,UAAU,CACxB,YAA+B,EAC/B,WAAmB,EACnB,YAAoB;IAEpB,IAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IAClD,SAAS,CAAC,KAAK,GAAG,WAAW,CAAA;IAC7B,SAAS,CAAC,MAAM,GAAG,YAAY,CAAA;IAC/B,IAAM,MAAM,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;IACzC,IAAI,MAAM,EAAE,CAAC;QACX,0CAA0C;QAC1C,MAAM,CAAC,SAAS,CACd,YAAY,EACZ,CAAC,EACD,CAAC,EACD,YAAY,CAAC,KAAK,EAClB,YAAY,CAAC,MAAM,EACnB,CAAC,EACD,CAAC,EACD,WAAW,EACX,YAAY,CACb,CAAA;IACH,CAAC;IACD,OAAO,SAAS,CAAA;AAClB,CAAC;AAxBD,gCAwBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,12 +20,18 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.0-beta.1"
+    "@logicflow/core": "2.0.0-beta.11"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
+    "classnames": "^2.3.2",
+    "lodash-es": "^4.17.21",
+    "medium-editor": "^5.23.3",
+    "mobx": "^5.15.7",
     "preact": "^10.17.1",
-    "@logicflow/core": "2.0.0-beta.1"
+    "rangy": "^1.3.1",
+    "vanilla-picker": "^2.12.3",
+    "@logicflow/core": "2.0.0-beta.11"
   },
   "scripts": {
     "clean:turbo": "rss",

package/rollup.config.js

@@ -1,3 +1,3 @@
 import { rollupConfig } from '../../rollup.config'
 
-export default rollupConfig()
+export default rollupConfig({})

package/src/NodeResize/control/Control.tsx

@@ -307,6 +307,8 @@ class Control extends Component<IControlProps, IControlState> {
     // 更新边
     this.updateEdgePointByAnchors()
     this.eventEmit({
+      deltaX,
+      deltaY,
       beforeNode,
       afterNode,
     })
@@ -373,6 +375,8 @@ class Control extends Component<IControlProps, IControlState> {
     // 更新边
     this.updateEdgePointByAnchors()
     this.eventEmit({
+      deltaX,
+      deltaY,
       beforeNode: {
         ...beforeNode,
         rx,
@@ -444,11 +448,13 @@ class Control extends Component<IControlProps, IControlState> {
     // 更新边
     this.updateEdgePointByAnchors()
     this.eventEmit({
+      deltaX,
+      deltaY,
       beforeNode,
       afterNode,
     })
   }
-  eventEmit = ({ beforeNode, afterNode }: any) => {
+  eventEmit = ({ deltaX, deltaY, beforeNode, afterNode }: any) => {
     const { id, modelType, type } = this.nodeModel
     const oldNodeSize = {
       id,
@@ -463,8 +469,12 @@ class Control extends Component<IControlProps, IControlState> {
       ...afterNode,
     }
     this.graphModel.eventCenter.emit('node:resize', {
-      oldNodeSize,
-      newNodeSize,
+      preData: oldNodeSize,
+      data: newNodeSize,
+      deltaX,
+      deltaY,
+      index: this.index,
+      model: this.nodeModel,
     })
   }
   onDragging = ({ deltaX, deltaY }: VectorData) => {

package/src/NodeResize/index.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated
+ * 待废弃，2.0 版本将 NodeResize 能力内置，该插件设计和实现有比较多的问题，后续不再维护，请及时切换
+ */
 import LogicFlow from '@logicflow/core'
 
 import EllipseResize from './node/EllipseResize'

package/src/NodeResize/node/DiamondResize.tsx

@@ -58,7 +58,8 @@ export class DiamondResizeModel extends DiamondNodeModel {
 
   getResizeOutlineStyle() {
     return {
-      stroke: '#000000',
+      fill: 'none',
+      stroke: 'transparent',
       strokeWidth: 1,
       strokeDasharray: '3,3',
     }

package/src/NodeResize/node/EllipseResize.tsx

@@ -56,7 +56,8 @@ export class EllipseResizeModel extends EllipseNodeModel {
 
   getResizeOutlineStyle() {
     return {
-      stroke: '#000000',
+      fill: 'none',
+      stroke: 'transparent',
       strokeWidth: 1,
       strokeDasharray: '3,3',
     }

package/src/NodeResize/node/HtmlResize.tsx

@@ -41,7 +41,7 @@ export class HtmlResizeModel extends HtmlNodeModel {
 
   getResizeOutlineStyle() {
     return {
-      fill: 'transparent',
+      fill: 'none',
       stroke: 'transparent',
       strokeWidth: 1,
       strokeDasharray: '3,3',

package/src/NodeResize/node/RectResize.tsx

@@ -62,7 +62,7 @@ export class RectResizeModel extends RectNodeModel {
 
   getResizeOutlineStyle() {
     return {
-      fill: 'transparent',
+      fill: 'none',
       stroke: 'transparent', // 矩形默认不显示调整边框
       strokeWidth: 1,
       strokeDasharray: '3,3',

package/src/bpmn/constant.ts

@@ -25,7 +25,7 @@ export const UserTaskConfig = {
   height: 80,
 }
 
-export const theme: LogicFlow.CommonTheme = {
+export const theme: Partial<LogicFlow.Theme> = {
   rect: {
     radius: 5,
     stroke: 'rgb(24, 125, 255)',
@@ -43,6 +43,9 @@ export const theme: LogicFlow.CommonTheme = {
     selectedStroke: 'rgb(24, 125, 255)',
   },
   edgeText: {
+    textWidth: 100,
+    overflowMode: 'default',
+    fontSize: 12,
     background: {
       fill: 'white',
       height: 14,

package/src/bpmn/index.ts

@@ -1,3 +1,4 @@
+import LogicFlow from '@logicflow/core'
 import { theme } from './constant'
 import {
   StartEvent,
@@ -22,10 +23,12 @@ import {
   ServiceTaskModel,
 } from './tasks'
 
-class BpmnElement {
-  static pluginName = 'bpmnElement'
+import ExtensionDefinition = LogicFlow.ExtensionDefinition
 
-  constructor({ lf }) {
+const BpmnElement: ExtensionDefinition = {
+  pluginName: 'bpmnElement',
+
+  install(lf) {
     lf.setTheme(theme)
     lf.register(StartEvent)
     lf.register(EndEvent)
@@ -37,7 +40,7 @@ class BpmnElement {
       lf.register(SequenceFlow)
       lf.setDefaultEdgeType('bpmn:sequenceFlow')
     }
-  }
+  },
 }
 
 export {

package/src/bpmn-elements-adapter/README.md

@@ -290,6 +290,4 @@ const mergeInNOutObject = (target: any, source: any): TransformerType => {
   });
   return target;
 };
-```
-
-进行合并
+```

package/src/components/control/index.ts

@@ -5,9 +5,9 @@ type ControlItem = {
   iconClass: string
   title: string
   text: string
-  onClick?: (lf: LogicFlow) => void
-  onMouseEnter?: (lf: LogicFlow) => void
-  onMouseLeave?: (lf: LogicFlow) => void
+  onClick?: (lf: LogicFlow, e: MouseEvent) => void
+  onMouseEnter?: (lf: LogicFlow, e: MouseEvent) => void
+  onMouseLeave?: (lf: LogicFlow, e: MouseEvent) => void
 }
 
 export class Control {
@@ -64,7 +64,7 @@ export class Control {
   private domContainer?: HTMLElement
   private toolEl?: HTMLElement
 
-  constructor({ lf }: LogicFlow.ExtensionProps) {
+  constructor({ lf }: LogicFlow.IExtensionProps) {
     this.lf = lf
   }
 

package/src/components/highlight/index.ts

@@ -1,4 +1,5 @@
 import LogicFlow, { BaseNodeModel } from '@logicflow/core'
+import { concat } from 'lodash-es'
 
 // 后续并入FlowPath
 const getPath = (id: string, lf: LogicFlow) => {
@@ -80,25 +81,28 @@ const getNodePath = (node, lf: LogicFlow) => {
   return [...new Set([...incomingPaths.flat(), ...outgoingPaths.flat()])]
 }
 
-type IMode = 'single' | 'path'
+type IMode = 'single' | 'path' | 'neighbour'
 
 export class Highlight {
   lf: LogicFlow
   static pluginName = 'highlight'
   mode: IMode = 'path'
-  manual = false
+  enable = true
   tempStyles = {}
 
-  constructor({ lf }) {
+  constructor({ lf, options }) {
+    const { mode = 'path', enable = true } = options
     this.lf = lf
+    this.mode = mode
+    this.enable = enable
   }
 
   setMode(mode: IMode) {
     this.mode = mode
   }
 
-  setManual(manual: boolean) {
-    this.manual = manual
+  setEnable(enable: boolean) {
+    this.enable = enable
   }
 
   private highlightSingle(id: string) {
@@ -115,6 +119,28 @@ export class Highlight {
     }
   }
 
+  private highlightNeighbours(id: string) {
+    const model = this.lf.getModelById(id)
+
+    if (model?.BaseType === 'node') {
+      // 高亮节点
+      model.updateStyles(this.tempStyles[id])
+      const { nodes: incomingNodes, edges: incomingEdges } = model.incoming
+      const { nodes: outgoingNodes, edges: outgoingEdges } = model.outgoing
+      concat(incomingNodes, outgoingNodes).forEach((node) => {
+        node.updateStyles(this.tempStyles[node.id])
+      })
+      concat(incomingEdges, outgoingEdges).forEach((edge) => {
+        edge.updateStyles(this.tempStyles[edge.id])
+      })
+    } else if (model?.BaseType === 'edge') {
+      // 高亮边及对应的节点
+      model.updateStyles(this.tempStyles[id])
+      model.sourceNode.updateStyles(this.tempStyles[model.sourceNode.id])
+      model.targetNode.updateStyles(this.tempStyles[model.targetNode.id])
+    }
+  }
+
   private highlightPath(id: string) {
     const path = getPath(id, this.lf)
     path.forEach((_id) => {
@@ -124,7 +150,7 @@ export class Highlight {
   }
 
   highlight(id: string, mode: IMode = this.mode) {
-    if (this.manual) return
+    if (!this.enable) return
     if (Object.keys(this.tempStyles).length) {
       this.restoreHighlight()
     }
@@ -141,6 +167,7 @@ export class Highlight {
 
     const modeTrigger = {
       single: this.highlightSingle.bind(this),
+      neighbour: this.highlightNeighbours.bind(this),
       path: this.highlightPath.bind(this),
     }