@logicflow/extension 2.0.11 → 2.0.13

package/lib/tools/label/Label.js

@@ -79,26 +79,31 @@ var Label = /** @class */ (function (_super) {
             var _a;
             var _b = _this.props, label = _b.label, graphModel = _b.graphModel;
             var nodeTextDraggable = graphModel.editConfigModel.nodeTextDraggable;
-            // 当 label 允许拖拽 且不处于拖拽状态时， StepDrag 开启拖拽
-            if (((_a = label.draggable) !== null && _a !== void 0 ? _a : nodeTextDraggable) && !_this.state.isDragging) {
-                _this.setState({ isDragging: true });
+            // 当 label 允许拖拽 且不处于拖拽状态、不处于编辑状态时， StepDrag 开启拖拽
+            if (((_a = label.draggable) !== null && _a !== void 0 ? _a : nodeTextDraggable) &&
+                !_this.state.isDragging &&
+                !_this.state.isEditing) {
                 _this.stepDrag.handleMouseDown(e);
             }
         };
+        _this.handleMouseUp = function (e) {
+            if (_this.state.isDragging) {
+                _this.stepDrag.handleMouseUp(e);
+            }
+        };
         _this.handleDragging = function (_a) {
             var deltaX = _a.deltaX, deltaY = _a.deltaY;
-            var _b = _this.props, label = _b.label, element = _b.element, graphModel = _b.graphModel;
+            if (!_this.state.isDragging) {
+                _this.setState({ isDragging: true });
+            }
+            var _b = _this.props, label = _b.label, graphModel = _b.graphModel;
             // DONE: 添加缩放时拖拽的逻辑，对 deltaX 和 deltaY 进行按比例缩放
             var transformModel = graphModel.transformModel;
             var _c = __read(transformModel.fixDeltaXY(deltaX, deltaY), 2), curDeltaX = _c[0], curDeltaY = _c[1];
-            // DONE：更新 label 位置，触发 LABEL:DRAG 事件，并抛出相关的数据
-            var _label = element.properties._label;
-            var elementLabel = _label;
-            var idx = (0, lodash_es_1.findIndex)(elementLabel, function (cur) { return cur.id === label.id; });
-            var target = elementLabel[idx];
-            elementLabel[idx] = __assign(__assign({}, target), { x: target.x + curDeltaX, y: target.y + curDeltaY });
-            var targetElem = graphModel.getElement(element.id);
-            targetElem === null || targetElem === void 0 ? void 0 : targetElem.setProperty('_label', elementLabel);
+            _this.setElementModelLabelInfo({
+                x: label.x + curDeltaX,
+                y: label.y + curDeltaY,
+            });
             graphModel.eventCenter.emit('label:drag', {
                 data: label.getData(),
                 model: label,
@@ -107,6 +112,20 @@ var Label = /** @class */ (function (_super) {
         _this.handleDragEnd = function () {
             _this.setState({ isDragging: false });
         };
+        _this.handleClick = function (e) {
+            var _a = _this.props, label = _a.label, element = _a.element, graphModel = _a.graphModel;
+            // 更新当前Label选中状态
+            element.setSelected(!_this.state.isSelected);
+            _this.setState({ isSelected: !_this.state.isSelected });
+            _this.setElementModelLabelInfo({
+                isSelected: true,
+            });
+            graphModel.eventCenter.emit('label:click', {
+                data: label.getData(),
+                e: e,
+                model: element,
+            });
+        };
         _this.handleDbClick = function (e) {
             var _a = _this.props, label = _a.label, element = _a.element, graphModel = _a.graphModel;
             graphModel.eventCenter.emit('label:dblclick', {
@@ -145,6 +164,7 @@ var Label = /** @class */ (function (_super) {
             _this.setState({
                 isDragging: false,
                 isHovered: false,
+                isSelected: false,
             });
         };
         // 重新计算 Label 大小
@@ -162,32 +182,56 @@ var Label = /** @class */ (function (_super) {
             isEditing: false,
             isHovered: false,
             isDragging: false,
+            isSelected: false,
         };
         return _this;
     }
+    Label.prototype.setElementModelLabelInfo = function (data) {
+        var _a = this.props, label = _a.label, element = _a.element, graphModel = _a.graphModel;
+        var _label = element.properties._label;
+        var elementLabel = _label;
+        var idx = (0, lodash_es_1.findIndex)(elementLabel, function (cur) { return cur.id === label.id; });
+        var target = elementLabel[idx];
+        elementLabel[idx] = __assign(__assign({}, target), data);
+        var targetElem = graphModel.getElement(element.id);
+        targetElem === null || targetElem === void 0 ? void 0 : targetElem.setProperty('_label', elementLabel);
+    };
     // TODO：如何处理 Label zIndex 的问题, Label 永远会比节点层级高
     // 当 Label 被元素遮盖时，隐藏它
     Label.prototype.componentDidMount = function () {
         var _this = this;
         var _a = this.props, label = _a.label, element = _a.element, graphModel = _a.graphModel;
         // 在点击元素、边或者画布 时，结束 Label 的编辑态
-        graphModel.eventCenter.on('blank:click,node:click,edge:click', function () {
-            var _a, _b, _c, _d;
-            // 如果当前 label 处于编辑态，则结束编辑态
-            if (_this.state.isEditing) {
+        graphModel.eventCenter.on('blank:click,node:click,edge:click,label:click', function (_a) {
+            var _b, _c, _d, _e;
+            var data = _a.data;
+            // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于选中态
+            // 则取消选中态
+            if ((data === null || data === void 0 ? void 0 : data.type) !== 'label' ||
+                (data.type === 'label' && data.id !== label.id) ||
+                _this.state.isSelected) {
+                _this.setState({ isSelected: false });
+            }
+            // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 处于编辑态
+            // 则结束编辑态
+            if (((data === null || data === void 0 ? void 0 : data.type) !== 'label' ||
+                (data.type == 'label' && data.id !== label.id)) &&
+                _this.state.isEditing) {
                 _this.setState({ isEditing: false });
-                var value = (_b = (_a = _this.textRef.current) === null || _a === void 0 ? void 0 : _a.innerText) !== null && _b !== void 0 ? _b : '';
-                var content = (_d = (_c = _this.textRef.current) === null || _c === void 0 ? void 0 : _c.innerHTML) !== null && _d !== void 0 ? _d : '';
-                var _label = element.properties._label;
-                var elementLabel = _label;
-                var idx = (0, lodash_es_1.findIndex)(elementLabel, function (cur) { return cur.id === label.id; });
-                var target = elementLabel[idx];
-                elementLabel[idx] = __assign(__assign({}, target), { value: value, content: content });
-                var targetElem = graphModel.getElement(element.id);
-                targetElem === null || targetElem === void 0 ? void 0 : targetElem.setProperty('_label', elementLabel);
+                var value = (_c = (_b = _this.textRef.current) === null || _b === void 0 ? void 0 : _b.innerText) !== null && _c !== void 0 ? _c : '';
+                var content = (_e = (_d = _this.textRef.current) === null || _d === void 0 ? void 0 : _d.innerHTML) !== null && _e !== void 0 ? _e : '';
+                _this.setElementModelLabelInfo({
+                    value: value,
+                    content: content,
+                    isSelected: false,
+                });
                 element.setElementState(core_1.ElementState.DEFAULT);
             }
-            if (_this.textRef.current) {
+            // 点击的不是label 、点击的不是当前label、点击的是当前label，且当前 label 的文本DOM存在
+            // 则结束文本DOM的编辑态
+            if (((data === null || data === void 0 ? void 0 : data.type) !== 'label' ||
+                (data.type == 'label' && data.id !== label.id)) &&
+                _this.textRef.current) {
                 _this.textRef.current.contentEditable = 'false';
             }
         });
@@ -200,7 +244,7 @@ var Label = /** @class */ (function (_super) {
     };
     Label.prototype.componentDidUpdate = function () {
         // snapshot: any, // previousState: Readonly<ILabelState>, // previousProps: Readonly<ILabelProps>,
-        console.log('Label componentDidUpdate');
+        // console.log('Label componentDidUpdate')
         // console.log('previousProps', previousProps)
         // console.log('previousState', previousState)
         // console.log('snapshot', snapshot)
@@ -214,7 +258,7 @@ var Label = /** @class */ (function (_super) {
     Label.prototype.render = function () {
         var _a;
         var _b = this.props, label = _b.label, element = _b.element, graphModel = _b.graphModel;
-        var _c = this.state, isDragging = _c.isDragging, isHovered = _c.isHovered, isEditing = _c.isEditing;
+        var _c = this.state, isDragging = _c.isDragging, isHovered = _c.isHovered, isSelected = _c.isSelected, isEditing = _c.isEditing;
         var transformModel = graphModel.transformModel;
         var transform = transformModel.getTransformStyle().transform;
         var id = label.id, x = label.x, y = label.y, zIndex = label.zIndex, vertical = label.vertical, style = label.style, rotate = label.rotate, content = label.content, labelWidth = label.labelWidth, textOverflowMode = label.textOverflowMode;
@@ -229,13 +273,13 @@ var Label = /** @class */ (function (_super) {
                 ? "".concat(transform, " rotate(").concat(rotate, "deg)")
                 : "".concat(transform, " rotate(").concat(vertical ? -0.25 : 0, "turn)"),
         };
-        return ((0, jsx_runtime_1.jsx)("div", { id: "element-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor-container'), style: containerStyle, onMouseDown: this.handleMouseDown, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: (0, jsx_runtime_1.jsx)("div", { ref: this.textRef, id: "editor-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor', (_a = {
+        return ((0, jsx_runtime_1.jsx)("div", { id: "element-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor-container'), style: containerStyle, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onClick: this.handleClick, onDblClick: this.handleDbClick, onBlur: this.handleBlur, onMouseEnter: this.setHoverOn, onMouseOver: this.setHoverOn, onMouseLeave: this.setHoverOff, children: (0, jsx_runtime_1.jsx)("div", { ref: this.textRef, id: "editor-container-".concat(id), className: (0, classnames_1.default)('lf-label-editor', (_a = {
                         'lf-label-editor-dragging': isDragging,
                         'lf-label-editor-editing': isEditing,
-                        'lf-label-editor-hover': !isEditing && isHovered
+                        'lf-label-editor-hover': !isEditing && (isHovered || isSelected)
                     },
                     _a["lf-label-editor-".concat(textOverflowMode)] = !isEditing,
-                    _a)), style: __assign({ maxWidth: "".concat(maxLabelWidth, "px"), width: "".concat(maxLabelWidth, "px") }, style), dangerouslySetInnerHTML: { __html: content } }) }));
+                    _a)), style: __assign({ maxWidth: "".concat(maxLabelWidth, "px"), boxSizing: 'border-box', display: 'inline-block', background: isEditing || element.BaseType === 'edge' ? '#fff' : 'transparent' }, style), dangerouslySetInnerHTML: { __html: content } }) }));
     };
     Label = __decorate([
         core_1.observer

package/lib/tools/label/LabelModel.js

@@ -35,6 +35,7 @@ var LabelModel = /** @class */ (function () {
             id: this.id,
             x: this.x,
             y: this.y,
+            type: 'label',
             content: this.content,
             value: this.value,
             rotate: this.rotate,

package/lib/tools/label/index.d.ts

@@ -49,6 +49,7 @@ export declare class Label implements Extension {
      * @param element
      */
     private rewriteInnerMethods;
+    private rewriteShortcut;
     /**
      * 更新当前渲染使用的 Text or Label 模式
      */

package/lib/tools/label/index.js

@@ -37,7 +37,7 @@ var Label = /** @class */ (function () {
         // TODO: 2. 做一些插件需要的事件监听
         this.addEventListeners();
         // TODO: 3. 自定义快捷键，比如 delete，选中 label 时，移除 label
-        // this.rewriteShortcut()
+        this.rewriteShortcut();
         // 插件中注册 LabelOverlay 工具，用于 label 的编辑
         lf.tool.registerTool(LabelOverlay_1.default.toolName, LabelOverlay_1.default);
         // LabelOverlay 和 TextEditTool 互斥，所以将它 disable 掉
@@ -277,7 +277,51 @@ var Label = /** @class */ (function () {
         };
         // TODO: others methods ???
     };
-    // private rewriteShortcut() {}
+    Label.prototype.rewriteShortcut = function () {
+        var _this = this;
+        var _a = this.lf, keyboard = _a.keyboard, graphModel = _a.graphModel;
+        var keyboardOptions = keyboard.options.keyboard;
+        keyboard.off(['backspace']);
+        keyboard.on(['backspace'], function () {
+            if (!(keyboardOptions === null || keyboardOptions === void 0 ? void 0 : keyboardOptions.enabled))
+                return true;
+            if (graphModel.textEditElement)
+                return true;
+            var elements = graphModel.getSelectElements(true);
+            _this.lf.clearSelectElements();
+            var editConfigModel = _this.lf.graphModel.editConfigModel;
+            elements.edges.forEach(function (edge) {
+                var properties = edge.properties;
+                if (properties &&
+                    !(0, lodash_es_1.isEmpty)(properties._label) &&
+                    editConfigModel.textMode === core_1.TextMode.LABEL) {
+                    var newLabelList = properties._label.filter(function (label) { return !label.isSelected; });
+                    // 如果两个labelList长度不一致，说明有选中的元素，此时backspace做的动作是删除label
+                    if (!(0, lodash_es_1.isEqual)(newLabelList.length, properties._label.length)) {
+                        var edgeModel = graphModel.getEdgeModelById(edge.id);
+                        edgeModel === null || edgeModel === void 0 ? void 0 : edgeModel.setProperty('_label', newLabelList);
+                        return;
+                    }
+                }
+                edge.id && _this.lf.deleteEdge(edge.id);
+            });
+            elements.nodes.forEach(function (node) {
+                var properties = node.properties;
+                if (properties &&
+                    !(0, lodash_es_1.isEmpty)(properties._label) &&
+                    editConfigModel.textMode === core_1.TextMode.LABEL) {
+                    var newLabelList = properties._label.filter(function (label) { return !label.isSelected; });
+                    if (!(0, lodash_es_1.isEqual)(newLabelList.length, properties._label.length)) {
+                        var nodeModel = graphModel.getNodeModelById(node.id);
+                        nodeModel === null || nodeModel === void 0 ? void 0 : nodeModel.setProperty('_label', newLabelList);
+                        return;
+                    }
+                }
+                node.id && _this.lf.deleteNode(node.id);
+            });
+            return false;
+        });
+    };
     /**
      * 更新当前渲染使用的 Text or Label 模式
      */

package/lib/tools/proximity-connect/index.d.ts

@@ -0,0 +1,42 @@
+import LogicFlow, { Model, BaseNodeModel, BaseEdgeModel } from '@logicflow/core';
+import AnchorConfig = Model.AnchorConfig;
+import Point = LogicFlow.Point;
+export type ProximityConnectProps = {
+    enable: boolean;
+    distance: number;
+    reverseDirection: boolean;
+    virtualEdgeStyle: Record<string, unknown>;
+};
+export declare class ProximityConnect {
+    static pluginName: string;
+    enable: boolean;
+    lf: LogicFlow;
+    closestNode?: BaseNodeModel;
+    currentDistance: number;
+    thresholdDistance: number;
+    currentNode?: BaseNodeModel;
+    reverseDirection: boolean;
+    currentAnchor?: AnchorConfig;
+    closestAnchor?: AnchorConfig;
+    virtualEdge?: BaseEdgeModel;
+    virtualEdgeStyle: Record<string, unknown>;
+    constructor({ lf, options, }: LogicFlow.IExtensionProps & {
+        options: ProximityConnectProps;
+    });
+    render(): void;
+    addEventListeners(): void;
+    handleNodeDrag(): void;
+    handleDrop(): void;
+    handleAnchorDrag(clientX: number, clientY: number): void;
+    findClosestAnchorOfNode(draggingNode: BaseNodeModel, allNodes: BaseNodeModel[]): void;
+    findClosestAnchorOfAnchor(draggingPoint: Point, allNodes: BaseNodeModel[]): void;
+    anchorAllowConnect(node: BaseNodeModel, anchor: AnchorConfig, draggingAnchor: AnchorConfig | undefined): boolean | undefined;
+    sameEdgeIsExist(edge: BaseEdgeModel): boolean;
+    addVirtualEdge(): void;
+    addActualEdge(): void;
+    setVirtualEdgeStyle(value: Record<string, unknown>): void;
+    setThresholdDistance(distance: number): void;
+    setReverseDirection(value: boolean): void;
+    setEnable(enable: boolean): void;
+    resetData(): void;
+}

package/lib/tools/proximity-connect/index.js

@@ -0,0 +1,340 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProximityConnect = void 0;
+var core_1 = require("@logicflow/core");
+var lodash_es_1 = require("lodash-es");
+var ProximityConnect = /** @class */ (function () {
+    function ProximityConnect(_a) {
+        var lf = _a.lf, options = _a.options;
+        this.enable = true;
+        this.currentDistance = Infinity; // 当前间距
+        this.thresholdDistance = 100; // 节点-节点连接距离阈值
+        this.reverseDirection = false; // 节点-节点连线方向，默认是拖拽节点连向最近节点
+        this.virtualEdgeStyle = {
+            strokeDasharray: '10,10',
+            stroke: '#acacac',
+        }; // 虚拟边样式
+        this.lf = lf;
+        (0, lodash_es_1.assign)(this, options);
+    }
+    ProximityConnect.prototype.render = function () {
+        this.addEventListeners();
+    };
+    // 增加节点拖拽和锚点拖拽的事件监听
+    ProximityConnect.prototype.addEventListeners = function () {
+        var _this = this;
+        // 节点开始拖拽事件
+        this.lf.graphModel.eventCenter.on('node:dragstart', function (_a) {
+            var data = _a.data;
+            if (!_this.enable)
+                return;
+            var graphModel = _this.lf.graphModel;
+            var id = data.id;
+            _this.currentNode = graphModel.getNodeModelById(id);
+        });
+        // 节点拖拽事件
+        this.lf.graphModel.eventCenter.on('node:drag', function () {
+            _this.handleNodeDrag();
+        });
+        // 锚点开始拖拽事件
+        this.lf.graphModel.eventCenter.on('anchor:dragstart', function (_a) {
+            var data = _a.data, nodeModel = _a.nodeModel;
+            if (!_this.enable)
+                return;
+            _this.currentNode = nodeModel;
+            _this.currentAnchor = data;
+        });
+        // 锚点拖拽事件
+        this.lf.graphModel.eventCenter.on('anchor:drag', function (_a) {
+            var _b = _a.e, clientX = _b.clientX, clientY = _b.clientY;
+            if (!_this.enable)
+                return;
+            _this.handleAnchorDrag(clientX, clientY);
+        });
+        // 节点、锚点拖拽结束事件
+        this.lf.graphModel.eventCenter.on('node:drop,anchor:dragend', function () {
+            if (!_this.enable)
+                return;
+            _this.handleDrop();
+        });
+    };
+    // 节点拖拽动作
+    ProximityConnect.prototype.handleNodeDrag = function () {
+        /**
+         * 主要做几件事情
+         * 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
+         * 遍历画布上的所有节点，找到距离最近的节点，获取其所有锚点数据
+         * 判断每个锚点与当前选中节点的所有锚点之间的距离，找到路路径最短的两个点时，把当前节点、当前锚点当前最短记录记录下来，作为当前最近数据
+         * 判断当前最短距离是否小于阈值
+         * 如果是 就创建虚拟边
+         */
+        var nodes = this.lf.graphModel.nodes;
+        if (!(0, lodash_es_1.isNil)(this.virtualEdge)) {
+            var _a = this.virtualEdge, startPoint = _a.startPoint, endPoint = _a.endPoint, id = _a.id;
+            var curDistance = (0, core_1.twoPointDistance)(startPoint, endPoint);
+            if (curDistance > this.thresholdDistance) {
+                this.lf.deleteEdge(id);
+                this.virtualEdge = undefined;
+            }
+        }
+        if (this.currentNode) {
+            this.findClosestAnchorOfNode(this.currentNode, nodes);
+        }
+        if (this.currentDistance < this.thresholdDistance) {
+            this.addVirtualEdge();
+        }
+    };
+    // 节点放下
+    ProximityConnect.prototype.handleDrop = function () {
+        this.addActualEdge();
+        this.resetData();
+    };
+    // 锚点拖拽动作
+    ProximityConnect.prototype.handleAnchorDrag = function (clientX, clientY) {
+        // 获取当前点在画布上的位置
+        var graphModel = this.lf.graphModel;
+        var _a = graphModel.getPointByClient({
+            x: clientX,
+            y: clientY,
+        }).canvasOverlayPosition, x = _a.x, y = _a.y;
+        if ((0, lodash_es_1.isNil)(x) || (0, lodash_es_1.isNil)(y))
+            return;
+        var currentPoint = { x: x, y: y };
+        var nodes = graphModel.nodes;
+        // 判断当前是否有虚拟连线，有的话判断两点距离是否超过阈值，超过的话删除连线
+        if (!(0, lodash_es_1.isNil)(this.virtualEdge)) {
+            var _b = this.virtualEdge, endPoint = _b.endPoint, id = _b.id;
+            var curDistance = (0, core_1.twoPointDistance)(currentPoint, endPoint);
+            if (curDistance > this.thresholdDistance) {
+                this.lf.deleteEdge(id);
+                this.virtualEdge = undefined;
+            }
+        }
+        // 记录最近点的信息
+        this.findClosestAnchorOfAnchor(currentPoint, nodes);
+        if (this.currentDistance < this.thresholdDistance) {
+            this.addVirtualEdge();
+        }
+    };
+    // 节点→节点 找最近的节点和锚点
+    ProximityConnect.prototype.findClosestAnchorOfNode = function (draggingNode, allNodes) {
+        var _this = this;
+        if ((0, lodash_es_1.isNil)(draggingNode) || (0, lodash_es_1.isEmpty)(draggingNode))
+            return;
+        var _a = draggingNode.anchors, draggingAnchors = _a === void 0 ? [] : _a, id = draggingNode.id;
+        var distance;
+        var preConnectAnchor;
+        var closestAnchor;
+        var closestNode;
+        allNodes.forEach(function (node) {
+            if ((0, lodash_es_1.isEqual)(node.id, id))
+                return;
+            var _a = node.anchors, anchors = _a === void 0 ? [] : _a;
+            // 遍历所有节点，找离当前拖拽节点最近的可连接节点和锚点
+            anchors.forEach(function (anchor) {
+                // 找距离最近的两个锚点
+                draggingAnchors.forEach(function (draggingAnchor) {
+                    // 判断拖拽点锚点和当前锚点是否可连线
+                    var anchorAllowConnect = _this.anchorAllowConnect(node, anchor, draggingAnchor);
+                    if (!anchorAllowConnect)
+                        return;
+                    // 获取两个锚点之间的距离
+                    var curDistance = (0, core_1.twoPointDistance)(draggingAnchor, anchor);
+                    if (!distance || curDistance < distance) {
+                        // 如果是第一条数据，或者当前这对锚点距离更短，就替换数据
+                        distance = curDistance;
+                        preConnectAnchor = draggingAnchor;
+                        closestAnchor = anchor;
+                        closestNode = node;
+                    }
+                });
+            });
+        });
+        this.currentDistance = distance;
+        this.currentAnchor = preConnectAnchor;
+        this.closestAnchor = closestAnchor;
+        this.closestNode = closestNode;
+    };
+    // 锚点→节点 找最近的锚点
+    ProximityConnect.prototype.findClosestAnchorOfAnchor = function (draggingPoint, allNodes) {
+        var _this = this;
+        if ((0, lodash_es_1.isNil)(draggingPoint))
+            return;
+        var distance;
+        var closestAnchor;
+        var closestNode;
+        var _a = this, currentNode = _a.currentNode, currentAnchor = _a.currentAnchor;
+        allNodes.forEach(function (node) {
+            if (!currentNode)
+                return;
+            var _a = node.anchors, anchors = _a === void 0 ? [] : _a;
+            // 遍历所有节点，找离当前拖拽节点最近的可连接节点和锚点
+            anchors.forEach(function (anchor) {
+                var _a;
+                if ((0, lodash_es_1.isEqual)((_a = _this.currentAnchor) === null || _a === void 0 ? void 0 : _a.id, anchor.id))
+                    return;
+                // 判断拖拽点锚点和当前锚点是否可连线
+                var anchorAllowConnect = _this.anchorAllowConnect(node, anchor, currentAnchor);
+                if (!anchorAllowConnect)
+                    return;
+                // 获取两个锚点之间的距离
+                var curDistance = (0, core_1.twoPointDistance)(draggingPoint, anchor);
+                if (!distance || curDistance < distance) {
+                    // 如果是第一条数据，或者当前这对锚点距离更短，就替换数据
+                    distance = curDistance;
+                    closestAnchor = anchor;
+                    closestNode = node;
+                }
+            });
+        });
+        this.currentDistance = distance;
+        this.closestAnchor = closestAnchor;
+        this.closestNode = closestNode;
+    };
+    // 判断锚点是否允许连线
+    ProximityConnect.prototype.anchorAllowConnect = function (node, anchor, draggingAnchor) {
+        var currentNode = this.currentNode;
+        if (!currentNode)
+            return;
+        // 判断起点是否可连接
+        var sourceValidResult = (this.reverseDirection
+            ? node.isAllowConnectedAsSource(currentNode, anchor, draggingAnchor)
+            : currentNode.isAllowConnectedAsSource(node, draggingAnchor, anchor)).isAllPass;
+        // 判断终点是否可连接
+        var targetValidResult = (this.reverseDirection
+            ? currentNode.isAllowConnectedAsTarget(node, anchor, draggingAnchor)
+            : node.isAllowConnectedAsTarget(currentNode, draggingAnchor, anchor)).isAllPass;
+        return sourceValidResult && targetValidResult;
+    };
+    // 判断是否应该删除虚拟边
+    ProximityConnect.prototype.sameEdgeIsExist = function (edge) {
+        if ((0, lodash_es_1.isNil)(this.closestNode) ||
+            (0, lodash_es_1.isNil)(this.currentNode) ||
+            (0, lodash_es_1.isNil)(this.closestAnchor) ||
+            (0, lodash_es_1.isNil)(this.currentAnchor))
+            return false;
+        if ((0, lodash_es_1.isNil)(edge))
+            return false;
+        var _a = this, closestNodeId = _a.closestNode.id, currentNodeId = _a.currentNode.id, closestAnchorId = _a.closestAnchor.id, currentAnchorId = _a.currentAnchor.id, reverseDirection = _a.reverseDirection;
+        var sourceNodeId = edge.sourceNodeId, targetNodeId = edge.targetNodeId, sourceAnchorId = edge.sourceAnchorId, targetAnchorId = edge.targetAnchorId;
+        var isExist = reverseDirection
+            ? (0, lodash_es_1.isEqual)(closestNodeId, sourceNodeId) &&
+                (0, lodash_es_1.isEqual)(currentNodeId, targetNodeId) &&
+                (0, lodash_es_1.isEqual)(closestAnchorId, sourceAnchorId) &&
+                (0, lodash_es_1.isEqual)(currentAnchorId, targetAnchorId)
+            : (0, lodash_es_1.isEqual)(currentNodeId, sourceNodeId) &&
+                (0, lodash_es_1.isEqual)(closestNodeId, targetNodeId) &&
+                (0, lodash_es_1.isEqual)(currentAnchorId, sourceAnchorId) &&
+                (0, lodash_es_1.isEqual)(closestAnchorId, targetAnchorId);
+        return isExist;
+    };
+    // 增加虚拟边
+    ProximityConnect.prototype.addVirtualEdge = function () {
+        var _this = this;
+        var edges = this.lf.graphModel.edges;
+        // 判断当前是否已存在一条同样配置的真实边
+        var actualEdgeIsExist = (0, lodash_es_1.reduce)(edges, function (result, edge) {
+            if (edge.virtual)
+                return result;
+            return result || _this.sameEdgeIsExist(edge);
+        }, false);
+        // 如果有真实边就不重复创建边了
+        if (actualEdgeIsExist)
+            return;
+        // 判断当前是否有虚拟边
+        // 如果当前已有虚拟边，判断当前的节点和锚点信息与虚拟边的信息是否一致
+        if (!(0, lodash_es_1.isNil)(this.virtualEdge)) {
+            var edgeId = this.virtualEdge.id;
+            // 信息一致不做处理
+            if (this.sameEdgeIsExist(this.virtualEdge))
+                return;
+            // 不一致就删除老边
+            this.lf.deleteEdge(edgeId);
+        }
+        // 开始创建虚拟边
+        var _a = this, reverseDirection = _a.reverseDirection, currentNode = _a.currentNode, closestNode = _a.closestNode, currentAnchor = _a.currentAnchor, closestAnchor = _a.closestAnchor;
+        if ((0, lodash_es_1.isEmpty)(currentNode) || (0, lodash_es_1.isEmpty)(closestNode))
+            return;
+        var properties = {
+            style: this.virtualEdgeStyle,
+        };
+        this.virtualEdge = this.lf.addEdge(reverseDirection
+            ? {
+                sourceNodeId: closestNode === null || closestNode === void 0 ? void 0 : closestNode.id,
+                targetNodeId: currentNode === null || currentNode === void 0 ? void 0 : currentNode.id,
+                sourceAnchorId: closestAnchor === null || closestAnchor === void 0 ? void 0 : closestAnchor.id,
+                targetAnchorId: currentAnchor === null || currentAnchor === void 0 ? void 0 : currentAnchor.id,
+                properties: properties,
+            }
+            : {
+                sourceNodeId: currentNode === null || currentNode === void 0 ? void 0 : currentNode.id,
+                targetNodeId: closestNode === null || closestNode === void 0 ? void 0 : closestNode.id,
+                sourceAnchorId: currentAnchor === null || currentAnchor === void 0 ? void 0 : currentAnchor.id,
+                targetAnchorId: closestAnchor === null || closestAnchor === void 0 ? void 0 : closestAnchor.id,
+                properties: properties,
+            });
+        this.virtualEdge.virtual = true;
+    };
+    // 增加实体边
+    ProximityConnect.prototype.addActualEdge = function () {
+        if ((0, lodash_es_1.isNil)(this.virtualEdge))
+            return;
+        var _a = this.virtualEdge, type = _a.type, sourceNodeId = _a.sourceNodeId, targetNodeId = _a.targetNodeId, sourceAnchorId = _a.sourceAnchorId, targetAnchorId = _a.targetAnchorId, startPoint = _a.startPoint, endPoint = _a.endPoint, pointsList = _a.pointsList;
+        this.lf.addEdge({
+            type: type,
+            sourceNodeId: sourceNodeId,
+            targetNodeId: targetNodeId,
+            sourceAnchorId: sourceAnchorId,
+            targetAnchorId: targetAnchorId,
+            startPoint: startPoint,
+            endPoint: endPoint,
+            pointsList: pointsList,
+        });
+        this.lf.deleteEdge(this.virtualEdge.id);
+    };
+    // 设置虚拟边样式
+    ProximityConnect.prototype.setVirtualEdgeStyle = function (value) {
+        this.virtualEdgeStyle = __assign(__assign({}, this.virtualEdgeStyle), value);
+    };
+    // 设置连线阈值
+    ProximityConnect.prototype.setThresholdDistance = function (distance) {
+        console.log('distance', distance);
+        if (!(0, lodash_es_1.isFinite)(distance))
+            return;
+        this.thresholdDistance = distance;
+    };
+    // 设置连线方向
+    ProximityConnect.prototype.setReverseDirection = function (value) {
+        this.reverseDirection = value;
+    };
+    // 设置插件开关状态
+    ProximityConnect.prototype.setEnable = function (enable) {
+        this.enable = enable;
+        if (!enable) {
+            this.resetData();
+        }
+    };
+    // 重置数据
+    ProximityConnect.prototype.resetData = function () {
+        this.closestNode = undefined;
+        this.currentDistance = Infinity;
+        this.currentNode = undefined;
+        this.currentAnchor = undefined;
+        this.closestAnchor = undefined;
+        this.virtualEdge = undefined;
+    };
+    ProximityConnect.pluginName = 'proximityConnect';
+    return ProximityConnect;
+}());
+exports.ProximityConnect = ProximityConnect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.0.11",
+  "version": "2.0.13",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "author": "Logicflow-Team",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@logicflow/core": "2.0.7"
+    "@logicflow/core": "2.0.9"
   },
   "dependencies": {
     "@antv/hierarchy": "^0.6.11",
@@ -31,7 +31,7 @@
     "preact": "^10.17.1",
     "rangy": "^1.3.1",
     "vanilla-picker": "^2.12.3",
-    "@logicflow/core": "2.0.7"
+    "@logicflow/core": "2.0.9"
   },
   "devDependencies": {
     "less": "^4.1.1",