qinglong/src/pages/scenario/flowgram/hooks/use-editor-props.tsx
copilot-swe-agent[bot] a0a70703bc Refactor workflow editor to use Flowgram.ai library
- Installed @flowgram.ai packages (free-layout-editor and plugins)
- Created node registries following Flowgram pattern
- Implemented FlowgramEditor component with proper integration
- Simplified workflowEditorModal to use Flowgram
- Added necessary translations
- All builds succeed

Co-authored-by: whyour <22700758+whyour@users.noreply.github.com>
2025-11-23 06:05:24 +00:00

38 lines
1.2 KiB
TypeScript

import { useMemo } from 'react';
import { FreeLayoutProps } from '@flowgram.ai/free-layout-editor';
import { createFreeSnapPlugin } from '@flowgram.ai/free-snap-plugin';
import { createFreeLinesPlugin } from '@flowgram.ai/free-lines-plugin';
import { createFreeNodePanelPlugin } from '@flowgram.ai/free-node-panel-plugin';
import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
import { createPanelManagerPlugin } from '@flowgram.ai/panel-manager-plugin';
import { FlowNodeRegistry } from '../nodes/http';
export function useEditorProps(
initialData: any,
nodeRegistries: FlowNodeRegistry[]
): FreeLayoutProps {
return useMemo<FreeLayoutProps>(
() => ({
background: true,
playground: {
preventGlobalGesture: true,
},
readonly: false,
twoWayConnection: true,
initialData,
nodeRegistries,
plugins: [
createFreeSnapPlugin(),
createFreeLinesPlugin(),
createFreeNodePanelPlugin(),
createMinimapPlugin(),
createPanelManagerPlugin(),
],
onChange: (data) => {
console.log('Workflow changed:', data);
},
}),
[initialData, nodeRegistries]
);
}