@flowgram.ai/group-plugin 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,497 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+import { FlowGroupController as FlowGroupController5 } from "@flowgram.ai/document";
+
+// src/groups-layer.tsx
+import React3 from "react";
+import { inject, injectable } from "inversify";
+import { FlowRendererRegistry } from "@flowgram.ai/renderer";
+import {
+  FlowDocument as FlowDocument2,
+  FlowDocumentTransformerEntity,
+  FlowGroupService,
+  FlowNodeEntity as FlowNodeEntity2,
+  FlowNodeRenderData as FlowNodeRenderData2,
+  FlowNodeTransformData
+} from "@flowgram.ai/document";
+import { Layer, observeEntity, observeEntityDatas } from "@flowgram.ai/core";
+import { domUtils } from "@flowgram.ai/utils";
+
+// src/constant.ts
+var GroupRenderer = /* @__PURE__ */ ((GroupRenderer2) => {
+  GroupRenderer2["GroupRender"] = "group_render";
+  GroupRenderer2["GroupBox"] = "group_box";
+  return GroupRenderer2;
+})(GroupRenderer || {});
+var PositionConfig = {
+  paddingWithNote: 50,
+  // note 留白大小
+  padding: 10,
+  // 无 label 的 padding
+  paddingWithAddLabel: 20,
+  // 有 label 的padding，如要放添加按钮
+  headerHeight: 20
+  // 基础头部高度
+};
+var GroupPluginRegister = /* @__PURE__ */ ((GroupPluginRegister2) => {
+  GroupPluginRegister2["GroupNode"] = "registerGroupNode";
+  GroupPluginRegister2["Render"] = "registerRender";
+  GroupPluginRegister2["Layer"] = "registerLayer";
+  GroupPluginRegister2["CleanGroups"] = "registerCleanGroups";
+  return GroupPluginRegister2;
+})(GroupPluginRegister || {});
+
+// src/components/group-render.tsx
+import React, { useCallback, useEffect, useState } from "react";
+import { FlowGroupController, FlowNodeRenderData } from "@flowgram.ai/document";
+import { FlowDocument } from "@flowgram.ai/document";
+import { useEntityFromContext, useService } from "@flowgram.ai/core";
+import { delay } from "@flowgram.ai/utils";
+function useCurrentDomNode() {
+  const entity = useEntityFromContext();
+  const renderData = entity.getData(FlowNodeRenderData);
+  return renderData.node;
+}
+var GroupRender = (props) => {
+  const { groupNode, GroupNode, GroupBoxHeader } = props;
+  const container = useCurrentDomNode();
+  const document = useService(FlowDocument);
+  const groupController = FlowGroupController.create(groupNode);
+  const [key, setKey] = useState(0);
+  const [rendering, setRendering] = useState(true);
+  const [collapsedCache, setCollapsedCache] = useState(groupController?.collapsed ?? false);
+  const rerender = useCallback(async () => {
+    setRendering(true);
+    setKey(key + 1);
+    await delay(50);
+    setKey(key + 1);
+    setRendering(false);
+  }, [key]);
+  useEffect(() => {
+    const disposer = document.renderTree.onTreeChange(() => {
+      if (groupController?.collapsed !== collapsedCache) {
+        setCollapsedCache(groupController?.collapsed ?? false);
+        rerender();
+      }
+    });
+    return () => {
+      disposer.dispose();
+    };
+  }, [key]);
+  useEffect(() => {
+    if (!groupController || groupController.collapsed) {
+      return;
+    }
+    rerender();
+  }, []);
+  if (!groupController) {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  }
+  const groupNodeRender = /* @__PURE__ */ React.createElement(GroupNode, { key, groupNode, groupController });
+  const groupBoxHeader = /* @__PURE__ */ React.createElement(GroupBoxHeader, { key, groupController, groupNode });
+  if (groupController.collapsed) {
+    const positionStyle = {
+      display: "block",
+      zIndex: "0",
+      width: "auto",
+      height: "auto"
+    };
+    Object.assign(container.style, positionStyle);
+    return groupNodeRender;
+  } else if (!rendering) {
+    const bounds = groupController.bounds;
+    const positionStyle = {
+      width: `${bounds.width}px`
+    };
+    Object.assign(container.style, positionStyle);
+    return groupBoxHeader;
+  } else {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  }
+};
+
+// src/components/group-box.tsx
+import { useEffect as useEffect3 } from "react";
+import React2 from "react";
+import { FlowGroupController as FlowGroupController2 } from "@flowgram.ai/document";
+
+// src/components/hooks.ts
+import { useEffect as useEffect2, useRef, useState as useState2 } from "react";
+var useHover = () => {
+  const ref = useRef(null);
+  const [hover, setHover] = useState2(false);
+  const checkMouseOver = (event) => {
+    if (!ref.current) {
+      return;
+    }
+    const { left, top, right, bottom } = ref.current.getBoundingClientRect();
+    const isOver = event.clientX >= left && event.clientX <= right && event.clientY >= top && event.clientY <= bottom;
+    setHover(isOver);
+  };
+  useEffect2(() => {
+    window.addEventListener("mousemove", checkMouseOver);
+    return () => {
+      window.removeEventListener("mousemove", checkMouseOver);
+    };
+  }, []);
+  return {
+    hover,
+    ref
+  };
+};
+
+// src/components/group-box.tsx
+var GroupBox = (props) => {
+  const { groupNode } = props;
+  const groupController = FlowGroupController2.create(groupNode);
+  const bounds = groupController.bounds;
+  const { hover, ref } = useHover();
+  const positionStyle = {
+    position: "absolute",
+    left: bounds.left,
+    top: bounds.top,
+    width: bounds.width,
+    height: bounds.height
+  };
+  const defaultBackgroundStyle = {
+    borderRadius: 10,
+    zIndex: -1,
+    outline: `${hover ? 3 : 1}px solid rgb(97, 69, 211)`,
+    backgroundColor: "rgb(236 233 247)"
+  };
+  const backgroundStyle = props.backgroundStyle ? props.backgroundStyle(groupController) : defaultBackgroundStyle;
+  useEffect3(() => {
+    groupController.hovered = hover;
+  }, [hover]);
+  if (!groupController || groupController.collapsed) {
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null);
+  }
+  return /* @__PURE__ */ React2.createElement("div", { className: "gedit-group-box", "data-group-id": groupNode.id }, /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      className: "gedit-group-background",
+      ref,
+      style: {
+        ...positionStyle,
+        ...backgroundStyle
+      }
+    }
+  ));
+};
+
+// src/groups-layer.tsx
+var GroupsLayer = class extends Layer {
+  constructor() {
+    super();
+    this.className = "gedit-groups-layer";
+    this.node = domUtils.createDivWithClass(this.className);
+    this.node.style.zIndex = "0";
+  }
+  /** 缩放 */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  render() {
+    if (this.documentTransformer.loading) return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
+    this.documentTransformer.refresh();
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, this.renderGroups());
+  }
+  /** 渲染分组 */
+  renderGroups() {
+    const Box = this.renderer || GroupBox;
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, this.groups.map((group) => /* @__PURE__ */ React3.createElement(
+      Box,
+      {
+        key: group.groupNode.id,
+        groupNode: group.groupNode,
+        backgroundStyle: this.options.groupBoxStyle
+      }
+    )));
+  }
+  /** 所有分组 */
+  get groups() {
+    return this.groupService.getAllGroups();
+  }
+  get renderer() {
+    return this.rendererRegistry.tryToGetRendererComponent("group_box" /* GroupBox */)?.renderer;
+  }
+};
+__decorateClass([
+  inject(FlowDocument2)
+], GroupsLayer.prototype, "document", 2);
+__decorateClass([
+  inject(FlowRendererRegistry)
+], GroupsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject(FlowGroupService)
+], GroupsLayer.prototype, "groupService", 2);
+__decorateClass([
+  observeEntity(FlowDocumentTransformerEntity)
+], GroupsLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity2, FlowNodeRenderData2)
+], GroupsLayer.prototype, "renderStates", 2);
+__decorateClass([
+  observeEntityDatas(FlowNodeEntity2, FlowNodeTransformData)
+], GroupsLayer.prototype, "transforms", 2);
+GroupsLayer = __decorateClass([
+  injectable()
+], GroupsLayer);
+
+// src/create-group-plugin.tsx
+import { definePluginCreator } from "@flowgram.ai/core";
+
+// src/registers/register-render.tsx
+import React4 from "react";
+import { FlowRendererRegistry as FlowRendererRegistry2 } from "@flowgram.ai/renderer";
+var registerRender = (ctx, opts) => {
+  const rendererRegistry = ctx.get(FlowRendererRegistry2);
+  const renderer = (props) => /* @__PURE__ */ React4.createElement(
+    GroupRender,
+    {
+      groupNode: props.node,
+      GroupNode: opts.components.GroupNode,
+      GroupBoxHeader: opts.components.GroupBoxHeader
+    }
+  );
+  rendererRegistry.registerReactComponent("group_render" /* GroupRender */, renderer);
+};
+
+// src/registers/register-layer.ts
+var registerLayer = (ctx, opts) => {
+  ctx.playground.registerLayer(GroupsLayer, opts);
+};
+
+// src/registers/register-group-node.ts
+import { FlowDocument as FlowDocument3 } from "@flowgram.ai/document";
+
+// src/group-node-register.tsx
+import { Point } from "@flowgram.ai/utils";
+import {
+  FlowGroupController as FlowGroupController4,
+  FlowNodeBaseType,
+  FlowTransitionLabelEnum,
+  FlowTransitionLineEnum
+} from "@flowgram.ai/document";
+var GroupRegister = {
+  type: FlowNodeBaseType.GROUP,
+  meta: {
+    exportJSON: true,
+    renderKey: "group_render" /* GroupRender */,
+    positionConfig: PositionConfig,
+    padding: (transform) => {
+      const groupController = FlowGroupController4.create(transform.entity);
+      if (!groupController || groupController.collapsed || groupController.nodes.length === 0) {
+        return {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0
+        };
+      }
+      if (transform.entity.isVertical) {
+        return {
+          top: PositionConfig.paddingWithNote,
+          bottom: PositionConfig.paddingWithAddLabel,
+          left: PositionConfig.padding,
+          right: PositionConfig.padding
+        };
+      }
+      return {
+        top: PositionConfig.paddingWithNote,
+        bottom: PositionConfig.padding,
+        left: PositionConfig.padding,
+        right: PositionConfig.paddingWithAddLabel
+      };
+    }
+  },
+  getLines(transition) {
+    const { transform } = transition;
+    const lines = [];
+    if (transform.firstChild) {
+      lines.push({
+        type: FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: transform.inputPoint,
+        to: transform.firstChild.inputPoint
+      });
+    }
+    if (transform.next) {
+      lines.push({
+        type: FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: transform.outputPoint,
+        to: transform.next.inputPoint
+      });
+    } else {
+      lines.push({
+        type: FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: transform.outputPoint,
+        to: transform.parent.outputPoint
+      });
+    }
+    return lines;
+  },
+  getDelta(transform) {
+    const groupController = FlowGroupController4.create(transform.entity);
+    if (!groupController || groupController.collapsed) {
+      return;
+    }
+    if (transform.entity.isVertical) {
+      return {
+        x: 0,
+        y: PositionConfig.paddingWithNote
+      };
+    }
+    return {
+      x: PositionConfig.padding,
+      y: 0
+    };
+  },
+  getInputPoint(transform) {
+    const child = transform.firstChild;
+    if (!child) return transform.defaultInputPoint;
+    if (transform.entity.isVertical) {
+      return {
+        x: child.inputPoint.x,
+        y: transform.bounds.topCenter.y
+      };
+    }
+    return {
+      x: transform.bounds.leftCenter.x,
+      y: child.inputPoint.y
+    };
+  },
+  getOutputPoint(transform) {
+    const child = transform.lastChild;
+    if (!child) return transform.defaultOutputPoint;
+    if (transform.entity.isVertical) {
+      return {
+        x: child.outputPoint.x,
+        y: child.outputPoint.y + PositionConfig.paddingWithAddLabel / 2
+      };
+    }
+    return {
+      x: child.outputPoint.x + PositionConfig.paddingWithAddLabel / 2,
+      y: child.outputPoint.y
+    };
+  },
+  getLabels(transition) {
+    const { transform } = transition;
+    if (transform.next) {
+      if (transform.entity.isVertical) {
+        return [
+          {
+            offset: Point.getMiddlePoint(
+              Point.move(transform.outputPoint, {
+                x: 0,
+                y: PositionConfig.paddingWithAddLabel / 2
+              }),
+              transform.next.inputPoint
+            ),
+            type: FlowTransitionLabelEnum.ADDER_LABEL
+          }
+        ];
+      }
+      return [
+        {
+          offset: Point.getMiddlePoint(
+            Point.move(transform.outputPoint, { x: PositionConfig.paddingWithAddLabel / 2, y: 0 }),
+            transform.next.inputPoint
+          ),
+          type: FlowTransitionLabelEnum.ADDER_LABEL
+        }
+      ];
+    }
+    return [
+      {
+        offset: transform.parent.outputPoint,
+        type: FlowTransitionLabelEnum.ADDER_LABEL
+      }
+    ];
+  },
+  getOriginDeltaY(transform) {
+    const { children } = transform;
+    if (children.length === 0) {
+      return -transform.size.height * transform.origin.y;
+    }
+    return -transform.size.height * transform.origin.y - PositionConfig.paddingWithNote;
+  }
+};
+
+// src/registers/register-group-node.ts
+var registerGroupNode = (ctx) => {
+  const document = ctx.get(FlowDocument3);
+  document.registerFlowNodes(GroupRegister);
+};
+
+// src/registers/register-clean-groups.ts
+import { FlowDocument as FlowDocument4 } from "@flowgram.ai/document";
+import { FlowGroupService as FlowGroupService2 } from "@flowgram.ai/document";
+var registerCleanGroups = (ctx, opts) => {
+  const groupService = ctx.get(FlowGroupService2);
+  const document = ctx.get(FlowDocument4);
+  const clearInvalidGroups = () => {
+    groupService.getAllGroups().forEach((group) => {
+      if (group?.nodes.length !== 0) {
+        return;
+      }
+      if (!group.groupNode.pre) {
+        return;
+      }
+      groupService.deleteGroup(group.groupNode);
+    });
+  };
+  document.originTree.onTreeChange(() => {
+    setTimeout(() => {
+      clearInvalidGroups();
+    }, 0);
+  });
+};
+
+// src/registers/index.ts
+var groupRegisters = {
+  ["registerGroupNode" /* GroupNode */]: registerGroupNode,
+  ["registerRender" /* Render */]: registerRender,
+  ["registerLayer" /* Layer */]: registerLayer,
+  ["registerCleanGroups" /* CleanGroups */]: registerCleanGroups
+};
+
+// src/create-group-plugin.tsx
+var createGroupPlugin = definePluginCreator({
+  onInit: (ctx, opts) => {
+    const { registers: registerConfs = {} } = opts;
+    Object.entries(groupRegisters).forEach(([key, register]) => {
+      const registerName = key;
+      const registerConf = registerConfs[registerName];
+      if (registerConf === false) {
+        return;
+      }
+      if (typeof registerConf === "function") {
+        registerConf(ctx, opts);
+        return;
+      }
+      register(ctx, opts);
+    });
+  }
+});
+export {
+  FlowGroupController5 as FlowGroupController,
+  GroupBox,
+  GroupPluginRegister,
+  GroupRegister,
+  GroupRender,
+  GroupRenderer,
+  GroupsLayer,
+  PositionConfig,
+  createGroupPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/index.ts","../../src/groups-layer.tsx","../../src/constant.ts","../../src/components/group-render.tsx","../../src/components/group-box.tsx","../../src/components/hooks.ts","../../src/create-group-plugin.tsx","../../src/registers/register-render.tsx","../../src/registers/register-layer.ts","../../src/registers/register-group-node.ts","../../src/group-node-register.tsx","../../src/registers/register-clean-groups.ts","../../src/registers/index.ts"],"sourcesContent":["export { FlowGroupController } from '@flowgram.ai/document';\nexport * from './groups-layer';\nexport * from './create-group-plugin';\nexport * from './type';\nexport * from './constant';\nexport * from './group-node-register';\nexport * from './components';\n","import React from 'react';\n\nimport { inject, injectable } from 'inversify';\nimport { FlowRendererRegistry } from '@flowgram.ai/renderer';\nimport {\n  FlowDocument,\n  FlowDocumentTransformerEntity,\n  FlowGroupController,\n  FlowGroupService,\n  FlowNodeEntity,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n} from '@flowgram.ai/document';\nimport { Layer, observeEntity, observeEntityDatas } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\nimport { GroupsLayerOptions, IGroupBox } from './type';\nimport { GroupRenderer } from './constant';\nimport { GroupBox } from './components';\n\n@injectable()\nexport class GroupsLayer extends Layer<GroupsLayerOptions> {\n  public readonly node: HTMLElement;\n\n  @inject(FlowDocument) protected document: FlowDocument;\n\n  @inject(FlowRendererRegistry)\n  protected readonly rendererRegistry: FlowRendererRegistry;\n\n  @inject(FlowGroupService)\n  protected readonly groupService: FlowGroupService;\n\n  @observeEntity(FlowDocumentTransformerEntity)\n  readonly documentTransformer: FlowDocumentTransformerEntity;\n\n  @observeEntityDatas(FlowNodeEntity, FlowNodeRenderData)\n  renderStates: FlowNodeRenderData[];\n\n  @observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)\n  transforms: FlowNodeTransformData[];\n\n  private readonly className = 'gedit-groups-layer';\n\n  constructor() {\n    super();\n    this.node = domUtils.createDivWithClass(this.className);\n    this.node.style.zIndex = '0';\n  }\n\n  /** 缩放 */\n  public onZoom(scale: number): void {\n    this.node!.style.transform = `scale(${scale})`;\n  }\n\n  public render(): JSX.Element {\n    if (this.documentTransformer.loading) return <></>;\n    this.documentTransformer.refresh();\n\n    return <>{this.renderGroups()}</>;\n  }\n\n  /** 渲染分组 */\n  protected renderGroups(): JSX.Element {\n    const Box = this.renderer || GroupBox;\n    return (\n      <>\n        {this.groups.map(group => (\n          <Box\n            key={group.groupNode.id}\n            groupNode={group.groupNode}\n            backgroundStyle={this.options.groupBoxStyle}\n          />\n        ))}\n      </>\n    );\n  }\n\n  /** 所有分组 */\n  protected get groups(): FlowGroupController[] {\n    return this.groupService.getAllGroups();\n  }\n\n  protected get renderer(): IGroupBox {\n    return this.rendererRegistry.tryToGetRendererComponent(GroupRenderer.GroupBox)\n      ?.renderer as IGroupBox;\n  }\n}\n","export enum GroupRenderer {\n  GroupRender = 'group_render',\n  GroupBox = 'group_box',\n}\n\nexport const PositionConfig = {\n  paddingWithNote: 50, // note 留白大小\n  padding: 10, // 无 label 的 padding\n  paddingWithAddLabel: 20, // 有 label 的padding，如要放添加按钮\n  headerHeight: 20, // 基础头部高度\n};\n\nexport enum GroupPluginRegister {\n  GroupNode = 'registerGroupNode',\n  Render = 'registerRender',\n  Layer = 'registerLayer',\n  CleanGroups = 'registerCleanGroups',\n}\n","/* eslint-disable react/prop-types */\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { FlowGroupController, FlowNodeEntity, FlowNodeRenderData } from '@flowgram.ai/document';\nimport { FlowDocument } from '@flowgram.ai/document';\nimport { useEntityFromContext, useService } from '@flowgram.ai/core';\nimport { delay, Rectangle } from '@flowgram.ai/utils';\n\nimport { IGroupRender } from '../type';\n\nfunction useCurrentDomNode(): HTMLDivElement {\n  const entity = useEntityFromContext<FlowNodeEntity>();\n  const renderData = entity.getData<FlowNodeRenderData>(FlowNodeRenderData);\n  return renderData.node;\n}\n\nexport const GroupRender: IGroupRender = props => {\n  const { groupNode, GroupNode, GroupBoxHeader } = props;\n  const container = useCurrentDomNode();\n  const document = useService<FlowDocument>(FlowDocument);\n  const groupController = FlowGroupController.create(groupNode);\n\n  const [key, setKey] = useState(0);\n  const [rendering, setRendering] = useState(true);\n  const [collapsedCache, setCollapsedCache] = useState(groupController?.collapsed ?? false);\n\n  const rerender = useCallback(async () => {\n    setRendering(true);\n    setKey(key + 1);\n    // 边框bounds计算会有延迟\n    await delay(50);\n    setKey(key + 1);\n    setRendering(false);\n  }, [key]);\n\n  // 监听 collapsed 变化触发重渲染\n  useEffect(() => {\n    const disposer = document.renderTree.onTreeChange(() => {\n      if (groupController?.collapsed !== collapsedCache) {\n        setCollapsedCache(groupController?.collapsed ?? false);\n        rerender();\n      }\n    });\n    return () => {\n      disposer.dispose();\n    };\n  }, [key]);\n\n  // 首次渲染时如果分组是展开状态，此时边框bounds计算会有延迟，需要强制重新渲染\n  useEffect(() => {\n    if (!groupController || groupController.collapsed) {\n      return;\n    }\n    rerender();\n  }, []);\n\n  if (!groupController) {\n    return <></>;\n  }\n\n  const groupNodeRender = (\n    <GroupNode key={key} groupNode={groupNode} groupController={groupController} />\n  );\n  const groupBoxHeader = (\n    <GroupBoxHeader key={key} groupController={groupController} groupNode={groupNode} />\n  );\n\n  if (groupController.collapsed) {\n    const positionStyle: Partial<CSSStyleDeclaration> = {\n      display: 'block',\n      zIndex: '0',\n      width: 'auto',\n      height: 'auto',\n    };\n    Object.assign(container.style, positionStyle);\n    return groupNodeRender;\n  } else if (!rendering) {\n    const bounds: Rectangle = groupController.bounds;\n    const positionStyle: Partial<CSSStyleDeclaration> = {\n      width: `${bounds.width}px`,\n    };\n    Object.assign(container.style, positionStyle);\n    return groupBoxHeader;\n  } else {\n    return <></>;\n  }\n};\n","/* eslint-disable react/prop-types */\nimport { useEffect, type CSSProperties } from 'react';\nimport React from 'react';\n\nimport { FlowGroupController } from '@flowgram.ai/document';\nimport type { Rectangle } from '@flowgram.ai/utils';\n\nimport { IGroupBox } from '../type';\nimport { useHover } from './hooks';\n\nexport const GroupBox: IGroupBox = props => {\n  const { groupNode } = props;\n  const groupController = FlowGroupController.create(groupNode)!;\n  const bounds: Rectangle = groupController.bounds;\n  const { hover, ref } = useHover();\n\n  const positionStyle: CSSProperties = {\n    position: 'absolute',\n    left: bounds.left,\n    top: bounds.top,\n    width: bounds.width,\n    height: bounds.height,\n  };\n\n  const defaultBackgroundStyle: CSSProperties = {\n    borderRadius: 10,\n    zIndex: -1,\n    outline: `${hover ? 3 : 1}px solid rgb(97, 69, 211)`,\n    backgroundColor: 'rgb(236 233 247)',\n  };\n\n  const backgroundStyle = props.backgroundStyle\n    ? props.backgroundStyle(groupController)\n    : defaultBackgroundStyle;\n\n  useEffect(() => {\n    groupController.hovered = hover;\n  }, [hover]);\n\n  if (!groupController || groupController.collapsed) {\n    return <></>;\n  }\n\n  return (\n    <div className=\"gedit-group-box\" data-group-id={groupNode.id}>\n      <div\n        className=\"gedit-group-background\"\n        ref={ref}\n        style={{\n          ...positionStyle,\n          ...backgroundStyle,\n        }}\n      />\n    </div>\n  );\n};\n","import { useEffect, useRef, useState } from 'react';\n\nexport const useHover = () => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [hover, setHover] = useState(false);\n\n  const checkMouseOver = (event: MouseEvent) => {\n    if (!ref.current) {\n      return;\n    }\n    const { left, top, right, bottom } = ref.current.getBoundingClientRect();\n    const isOver =\n      event.clientX >= left &&\n      event.clientX <= right &&\n      event.clientY >= top &&\n      event.clientY <= bottom;\n\n    setHover(isOver);\n  };\n\n  useEffect(() => {\n    window.addEventListener('mousemove', checkMouseOver);\n\n    return () => {\n      window.removeEventListener('mousemove', checkMouseOver);\n    };\n  }, []);\n\n  return {\n    hover,\n    ref,\n  };\n};\n","import { definePluginCreator, PluginContext } from '@flowgram.ai/core';\n\nimport { CreateGroupPluginOptions } from './type';\nimport { groupRegisters } from './registers';\nimport { GroupPluginRegister } from './constant';\n\n/**\n * 分组插件\n */\nexport const createGroupPlugin = definePluginCreator<CreateGroupPluginOptions>({\n  onInit: (ctx: PluginContext, opts: CreateGroupPluginOptions) => {\n    const { registers: registerConfs = {} } = opts;\n    Object.entries(groupRegisters).forEach(([key, register]) => {\n      const registerName = key as GroupPluginRegister;\n      const registerConf = registerConfs[registerName];\n      if (registerConf === false) {\n        return;\n      }\n      if (typeof registerConf === 'function') {\n        registerConf(ctx, opts);\n        return;\n      }\n      register(ctx, opts);\n    });\n  },\n});\n","import React, { FC } from 'react';\n\nimport { FlowRendererRegistry } from '@flowgram.ai/renderer';\nimport { FlowNodeEntity } from '@flowgram.ai/document';\n\nimport { IGroupPluginRegister } from '../type';\nimport { GroupRenderer } from '../constant';\nimport { GroupRender } from '../components';\n\n/** 注册渲染组件 */\nexport const registerRender: IGroupPluginRegister = (ctx, opts) => {\n  const rendererRegistry = ctx.get<FlowRendererRegistry>(FlowRendererRegistry);\n  const renderer: FC<{ node: FlowNodeEntity }> = props => (\n    <GroupRender\n      groupNode={props.node}\n      GroupNode={opts.components!.GroupNode}\n      GroupBoxHeader={opts.components!.GroupBoxHeader}\n    />\n  );\n  rendererRegistry.registerReactComponent(GroupRenderer.GroupRender, renderer);\n};\n","import { IGroupPluginRegister } from '../type';\nimport { GroupsLayer } from '../groups-layer';\n\n/** 注册背景层 */\nexport const registerLayer: IGroupPluginRegister = (ctx, opts) => {\n  ctx.playground.registerLayer(GroupsLayer, opts);\n};\n","import { FlowDocument } from '@flowgram.ai/document';\n\nimport { IGroupPluginRegister } from '../type';\nimport { GroupRegister } from '../group-node-register';\n\n/** 注册分组节点 */\nexport const registerGroupNode: IGroupPluginRegister = ctx => {\n  const document = ctx.get<FlowDocument>(FlowDocument);\n  document.registerFlowNodes(GroupRegister);\n};\n","import { IPoint, PaddingSchema, Point } from '@flowgram.ai/utils';\nimport {\n  FlowGroupController,\n  FlowNodeBaseType,\n  FlowNodeRegistry,\n  FlowNodeTransformData,\n  FlowTransitionLabelEnum,\n  type FlowTransitionLine,\n  FlowTransitionLineEnum,\n} from '@flowgram.ai/document';\n\nimport { GroupRenderer, PositionConfig } from './constant';\n\nexport const GroupRegister: FlowNodeRegistry = {\n  type: FlowNodeBaseType.GROUP,\n  meta: {\n    exportJSON: true,\n    renderKey: GroupRenderer.GroupRender,\n    positionConfig: PositionConfig,\n    padding: (transform: FlowNodeTransformData): PaddingSchema => {\n      const groupController = FlowGroupController.create(transform.entity);\n      if (!groupController || groupController.collapsed || groupController.nodes.length === 0) {\n        return {\n          top: 0,\n          bottom: 0,\n          left: 0,\n          right: 0,\n        };\n      }\n      if (transform.entity.isVertical) {\n        return {\n          top: PositionConfig.paddingWithNote,\n          bottom: PositionConfig.paddingWithAddLabel,\n          left: PositionConfig.padding,\n          right: PositionConfig.padding,\n        };\n      }\n      return {\n        top: PositionConfig.paddingWithNote,\n        bottom: PositionConfig.padding,\n        left: PositionConfig.padding,\n        right: PositionConfig.paddingWithAddLabel,\n      };\n    },\n  },\n  getLines(transition) {\n    const { transform } = transition;\n    const lines: FlowTransitionLine[] = [];\n    if (transform.firstChild) {\n      lines.push({\n        type: FlowTransitionLineEnum.STRAIGHT_LINE,\n        from: transform.inputPoint,\n        to: transform.firstChild.inputPoint,\n      });\n    }\n    if (transform.next) {\n      lines.push({\n        type: FlowTransitionLineEnum.STRAIGHT_LINE,\n        from: transform.outputPoint,\n        to: transform.next.inputPoint,\n      });\n    } else {\n      lines.push({\n        type: FlowTransitionLineEnum.STRAIGHT_LINE,\n        from: transform.outputPoint,\n        to: transform.parent!.outputPoint,\n      });\n    }\n    return lines;\n  },\n  getDelta(transform: FlowNodeTransformData): IPoint | undefined {\n    const groupController = FlowGroupController.create(transform.entity);\n    if (!groupController || groupController.collapsed) {\n      return;\n    }\n    if (transform.entity.isVertical) {\n      return {\n        x: 0,\n        y: PositionConfig.paddingWithNote,\n      };\n    }\n    return {\n      x: PositionConfig.padding,\n      y: 0,\n    };\n  },\n  getInputPoint(transform: FlowNodeTransformData): IPoint {\n    const child = transform.firstChild;\n    if (!child) return transform.defaultInputPoint;\n    if (transform.entity.isVertical) {\n      return {\n        x: child.inputPoint.x,\n        y: transform.bounds.topCenter.y,\n      };\n    }\n    return {\n      x: transform.bounds.leftCenter.x,\n      y: child.inputPoint.y,\n    };\n  },\n  getOutputPoint(transform: FlowNodeTransformData): IPoint {\n    const child = transform.lastChild;\n    if (!child) return transform.defaultOutputPoint;\n    if (transform.entity.isVertical) {\n      return {\n        x: child.outputPoint.x,\n        y: child.outputPoint.y + PositionConfig.paddingWithAddLabel / 2,\n      };\n    }\n    return {\n      x: child.outputPoint.x + PositionConfig.paddingWithAddLabel / 2,\n      y: child.outputPoint.y,\n    };\n  },\n  getLabels(transition) {\n    const { transform } = transition;\n    if (transform.next) {\n      if (transform.entity.isVertical) {\n        return [\n          {\n            offset: Point.getMiddlePoint(\n              Point.move(transform.outputPoint, {\n                x: 0,\n                y: PositionConfig.paddingWithAddLabel / 2,\n              }),\n              transform.next.inputPoint\n            ),\n            type: FlowTransitionLabelEnum.ADDER_LABEL,\n          },\n        ];\n      }\n      return [\n        {\n          offset: Point.getMiddlePoint(\n            Point.move(transform.outputPoint, { x: PositionConfig.paddingWithAddLabel / 2, y: 0 }),\n            transform.next.inputPoint\n          ),\n          type: FlowTransitionLabelEnum.ADDER_LABEL,\n        },\n      ];\n    }\n    return [\n      {\n        offset: transform.parent!.outputPoint,\n        type: FlowTransitionLabelEnum.ADDER_LABEL,\n      },\n    ];\n  },\n  getOriginDeltaY(transform): number {\n    const { children } = transform;\n    if (children.length === 0) {\n      return -transform.size.height * transform.origin.y;\n    }\n    // 这里要加上 y 轴的偏移\n    return -transform.size.height * transform.origin.y - PositionConfig.paddingWithNote;\n  },\n};\n","import { FlowDocument } from '@flowgram.ai/document';\nimport { FlowGroupService } from '@flowgram.ai/document';\n\nimport { IGroupPluginRegister } from '../type';\n\n/** 注册清理分组逻辑 */\nexport const registerCleanGroups: IGroupPluginRegister = (ctx, opts) => {\n  const groupService = ctx.get<FlowGroupService>(FlowGroupService);\n  const document = ctx.get<FlowDocument>(FlowDocument);\n\n  const clearInvalidGroups = () => {\n    groupService.getAllGroups().forEach(group => {\n      if (group?.nodes.length !== 0) {\n        return;\n      }\n      if (!group.groupNode.pre) {\n        return;\n      }\n      groupService.deleteGroup(group.groupNode);\n    });\n  };\n\n  document.originTree.onTreeChange(() => {\n    setTimeout(() => {\n      clearInvalidGroups();\n    }, 0);\n  });\n};\n","import { IGroupPluginRegister } from '../type';\nimport { GroupPluginRegister } from '../constant';\nimport { registerRender } from './register-render';\nimport { registerLayer } from './register-layer';\nimport { registerGroupNode } from './register-group-node';\nimport { registerCleanGroups } from './register-clean-groups';\n\nexport const groupRegisters: Record<GroupPluginRegister, IGroupPluginRegister> = {\n  [GroupPluginRegister.GroupNode]: registerGroupNode,\n  [GroupPluginRegister.Render]: registerRender,\n  [GroupPluginRegister.Layer]: registerLayer,\n  [GroupPluginRegister.CleanGroups]: registerCleanGroups,\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,uBAAAA,4BAA2B;;;ACApC,OAAOC,YAAW;AAElB,SAAS,QAAQ,kBAAkB;AACnC,SAAS,4BAA4B;AACrC;AAAA,EACE,gBAAAC;AAAA,EACA;AAAA,EAEA;AAAA,EACA,kBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA;AAAA,OACK;AACP,SAAS,OAAO,eAAe,0BAA0B;AACzD,SAAS,gBAAgB;;;ACdlB,IAAK,gBAAL,kBAAKC,mBAAL;AACL,EAAAA,eAAA,iBAAc;AACd,EAAAA,eAAA,cAAW;AAFD,SAAAA;AAAA,GAAA;AAKL,IAAM,iBAAiB;AAAA,EAC5B,iBAAiB;AAAA;AAAA,EACjB,SAAS;AAAA;AAAA,EACT,qBAAqB;AAAA;AAAA,EACrB,cAAc;AAAA;AAChB;AAEO,IAAK,sBAAL,kBAAKC,yBAAL;AACL,EAAAA,qBAAA,eAAY;AACZ,EAAAA,qBAAA,YAAS;AACT,EAAAA,qBAAA,WAAQ;AACR,EAAAA,qBAAA,iBAAc;AAJJ,SAAAA;AAAA,GAAA;;;ACXZ,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,qBAAqC,0BAA0B;AACxE,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB,kBAAkB;AACjD,SAAS,aAAwB;AAIjC,SAAS,oBAAoC;AAC3C,QAAM,SAAS,qBAAqC;AACpD,QAAM,aAAa,OAAO,QAA4B,kBAAkB;AACxE,SAAO,WAAW;AACpB;AAEO,IAAM,cAA4B,WAAS;AAChD,QAAM,EAAE,WAAW,WAAW,eAAe,IAAI;AACjD,QAAM,YAAY,kBAAkB;AACpC,QAAM,WAAW,WAAyB,YAAY;AACtD,QAAM,kBAAkB,oBAAoB,OAAO,SAAS;AAE5D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAChC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,iBAAiB,aAAa,KAAK;AAExF,QAAM,WAAW,YAAY,YAAY;AACvC,iBAAa,IAAI;AACjB,WAAO,MAAM,CAAC;AAEd,UAAM,MAAM,EAAE;AACd,WAAO,MAAM,CAAC;AACd,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,GAAG,CAAC;AAGR,YAAU,MAAM;AACd,UAAM,WAAW,SAAS,WAAW,aAAa,MAAM;AACtD,UAAI,iBAAiB,cAAc,gBAAgB;AACjD,0BAAkB,iBAAiB,aAAa,KAAK;AACrD,iBAAS;AAAA,MACX;AAAA,IACF,CAAC;AACD,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAGR,YAAU,MAAM;AACd,QAAI,CAAC,mBAAmB,gBAAgB,WAAW;AACjD;AAAA,IACF;AACA,aAAS;AAAA,EACX,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,iBAAiB;AACpB,WAAO,wDAAE;AAAA,EACX;AAEA,QAAM,kBACJ,oCAAC,aAAU,KAAU,WAAsB,iBAAkC;AAE/E,QAAM,iBACJ,oCAAC,kBAAe,KAAU,iBAAkC,WAAsB;AAGpF,MAAI,gBAAgB,WAAW;AAC7B,UAAM,gBAA8C;AAAA,MAClD,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AACA,WAAO,OAAO,UAAU,OAAO,aAAa;AAC5C,WAAO;AAAA,EACT,WAAW,CAAC,WAAW;AACrB,UAAM,SAAoB,gBAAgB;AAC1C,UAAM,gBAA8C;AAAA,MAClD,OAAO,GAAG,OAAO,KAAK;AAAA,IACxB;AACA,WAAO,OAAO,UAAU,OAAO,aAAa;AAC5C,WAAO;AAAA,EACT,OAAO;AACL,WAAO,wDAAE;AAAA,EACX;AACF;;;ACrFA,SAAS,aAAAC,kBAAqC;AAC9C,OAAOC,YAAW;AAElB,SAAS,uBAAAC,4BAA2B;;;ACJpC,SAAS,aAAAC,YAAW,QAAQ,YAAAC,iBAAgB;AAErC,IAAM,WAAW,MAAM;AAC5B,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAIA,UAAS,KAAK;AAExC,QAAM,iBAAiB,CAAC,UAAsB;AAC5C,QAAI,CAAC,IAAI,SAAS;AAChB;AAAA,IACF;AACA,UAAM,EAAE,MAAM,KAAK,OAAO,OAAO,IAAI,IAAI,QAAQ,sBAAsB;AACvE,UAAM,SACJ,MAAM,WAAW,QACjB,MAAM,WAAW,SACjB,MAAM,WAAW,OACjB,MAAM,WAAW;AAEnB,aAAS,MAAM;AAAA,EACjB;AAEA,EAAAD,WAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,cAAc;AAEnD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,cAAc;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;ADtBO,IAAM,WAAsB,WAAS;AAC1C,QAAM,EAAE,UAAU,IAAI;AACtB,QAAM,kBAAkBE,qBAAoB,OAAO,SAAS;AAC5D,QAAM,SAAoB,gBAAgB;AAC1C,QAAM,EAAE,OAAO,IAAI,IAAI,SAAS;AAEhC,QAAM,gBAA+B;AAAA,IACnC,UAAU;AAAA,IACV,MAAM,OAAO;AAAA,IACb,KAAK,OAAO;AAAA,IACZ,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,EACjB;AAEA,QAAM,yBAAwC;AAAA,IAC5C,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,SAAS,GAAG,QAAQ,IAAI,CAAC;AAAA,IACzB,iBAAiB;AAAA,EACnB;AAEA,QAAM,kBAAkB,MAAM,kBAC1B,MAAM,gBAAgB,eAAe,IACrC;AAEJ,EAAAC,WAAU,MAAM;AACd,oBAAgB,UAAU;AAAA,EAC5B,GAAG,CAAC,KAAK,CAAC;AAEV,MAAI,CAAC,mBAAmB,gBAAgB,WAAW;AACjD,WAAO,gBAAAC,OAAA,cAAAA,OAAA,cAAE;AAAA,EACX;AAEA,SACE,gBAAAA,OAAA,cAAC,SAAI,WAAU,mBAAkB,iBAAe,UAAU,MACxD,gBAAAA,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA;AAAA,EACF,CACF;AAEJ;;;AHlCO,IAAM,cAAN,cAA0B,MAA0B;AAAA,EAsBzD,cAAc;AACZ,UAAM;AAHR,SAAiB,YAAY;AAI3B,SAAK,OAAO,SAAS,mBAAmB,KAAK,SAAS;AACtD,SAAK,KAAK,MAAM,SAAS;AAAA,EAC3B;AAAA;AAAA,EAGO,OAAO,OAAqB;AACjC,SAAK,KAAM,MAAM,YAAY,SAAS,KAAK;AAAA,EAC7C;AAAA,EAEO,SAAsB;AAC3B,QAAI,KAAK,oBAAoB,QAAS,QAAO,gBAAAC,OAAA,cAAAA,OAAA,cAAE;AAC/C,SAAK,oBAAoB,QAAQ;AAEjC,WAAO,gBAAAA,OAAA,cAAAA,OAAA,gBAAG,KAAK,aAAa,CAAE;AAAA,EAChC;AAAA;AAAA,EAGU,eAA4B;AACpC,UAAM,MAAM,KAAK,YAAY;AAC7B,WACE,gBAAAA,OAAA,cAAAA,OAAA,gBACG,KAAK,OAAO,IAAI,WACf,gBAAAA,OAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,MAAM,UAAU;AAAA,QACrB,WAAW,MAAM;AAAA,QACjB,iBAAiB,KAAK,QAAQ;AAAA;AAAA,IAChC,CACD,CACH;AAAA,EAEJ;AAAA;AAAA,EAGA,IAAc,SAAgC;AAC5C,WAAO,KAAK,aAAa,aAAa;AAAA,EACxC;AAAA,EAEA,IAAc,WAAsB;AAClC,WAAO,KAAK,iBAAiB,oDAAgD,GACzE;AAAA,EACN;AACF;AA9DkC;AAAA,EAA/B,OAAOC,aAAY;AAAA,GAHT,YAGqB;AAGb;AAAA,EADlB,OAAO,oBAAoB;AAAA,GALjB,YAMQ;AAGA;AAAA,EADlB,OAAO,gBAAgB;AAAA,GARb,YASQ;AAGV;AAAA,EADR,cAAc,6BAA6B;AAAA,GAXjC,YAYF;AAGT;AAAA,EADC,mBAAmBC,iBAAgBC,mBAAkB;AAAA,GAd3C,YAeX;AAGA;AAAA,EADC,mBAAmBD,iBAAgB,qBAAqB;AAAA,GAjB9C,YAkBX;AAlBW,cAAN;AAAA,EADN,WAAW;AAAA,GACC;;;AKrBb,SAAS,2BAA0C;;;ACAnD,OAAOE,YAAmB;AAE1B,SAAS,wBAAAC,6BAA4B;AAQ9B,IAAM,iBAAuC,CAAC,KAAK,SAAS;AACjE,QAAM,mBAAmB,IAAI,IAA0BC,qBAAoB;AAC3E,QAAM,WAAyC,WAC7C,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,WAAW,KAAK,WAAY;AAAA,MAC5B,gBAAgB,KAAK,WAAY;AAAA;AAAA,EACnC;AAEF,mBAAiB,yDAAkD,QAAQ;AAC7E;;;AChBO,IAAM,gBAAsC,CAAC,KAAK,SAAS;AAChE,MAAI,WAAW,cAAc,aAAa,IAAI;AAChD;;;ACNA,SAAS,gBAAAC,qBAAoB;;;ACA7B,SAAgC,aAAa;AAC7C;AAAA,EACE,uBAAAC;AAAA,EACA;AAAA,EAGA;AAAA,EAEA;AAAA,OACK;AAIA,IAAM,gBAAkC;AAAA,EAC7C,MAAM,iBAAiB;AAAA,EACvB,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA,gBAAgB;AAAA,IAChB,SAAS,CAAC,cAAoD;AAC5D,YAAM,kBAAkBC,qBAAoB,OAAO,UAAU,MAAM;AACnE,UAAI,CAAC,mBAAmB,gBAAgB,aAAa,gBAAgB,MAAM,WAAW,GAAG;AACvF,eAAO;AAAA,UACL,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,QACT;AAAA,MACF;AACA,UAAI,UAAU,OAAO,YAAY;AAC/B,eAAO;AAAA,UACL,KAAK,eAAe;AAAA,UACpB,QAAQ,eAAe;AAAA,UACvB,MAAM,eAAe;AAAA,UACrB,OAAO,eAAe;AAAA,QACxB;AAAA,MACF;AACA,aAAO;AAAA,QACL,KAAK,eAAe;AAAA,QACpB,QAAQ,eAAe;AAAA,QACvB,MAAM,eAAe;AAAA,QACrB,OAAO,eAAe;AAAA,MACxB;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS,YAAY;AACnB,UAAM,EAAE,UAAU,IAAI;AACtB,UAAM,QAA8B,CAAC;AACrC,QAAI,UAAU,YAAY;AACxB,YAAM,KAAK;AAAA,QACT,MAAM,uBAAuB;AAAA,QAC7B,MAAM,UAAU;AAAA,QAChB,IAAI,UAAU,WAAW;AAAA,MAC3B,CAAC;AAAA,IACH;AACA,QAAI,UAAU,MAAM;AAClB,YAAM,KAAK;AAAA,QACT,MAAM,uBAAuB;AAAA,QAC7B,MAAM,UAAU;AAAA,QAChB,IAAI,UAAU,KAAK;AAAA,MACrB,CAAC;AAAA,IACH,OAAO;AACL,YAAM,KAAK;AAAA,QACT,MAAM,uBAAuB;AAAA,QAC7B,MAAM,UAAU;AAAA,QAChB,IAAI,UAAU,OAAQ;AAAA,MACxB,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT;AAAA,EACA,SAAS,WAAsD;AAC7D,UAAM,kBAAkBA,qBAAoB,OAAO,UAAU,MAAM;AACnE,QAAI,CAAC,mBAAmB,gBAAgB,WAAW;AACjD;AAAA,IACF;AACA,QAAI,UAAU,OAAO,YAAY;AAC/B,aAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG,eAAe;AAAA,MACpB;AAAA,IACF;AACA,WAAO;AAAA,MACL,GAAG,eAAe;AAAA,MAClB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,cAAc,WAA0C;AACtD,UAAM,QAAQ,UAAU;AACxB,QAAI,CAAC,MAAO,QAAO,UAAU;AAC7B,QAAI,UAAU,OAAO,YAAY;AAC/B,aAAO;AAAA,QACL,GAAG,MAAM,WAAW;AAAA,QACpB,GAAG,UAAU,OAAO,UAAU;AAAA,MAChC;AAAA,IACF;AACA,WAAO;AAAA,MACL,GAAG,UAAU,OAAO,WAAW;AAAA,MAC/B,GAAG,MAAM,WAAW;AAAA,IACtB;AAAA,EACF;AAAA,EACA,eAAe,WAA0C;AACvD,UAAM,QAAQ,UAAU;AACxB,QAAI,CAAC,MAAO,QAAO,UAAU;AAC7B,QAAI,UAAU,OAAO,YAAY;AAC/B,aAAO;AAAA,QACL,GAAG,MAAM,YAAY;AAAA,QACrB,GAAG,MAAM,YAAY,IAAI,eAAe,sBAAsB;AAAA,MAChE;AAAA,IACF;AACA,WAAO;AAAA,MACL,GAAG,MAAM,YAAY,IAAI,eAAe,sBAAsB;AAAA,MAC9D,GAAG,MAAM,YAAY;AAAA,IACvB;AAAA,EACF;AAAA,EACA,UAAU,YAAY;AACpB,UAAM,EAAE,UAAU,IAAI;AACtB,QAAI,UAAU,MAAM;AAClB,UAAI,UAAU,OAAO,YAAY;AAC/B,eAAO;AAAA,UACL;AAAA,YACE,QAAQ,MAAM;AAAA,cACZ,MAAM,KAAK,UAAU,aAAa;AAAA,gBAChC,GAAG;AAAA,gBACH,GAAG,eAAe,sBAAsB;AAAA,cAC1C,CAAC;AAAA,cACD,UAAU,KAAK;AAAA,YACjB;AAAA,YACA,MAAM,wBAAwB;AAAA,UAChC;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,QACL;AAAA,UACE,QAAQ,MAAM;AAAA,YACZ,MAAM,KAAK,UAAU,aAAa,EAAE,GAAG,eAAe,sBAAsB,GAAG,GAAG,EAAE,CAAC;AAAA,YACrF,UAAU,KAAK;AAAA,UACjB;AAAA,UACA,MAAM,wBAAwB;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,MACL;AAAA,QACE,QAAQ,UAAU,OAAQ;AAAA,QAC1B,MAAM,wBAAwB;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAAA,EACA,gBAAgB,WAAmB;AACjC,UAAM,EAAE,SAAS,IAAI;AACrB,QAAI,SAAS,WAAW,GAAG;AACzB,aAAO,CAAC,UAAU,KAAK,SAAS,UAAU,OAAO;AAAA,IACnD;AAEA,WAAO,CAAC,UAAU,KAAK,SAAS,UAAU,OAAO,IAAI,eAAe;AAAA,EACtE;AACF;;;ADtJO,IAAM,oBAA0C,SAAO;AAC5D,QAAM,WAAW,IAAI,IAAkBC,aAAY;AACnD,WAAS,kBAAkB,aAAa;AAC1C;;;AETA,SAAS,gBAAAC,qBAAoB;AAC7B,SAAS,oBAAAC,yBAAwB;AAK1B,IAAM,sBAA4C,CAAC,KAAK,SAAS;AACtE,QAAM,eAAe,IAAI,IAAsBA,iBAAgB;AAC/D,QAAM,WAAW,IAAI,IAAkBD,aAAY;AAEnD,QAAM,qBAAqB,MAAM;AAC/B,iBAAa,aAAa,EAAE,QAAQ,WAAS;AAC3C,UAAI,OAAO,MAAM,WAAW,GAAG;AAC7B;AAAA,MACF;AACA,UAAI,CAAC,MAAM,UAAU,KAAK;AACxB;AAAA,MACF;AACA,mBAAa,YAAY,MAAM,SAAS;AAAA,IAC1C,CAAC;AAAA,EACH;AAEA,WAAS,WAAW,aAAa,MAAM;AACrC,eAAW,MAAM;AACf,yBAAmB;AAAA,IACrB,GAAG,CAAC;AAAA,EACN,CAAC;AACH;;;ACpBO,IAAM,iBAAoE;AAAA,EAC/E,oCAA8B,GAAG;AAAA,EACjC,8BAA2B,GAAG;AAAA,EAC9B,4BAA0B,GAAG;AAAA,EAC7B,wCAAgC,GAAG;AACrC;;;ANHO,IAAM,oBAAoB,oBAA8C;AAAA,EAC7E,QAAQ,CAAC,KAAoB,SAAmC;AAC9D,UAAM,EAAE,WAAW,gBAAgB,CAAC,EAAE,IAAI;AAC1C,WAAO,QAAQ,cAAc,EAAE,QAAQ,CAAC,CAAC,KAAK,QAAQ,MAAM;AAC1D,YAAM,eAAe;AACrB,YAAM,eAAe,cAAc,YAAY;AAC/C,UAAI,iBAAiB,OAAO;AAC1B;AAAA,MACF;AACA,UAAI,OAAO,iBAAiB,YAAY;AACtC,qBAAa,KAAK,IAAI;AACtB;AAAA,MACF;AACA,eAAS,KAAK,IAAI;AAAA,IACpB,CAAC;AAAA,EACH;AACF,CAAC;","names":["FlowGroupController","React","FlowDocument","FlowNodeEntity","FlowNodeRenderData","GroupRenderer","GroupPluginRegister","useEffect","React","FlowGroupController","useEffect","useState","FlowGroupController","useEffect","React","React","FlowDocument","FlowNodeEntity","FlowNodeRenderData","React","FlowRendererRegistry","FlowRendererRegistry","React","FlowDocument","FlowGroupController","FlowGroupController","FlowDocument","FlowDocument","FlowGroupService"]}

package/dist/index.d.mts

@@ -0,0 +1,87 @@
+import { FlowNodeEntity, FlowGroupController, FlowDocument, FlowGroupService, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowNodeTransformData, FlowNodeRegistry } from '@flowgram.ai/document';
+export { FlowGroupController } from '@flowgram.ai/document';
+import { FlowRendererRegistry } from '@flowgram.ai/renderer';
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { LayerOptions, PluginContext, Layer } from '@flowgram.ai/core';
+import { FC, CSSProperties } from 'react';
+
+declare enum GroupRenderer {
+    GroupRender = "group_render",
+    GroupBox = "group_box"
+}
+declare const PositionConfig: {
+    paddingWithNote: number;
+    padding: number;
+    paddingWithAddLabel: number;
+    headerHeight: number;
+};
+declare enum GroupPluginRegister {
+    GroupNode = "registerGroupNode",
+    Render = "registerRender",
+    Layer = "registerLayer",
+    CleanGroups = "registerCleanGroups"
+}
+
+type IGroupBox = FC<{
+    groupNode: FlowNodeEntity;
+    backgroundStyle?: (groupController: FlowGroupController) => CSSProperties;
+}>;
+type IGroupRender = FC<{
+    groupNode: FlowNodeEntity;
+    GroupNode: IGroupNode;
+    GroupBoxHeader: IGroupBoxHeader;
+}>;
+type IGroupNode = FC<{
+    groupNode: FlowNodeEntity;
+    groupController: FlowGroupController;
+}>;
+type IGroupBoxHeader = FC<{
+    groupNode: FlowNodeEntity;
+    groupController: FlowGroupController;
+}>;
+interface GroupsLayerOptions extends LayerOptions {
+    groupBoxStyle?: (groupController: FlowGroupController) => CSSProperties;
+}
+type IGroupPluginRegister = (ctx: PluginContext, opts: CreateGroupPluginOptions) => void;
+type CreateGroupPluginOptions = GroupsLayerOptions & {
+    components?: {
+        GroupNode: IGroupNode;
+        GroupBoxHeader: IGroupBoxHeader;
+    };
+    registers?: {
+        [key in GroupPluginRegister]?: IGroupPluginRegister | boolean;
+    };
+};
+
+declare class GroupsLayer extends Layer<GroupsLayerOptions> {
+    readonly node: HTMLElement;
+    protected document: FlowDocument;
+    protected readonly rendererRegistry: FlowRendererRegistry;
+    protected readonly groupService: FlowGroupService;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    renderStates: FlowNodeRenderData[];
+    transforms: FlowNodeTransformData[];
+    private readonly className;
+    constructor();
+    /** 缩放 */
+    onZoom(scale: number): void;
+    render(): JSX.Element;
+    /** 渲染分组 */
+    protected renderGroups(): JSX.Element;
+    /** 所有分组 */
+    protected get groups(): FlowGroupController[];
+    protected get renderer(): IGroupBox;
+}
+
+/**
+ * 分组插件
+ */
+declare const createGroupPlugin: _flowgram_ai_core.PluginCreator<CreateGroupPluginOptions>;
+
+declare const GroupRegister: FlowNodeRegistry;
+
+declare const GroupRender: IGroupRender;
+
+declare const GroupBox: IGroupBox;
+
+export { type CreateGroupPluginOptions, GroupBox, GroupPluginRegister, GroupRegister, GroupRender, GroupRenderer, GroupsLayer, type GroupsLayerOptions, type IGroupBox, type IGroupBoxHeader, type IGroupNode, type IGroupPluginRegister, type IGroupRender, PositionConfig, createGroupPlugin };

package/dist/index.d.ts

@@ -0,0 +1,87 @@
+import { FlowNodeEntity, FlowGroupController, FlowDocument, FlowGroupService, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowNodeTransformData, FlowNodeRegistry } from '@flowgram.ai/document';
+export { FlowGroupController } from '@flowgram.ai/document';
+import { FlowRendererRegistry } from '@flowgram.ai/renderer';
+import * as _flowgram_ai_core from '@flowgram.ai/core';
+import { LayerOptions, PluginContext, Layer } from '@flowgram.ai/core';
+import { FC, CSSProperties } from 'react';
+
+declare enum GroupRenderer {
+    GroupRender = "group_render",
+    GroupBox = "group_box"
+}
+declare const PositionConfig: {
+    paddingWithNote: number;
+    padding: number;
+    paddingWithAddLabel: number;
+    headerHeight: number;
+};
+declare enum GroupPluginRegister {
+    GroupNode = "registerGroupNode",
+    Render = "registerRender",
+    Layer = "registerLayer",
+    CleanGroups = "registerCleanGroups"
+}
+
+type IGroupBox = FC<{
+    groupNode: FlowNodeEntity;
+    backgroundStyle?: (groupController: FlowGroupController) => CSSProperties;
+}>;
+type IGroupRender = FC<{
+    groupNode: FlowNodeEntity;
+    GroupNode: IGroupNode;
+    GroupBoxHeader: IGroupBoxHeader;
+}>;
+type IGroupNode = FC<{
+    groupNode: FlowNodeEntity;
+    groupController: FlowGroupController;
+}>;
+type IGroupBoxHeader = FC<{
+    groupNode: FlowNodeEntity;
+    groupController: FlowGroupController;
+}>;
+interface GroupsLayerOptions extends LayerOptions {
+    groupBoxStyle?: (groupController: FlowGroupController) => CSSProperties;
+}
+type IGroupPluginRegister = (ctx: PluginContext, opts: CreateGroupPluginOptions) => void;
+type CreateGroupPluginOptions = GroupsLayerOptions & {
+    components?: {
+        GroupNode: IGroupNode;
+        GroupBoxHeader: IGroupBoxHeader;
+    };
+    registers?: {
+        [key in GroupPluginRegister]?: IGroupPluginRegister | boolean;
+    };
+};
+
+declare class GroupsLayer extends Layer<GroupsLayerOptions> {
+    readonly node: HTMLElement;
+    protected document: FlowDocument;
+    protected readonly rendererRegistry: FlowRendererRegistry;
+    protected readonly groupService: FlowGroupService;
+    readonly documentTransformer: FlowDocumentTransformerEntity;
+    renderStates: FlowNodeRenderData[];
+    transforms: FlowNodeTransformData[];
+    private readonly className;
+    constructor();
+    /** 缩放 */
+    onZoom(scale: number): void;
+    render(): JSX.Element;
+    /** 渲染分组 */
+    protected renderGroups(): JSX.Element;
+    /** 所有分组 */
+    protected get groups(): FlowGroupController[];
+    protected get renderer(): IGroupBox;
+}
+
+/**
+ * 分组插件
+ */
+declare const createGroupPlugin: _flowgram_ai_core.PluginCreator<CreateGroupPluginOptions>;
+
+declare const GroupRegister: FlowNodeRegistry;
+
+declare const GroupRender: IGroupRender;
+
+declare const GroupBox: IGroupBox;
+
+export { type CreateGroupPluginOptions, GroupBox, GroupPluginRegister, GroupRegister, GroupRender, GroupRenderer, GroupsLayer, type GroupsLayerOptions, type IGroupBox, type IGroupBoxHeader, type IGroupNode, type IGroupPluginRegister, type IGroupRender, PositionConfig, createGroupPlugin };

package/dist/index.js

@@ -0,0 +1,525 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FlowGroupController: () => import_document9.FlowGroupController,
+  GroupBox: () => GroupBox,
+  GroupPluginRegister: () => GroupPluginRegister,
+  GroupRegister: () => GroupRegister,
+  GroupRender: () => GroupRender,
+  GroupRenderer: () => GroupRenderer,
+  GroupsLayer: () => GroupsLayer,
+  PositionConfig: () => PositionConfig,
+  createGroupPlugin: () => createGroupPlugin
+});
+module.exports = __toCommonJS(src_exports);
+var import_document9 = require("@flowgram.ai/document");
+
+// src/groups-layer.tsx
+var import_react5 = __toESM(require("react"));
+var import_inversify = require("inversify");
+var import_renderer = require("@flowgram.ai/renderer");
+var import_document4 = require("@flowgram.ai/document");
+var import_core2 = require("@flowgram.ai/core");
+var import_utils2 = require("@flowgram.ai/utils");
+
+// src/constant.ts
+var GroupRenderer = /* @__PURE__ */ ((GroupRenderer2) => {
+  GroupRenderer2["GroupRender"] = "group_render";
+  GroupRenderer2["GroupBox"] = "group_box";
+  return GroupRenderer2;
+})(GroupRenderer || {});
+var PositionConfig = {
+  paddingWithNote: 50,
+  // note 留白大小
+  padding: 10,
+  // 无 label 的 padding
+  paddingWithAddLabel: 20,
+  // 有 label 的padding，如要放添加按钮
+  headerHeight: 20
+  // 基础头部高度
+};
+var GroupPluginRegister = /* @__PURE__ */ ((GroupPluginRegister2) => {
+  GroupPluginRegister2["GroupNode"] = "registerGroupNode";
+  GroupPluginRegister2["Render"] = "registerRender";
+  GroupPluginRegister2["Layer"] = "registerLayer";
+  GroupPluginRegister2["CleanGroups"] = "registerCleanGroups";
+  return GroupPluginRegister2;
+})(GroupPluginRegister || {});
+
+// src/components/group-render.tsx
+var import_react = __toESM(require("react"));
+var import_document = require("@flowgram.ai/document");
+var import_document2 = require("@flowgram.ai/document");
+var import_core = require("@flowgram.ai/core");
+var import_utils = require("@flowgram.ai/utils");
+function useCurrentDomNode() {
+  const entity = (0, import_core.useEntityFromContext)();
+  const renderData = entity.getData(import_document.FlowNodeRenderData);
+  return renderData.node;
+}
+var GroupRender = (props) => {
+  const { groupNode, GroupNode, GroupBoxHeader } = props;
+  const container = useCurrentDomNode();
+  const document = (0, import_core.useService)(import_document2.FlowDocument);
+  const groupController = import_document.FlowGroupController.create(groupNode);
+  const [key, setKey] = (0, import_react.useState)(0);
+  const [rendering, setRendering] = (0, import_react.useState)(true);
+  const [collapsedCache, setCollapsedCache] = (0, import_react.useState)(groupController?.collapsed ?? false);
+  const rerender = (0, import_react.useCallback)(async () => {
+    setRendering(true);
+    setKey(key + 1);
+    await (0, import_utils.delay)(50);
+    setKey(key + 1);
+    setRendering(false);
+  }, [key]);
+  (0, import_react.useEffect)(() => {
+    const disposer = document.renderTree.onTreeChange(() => {
+      if (groupController?.collapsed !== collapsedCache) {
+        setCollapsedCache(groupController?.collapsed ?? false);
+        rerender();
+      }
+    });
+    return () => {
+      disposer.dispose();
+    };
+  }, [key]);
+  (0, import_react.useEffect)(() => {
+    if (!groupController || groupController.collapsed) {
+      return;
+    }
+    rerender();
+  }, []);
+  if (!groupController) {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+  }
+  const groupNodeRender = /* @__PURE__ */ import_react.default.createElement(GroupNode, { key, groupNode, groupController });
+  const groupBoxHeader = /* @__PURE__ */ import_react.default.createElement(GroupBoxHeader, { key, groupController, groupNode });
+  if (groupController.collapsed) {
+    const positionStyle = {
+      display: "block",
+      zIndex: "0",
+      width: "auto",
+      height: "auto"
+    };
+    Object.assign(container.style, positionStyle);
+    return groupNodeRender;
+  } else if (!rendering) {
+    const bounds = groupController.bounds;
+    const positionStyle = {
+      width: `${bounds.width}px`
+    };
+    Object.assign(container.style, positionStyle);
+    return groupBoxHeader;
+  } else {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+  }
+};
+
+// src/components/group-box.tsx
+var import_react3 = require("react");
+var import_react4 = __toESM(require("react"));
+var import_document3 = require("@flowgram.ai/document");
+
+// src/components/hooks.ts
+var import_react2 = require("react");
+var useHover = () => {
+  const ref = (0, import_react2.useRef)(null);
+  const [hover, setHover] = (0, import_react2.useState)(false);
+  const checkMouseOver = (event) => {
+    if (!ref.current) {
+      return;
+    }
+    const { left, top, right, bottom } = ref.current.getBoundingClientRect();
+    const isOver = event.clientX >= left && event.clientX <= right && event.clientY >= top && event.clientY <= bottom;
+    setHover(isOver);
+  };
+  (0, import_react2.useEffect)(() => {
+    window.addEventListener("mousemove", checkMouseOver);
+    return () => {
+      window.removeEventListener("mousemove", checkMouseOver);
+    };
+  }, []);
+  return {
+    hover,
+    ref
+  };
+};
+
+// src/components/group-box.tsx
+var GroupBox = (props) => {
+  const { groupNode } = props;
+  const groupController = import_document3.FlowGroupController.create(groupNode);
+  const bounds = groupController.bounds;
+  const { hover, ref } = useHover();
+  const positionStyle = {
+    position: "absolute",
+    left: bounds.left,
+    top: bounds.top,
+    width: bounds.width,
+    height: bounds.height
+  };
+  const defaultBackgroundStyle = {
+    borderRadius: 10,
+    zIndex: -1,
+    outline: `${hover ? 3 : 1}px solid rgb(97, 69, 211)`,
+    backgroundColor: "rgb(236 233 247)"
+  };
+  const backgroundStyle = props.backgroundStyle ? props.backgroundStyle(groupController) : defaultBackgroundStyle;
+  (0, import_react3.useEffect)(() => {
+    groupController.hovered = hover;
+  }, [hover]);
+  if (!groupController || groupController.collapsed) {
+    return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null);
+  }
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "gedit-group-box", "data-group-id": groupNode.id }, /* @__PURE__ */ import_react4.default.createElement(
+    "div",
+    {
+      className: "gedit-group-background",
+      ref,
+      style: {
+        ...positionStyle,
+        ...backgroundStyle
+      }
+    }
+  ));
+};
+
+// src/groups-layer.tsx
+var GroupsLayer = class extends import_core2.Layer {
+  constructor() {
+    super();
+    this.className = "gedit-groups-layer";
+    this.node = import_utils2.domUtils.createDivWithClass(this.className);
+    this.node.style.zIndex = "0";
+  }
+  /** 缩放 */
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  render() {
+    if (this.documentTransformer.loading) return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null);
+    this.documentTransformer.refresh();
+    return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, this.renderGroups());
+  }
+  /** 渲染分组 */
+  renderGroups() {
+    const Box = this.renderer || GroupBox;
+    return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, this.groups.map((group) => /* @__PURE__ */ import_react5.default.createElement(
+      Box,
+      {
+        key: group.groupNode.id,
+        groupNode: group.groupNode,
+        backgroundStyle: this.options.groupBoxStyle
+      }
+    )));
+  }
+  /** 所有分组 */
+  get groups() {
+    return this.groupService.getAllGroups();
+  }
+  get renderer() {
+    return this.rendererRegistry.tryToGetRendererComponent("group_box" /* GroupBox */)?.renderer;
+  }
+};
+__decorateClass([
+  (0, import_inversify.inject)(import_document4.FlowDocument)
+], GroupsLayer.prototype, "document", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_renderer.FlowRendererRegistry)
+], GroupsLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  (0, import_inversify.inject)(import_document4.FlowGroupService)
+], GroupsLayer.prototype, "groupService", 2);
+__decorateClass([
+  (0, import_core2.observeEntity)(import_document4.FlowDocumentTransformerEntity)
+], GroupsLayer.prototype, "documentTransformer", 2);
+__decorateClass([
+  (0, import_core2.observeEntityDatas)(import_document4.FlowNodeEntity, import_document4.FlowNodeRenderData)
+], GroupsLayer.prototype, "renderStates", 2);
+__decorateClass([
+  (0, import_core2.observeEntityDatas)(import_document4.FlowNodeEntity, import_document4.FlowNodeTransformData)
+], GroupsLayer.prototype, "transforms", 2);
+GroupsLayer = __decorateClass([
+  (0, import_inversify.injectable)()
+], GroupsLayer);
+
+// src/create-group-plugin.tsx
+var import_core3 = require("@flowgram.ai/core");
+
+// src/registers/register-render.tsx
+var import_react6 = __toESM(require("react"));
+var import_renderer2 = require("@flowgram.ai/renderer");
+var registerRender = (ctx, opts) => {
+  const rendererRegistry = ctx.get(import_renderer2.FlowRendererRegistry);
+  const renderer = (props) => /* @__PURE__ */ import_react6.default.createElement(
+    GroupRender,
+    {
+      groupNode: props.node,
+      GroupNode: opts.components.GroupNode,
+      GroupBoxHeader: opts.components.GroupBoxHeader
+    }
+  );
+  rendererRegistry.registerReactComponent("group_render" /* GroupRender */, renderer);
+};
+
+// src/registers/register-layer.ts
+var registerLayer = (ctx, opts) => {
+  ctx.playground.registerLayer(GroupsLayer, opts);
+};
+
+// src/registers/register-group-node.ts
+var import_document6 = require("@flowgram.ai/document");
+
+// src/group-node-register.tsx
+var import_utils3 = require("@flowgram.ai/utils");
+var import_document5 = require("@flowgram.ai/document");
+var GroupRegister = {
+  type: import_document5.FlowNodeBaseType.GROUP,
+  meta: {
+    exportJSON: true,
+    renderKey: "group_render" /* GroupRender */,
+    positionConfig: PositionConfig,
+    padding: (transform) => {
+      const groupController = import_document5.FlowGroupController.create(transform.entity);
+      if (!groupController || groupController.collapsed || groupController.nodes.length === 0) {
+        return {
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0
+        };
+      }
+      if (transform.entity.isVertical) {
+        return {
+          top: PositionConfig.paddingWithNote,
+          bottom: PositionConfig.paddingWithAddLabel,
+          left: PositionConfig.padding,
+          right: PositionConfig.padding
+        };
+      }
+      return {
+        top: PositionConfig.paddingWithNote,
+        bottom: PositionConfig.padding,
+        left: PositionConfig.padding,
+        right: PositionConfig.paddingWithAddLabel
+      };
+    }
+  },
+  getLines(transition) {
+    const { transform } = transition;
+    const lines = [];
+    if (transform.firstChild) {
+      lines.push({
+        type: import_document5.FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: transform.inputPoint,
+        to: transform.firstChild.inputPoint
+      });
+    }
+    if (transform.next) {
+      lines.push({
+        type: import_document5.FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: transform.outputPoint,
+        to: transform.next.inputPoint
+      });
+    } else {
+      lines.push({
+        type: import_document5.FlowTransitionLineEnum.STRAIGHT_LINE,
+        from: transform.outputPoint,
+        to: transform.parent.outputPoint
+      });
+    }
+    return lines;
+  },
+  getDelta(transform) {
+    const groupController = import_document5.FlowGroupController.create(transform.entity);
+    if (!groupController || groupController.collapsed) {
+      return;
+    }
+    if (transform.entity.isVertical) {
+      return {
+        x: 0,
+        y: PositionConfig.paddingWithNote
+      };
+    }
+    return {
+      x: PositionConfig.padding,
+      y: 0
+    };
+  },
+  getInputPoint(transform) {
+    const child = transform.firstChild;
+    if (!child) return transform.defaultInputPoint;
+    if (transform.entity.isVertical) {
+      return {
+        x: child.inputPoint.x,
+        y: transform.bounds.topCenter.y
+      };
+    }
+    return {
+      x: transform.bounds.leftCenter.x,
+      y: child.inputPoint.y
+    };
+  },
+  getOutputPoint(transform) {
+    const child = transform.lastChild;
+    if (!child) return transform.defaultOutputPoint;
+    if (transform.entity.isVertical) {
+      return {
+        x: child.outputPoint.x,
+        y: child.outputPoint.y + PositionConfig.paddingWithAddLabel / 2
+      };
+    }
+    return {
+      x: child.outputPoint.x + PositionConfig.paddingWithAddLabel / 2,
+      y: child.outputPoint.y
+    };
+  },
+  getLabels(transition) {
+    const { transform } = transition;
+    if (transform.next) {
+      if (transform.entity.isVertical) {
+        return [
+          {
+            offset: import_utils3.Point.getMiddlePoint(
+              import_utils3.Point.move(transform.outputPoint, {
+                x: 0,
+                y: PositionConfig.paddingWithAddLabel / 2
+              }),
+              transform.next.inputPoint
+            ),
+            type: import_document5.FlowTransitionLabelEnum.ADDER_LABEL
+          }
+        ];
+      }
+      return [
+        {
+          offset: import_utils3.Point.getMiddlePoint(
+            import_utils3.Point.move(transform.outputPoint, { x: PositionConfig.paddingWithAddLabel / 2, y: 0 }),
+            transform.next.inputPoint
+          ),
+          type: import_document5.FlowTransitionLabelEnum.ADDER_LABEL
+        }
+      ];
+    }
+    return [
+      {
+        offset: transform.parent.outputPoint,
+        type: import_document5.FlowTransitionLabelEnum.ADDER_LABEL
+      }
+    ];
+  },
+  getOriginDeltaY(transform) {
+    const { children } = transform;
+    if (children.length === 0) {
+      return -transform.size.height * transform.origin.y;
+    }
+    return -transform.size.height * transform.origin.y - PositionConfig.paddingWithNote;
+  }
+};
+
+// src/registers/register-group-node.ts
+var registerGroupNode = (ctx) => {
+  const document = ctx.get(import_document6.FlowDocument);
+  document.registerFlowNodes(GroupRegister);
+};
+
+// src/registers/register-clean-groups.ts
+var import_document7 = require("@flowgram.ai/document");
+var import_document8 = require("@flowgram.ai/document");
+var registerCleanGroups = (ctx, opts) => {
+  const groupService = ctx.get(import_document8.FlowGroupService);
+  const document = ctx.get(import_document7.FlowDocument);
+  const clearInvalidGroups = () => {
+    groupService.getAllGroups().forEach((group) => {
+      if (group?.nodes.length !== 0) {
+        return;
+      }
+      if (!group.groupNode.pre) {
+        return;
+      }
+      groupService.deleteGroup(group.groupNode);
+    });
+  };
+  document.originTree.onTreeChange(() => {
+    setTimeout(() => {
+      clearInvalidGroups();
+    }, 0);
+  });
+};
+
+// src/registers/index.ts
+var groupRegisters = {
+  ["registerGroupNode" /* GroupNode */]: registerGroupNode,
+  ["registerRender" /* Render */]: registerRender,
+  ["registerLayer" /* Layer */]: registerLayer,
+  ["registerCleanGroups" /* CleanGroups */]: registerCleanGroups
+};
+
+// src/create-group-plugin.tsx
+var createGroupPlugin = (0, import_core3.definePluginCreator)({
+  onInit: (ctx, opts) => {
+    const { registers: registerConfs = {} } = opts;
+    Object.entries(groupRegisters).forEach(([key, register]) => {
+      const registerName = key;
+      const registerConf = registerConfs[registerName];
+      if (registerConf === false) {
+        return;
+      }
+      if (typeof registerConf === "function") {
+        registerConf(ctx, opts);
+        return;
+      }
+      register(ctx, opts);
+    });
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FlowGroupController,
+  GroupBox,
+  GroupPluginRegister,
+  GroupRegister,
+  GroupRender,
+  GroupRenderer,
+  GroupsLayer,
+  PositionConfig,
+  createGroupPlugin
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/groups-layer.tsx","../src/constant.ts","../src/components/group-render.tsx","../src/components/group-box.tsx","../src/components/hooks.ts","../src/create-group-plugin.tsx","../src/registers/register-render.tsx","../src/registers/register-layer.ts","../src/registers/register-group-node.ts","../src/group-node-register.tsx","../src/registers/register-clean-groups.ts","../src/registers/index.ts"],"sourcesContent":["export { FlowGroupController } from '@flowgram.ai/document';\nexport * from './groups-layer';\nexport * from './create-group-plugin';\nexport * from './type';\nexport * from './constant';\nexport * from './group-node-register';\nexport * from './components';\n","import React from 'react';\n\nimport { inject, injectable } from 'inversify';\nimport { FlowRendererRegistry } from '@flowgram.ai/renderer';\nimport {\n  FlowDocument,\n  FlowDocumentTransformerEntity,\n  FlowGroupController,\n  FlowGroupService,\n  FlowNodeEntity,\n  FlowNodeRenderData,\n  FlowNodeTransformData,\n} from '@flowgram.ai/document';\nimport { Layer, observeEntity, observeEntityDatas } from '@flowgram.ai/core';\nimport { domUtils } from '@flowgram.ai/utils';\n\nimport { GroupsLayerOptions, IGroupBox } from './type';\nimport { GroupRenderer } from './constant';\nimport { GroupBox } from './components';\n\n@injectable()\nexport class GroupsLayer extends Layer<GroupsLayerOptions> {\n  public readonly node: HTMLElement;\n\n  @inject(FlowDocument) protected document: FlowDocument;\n\n  @inject(FlowRendererRegistry)\n  protected readonly rendererRegistry: FlowRendererRegistry;\n\n  @inject(FlowGroupService)\n  protected readonly groupService: FlowGroupService;\n\n  @observeEntity(FlowDocumentTransformerEntity)\n  readonly documentTransformer: FlowDocumentTransformerEntity;\n\n  @observeEntityDatas(FlowNodeEntity, FlowNodeRenderData)\n  renderStates: FlowNodeRenderData[];\n\n  @observeEntityDatas(FlowNodeEntity, FlowNodeTransformData)\n  transforms: FlowNodeTransformData[];\n\n  private readonly className = 'gedit-groups-layer';\n\n  constructor() {\n    super();\n    this.node = domUtils.createDivWithClass(this.className);\n    this.node.style.zIndex = '0';\n  }\n\n  /** 缩放 */\n  public onZoom(scale: number): void {\n    this.node!.style.transform = `scale(${scale})`;\n  }\n\n  public render(): JSX.Element {\n    if (this.documentTransformer.loading) return <></>;\n    this.documentTransformer.refresh();\n\n    return <>{this.renderGroups()}</>;\n  }\n\n  /** 渲染分组 */\n  protected renderGroups(): JSX.Element {\n    const Box = this.renderer || GroupBox;\n    return (\n      <>\n        {this.groups.map(group => (\n          <Box\n            key={group.groupNode.id}\n            groupNode={group.groupNode}\n            backgroundStyle={this.options.groupBoxStyle}\n          />\n        ))}\n      </>\n    );\n  }\n\n  /** 所有分组 */\n  protected get groups(): FlowGroupController[] {\n    return this.groupService.getAllGroups();\n  }\n\n  protected get renderer(): IGroupBox {\n    return this.rendererRegistry.tryToGetRendererComponent(GroupRenderer.GroupBox)\n      ?.renderer as IGroupBox;\n  }\n}\n","export enum GroupRenderer {\n  GroupRender = 'group_render',\n  GroupBox = 'group_box',\n}\n\nexport const PositionConfig = {\n  paddingWithNote: 50, // note 留白大小\n  padding: 10, // 无 label 的 padding\n  paddingWithAddLabel: 20, // 有 label 的padding，如要放添加按钮\n  headerHeight: 20, // 基础头部高度\n};\n\nexport enum GroupPluginRegister {\n  GroupNode = 'registerGroupNode',\n  Render = 'registerRender',\n  Layer = 'registerLayer',\n  CleanGroups = 'registerCleanGroups',\n}\n","/* eslint-disable react/prop-types */\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { FlowGroupController, FlowNodeEntity, FlowNodeRenderData } from '@flowgram.ai/document';\nimport { FlowDocument } from '@flowgram.ai/document';\nimport { useEntityFromContext, useService } from '@flowgram.ai/core';\nimport { delay, Rectangle } from '@flowgram.ai/utils';\n\nimport { IGroupRender } from '../type';\n\nfunction useCurrentDomNode(): HTMLDivElement {\n  const entity = useEntityFromContext<FlowNodeEntity>();\n  const renderData = entity.getData<FlowNodeRenderData>(FlowNodeRenderData);\n  return renderData.node;\n}\n\nexport const GroupRender: IGroupRender = props => {\n  const { groupNode, GroupNode, GroupBoxHeader } = props;\n  const container = useCurrentDomNode();\n  const document = useService<FlowDocument>(FlowDocument);\n  const groupController = FlowGroupController.create(groupNode);\n\n  const [key, setKey] = useState(0);\n  const [rendering, setRendering] = useState(true);\n  const [collapsedCache, setCollapsedCache] = useState(groupController?.collapsed ?? false);\n\n  const rerender = useCallback(async () => {\n    setRendering(true);\n    setKey(key + 1);\n    // 边框bounds计算会有延迟\n    await delay(50);\n    setKey(key + 1);\n    setRendering(false);\n  }, [key]);\n\n  // 监听 collapsed 变化触发重渲染\n  useEffect(() => {\n    const disposer = document.renderTree.onTreeChange(() => {\n      if (groupController?.collapsed !== collapsedCache) {\n        setCollapsedCache(groupController?.collapsed ?? false);\n        rerender();\n      }\n    });\n    return () => {\n      disposer.dispose();\n    };\n  }, [key]);\n\n  // 首次渲染时如果分组是展开状态，此时边框bounds计算会有延迟，需要强制重新渲染\n  useEffect(() => {\n    if (!groupController || groupController.collapsed) {\n      return;\n    }\n    rerender();\n  }, []);\n\n  if (!groupController) {\n    return <></>;\n  }\n\n  const groupNodeRender = (\n    <GroupNode key={key} groupNode={groupNode} groupController={groupController} />\n  );\n  const groupBoxHeader = (\n    <GroupBoxHeader key={key} groupController={groupController} groupNode={groupNode} />\n  );\n\n  if (groupController.collapsed) {\n    const positionStyle: Partial<CSSStyleDeclaration> = {\n      display: 'block',\n      zIndex: '0',\n      width: 'auto',\n      height: 'auto',\n    };\n    Object.assign(container.style, positionStyle);\n    return groupNodeRender;\n  } else if (!rendering) {\n    const bounds: Rectangle = groupController.bounds;\n    const positionStyle: Partial<CSSStyleDeclaration> = {\n      width: `${bounds.width}px`,\n    };\n    Object.assign(container.style, positionStyle);\n    return groupBoxHeader;\n  } else {\n    return <></>;\n  }\n};\n","/* eslint-disable react/prop-types */\nimport { useEffect, type CSSProperties } from 'react';\nimport React from 'react';\n\nimport { FlowGroupController } from '@flowgram.ai/document';\nimport type { Rectangle } from '@flowgram.ai/utils';\n\nimport { IGroupBox } from '../type';\nimport { useHover } from './hooks';\n\nexport const GroupBox: IGroupBox = props => {\n  const { groupNode } = props;\n  const groupController = FlowGroupController.create(groupNode)!;\n  const bounds: Rectangle = groupController.bounds;\n  const { hover, ref } = useHover();\n\n  const positionStyle: CSSProperties = {\n    position: 'absolute',\n    left: bounds.left,\n    top: bounds.top,\n    width: bounds.width,\n    height: bounds.height,\n  };\n\n  const defaultBackgroundStyle: CSSProperties = {\n    borderRadius: 10,\n    zIndex: -1,\n    outline: `${hover ? 3 : 1}px solid rgb(97, 69, 211)`,\n    backgroundColor: 'rgb(236 233 247)',\n  };\n\n  const backgroundStyle = props.backgroundStyle\n    ? props.backgroundStyle(groupController)\n    : defaultBackgroundStyle;\n\n  useEffect(() => {\n    groupController.hovered = hover;\n  }, [hover]);\n\n  if (!groupController || groupController.collapsed) {\n    return <></>;\n  }\n\n  return (\n    <div className=\"gedit-group-box\" data-group-id={groupNode.id}>\n      <div\n        className=\"gedit-group-background\"\n        ref={ref}\n        style={{\n          ...positionStyle,\n          ...backgroundStyle,\n        }}\n      />\n    </div>\n  );\n};\n","import { useEffect, useRef, useState } from 'react';\n\nexport const useHover = () => {\n  const ref = useRef<HTMLDivElement>(null);\n  const [hover, setHover] = useState(false);\n\n  const checkMouseOver = (event: MouseEvent) => {\n    if (!ref.current) {\n      return;\n    }\n    const { left, top, right, bottom } = ref.current.getBoundingClientRect();\n    const isOver =\n      event.clientX >= left &&\n      event.clientX <= right &&\n      event.clientY >= top &&\n      event.clientY <= bottom;\n\n    setHover(isOver);\n  };\n\n  useEffect(() => {\n    window.addEventListener('mousemove', checkMouseOver);\n\n    return () => {\n      window.removeEventListener('mousemove', checkMouseOver);\n    };\n  }, []);\n\n  return {\n    hover,\n    ref,\n  };\n};\n","import { definePluginCreator, PluginContext } from '@flowgram.ai/core';\n\nimport { CreateGroupPluginOptions } from './type';\nimport { groupRegisters } from './registers';\nimport { GroupPluginRegister } from './constant';\n\n/**\n * 分组插件\n */\nexport const createGroupPlugin = definePluginCreator<CreateGroupPluginOptions>({\n  onInit: (ctx: PluginContext, opts: CreateGroupPluginOptions) => {\n    const { registers: registerConfs = {} } = opts;\n    Object.entries(groupRegisters).forEach(([key, register]) => {\n      const registerName = key as GroupPluginRegister;\n      const registerConf = registerConfs[registerName];\n      if (registerConf === false) {\n        return;\n      }\n      if (typeof registerConf === 'function') {\n        registerConf(ctx, opts);\n        return;\n      }\n      register(ctx, opts);\n    });\n  },\n});\n","import React, { FC } from 'react';\n\nimport { FlowRendererRegistry } from '@flowgram.ai/renderer';\nimport { FlowNodeEntity } from '@flowgram.ai/document';\n\nimport { IGroupPluginRegister } from '../type';\nimport { GroupRenderer } from '../constant';\nimport { GroupRender } from '../components';\n\n/** 注册渲染组件 */\nexport const registerRender: IGroupPluginRegister = (ctx, opts) => {\n  const rendererRegistry = ctx.get<FlowRendererRegistry>(FlowRendererRegistry);\n  const renderer: FC<{ node: FlowNodeEntity }> = props => (\n    <GroupRender\n      groupNode={props.node}\n      GroupNode={opts.components!.GroupNode}\n      GroupBoxHeader={opts.components!.GroupBoxHeader}\n    />\n  );\n  rendererRegistry.registerReactComponent(GroupRenderer.GroupRender, renderer);\n};\n","import { IGroupPluginRegister } from '../type';\nimport { GroupsLayer } from '../groups-layer';\n\n/** 注册背景层 */\nexport const registerLayer: IGroupPluginRegister = (ctx, opts) => {\n  ctx.playground.registerLayer(GroupsLayer, opts);\n};\n","import { FlowDocument } from '@flowgram.ai/document';\n\nimport { IGroupPluginRegister } from '../type';\nimport { GroupRegister } from '../group-node-register';\n\n/** 注册分组节点 */\nexport const registerGroupNode: IGroupPluginRegister = ctx => {\n  const document = ctx.get<FlowDocument>(FlowDocument);\n  document.registerFlowNodes(GroupRegister);\n};\n","import { IPoint, PaddingSchema, Point } from '@flowgram.ai/utils';\nimport {\n  FlowGroupController,\n  FlowNodeBaseType,\n  FlowNodeRegistry,\n  FlowNodeTransformData,\n  FlowTransitionLabelEnum,\n  type FlowTransitionLine,\n  FlowTransitionLineEnum,\n} from '@flowgram.ai/document';\n\nimport { GroupRenderer, PositionConfig } from './constant';\n\nexport const GroupRegister: FlowNodeRegistry = {\n  type: FlowNodeBaseType.GROUP,\n  meta: {\n    exportJSON: true,\n    renderKey: GroupRenderer.GroupRender,\n    positionConfig: PositionConfig,\n    padding: (transform: FlowNodeTransformData): PaddingSchema => {\n      const groupController = FlowGroupController.create(transform.entity);\n      if (!groupController || groupController.collapsed || groupController.nodes.length === 0) {\n        return {\n          top: 0,\n          bottom: 0,\n          left: 0,\n          right: 0,\n        };\n      }\n      if (transform.entity.isVertical) {\n        return {\n          top: PositionConfig.paddingWithNote,\n          bottom: PositionConfig.paddingWithAddLabel,\n          left: PositionConfig.padding,\n          right: PositionConfig.padding,\n        };\n      }\n      return {\n        top: PositionConfig.paddingWithNote,\n        bottom: PositionConfig.padding,\n        left: PositionConfig.padding,\n        right: PositionConfig.paddingWithAddLabel,\n      };\n    },\n  },\n  getLines(transition) {\n    const { transform } = transition;\n    const lines: FlowTransitionLine[] = [];\n    if (transform.firstChild) {\n      lines.push({\n        type: FlowTransitionLineEnum.STRAIGHT_LINE,\n        from: transform.inputPoint,\n        to: transform.firstChild.inputPoint,\n      });\n    }\n    if (transform.next) {\n      lines.push({\n        type: FlowTransitionLineEnum.STRAIGHT_LINE,\n        from: transform.outputPoint,\n        to: transform.next.inputPoint,\n      });\n    } else {\n      lines.push({\n        type: FlowTransitionLineEnum.STRAIGHT_LINE,\n        from: transform.outputPoint,\n        to: transform.parent!.outputPoint,\n      });\n    }\n    return lines;\n  },\n  getDelta(transform: FlowNodeTransformData): IPoint | undefined {\n    const groupController = FlowGroupController.create(transform.entity);\n    if (!groupController || groupController.collapsed) {\n      return;\n    }\n    if (transform.entity.isVertical) {\n      return {\n        x: 0,\n        y: PositionConfig.paddingWithNote,\n      };\n    }\n    return {\n      x: PositionConfig.padding,\n      y: 0,\n    };\n  },\n  getInputPoint(transform: FlowNodeTransformData): IPoint {\n    const child = transform.firstChild;\n    if (!child) return transform.defaultInputPoint;\n    if (transform.entity.isVertical) {\n      return {\n        x: child.inputPoint.x,\n        y: transform.bounds.topCenter.y,\n      };\n    }\n    return {\n      x: transform.bounds.leftCenter.x,\n      y: child.inputPoint.y,\n    };\n  },\n  getOutputPoint(transform: FlowNodeTransformData): IPoint {\n    const child = transform.lastChild;\n    if (!child) return transform.defaultOutputPoint;\n    if (transform.entity.isVertical) {\n      return {\n        x: child.outputPoint.x,\n        y: child.outputPoint.y + PositionConfig.paddingWithAddLabel / 2,\n      };\n    }\n    return {\n      x: child.outputPoint.x + PositionConfig.paddingWithAddLabel / 2,\n      y: child.outputPoint.y,\n    };\n  },\n  getLabels(transition) {\n    const { transform } = transition;\n    if (transform.next) {\n      if (transform.entity.isVertical) {\n        return [\n          {\n            offset: Point.getMiddlePoint(\n              Point.move(transform.outputPoint, {\n                x: 0,\n                y: PositionConfig.paddingWithAddLabel / 2,\n              }),\n              transform.next.inputPoint\n            ),\n            type: FlowTransitionLabelEnum.ADDER_LABEL,\n          },\n        ];\n      }\n      return [\n        {\n          offset: Point.getMiddlePoint(\n            Point.move(transform.outputPoint, { x: PositionConfig.paddingWithAddLabel / 2, y: 0 }),\n            transform.next.inputPoint\n          ),\n          type: FlowTransitionLabelEnum.ADDER_LABEL,\n        },\n      ];\n    }\n    return [\n      {\n        offset: transform.parent!.outputPoint,\n        type: FlowTransitionLabelEnum.ADDER_LABEL,\n      },\n    ];\n  },\n  getOriginDeltaY(transform): number {\n    const { children } = transform;\n    if (children.length === 0) {\n      return -transform.size.height * transform.origin.y;\n    }\n    // 这里要加上 y 轴的偏移\n    return -transform.size.height * transform.origin.y - PositionConfig.paddingWithNote;\n  },\n};\n","import { FlowDocument } from '@flowgram.ai/document';\nimport { FlowGroupService } from '@flowgram.ai/document';\n\nimport { IGroupPluginRegister } from '../type';\n\n/** 注册清理分组逻辑 */\nexport const registerCleanGroups: IGroupPluginRegister = (ctx, opts) => {\n  const groupService = ctx.get<FlowGroupService>(FlowGroupService);\n  const document = ctx.get<FlowDocument>(FlowDocument);\n\n  const clearInvalidGroups = () => {\n    groupService.getAllGroups().forEach(group => {\n      if (group?.nodes.length !== 0) {\n        return;\n      }\n      if (!group.groupNode.pre) {\n        return;\n      }\n      groupService.deleteGroup(group.groupNode);\n    });\n  };\n\n  document.originTree.onTreeChange(() => {\n    setTimeout(() => {\n      clearInvalidGroups();\n    }, 0);\n  });\n};\n","import { IGroupPluginRegister } from '../type';\nimport { GroupPluginRegister } from '../constant';\nimport { registerRender } from './register-render';\nimport { registerLayer } from './register-layer';\nimport { registerGroupNode } from './register-group-node';\nimport { registerCleanGroups } from './register-clean-groups';\n\nexport const groupRegisters: Record<GroupPluginRegister, IGroupPluginRegister> = {\n  [GroupPluginRegister.GroupNode]: registerGroupNode,\n  [GroupPluginRegister.Render]: registerRender,\n  [GroupPluginRegister.Layer]: registerLayer,\n  [GroupPluginRegister.CleanGroups]: registerCleanGroups,\n};\n"],"mappings":"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","names":["import_document","import_react","import_document","import_core","import_utils","GroupRenderer","GroupPluginRegister","import_document","React","import_react","import_document","import_react","React","React","import_core","import_react","import_renderer","React","import_document","import_utils","import_document","import_document"]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@flowgram.ai/group-plugin",
+  "version": "0.1.0",
+  "license": "MIT",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "import": "./dist/esm/index.js",
+    "require": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run build:fast -- --dts-resolve",
+    "build:fast": "tsup src/index.ts --format cjs,esm --sourcemap --legacy-output",
+    "build:watch": "npm run build:fast -- --dts-resolve",
+    "clean": "rimraf dist",
+    "test": "exit 0",
+    "test:cov": "exit 0",
+    "ts-check": "tsc --noEmit",
+    "watch": "npm run build:fast -- --dts-resolve --watch --ignore-watch dist"
+  },
+  "dependencies": {
+    "@flowgram.ai/core": "workspace:*",
+    "@flowgram.ai/document": "workspace:*",
+    "@flowgram.ai/renderer": "workspace:*",
+    "@flowgram.ai/utils": "workspace:*",
+    "inversify": "^6.0.1"
+  },
+  "devDependencies": {
+    "@flowgram.ai/eslint-config": "workspace:*",
+    "@flowgram.ai/ts-config": "workspace:*",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitest/coverage-v8": "^0.32.0",
+    "eslint": "^8.54.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.0.4",
+    "vitest": "^0.34.6"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  }
+}