admin/flowgram.ai
1
0
Fork 0
mirror of https://gitee.com/ByteDance/flowgram.ai.git synced 2025-07-07 17:43:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demo): remove sync-variable-plugin in demo-nextjs-antd (#442)

Browse Source
This commit is contained in:
Yiwei Mao 2025-07-02 15:10:44 +08:00 committed by GitHub
parent d8e2b4a838
commit 522bc0770d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 211 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/demo-nextjs-antd/src/editor/hooks/use-editor-props.tsx
View File

@ -18,7 +18,7 @@ import { createContainerNodePlugin } from '@flowgram.ai/free-container-plugin';
import { onDragLineEnd } from '@editor/utils';
import { FlowNodeRegistry } from '@editor/typings';
import { createContextMenuPlugin, createSyncVariablePlugin } from '@editor/plugins';
import { createContextMenuPlugin } from '@editor/plugins';
import { defaultFormMeta } from '@editor/nodes/default-form-meta';
import { WorkflowNodeType } from '@editor/nodes';
import { BaseNode } from '@editor/components/base-node';
@ -156,11 +156,6 @@ export const useEditorProps = (initialData: WorkflowJSON, nodeRegistries: FlowNo
},
inactiveDebounceTime: 1,
}),
/**
* Variable plugin
* 变量插件
*/
createSyncVariablePlugin({}),
/**
* Snap plugin
* 自动对齐及辅助线插件

6
apps/demo-nextjs-antd/src/editor/nodes/default-form-meta.tsx
View File

@ -4,7 +4,7 @@
*/
import { FormMeta, FormRenderProps, ValidateTrigger } from '@flowgram.ai/free-layout-editor';
import { autoRenameRefEffect } from '@flowgram.ai/form-antd-materials';
import { autoRenameRefEffect, syncVariableTitle, provideJsonSchemaOutputs } from '@flowgram.ai/form-antd-materials';
import { FormContent, FormHeader, FormInputs, FormOutputs } from '@editor/form-components';
import { FlowNodeJSON } from '../typings';
@ -36,7 +36,9 @@ export const defaultFormMeta: FormMeta<FlowNodeJSON> = {
return undefined;
},
},
effect: {
effect: {
title: syncVariableTitle,
outputs: provideJsonSchemaOutputs,
inputsValues: autoRenameRefEffect,
},
};

6
apps/demo-nextjs-antd/src/editor/nodes/start/form-meta.tsx
View File

@ -12,7 +12,7 @@ import {
FormRenderProps,
ValidateTrigger,
} from '@flowgram.ai/free-layout-editor';
import { JsonSchemaEditor } from '@flowgram.ai/form-antd-materials';
import { JsonSchemaEditor, syncVariableTitle, provideJsonSchemaOutputs } from '@flowgram.ai/form-antd-materials';
import { FlowNodeJSON, JsonSchema } from '@editor/typings';
import { useIsSidebar } from '@editor/hooks';
@ -57,4 +57,8 @@ export const formMeta: FormMeta<FlowNodeJSON> = {
validate: {
title: ({ value }: { value: string }) => (value ? undefined : 'Title is required'),
},
effect: {
title: syncVariableTitle,
outputs: provideJsonSchemaOutputs,
},
};

1
apps/demo-nextjs-antd/src/editor/plugins/index.ts
View File

@ -3,5 +3,4 @@
* SPDX-License-Identifier: MIT
*/
export { createSyncVariablePlugin } from './sync-variable-plugin/sync-variable-plugin';
export { createContextMenuPlugin } from './context-menu-plugin';

85
apps/demo-nextjs-antd/src/editor/plugins/sync-variable-plugin/sync-variable-plugin.ts
View File

@ -1,85 +0,0 @@
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
'use client';
import {
ASTFactory,
FlowNodeVariableData,
FreeLayoutPluginContext,
PluginCreator,
definePluginCreator,
getNodeForm,
} from '@flowgram.ai/free-layout-editor';
import { JsonSchemaUtils } from '@flowgram.ai/form-antd-materials';
export interface SyncVariablePluginOptions {}
/**
* Creates a plugin to synchronize output data to the variable engine when nodes are created or updated.
* @param ctx - The plugin context, containing the document and other relevant information.
* @param options - Plugin options, currently an empty object.
*/
export const createSyncVariablePlugin: PluginCreator<SyncVariablePluginOptions> =
definePluginCreator<SyncVariablePluginOptions, FreeLayoutPluginContext>({
onInit(ctx, options) {
const flowDocument = ctx.document;
// Listen for node creation events
flowDocument.onNodeCreate(({ node }) => {
const form = getNodeForm(node);
const variableData = node.getData(FlowNodeVariableData);
/**
* Synchronizes output data to the variable engine.
* @param value - The output data to synchronize.
*/
const syncOutputs = (value: any) => {
if (!value) {
// If the output data is empty, clear the variable
variableData?.clearVar();
return;
}
// Create an Type AST from the output data's JSON schema
// NOTICE: You can create a new function to generate an AST based on YOUR CUSTOM DSL
const typeAST = JsonSchemaUtils.schemaToAST(value);
if (typeAST) {
// Use the node's title or its ID as the title for the variable
const title = form?.getValueIn('title') || node.id;
// Set the variable in the variable engine
variableData?.setVar(
ASTFactory.createVariableDeclaration({
meta: {
title: `${title}`,
icon: node.getNodeRegistry()?.info?.icon,
// NOTICE: You can add more metadata here as needed
},
key: `${node.id}`,
type: typeAST,
})
);
} else {
// If the AST cannot be created, clear the variable
variableData?.clearVar();
}
};
if (form) {
// Initially synchronize the output data
syncOutputs(form.getValueIn('outputs'));
// Listen for changes in the form values and re-synchronize when outputs change
form.onFormValuesChange((props) => {
if (props.name.match(/^outputs/) || props.name.match(/^title/)) {
syncOutputs(form.getValueIn('outputs'));
}
});
}
});
},
});

2
packages/materials/form-antd-materials/src/effects/index.ts
View File

@ -6,3 +6,5 @@
export * from './provide-batch-input';
export * from './provide-batch-outputs';
export * from './auto-rename-ref';
export * from './provide-json-schema-outputs';
export * from './sync-variable-title';

1
packages/materials/form-antd-materials/src/effects/provide-batch-outputs/index.ts
View File

@ -14,7 +14,6 @@ import {
import { IFlowRefValue } from '../../typings';
export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
private: true,
parse: (value: Record<string, IFlowRefValue>, ctx) => [
ASTFactory.createVariableDeclaration({
key: `${ctx.node.id}`,

8
packages/materials/form-antd-materials/src/effects/provide-json-schema-outputs/config.json Normal file
View File

@ -0,0 +1,8 @@
{
"name": "provide-json-schema-outputs",
"depMaterials": [
"typings/json-schema",
"utils/json-schema"
],
"depPackages": []
}

28
packages/materials/form-antd-materials/src/effects/provide-json-schema-outputs/index.ts Normal file
View File

@ -0,0 +1,28 @@
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
import {
ASTFactory,
EffectOptions,
FlowNodeRegistry,
createEffectFromVariableProvider,
getNodeForm,
} from '@flowgram.ai/editor';
import { JsonSchemaUtils } from '../../utils';
import { IJsonSchema } from '../../typings';
export const provideJsonSchemaOutputs: EffectOptions[] = createEffectFromVariableProvider({
parse: (value: IJsonSchema, ctx) => [
ASTFactory.createVariableDeclaration({
key: `${ctx.node.id}`,
meta: {
title: getNodeForm(ctx.node)?.getValueIn('title') || ctx.node.id,
icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
},
type: JsonSchemaUtils.schemaToAST(value),
}),
],
});

5
packages/materials/form-antd-materials/src/effects/sync-variable-title/config.json Normal file
View File

@ -0,0 +1,5 @@
{
"name": "sync-variable-title",
"depMaterials": [],
"depPackages": []
}

28
packages/materials/form-antd-materials/src/effects/sync-variable-title/index.ts Normal file
View File

@ -0,0 +1,28 @@
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
import {
DataEvent,
Effect,
EffectOptions,
FlowNodeRegistry,
FlowNodeVariableData,
} from '@flowgram.ai/editor';
export const syncVariableTitle: EffectOptions[] = [
{
event: DataEvent.onValueChange,
effect: (({ value, context }) => {
context.node.getData(FlowNodeVariableData).allScopes.forEach((_scope) => {
_scope.output.variables.forEach((_var) => {
_var.updateMeta({
title: value || context.node.id,
icon: context.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
});
});
});
}) as Effect,
},
];

7
packages/materials/form-antd-materials/src/form-plugins/batch-outputs-plugin/config.json Normal file
View File

@ -0,0 +1,7 @@
{
"name": "batch-outputs-plugin",
"depMaterials": [
"flow-value"
],
"depPackages": []
}

104
packages/materials/form-antd-materials/src/form-plugins/batch-outputs-plugin/index.ts Normal file
View File

@ -0,0 +1,104 @@
/**
* Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
* SPDX-License-Identifier: MIT
*/
import {
ASTFactory,
createEffectFromVariableProvider,
defineFormPluginCreator,
FlowNodeRegistry,
getNodeForm,
getNodePrivateScope,
getNodeScope,
ScopeChainTransformService,
type EffectOptions,
type FormPluginCreator,
FlowNodeScopeType,
} from '@flowgram.ai/editor';
import { IFlowRefValue } from '../../typings';
export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
parse: (value: Record<string, IFlowRefValue>, ctx) => [
ASTFactory.createVariableDeclaration({
key: `${ctx.node.id}`,
meta: {
title: getNodeForm(ctx.node)?.getValueIn('title'),
icon: ctx.node.getNodeRegistry<FlowNodeRegistry>().info?.icon,
},
type: ASTFactory.createObject({
properties: Object.entries(value).map(([_key, value]) =>
ASTFactory.createProperty({
key: _key,
initializer: ASTFactory.createWrapArrayExpression({
wrapFor: ASTFactory.createKeyPathExpression({
keyPath: value?.content || [],
}),
}),
})
),
}),
}),
],
});
/**
* Free Layout only right now
*/
export const createBatchOutputsFormPlugin: FormPluginCreator<{ outputKey: string }> =
defineFormPluginCreator({
name: 'batch-outputs-plugin',
onSetupFormMeta({ mergeEffect }, { outputKey }) {
mergeEffect({
[outputKey]: provideBatchOutputsEffect,
});
},
onInit(ctx, { outputKey }) {
const chainTransformService = ctx.node.getService(ScopeChainTransformService);
const batchNodeType = ctx.node.flowNodeType;
const transformerId = `${batchNodeType}-outputs`;
if (chainTransformService.hasTransformer(transformerId)) {
return;
}
chainTransformService.registerTransformer(transformerId, {
transformCovers: (covers, ctx) => {
const node = ctx.scope.meta?.node;
// Child Node's variable can cover parent
if (node?.parent?.flowNodeType === batchNodeType) {
return [...covers, getNodeScope(node.parent)];
}
return covers;
},
transformDeps(scopes, ctx) {
const scopeMeta = ctx.scope.meta;
if (scopeMeta?.type === FlowNodeScopeType.private) {
return scopes;
}
const node = scopeMeta?.node;
// Public of Loop Node depends on child Node
if (node?.flowNodeType === batchNodeType) {
// Get all child blocks
const childBlocks = node.blocks;
// public scope of all child blocks
return [
getNodePrivateScope(node),
...childBlocks.map((_childBlock) => getNodeScope(_childBlock)),
];
}
return scopes;
},
});
},
});

2
apps/demo-nextjs-antd/src/editor/plugins/sync-variable-plugin/index.ts → packages/materials/form-antd-materials/src/form-plugins/index.ts
View File

@ -3,4 +3,4 @@
* SPDX-License-Identifier: MIT
*/
export * from './sync-variable-plugin';
export { createBatchOutputsFormPlugin } from './batch-outputs-plugin';

1
packages/materials/form-antd-materials/src/index.ts
View File

@ -7,3 +7,4 @@ export * from './components';
export * from './effects';
export * from './utils';
export * from './typings';
export * from './form-plugins';

2
packages/materials/form-antd-materials/src/utils/index.ts
View File

@ -4,5 +4,5 @@
*/
export * from './format-legacy-refs';
export * from './json-schema';
export * from './svg-icon';
export * from './json-schema';

18
packages/materials/form-antd-materials/src/utils/json-schema/index.ts
View File

@ -42,7 +42,10 @@ export namespace JsonSchemaUtils {
.map(([key, _property]) => ({
key,
type: schemaToAST(_property),
meta: { description: _property.description },
meta: {
title: _property.title,
description: _property.description,
},
})),
});
case 'array':
@ -114,7 +117,18 @@ export namespace JsonSchemaUtils {
type: 'object',
properties: drilldown
? Object.fromEntries(
Object.entries(typeAST.properties).map(([key, value]) => [key, astToSchema(value)!])
typeAST.properties.map((property) => {
const schema = astToSchema(property.type);
if (property.meta?.title && schema) {
schema.title = property.meta.title;
}
if (property.meta?.description && schema) {
schema.description = property.meta.description;
}
return [property.key, schema!];
})
)
: {},
};