@logicflow/core 2.0.12 → 2.0.14

package/lib/util/theme.d.ts

@@ -1,4 +1,69 @@
 import LogicFlow from '../LogicFlow';
 export declare const defaultTheme: LogicFlow.Theme;
-export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>) => LogicFlow.Theme;
-export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>) => LogicFlow.Theme;
+export declare const radiusMode: any;
+export declare const darkMode: any;
+export declare const colorfulMode: any;
+export declare const themeModeMap: {
+    colorful: any;
+    dark: any;
+    radius: any;
+    default: LogicFlow.Theme;
+};
+export declare const darkBackground: {
+    background: string;
+};
+export declare const colorfulBackground: {
+    background: string;
+};
+export declare const defaultBackground: {
+    background: string;
+};
+export declare const backgroundModeMap: {
+    colorful: {
+        background: string;
+    };
+    dark: {
+        background: string;
+    };
+    radius: {
+        background: string;
+    };
+    default: {
+        background: string;
+    };
+};
+export declare const darkGrid: {
+    color: string;
+    thickness: number;
+};
+export declare const colorfulGrid: {
+    color: string;
+    thickness: number;
+};
+export declare const defaultGrid: {
+    color: string;
+    thickness: number;
+};
+export declare const gridModeMap: {
+    colorful: {
+        color: string;
+        thickness: number;
+    };
+    dark: {
+        color: string;
+        thickness: number;
+    };
+    radius: {
+        color: string;
+        thickness: number;
+    };
+    default: {
+        color: string;
+        thickness: number;
+    };
+};
+export declare const setupTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;
+export declare const addThemeMode: (themeMode: string, style: Partial<LogicFlow.Theme>) => void;
+export declare const removeThemeMode: (themeMode: string) => void;
+export declare const clearThemeMode: () => void;
+export declare const updateTheme: (customTheme?: Partial<LogicFlow.Theme>, themeMode?: 'radius' | 'dark' | 'colorful' | 'default' | string) => LogicFlow.Theme;

package/lib/util/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.updateTheme = exports.setupTheme = exports.defaultTheme = void 0;
+exports.updateTheme = exports.clearThemeMode = exports.removeThemeMode = exports.addThemeMode = exports.setupTheme = exports.gridModeMap = exports.defaultGrid = exports.colorfulGrid = exports.darkGrid = exports.backgroundModeMap = exports.defaultBackground = exports.colorfulBackground = exports.darkBackground = exports.themeModeMap = exports.colorfulMode = exports.darkMode = exports.radiusMode = exports.defaultTheme = void 0;
 var lodash_es_1 = require("lodash-es");
 exports.defaultTheme = {
     baseNode: {
@@ -119,9 +119,171 @@ exports.defaultTheme = {
         strokeDasharray: '3,3',
     },
 };
+exports.radiusMode = {
+    rect: { radius: 8 },
+    diamond: { radius: 8 },
+    polygon: { radius: 8 },
+    polyline: { radius: 8 },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    outline: {
+        radius: 8,
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    resizeOutline: {
+        radius: 8,
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+};
+exports.darkMode = {
+    baseNode: {
+        fill: '#23272e',
+        stroke: '#fefeff',
+    },
+    baseEdge: {
+        stroke: '#fefeff',
+    },
+    rect: { radius: 8 },
+    diamond: { radius: 8 },
+    polygon: { radius: 8 },
+    polyline: { radius: 8 },
+    nodeText: {
+        color: '#fefeff',
+        overflowMode: 'default',
+        fontSize: 12,
+        lineHeight: 1.2,
+    },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    outline: {
+        radius: 8,
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    resizeOutline: {
+        radius: 8,
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+};
+exports.colorfulMode = {
+    rect: { fill: '#72CBFF', stroke: '#3ABDF9', radius: 8 },
+    circle: { fill: '#FFE075', stroke: '#F9CE3A', radius: 8 },
+    ellipse: { fill: '#FFA8A8', stroke: '#FF6B66', radius: 8 },
+    text: { fill: '#72CBFF', radius: 8 },
+    diamond: { fill: '#96F7AF', stroke: '#40EF7E', radius: 8 },
+    polygon: { fill: '#E0A8FF', stroke: '#C271FF', radius: 8 },
+    polyline: { radius: 8 },
+    arrow: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        offset: 10,
+        verticalLength: 5, // 箭头垂直于边的距离
+    },
+    snapline: {
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+        stroke: '#949494',
+        strokeWidth: 1,
+    },
+    outline: {
+        radius: 8,
+        fill: 'transparent',
+        stroke: '#949494',
+        strokeDasharray: '3,3',
+        hover: {
+            stroke: '#949494',
+        },
+    },
+    resizeOutline: {
+        radius: 8,
+        fill: 'none',
+        stroke: 'transparent', // 矩形默认不显示调整边框
+        strokeWidth: 1,
+        strokeDasharray: '3,3',
+    },
+};
+exports.themeModeMap = {
+    colorful: exports.colorfulMode,
+    dark: exports.darkMode,
+    radius: exports.radiusMode,
+    default: exports.defaultTheme,
+};
+// 不同主题的背景色
+exports.darkBackground = {
+    background: '#23272e',
+};
+exports.colorfulBackground = {
+    background: '#fefeff',
+};
+exports.defaultBackground = {
+    background: '#ffffff',
+};
+exports.backgroundModeMap = {
+    colorful: exports.colorfulBackground,
+    dark: exports.darkBackground,
+    radius: exports.defaultBackground,
+    default: exports.defaultBackground,
+};
+// 不同主题的网格样式
+exports.darkGrid = {
+    color: '#66676a',
+    thickness: 1,
+};
+exports.colorfulGrid = {
+    color: '#dadada',
+    thickness: 1,
+};
+exports.defaultGrid = {
+    color: '#acacac',
+    thickness: 1,
+};
+exports.gridModeMap = {
+    colorful: exports.colorfulGrid,
+    dark: exports.darkGrid,
+    radius: exports.defaultGrid,
+    default: exports.defaultGrid,
+};
 /* 主题（全局样式）相关工具方法 */
-var setupTheme = function (customTheme) {
+var setupTheme = function (customTheme, themeMode) {
     var theme = (0, lodash_es_1.cloneDeep)(exports.defaultTheme);
+    if (themeMode) {
+        theme = (0, lodash_es_1.merge)(theme, exports.themeModeMap[themeMode]);
+    }
     if (customTheme) {
         /**
          * 为了不让默认样式被覆盖，使用 merge 方法
@@ -155,5 +317,33 @@ var setupTheme = function (customTheme) {
     return theme;
 };
 exports.setupTheme = setupTheme;
+var addThemeMode = function (themeMode, style) {
+    if (exports.themeModeMap[themeMode]) {
+        console.warn("theme mode ".concat(themeMode, " already exists"));
+        return;
+    }
+    exports.themeModeMap[themeMode] = style;
+    exports.backgroundModeMap[themeMode] = style.background || exports.defaultBackground;
+    exports.gridModeMap[themeMode] = style.grid || exports.defaultGrid;
+};
+exports.addThemeMode = addThemeMode;
+var removeThemeMode = function (themeMode) {
+    delete exports.themeModeMap[themeMode];
+    delete exports.backgroundModeMap[themeMode];
+    delete exports.gridModeMap[themeMode];
+};
+exports.removeThemeMode = removeThemeMode;
+var clearThemeMode = function () {
+    var resetTheme = {
+        colorful: {},
+        dark: {},
+        radius: {},
+        default: {},
+    };
+    (0, lodash_es_1.assign)(exports.themeModeMap, resetTheme);
+    (0, lodash_es_1.assign)(exports.backgroundModeMap, resetTheme);
+    (0, lodash_es_1.assign)(exports.gridModeMap, resetTheme);
+};
+exports.clearThemeMode = clearThemeMode;
 /* 更新 theme 方法 */
 exports.updateTheme = exports.setupTheme;

package/lib/view/Graph.d.ts

@@ -1,5 +1,4 @@
 import { Component, ComponentType } from 'preact/compat';
-import { CanvasOverlay } from './overlay';
 import DnD from './behavior/dnd';
 import Tool from '../tool';
 import { Options as LFOptions } from '../options';
@@ -13,8 +12,6 @@ type IGraphProps = {
     graphModel: GraphModel;
 };
 declare class Graph extends Component<IGraphProps> {
-    canvasOverlayRef: import("preact").RefObject<CanvasOverlay>;
-    getCanvasOverlay: () => CanvasOverlay | null;
     private handleResize;
     private throttleResize;
     componentDidMount(): void;

package/lib/view/Graph.js

@@ -56,10 +56,6 @@ var Graph = /** @class */ (function (_super) {
     __extends(Graph, _super);
     function Graph() {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
-        _this.canvasOverlayRef = (0, compat_1.createRef)();
-        _this.getCanvasOverlay = function () {
-            return _this.canvasOverlayRef.current;
-        };
         _this.handleResize = function () {
             var _a = _this.props, graphModel = _a.graphModel, options = _a.options;
             var width = graphModel.width, height = graphModel.height, isContainerWidth = graphModel.isContainerWidth, isContainerHeight = graphModel.isContainerHeight;
@@ -116,9 +112,9 @@ var Graph = /** @class */ (function (_super) {
         }
         var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel, background = graphModel.background;
         var adjustEdge = editConfigModel.adjustEdge;
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { ref: this.canvasOverlayRef, graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [(0, jsx_runtime_1.jsxs)(overlay_1.CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [(0, jsx_runtime_1.jsx)("g", { className: "lf-base", children: (0, lodash_es_1.map)(graphModel.sortElements, function (nodeModel) {
                                 return _this.getComponent(nodeModel, graphModel);
-                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool, getCanvasOverlay: this.getCanvasOverlay }), background && (0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: background }), (0, jsx_runtime_1.jsx)(overlay_1.Grid, { graphModel: graphModel })] }));
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), (0, jsx_runtime_1.jsxs)(overlay_1.ModificationOverlay, { graphModel: graphModel, children: [(0, jsx_runtime_1.jsx)(overlay_1.OutlineOverlay, { graphModel: graphModel }), adjustEdge ? (0, jsx_runtime_1.jsx)(overlay_1.BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? ((0, jsx_runtime_1.jsx)(overlay_1.SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), (0, jsx_runtime_1.jsx)(overlay_1.ToolOverlay, { graphModel: graphModel, tool: tool }), background && (0, jsx_runtime_1.jsx)(overlay_1.BackgroundOverlay, { background: background }), (0, jsx_runtime_1.jsx)(overlay_1.Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         __1.observer

package/lib/view/edge/BaseEdge.d.ts

@@ -44,6 +44,10 @@ export declare abstract class BaseEdge<P extends IProps> extends Component<P, IE
      * 定义边的箭头，不支持重写。请使用getStartArrow和getEndArrow
      */
     private getArrow;
+    /**
+     * Private helper method to generate arrow path based on type and parameters
+     */
+    private getArrowPath;
     /**
      * @overridable 可重写，自定义边起点箭头形状。
      * @example

package/lib/view/edge/BaseEdge.js

@@ -317,6 +317,31 @@ var BaseEdge = /** @class */ (function (_super) {
         }
         return ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsx)("marker", { id: "marker-start-".concat(id), refX: -refX, refY: refY, overflow: "visible", orient: "auto", markerUnits: "userSpaceOnUse", children: this.getStartArrow() }), (0, jsx_runtime_1.jsx)("marker", { id: "marker-end-".concat(id), refX: refX, refY: refY, overflow: "visible", orient: theta, markerUnits: "userSpaceOnUse", children: this.getEndArrow() })] }) }));
     };
+    /**
+     * Private helper method to generate arrow path based on type and parameters
+     */
+    BaseEdge.prototype.getArrowPath = function (arrowType, props) {
+        var stroke = props.stroke, _a = props.fill, fill = _a === void 0 ? stroke : _a, strokeWidth = props.strokeWidth, _b = props.offset, offset = _b === void 0 ? 10 : _b, verticalLength = props.verticalLength, strokeLinecap = props.strokeLinecap, strokeLinejoin = props.strokeLinejoin, transform = props.transform;
+        var arrowPath = '';
+        switch (arrowType) {
+            case 'solid':
+                arrowPath = "M".concat(-offset / 4, ",0 L").concat((3 * offset) / 4, ",").concat(verticalLength, " L").concat((3 * offset) / 4, ",-").concat(verticalLength, " Z");
+                break;
+            case 'hollow':
+                arrowPath = "M".concat(-offset / 4, ",0 L").concat((3 * offset) / 4, ",").concat(verticalLength, " L").concat(-offset / 4, ",0 L").concat((3 * offset) / 4, ",-").concat(verticalLength, " L").concat(-offset / 4, ",0 Z");
+                break;
+            case 'diamond':
+                arrowPath = "M".concat(-offset / 2, ",0 L0,").concat(verticalLength, " L").concat(offset / 2, ",0 L0,-").concat(verticalLength, " L").concat(-offset / 2, ",0 Z");
+                break;
+            case 'circle':
+                arrowPath = "M".concat(-offset / 2, ",0 A").concat(offset / 4, ",").concat(offset / 4, " 0 1,0 ").concat(offset / 2, ",0 A").concat(offset / 4, ",").concat(offset / 4, " 0 1,0 ").concat(-offset / 2, ",0 Z");
+                break;
+            default:
+                arrowPath = '';
+                break;
+        }
+        return ((0, jsx_runtime_1.jsx)("path", { d: arrowPath, stroke: stroke, fill: fill, strokeWidth: strokeWidth, strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, transform: transform }));
+    };
     /**
      * @overridable 可重写，自定义边起点箭头形状。
      * @example
@@ -331,7 +356,16 @@ var BaseEdge = /** @class */ (function (_super) {
      * }
      */
     BaseEdge.prototype.getStartArrow = function () {
-        return (0, jsx_runtime_1.jsx)("path", {});
+        var model = this.props.model;
+        var _a = model.getArrowStyle(), stroke = _a.stroke, strokeWidth = _a.strokeWidth, offset = _a.offset, verticalLength = _a.verticalLength, _b = _a.startArrowType, startArrowType = _b === void 0 ? 'solid' : _b, strokeLinecap = _a.strokeLinecap, strokeLinejoin = _a.strokeLinejoin;
+        return this.getArrowPath(startArrowType, {
+            stroke: stroke,
+            strokeWidth: strokeWidth,
+            offset: offset,
+            verticalLength: verticalLength,
+            strokeLinecap: strokeLinecap,
+            strokeLinejoin: strokeLinejoin,
+        });
     };
     /**
      * @overridable 可重写，自定义边终点箭头形状。
@@ -348,8 +382,16 @@ var BaseEdge = /** @class */ (function (_super) {
      */
     BaseEdge.prototype.getEndArrow = function () {
         var model = this.props.model;
-        var _a = model.getArrowStyle(), stroke = _a.stroke, strokeWidth = _a.strokeWidth, offset = _a.offset, verticalLength = _a.verticalLength;
-        return ((0, jsx_runtime_1.jsx)("path", { stroke: stroke, fill: stroke, strokeWidth: strokeWidth, transform: "rotate(180)", d: "M 0 0 L ".concat(offset, " -").concat(verticalLength, " L ").concat(offset, " ").concat(verticalLength, " Z") }));
+        var _a = model.getArrowStyle(), stroke = _a.stroke, strokeWidth = _a.strokeWidth, offset = _a.offset, verticalLength = _a.verticalLength, _b = _a.endArrowType, endArrowType = _b === void 0 ? 'solid' : _b, strokeLinecap = _a.strokeLinecap, strokeLinejoin = _a.strokeLinejoin;
+        return this.getArrowPath(endArrowType, {
+            stroke: stroke,
+            strokeWidth: strokeWidth,
+            offset: offset,
+            verticalLength: verticalLength,
+            strokeLinecap: strokeLinecap,
+            strokeLinejoin: strokeLinejoin,
+            transform: 'rotate(180)',
+        });
     };
     /**
      * @overridable 可重写，自定义调整边连接节点形状。在开启了adjustEdgeStartAndEnd的时候，会显示调整点。

package/lib/view/overlay/Grid.js

@@ -57,8 +57,9 @@ var Grid = /** @class */ (function (_super) {
         return ((0, jsx_runtime_1.jsx)("path", { d: d, stroke: color, strokeWidth: strokeWidth / 2, opacity: opacity, fill: "transparent" }));
     };
     Grid.prototype.render = function () {
-        var transformModel = this.props.graphModel.transformModel;
-        var _a = this.gridOptions, type = _a.type, _b = _a.size, size = _b === void 0 ? 1 : _b;
+        var _a = this.props.graphModel, transformModel = _a.transformModel, grid = _a.grid;
+        this.gridOptions = grid;
+        var _b = this.gridOptions, type = _b.type, _c = _b.size, size = _c === void 0 ? 1 : _c;
         var SCALE_X = transformModel.SCALE_X, SKEW_Y = transformModel.SKEW_Y, SKEW_X = transformModel.SKEW_X, SCALE_Y = transformModel.SCALE_Y, TRANSLATE_X = transformModel.TRANSLATE_X, TRANSLATE_Y = transformModel.TRANSLATE_Y;
         var matrixString = [
             SCALE_X,

package/lib/view/overlay/ToolOverlay.d.ts

@@ -1,11 +1,10 @@
 import { createElement as h, Component } from 'preact/compat';
-import { CanvasOverlay, OutlineOverlay } from '.';
+import { OutlineOverlay } from '.';
 import { GraphModel } from '../../model';
 import { Tool } from '../../tool';
 type IProps = {
     graphModel: GraphModel;
     tool: Tool;
-    getCanvasOverlay: () => CanvasOverlay | null;
 };
 export declare class ToolOverlay extends Component<IProps> {
     componentDidMount(): void;
@@ -15,7 +14,6 @@ export declare class ToolOverlay extends Component<IProps> {
      */
     getTools(): import("preact").VNode<import("../..").IToolProps>[];
     triggerToolRender(): void;
-    zoomHandler: (e: WheelEvent) => void;
     render(): h.JSX.Element;
 }
 export default OutlineOverlay;

package/lib/view/overlay/ToolOverlay.js

@@ -20,31 +20,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-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.ToolOverlay = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
@@ -54,13 +29,7 @@ var __1 = require("../..");
 var ToolOverlay = /** @class */ (function (_super) {
     __extends(ToolOverlay, _super);
     function ToolOverlay() {
-        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
-        _this.zoomHandler = function (e) {
-            var _a;
-            // TODO 是否应该使用 dispatchEvent 来触发事件
-            (_a = _this.props.getCanvasOverlay()) === null || _a === void 0 ? void 0 : _a.zoomHandler(e);
-        };
-        return _this;
+        return _super !== null && _super.apply(this, arguments) || this;
     }
     // 在react严格模式下，useEffect会执行两次，但是在LogicFlow内部，则只会触发一次componentDidMount和componentDidUpdate。
     // 其中第一次componentDidMount对应的graphModel为被丢弃的graphModel, 所以不应该生效。
@@ -98,13 +67,7 @@ var ToolOverlay = /** @class */ (function (_super) {
     };
     ToolOverlay.prototype.render = function () {
         var graphModel = this.props.graphModel;
-        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-tool-overlay", id: "ToolOverlay_".concat(graphModel.flowId), 
-            /*
-             * 默认情况下该容器设置了 pointer-events: none，不会触发这些事件
-             * 只会在容器取消 pointer-events: none 后触发，用于缩放、滚动画布等操作
-             * 目前只在 selection-select 插件中使用。为了能在元素内部进行框选，在开启选区后会关闭事件透传。需要手动触发事件
-             */
-            onWheel: this.zoomHandler, children: this.getTools() }));
+        return ((0, jsx_runtime_1.jsx)("div", { className: "lf-tool-overlay", id: "ToolOverlay_".concat(graphModel.flowId), children: this.getTools() }));
     };
     ToolOverlay = __decorate([
         __1.observer

package/lib/view/shape/Polygon.d.ts

@@ -5,6 +5,14 @@ export type IPolygonProps = {
     x?: number;
     y?: number;
     className?: string;
+    radius?: number;
 };
+/**
+ * 生成带圆角的多边形路径
+ * @param points 多边形顶点坐标数组
+ * @param radius 圆角半径
+ * @returns SVG 路径字符串
+ */
+export declare function createRoundedPolygonPath(points: any, radius: any): string;
 export declare function Polygon(props: IPolygonProps): h.JSX.Element;
 export default Polygon;

package/lib/view/shape/Polygon.js

@@ -27,11 +27,52 @@ var __read = (this && this.__read) || function (o, n) {
     return ar;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Polygon = void 0;
+exports.Polygon = exports.createRoundedPolygonPath = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var lodash_es_1 = require("lodash-es");
+/**
+ * 生成带圆角的多边形路径
+ * @param points 多边形顶点坐标数组
+ * @param radius 圆角半径
+ * @returns SVG 路径字符串
+ */
+function createRoundedPolygonPath(points, radius) {
+    var pointList = points.map(function (point) { return ({ x: point[0], y: point[1] }); });
+    var len = pointList.length;
+    if (len < 3)
+        return '';
+    var r = Math.abs(radius);
+    var path = '';
+    for (var i = 0; i < len; i++) {
+        var prev = pointList[(i - 1 + len) % len];
+        var curr = pointList[i];
+        var next = pointList[(i + 1) % len];
+        // 向量
+        var v1 = { x: curr.x - prev.x, y: curr.y - prev.y };
+        var v2 = { x: next.x - curr.x, y: next.y - curr.y };
+        // 单位向量
+        var len1 = Math.hypot(v1.x, v1.y);
+        var len2 = Math.hypot(v2.x, v2.y);
+        var u1 = { x: v1.x / len1, y: v1.y / len1 };
+        var u2 = { x: v2.x / len2, y: v2.y / len2 };
+        // 起点 = curr - u1 * r，终点 = curr + u2 * r
+        var start = { x: curr.x - u1.x * r, y: curr.y - u1.y * r };
+        var end = { x: curr.x + u2.x * r, y: curr.y + u2.y * r };
+        if (i === 0) {
+            path += "M ".concat(start.x, " ").concat(start.y, " ");
+        }
+        else {
+            path += "L ".concat(start.x, " ").concat(start.y, " ");
+        }
+        // Q 控制点是当前拐角点
+        path += "Q ".concat(curr.x, " ").concat(curr.y, " ").concat(end.x, " ").concat(end.y, " ");
+    }
+    path += 'Z';
+    return path;
+}
+exports.createRoundedPolygonPath = createRoundedPolygonPath;
 function Polygon(props) {
-    var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className;
+    var _a = props.points, points = _a === void 0 ? [] : _a, className = props.className, radius = props.radius;
     var attrs = {
         fill: 'transparent',
         fillOpacity: 1,
@@ -52,8 +93,15 @@ function Polygon(props) {
     else {
         attrs.className = 'lf-basic-shape';
     }
-    attrs.points = points.map(function (point) { return point.join(','); }).join(' ');
-    return (0, jsx_runtime_1.jsx)("polygon", __assign({}, attrs));
+    if (radius) {
+        var path = createRoundedPolygonPath(points, radius);
+        attrs.d = path;
+        return (0, jsx_runtime_1.jsx)("path", __assign({}, attrs));
+    }
+    else {
+        attrs.points = points.map(function (point) { return point.join(','); }).join(' ');
+        return (0, jsx_runtime_1.jsx)("polygon", __assign({}, attrs));
+    }
 }
 exports.Polygon = Polygon;
 exports.default = Polygon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",