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

feat: add materials.components api (#288)

Browse Source
This commit is contained in:
xiamidaxia 2025-05-28 11:07:15 +08:00 committed by GitHub
parent d93982d1ea
commit 136a713f29
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx
View File

@ -75,7 +75,7 @@ export function useEditorProps(
* 可以通过 key 自定义 UI 组件
*/
materials: {
renderNodes: {
components: {
...defaultFixedSemiMaterials,
/**
* Components can be customized based on key business-side requirements.

8
apps/demo-fixed-layout/src/hooks/use-editor-props.ts
View File

@ -162,11 +162,11 @@ export function useEditorProps(
* 可以通过 key 自定义 UI 组件
*/
materials: {
renderNodes: {
components: {
...defaultFixedSemiMaterials,
[FlowRendererKey.ADDER]: NodeAdder,
[FlowRendererKey.BRANCH_ADDER]: BranchAdder,
[FlowRendererKey.DRAG_NODE]: DragNode,
[FlowRendererKey.ADDER]: NodeAdder, // Node Add Button
[FlowRendererKey.BRANCH_ADDER]: BranchAdder, // Branch Add Button
[FlowRendererKey.DRAG_NODE]: DragNode, // Component in node dragging
},
renderDefaultNode: BaseNode, // node render
renderTexts: {

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

@ -80,7 +80,7 @@ export function useEditorProps(
* https://github.com/bytedance/flowgram.ai/blob/main/packages/materials/fixed-semi-materials/src/components/index.tsx
*/
materials: {
renderNodes: {
components: {
...defaultFixedSemiMaterials,
// [FlowRendererKey.ADDER]: NodeAdder,
// [FlowRendererKey.BRANCH_ADDER]: BranchAdder,

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

@ -81,7 +81,7 @@ export function useEditorProps(
* https://github.com/bytedance/flowgram.ai/blob/main/packages/materials/fixed-semi-materials/src/components/index.tsx
*/
materials: {
renderNodes: {
components: {
...defaultFixedSemiMaterials,
// [FlowRendererKey.ADDER]: NodeAdder,
// [FlowRendererKey.BRANCH_ADDER]: BranchAdder,

18
packages/plugins/materials-plugin/src/create-materials-plugin.ts
View File

@ -6,6 +6,10 @@ import { definePluginCreator } from '@flowgram.ai/core';
export type MaterialReactComponent<T = any> = (props: T) => React.ReactNode | null;
export interface MaterialsPluginOptions {
/**
* 注册特定的 UI 组件
*/
components?: Record<FlowRendererKey | string, MaterialReactComponent>;
/**
* 注册特定的节点渲染组件
*/
@ -28,7 +32,7 @@ export const createMaterialsPlugin = definePluginCreator<MaterialsPluginOptions>
*/
registry.registerReactComponent(
FlowRendererKey.NODE_RENDER,
opts.renderDefaultNode || (() => null),
opts.renderDefaultNode || (() => null)
);
/**
@ -37,12 +41,20 @@ export const createMaterialsPlugin = definePluginCreator<MaterialsPluginOptions>
if (opts.renderTexts) {
registry.registerText(opts.renderTexts);
}
/**
* 注册组件
*/
if (opts.components) {
Object.keys(opts.components).forEach((key) =>
registry.registerReactComponent(key, opts.components![key])
);
}
/**
* 注册单节点渲染
*/
if (opts.renderNodes) {
Object.keys(opts.renderNodes).forEach(key =>
registry.registerReactComponent(key, opts.renderNodes![key]),
Object.keys(opts.renderNodes).forEach((key) =>
registry.registerReactComponent(key, opts.renderNodes![key])
);
}
},