feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/components/resource-tree/src/fixed-layout-editor-provider/index.tsx

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { useMemo, useCallback, forwardRef } from 'react';
+
+import { type interfaces } from 'inversify';
+import {
+  FlowDocument,
+  createPluginContextDefault,
+  PlaygroundReactProvider,
+} from '@flowgram-adapter/fixed-layout-editor';
+
+import {
+  createFixedLayoutPreset,
+  type FixedLayoutPluginContext,
+  type FixedLayoutProps,
+} from './preset';
+
+export const FixedLayoutEditorProvider = forwardRef<
+  FixedLayoutPluginContext,
+  FixedLayoutProps
+>(function FixedLayoutEditorProvider(props: FixedLayoutProps, ref) {
+  const { parentContainer, children, ...others } = props;
+  const preset = useMemo(() => createFixedLayoutPreset(others), []);
+  const customPluginContext = useCallback(
+    (container: interfaces.Container) =>
+      ({
+        ...createPluginContextDefault(container),
+        get document(): FlowDocument {
+          return container.get<FlowDocument>(FlowDocument);
+        },
+      }) as FixedLayoutPluginContext,
+    [],
+  );
+  return (
+    <PlaygroundReactProvider
+      ref={ref}
+      plugins={preset}
+      customPluginContext={customPluginContext}
+      parentContainer={parentContainer}
+    >
+      {children}
+    </PlaygroundReactProvider>
+  );
+});

frontend/packages/components/resource-tree/src/fixed-layout-editor-provider/preset/container-module.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { ContainerModule } from 'inversify';
+import {
+  bindContributions,
+  FlowDocumentContribution,
+  FlowRendererContribution,
+} from '@flowgram-adapter/fixed-layout-editor';
+
+import { FlowRegisters } from './flow-registers';
+
+export const FixedLayoutContainerModule = new ContainerModule(bind => {
+  bindContributions(bind, FlowRegisters, [
+    FlowDocumentContribution,
+    FlowRendererContribution,
+  ]);
+});

frontend/packages/components/resource-tree/src/fixed-layout-editor-provider/preset/fixed-layout-preset.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import {
+  createOperationPlugin,
+  type PluginsProvider,
+  createDefaultPreset,
+  createPlaygroundPlugin,
+  type Plugin,
+  FlowDocumentOptionsDefault,
+  FlowDocumentOptions,
+  FlowNodesContentLayer,
+  FlowNodesTransformLayer,
+  FlowScrollBarLayer,
+  FlowScrollLimitLayer,
+  createPlaygroundReactPreset,
+} from '@flowgram-adapter/fixed-layout-editor';
+
+import {
+  type FixedLayoutPluginContext,
+  type FixedLayoutProps,
+  DEFAULT,
+} from './fixed-layout-props';
+import { FixedLayoutContainerModule } from './container-module';
+
+export function createFixedLayoutPreset(
+  opts: FixedLayoutProps,
+): PluginsProvider<FixedLayoutPluginContext> {
+  return (ctx: FixedLayoutPluginContext) => {
+    opts = { ...DEFAULT, ...opts };
+    let plugins: Plugin[] = [createOperationPlugin(opts)];
+    /**
+     * 加载默认编辑器配置
+     */
+    plugins = createDefaultPreset(opts, plugins)(ctx);
+    /*
+     * 加载固定布局画布模块
+     * */
+    plugins.push(
+      createPlaygroundPlugin<FixedLayoutPluginContext>({
+        containerModules: [FixedLayoutContainerModule],
+        onBind(bindConfig) {
+          if (!bindConfig.isBound(FlowDocumentOptions)) {
+            bindConfig.bind(FlowDocumentOptions).toConstantValue({
+              ...FlowDocumentOptionsDefault,
+              jsonAsV2: true,
+              defaultLayout: opts.defaultLayout,
+              toNodeJSON: opts.toNodeJSON,
+              fromNodeJSON: opts.fromNodeJSON,
+              allNodesDefaultExpanded: opts.allNodesDefaultExpanded,
+            } as FlowDocumentOptions);
+          }
+        },
+        onInit: _ctx => {
+          _ctx.playground.registerLayers(
+            FlowNodesContentLayer, // 节点内容渲染
+            FlowNodesTransformLayer, // 节点位置偏移计算
+          );
+          if (!opts.scroll?.disableScrollLimit) {
+            // 控制滚动范围
+            _ctx.playground.registerLayer(FlowScrollLimitLayer);
+          }
+          if (!opts.scroll?.disableScrollBar) {
+            // 控制条
+            _ctx.playground.registerLayer(FlowScrollBarLayer);
+          }
+          if (opts.nodeRegistries) {
+            _ctx.document.registerFlowNodes(...opts.nodeRegistries);
+          }
+        },
+      }),
+    );
+    return createPlaygroundReactPreset(opts, plugins)(ctx);
+  };
+}

frontend/packages/components/resource-tree/src/fixed-layout-editor-provider/preset/fixed-layout-props.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import {
+  type ClipboardService,
+  type EditorPluginContext,
+  EditorProps,
+  type FlowDocument,
+  type FlowDocumentJSON,
+  type FlowLayoutDefault,
+  type FlowOperationService,
+  type SelectionService,
+  type FixedHistoryPluginOptions,
+  type HistoryService,
+} from '@flowgram-adapter/fixed-layout-editor';
+
+export interface FixedLayoutPluginContext extends EditorPluginContext {
+  document: FlowDocument;
+  /**
+   * 提供对画布节点相关操作方法, 并 支持 redo/undo
+   */
+  operation: FlowOperationService;
+  clipboard: ClipboardService;
+  selection: SelectionService;
+  history: HistoryService;
+}
+
+/**
+ * 固定布局配置
+ */
+export interface FixedLayoutProps
+  extends EditorProps<FixedLayoutPluginContext, FlowDocumentJSON> {
+  history?: FixedHistoryPluginOptions<FixedLayoutPluginContext> & {
+    disableShortcuts?: boolean;
+  };
+  defaultLayout?: FlowLayoutDefault | string; // 默认布局
+}
+
+export const DEFAULT: FixedLayoutProps =
+  EditorProps.DEFAULT as FixedLayoutProps;

frontend/packages/components/resource-tree/src/fixed-layout-editor-provider/preset/flow-registers.ts

@@ -0,0 +1,87 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { injectable } from 'inversify';
+import {
+  FlowNodesContentLayer,
+  FlowNodesTransformLayer,
+  type FlowRendererContribution,
+  type FlowRendererRegistry,
+  FlowScrollBarLayer,
+  FlowScrollLimitLayer,
+  type FlowDocument,
+  type FlowDocumentContribution,
+  FlowNodeRenderData,
+  FlowNodeTransformData,
+  FlowNodeTransitionData,
+  PlaygroundLayer,
+  FixedLayoutRegistries,
+} from '@flowgram-adapter/fixed-layout-editor';
+
+import { FlowLinesLayer } from '../../layers';
+
+@injectable()
+export class FlowRegisters
+  implements FlowDocumentContribution, FlowRendererContribution
+{
+  /**
+   * 注册数据层
+   * @param document
+   */
+  registerDocument(document: FlowDocument) {
+    /**
+     * 注册节点 (ECS - Entity)
+     */
+    document.registerFlowNodes(
+      // 等待简化
+      FixedLayoutRegistries.RootRegistry, // 根节点
+      FixedLayoutRegistries.StartRegistry, // 开始节点
+      FixedLayoutRegistries.DynamicSplitRegistry, // 动态分支（并行、排他）
+      FixedLayoutRegistries.BlockRegistry, // 单条 block 注册
+      FixedLayoutRegistries.InlineBlocksRegistry, // 多个 block 组成的 block 列表
+      FixedLayoutRegistries.BlockIconRegistry, // icon 节点，如条件分支的菱形图标
+      // FixedLayoutRegistries.EndRegistry, // 结束节点
+      FixedLayoutRegistries.EmptyRegistry, // 占位节点
+    );
+    /**
+     * 注册节点数据 (ECS - Component)
+     */
+    document.registerNodeDatas(
+      FlowNodeRenderData, // 渲染节点相关数据
+      FlowNodeTransitionData, // 线条绘制数据
+      FlowNodeTransformData, // 坐标计算数据
+    );
+  }
+
+  /**
+   * 注册渲染层
+   * @param renderer
+   */
+  registerRenderer(renderer: FlowRendererRegistry) {
+    /**
+     * 注册 layer (ECS - System)
+     */
+    renderer.registerLayers(
+      FlowNodesTransformLayer, // 节点位置渲染
+      FlowNodesContentLayer, // 节点内容渲染
+      FlowLinesLayer, // 线条渲染
+      // FlowLabelsLayer, // Label 渲染
+      PlaygroundLayer, // 画布基础层，提供缩放、手势等能力
+      FlowScrollLimitLayer, // 控制滚动范围
+      FlowScrollBarLayer, // 滚动条
+    );
+  }
+}

frontend/packages/components/resource-tree/src/fixed-layout-editor-provider/preset/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export {
+  type FixedLayoutPluginContext,
+  type FixedLayoutProps,
+} from './fixed-layout-props';
+export { createFixedLayoutPreset } from './fixed-layout-preset';