@logicflow/core 2.0.10 → 2.0.12

package/lib/util/node.js

@@ -10,12 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formatAnchorConnectValidateData = exports.getSvgTextWidthHeight = exports.getHtmlTextHeight = exports.getNodeAnchorPosition = exports.pickNodeConfig = exports.getCrossPointWithPolygon = exports.getCrossPointWithEllipse = exports.inStraightLineOfRect = exports.pointEdgeDirection = exports.getCrossPointWithCircle = exports.getClosestRadiusCenter = exports.getRectRadiusCircle = exports.getNodeBBox = exports.isInNodeBbox = exports.isInNode = exports.distance = exports.getClosestAnchor = exports.targetNodeInfo = exports.getAnchors = void 0;
 var lodash_es_1 = require("lodash-es");
 var edge_1 = require("./edge");
 var constant_1 = require("../constant");
 var edge_2 = require("../algorithm/edge");
+var matrix_1 = require("./matrix");
 /* 获取所有锚点 */
 var getAnchors = function (data) {
     var anchors = data.anchors;
@@ -79,30 +96,29 @@ exports.getClosestAnchor = getClosestAnchor;
 var distance = function (x1, y1, x2, y2) { return Math.hypot(x1 - x2, y1 - y2); };
 exports.distance = distance;
 /* 是否在某个节点内，手否进行连接，有offset控制粒度，与outline有关，可以优化 */
-var isInNode = function (position, node) {
+var isInNode = function (position, node, offset) {
+    if (offset === void 0) { offset = 0; }
     var inNode = false;
-    var offset = 0;
     var bBox = (0, exports.getNodeBBox)(node);
-    if (position.x >= bBox.minX - offset &&
-        position.x <= bBox.maxX + offset &&
-        position.y >= bBox.minY - offset &&
-        position.y <= bBox.maxY + offset) {
+    var _a = __read(new matrix_1.Matrix([position.x, position.y, 1])
+        .translate(-node.x, -node.y)
+        .rotate(-node.rotate)
+        .translate(node.x, node.y)[0], 2), x = _a[0], y = _a[1];
+    var reverseRotatedPosition = {
+        x: x,
+        y: y,
+    };
+    if (reverseRotatedPosition.x >= bBox.minX - offset &&
+        reverseRotatedPosition.x <= bBox.maxX + offset &&
+        reverseRotatedPosition.y >= bBox.minY - offset &&
+        reverseRotatedPosition.y <= bBox.maxY + offset) {
         inNode = true;
     }
     return inNode;
 };
 exports.isInNode = isInNode;
 var isInNodeBbox = function (position, node) {
-    var inNode = false;
-    var offset = 5;
-    var bBox = (0, exports.getNodeBBox)(node);
-    if (position.x >= bBox.minX - offset &&
-        position.x <= bBox.maxX + offset &&
-        position.y >= bBox.minY - offset &&
-        position.y <= bBox.maxY + offset) {
-        inNode = true;
-    }
-    return inNode;
+    return (0, exports.isInNode)(position, node, 5);
 };
 exports.isInNodeBbox = isInNodeBbox;
 /* 获取节点bbox */

package/lib/view/Anchor.js

@@ -296,10 +296,23 @@ var Anchor = /** @class */ (function (_super) {
     Anchor.prototype.render = function () {
         var _this = this;
         var _a = this.state, startX = _a.startX, startY = _a.startY, endX = _a.endX, endY = _a.endY;
-        var _b = this.props, edgeAddable = _b.anchorData.edgeAddable, edgeStyle = _b.edgeStyle;
+        var _b = this.props, anchorData = _b.anchorData, edgeStyle = _b.edgeStyle, nodeModel = _b.nodeModel, graphModel = _b.graphModel;
+        var edgeAddable = anchorData.edgeAddable;
         return (
         // className="lf-anchor" 作为下载时，需要将锚点删除的依据，不要修改类名
-        (0, jsx_runtime_1.jsxs)("g", { className: "lf-anchor", children: [(0, jsx_runtime_1.jsx)("g", { onMouseDown: function (ev) {
+        (0, jsx_runtime_1.jsxs)("g", { className: "lf-anchor", children: [(0, jsx_runtime_1.jsx)("g", { onClick: function (ev) {
+                        ev.stopPropagation();
+                        graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_CLICK, {
+                            data: anchorData,
+                            e: ev,
+                            nodeModel: nodeModel,
+                        });
+                    }, onMouseDown: function (ev) {
+                        graphModel.eventCenter.emit(constant_1.EventType.ANCHOR_MOUSEDOWN, {
+                            data: anchorData,
+                            e: ev,
+                            nodeModel: nodeModel,
+                        });
                         if (edgeAddable !== false) {
                             _this.dragHandler.handleMouseDown(ev);
                         }

package/lib/view/Control.d.ts

@@ -43,6 +43,7 @@ export declare class ResizeControl extends Component<IResizeControlProps, IResiz
      */
     recalcResizeInfo: (index: ResizeControlIndex, resizeInfo: ResizeInfo, pct?: number, freezeWidth?: boolean, freezeHeight?: boolean) => ResizeInfo;
     resizeNode: ({ deltaX, deltaY }: VectorData) => void;
+    onDragStart: () => void;
     onDragging: ({ deltaX, deltaY }: IDragParams) => void;
     onDragEnd: () => void;
     render(): h.JSX.Element;

package/lib/view/Control.js

@@ -283,6 +283,9 @@ var ResizeControl = /** @class */ (function (_super) {
             // // 触发 resize 事件
             // this.triggerResizeEvent(preNodeData, curNodeData, deltaX, deltaY, this.index, this.nodeModel)
         };
+        _this.onDragStart = function () {
+            _this.graphModel.selectNodeById(_this.nodeModel.id);
+        };
         _this.onDragging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
             var transformModel = _this.graphModel.transformModel;
@@ -312,6 +315,7 @@ var ResizeControl = /** @class */ (function (_super) {
         _this.graphModel = graphModel;
         // 初始化拖拽工具
         _this.dragHandler = new util_1.StepDrag({
+            onDragStart: _this.onDragStart,
             onDragging: _this.onDragging,
             onDragEnd: _this.onDragEnd,
             step: graphModel.gridSize,

package/lib/view/Graph.d.ts

@@ -1,4 +1,5 @@
 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';
@@ -12,6 +13,8 @@ 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,6 +56,10 @@ 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;
@@ -112,9 +116,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, { 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, { 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 _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 }), 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, getCanvasOverlay: this.getCanvasOverlay }), 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/node/BaseNode.js

@@ -139,10 +139,6 @@ var BaseNode = /** @class */ (function (_super) {
             if (_this.t) {
                 (0, util_1.cancelRaf)(_this.t);
             }
-            model.transform = new util_1.TranslateMatrix(-x, -y)
-                .rotate(model.rotate)
-                .translate(x, y)
-                .toString();
             var moveNodes = selectNodes.map(function (node) { return node.id; });
             // 未被选中的节点也可以拖动
             if (moveNodes.indexOf(model.id) === -1) {

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

@@ -1,10 +1,11 @@
 import { createElement as h, Component } from 'preact/compat';
-import { OutlineOverlay } from '.';
+import { CanvasOverlay, 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;
@@ -14,6 +15,7 @@ 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,6 +20,31 @@ 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");
@@ -29,7 +54,13 @@ var __1 = require("../..");
 var ToolOverlay = /** @class */ (function (_super) {
     __extends(ToolOverlay, _super);
     function ToolOverlay() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        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;
     }
     // 在react严格模式下，useEffect会执行两次，但是在LogicFlow内部，则只会触发一次componentDidMount和componentDidUpdate。
     // 其中第一次componentDidMount对应的graphModel为被丢弃的graphModel, 所以不应该生效。
@@ -67,7 +98,13 @@ 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), children: this.getTools() }));
+        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() }));
     };
     ToolOverlay = __decorate([
         __1.observer

package/package.json

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

package/src/LogicFlow.tsx

@@ -1391,6 +1391,12 @@ export class LogicFlow {
     this.graphModel.destroy()
     this.tool.destroy()
     this.history.destroy()
+    for (const extensionName in this.extension) {
+      const extensionInstance = this.extension[extensionName]
+      if ('destroy' in extensionInstance) {
+        extensionInstance.destroy?.()
+      }
+    }
   }
 }
 

package/src/constant/index.ts

@@ -79,6 +79,8 @@ export enum EventType {
   EDGE_EXCHANGE_NODE = 'edge:exchange-node',
 
   // Anchor events
+  ANCHOR_CLICK = 'anchor:click',
+  ANCHOR_MOUSEDOWN = 'anchor:mousedown',
   ANCHOR_DRAGSTART = 'anchor:dragstart',
   ANCHOR_DRAG = 'anchor:drag',
   ANCHOR_DROP = 'anchor:drop',

package/src/event/eventArgs.ts

@@ -469,6 +469,14 @@ type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =
  * 锚点事件
  */
 interface AnchorEventArgs {
+  /**
+   * anchor 锚点 click
+   */
+  'anchor:click': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>
+  /**
+   * anchor 锚点 mousedown
+   */
+  'anchor:mousedown': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>
   /**
    * 开始拖拽锚点
    */

package/src/model/GraphModel.ts

@@ -63,7 +63,7 @@ export class GraphModel {
   @observable height: number // 画布高度
 
   // 流程图主题配置
-  theme: LogicFlow.Theme
+  @observable theme: LogicFlow.Theme
   // 网格配置
   @observable grid: Grid.GridOptions
   // 事件中心

package/src/model/edge/BezierEdgeModel.ts

@@ -1,4 +1,4 @@
-import { assign, cloneDeep } from 'lodash-es'
+import { get, assign, cloneDeep } from 'lodash-es'
 import { action, observable } from 'mobx'
 import BaseEdgeModel from './BaseEdgeModel'
 import { BaseNodeModel } from '../node'
@@ -13,7 +13,7 @@ import EdgeConfig = LogicFlow.EdgeConfig
 export class BezierEdgeModel extends BaseEdgeModel {
   modelType = ModelType.BEZIER_EDGE
 
-  offset!: number
+  @observable offset!: number
   @observable path = ''
   constructor(data: EdgeConfig, graphModel: GraphModel) {
     super(data, graphModel)
@@ -21,7 +21,7 @@ export class BezierEdgeModel extends BaseEdgeModel {
     this.setAttributes()
   }
   initEdgeData(data: EdgeConfig): void {
-    this.offset = 100
+    this.offset = get(data, 'properties.offset', 100)
     super.initEdgeData(data)
   }
   getEdgeStyle() {

package/src/model/edge/PolylineEdgeModel.ts

@@ -1,4 +1,4 @@
-import { assign, cloneDeep } from 'lodash-es'
+import { get, assign, cloneDeep } from 'lodash-es'
 import { observable, action } from 'mobx'
 import { BaseEdgeModel } from '.'
 import { BaseNodeModel, RectNodeModel, CircleNodeModel, Model } from '..'
@@ -30,11 +30,11 @@ import AnchorConfig = Model.AnchorConfig
 export class PolylineEdgeModel extends BaseEdgeModel {
   modelType = ModelType.POLYLINE_EDGE
   draggingPointList: Point[] = []
-  offset?: number
+  @observable offset?: number
   @observable dbClickPosition?: Point
 
   initEdgeData(data: LogicFlow.EdgeConfig): void {
-    this.offset = 30
+    this.offset = get(data, 'properties.offset', 30)
     if (data.pointsList) {
       this.pointsList = data.pointsList
     }

package/src/model/node/BaseNodeModel.ts

@@ -740,6 +740,10 @@ export class BaseNodeModel<P extends PropertiesType = PropertiesType>
       this.text && this.moveText(0, deltaY)
       moveY = deltaY
     }
+    this.transform = new TranslateMatrix(-this.x, -this.y)
+      .rotate(this.rotate)
+      .translate(this.x, this.y)
+      .toString()
     return [moveX, moveY]
   }
 

package/src/tool/index.ts

@@ -70,7 +70,7 @@ export class Tool {
       this.toolMap.delete(name)
       return true
     }
-    throw new Error('禁用失败，不存在名为 ${tool} 的工具')
+    throw new Error(`禁用失败，不存在名为 ${tool} 的工具`)
   }
 
   @action
@@ -81,7 +81,7 @@ export class Tool {
       this.disabledToolMap.delete(name)
       return true
     }
-    throw new Error('不存在名为 ${tool} 的工具')
+    throw new Error(`不存在名为 ${tool} 的工具`)
   }
 
   getTools() {

package/src/util/node.ts

@@ -13,6 +13,7 @@ import {
 } from '../model'
 import { SegmentDirection } from '../constant'
 import { isInSegment } from '../algorithm/edge'
+import { Matrix } from './matrix'
 
 import Point = LogicFlow.Point
 import Direction = LogicFlow.Direction
@@ -112,33 +113,33 @@ export const distance = (
 ): number => Math.hypot(x1 - x2, y1 - y2)
 
 /* 是否在某个节点内，手否进行连接，有offset控制粒度，与outline有关，可以优化 */
-export const isInNode = (position: Point, node: BaseNodeModel): boolean => {
+export const isInNode = (
+  position: Point,
+  node: BaseNodeModel,
+  offset = 0,
+): boolean => {
   let inNode = false
-  const offset = 0
   const bBox = getNodeBBox(node)
+  const [x, y] = new Matrix([position.x, position.y, 1])
+    .translate(-node.x, -node.y)
+    .rotate(-node.rotate)
+    .translate(node.x, node.y)[0]
+  const reverseRotatedPosition = {
+    x,
+    y,
+  }
   if (
-    position.x >= bBox.minX - offset &&
-    position.x <= bBox.maxX + offset &&
-    position.y >= bBox.minY - offset &&
-    position.y <= bBox.maxY + offset
+    reverseRotatedPosition.x >= bBox.minX - offset &&
+    reverseRotatedPosition.x <= bBox.maxX + offset &&
+    reverseRotatedPosition.y >= bBox.minY - offset &&
+    reverseRotatedPosition.y <= bBox.maxY + offset
   ) {
     inNode = true
   }
   return inNode
 }
 export const isInNodeBbox = (position: Point, node: BaseNodeModel): boolean => {
-  let inNode = false
-  const offset = 5
-  const bBox = getNodeBBox(node)
-  if (
-    position.x >= bBox.minX - offset &&
-    position.x <= bBox.maxX + offset &&
-    position.y >= bBox.minY - offset &&
-    position.y <= bBox.maxY + offset
-  ) {
-    inNode = true
-  }
-  return inNode
+  return isInNode(position, node, 5)
 }
 
 export type NodeBBox = {

package/src/view/Anchor.tsx

@@ -361,15 +361,26 @@ class Anchor extends Component<IProps, IState> {
 
   render() {
     const { startX, startY, endX, endY } = this.state
-    const {
-      anchorData: { edgeAddable },
-      edgeStyle,
-    } = this.props
+    const { anchorData, edgeStyle, nodeModel, graphModel } = this.props
+    const { edgeAddable } = anchorData
     return (
       // className="lf-anchor" 作为下载时，需要将锚点删除的依据，不要修改类名
       <g className="lf-anchor">
         <g
+          onClick={(ev) => {
+            ev.stopPropagation()
+            graphModel.eventCenter.emit(EventType.ANCHOR_CLICK, {
+              data: anchorData,
+              e: ev!,
+              nodeModel,
+            })
+          }}
           onMouseDown={(ev) => {
+            graphModel.eventCenter.emit(EventType.ANCHOR_MOUSEDOWN, {
+              data: anchorData,
+              e: ev!,
+              nodeModel,
+            })
             if (edgeAddable !== false) {
               this.dragHandler.handleMouseDown(ev)
             }

package/src/view/Control.tsx

@@ -50,6 +50,7 @@ export class ResizeControl extends Component<
 
     // 初始化拖拽工具
     this.dragHandler = new StepDrag({
+      onDragStart: this.onDragStart,
       onDragging: this.onDragging,
       onDragEnd: this.onDragEnd,
       step: graphModel.gridSize,
@@ -317,6 +318,10 @@ export class ResizeControl extends Component<
     // this.triggerResizeEvent(preNodeData, curNodeData, deltaX, deltaY, this.index, this.nodeModel)
   }
 
+  onDragStart = () => {
+    this.graphModel.selectNodeById(this.nodeModel.id)
+  }
+
   onDragging = ({ deltaX, deltaY }: IDragParams) => {
     const { transformModel } = this.graphModel
     const [dx, dy] = transformModel.fixDeltaXY(deltaX, deltaY)

package/src/view/Graph.tsx

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

package/src/view/node/BaseNode.tsx

@@ -13,7 +13,6 @@ import {
   isMultipleSelect,
   cancelRaf,
   createRaf,
-  TranslateMatrix,
   IDragParams,
   // RotateMatrix,
 } from '../../util'
@@ -297,11 +296,6 @@ export abstract class BaseNode<P extends IProps = IProps> extends Component<
       cancelRaf(this.t)
     }
 
-    model.transform = new TranslateMatrix(-x, -y)
-      .rotate(model.rotate)
-      .translate(x, y)
-      .toString()
-
     let moveNodes = selectNodes.map((node) => node.id)
     // 未被选中的节点也可以拖动
     if (moveNodes.indexOf(model.id) === -1) {

package/src/view/overlay/ToolOverlay.tsx

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