@logicflow/core 2.0.11 → 2.0.12

package/es/constant/index.d.ts

@@ -64,6 +64,8 @@ export declare enum EventType {
     EDGE_CONTEXTMENU = "edge:contextmenu",
     EDGE_ADJUST = "edge:adjust",
     EDGE_EXCHANGE_NODE = "edge:exchange-node",
+    ANCHOR_CLICK = "anchor:click",
+    ANCHOR_MOUSEDOWN = "anchor:mousedown",
     ANCHOR_DRAGSTART = "anchor:dragstart",
     ANCHOR_DRAG = "anchor:drag",
     ANCHOR_DROP = "anchor:drop",

package/es/constant/index.js

@@ -72,6 +72,8 @@ export var EventType;
     EventType["EDGE_ADJUST"] = "edge:adjust";
     EventType["EDGE_EXCHANGE_NODE"] = "edge:exchange-node";
     // Anchor events
+    EventType["ANCHOR_CLICK"] = "anchor:click";
+    EventType["ANCHOR_MOUSEDOWN"] = "anchor:mousedown";
     EventType["ANCHOR_DRAGSTART"] = "anchor:dragstart";
     EventType["ANCHOR_DRAG"] = "anchor:drag";
     EventType["ANCHOR_DROP"] = "anchor:drop";

package/es/event/eventArgs.d.ts

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

package/es/model/GraphModel.js

@@ -1464,6 +1464,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         observable
     ], GraphModel.prototype, "height", void 0);
+    __decorate([
+        observable
+    ], GraphModel.prototype, "theme", void 0);
     __decorate([
         observable
     ], GraphModel.prototype, "grid", void 0);

package/es/model/edge/BezierEdgeModel.js

@@ -208,6 +208,9 @@ var BezierEdgeModel = /** @class */ (function (_super) {
         this.pointsList = [startPoint, sNext, ePre, endPoint];
         this.initPoints();
     };
+    __decorate([
+        observable
+    ], BezierEdgeModel.prototype, "offset", void 0);
     __decorate([
         observable
     ], BezierEdgeModel.prototype, "path", void 0);

package/es/model/edge/PolylineEdgeModel.js

@@ -553,6 +553,9 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
         }, sourceNode, targetNode, this.offset || 0);
         this.initPoints();
     };
+    __decorate([
+        observable
+    ], PolylineEdgeModel.prototype, "offset", void 0);
     __decorate([
         observable
     ], PolylineEdgeModel.prototype, "dbClickPosition", void 0);

package/es/view/Anchor.js

@@ -294,10 +294,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" 作为下载时，需要将锚点删除的依据，不要修改类名
-        _jsxs("g", { className: "lf-anchor", children: [_jsx("g", { onMouseDown: function (ev) {
+        _jsxs("g", { className: "lf-anchor", children: [_jsx("g", { onClick: function (ev) {
+                        ev.stopPropagation();
+                        graphModel.eventCenter.emit(EventType.ANCHOR_CLICK, {
+                            data: anchorData,
+                            e: ev,
+                            nodeModel: nodeModel,
+                        });
+                    }, onMouseDown: function (ev) {
+                        graphModel.eventCenter.emit(EventType.ANCHOR_MOUSEDOWN, {
+                            data: anchorData,
+                            e: ev,
+                            nodeModel: nodeModel,
+                        });
                         if (edgeAddable !== false) {
                             _this.dragHandler.handleMouseDown(ev);
                         }

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

@@ -280,6 +280,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;
@@ -309,6 +312,7 @@ var ResizeControl = /** @class */ (function (_super) {
         _this.graphModel = graphModel;
         // 初始化拖拽工具
         _this.dragHandler = new StepDrag({
+            onDragStart: _this.onDragStart,
             onDragging: _this.onDragging,
             onDragEnd: _this.onDragEnd,
             step: graphModel.gridSize,

package/es/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/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 } from 'preact/compat';
+import { Component, createRef } from 'preact/compat';
 import { map, throttle } from 'lodash-es';
 import { CanvasOverlay, ToolOverlay, BackgroundOverlay, Grid, SnaplineOverlay, OutlineOverlay, BezierAdjustOverlay, ModificationOverlay, } from './overlay';
 import { observer } from '..';
@@ -54,6 +54,10 @@ 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;
@@ -110,9 +114,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, { 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, { ref: this.canvasOverlayRef, 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 }), 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, getCanvasOverlay: this.getCanvasOverlay }), background && _jsx(BackgroundOverlay, { background: background }), _jsx(Grid, { graphModel: graphModel })] }));
     };
     Graph = __decorate([
         observer

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

@@ -19,6 +19,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));
+};
 import { jsx as _jsx } from "preact/jsx-runtime";
 import { createElement as h, Component } from 'preact/compat';
 import { OutlineOverlay } from '.';
@@ -26,7 +51,13 @@ import { observer } from '../..';
 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, 所以不应该生效。
@@ -64,7 +95,13 @@ 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), children: this.getTools() }));
+        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() }));
     };
     ToolOverlay = __decorate([
         observer

package/lib/constant/index.d.ts

@@ -64,6 +64,8 @@ export declare enum EventType {
     EDGE_CONTEXTMENU = "edge:contextmenu",
     EDGE_ADJUST = "edge:adjust",
     EDGE_EXCHANGE_NODE = "edge:exchange-node",
+    ANCHOR_CLICK = "anchor:click",
+    ANCHOR_MOUSEDOWN = "anchor:mousedown",
     ANCHOR_DRAGSTART = "anchor:dragstart",
     ANCHOR_DRAG = "anchor:drag",
     ANCHOR_DROP = "anchor:drop",

package/lib/constant/index.js

@@ -75,6 +75,8 @@ var EventType;
     EventType["EDGE_ADJUST"] = "edge:adjust";
     EventType["EDGE_EXCHANGE_NODE"] = "edge:exchange-node";
     // Anchor events
+    EventType["ANCHOR_CLICK"] = "anchor:click";
+    EventType["ANCHOR_MOUSEDOWN"] = "anchor:mousedown";
     EventType["ANCHOR_DRAGSTART"] = "anchor:dragstart";
     EventType["ANCHOR_DRAG"] = "anchor:drag";
     EventType["ANCHOR_DROP"] = "anchor:drop";

package/lib/event/eventArgs.d.ts

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

package/lib/model/GraphModel.js

@@ -1470,6 +1470,9 @@ var GraphModel = /** @class */ (function () {
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "height", void 0);
+    __decorate([
+        mobx_1.observable
+    ], GraphModel.prototype, "theme", void 0);
     __decorate([
         mobx_1.observable
     ], GraphModel.prototype, "grid", void 0);

package/lib/model/edge/BezierEdgeModel.js

@@ -214,6 +214,9 @@ var BezierEdgeModel = /** @class */ (function (_super) {
         this.pointsList = [startPoint, sNext, ePre, endPoint];
         this.initPoints();
     };
+    __decorate([
+        mobx_1.observable
+    ], BezierEdgeModel.prototype, "offset", void 0);
     __decorate([
         mobx_1.observable
     ], BezierEdgeModel.prototype, "path", void 0);

package/lib/model/edge/PolylineEdgeModel.js

@@ -556,6 +556,9 @@ var PolylineEdgeModel = /** @class */ (function (_super) {
         }, sourceNode, targetNode, this.offset || 0);
         this.initPoints();
     };
+    __decorate([
+        mobx_1.observable
+    ], PolylineEdgeModel.prototype, "offset", void 0);
     __decorate([
         mobx_1.observable
     ], PolylineEdgeModel.prototype, "dbClickPosition", void 0);

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/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.11",
+  "version": "2.0.12",
   "description": "LogicFlow, help you quickly create flowcharts",
   "main": "lib/index.js",
   "module": "es/index.js",

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

@@ -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)

package/src/model/edge/PolylineEdgeModel.ts

@@ -30,7 +30,7 @@ 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 {

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)