wehub-resource-sync
80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
import '@flowgram.ai/fixed-layout-editor/index.css';
|
|
|
|
import { defaultFixedSemiMaterials } from '@flowgram.ai/fixed-semi-materials';
|
|
import {
|
|
FixedLayoutEditorProvider,
|
|
EditorRenderer,
|
|
FlowNodeEntity,
|
|
useNodeRender,
|
|
} from '@flowgram.ai/fixed-layout-editor';
|
|
|
|
export const NodeRender = ({ node }: { node: FlowNodeEntity }) => {
|
|
const {
|
|
onMouseEnter,
|
|
onMouseLeave,
|
|
startDrag,
|
|
form,
|
|
dragging,
|
|
isBlockOrderIcon,
|
|
isBlockIcon,
|
|
activated,
|
|
} = useNodeRender();
|
|
|
|
return (
|
|
<div
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
onMouseDown={(e) => {
|
|
startDrag(e);
|
|
e.stopPropagation();
|
|
}}
|
|
style={{
|
|
width: 280,
|
|
minHeight: 88,
|
|
height: 'auto',
|
|
background: '#fff',
|
|
border: '1px solid rgba(6, 7, 9, 0.15)',
|
|
borderColor: activated ? '#82a7fc' : 'rgba(6, 7, 9, 0.15)',
|
|
borderRadius: 8,
|
|
boxShadow: '0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02)',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
position: 'relative',
|
|
padding: 12,
|
|
cursor: 'move',
|
|
opacity: dragging ? 0.3 : 1,
|
|
...(isBlockOrderIcon || isBlockIcon ? { width: 260 } : {}),
|
|
}}
|
|
>
|
|
{form?.render()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FlowGramApp = () => (
|
|
<FixedLayoutEditorProvider
|
|
nodeRegistries={[
|
|
{
|
|
type: 'custom',
|
|
},
|
|
]}
|
|
initialData={{
|
|
nodes: [
|
|
{
|
|
id: 'custom_0',
|
|
type: 'custom',
|
|
},
|
|
],
|
|
}}
|
|
materials={{
|
|
renderDefaultNode: NodeRender,
|
|
components: defaultFixedSemiMaterials,
|
|
}}
|
|
>
|
|
<EditorRenderer />
|
|
</FixedLayoutEditorProvider>
|
|
);
|
|
|
|
export default FlowGramApp;
|