51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useMemo } from 'react';
|
||
|
|
import { NodeTypes, ProOptions, ReactFlow } from 'reactflow';
|
||
|
|
|
||
|
|
import { useConceptOptions } from '@/context/ConceptOptionsContext';
|
||
|
|
import { useOSS } from '@/context/OssContext';
|
||
|
|
|
||
|
|
import { IOssEditContext } from '../OssEditContext';
|
||
|
|
import InputNode from './InputNode';
|
||
|
|
import OperationNode from './OperationNode';
|
||
|
|
|
||
|
|
const OssNodeTypes: NodeTypes = {
|
||
|
|
operation: OperationNode,
|
||
|
|
input: InputNode
|
||
|
|
};
|
||
|
|
|
||
|
|
interface OssFlowProps {
|
||
|
|
controller: IOssEditContext;
|
||
|
|
}
|
||
|
|
|
||
|
|
function OssFlow({ controller }: OssFlowProps) {
|
||
|
|
const { calculateHeight } = useConceptOptions();
|
||
|
|
const model = useOSS();
|
||
|
|
|
||
|
|
console.log(model.loading);
|
||
|
|
console.log(controller.isMutable);
|
||
|
|
|
||
|
|
const initialNodes = [
|
||
|
|
{ id: '1', position: { x: 0, y: 0 }, data: { label: '1' }, type: 'input' },
|
||
|
|
{ id: '2', position: { x: 0, y: 100 }, data: { label: '2' }, type: 'operation' }
|
||
|
|
];
|
||
|
|
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
|
||
|
|
|
||
|
|
const proOptions: ProOptions = { hideAttribution: true };
|
||
|
|
|
||
|
|
const canvasWidth = useMemo(() => {
|
||
|
|
return 'calc(100vw - 1rem)';
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const canvasHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className='relative' style={{ height: canvasHeight, width: canvasWidth }}>
|
||
|
|
<ReactFlow nodes={initialNodes} edges={initialEdges} fitView proOptions={proOptions} nodeTypes={OssNodeTypes} />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default OssFlow;
|