@logicflow/extension 1.1.7-alpha.0 → 1.1.8-alpha.0

package/es/NodeResize/Control/Control.js

@@ -26,7 +26,7 @@ import { h, Component } from 'preact';
 import { LogicFlowUtil } from '@logicflow/core';
 import Rect from '../BasicShape/Rect';
 import { getDiamondReizeEdgePoint, getEllipseReizeEdgePoint, getRectReizeEdgePoint, ModelType } from './Util';
-var createDrag = LogicFlowUtil.createDrag;
+var StepDrag = LogicFlowUtil.StepDrag;
 var Control = /** @class */ (function (_super) {
     __extends(Control, _super);
     function Control(props) {
@@ -85,6 +85,8 @@ var Control = /** @class */ (function (_super) {
                 || size.width > maxWidth
                 || size.height < minHeight
                 || size.height > maxHeight) {
+                // 为了避免放到和缩小位置和鼠标不一致的问题
+                _this.dragHandler.cancelDrag();
                 return;
             }
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
@@ -152,15 +154,16 @@ var Control = /** @class */ (function (_super) {
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
                 || size.height > (maxHeight / 2)) {
+                _this.dragHandler.cancelDrag();
                 return;
             }
             // 更新中心点位置，更新文案位置
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = size.width;
+            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
             // @ts-ignore
-            _this.nodeModel.ry = size.height;
+            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -215,15 +218,16 @@ var Control = /** @class */ (function (_super) {
                 || size.width > (maxWidth / 2)
                 || size.height < (minHeight / 2)
                 || size.height > (maxHeight / 2)) {
+                _this.dragHandler.cancelDrag();
                 return;
             }
             // 更新中心点位置，更新文案位置
             _this.updatePosition({ deltaX: deltaX, deltaY: deltaY });
             // 更新rx ry,宽高为计算属性自动更新
             // @ts-ignore
-            _this.nodeModel.rx = size.width;
+            _this.nodeModel.rx = _this.nodeModel.rx + deltaX / 2;
             // @ts-ignore
-            _this.nodeModel.ry = size.height;
+            _this.nodeModel.ry = _this.nodeModel.ry + deltaY / 2;
             _this.nodeModel.setProperties({
                 nodeSize: {
                     rx: size.width,
@@ -289,8 +293,11 @@ var Control = /** @class */ (function (_super) {
         if (gridSize > 1) {
             step = 2 * gridSize;
         }
+        if (_this.nodeModel.gridSize) {
+            step = 2 * _this.nodeModel.gridSize;
+        }
         _this.state = {};
-        _this.dragHandler = createDrag({
+        _this.dragHandler = new StepDrag({
             onDraging: _this.onDraging,
             step: step,
         });
@@ -316,7 +323,7 @@ var Control = /** @class */ (function (_super) {
         var _a = this.props, x = _a.x, y = _a.y, index = _a.index, model = _a.model;
         var style = model.getControlPointStyle();
         return (h("g", { className: "lf-resize-control-" + index },
-            h(Rect, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler }))));
+            h(Rect, __assign({ className: "lf-node-control" }, { x: x, y: y }, style, { onMouseDown: this.dragHandler.handleMouseDown }))));
     };
     return Control;
 }(Component));

package/es/NodeResize/Node/DiamondResize.d.ts

@@ -1,9 +1,7 @@
 import { h, DiamondNode, DiamondNodeModel } from '@logicflow/core';
 declare class DiamondResizeModel extends DiamondNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
+    constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;
@@ -16,7 +14,6 @@ declare class DiamondResizeModel extends DiamondNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
 }
 declare class DiamondResizeView extends DiamondNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/DiamondResize.js

@@ -27,14 +27,23 @@ import ControlGroup from '../Control/ControlGroup';
 import Polygon from '../BasicShape/Polygon';
 var DiamondResizeModel = /** @class */ (function (_super) {
     __extends(DiamondResizeModel, _super);
-    function DiamondResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
+    function DiamondResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.rx = nodeSize.rx;
+            _this.ry = nodeSize.ry;
+        }
         return _this;
     }
+    DiamondResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+        this.gridSize = 1;
+    };
     DiamondResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';
@@ -58,14 +67,6 @@ var DiamondResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    DiamondResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.rx = nodeSize.rx;
-            this.ry = nodeSize.ry;
-        }
-    };
     return DiamondResizeModel;
 }(DiamondNodeModel));
 var DiamondResizeView = /** @class */ (function (_super) {

package/es/NodeResize/Node/EllipseResize.d.ts

@@ -1,10 +1,7 @@
 import { h, EllipseNode, EllipseNodeModel } from '@logicflow/core';
 declare class EllipseResizeModel extends EllipseNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
     constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;
@@ -17,7 +14,6 @@ declare class EllipseResizeModel extends EllipseNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
 }
 declare class EllipseResizeView extends EllipseNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/EllipseResize.js

@@ -17,14 +17,20 @@ var EllipseResizeModel = /** @class */ (function (_super) {
     __extends(EllipseResizeModel, _super);
     function EllipseResizeModel(data, graphModel) {
         var _this = _super.call(this, data, graphModel) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
-        _this.rx = 50;
-        _this.ry = 50;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.rx = nodeSize.rx;
+            _this.ry = nodeSize.ry;
+        }
         return _this;
     }
+    EllipseResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     EllipseResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';
@@ -48,14 +54,6 @@ var EllipseResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    EllipseResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.rx = nodeSize.rx;
-            this.ry = nodeSize.ry;
-        }
-    };
     return EllipseResizeModel;
 }(EllipseNodeModel));
 var EllipseResizeView = /** @class */ (function (_super) {

package/es/NodeResize/Node/HtmlResize.d.ts

@@ -1,9 +1,7 @@
 import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
 declare class HtmlResizeModel extends HtmlNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
+    constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         stroke: string;
@@ -16,7 +14,6 @@ declare class HtmlResizeModel extends HtmlNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
 }
 declare class HtmlResizeView extends HtmlNode {
     getControlGroup(): h.JSX.Element;

package/es/NodeResize/Node/HtmlResize.js

@@ -15,14 +15,22 @@ import { h, HtmlNode, HtmlNodeModel } from '@logicflow/core';
 import ControlGroup from '../Control/ControlGroup';
 var HtmlResizeModel = /** @class */ (function (_super) {
     __extends(HtmlResizeModel, _super);
-    function HtmlResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
+    function HtmlResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.width = nodeSize.width;
+            _this.height = nodeSize.height;
+        }
         return _this;
     }
+    HtmlResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     HtmlResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';
@@ -46,14 +54,6 @@ var HtmlResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    HtmlResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.width = nodeSize.width;
-            this.height = nodeSize.height;
-        }
-    };
     return HtmlResizeModel;
 }(HtmlNodeModel));
 var HtmlResizeView = /** @class */ (function (_super) {

package/es/NodeResize/Node/RectResize.d.ts

@@ -1,9 +1,7 @@
 import { h, RectNode, RectNodeModel } from '@logicflow/core';
 declare class RectResizeModel extends RectNodeModel {
-    minWidth: number;
-    minHeight: number;
-    maxWidth: number;
-    maxHeight: number;
+    constructor(data: any, graphModel: any);
+    initNodeData(data: any): void;
     getOutlineStyle(): import("@logicflow/core/types/constant/DefaultTheme").OutlineTheme;
     getResizeOutlineStyle(): {
         fill: string;
@@ -17,7 +15,6 @@ declare class RectResizeModel extends RectNodeModel {
         fill: string;
         stroke: string;
     };
-    setAttributes(): void;
     resize(deltaX: any, deltaY: any): void;
 }
 declare class RectResizeView extends RectNode {

package/es/NodeResize/Node/RectResize.js

@@ -15,14 +15,22 @@ import { h, RectNode, RectNodeModel } from '@logicflow/core';
 import ControlGroup from '../Control/ControlGroup';
 var RectResizeModel = /** @class */ (function (_super) {
     __extends(RectResizeModel, _super);
-    function RectResizeModel() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.minWidth = 30;
-        _this.minHeight = 30;
-        _this.maxWidth = 2000;
-        _this.maxHeight = 2000;
+    function RectResizeModel(data, graphModel) {
+        var _this = _super.call(this, data, graphModel) || this;
+        var nodeSize = _this.properties.nodeSize;
+        if (nodeSize) {
+            _this.width = nodeSize.width;
+            _this.height = nodeSize.height;
+        }
         return _this;
     }
+    RectResizeModel.prototype.initNodeData = function (data) {
+        _super.prototype.initNodeData.call(this, data);
+        this.minWidth = 30;
+        this.minHeight = 30;
+        this.maxWidth = 2000;
+        this.maxHeight = 2000;
+    };
     RectResizeModel.prototype.getOutlineStyle = function () {
         var style = _super.prototype.getOutlineStyle.call(this);
         style.stroke = 'none';
@@ -34,7 +42,7 @@ var RectResizeModel = /** @class */ (function (_super) {
     RectResizeModel.prototype.getResizeOutlineStyle = function () {
         return {
             fill: 'none',
-            stroke: '#000000',
+            stroke: 'transparent',
             strokeWidth: 1,
             strokeDasharray: '3,3',
         };
@@ -47,14 +55,6 @@ var RectResizeModel = /** @class */ (function (_super) {
             stroke: '#000000',
         };
     };
-    RectResizeModel.prototype.setAttributes = function () {
-        // @ts-ignore
-        var nodeSize = this.properties.nodeSize;
-        if (nodeSize) {
-            this.width = nodeSize.width;
-            this.height = nodeSize.height;
-        }
-    };
     RectResizeModel.prototype.resize = function (deltaX, deltaY) {
         console.log(deltaX, deltaY);
     };

package/es/insert-node-in-polyline/index.d.ts

@@ -1,11 +1,14 @@
-declare const InsertNodeInPolyline: {
-    pluginName: string;
-    _lf: any;
+import LogicFlow from '@logicflow/core';
+declare class InsertNodeInPolyline {
+    static pluginName: string;
+    _lf: LogicFlow;
     dndAdd: boolean;
     dropAdd: boolean;
-    install(lf: any): void;
+    constructor({ lf }: {
+        lf: any;
+    });
     eventHandler(): void;
     insetNode(nodeData: any): void;
-};
+}
 export { InsertNodeInPolyline };
 export default InsertNodeInPolyline;

package/es/insert-node-in-polyline/index.js

@@ -19,26 +19,25 @@ var __spread = (this && this.__spread) || function () {
     return ar;
 };
 import { isNodeInSegement } from './edge';
-var InsertNodeInPolyline = {
-    pluginName: 'insertNodeInPolyline',
-    _lf: null,
-    dndAdd: true,
-    dropAdd: true,
-    install: function (lf) {
-        InsertNodeInPolyline._lf = lf;
+var InsertNodeInPolyline = /** @class */ (function () {
+    function InsertNodeInPolyline(_a) {
+        var lf = _a.lf;
+        this._lf = lf;
+        this.dndAdd = true;
+        this.dropAdd = true;
         this.eventHandler();
-    },
-    eventHandler: function () {
+    }
+    InsertNodeInPolyline.prototype.eventHandler = function () {
         var _this = this;
         // 监听事件
-        if (InsertNodeInPolyline.dndAdd) {
-            InsertNodeInPolyline._lf.on('node:dnd-add', function (_a) {
+        if (this.dndAdd) {
+            this._lf.on('node:dnd-add', function (_a) {
                 var data = _a.data;
-                InsertNodeInPolyline.insetNode(data);
+                _this.insetNode(data);
             });
         }
-        if (InsertNodeInPolyline.dropAdd) {
-            InsertNodeInPolyline._lf.on('node:drop', function (_a) {
+        if (this.dropAdd) {
+            this._lf.on('node:drop', function (_a) {
                 var data = _a.data;
                 var edges = _this._lf.graphModel.edges;
                 var id = data.id;
@@ -50,12 +49,12 @@ var InsertNodeInPolyline = {
                     }
                 }
                 if (pureNode) {
-                    InsertNodeInPolyline.insetNode(data);
+                    _this.insetNode(data);
                 }
             });
         }
-    },
-    insetNode: function (nodeData) {
+    };
+    InsertNodeInPolyline.prototype.insetNode = function (nodeData) {
         var edges = this._lf.graphModel.edges;
         var nodeModel = this._lf.getNodeModelById(nodeData.id);
         for (var i = 0; i < edges.length; i++) {
@@ -79,7 +78,9 @@ var InsertNodeInPolyline = {
                 break;
             }
         }
-    },
-};
+    };
+    InsertNodeInPolyline.pluginName = 'insertNodeInPolyline';
+    return InsertNodeInPolyline;
+}());
 export { InsertNodeInPolyline };
 export default InsertNodeInPolyline;

package/es/materials/group/GroupNode.d.ts

@@ -2,12 +2,33 @@ import { h } from '@logicflow/core';
 import { RectResize } from '../../NodeResize';
 declare class GroupNodeModel extends RectResize.model {
     readonly isGroup = true;
+    /**
+     * 此分组的子节点Id
+     */
     children: Set<string>;
+    /**
+     * 其子节点是否被禁止通过拖拽移出分组。 默认false，允许拖拽移除分组。
+     */
     isRestrict: boolean;
+    /**
+     * 分组节点是否允许调整大小。
+     */
     resizable: boolean;
+    /**
+     * 分组节点是否允许折叠
+     */
     foldable: boolean;
+    /**
+     * 折叠后的宽度
+     */
     foldedWidth: number;
+    /**
+     * 折叠后的高度
+     */
     foldedHeight: number;
+    /**
+     * 分组折叠状态
+     */
     isFolded: boolean;
     unfoldedWidth: number;
     unfoldedHight: number;
@@ -18,14 +39,31 @@ declare class GroupNodeModel extends RectResize.model {
         strokeWidth: number;
         strokeDasharray: string;
     };
+    /**
+     * 折叠分组
+     * 1. 折叠分组的宽高
+     * 2. 处理分组子节点
+     * 3. 处理连线
+     */
     foldGroup(isFolded: any): void;
+    getAnchorStyle(anchorInfo: any): Record<string, any>;
     /**
-     * 折叠分组的时候，处理分组内部子节点上的连线
-     * 1. 为了保证校验规则不被打乱，所以只隐藏子节点上面的连线。
-     * 2. 重新创建一个属性一样的边。
-     * 3. 这个边拥有virtual=true的属性，表示不支持直接修改此边内容。
+     * 折叠分组的时候，处理分组自身的连线和分组内部子节点上的连线
+     * 边的分类：
+     *   - 虚拟边：分组被收起时，表示分组本身与外部节点关系的边。
+     *   - 真实边：分组本身或者分组内部节点与外部节点节点（非收起分组）关系的边。
+     * 如果一个分组，本身与外部节点有M条连线，且内部N个子节点与外部节点有连线，那么这个分组收起时会生成M+N条连线。
+     * 折叠分组时：
+     *   - 原有的虚拟边删除；
+     *   - 创建一个虚拟边；
+     *   - 真实边则隐藏；
+     * 展开分组是：
+     *   - 原有的虚拟边删除；
+     *   - 如果目外部点是收起的分组，则创建虚拟边；
+     *   - 如果外部节点是普通节点，则显示真实边；
      */
     private foldEdge;
+    createVirtualEdge(edgeData: any): void;
     isInRange({ x1, y1, x2, y2 }: {
         x1: any;
         y1: any;
@@ -50,6 +88,7 @@ declare class GroupNodeModel extends RectResize.model {
         fill: string;
     };
     getData(): import("@logicflow/core").NodeData;
+    getHistoryData(): import("@logicflow/core").NodeData;
 }
 declare class GroupNode extends RectResize.view {
     getControlGroup(): h.JSX.Element;