@flowgram.ai/group-plugin 0.1.0-alpha.10

package/dist/index.d.ts

@@ -0,0 +1,116 @@
+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';
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+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"
+}
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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;
+    };
+};
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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>;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const GroupRegister: FlowNodeRegistry;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const GroupRender: IGroupRender;
+
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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