@flowgram.ai/editor 0.1.0-alpha.3 → 0.1.0-alpha.30

package/dist/index.d.ts

@@ -1,74 +1,93 @@
+import { NodeFormProps } from '@flowgram.ai/node';
 export * from '@flowgram.ai/node';
 export { FormModelV2 as FormModel } from '@flowgram.ai/node';
 export * from '@flowgram.ai/utils';
 import * as _flowgram_ai_core from '@flowgram.ai/core';
-import { PluginContext, Plugin, PluginsProvider, PlaygroundConfigRevealOpts, Playground } from '@flowgram.ai/core';
+import { PluginContext, Plugin, PluginsProvider, Playground, PlaygroundConfigRevealOpts } from '@flowgram.ai/core';
 export * from '@flowgram.ai/core';
 export { PlaygroundReactRenderer as EditorRenderer } from '@flowgram.ai/core';
-import { FlowDocument, FlowDocumentJSON, FlowNodeRegistry, FlowNodeType, FlowNodeEntity, FlowNodeJSON, FlowTransitionLine, FlowTransitionLabel } from '@flowgram.ai/document';
+import { FlowDocument, FlowDocumentJSON, FlowNodeRegistry, FlowNodeType, FlowNodeEntity, FlowNodeJSON } from '@flowgram.ai/document';
 export * from '@flowgram.ai/document';
 export * from '@flowgram.ai/renderer';
-import { VariablePluginOptions } from '@flowgram.ai/variable-plugin';
+import { FlowNodeScope, VariablePluginOptions } from '@flowgram.ai/variable-plugin';
 export * from '@flowgram.ai/variable-plugin';
 export * from '@flowgram.ai/shortcuts-plugin';
 import { NodeCorePluginOptions } from '@flowgram.ai/node-core-plugin';
 export * from '@flowgram.ai/node-core-plugin';
 import { I18nPluginOptions } from '@flowgram.ai/i18n-plugin';
 export * from '@flowgram.ai/i18n-plugin';
+export { ReactiveBaseState, ReactiveState, Tracker, observe, useObserve, useReactiveState, useReadonlyReactiveState } from '@flowgram.ai/reactive';
+export { AsyncContainerModule, Container, ContainerModule, inject, injectable, interfaces, multiInject, named, postConstruct } from 'inversify';
 import { FormMetaOrFormMetaGenerator, FormItem, FormModel } from '@flowgram.ai/form-core';
 export { FlowNodeFormData, NodeRender, NodeRenderProps } from '@flowgram.ai/form-core';
-export { Errors, Field, FieldArray, FieldArrayRenderProps, FieldError, FieldName, FieldRenderProps, FieldState, FieldWarning, Form, FormControl, FormRenderProps, FormState, IField, IFieldArray, IForm, Validate, ValidateTrigger, Warnings, useCurrentField, useCurrentFieldState, useField, useFieldValidate, useForm, useWatch } from '@flowgram.ai/form';
+export { Errors, FeedbackLevel, Field, FieldArray, FieldArrayRenderProps, FieldError, FieldName, FieldRenderProps, FieldState, FieldWarning, Form, FormControl, FormRenderProps, FormState, IField, IFieldArray, IForm, Validate, ValidateTrigger, Warnings, useCurrentField, useCurrentFieldState, useField, useFieldValidate, useForm, useWatch } from '@flowgram.ai/form';
 import { ReduxDevToolPluginOptions } from '@flowgram.ai/redux-devtool-plugin';
 import { SelectionService, PlaygroundReactProps } from '@flowgram.ai/playground-react';
+export { createPlaygroundReactPreset } from '@flowgram.ai/playground-react';
 import { MaterialsPluginOptions } from '@flowgram.ai/materials-plugin';
 import { HistoryPluginOptions } from '@flowgram.ai/history';
 import * as React from 'react';
 import React__default from 'react';
 export * from '@flowgram.ai/node-variable-plugin';
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '@flowgram.ai/document' {
+    interface FlowNodeEntity {
+        form: NodeFormProps<any> | undefined;
+        scope: FlowNodeScope | undefined;
+        privateScope: FlowNodeScope | undefined;
+    }
+}
 interface EditorPluginContext extends PluginContext {
     document: FlowDocument;
     selection: SelectionService;
 }
-/**
- * 固定布局配置
- */
 interface EditorProps<CTX extends EditorPluginContext = EditorPluginContext, JSON = FlowDocumentJSON> extends PlaygroundReactProps<CTX> {
     /**
+     * Initialize data
      * 初始化数据
      */
     initialData?: JSON;
     /**
+     * whether it is readonly
      * 是否为 readonly
      */
     readonly?: boolean;
     /**
+     * node registries
      * 节点定义
      */
     nodeRegistries?: FlowNodeRegistry[];
     /**
-     * 获取默认的节点配置
+     * Get the default node registry, which will be merged with the 'nodeRegistries'
+     * 提供默认的节点注册，这个会和 nodeRegistries 做合并
      */
     getNodeDefaultRegistry?: (type: FlowNodeType) => FlowNodeRegistry;
     /**
-     * 节点引擎配置
+     * Node engine configuration
      */
     nodeEngine?: NodeCorePluginOptions & {
         /**
-         * 默认FormMeta
+         * Default formMeta
          */
         createDefaultFormMeta?: (node: FlowNodeEntity) => FormMetaOrFormMetaGenerator;
         /**
-         * 开启
+         * Enable node engine
          */
         enable?: boolean;
     };
     /**
+     * By default, all nodes are expanded
      * 默认是否展开所有节点
      */
     allNodesDefaultExpanded?: boolean;
     /**
-     * 画布物料
+     * Canvas material, Used to customize react components
+     * 画布物料, 用于自定义 react 组件
      */
     materials?: MaterialsPluginOptions;
     /**
@@ -78,41 +97,50 @@ interface EditorProps<CTX extends EditorPluginContext = EditorPluginContext, JSO
     onLoad?: (ctx: CTX) => void;
     /**
      * 是否开启变量引擎
+     * Variable engine enable
      */
     variableEngine?: VariablePluginOptions;
     /**
-     * 是否开启历史
+     * Redo/Undo enable
      */
     history?: HistoryPluginOptions<CTX> & {
         disableShortcuts?: boolean;
     };
     /**
-     * redux 开发者工具配置
+     * redux devtool configuration
      */
     reduxDevTool?: ReduxDevToolPluginOptions;
+    /**
+     * Scroll configuration
+     * 滚动配置
+     */
     scroll?: {
-        disableScrollLimit?: boolean;
+        enableScrollLimit?: boolean;
         disableScrollBar?: boolean;
+        disableScroll?: boolean;
     };
     /**
-     * 节点转
-     * @param node
-     */
-    toNodeJSON?(node: FlowNodeEntity): FlowNodeJSON;
-    fromNodeJSON?(node: FlowNodeEntity, json: FlowNodeJSON): void;
-    /**
-     * 画布内部常量自定义
+     * Node data transformation, called by ctx.document.fromJSON
+     * 节点数据转换, 由 ctx.document.fromJSON 调用
+     * @param node - current node
+     * @param json - Current node json data
      */
-    constants?: Record<string, any>;
+    toNodeJSON?(node: FlowNodeEntity, json: FlowNodeJSON): FlowNodeJSON;
     /**
-     * 自定义节点线条
+     * Node data transformation, called by ctx.document.toJSON
+     * 节点数据转换, 由 ctx.document.toJSON 调用
+     * @param node - current node
+     * @param json - Current node json data
+     * @param isFirstCreate - Whether it is created for the first time, If document.fromJSON is recalled, but the node already exists, isFirstCreate is false
      */
-    formatNodeLines?: (node: FlowNodeEntity, lines: FlowTransitionLine[]) => FlowTransitionLine[];
+    fromNodeJSON?(node: FlowNodeEntity, json: FlowNodeJSON, isFirstCreate: boolean): FlowNodeJSON;
     /**
-     * 自定义节点 label
+     * Canvas internal constant customization
+     * 画布内部常量自定义
      */
-    formatNodeLabels?: (node: FlowNodeEntity, lines: FlowTransitionLabel[]) => FlowTransitionLabel[];
+    constants?: Record<string, any>;
     /**
+     * i18n
      * 国际化
      */
     i18n?: I18nPluginOptions;
@@ -124,10 +152,25 @@ declare namespace EditorProps {
     const DEFAULT: EditorProps;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 declare function createDefaultPreset<CTX extends EditorPluginContext = EditorPluginContext>(opts: EditorProps<CTX>, plugins?: Plugin[]): PluginsProvider<CTX>;
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 declare const EditorProvider: React__default.FC<EditorProps>;
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 /**
  * 画布编辑器
  * @param props
@@ -135,6 +178,11 @@ declare const EditorProvider: React__default.FC<EditorProps>;
  */
 declare const Editor: React__default.FC<EditorProps>;
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 interface HighLightOptions {
     padding?: number;
     overlayClassName?: string;
@@ -147,6 +195,11 @@ interface HighlightProps {
 }
 declare function useHighlight(props: HighlightProps): React.MutableRefObject<any> | null;
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 type FocusNodeCanvasOptions = PlaygroundConfigRevealOpts;
 interface FocusNodeFormItemOptions {
     canvas?: FocusNodeCanvasOptions;
@@ -160,10 +213,20 @@ declare class NodeFocusService {
     focusNodeFormItem(formItem: FormItem, options?: FocusNodeFormItemOptions): Promise<void>;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 declare class NodeClient {
     nodeFocusService: NodeFocusService;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 interface FocusNodeOptions {
     zoom?: PlaygroundConfigRevealOpts['zoom'];
     easing?: PlaygroundConfigRevealOpts['easing'];
@@ -177,9 +240,18 @@ declare class FlowEditorClient {
     focusNode(node: FlowNodeEntity, options?: FocusNodeOptions): void;
 }
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
 declare const createFlowEditorClientPlugin: _flowgram_ai_core.PluginCreator<{}>;
 declare const createFlowEditorClientPlugins: () => _flowgram_ai_core.Plugin<{}>[];
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 declare function useFlowEditor(): FlowEditorClient;
 
 export { Editor, type EditorPluginContext, EditorProps, EditorProvider, FlowEditorClient, type FocusNodeCanvasOptions, type FocusNodeFormItemOptions, type HighLightOptions, NodeClient, NodeFocusService, createDefaultPreset, createFlowEditorClientPlugin, createFlowEditorClientPlugins, highlightFormItem, useFlowEditor, useHighlight };

package/dist/index.js

@@ -37,26 +37,40 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
+  AsyncContainerModule: () => import_inversify4.AsyncContainerModule,
+  Container: () => import_inversify4.Container,
+  ContainerModule: () => import_inversify4.ContainerModule,
   Editor: () => Editor,
   EditorProps: () => EditorProps,
   EditorProvider: () => EditorProvider,
   EditorRenderer: () => import_core8.PlaygroundReactRenderer,
+  FeedbackLevel: () => import_form.FeedbackLevel,
   Field: () => import_form.Field,
   FieldArray: () => import_form.FieldArray,
   FlowEditorClient: () => FlowEditorClient,
-  FlowNodeFormData: () => import_form_core2.FlowNodeFormData,
+  FlowNodeFormData: () => import_form_core.FlowNodeFormData,
   Form: () => import_form.Form,
-  FormModel: () => import_node.FormModelV2,
+  FormModel: () => import_node2.FormModelV2,
   NodeClient: () => NodeClient,
   NodeFocusService: () => NodeFocusService,
-  NodeRender: () => import_form_core2.NodeRender,
+  NodeRender: () => import_form_core.NodeRender,
+  ReactiveBaseState: () => import_reactive.ReactiveBaseState,
+  ReactiveState: () => import_reactive.ReactiveState,
+  Tracker: () => import_reactive.Tracker,
   ValidateTrigger: () => import_form.ValidateTrigger,
   createDefaultPreset: () => createDefaultPreset,
   createFlowEditorClientPlugin: () => createFlowEditorClientPlugin,
   createFlowEditorClientPlugins: () => createFlowEditorClientPlugins,
+  createPlaygroundReactPreset: () => import_playground_react.createPlaygroundReactPreset,
   highlightFormItem: () => highlightFormItem,
+  inject: () => import_inversify4.inject,
+  injectable: () => import_inversify4.injectable,
+  multiInject: () => import_inversify4.multiInject,
+  named: () => import_inversify4.named,
+  observe: () => import_reactive.observe,
+  postConstruct: () => import_inversify4.postConstruct,
   useCurrentField: () => import_form.useCurrentField,
   useCurrentFieldState: () => import_form.useCurrentFieldState,
   useField: () => import_form.useField,
@@ -64,99 +78,49 @@ __export(src_exports, {
   useFlowEditor: () => useFlowEditor,
   useForm: () => import_form.useForm,
   useHighlight: () => useHighlight,
+  useObserve: () => import_reactive.useObserve,
+  useReactiveState: () => import_reactive.useReactiveState,
+  useReadonlyReactiveState: () => import_reactive.useReadonlyReactiveState,
   useWatch: () => import_form.useWatch
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_reflect_metadata = require("reflect-metadata");
-var import_node = require("@flowgram.ai/node");
-__reExport(src_exports, require("@flowgram.ai/utils"), module.exports);
-__reExport(src_exports, require("@flowgram.ai/core"), module.exports);
-__reExport(src_exports, require("@flowgram.ai/document"), module.exports);
-__reExport(src_exports, require("@flowgram.ai/renderer"), module.exports);
-__reExport(src_exports, require("@flowgram.ai/variable-plugin"), module.exports);
-__reExport(src_exports, require("@flowgram.ai/shortcuts-plugin"), module.exports);
-__reExport(src_exports, require("@flowgram.ai/node-core-plugin"), module.exports);
-__reExport(src_exports, require("@flowgram.ai/i18n-plugin"), module.exports);
-var import_form_core2 = require("@flowgram.ai/form-core");
-var import_form = require("@flowgram.ai/form");
-__reExport(src_exports, require("@flowgram.ai/node"), module.exports);
-
-// src/preset/editor-props.ts
+var import_node2 = require("@flowgram.ai/node");
+__reExport(index_exports, require("@flowgram.ai/utils"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/core"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/document"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/renderer"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/variable-plugin"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/shortcuts-plugin"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/node-core-plugin"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/i18n-plugin"), module.exports);
+var import_reactive = require("@flowgram.ai/reactive");
+var import_inversify4 = require("inversify");
 var import_form_core = require("@flowgram.ai/form-core");
-
-// src/constants.ts
-var EditorOptions = Symbol("EditorOptions");
+var import_form = require("@flowgram.ai/form");
+__reExport(index_exports, require("@flowgram.ai/node"), module.exports);
 
 // src/preset/editor-props.ts
 var EditorProps;
 ((EditorProps3) => {
   EditorProps3.DEFAULT = {
-    background: {},
-    fromNodeJSON(node, json) {
-      const formData = node.getData(import_form_core.FlowNodeFormData);
-      if (!formData) {
-        if (json.data) {
-          node.updateExtInfo(json.data);
-        }
-      } else {
-        const defaultFormMeta = node.getService(EditorOptions).nodeEngine?.createDefaultFormMeta?.(node);
-        const formMeta = node.getNodeRegistry()?.formMeta || defaultFormMeta;
-        if (formMeta) {
-          formData.createForm(formMeta, json.data);
-        }
-      }
-    },
-    toNodeJSON(node) {
-      const nodesMap = {};
-      let startNodeJSON;
-      node.document.traverse((node2) => {
-        const isSystemNode = node2.id.startsWith("$");
-        if (isSystemNode) return;
-        const formData = node2.getData(import_form_core.FlowNodeFormData);
-        let formJSON = formData && formData.formModel && formData.formModel.initialized ? formData.toJSON() : void 0;
-        const nodeJSON = {
-          id: node2.id,
-          type: node2.flowNodeType,
-          data: formData ? formJSON : node2.getExtInfo(),
-          blocks: []
-        };
-        if (!startNodeJSON) startNodeJSON = nodeJSON;
-        let { parent } = node2;
-        if (parent && parent.id.startsWith("$")) {
-          parent = parent.originParent;
-        }
-        const parentJSON = parent ? nodesMap[parent.id] : void 0;
-        if (parentJSON) {
-          parentJSON.blocks?.push(nodeJSON);
-        }
-        nodesMap[node2.id] = nodeJSON;
-      }, node);
-      return startNodeJSON;
-    }
+    background: {}
   };
 })(EditorProps || (EditorProps = {}));
 
 // src/preset/editor-default-preset.ts
+var import_variable_plugin = require("@flowgram.ai/variable-plugin");
 var import_renderer = require("@flowgram.ai/renderer");
 var import_redux_devtool_plugin = require("@flowgram.ai/redux-devtool-plugin");
-var import_playground_react = require("@flowgram.ai/playground-react");
 var import_node_variable_plugin = require("@flowgram.ai/node-variable-plugin");
 var import_node_core_plugin = require("@flowgram.ai/node-core-plugin");
+var import_node = require("@flowgram.ai/node");
 var import_materials_plugin = require("@flowgram.ai/materials-plugin");
 var import_i18n_plugin = require("@flowgram.ai/i18n-plugin");
 var import_history_node_plugin = require("@flowgram.ai/history-node-plugin");
 var import_document2 = require("@flowgram.ai/document");
 var import_core6 = require("@flowgram.ai/core");
 
-// src/utils/compose.ts
-var compose = (fnList) => (node, data) => {
-  const list = fnList.filter(Boolean);
-  if (!list.length) {
-    return data;
-  }
-  return list.reduce((acc, fn) => fn(node, acc), data);
-};
-
 // src/clients/flow-editor-client-plugins.ts
 var import_core5 = require("@flowgram.ai/core");
 
@@ -351,7 +315,6 @@ var createFlowEditorClientPlugins = () => [
 function createDefaultPreset(opts, plugins = []) {
   return (ctx) => {
     opts = { ...EditorProps.DEFAULT, ...opts };
-    ctx.container.bind(EditorOptions).toConstantValue(opts);
     if (opts.i18n) {
       plugins.push((0, import_i18n_plugin.createI18nPlugin)(opts.i18n));
     }
@@ -371,7 +334,7 @@ function createDefaultPreset(opts, plugins = []) {
       if (opts.variableEngine?.enable) {
         plugins.push((0, import_node_variable_plugin.createNodeVariablePlugin)({}));
       }
-      if (opts.history?.enable) {
+      if (opts.history?.enable && opts.history?.enableChangeNode !== false) {
         plugins.push((0, import_history_node_plugin.createHistoryNodePlugin)({}));
       }
     }
@@ -384,21 +347,39 @@ function createDefaultPreset(opts, plugins = []) {
           if (opts.constants) {
             ctx2.document.options.constants = opts.constants;
           }
-          if (opts.formatNodeLines) {
-            ctx2.document.options.formatNodeLines = compose([
-              ctx2.document.options.formatNodeLines,
-              opts.formatNodeLines
-            ]);
-          }
-          if (opts.formatNodeLabels) {
-            ctx2.document.options.formatNodeLabels = compose([
-              ctx2.document.options.formatNodeLabels,
-              opts.formatNodeLabels
-            ]);
-          }
           if (opts.getNodeDefaultRegistry) {
             ctx2.document.options.getNodeDefaultRegistry = opts.getNodeDefaultRegistry;
           }
+          ctx2.document.options.preNodeCreate = (node) => {
+            if (opts.nodeEngine && opts.nodeEngine.enable !== false) {
+              let cache;
+              Object.defineProperty(node, "form", {
+                get: () => {
+                  if (cache) return cache;
+                  cache = (0, import_node.getNodeForm)(node);
+                  return cache;
+                }
+              });
+            }
+            if (opts.variableEngine && opts.variableEngine.enable !== false) {
+              let cache;
+              let privateCache;
+              Object.defineProperty(node, "scope", {
+                get: () => {
+                  if (cache) return cache;
+                  cache = (0, import_variable_plugin.getNodeScope)(node);
+                  return cache;
+                }
+              });
+              Object.defineProperty(node, "privateScope", {
+                get: () => {
+                  if (privateCache) return privateCache;
+                  privateCache = (0, import_variable_plugin.getNodePrivateScope)(node);
+                  return privateCache;
+                }
+              });
+            }
+          };
           ctx2.get(import_renderer.FlowRendererRegistry).init();
         },
         onReady(ctx2) {
@@ -418,7 +399,7 @@ function createDefaultPreset(opts, plugins = []) {
         containerModules: defaultContainerModules
       })
     );
-    return (0, import_playground_react.createPlaygroundReactPreset)(opts, plugins)(ctx);
+    return plugins;
   };
 }
 
@@ -461,13 +442,18 @@ function useFlowEditor() {
 }
 
 // src/index.ts
-__reExport(src_exports, require("@flowgram.ai/node-variable-plugin"), module.exports);
+__reExport(index_exports, require("@flowgram.ai/node-variable-plugin"), module.exports);
+var import_playground_react = require("@flowgram.ai/playground-react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AsyncContainerModule,
+  Container,
+  ContainerModule,
   Editor,
   EditorProps,
   EditorProvider,
   EditorRenderer,
+  FeedbackLevel,
   Field,
   FieldArray,
   FlowEditorClient,
@@ -477,11 +463,21 @@ __reExport(src_exports, require("@flowgram.ai/node-variable-plugin"), module.exp
   NodeClient,
   NodeFocusService,
   NodeRender,
+  ReactiveBaseState,
+  ReactiveState,
+  Tracker,
   ValidateTrigger,
   createDefaultPreset,
   createFlowEditorClientPlugin,
   createFlowEditorClientPlugins,
+  createPlaygroundReactPreset,
   highlightFormItem,
+  inject,
+  injectable,
+  multiInject,
+  named,
+  observe,
+  postConstruct,
   useCurrentField,
   useCurrentFieldState,
   useField,
@@ -489,6 +485,9 @@ __reExport(src_exports, require("@flowgram.ai/node-variable-plugin"), module.exp
   useFlowEditor,
   useForm,
   useHighlight,
+  useObserve,
+  useReactiveState,
+  useReadonlyReactiveState,
   useWatch,
   ...require("@flowgram.ai/utils"),
   ...require("@flowgram.ai/core"),