refactor(group): group node registry move to app by default (#658)

* refactor(group): group node registry move to app by default

* chore: rush update

apps/demo-free-layout/src/nodes/group/index.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import {
+  FlowNodeBaseType,
+  WorkflowNodeEntity,
+  PositionSchema,
+  FlowNodeTransformData,
+  nanoid,
+} from '@flowgram.ai/free-layout-editor';
+
+import { FlowNodeRegistry } from '../../typings';
+
+let index = 0;
+export const GroupNodeRegistry: FlowNodeRegistry = {
+  type: FlowNodeBaseType.GROUP,
+  meta: {
+    renderKey: FlowNodeBaseType.GROUP,
+    defaultPorts: [],
+    isContainer: true,
+    disableSideBar: true,
+    size: {
+      width: 560,
+      height: 400,
+    },
+    padding: () => ({
+      top: 80,
+      bottom: 40,
+      left: 65,
+      right: 65,
+    }),
+    selectable(node: WorkflowNodeEntity, mousePos?: PositionSchema): boolean {
+      if (!mousePos) {
+        return true;
+      }
+      const transform = node.getData<FlowNodeTransformData>(FlowNodeTransformData);
+      return !transform.bounds.contains(mousePos.x, mousePos.y);
+    },
+    expandable: false,
+  },
+  formMeta: {
+    render: () => <></>,
+  },
+  onAdd() {
+    return {
+      type: FlowNodeBaseType.GROUP,
+      id: `group_${nanoid(5)}`,
+      meta: {
+        position: {
+          x: 0,
+          y: 0,
+        },
+      },
+      data: {
+        color: 'Green',
+        title: `Group_${++index}`,
+      },
+    };
+  },
+};

apps/demo-free-layout/src/nodes/index.ts

@@ -9,6 +9,7 @@ import { StartNodeRegistry } from './start';
 import { LoopNodeRegistry } from './loop';
 import { LLMNodeRegistry } from './llm';
 import { HTTPNodeRegistry } from './http';
+import { GroupNodeRegistry } from './group';
 import { EndNodeRegistry } from './end';
 import { ContinueNodeRegistry } from './continue';
 import { ConditionNodeRegistry } from './condition';
@@ -33,4 +34,5 @@ export const nodeRegistries: FlowNodeRegistry[] = [
   ContinueNodeRegistry,
   BreakNodeRegistry,
   VariableNodeRegistry,
+  GroupNodeRegistry,
 ];

common/config/rush/pnpm-lock.yaml

@@ -2809,6 +2809,9 @@ importers:
       '@flowgram.ai/free-layout-core':
         specifier: workspace:*
         version: link:../../canvas-engine/free-layout-core
+      '@flowgram.ai/free-layout-editor':
+        specifier: workspace:*
+        version: link:../../client/free-layout-editor
       '@flowgram.ai/free-lines-plugin':
         specifier: workspace:*
         version: link:../free-lines-plugin

packages/plugins/free-group-plugin/package.json

@@ -35,6 +35,7 @@
         "@flowgram.ai/free-layout-core": "workspace:*",
         "@flowgram.ai/renderer": "workspace:*",
         "@flowgram.ai/utils": "workspace:*",
+        "@flowgram.ai/free-layout-editor": "workspace:*",
         "inversify": "^6.0.1",
         "reflect-metadata": "~0.2.2",
         "lodash": "^4.17.21"

packages/plugins/free-group-plugin/src/create-free-group-plugin.tsx

@@ -21,10 +21,7 @@ export const createFreeGroupPlugin = definePluginCreator<WorkflowGroupPluginOpti
       bind(WorkflowGroupPluginOptions).toConstantValue(opts);
       rebind(FlowGroupService).toService(WorkflowGroupService);
     },
-    onInit(
-      ctx,
-      { groupNodeRender, disableGroupShortcuts = false, disableGroupNodeRegister = false }
-    ) {
+    onInit(ctx, { groupNodeRender, disableGroupShortcuts = false }) {
       // register node render
       if (groupNodeRender) {
         const renderRegistry = ctx.get<FlowRendererRegistry>(FlowRendererRegistry);
@@ -35,8 +32,8 @@ export const createFreeGroupPlugin = definePluginCreator<WorkflowGroupPluginOpti
         const shortcutsRegistry = ctx.get(ShortcutsRegistry);
         shortcutsRegistry.addHandlers(new GroupShortcut(ctx), new UngroupShortcut(ctx));
       }
-      if (!disableGroupNodeRegister) {
-        const document = ctx.get(WorkflowDocument);
+      const document = ctx.get(WorkflowDocument);
+      if (!document.getNodeRegistry(FlowNodeBaseType.GROUP)) {
         document.registerFlowNodes(GroupNodeRegistry);
       }
     },

packages/plugins/free-group-plugin/src/group-node.tsx

@@ -4,7 +4,7 @@
  */
 
 import { PositionSchema } from '@flowgram.ai/utils';
-import { WorkflowNodeEntity } from '@flowgram.ai/free-layout-core';
+import { nanoid, WorkflowNodeEntity } from '@flowgram.ai/free-layout-core';
 import { FlowNodeRegistry, FlowNodeBaseType, FlowNodeTransformData } from '@flowgram.ai/document';
 
 export const GroupNodeRegistry: FlowNodeRegistry = {
@@ -36,4 +36,17 @@ export const GroupNodeRegistry: FlowNodeRegistry = {
   formMeta: {
     render: () => <></>,
   },
+  onAdd() {
+    return {
+      type: FlowNodeBaseType.GROUP,
+      id: `group_${nanoid(5)}`,
+      meta: {
+        position: {
+          x: 0,
+          y: 0,
+        },
+      },
+      data: {},
+    };
+  },
 };

packages/plugins/free-group-plugin/src/type.ts

@@ -10,7 +10,9 @@ import { WorkflowNodeEntity, WorkflowNodeJSON } from '@flowgram.ai/free-layout-c
 export interface WorkflowGroupPluginOptions {
   groupNodeRender: FC;
   disableGroupShortcuts?: boolean;
+  /** @deprecated */
   disableGroupNodeRegister?: boolean;
+  /** @deprecated use groupNodeRegistry.onAdd instead */
   initGroupJSON?: (json: WorkflowNodeJSON, nodes: WorkflowNodeEntity[]) => WorkflowNodeJSON;
 }
 

packages/plugins/free-group-plugin/src/workflow-group-service.ts

@@ -5,12 +5,13 @@
 
 import { injectable, inject } from 'inversify';
 import { DisposableCollection, Disposable } from '@flowgram.ai/utils';
+import { FreeLayoutPluginContext } from '@flowgram.ai/free-layout-editor';
 import {
   WorkflowDocument,
   WorkflowOperationBaseService,
   WorkflowNodeEntity,
-  nanoid,
   WorkflowNodeJSON,
+  WorkflowNodeRegistry,
 } from '@flowgram.ai/free-layout-core';
 import { HistoryService } from '@flowgram.ai/free-history-plugin';
 import {
@@ -36,6 +37,8 @@ export class WorkflowGroupService extends FlowGroupService {
 
   @inject(WorkflowGroupPluginOptions) private opts: WorkflowGroupPluginOptions;
 
+  @inject(FreeLayoutPluginContext) private context: FreeLayoutPluginContext;
+
   private toDispose = new DisposableCollection();
 
   public ready(): void {
@@ -52,17 +55,10 @@ export class WorkflowGroupService extends FlowGroupService {
       return;
     }
     const parent = nodes[0].parent ?? this.document.root;
-    let groupJSON: WorkflowNodeJSON = {
-      type: FlowNodeBaseType.GROUP,
-      id: `group_${nanoid(5)}`,
-      meta: {
-        position: {
-          x: 0,
-          y: 0,
-        },
-      },
-      data: {},
-    };
+    const nodeRegistry = this.document.getNodeRegistry<WorkflowNodeRegistry>(
+      FlowNodeBaseType.GROUP
+    );
+    let groupJSON: WorkflowNodeJSON = nodeRegistry?.onAdd?.(this.context);
     if (this.opts.initGroupJSON) {
       groupJSON = this.opts.initGroupJSON(groupJSON, nodes);
     }