update(examples): Fix examples

2021-10-20 22:39:54 +02:00
parent a5ae6a4e48
commit 29c6df1755
25 changed files with 690 additions and 885 deletions
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import Flow, {
+  MiniMap,
+  Controls,
+  Background,
+  BackgroundVariant,
+  Connection,
+  Edge,
+  ElementId,
+  Elements,
+  FlowElement,
+  Node,
+  OnLoadParams,
+} from '~/index'
+import { addEdge, removeElements } from '~/utils/graph'
+
+const elements = ref<Elements>([])
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+
+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 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]
+}
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :on-load="onLoad"
+    :on-element-click="onElementClick"
+    :on-elements-remove="onElementsRemove"
+    :on-connect="(p) => onConnect(p)"
+    :on-node-drag-stop="onNodeDragStop"
+    :only-render-visible-elements="false"
+  >
+    <MiniMap />
+    <Controls />
+    <Background :variant="BackgroundVariant.Lines" />
+
+    <button type="button" :style="buttonStyle" @click="addRandomNode">add node</button>
+  </Flow>
+</template>
@@ -1,64 +0,0 @@
-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<Elements>([])
-      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 () => (
-        <RevueFlow
-          v-model={elements.value}
-          onLoad={onLoad}
-          onElementClick={onElementClick}
-          onElementsRemove={onElementsRemove}
-          onConnect={(p) => onConnect(p)}
-          onNodeDragStop={onNodeDragStop}
-          onlyRenderVisibleElements={false}
-        >
-          <MiniMap />
-          <Controls />
-          <Background variant={BackgroundVariant.Lines} />
-
-          <button type="button" onClick={addRandomNode} style={buttonStyle}>
-            add node
-          </button>
-        </RevueFlow>
-      )
-    }
-  }
-})
-
-export default EmptyFlow