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

Merge branch 'main' into docs-link2

Browse Source
This commit is contained in:
xiamidaxia 2025-03-18 16:12:45 +08:00 committed by GitHub
commit d89d124cc8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
39 changed files with 1128 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.github/CODEOWNERS vendored
View File

@ -1,6 +1,9 @@
# 文件路径与代码负责人分配
# 对整个仓库设置代码负责人
* @xiamidaxia @luics
* @xiamidaxia @luics @dragooncjw
# 对特定目录设置代码负责人
/docs/ @xiamidaxia @dragooncjw
/apps/docs/ @xiamidaxia @dragooncjw @YuanHeDx
/apps/demo-node-form/ @YuanHeDx
/packages/node-engine/ @YuanHeDx
/packages/plugins/node-core-plugin/ @YuanHeDx

15
apps/demo-node-form/.eslintrc.js Normal file
View File

@ -0,0 +1,15 @@
const { defineConfig } = require('@flowgram.ai/eslint-config');
module.exports = defineConfig({
preset: 'web',
packageRoot: __dirname,
rules: {
'no-console': 'off',
'react/prop-types': 'off',
},
settings: {
react: {
version: 'detect', // 自动检测 React 版本
},
},
});

12
apps/demo-node-form/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en" data-bundler="rspack">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flow FreeLayoutEditor Demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

56
apps/demo-node-form/package.json Normal file
View File

@ -0,0 +1,56 @@
{
"name": "@flowgram.ai/demo-node-form",
"version": "0.1.0",
"description": "",
"keywords": [],
"license": "MIT",
"main": "./src/index.tsx",
"files": [
"src/",
".eslintrc.js",
".gitignore",
"index.html",
"package.json",
"rspack.config.js",
"tsconfig.json"
],
"scripts": {
"build": "exit 0",
"build:fast": "exit 0",
"build:watch": "exit 0",
"clean": "rimraf dist",
"dev": "MODE=app NODE_ENV=development rspack serve",
"lint": "eslint ./src --cache",
"lint:fix": "eslint ./src --fix",
"start": "NODE_ENV=development rspack serve",
"test": "exit",
"test:cov": "exit",
"watch": "exit 0"
},
"dependencies": {
"@douyinfe/semi-icons": "^2.72.3",
"@douyinfe/semi-ui": "^2.72.3",
"@flowgram.ai/free-layout-editor": "workspace:*",
"@flowgram.ai/free-snap-plugin": "workspace:*",
"@flowgram.ai/minimap-plugin": "workspace:*",
"react": "^18",
"react-dom": "^18",
"styled-components": "^5"
},
"devDependencies": {
"@flowgram.ai/ts-config": "workspace:*",
"@flowgram.ai/eslint-config": "workspace:*",
"@rspack/cli": "0.2.1",
"@types/lodash-es": "^4.17.12",
"@types/node": "^18",
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/styled-components": "^5",
"@typescript-eslint/parser": "^6.10.0",
"eslint": "^8.54.0"
},
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
}
}

46
apps/demo-node-form/rspack.config.js Normal file
View File

@ -0,0 +1,46 @@
const path = require('path');
const isCI = process.env.CI === 'true';
const isSCM = !!process.env.BUILD_BRANCH;
const isProd = process.env.NODE_ENV === 'production';
/**
* @type {import('@rspack/cli').Configuration}
*/
module.exports = {
mode: process.env.NODE_ENV,
context: __dirname,
target: ['web'],
entry: {
main: './src/app.tsx',
},
builtins: {
// https://www.rspack.dev/config/builtins.html#builtinshtml
html: [
{
template: './index.html',
},
],
progress: !isSCM ? {} : false,
treeShaking: isProd,
},
module: {
// https://www.rspack.dev/config/module.html#rule
rules: [
{
test: /\.(png|gif|jpg|jpeg|svg|woff2)$/,
type: 'asset',
},
],
},
plugins: [],
/** module is too large now, we may need better way to tackle this in the future */
stats: isCI
? { all: false, modules: true, assets: true, chunks: true, warnings: true, errors: true }
: {
modules: false,
all: false,
warnings: false,
errors: true,
timings: true,
},
};

7
apps/demo-node-form/src/app.tsx Normal file
View File

@ -0,0 +1,7 @@
import { createRoot } from 'react-dom/client';
import { Editor } from './editor';
const app = createRoot(document.getElementById('root')!);
app.render(<Editor />);

5
apps/demo-node-form/src/components/field-title.tsx Normal file
View File

@ -0,0 +1,5 @@
import styled from 'styled-components';
export const FieldTitle = styled.div`
padding-bottom: 4px;
`;

24
apps/demo-node-form/src/components/field-wrapper.css Normal file
View File

@ -0,0 +1,24 @@
.error-message {
color: #f5222d !important;
}
.required {
color: #f5222d !important;
padding-left: 4px
}
.field-wrapper {
width: 100%;
margin-bottom: 12px;
}
.field-title {
margin-bottom: 6px;
}
.field-note{
color: #a3a0a0 !important;
font-size: 12px;
margin: 6px 0;
}

24
apps/demo-node-form/src/components/field-wrapper.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import './field-wrapper.css';
interface FieldWrapperProps {
required?: boolean;
title: string;
children?: React.ReactNode;
error?: string;
note?: string;
}
export const FieldWrapper = ({ required, title, children, error, note }: FieldWrapperProps) => (
<div className="field-wrapper">
<div className="field-title">
{title}
{note ? <p className="field-note">{note}</p> : null}
{required ? <span className="required">*</span> : null}
</div>
{children}
<p className="error-message">{error}</p>
{note ? <br /> : null}
</div>
);

2
apps/demo-node-form/src/components/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { FieldTitle } from './field-title';
export { FieldWrapper } from './field-wrapper';

65
apps/demo-node-form/src/constant.ts Normal file
View File

@ -0,0 +1,65 @@
export const fieldWrapperTs = `import React from 'react';
import './field-wrapper.css';
interface FieldWrapperProps {
required?: boolean;
title: string;
children?: React.ReactNode;
error?: string;
note?: string;
}
export const FieldWrapper = ({ required, title, children, error, note }: FieldWrapperProps) => (
<div className="field-wrapper">
<div className="field-title">
{title}
{note ? <p className="field-note">{note}</p> : null}
{required ? <span className="required">*</span> : null}
</div>
{children}
<p className="error-message">{error}</p>
{note ? <br /> : null}
</div>
);
`;
export const fieldWrapperCss = `.error-message {
color: #f5222d !important;
}
.required {
color: #f5222d !important;
padding-left: 4px
}
.field-wrapper {
width: 100%;
margin-bottom: 12px;
}
.field-title {
margin-bottom: 6px;
}
.field-note{
color: #a3a0a0 !important;
font-size: 12px;
margin: 6px 0;
}
`;
export const defaultInitialDataTs = `import { WorkflowJSON } from '@flowgram.ai/free-layout-editor';
export const DEFAULT_INITIAL_DATA: WorkflowJSON = {
nodes: [
{
id: 'node_0',
type: 'custom',
meta: {
position: { x: 400, y: 0 },
},
},
],
edges: [],
};`;

27
apps/demo-node-form/src/editor.tsx Normal file
View File

@ -0,0 +1,27 @@
import {
EditorRenderer,
FlowNodeRegistry,
FreeLayoutEditorProvider,
WorkflowJSON,
} from '@flowgram.ai/free-layout-editor';
import { useEditorProps } from './hooks/use-editor-props';
import '@flowgram.ai/free-layout-editor/index.css';
import './index.css';
interface EditorProps {
registry: FlowNodeRegistry;
initialData: WorkflowJSON;
}
export const Editor = ({ registry, initialData }: EditorProps) => {
const editorProps = useEditorProps({ registries: [registry], initialData });
return (
<FreeLayoutEditorProvider {...editorProps}>
<div className="demo-free-container">
<div className="demo-free-layout">
<EditorRenderer className="demo-free-editor" />
</div>
</div>
</FreeLayoutEditorProvider>
);
};

51
apps/demo-node-form/src/form-meta.tsx Normal file
View File

@ -0,0 +1,51 @@
import {
Field,
FieldRenderProps,
FormMeta,
ValidateTrigger,
} from '@flowgram.ai/free-layout-editor';
import { Input } from '@douyinfe/semi-ui';
// FieldWrapper is not provided by sdk, and can be customized
import { FieldWrapper } from './components';
const render = () => (
<div className="demo-node-content">
<div className="demo-node-title">Basic Node</div>
<Field name="name">
{({ field, fieldState }: FieldRenderProps<string>) => (
<FieldWrapper required title="Name" error={fieldState.errors?.[0]?.message}>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
<Field name="city">
{({ field, fieldState }: FieldRenderProps<string>) => (
<FieldWrapper required title="City" error={fieldState.errors?.[0]?.message}>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
</div>
);
const formMeta: FormMeta = {
render,
defaultValues: { name: 'Tina', city: 'Hangzhou' },
validateTrigger: ValidateTrigger.onChange,
validate: {
name: ({ value }) => {
if (!value) {
return 'Name is required';
}
},
city: ({ value }) => {
if (!value) {
return 'City is required';
}
},
},
};
export const DEFAULT_FORM_META = formMeta;

165
apps/demo-node-form/src/hooks/use-editor-props.tsx Normal file
View File

@ -0,0 +1,165 @@
import { useMemo } from 'react';
import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
import { createFreeSnapPlugin } from '@flowgram.ai/free-snap-plugin';
import {
FreeLayoutProps,
WorkflowNodeProps,
WorkflowNodeRenderer,
Field,
useNodeRender,
FlowNodeRegistry,
WorkflowJSON,
} from '@flowgram.ai/free-layout-editor';
import { DEFAULT_DEMO_REGISTRY } from '../node-registries';
import { DEFAULT_INITIAL_DATA } from '../initial-data';
interface EditorProps {
registries: FlowNodeRegistry[];
initialData: WorkflowJSON;
}
export const useEditorProps = ({
registries = [DEFAULT_DEMO_REGISTRY],
initialData = DEFAULT_INITIAL_DATA,
}: EditorProps) =>
useMemo<FreeLayoutProps>(
() => ({
/**
* Whether to enable the background
*/
background: true,
/**
* Whether it is read-only or not, the node cannot be dragged in read-only mode
*/
readonly: false,
/**
* Initial data
* 初始化数据
*/
initialData,
/**
* Node registries
* 节点注册
*/
nodeRegistries: registries,
/**
* Get the default node registry, which will be merged with the 'nodeRegistries'
* 提供默认的节点注册，这个会和 nodeRegistries 做合并
*/
getNodeDefaultRegistry(type) {
return {
type,
meta: {
defaultExpanded: true,
},
formMeta: {
/**
* Render form
*/
render: () => (
<>
<Field<string> name="title">
{({ field }) => <div className="demo-free-node-title">{field.value}</div>}
</Field>
<div className="demo-free-node-content">
<Field<string> name="content">
<input />
</Field>
</div>
</>
),
},
};
},
materials: {
/**
* Render Node
*/
renderDefaultNode: (props: WorkflowNodeProps) => {
const { form } = useNodeRender();
return (
<WorkflowNodeRenderer className="demo-free-node" node={props.node}>
{form?.render()}
</WorkflowNodeRenderer>
);
},
},
/**
* Content change
*/
onContentChange(ctx, event) {
// console.log('Auto Save: ', event, ctx.document.toJSON());
},
// /**
// * Node engine enable, you can configure formMeta in the FlowNodeRegistry
// */
nodeEngine: {
enable: true,
},
/**
* Redo/Undo enable
*/
history: {
enable: true,
enableChangeNode: true, // Listen Node engine data change
},
/**
* Playground init
*/
onInit: (ctx) => {},
/**
* Playground render
*/
onAllLayersRendered(ctx) {
// Fitview
ctx.document.fitView(false);
},
/**
* Playground dispose
*/
onDispose() {
console.log('---- Playground Dispose ----');
},
plugins: () => [
/**
* Minimap plugin
* 缩略图插件
*/
createMinimapPlugin({
disableLayer: true,
canvasStyle: {
canvasWidth: 182,
canvasHeight: 102,
canvasPadding: 50,
canvasBackground: 'rgba(245, 245, 245, 1)',
canvasBorderRadius: 10,
viewportBackground: 'rgba(235, 235, 235, 1)',
viewportBorderRadius: 4,
viewportBorderColor: 'rgba(201, 201, 201, 1)',
viewportBorderWidth: 1,
viewportBorderDashLength: 2,
nodeColor: 'rgba(255, 255, 255, 1)',
nodeBorderRadius: 2,
nodeBorderWidth: 0.145,
nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
overlayColor: 'rgba(255, 255, 255, 0)',
},
inactiveDebounceTime: 1,
}),
/**
* Snap plugin
* 自动对齐及辅助线插件
*/
createFreeSnapPlugin({
edgeColor: '#00B2B2',
alignColor: '#00B2B2',
edgeLineWidth: 1,
alignLineWidth: 1,
alignCrossWidth: 8,
}),
],
}),
[]
);

113
apps/demo-node-form/src/index.css Normal file
View File

@ -0,0 +1,113 @@
.demo-free-node {
display: flex;
min-width: 300px;
min-height: 100px;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid var(--light-usage-border-color-border, rgba(28, 31, 35, 0.08));
background: #fff;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.demo-node-content {
padding: 8px 12px;
flex-grow: 1;
width: 100%;
}
.demo-node-title {
font-weight: 500;
font-size: 14px;
width: 100%;
margin: 4px 0px 12px 0px;
}
.demo-free-node-content {
padding: 4px 12px;
flex-grow: 1;
width: 100%;
}
.demo-free-node::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-color: white;
border-radius: 7px;
}
.demo-free-node:hover:before {
-webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
}
.demo-free-node.activated:before,
.demo-free-node.selected:before {
outline: 2px solid var(--light-usage-primary-color-primary, #4d53e8);
-webkit-filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.1));
}
.demo-free-sidebar {
height: 100%;
overflow-y: auto;
padding: 12px 16px 0;
box-sizing: border-box;
background: #f7f7fa;
border-right: 1px solid rgba(29, 28, 35, 0.08);
}
.demo-free-right-top-panel {
position: fixed;
right: 10px;
top: 70px;
width: 300px;
z-index: 999;
}
.demo-free-card {
width: 140px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 6px 8px 0 rgba(28, 31, 35, 0.03);
cursor: -webkit-grab;
cursor: grab;
line-height: 16px;
margin-bottom: 12px;
overflow: hidden;
padding: 16px;
position: relative;
color: black;
}
.demo-free-layout {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.demo-free-editor {
flex-grow: 1;
position: relative;
height: 100%;
}
.demo-free-container {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
}

6
apps/demo-node-form/src/index.tsx Normal file
View File

@ -0,0 +1,6 @@
export { Editor } from './editor';
export { FieldTitle, FieldWrapper } from './components';
export { DEFAULT_FORM_META } from './form-meta';
export { DEFAULT_DEMO_REGISTRY } from './node-registries';
export { DEFAULT_INITIAL_DATA } from './initial-data';
export { fieldWrapperTs, fieldWrapperCss, defaultInitialDataTs } from './constant';

14
apps/demo-node-form/src/initial-data.ts Normal file
View File

@ -0,0 +1,14 @@
import { WorkflowJSON } from '@flowgram.ai/free-layout-editor';
export const DEFAULT_INITIAL_DATA: WorkflowJSON = {
nodes: [
{
id: 'node_0',
type: 'custom',
meta: {
position: { x: 400, y: 0 },
},
},
],
edges: [],
};

10
apps/demo-node-form/src/node-registries.tsx Normal file
View File

@ -0,0 +1,10 @@
import { WorkflowNodeRegistry } from '@flowgram.ai/free-layout-editor';
import { DEFAULT_FORM_META } from './form-meta';
export const DEFAULT_DEMO_REGISTRY: WorkflowNodeRegistry = {
type: 'custom',
meta: {},
defaultPorts: [{ type: 'output' }, { type: 'input' }],
formMeta: DEFAULT_FORM_META,
};

23
apps/demo-node-form/tsconfig.json Normal file
View File

@ -0,0 +1,23 @@
{
"extends": "@flowgram.ai/ts-config/tsconfig.flow.path.json",
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist",
"experimentalDecorators": true,
"target": "es2020",
"module": "esnext",
"strictPropertyInitialization": false,
"strict": true,
"esModuleInterop": true,
"moduleResolution": "node",
"skipLibCheck": true,
"noUnusedLocals": true,
"noImplicitAny": true,
"allowJs": true,
"resolveJsonModule": true,
"types": ["node"],
"jsx": "react-jsx",
"lib": ["es6", "dom", "es2020", "es2019.Array"]
},
"include": ["./src"],
}

1
apps/docs/components/index.ts
View File

@ -5,3 +5,4 @@ export { FreeLayoutSimple } from './free-layout-simple';
export { FreeLayoutSimplePreview } from './free-layout-simple/preview';
export { FixedLayoutSimple } from './fixed-layout-simple';
export { FixedLayoutSimplePreview } from './fixed-layout-simple/preview';
export { NodeFormBasicPreview, NodeFormEffectPreview } from './node-form';

87
apps/docs/components/node-form/basic-preview.tsx Normal file
View File

@ -0,0 +1,87 @@
import {
DEFAULT_DEMO_REGISTRY,
DEFAULT_INITIAL_DATA,
defaultInitialDataTs,
fieldWrapperCss,
fieldWrapperTs,
} from '@flowgram.ai/demo-node-form';
import { PreviewEditor } from '../preview-editor';
import { Editor } from './editor';
const registryCode = {
code: `import {
Field,
FieldRenderProps,
FormMeta,
ValidateTrigger,
} from '@flowgram.ai/free-layout-editor';
import { Input } from '@douyinfe/semi-ui';
// FieldWrapper is not provided by sdk, it can be customized
import { FieldWrapper } from './components';
const render = () => (
<div className="demo-node-content">
<div className="demo-node-title">Basic Node</div>
<Field name="name">
{({ field, fieldState }: FieldRenderProps<string>) => (
<FieldWrapper required title="Name" error={fieldState.errors?.[0]?.message}>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
<Field name="city">
{({ field, fieldState }: FieldRenderProps<string>) => (
<FieldWrapper required title="City" error={fieldState.errors?.[0]?.message}>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
</div>
);
const formMeta: FormMeta = {
render,
defaultValues: { name: 'Tina', city: 'Hangzhou' },
validateTrigger: ValidateTrigger.onChange,
validate: {
name: ({ value }) => {
if (!value) {
return 'Name is required';
}
},
city: ({ value }) => {
if (!value) {
return 'City is required';
}
}
}
};
export const nodeRegistry: WorkflowNodeRegistry = {
type: 'custom',
meta: {},
defaultPorts: [{ type: 'output' }, { type: 'input' }],
formMeta
};
`,
active: true,
};
export const NodeFormBasicPreview = () => {
const files = {
'node-registry.tsx': registryCode,
'initial-data.ts': { code: defaultInitialDataTs, active: true },
'field-wrapper.tsx': { code: fieldWrapperTs, active: true },
'field-wrapper.css': { code: fieldWrapperCss, active: true },
};
return (
<PreviewEditor files={files} previewStyle={{ height: 500 }} editorStyle={{ height: 500 }}>
<Editor registry={DEFAULT_DEMO_REGISTRY} initialData={DEFAULT_INITIAL_DATA} />
</PreviewEditor>
);
};

10
apps/docs/components/node-form/editor.tsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
// https://github.com/web-infra-dev/rspress/issues/553
const Editor = React.lazy(() =>
import('@flowgram.ai/demo-node-form').then((module) => ({
default: module.Editor,
}))
);
export { Editor };

82
apps/docs/components/node-form/effect/node-registry.tsx Normal file
View File

@ -0,0 +1,82 @@
import {
DataEvent,
EffectFuncProps,
Field,
FieldRenderProps,
FormMeta,
ValidateTrigger,
WorkflowNodeRegistry,
} from '@flowgram.ai/free-layout-editor';
import { FieldWrapper } from '@flowgram.ai/demo-node-form';
import { Input } from '@douyinfe/semi-ui';
import '../index.css';
const render = () => (
<div className="demo-node-content">
<div className="demo-node-title">Effect Examples</div>
<Field name="field1">
{({ field }: FieldRenderProps<string>) => (
<FieldWrapper
title="Basic effect"
note={'The following field will console.log field value on value change'}
>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
<Field name="field2">
{({ field }: FieldRenderProps<string>) => (
<FieldWrapper
title="Control other fields"
note={'The following field will change Field 3 value on value change'}
>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
<Field name="field3">
{({ field }: FieldRenderProps<string>) => (
<FieldWrapper title="Controlled by other fields">
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
</div>
);
interface FormData {
field1: string;
field2: string;
field3: string;
}
const formMeta: FormMeta<FormData> = {
render,
validateTrigger: ValidateTrigger.onChange,
effect: {
field1: [
{
event: DataEvent.onValueChange,
effect: ({ value }: EffectFuncProps<string, FormData>) => {
console.log('field1 value:', value);
},
},
],
field2: [
{
event: DataEvent.onValueChange,
effect: ({ value, form }: EffectFuncProps<string, FormData>) => {
form.setValueIn('field3', 'field2 value is ' + value);
},
},
],
},
};
export const nodeRegistry: WorkflowNodeRegistry = {
type: 'custom',
meta: {},
defaultPorts: [{ type: 'output' }, { type: 'input' }],
formMeta,
};

112
apps/docs/components/node-form/effect/preview.tsx Normal file
View File

@ -0,0 +1,112 @@
import {
DEFAULT_INITIAL_DATA,
defaultInitialDataTs,
fieldWrapperCss,
fieldWrapperTs,
} from '@flowgram.ai/demo-node-form';
import { Editor } from '../editor.tsx';
import { PreviewEditor } from '../../preview-editor.tsx';
import { nodeRegistry } from './node-registry.tsx';
const nodeRegistryFile = {
code: `import {
DataEvent,
EffectFuncProps,
Field,
FieldRenderProps,
FormMeta,
ValidateTrigger,
WorkflowNodeRegistry,
} from '@flowgram.ai/free-layout-editor';
import { FieldWrapper } from '@flowgram.ai/demo-node-form';
import { Input } from '@douyinfe/semi-ui';
import '../index.css';
const render = () => (
<div className="demo-node-content">
<div className="demo-node-title">Effect Examples</div>
<Field name="field1">
{({ field }: FieldRenderProps<string>) => (
<FieldWrapper
title="Basic effect"
note={'The following field will console.log field value on value change'}
>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
<Field name="field2">
{({ field }: FieldRenderProps<string>) => (
<FieldWrapper
title="Control other fields"
note={'The following field will change Field 3 value on value change'}
>
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
<Field name="field3">
{({ field }: FieldRenderProps<string>) => (
<FieldWrapper title="Controlled by other fields">
<Input size={'small'} {...field} />
</FieldWrapper>
)}
</Field>
</div>
);
interface FormData {
field1: string;
field2: string;
field3: string;
}
const formMeta: FormMeta<FormData> = {
render,
validateTrigger: ValidateTrigger.onChange,
effect: {
field1: [
{
event: DataEvent.onValueChange,
effect: ({ value }: EffectFuncProps<string, FormData>) => {
console.log('field1 value:', value);
},
},
],
field2: [
{
event: DataEvent.onValueChange,
effect: ({ value, form }: EffectFuncProps<string, FormData>) => {
form.setValueIn('field3', 'field2 value is ' + value);
},
},
],
},
};
export const nodeRegistry: WorkflowNodeRegistry = {
type: 'custom',
meta: {},
defaultPorts: [{ type: 'output' }, { type: 'input' }],
formMeta,
};
`,
active: true,
};
export const NodeFormEffectPreview = () => {
const files = {
'node-registry.tsx': nodeRegistryFile,
'initial-data.ts': { code: defaultInitialDataTs, active: true },
'field-wrapper.tsx': { code: fieldWrapperTs, active: true },
'field-wrapper.css': { code: fieldWrapperCss, active: true },
};
return (
<PreviewEditor files={files} previewStyle={{ height: 500 }} editorStyle={{ height: 500 }}>
<Editor registry={nodeRegistry} initialData={DEFAULT_INITIAL_DATA} />
</PreviewEditor>
);
};

12
apps/docs/components/node-form/index.css Normal file
View File

@ -0,0 +1,12 @@
.demo-node-content {
padding: 8px 12px;
flex-grow: 1;
width: 100%;
}
.demo-node-title {
font-weight: 500;
font-size: 14px;
width: 100%;
margin: 4px 0px 12px 0px;
}

2
apps/docs/components/node-form/index.ts Normal file
View File

@ -0,0 +1,2 @@
export { NodeFormBasicPreview } from './basic-preview';
export { NodeFormEffectPreview } from './effect/preview';

1
apps/docs/package.json
View File

@ -19,6 +19,7 @@
"@flowgram.ai/demo-free-layout": "workspace:*",
"@flowgram.ai/demo-free-layout-simple": "workspace:*",
"@flowgram.ai/demo-fixed-layout-simple": "workspace:*",
"@flowgram.ai/demo-node-form": "workspace:*",
"@flowgram.ai/fixed-layout-editor": "workspace:*",
"@flowgram.ai/fixed-semi-materials": "workspace:*",
"@flowgram.ai/free-layout-editor": "workspace:*",

6
apps/docs/src/en/guide/getting-started/create-free-layout-simple.mdx
View File

@ -40,7 +40,7 @@ Canvas configuration is declarative, providing data, rendering, event, and plugi
```tsx pure title="use-editor-props.tsx"
import { useMemo } from 'react';
import { type FixedLayoutProps } from '@flowgram.ai/free-layout-editor';
import { type FreeLayoutProps } from '@flowgram.ai/free-layout-editor';
import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
import { intialData } from './initial-data' // 初始化数据
@ -48,8 +48,8 @@ import { nodeRegistries } from './node-registries' // 节点声明配置
import { BaseNode } from './base-node' // 节点渲染
export function useEditorProps(
): FixedLayoutProps {
return useMemo<FixedLayoutProps>(
): FreeLayoutProps {
return useMemo<FreeLayoutProps>(
() => ({
/**
* Initialize data

5
apps/docs/src/zh/examples/_meta.json
View File

@ -13,5 +13,10 @@
"type": "dir",
"name": "free-layout",
"label": "自由布局"
},
{
"type": "dir",
"name": "node-form",
"label": "节点表单"
}
]

4
apps/docs/src/zh/examples/node-form/_meta.json Normal file
View File

@ -0,0 +1,4 @@
[
"basic",
"effect"
]

10
apps/docs/src/zh/examples/node-form/basic.mdx Normal file
View File

@ -0,0 +1,10 @@
---
outline: false
---
# 基础用法
import { NodeFormBasicPreview } from '../../../../components';
<NodeFormBasicPreview />

10
apps/docs/src/zh/examples/node-form/effect.mdx Normal file
View File

@ -0,0 +1,10 @@
---
outline: false
---
# 表单项变更副作用 ( effect)
import { NodeFormEffectPreview } from '../../../../components';
<NodeFormEffectPreview />

6
apps/docs/src/zh/guide/getting-started/create-free-layout-simple.mdx
View File

@ -42,7 +42,7 @@ function App() {
```tsx pure title="use-editor-props.tsx"
import { useMemo } from 'react';
import { type FixedLayoutProps } from '@flowgram.ai/free-layout-editor';
import { type FreeLayoutProps } from '@flowgram.ai/free-layout-editor';
import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
import { intialData } from './initial-data' // 初始化数据
@ -50,8 +50,8 @@ import { nodeRegistries } from './node-registries' // 节点声明配置
import { BaseNode } from './base-node' // 节点渲染
export function useEditorProps(
): FixedLayoutProps {
return useMemo<FixedLayoutProps>(
): FreeLayoutProps {
return useMemo<FreeLayoutProps>(
() => ({
/**
* 初始化数据

65
common/config/rush/pnpm-lock.yaml generated
View File

@ -98,7 +98,7 @@ importers:
version: link:../../config/ts-config
'@rspack/cli':
specifier: 0.2.1
version: 0.2.1(react-refresh@0.14.0)(webpack@5.76.0)
version: 0.2.1(react-refresh@0.16.0)(webpack@5.76.0)
'@types/lodash-es':
specifier: ^4.17.12
version: 4.17.12
@ -232,7 +232,7 @@ importers:
version: link:../../config/ts-config
'@rspack/cli':
specifier: 0.2.1
version: 0.2.1(react-refresh@0.16.0)(webpack@5.76.0)
version: 0.2.1(react-refresh@0.14.0)(webpack@5.76.0)
'@types/lodash-es':
specifier: ^4.17.12
version: 4.17.12
@ -310,6 +310,64 @@ importers:
specifier: ^8.54.0
version: 8.57.1
../../apps/demo-node-form:
dependencies:
'@douyinfe/semi-icons':
specifier: ^2.72.3
version: 2.72.3(react@18.3.1)
'@douyinfe/semi-ui':
specifier: ^2.72.3
version: 2.72.3(acorn@8.14.0)(react-dom@18.3.1)(react@18.3.1)
'@flowgram.ai/free-layout-editor':
specifier: workspace:*
version: link:../../packages/client/free-layout-editor
'@flowgram.ai/free-snap-plugin':
specifier: workspace:*
version: link:../../packages/plugins/free-snap-plugin
'@flowgram.ai/minimap-plugin':
specifier: workspace:*
version: link:../../packages/plugins/minimap-plugin
react:
specifier: ^18
version: 18.3.1
react-dom:
specifier: ^18
version: 18.3.1(react@18.3.1)
styled-components:
specifier: ^5
version: 5.3.11(@babel/core@7.26.0)(react-dom@18.3.1)(react-is@18.3.1)(react@18.3.1)
devDependencies:
'@flowgram.ai/eslint-config':
specifier: workspace:*
version: link:../../config/eslint-config
'@flowgram.ai/ts-config':
specifier: workspace:*
version: link:../../config/ts-config
'@rspack/cli':
specifier: 0.2.1
version: 0.2.1(react-refresh@0.16.0)(webpack@5.76.0)
'@types/lodash-es':
specifier: ^4.17.12
version: 4.17.12
'@types/node':
specifier: ^18
version: 18.19.68
'@types/react':
specifier: ^18
version: 18.3.16
'@types/react-dom':
specifier: ^18
version: 18.3.5(@types/react@18.3.16)
'@types/styled-components':
specifier: ^5
version: 5.1.34
'@typescript-eslint/parser':
specifier: ^6.10.0
version: 6.21.0(eslint@8.57.1)(typescript@5.0.4)
eslint:
specifier: ^8.54.0
version: 8.57.1
../../apps/docs:
dependencies:
'@codesandbox/sandpack-react':
@ -333,6 +391,9 @@ importers:
'@flowgram.ai/demo-free-layout-simple':
specifier: workspace:*
version: link:../demo-free-layout-simple
'@flowgram.ai/demo-node-form':
specifier: workspace:*
version: link:../demo-node-form
'@flowgram.ai/fixed-layout-editor':
specifier: workspace:*
version: link:../../packages/client/fixed-layout-editor

22
packages/node-engine/form/__tests__/validate.test.ts Normal file
View File

@ -0,0 +1,22 @@
import { describe, expect, it } from 'vitest';
import { hasError } from '../src/utils/validate';
import { FeedbackLevel, FieldError } from '../src/types';
describe('utils/validate', () => {
describe('hasError', () => {
it('should return false when errors is empty', () => {
expect(hasError({ xxx: [] })).toBe(false);
expect(hasError({ xxx: undefined })).toBe(false);
expect(hasError({})).toBe(false);
expect(hasError({ aaa: [], bbb: [] })).toBe(false);
expect(hasError({ aaa: undefined, bbb: [] })).toBe(false);
});
it('should return true when errors is not empty', () => {
const mockError: FieldError = { name: 'xxx', level: FeedbackLevel.Error, message: 'err' };
expect(hasError({ xxx: [mockError] })).toBe(true);
expect(hasError({ aaa: [mockError], bbb: [mockError] })).toBe(true);
expect(hasError({ aaa: undefined, bbb: [mockError] })).toBe(true);
});
});
});

10
packages/node-engine/form/src/utils/validate.ts
View File

@ -33,11 +33,5 @@ export function feedbackToFieldErrorsOrWarnings<T>(name: string, feedback?: Feed
} as T;
}
export const hasError = (errors: Errors) => {
for (let fieldErrors in errors) {
if (fieldErrors.length) {
return true;
}
}
return false;
};
export const hasError = (errors: Errors) =>
Object.keys(errors).some((key) => errors[key]?.length > 0);

4
packages/node-engine/node/src/form-model-v2.ts
View File

@ -21,6 +21,7 @@ import {
Glob,
IField,
IFieldArray,
toForm,
} from '@flowgram.ai/form';
import { FlowNodeEntity } from '@flowgram.ai/document';
import { PlaygroundContext } from '@flowgram.ai/core';
@ -256,6 +257,7 @@ export class FormModelV2 extends FormModel implements Disposable {
value: get(values, currentName),
prevValue: get(prevValues, currentName),
formValues: values,
form: toForm(this.nativeFormModel!),
context: this.nodeContext,
});
@ -298,6 +300,7 @@ export class FormModelV2 extends FormModel implements Disposable {
value: get(values, path),
formValues: values,
prevValue: get(prevValues, path),
form: toForm(this.nativeFormModel!),
context: this.nodeContext,
});
@ -332,6 +335,7 @@ export class FormModelV2 extends FormModel implements Disposable {
effect({
...props,
formValues: nativeFormModel.values,
form: toForm(this.nativeFormModel!),
context: this.nodeContext,
})
);

18
packages/node-engine/node/src/types.ts
View File

@ -2,7 +2,12 @@ import * as React from 'react';
import { FormModel, IFormMeta, NodeFormContext } from '@flowgram.ai/form-core';
import { FieldName, FieldValue } from '@flowgram.ai/form/src/types';
import { FormRenderProps, Validate as FormValidate, ValidateTrigger } from '@flowgram.ai/form';
import {
FormRenderProps,
IForm,
Validate as FormValidate,
ValidateTrigger,
} from '@flowgram.ai/form';
import { FormPlugin } from './form-plugin';
import { FormModelV2 } from './form-model-v2';
@ -46,19 +51,25 @@ export enum DataEvent {
export type EffectReturn = () => void;
export type Effect<TFieldValue = any, TFormValues = any> = (props: {
export interface EffectFuncProps<TFieldValue = any, TFormValues = any> {
name: FieldName;
value: TFieldValue;
prevValue?: TFieldValue;
formValues: TFormValues;
form: IForm;
context: NodeContext;
}) => void | EffectReturn;
}
export type Effect<TFieldValue = any, TFormValues = any> = (
props: EffectFuncProps<TFieldValue, TFormValues>
) => void | EffectReturn;
export type ArrayAppendEffect<TFieldValue = any, TFormValues = any> = (props: {
index: number;
value: TFieldValue;
arrayValues: Array<TFieldValue>;
formValues: TFormValues;
form: IForm;
context: NodeContext;
}) => void | EffectReturn;
@ -66,6 +77,7 @@ export type ArrayDeleteEffect<TFieldValue = any, TFormValues = any> = (props: {
index: number;
arrayValue: Array<TFieldValue>;
formValues: TFormValues;
form: IForm;
context: NodeContext;
}) => void | EffectReturn;

9
rush.json
View File

@ -774,6 +774,15 @@
"team-flow",
"demo"
]
},
{
"packageName": "@flowgram.ai/demo-node-form",
"projectFolder": "apps/demo-node-form",
"tags": [
"level-1",
"team-flow",
"demo"
]
}
]
}