@logicflow/core 2.0.11 → 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/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.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);
+        }
+    };
     /**
      * 将所有选中的元素设置为非选中
      */
@@ -1464,6 +1470,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);
@@ -1587,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/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/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/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.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);
+        }
+    };
     /**
      * 将所有选中的元素设置为非选中
      */
@@ -1470,6 +1476,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);
@@ -1593,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/core",
-  "version": "2.0.11",
+  "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/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
   // 事件中心
@@ -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/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)