@logicflow/extension 2.2.3 → 2.2.4-alpha.1

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
@@ -43,6 +49,11 @@ export type IGroupNodeProperties = {
      * 分组节点是否自动置顶
      */
     autoToFront?: boolean;
+    /**
+     * 是否允许手动将边连到/从本分组节点。
+     * 显式设置时优先于插件选项 disallowEdgeConnectToGroup。
+     */
+    allowEdgeConnect?: boolean;
     isAllowAppendIn?: (_nodeData: any) => boolean;
 } & IRectNodeProperties;
 export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodeProperties> {
@@ -63,6 +74,28 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
     constructor(data: NodeConfig<IGroupNodeProperties>, graphModel: GraphModel);
     initNodeData(data: LogicFlow.NodeConfig<IGroupNodeProperties>): void;
     setAttributes(): void;
+    getTextStyle(): Record<string, unknown> & {
+        [x: string]: unknown;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | undefined;
+        radius?: number | undefined;
+        rx?: number | undefined;
+        ry?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+        path?: string | undefined;
+        overflowMode?: "default" | "autoWrap" | "ellipsis" | undefined;
+        textWidth?: number | undefined;
+        background?: LogicFlow.CommonTheme | undefined;
+        wrapPadding?: string | undefined;
+        color?: string | undefined;
+        fontSize: number;
+        lineHeight?: number | undefined;
+        textAnchor?: "middle" | "start" | "end" | undefined;
+        dominantBaseline?: "middle" | "central" | "auto" | "text-bottom" | "alphabetic" | "ideographic" | "mathematical" | "hanging" | "text-top" | undefined;
+    };
+    setProperties(properties: Partial<IGroupNodeProperties>): void;
     getData(): NodeData;
     /**
      * 获取分组内的节点
@@ -82,10 +115,15 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
      * @param collapse {boolean} true -> 折叠；false -> 展开
      */
     toggleCollapse(collapse?: boolean): void;
+    getTitleHtmlRect(): import("./utils").TitleForeignObjectRect;
+    /**
+     * autoResize 更新分组尺寸后同步展开态快照，避免折叠/展开回退到旧尺寸。
+     */
+    updateExpandedSize(width: number, height: number): void;
     setTextPosition(): void;
     private collapse;
     private expand;
-    createVirtualEdge(edgeConfig: EdgeConfig): void;
+    createVirtualEdge(edgeConfig: EdgeConfig, realEdgeId: string): BaseEdgeModel<LogicFlow.PropertiesType>;
     /**
      * 折叠分组的时候，需要处理分组自身的连线和分组内部子节点上的连线
      * 边的分类：
@@ -133,13 +171,28 @@ export declare class DynamicGroupNodeModel extends RectNodeModel<IGroupNodePrope
     /**
      * 重写 Group 节点的 Resize Outline
      */
+    /**
+     * 展开态手动连线是否允许连到/从分组节点本身。
+     * 未设置 allowEdgeConnect 时由插件 disallowEdgeConnectToGroup 决定；折叠虚拟边不受影响。
+     */
+    isManualEdgeConnectAllowed(): boolean;
+    getConnectedTargetRules(): import("@logicflow/core").Model.ConnectRule[];
+    getConnectedSourceRules(): import("@logicflow/core").Model.ConnectRule[];
+    /**
+     * 保留锚点供折叠态虚拟边使用；禁止手动连线时关闭 edgeAddable。
+     */
+    getDefaultAnchor(): {
+        x: number;
+        y: number;
+        id: string;
+    }[];
     getAnchorStyle(): LogicFlow.AnchorTheme;
     /**
      * 设置分组节点 drop 区域的样式
      */
     getAddableOutlineStyle(): {
-        stroke: string;
-        strokeWidth: number;
+        stroke: "#feb663";
+        strokeWidth: 2;
         strokeDasharray: string;
         fill: string;
     };

package/es/dynamic-group/model.js

@@ -56,7 +56,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { observable, ElementType, RectNodeModel, } from '@logicflow/core';
-import { forEach } from 'lodash-es';
+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;
@@ -112,12 +119,29 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         this.collapsible = collapsible !== null && collapsible !== void 0 ? collapsible : true;
         this.autoToFront = autoToFront !== null && autoToFront !== void 0 ? autoToFront : false;
         this.setTextPosition();
-        // 禁用掉 Group 节点的文本编辑能力
-        this.text.editable = false;
         this.text.draggable = false;
     };
     DynamicGroupNodeModel.prototype.setAttributes = function () {
         _super.prototype.setAttributes.call(this);
+        this.setTextPosition();
+    };
+    DynamicGroupNodeModel.prototype.getTextStyle = function () {
+        var _a, _b, _c, _d, _e, _f;
+        var style = _super.prototype.getTextStyle.call(this);
+        var rawWrapPadding = (_d = (_c = (_b = (_a = this.properties) === null || _a === void 0 ? void 0 : _a.textStyle) === null || _b === void 0 ? void 0 : _b.wrapPadding) !== null && _c !== void 0 ? _c : style.wrapPadding) !== null && _d !== void 0 ? _d : DEFAULT_TITLE_WRAP_PADDING;
+        var pad = parseWrapPadding(rawWrapPadding);
+        var merged = __assign(__assign({ textAlign: DEFAULT_TITLE_TEXT_ALIGN }, style), { wrapPadding: formatWrapPaddingCss(rawWrapPadding) });
+        var overflowMode = (_e = merged.overflowMode) !== null && _e !== void 0 ? _e : 'default';
+        var fontSize = Number((_f = merged.fontSize) !== null && _f !== void 0 ? _f : 12);
+        if (overflowMode === 'ellipsis') {
+            merged.textHeight = pad.top + fontSize + 2 + pad.bottom;
+        }
+        merged.textAnchor = textAlignToAnchor(merged.textAlign);
+        merged.dominantBaseline = 'hanging';
+        return cloneDeep(merged);
+    };
+    DynamicGroupNodeModel.prototype.setProperties = function (properties) {
+        _super.prototype.setProperties.call(this, properties);
     };
     DynamicGroupNodeModel.prototype.getData = function () {
         var _this = this;
@@ -249,19 +273,57 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         // step 3
         this.collapseEdge(nextCollapseState, allRelatedEdges);
     };
+    DynamicGroupNodeModel.prototype.getTitleHtmlRect = function () {
+        var _a, _b, _c, _d, _e;
+        var style = this.getTextStyle();
+        var pad = parseWrapPadding((_c = (_b = (_a = this.properties) === null || _a === void 0 ? void 0 : _a.textStyle) === null || _b === void 0 ? void 0 : _b.wrapPadding) !== null && _c !== void 0 ? _c : DEFAULT_TITLE_WRAP_PADDING);
+        var overflowMode = ((_d = style.overflowMode) !== null && _d !== void 0 ? _d : 'default') === 'ellipsis'
+            ? 'ellipsis'
+            : 'autoWrap';
+        return getTitleForeignObjectRect({
+            x: this.x,
+            y: this.y,
+            width: this.width,
+            height: this.height,
+            overflowMode: overflowMode,
+            fontSize: Number((_e = style.fontSize) !== null && _e !== void 0 ? _e : 12),
+            pad: pad,
+        });
+    };
+    /**
+     * autoResize 更新分组尺寸后同步展开态快照，避免折叠/展开回退到旧尺寸。
+     */
+    DynamicGroupNodeModel.prototype.updateExpandedSize = function (width, height) {
+        this.expandWidth = width;
+        this.expandHeight = height;
+        this.setProperties({ width: width, height: height });
+    };
     DynamicGroupNodeModel.prototype.setTextPosition = function () {
-        var _a = this, x = _a.x, y = _a.y, staticTextPosition = _a.staticTextPosition, text = _a.text, isCollapsed = _a.isCollapsed, width = _a.width, height = _a.height, collapsedWidth = _a.collapsedWidth, collapsedHeight = _a.collapsedHeight;
-        if (staticTextPosition) {
-            text.x = x;
-            text.y = isCollapsed ? y : y - height / 2 + 15;
+        var _a, _b, _c, _d;
+        var _e = this, x = _e.x, y = _e.y, width = _e.width, height = _e.height, text = _e.text;
+        if (!text) {
+            return;
+        }
+        if (this.isCollapsed) {
+            if (text.x !== x || text.y !== y) {
+                this.text = __assign(__assign({}, text), { x: x, y: y });
+            }
             return;
         }
-        text.x = isCollapsed
-            ? x - width / 2 + collapsedWidth / 2
-            : x + width / 2 - collapsedWidth / 2;
-        text.y = isCollapsed
-            ? y - height / 2 + collapsedHeight / 2
-            : y + height / 2 - collapsedHeight / 2;
+        var style = this.getTextStyle();
+        var pad = parseWrapPadding((_c = (_b = (_a = this.properties) === null || _a === void 0 ? void 0 : _a.textStyle) === null || _b === void 0 ? void 0 : _b.wrapPadding) !== null && _c !== void 0 ? _c : DEFAULT_TITLE_WRAP_PADDING);
+        var textAlign = (_d = style.textAlign) !== null && _d !== void 0 ? _d : DEFAULT_TITLE_TEXT_ALIGN;
+        var _f = resolveTitleTextPosition({
+            x: x,
+            y: y,
+            width: width,
+            height: height,
+            textAlign: textAlign,
+            pad: pad,
+        }), nextX = _f.x, nextY = _f.y;
+        if (nextX !== text.x || nextY !== text.y) {
+            this.text = __assign(__assign({}, text), { x: nextX, y: nextY });
+        }
     };
     // 折叠操作
     DynamicGroupNodeModel.prototype.collapse = function () {
@@ -287,14 +349,17 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
         // 设置文本位置
         this.setTextPosition();
     };
-    DynamicGroupNodeModel.prototype.createVirtualEdge = function (edgeConfig) {
+    DynamicGroupNodeModel.prototype.createVirtualEdge = function (edgeConfig, realEdgeId) {
+        // 虚拟边仅用于折叠态展示，路径由锚点重算；不修改真实边的 pointsList
         edgeConfig.pointsList = undefined;
         var virtualEdge = this.graphModel.addEdge(edgeConfig);
         virtualEdge.virtual = true;
-        // TODO: 强制不保存 group 连线数据？？？-> 为什么注释掉？是不是不能强制设置为 null，会导致无法回填
-        // virtualEdge.getData = () => null
         virtualEdge.text.editable = false;
-        virtualEdge.isCollapsedEdge = true; // 这一行干啥的,TODO: 项目中没搜到应用的地方，是否应该移除
+        virtualEdge.isCollapsedEdge = true;
+        // 登记虚拟边 ↔ 真实边映射，供删除虚拟边时同步删除真实边（#2395）
+        var registry = this.graphModel.dynamicGroup;
+        registry === null || registry === void 0 ? void 0 : registry.registerCollapsedVirtualEdge(virtualEdge.id, this.id, realEdgeId);
+        return virtualEdge;
     };
     /**
      * 折叠分组的时候，需要处理分组自身的连线和分组内部子节点上的连线
@@ -323,7 +388,11 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
             var targetNodeId = edgeData.targetNodeId, sourceNodeId = edgeData.sourceNodeId;
             var edgeConfig = __assign(__assign({}, edgeData), { id: "".concat(edgeData.id, "__").concat(idx), text: (_a = edgeData.text) === null || _a === void 0 ? void 0 : _a.value });
             if (edge.virtual) {
+                // 先注销映射再删边，避免 deleteEdgeById 触发 edge:delete 时映射残留
+                var registry = graphModel.dynamicGroup;
+                registry === null || registry === void 0 ? void 0 : registry.unregisterCollapsedVirtualEdge(edge.id);
                 graphModel.deleteEdgeById(edge.id);
+                return;
             }
             // 考虑目标节点也属于分组的情况
             var targetNodeGroup = graphModel.dynamicGroup.getGroupByNodeId(targetNodeId);
@@ -343,19 +412,25 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
                 if (_this.children.has(sourceNodeId) || _this.id === sourceNodeId) {
                     edgeConfig.startPoint = undefined;
                     edgeConfig.sourceNodeId = _this.id;
+                    delete edgeConfig.sourceAnchorId;
                 }
                 else {
                     edgeConfig.endPoint = undefined;
                     edgeConfig.targetNodeId = _this.id;
+                    delete edgeConfig.targetAnchorId;
                 }
                 // 如果边的起点和终点都在分组内部，则不创建新的虚拟边
                 if (targetNodeGroup.id !== _this.id || sourceNodeGroup.id !== _this.id) {
-                    _this.createVirtualEdge(edgeConfig);
+                    _this.createVirtualEdge(edgeConfig, edge.id);
                 }
                 edge.visible = false;
             }
             // 展开时，处理被隐藏的边的逻辑 -> expand
             if (!collapse && !edge.visible) {
+                // 折叠期间用户已删虚拟边并连带删掉真实边时，跳过显示
+                if (!graphModel.getEdgeModelById(edge.id)) {
+                    return;
+                }
                 // 展开分组时：判断真实边的起点和中带你是否有任一节点在已折叠分组中，如果不是，则显示真实边
                 // 如果是，则修改这个边的对应目标节点 id 来创建虚拟边
                 if (targetNodeGroup &&
@@ -363,16 +438,19 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
                     targetNodeGroup.isCollapsed) {
                     edgeConfig.targetNodeId = targetNodeGroup.id;
                     edgeConfig.endPoint = undefined;
-                    _this.createVirtualEdge(edgeConfig);
+                    delete edgeConfig.targetAnchorId;
+                    _this.createVirtualEdge(edgeConfig, edge.id);
                 }
                 else if (sourceNodeGroup &&
                     sourceNodeGroup.isGroup &&
                     sourceNodeGroup.isCollapsed) {
                     edgeConfig.sourceNodeId = sourceNodeGroup.id;
                     edgeConfig.startPoint = undefined;
-                    _this.createVirtualEdge(edgeConfig);
+                    delete edgeConfig.sourceAnchorId;
+                    _this.createVirtualEdge(edgeConfig, edge.id);
                 }
                 else {
+                    // 保留折叠态期间隐藏边已更新的几何，勿用折叠瞬间快照覆盖（折叠态拖分组场景）
                     edge.visible = true;
                 }
             }
@@ -404,7 +482,7 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     DynamicGroupNodeModel.prototype.addChild = function (id) {
         this.children.add(id);
         var groupData = this.getData();
-        this.graphModel.eventCenter.emit('group:add-node', {
+        this.graphModel.eventCenter.emit(ExtensionEventType.GROUP_ADD_NODE, {
             data: groupData,
             childId: id,
         });
@@ -416,7 +494,9 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     DynamicGroupNodeModel.prototype.removeChild = function (id) {
         this.children.delete(id);
         var groupData = this.getData();
-        this.graphModel.eventCenter.emit('group:remove-node', { data: groupData });
+        this.graphModel.eventCenter.emit(ExtensionEventType.GROUP_REMOVE_NODE, {
+            data: groupData,
+        });
     };
     /**
      * 当 groupA 被添加到 groupB 中时，将 groupB 及 groupB 所属的 group zIndex 减 1
@@ -432,7 +512,47 @@ var DynamicGroupNodeModel = /** @class */ (function (_super) {
     //   // style.stroke = 'none'
     //   return style
     // }
-    // TODO: 是否是设置 group 节点没有锚点，而不是设置成透明？？？
+    /**
+     * 展开态手动连线是否允许连到/从分组节点本身。
+     * 未设置 allowEdgeConnect 时由插件 disallowEdgeConnectToGroup 决定；折叠虚拟边不受影响。
+     */
+    DynamicGroupNodeModel.prototype.isManualEdgeConnectAllowed = function () {
+        var _a;
+        var allowEdgeConnect = ((_a = this.properties) !== null && _a !== void 0 ? _a : {}).allowEdgeConnect;
+        if (allowEdgeConnect !== undefined) {
+            return allowEdgeConnect;
+        }
+        var plugin = this.graphModel.dynamicGroup;
+        return !(plugin === null || plugin === void 0 ? void 0 : plugin.disallowEdgeConnectToGroup);
+    };
+    DynamicGroupNodeModel.prototype.getConnectedTargetRules = function () {
+        var _this = this;
+        var rules = _super.prototype.getConnectedTargetRules.call(this);
+        rules.push({
+            message: '分组节点不允许作为边的终点',
+            validate: function () { return _this.isManualEdgeConnectAllowed(); },
+        });
+        return rules;
+    };
+    DynamicGroupNodeModel.prototype.getConnectedSourceRules = function () {
+        var _this = this;
+        var rules = _super.prototype.getConnectedSourceRules.call(this);
+        rules.push({
+            message: '分组节点不允许作为边的起点',
+            validate: function () { return _this.isManualEdgeConnectAllowed(); },
+        });
+        return rules;
+    };
+    /**
+     * 保留锚点供折叠态虚拟边使用；禁止手动连线时关闭 edgeAddable。
+     */
+    DynamicGroupNodeModel.prototype.getDefaultAnchor = function () {
+        var anchors = _super.prototype.getDefaultAnchor.call(this);
+        if (this.isManualEdgeConnectAllowed()) {
+            return anchors;
+        }
+        return anchors.map(function (anchor) { return (__assign(__assign({}, anchor), { edgeAddable: false })); });
+    };
     DynamicGroupNodeModel.prototype.getAnchorStyle = function () {
         var style = _super.prototype.getAnchorStyle.call(this);
         style.stroke = 'transparent';
@@ -447,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/es/dynamic-group/node.d.ts

@@ -24,6 +24,7 @@ export declare class DynamicGroupNode<P extends IDynamicGroupNodeProps = IDynami
     getCollapseIcon(sx: number, sy: number): string;
     getExpandIcon(sx: number, sy: number): string;
     getOperateIcon(): h.JSX.Element | null;
+    getText(): h.JSX.Element | null;
     getShape(): h.JSX.Element | null;
 }
 export default DynamicGroupNode;

package/es/dynamic-group/node.js

@@ -49,8 +49,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { h, RectNode, handleResize, } from '@logicflow/core';
+import { h, RectNode, handleResize, EventType, ElementState, TextMode, } from '@logicflow/core';
 import { forEach } from 'lodash-es';
+import { DG_OPERATE_BTN_HEIGHT, DG_OPERATE_BTN_WIDTH, DG_OPERATE_INSET, } from './utils';
+import { DynamicGroupText } from './titleText';
 import { rotatePointAroundCenter } from '../tools/label/utils';
 var DynamicGroupNode = /** @class */ (function (_super) {
     __extends(DynamicGroupNode, _super);
@@ -171,21 +173,21 @@ var DynamicGroupNode = /** @class */ (function (_super) {
         _super.prototype.componentDidMount.call(this);
         var eventCenter = this.props.graphModel.eventCenter;
         // 在 group 旋转时，对组内的所有子节点也进行对应的旋转计算
-        eventCenter.on('node:rotate', this.onNodeRotate);
+        eventCenter.on(EventType.NODE_ROTATE, this.onNodeRotate);
         // 在 group 缩放时，对组内的所有子节点也进行对应的缩放计算
-        eventCenter.on('node:resize', this.onNodeResize);
+        eventCenter.on(EventType.NODE_RESIZE, this.onNodeResize);
         // 在 group 移动时，对组内的所有子节点也进行对应的移动计算
-        eventCenter.on('node:mousemove', this.onNodeMouseMove);
+        eventCenter.on(EventType.NODE_MOUSEMOVE, this.onNodeMouseMove);
         // 全部渲染完成后，判断是否【主动触发一次折叠操作】
-        eventCenter.on('graph:rendered', this.graphRendered);
+        eventCenter.on(EventType.GRAPH_RENDERED, this.graphRendered);
     };
     DynamicGroupNode.prototype.componentWillUnmount = function () {
         _super.prototype.componentWillUnmount.call(this);
         var eventCenter = this.props.graphModel.eventCenter;
-        eventCenter.off('node:rotate', this.onNodeRotate);
-        eventCenter.off('node:resize', this.onNodeResize);
-        eventCenter.off('node:mousemove', this.onNodeMouseMove);
-        eventCenter.off('graph:rendered', this.graphRendered);
+        eventCenter.off(EventType.NODE_ROTATE, this.onNodeRotate);
+        eventCenter.off(EventType.NODE_RESIZE, this.onNodeResize);
+        eventCenter.off(EventType.NODE_MOUSEMOVE, this.onNodeMouseMove);
+        eventCenter.off(EventType.GRAPH_RENDERED, this.graphRendered);
     };
     /**
      * 获取分组内的节点
@@ -233,8 +235,8 @@ var DynamicGroupNode = /** @class */ (function (_super) {
     DynamicGroupNode.prototype.getOperateIcon = function () {
         var model = this.props.model;
         var x = model.x, y = model.y, width = model.width, height = model.height;
-        var sx = x - width / 2 + 10;
-        var sy = y - height / 2 + 10;
+        var sx = x - width / 2 + DG_OPERATE_INSET;
+        var sy = y - height / 2 + DG_OPERATE_INSET;
         if (!model.collapsible)
             return null;
         var iconPath = (model === null || model === void 0 ? void 0 : model.isCollapsed)
@@ -249,8 +251,8 @@ var DynamicGroupNode = /** @class */ (function (_super) {
         });
         return h('g', {}, [
             h('rect', {
-                height: 12,
-                width: 14,
+                height: DG_OPERATE_BTN_HEIGHT,
+                width: DG_OPERATE_BTN_WIDTH,
                 rx: 2,
                 ry: 2,
                 strokeWidth: 1,
@@ -259,20 +261,51 @@ var DynamicGroupNode = /** @class */ (function (_super) {
                 cursor: 'pointer',
                 x: sx,
                 y: sy,
-                onClick: function () {
+                onPointerDown: function (e) {
+                    e.stopPropagation();
+                },
+                onClick: function (e) {
+                    e.stopPropagation();
                     // DONE: 抛出折叠或展开事件 -> 在 toggleCollapse 方法中抛出
                     model.toggleCollapse(!model.isCollapsed);
                 },
+                onDblClick: function (e) {
+                    e.stopPropagation();
+                },
             }),
             operateIcon,
         ]);
     };
+    DynamicGroupNode.prototype.getText = function () {
+        var _a;
+        var _b = this.props, model = _b.model, graphModel = _b.graphModel;
+        var editConfigModel = graphModel.editConfigModel;
+        if (editConfigModel.nodeTextMode !== TextMode.TEXT)
+            return null;
+        if (model.state === ElementState.TEXT_EDIT)
+            return null;
+        var textShape = null;
+        if (model.text) {
+            var draggable = false;
+            if (editConfigModel.nodeTextDraggable && model.text.draggable) {
+                draggable = true;
+            }
+            textShape = h(DynamicGroupText, {
+                editable: editConfigModel.nodeTextEdit && ((_a = model.text.editable) !== null && _a !== void 0 ? _a : true),
+                model: model,
+                graphModel: graphModel,
+                draggable: draggable,
+            });
+        }
+        var operateIcon = this.getOperateIcon();
+        if (!textShape && !operateIcon)
+            return null;
+        // 文本在 getShape 之后渲染；overflow 为 autoWrap/ellipsis 时使用 foreignObject，
+        // 会盖住同区域的折叠按钮。将 operateIcon 叠在文本之上以保证可点击（#1099）。
+        return h('g', {}, textShape, operateIcon);
+    };
     DynamicGroupNode.prototype.getShape = function () {
-        return h('g', {}, [
-            this.getAppendAreaShape(),
-            _super.prototype.getShape.call(this),
-            this.getOperateIcon(),
-        ]);
+        return h('g', {}, [this.getAppendAreaShape(), _super.prototype.getShape.call(this)]);
     };
     return DynamicGroupNode;
 }(RectNode));

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

@@ -0,0 +1,8 @@
+import { createElement as h } from 'preact/compat';
+import { BaseText, IBaseTextProps, IBaseTextState } from '@logicflow/core';
+type DynamicGroupTextProps = IBaseTextProps;
+export declare class DynamicGroupText extends BaseText<DynamicGroupTextProps, IBaseTextState> {
+    getShape(): h.JSX.Element | null;
+    private renderTitleHtmlText;
+}
+export default DynamicGroupText;

package/es/dynamic-group/titleText.js

@@ -0,0 +1,84 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import { jsx as _jsx } from "preact/jsx-runtime";
+import classNames from 'classnames';
+import { BaseText } from '@logicflow/core';
+import { formatWrapPaddingCss, getTitleForeignObjectRect, isHtmlTextOverflow, parseWrapPadding, } from './utils';
+var DynamicGroupText = /** @class */ (function (_super) {
+    __extends(DynamicGroupText, _super);
+    function DynamicGroupText() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    DynamicGroupText.prototype.getShape = function () {
+        var _a;
+        var model = this.props.model;
+        var value = model.text.value;
+        var style = model.getTextStyle();
+        var overflowMode = (_a = style.overflowMode) !== null && _a !== void 0 ? _a : 'default';
+        if (isHtmlTextOverflow(overflowMode)) {
+            return this.renderTitleHtmlText(value, style);
+        }
+        return _super.prototype.getShape.call(this);
+    };
+    DynamicGroupText.prototype.renderTitleHtmlText = function (value, style) {
+        var _a;
+        var _b = this.props, model = _b.model, graphModel = _b.graphModel;
+        var _c = model.text, editable = _c.editable, draggable = _c.draggable;
+        var editConfigModel = graphModel.editConfigModel;
+        var overflowMode = style.overflowMode;
+        var fontSize = Number((_a = style.fontSize) !== null && _a !== void 0 ? _a : 12);
+        var rawWrapPadding = style.wrapPadding;
+        var pad = parseWrapPadding(rawWrapPadding);
+        var wrapPadding = formatWrapPaddingCss(rawWrapPadding);
+        var _d = getTitleForeignObjectRect({
+            x: model.x,
+            y: model.y,
+            width: model.width,
+            height: model.height,
+            overflowMode: overflowMode,
+            fontSize: fontSize,
+            pad: pad,
+        }), foX = _d.foX, foY = _d.foY, foWidth = _d.foWidth, foHeight = _d.foHeight;
+        var isEllipsis = overflowMode === 'ellipsis';
+        var rows = String(value).split(/[\r\n]/g);
+        var isDraggable = editConfigModel.nodeTextDraggable || draggable;
+        return (_jsx("g", { className: classNames({
+                'lf-element-text': editable,
+                'lf-text-draggable': !editable && isDraggable,
+                'lf-text-disabled': !editable && !isDraggable,
+            }), children: _jsx("foreignObject", { width: foWidth, height: foHeight, x: foX, y: foY, style: { overflow: 'visible', textAlign: 'left' }, children: _jsx("div", { className: "lf-node-text-auto-wrap lf-dg-title-html", style: {
+                        boxSizing: 'border-box',
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        justifyContent: 'stretch',
+                        width: foWidth,
+                        height: foHeight,
+                        padding: wrapPadding,
+                    }, children: _jsx("div", { className: isEllipsis
+                            ? 'lf-node-text-ellipsis-content'
+                            : 'lf-node-text-auto-wrap-content', title: isEllipsis ? rows.join('') : '', style: {
+                            textAlign: style.textAlign,
+                            fontSize: fontSize,
+                            lineHeight: style.lineHeight,
+                            fontFamily: style.fontFamily,
+                            color: style.fill,
+                            width: '100%',
+                        }, children: rows.map(function (row) { return (_jsx("div", { className: "lf-node-text--auto-wrap-inner", children: row })); }) }) }) }) }));
+    };
+    return DynamicGroupText;
+}(BaseText));
+export { DynamicGroupText };
+export default DynamicGroupText;