diff --git a/examples/Empty/index.tsx b/examples/Empty/index.tsx new file mode 100644 index 00000000..1b74e75a --- /dev/null +++ b/examples/Empty/index.tsx @@ -0,0 +1,65 @@ +import RevueFlow, { + removeElements, + addEdge, + MiniMap, + Controls, + Background, + OnLoadParams, + Elements, + ElementId, + Node, + FlowElement, + BackgroundVariant, + Connection, + Edge +} from '../../src'; +import { CSSProperties, defineComponent, ref } from 'vue'; + +const onLoad = (reactFlowInstance: OnLoadParams) => console.log('flow loaded:', reactFlowInstance); +const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element); +const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node); + +const buttonStyle: CSSProperties = { position: 'absolute', left: '10px', top: '10px', zIndex: 4 }; + +const EmptyFlow = defineComponent({ + setup() { + { + const elements = ref([]); + const onElementsRemove = (elementsToRemove: Elements) => + (elements.value = removeElements(elementsToRemove, elements.value)); + const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value)); + + const addRandomNode = () => { + const nodeId: ElementId = (elements.value.length + 1).toString(); + const newNode: Node = { + id: nodeId, + data: { label: `Node: ${nodeId}` }, + position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight } + } as Node; + elements.value = [...elements.value, newNode]; + }; + + return () => ( + onConnect(p)} + onNodeDragStop={onNodeDragStop} + onlyRenderVisibleElements={false} + > + + + + + + + ); + } + } +}); + +export default EmptyFlow; diff --git a/examples/router.ts b/examples/router.ts index a19235e9..9dae4ce3 100644 --- a/examples/router.ts +++ b/examples/router.ts @@ -32,6 +32,10 @@ export const routes: RouterOptions['routes'] = [ { path: '/edge-types', component: () => import('./EdgeTypes') + }, + { + path: '/empty', + component: () => import('./Empty') } ];