@logicflow/extension 2.2.4-alpha.0 → 2.2.4-alpha.1

package/es/dynamic-group/index.d.ts

@@ -27,6 +27,7 @@ export declare class DynamicGroup {
      * 默认 true，与 v1.1 以来行为一致；为 false 时仅删除分组，成员保留并解除归属。
      */
     cascadeDeleteChildren: boolean;
+    sensorOutline: DynamicGroup.SensorOutlineOptions;
     topGroupZIndex: number;
     activeGroup?: DynamicGroupNodeModel;
     nodeGroupMap: Map<string, string>;
@@ -78,6 +79,8 @@ export declare class DynamicGroup {
     onNodeAdd: ({ data: node }: CallbackArgs<'node:add'>) => void;
     onNodeDndAdd: ({ data: node }: CallbackArgs<'node:dnd-add'>) => void;
     onNodeDrop: ({ data: node }: CallbackArgs<'node:drop'>) => void;
+    onNodeMouseUp: () => void;
+    clearDragTargetHighlight(): void;
     detachNodeFromGroup: (groupId: string, nodeId: string) => void;
     releaseGroupMembers: (groupModel: DynamicGroupNodeModel) => void;
     removeChildFromOtherGroups: (childId: string, ownerGroupId: string) => void;
@@ -145,12 +148,20 @@ export declare namespace DynamicGroup {
         childNodes: BaseNodeModel[];
         edgesData: EdgeData[];
     };
+    type SensorOutlineOptions = {
+        /** 拖拽感应外框描边颜色，默认 '#feb663' */
+        stroke?: string;
+        /** 拖拽感应外框线宽，默认 2 */
+        strokeWidth?: number;
+    };
     type DynamicGroupOptions = Partial<{
         isCollapsed: boolean;
         /** 为 true 时禁止手动将边连到/从分组节点；默认 false */
         disallowEdgeConnectToGroup: boolean;
         /** 删除分组时是否级联删除成员；默认 true */
         cascadeDeleteChildren: boolean;
+        /** 拖拽节点进入分组时的感应外框样式 */
+        sensorOutline: SensorOutlineOptions;
     }>;
 }
 export default DynamicGroup;

package/es/dynamic-group/index.js

@@ -74,6 +74,7 @@ var DynamicGroup = /** @class */ (function () {
          * 默认 true，与 v1.1 以来行为一致；为 false 时仅删除分组，成员保留并解除归属。
          */
         this.cascadeDeleteChildren = true;
+        this.sensorOutline = {};
         this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
         // 存储节点与 group 的映射关系
         this.nodeGroupMap = new Map();
@@ -120,6 +121,7 @@ var DynamicGroup = /** @class */ (function () {
             }
         };
         this.onSelectionDrop = function () {
+            _this.clearDragTargetHighlight();
             var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
             selectedNodes.forEach(function (node) {
                 _this.addNodeToGroup(node);
@@ -133,11 +135,16 @@ var DynamicGroup = /** @class */ (function () {
             var node = _a.data;
             _this.syncGroupChildren(node);
             _this.addNodeToGroup(node);
+            _this.clearDragTargetHighlight();
         };
         this.onNodeDrop = function (_a) {
             var node = _a.data;
+            _this.clearDragTargetHighlight();
             _this.addNodeToGroup(node);
         };
+        this.onNodeMouseUp = function () {
+            _this.clearDragTargetHighlight();
+        };
         this.detachNodeFromGroup = function (groupId, nodeId) {
             var group = _this.lf.getNodeModelById(groupId);
             if (!group)
@@ -215,7 +222,6 @@ var DynamicGroup = /** @class */ (function () {
                 if (targetGroup.isAllowAppendIn(node)) {
                     targetGroup.addChild(node.id);
                     // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-                    targetGroup.setAllowAppendChild(false);
                 }
                 else {
                     // 抛出不允许插入的事件
@@ -230,7 +236,6 @@ var DynamicGroup = /** @class */ (function () {
                 _this.detachNodeFromGroup(preGroupId, node.id);
                 targetGroup.addChild(node.id);
                 // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-                targetGroup.setAllowAppendChild(false);
             }
             else {
                 var preGroup = _this.lf.getNodeModelById(preGroupId);
@@ -564,6 +569,12 @@ var DynamicGroup = /** @class */ (function () {
         });
         this.topGroupZIndex = max;
     };
+    DynamicGroup.prototype.clearDragTargetHighlight = function () {
+        if (this.activeGroup) {
+            this.activeGroup.setAllowAppendChild(false);
+            this.activeGroup = undefined;
+        }
+    };
     DynamicGroup.prototype.removeChildrenInGroupNodeData = function (nodeData) {
         var _a;
         var newNodeData = cloneDeep(nodeData);
@@ -733,6 +744,7 @@ var DynamicGroup = /** @class */ (function () {
         lf.on(EventType.NODE_ADD, this.onNodeAdd);
         lf.on(EventType.NODE_DND_ADD, this.onNodeDndAdd);
         lf.on(EventType.NODE_DROP, this.onNodeDrop);
+        lf.on(EventType.NODE_MOUSEUP, this.onNodeMouseUp);
         lf.on(EventType.SELECTION_DROP, this.onSelectionDrop);
         lf.on(EventType.NODE_DELETE, this.removeNodeFromGroup);
         lf.on(EventType.EDGE_DELETE, this.onEdgeDelete);
@@ -790,6 +802,7 @@ var DynamicGroup = /** @class */ (function () {
         this.lf.off(EventType.NODE_ADD, this.onNodeAdd);
         this.lf.off(EventType.NODE_DND_ADD, this.onNodeDndAdd);
         this.lf.off(EventType.NODE_DROP, this.onNodeDrop);
+        this.lf.off(EventType.NODE_MOUSEUP, this.onNodeMouseUp);
         this.lf.off(EventType.SELECTION_DROP, this.onSelectionDrop);
         this.lf.off(EventType.NODE_DELETE, this.removeNodeFromGroup);
         this.lf.off(EventType.EDGE_DELETE, this.onEdgeDelete);

package/es/dynamic-group/model.d.ts

@@ -2,6 +2,12 @@ import LogicFlow, { BaseEdgeModel, GraphModel, IRectNodeProperties, RectNodeMode
 import NodeData = LogicFlow.NodeData;
 import NodeConfig = LogicFlow.NodeConfig;
 import EdgeConfig = LogicFlow.EdgeConfig;
+/** 拖拽感应外框默认样式（可通过 pluginsOptions.dynamicGroup.sensorOutline 覆盖） */
+export declare const DEFAULT_SENSOR_OUTLINE: {
+    readonly stroke: "#feb663";
+    readonly strokeWidth: 2;
+};
+export type SensorOutlineOptions = Partial<typeof DEFAULT_SENSOR_OUTLINE>;
 export type IGroupNodeProperties = {
     /**
      * 当前分组中的节点 id
@@ -185,8 +191,8 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
      * 设置分组节点 drop 区域的样式
      */
     getAddableOutlineStyle(): {
-        stroke: string;
-        strokeWidth: number;
+        stroke: "#feb663";
+        strokeWidth: 2;
         strokeDasharray: string;
         fill: string;
     };

package/es/dynamic-group/model.js

@@ -59,6 +59,11 @@ import { observable, ElementType, RectNodeModel, } from '@logicflow/core';
 import { cloneDeep, forEach } from 'lodash-es';
 import { ExtensionEventType } from '../constant/events';
 import { DEFAULT_TITLE_TEXT_ALIGN, DEFAULT_TITLE_WRAP_PADDING, formatWrapPaddingCss, getTitleForeignObjectRect, parseWrapPadding, resolveTitleTextPosition, textAlignToAnchor, } from './utils';
+/** 拖拽感应外框默认样式（可通过 pluginsOptions.dynamicGroup.sensorOutline 覆盖） */
+export var DEFAULT_SENSOR_OUTLINE = {
+    stroke: '#feb663',
+    strokeWidth: 2,
+};
 // 分组节点默认展开时的大小
 var DEFAULT_GROUP_EXPAND_WIDTH = 400;
 var DEFAULT_GROUP_EXPAND_HEIGHT = 230;
@@ -562,9 +567,12 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
      * 设置分组节点 drop 区域的样式
      */
     DynamicGroupNodeModel.prototype.getAddableOutlineStyle = function () {
+        var plugin = this.graphModel
+            .dynamicGroup;
+        var _a = __assign(__assign({}, DEFAULT_SENSOR_OUTLINE), plugin === null || plugin === void 0 ? void 0 : plugin.sensorOutline), stroke = _a.stroke, strokeWidth = _a.strokeWidth;
         return {
-            stroke: '#feb663',
-            strokeWidth: 2,
+            stroke: stroke,
+            strokeWidth: strokeWidth,
             strokeDasharray: '4 4',
             fill: 'transparent',
         };

package/lib/dynamic-group/index.d.ts

@@ -27,6 +27,7 @@ export declare class DynamicGroup {
      * 默认 true，与 v1.1 以来行为一致；为 false 时仅删除分组，成员保留并解除归属。
      */
     cascadeDeleteChildren: boolean;
+    sensorOutline: DynamicGroup.SensorOutlineOptions;
     topGroupZIndex: number;
     activeGroup?: DynamicGroupNodeModel;
     nodeGroupMap: Map<string, string>;
@@ -78,6 +79,8 @@ export declare class DynamicGroup {
     onNodeAdd: ({ data: node }: CallbackArgs<'node:add'>) => void;
     onNodeDndAdd: ({ data: node }: CallbackArgs<'node:dnd-add'>) => void;
     onNodeDrop: ({ data: node }: CallbackArgs<'node:drop'>) => void;
+    onNodeMouseUp: () => void;
+    clearDragTargetHighlight(): void;
     detachNodeFromGroup: (groupId: string, nodeId: string) => void;
     releaseGroupMembers: (groupModel: DynamicGroupNodeModel) => void;
     removeChildFromOtherGroups: (childId: string, ownerGroupId: string) => void;
@@ -145,12 +148,20 @@ export declare namespace DynamicGroup {
         childNodes: BaseNodeModel[];
         edgesData: EdgeData[];
     };
+    type SensorOutlineOptions = {
+        /** 拖拽感应外框描边颜色，默认 '#feb663' */
+        stroke?: string;
+        /** 拖拽感应外框线宽，默认 2 */
+        strokeWidth?: number;
+    };
     type DynamicGroupOptions = Partial<{
         isCollapsed: boolean;
         /** 为 true 时禁止手动将边连到/从分组节点；默认 false */
         disallowEdgeConnectToGroup: boolean;
         /** 删除分组时是否级联删除成员；默认 true */
         cascadeDeleteChildren: boolean;
+        /** 拖拽节点进入分组时的感应外框样式 */
+        sensorOutline: SensorOutlineOptions;
     }>;
 }
 export default DynamicGroup;

package/lib/dynamic-group/index.js

@@ -91,6 +91,7 @@ var DynamicGroup = /** @class */ (function () {
          * 默认 true，与 v1.1 以来行为一致；为 false 时仅删除分组，成员保留并解除归属。
          */
         this.cascadeDeleteChildren = true;
+        this.sensorOutline = {};
         this.topGroupZIndex = DEFAULT_BOTTOM_Z_INDEX;
         // 存储节点与 group 的映射关系
         this.nodeGroupMap = new Map();
@@ -137,6 +138,7 @@ var DynamicGroup = /** @class */ (function () {
             }
         };
         this.onSelectionDrop = function () {
+            _this.clearDragTargetHighlight();
             var selectedNodes = _this.lf.graphModel.getSelectElements().nodes;
             selectedNodes.forEach(function (node) {
                 _this.addNodeToGroup(node);
@@ -150,11 +152,16 @@ var DynamicGroup = /** @class */ (function () {
             var node = _a.data;
             _this.syncGroupChildren(node);
             _this.addNodeToGroup(node);
+            _this.clearDragTargetHighlight();
         };
         this.onNodeDrop = function (_a) {
             var node = _a.data;
+            _this.clearDragTargetHighlight();
             _this.addNodeToGroup(node);
         };
+        this.onNodeMouseUp = function () {
+            _this.clearDragTargetHighlight();
+        };
         this.detachNodeFromGroup = function (groupId, nodeId) {
             var group = _this.lf.getNodeModelById(groupId);
             if (!group)
@@ -232,7 +239,6 @@ var DynamicGroup = /** @class */ (function () {
                 if (targetGroup.isAllowAppendIn(node)) {
                     targetGroup.addChild(node.id);
                     // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-                    targetGroup.setAllowAppendChild(false);
                 }
                 else {
                     // 抛出不允许插入的事件
@@ -247,7 +253,6 @@ var DynamicGroup = /** @class */ (function () {
                 _this.detachNodeFromGroup(preGroupId, node.id);
                 targetGroup.addChild(node.id);
                 // 建立节点与 group 的映射关系放在了 group.addChild 触发的事件中，与直接调用 addChild 的行为保持一致
-                targetGroup.setAllowAppendChild(false);
             }
             else {
                 var preGroup = _this.lf.getNodeModelById(preGroupId);
@@ -581,6 +586,12 @@ var DynamicGroup = /** @class */ (function () {
         });
         this.topGroupZIndex = max;
     };
+    DynamicGroup.prototype.clearDragTargetHighlight = function () {
+        if (this.activeGroup) {
+            this.activeGroup.setAllowAppendChild(false);
+            this.activeGroup = undefined;
+        }
+    };
     DynamicGroup.prototype.removeChildrenInGroupNodeData = function (nodeData) {
         var _a;
         var newNodeData = (0, lodash_es_1.cloneDeep)(nodeData);
@@ -750,6 +761,7 @@ var DynamicGroup = /** @class */ (function () {
         lf.on(core_1.EventType.NODE_ADD, this.onNodeAdd);
         lf.on(core_1.EventType.NODE_DND_ADD, this.onNodeDndAdd);
         lf.on(core_1.EventType.NODE_DROP, this.onNodeDrop);
+        lf.on(core_1.EventType.NODE_MOUSEUP, this.onNodeMouseUp);
         lf.on(core_1.EventType.SELECTION_DROP, this.onSelectionDrop);
         lf.on(core_1.EventType.NODE_DELETE, this.removeNodeFromGroup);
         lf.on(core_1.EventType.EDGE_DELETE, this.onEdgeDelete);
@@ -807,6 +819,7 @@ var DynamicGroup = /** @class */ (function () {
         this.lf.off(core_1.EventType.NODE_ADD, this.onNodeAdd);
         this.lf.off(core_1.EventType.NODE_DND_ADD, this.onNodeDndAdd);
         this.lf.off(core_1.EventType.NODE_DROP, this.onNodeDrop);
+        this.lf.off(core_1.EventType.NODE_MOUSEUP, this.onNodeMouseUp);
         this.lf.off(core_1.EventType.SELECTION_DROP, this.onSelectionDrop);
         this.lf.off(core_1.EventType.NODE_DELETE, this.removeNodeFromGroup);
         this.lf.off(core_1.EventType.EDGE_DELETE, this.onEdgeDelete);

package/lib/dynamic-group/model.d.ts

@@ -2,6 +2,12 @@ import LogicFlow, { BaseEdgeModel, GraphModel, IRectNodeProperties, RectNodeMode
 import NodeData = LogicFlow.NodeData;
 import NodeConfig = LogicFlow.NodeConfig;
 import EdgeConfig = LogicFlow.EdgeConfig;
+/** 拖拽感应外框默认样式（可通过 pluginsOptions.dynamicGroup.sensorOutline 覆盖） */
+export declare const DEFAULT_SENSOR_OUTLINE: {
+    readonly stroke: "#feb663";
+    readonly strokeWidth: 2;
+};
+export type SensorOutlineOptions = Partial<typeof DEFAULT_SENSOR_OUTLINE>;
 export type IGroupNodeProperties = {
     /**
      * 当前分组中的节点 id
@@ -185,8 +191,8 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
      * 设置分组节点 drop 区域的样式
      */
     getAddableOutlineStyle(): {
-        stroke: string;
-        strokeWidth: number;
+        stroke: "#feb663";
+        strokeWidth: 2;
         strokeDasharray: string;
         fill: string;
     };

package/lib/dynamic-group/model.js

@@ -57,11 +57,16 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DynamicGroupNodeModel = void 0;
+exports.DynamicGroupNodeModel = exports.DEFAULT_SENSOR_OUTLINE = void 0;
 var core_1 = require("@logicflow/core");
 var lodash_es_1 = require("lodash-es");
 var events_1 = require("../constant/events");
 var utils_1 = require("./utils");
+/** 拖拽感应外框默认样式（可通过 pluginsOptions.dynamicGroup.sensorOutline 覆盖） */
+exports.DEFAULT_SENSOR_OUTLINE = {
+    stroke: '#feb663',
+    strokeWidth: 2,
+};
 // 分组节点默认展开时的大小
 var DEFAULT_GROUP_EXPAND_WIDTH = 400;
 var DEFAULT_GROUP_EXPAND_HEIGHT = 230;
@@ -565,9 +570,12 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
      * 设置分组节点 drop 区域的样式
      */
     DynamicGroupNodeModel.prototype.getAddableOutlineStyle = function () {
+        var plugin = this.graphModel
+            .dynamicGroup;
+        var _a = __assign(__assign({}, exports.DEFAULT_SENSOR_OUTLINE), plugin === null || plugin === void 0 ? void 0 : plugin.sensorOutline), stroke = _a.stroke, strokeWidth = _a.strokeWidth;
         return {
-            stroke: '#feb663',
-            strokeWidth: 2,
+            stroke: stroke,
+            strokeWidth: strokeWidth,
             strokeDasharray: '4 4',
             fill: 'transparent',
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@logicflow/extension",
-  "version": "2.2.4-alpha.0",
+  "version": "2.2.4-alpha.1",
   "description": "LogicFlow Extensions",
   "main": "lib/index.js",
   "module": "es/index.js",