@logicflow/core 2.0.12 → 2.0.13

package/es/LogicFlow.d.ts

@@ -263,6 +263,11 @@ export declare class LogicFlow {
      * @param toFront 是否将选中的元素置顶，默认为true
      */
     selectElementById(id: string, multiple?: boolean, toFront?: boolean): void;
+    /**
+     * 移除选中的元素
+     * @param id 元素ID
+     */
+    deselectElementById(id: string): void;
     /**
      * 获取选中的元素数据
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。

package/es/LogicFlow.js

@@ -640,6 +640,13 @@ var LogicFlow = /** @class */ (function () {
             this.graphModel.toFront(id);
         }
     };
+    /**
+     * 移除选中的元素
+     * @param id 元素ID
+     */
+    LogicFlow.prototype.deselectElementById = function (id) {
+        this.graphModel.deselectElementById(id);
+    };
     /**
      * 获取选中的元素数据
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。

package/es/model/GraphModel.d.ts

@@ -322,6 +322,7 @@ export declare class GraphModel {
      * @param multiple 是否允许多选，如果为true，不会将上一个选中的元素重置
      */
     selectElementById(id: string, multiple?: boolean): void;
+    deselectElementById(id: string): void;
     /**
      * 将所有选中的元素设置为非选中
      */

package/es/model/GraphModel.js

@@ -1054,6 +1054,12 @@ var GraphModel = /** @class */ (function () {
         var selectElement = this.getElement(id);
         selectElement === null || selectElement === void 0 ? void 0 : selectElement.setSelected(true);
     };
+    GraphModel.prototype.deselectElementById = function (id) {
+        var element = this.getElement(id);
+        if (element) {
+            element.setSelected(false);
+        }
+    };
     /**
      * 将所有选中的元素设置为非选中
      */
@@ -1590,6 +1596,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         action
     ], GraphModel.prototype, "selectElementById", null);
+    __decorate([
+        action
+    ], GraphModel.prototype, "deselectElementById", null);
     __decorate([
         action
     ], GraphModel.prototype, "clearSelectElements", null);

package/es/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/es/view/Graph.js

@@ -45,7 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { Component, createRef } from 'preact/compat';
+import { Component } from 'preact/compat';
 import { map, throttle } from 'lodash-es';
 import { CanvasOverlay, ToolOverlay, BackgroundOverlay, Grid, SnaplineOverlay, OutlineOverlay, BezierAdjustOverlay, ModificationOverlay, } from './overlay';
 import { observer } from '..';
@@ -54,10 +54,6 @@ var Graph = /** @class */ (function (_super) {
     __extends(Graph, _super);
     function Graph() {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
-        _this.canvasOverlayRef = 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;
@@ -114,9 +110,9 @@ var Graph = /** @class */ (function (_super) {
         }
         var fakeNode = graphModel.fakeNode, editConfigModel = graphModel.editConfigModel, background = graphModel.background;
         var adjustEdge = editConfigModel.adjustEdge;
-        return (_jsxs("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [_jsxs(CanvasOverlay, { ref: this.canvasOverlayRef, graphModel: graphModel, dnd: dnd, children: [_jsx("g", { className: "lf-base", children: map(graphModel.sortElements, function (nodeModel) {
+        return (_jsxs("div", { className: "lf-graph", "flow-id": graphModel.flowId, style: style, children: [_jsxs(CanvasOverlay, { graphModel: graphModel, dnd: dnd, children: [_jsx("g", { className: "lf-base", children: map(graphModel.sortElements, function (nodeModel) {
                                 return _this.getComponent(nodeModel, graphModel);
-                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), _jsxs(ModificationOverlay, { graphModel: graphModel, children: [_jsx(OutlineOverlay, { graphModel: graphModel }), adjustEdge ? _jsx(BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? (_jsx(SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), _jsx(ToolOverlay, { graphModel: graphModel, tool: tool, getCanvasOverlay: this.getCanvasOverlay }), background && _jsx(BackgroundOverlay, { background: background }), _jsx(Grid, { graphModel: graphModel })] }));
+                            }) }), fakeNode ? this.getComponent(fakeNode, graphModel) : ''] }), _jsxs(ModificationOverlay, { graphModel: graphModel, children: [_jsx(OutlineOverlay, { graphModel: graphModel }), adjustEdge ? _jsx(BezierAdjustOverlay, { graphModel: graphModel }) : '', options.snapline !== false ? (_jsx(SnaplineOverlay, { snaplineModel: snaplineModel })) : ('')] }), _jsx(ToolOverlay, { graphModel: graphModel, tool: tool }), background && _jsx(BackgroundOverlay, { background: background }), _jsx(Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         observer

package/es/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/es/view/overlay/ToolOverlay.js

@@ -19,31 +19,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));
-};
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { createElement as h, Component } from 'preact/compat';
 import { OutlineOverlay } from '.';
@@ -51,13 +26,7 @@ import { observer } from '../..';
 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, 所以不应该生效。
@@ -95,13 +64,7 @@ var ToolOverlay = /** @class */ (function (_super) {
     };
     ToolOverlay.prototype.render = function () {
         var graphModel = this.props.graphModel;
-        return (_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 (_jsx("div", { className: "lf-tool-overlay", id: "ToolOverlay_".concat(graphModel.flowId), children: this.getTools() }));
     };
     ToolOverlay = __decorate([
         observer

package/lib/LogicFlow.d.ts

@@ -263,6 +263,11 @@ export declare class LogicFlow {
      * @param toFront 是否将选中的元素置顶，默认为true
      */
     selectElementById(id: string, multiple?: boolean, toFront?: boolean): void;
+    /**
+     * 移除选中的元素
+     * @param id 元素ID
+     */
+    deselectElementById(id: string): void;
     /**
      * 获取选中的元素数据
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。

package/lib/LogicFlow.js

@@ -669,6 +669,13 @@ var LogicFlow = /** @class */ (function () {
             this.graphModel.toFront(id);
         }
     };
+    /**
+     * 移除选中的元素
+     * @param id 元素ID
+     */
+    LogicFlow.prototype.deselectElementById = function (id) {
+        this.graphModel.deselectElementById(id);
+    };
     /**
      * 获取选中的元素数据
      * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。

package/lib/model/GraphModel.d.ts

@@ -322,6 +322,7 @@ export declare class GraphModel {
      * @param multiple 是否允许多选，如果为true，不会将上一个选中的元素重置
      */
     selectElementById(id: string, multiple?: boolean): void;
+    deselectElementById(id: string): void;
     /**
      * 将所有选中的元素设置为非选中
      */

package/lib/model/GraphModel.js

@@ -1060,6 +1060,12 @@ var GraphModel = /** @class */ (function () {
         var selectElement = this.getElement(id);
         selectElement === null || selectElement === void 0 ? void 0 : selectElement.setSelected(true);
     };
+    GraphModel.prototype.deselectElementById = function (id) {
+        var element = this.getElement(id);
+        if (element) {
+            element.setSelected(false);
+        }
+    };
     /**
      * 将所有选中的元素设置为非选中
      */
@@ -1596,6 +1602,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "selectElementById", null);
+    __decorate([
+        mobx_1.action
+    ], GraphModel.prototype, "deselectElementById", null);
     __decorate([
         mobx_1.action
     ], GraphModel.prototype, "clearSelectElements", null);

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/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/package.json

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

package/src/LogicFlow.tsx

@@ -733,6 +733,14 @@ export class LogicFlow {
     }
   }
 
+  /**
+   * 移除选中的元素
+   * @param id 元素ID
+   */
+  deselectElementById(id: string) {
+    this.graphModel.deselectElementById(id)
+  }
+
   /**
    * 获取选中的元素数据
    * @param isIgnoreCheck 是否包括sourceNode和targetNode没有被选中的边,默认包括。
@@ -1817,7 +1825,7 @@ export namespace LogicFlow {
      * 基础图形线相关主题
      */
     line: EdgeTheme // 直线样式
-    polyline: EdgePolylineTheme // 折现样式
+    polyline: EdgePolylineTheme // 折线样式
     bezier: EdgeBezierTheme // 贝塞尔曲线样式
     anchorLine: AnchorLineTheme // 从锚点拉出的边的样式
 

package/src/model/GraphModel.ts

@@ -1197,6 +1197,14 @@ export class GraphModel {
     selectElement?.setSelected(true)
   }
 
+  @action
+  deselectElementById(id: string) {
+    const element = this.getElement(id)
+    if (element) {
+      element.setSelected(false)
+    }
+  }
+
   /**
    * 将所有选中的元素设置为非选中
    */

package/src/view/Graph.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentType, createRef } from 'preact/compat'
+import { Component, ComponentType } from 'preact/compat'
 import { map, throttle } from 'lodash-es'
 import {
   CanvasOverlay,
@@ -38,10 +38,6 @@ type ContainerStyle = {
 
 @observer
 class Graph extends Component<IGraphProps> {
-  canvasOverlayRef = createRef<CanvasOverlay>()
-  getCanvasOverlay = () => {
-    return this.canvasOverlayRef.current
-  }
   private handleResize = () => {
     const { graphModel, options } = this.props
     const { width, height, isContainerWidth, isContainerHeight } = graphModel
@@ -113,11 +109,7 @@ class Graph extends Component<IGraphProps> {
     return (
       <div className="lf-graph" flow-id={graphModel.flowId} style={style}>
         {/* 元素层 */}
-        <CanvasOverlay
-          ref={this.canvasOverlayRef}
-          graphModel={graphModel}
-          dnd={dnd}
-        >
+        <CanvasOverlay graphModel={graphModel} dnd={dnd}>
           <g className="lf-base">
             {map(graphModel.sortElements, (nodeModel) =>
               this.getComponent(nodeModel, graphModel),
@@ -136,11 +128,7 @@ class Graph extends Component<IGraphProps> {
           )}
         </ModificationOverlay>
         {/* 工具层：插件 */}
-        <ToolOverlay
-          graphModel={graphModel}
-          tool={tool}
-          getCanvasOverlay={this.getCanvasOverlay}
-        />
+        <ToolOverlay graphModel={graphModel} tool={tool} />
         {/* 画布背景 */}
         {background && <BackgroundOverlay background={background} />}
         {/* 画布网格 */}

package/src/view/overlay/ToolOverlay.tsx

@@ -1,5 +1,5 @@
 import { createElement as h, Component } from 'preact/compat'
-import { CanvasOverlay, OutlineOverlay } from '.'
+import { OutlineOverlay } from '.'
 import { observer } from '../..'
 import LogicFlow from '../../LogicFlow'
 import { GraphModel } from '../../model'
@@ -8,7 +8,6 @@ import { Tool } from '../../tool'
 type IProps = {
   graphModel: GraphModel
   tool: Tool
-  getCanvasOverlay: () => CanvasOverlay | null
 }
 
 @observer
@@ -53,24 +52,10 @@ export class ToolOverlay extends Component<IProps> {
     lf.components = [] // 保证extension组件的render只执行一次
   }
 
-  zoomHandler = (e: WheelEvent) => {
-    // TODO 是否应该使用 dispatchEvent 来触发事件
-    this.props.getCanvasOverlay()?.zoomHandler(e)
-  }
-
   render() {
     const { graphModel } = this.props
     return (
-      <div
-        className="lf-tool-overlay"
-        id={`ToolOverlay_${graphModel.flowId}`}
-        /*
-         * 默认情况下该容器设置了 pointer-events: none，不会触发这些事件
-         * 只会在容器取消 pointer-events: none 后触发，用于缩放、滚动画布等操作
-         * 目前只在 selection-select 插件中使用。为了能在元素内部进行框选，在开启选区后会关闭事件透传。需要手动触发事件
-         */
-        onWheel={this.zoomHandler}
-      >
+      <div className="lf-tool-overlay" id={`ToolOverlay_${graphModel.flowId}`}>
         {this.getTools()}
       </div>
     )