chore(docs): cleanup examples

2024-02-03 20:18:53 +01:00
parent 034885062c
commit 24c2091c7a
13 changed files with 141 additions and 159 deletions
--- a/docs/examples/nested/App.vue
+++ b/docs/examples/nested/App.vue
@@ -1,93 +1,81 @@
 <script setup>
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
-import { onMounted } from 'vue'

-const { onConnect, addEdges, addNodes } = useVueFlow({
-  fitViewOnInit: true,
-  // set this to true so edges get elevated when selected, defaults to false
-  elevateEdgesOnSelect: true,
-  nodes: [
-    { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
-    {
-      id: '2',
-      label: 'parent node',
-      position: { x: 100, y: 100 },
-      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
-    },
-    {
-      id: '2a',
-      label: 'child node',
-      position: { x: 10, y: 50 },
-      parentNode: '2',
-    },
-    {
-      id: '4',
-      label: 'parent node',
-      position: { x: 320, y: 175 },
-      style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
-    },
-    {
-      id: '4a',
-      label: 'child node',
-      position: { x: 15, y: 65 },
-      extent: 'parent',
-      parentNode: '4',
-    },
-    {
-      id: '4b',
-      label: 'nested parent node',
-      position: { x: 15, y: 120 },
-      style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
-      parentNode: '4',
-    },
-    {
-      id: '4b1',
-      label: 'nested child node',
-      position: { x: 20, y: 40 },
-      parentNode: '4b',
-    },
-    {
-      id: '4b2',
-      label: 'nested child node',
-      position: { x: 100, y: 100 },
-      parentNode: '4b',
-    },
-    { id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
-  ],
-  edges: [
-    { id: 'e1-2', source: '1', target: '2' },
-    { id: 'e1-4', source: '1', target: '4' },
-    { id: 'e1-4c', source: '1', target: '4c' },
-    { id: 'e2a-4a', source: '2a', target: '4a' },
-    { id: 'e4a-4b1', source: '4a', target: '4b1' },
-    { id: 'e4a-4b2', source: '4a', target: '4b2' },
-    { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
-  ],
-})
+const nodes = ref([
+  { id: '1', type: 'input', label: 'node', position: { x: 250, y: 0 } },
+  {
+    id: '2',
+    label: 'parent node',
+    position: { x: 100, y: 100 },
+    style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '200px', height: '200px' },
+  },
+  {
+    id: '2a',
+    label: 'child node',
+    position: { x: 10, y: 50 },
+    parentNode: '2',
+  },
+  {
+    id: '4',
+    label: 'parent node',
+    position: { x: 320, y: 175 },
+    style: { backgroundColor: 'rgba(16, 185, 129, 0.5)', width: '400px', height: '300px' },
+  },
+  {
+    id: '4a',
+    label: 'child node',
+    position: { x: 15, y: 65 },
+    extent: 'parent',
+    parentNode: '4',
+  },
+  {
+    id: '4b',
+    label: 'nested parent node',
+    position: { x: 15, y: 120 },
+    style: { backgroundColor: 'rgba(139, 92, 246, 0.5)', height: '150px', width: '270px' },
+    parentNode: '4',
+  },
+  {
+    id: '4b1',
+    label: 'nested child node',
+    position: { x: 20, y: 40 },
+    parentNode: '4b',
+  },
+  {
+    id: '4b2',
+    label: 'nested child node',
+    position: { x: 100, y: 100 },
+    parentNode: '4b',
+  },
+  { id: '4c', label: 'child node', position: { x: 200, y: 65 }, parentNode: '4' },
+  {
+    id: '999',
+    type: 'input',
+    label: 'Drag me to extend area!',
+    position: { x: 20, y: 100 },
+    class: 'light',
+    expandParent: true,
+    parentNode: '2',
+  },
+])

-onConnect((params) => addEdges(params))
-
-onMounted(() => {
-  // add nodes to parent
-  addNodes([
-    {
-      id: '999',
-      type: 'input',
-      label: 'Drag me to extend area!',
-      position: { x: 20, y: 100 },
-      class: 'light',
-      expandParent: true,
-      parentNode: '2',
-    },
-  ])
-})
+const edges = ref([
+  { id: 'e1-2', source: '1', target: '2' },
+  { id: 'e1-4', source: '1', target: '4' },
+  { id: 'e1-4c', source: '1', target: '4c' },
+  { id: 'e2a-4a', source: '2a', target: '4a' },
+  { id: 'e4a-4b1', source: '4a', target: '4b1' },
+  { id: 'e4a-4b2', source: '4a', target: '4b2' },
+  { id: 'e4b1-4b2', source: '4b1', target: '4b2' },
+])
 </script>

 <template>
-  <VueFlow>
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init elevate-edges-on-select>
    <MiniMap />

    <Controls />
--- a/docs/examples/node-resizer/App.vue
+++ b/docs/examples/node-resizer/App.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import ResizableNode from './ResizableNode.vue'

-const elements = ref([
+const nodes = ref([
  {
    id: '1',
    type: 'resizable',
@@ -15,7 +15,7 @@ const elements = ref([
 </script>

 <template>
-  <VueFlow v-model="elements" fit-view-on-init>
+  <VueFlow :nodes="nodes" fit-view-on-init>
    <template #node-resizable="resizableNodeProps">
      <ResizableNode :label="resizableNodeProps.label" />
    </template>
--- a/docs/examples/node-toolbar/App.vue
+++ b/docs/examples/node-toolbar/App.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { Position, VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { Position, VueFlow } from '@vue-flow/core'
 import ToolbarNode from './ToolbarNode.vue'

 const defaultNodeStyle = {
@@ -10,7 +10,7 @@ const defaultNodeStyle = {
  borderRadius: '99px',
 }

-const elements = ref([
+const nodes = ref([
  {
    id: '1',
    type: 'toolbar',
@@ -55,7 +55,7 @@ const elements = ref([
 </script>

 <template>
-  <VueFlow v-model="elements" fit-view-on-init class="vue-flow-basic-example">
+  <VueFlow :nodes="nodes" fit-view-on-init class="vue-flow-basic-example">
    <template #node-toolbar="nodeProps">
      <ToolbarNode :data="nodeProps.data" :label="nodeProps.label" />
    </template>
--- a/docs/examples/save-restore/App.vue
+++ b/docs/examples/save-restore/App.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import SaveRestoreControls from './Controls.vue'

-const elements = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
+const nodes = ref([{ id: '1', label: 'Node 1', position: { x: 100, y: 100 } }])
 </script>

 <template>
-  <VueFlow v-model="elements">
+  <VueFlow :nodes="nodes">
    <SaveRestoreControls />
  </VueFlow>
 </template>
--- a/docs/examples/save-restore/Controls.vue
+++ b/docs/examples/save-restore/Controls.vue
@@ -3,7 +3,7 @@ import { Panel, useVueFlow } from '@vue-flow/core'

 const flowKey = 'example-flow'

-const { nodes, addNodes, setNodes, setEdges, dimensions, setTransform, toObject } = useVueFlow()
+const { nodes, addNodes, dimensions, toObject, fromObject } = useVueFlow()

 function onSave() {
  localStorage.setItem(flowKey, JSON.stringify(toObject()))
@@ -13,10 +13,7 @@ function onRestore() {
  const flow = JSON.parse(localStorage.getItem(flowKey))

  if (flow) {
-    const [x = 0, y = 0] = flow.position
-    setNodes(flow.nodes)
-    setEdges(flow.edges)
-    setTransform({ x, y, zoom: flow.zoom || 0 })
+    fromObject(flow)
  }
 }

--- a/docs/examples/stress/App.vue
+++ b/docs/examples/stress/App.vue
@@ -1,33 +1,30 @@
 <script setup>
-import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { MiniMap } from '@vue-flow/minimap'
 import { nextTick, ref } from 'vue'
 import { getElements } from './utils.js'

-const { nodes, edges } = getElements(15, 15)
+const { nodes: initialNodes, edges: initialEdges } = getElements(15, 15)

-const elements = ref([...nodes, ...edges])
+const nodes = ref(initialNodes)

-const { onPaneReady, dimensions, fitView } = useVueFlow()
+const edges = ref(initialEdges)

-onPaneReady(({ fitView, getElements }) => {
-  fitView({ padding: 0.2 })
-
-  console.log(getElements.value)
-})
+const { dimensions, fitView } = useVueFlow()

 function toggleClass() {
-  return elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
+  nodes.value = nodes.value.map((node) => ({ ...node, class: node.class === 'light' ? 'dark' : 'light' }))
 }

 function updatePos() {
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.position = {
+  nodes.value = nodes.value.map((node) => {
+    return {
+      ...node,
+      position: {
        x: Math.random() * 10 * dimensions.value.width,
        y: Math.random() * 10 * dimensions.value.height,
-      }
+      },
    }
  })

@@ -38,7 +35,7 @@ function updatePos() {
 </script>

 <template>
-  <VueFlow v-model="elements" :min-zoom="0.1">
+  <VueFlow :nodes="nodes" :edges="edges" :min-zoom="0.1" fit-view-on-init>
    <MiniMap />

    <Background />
--- a/docs/examples/teleport/App.vue
+++ b/docs/examples/teleport/App.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow } from '@vue-flow/core'
 import Sidebar from './Sidebar.vue'
 import TeleportableNode from './TeleportableNode.vue'

-const elements = ref([
+const nodes = ref([
  {
    id: '1',
    label: 'Click to teleport',
@@ -26,6 +26,9 @@ const elements = ref([
    position: { x: 0, y: 200 },
    data: {},
  },
+])
+
+const edges = ref([
  {
    id: 'e1-2',
    source: '1',
@@ -36,7 +39,7 @@ const elements = ref([

 <template>
  <div class="teleportflow">
-    <VueFlow v-model="elements" fit-view-on-init>
+    <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
      <template #node-teleportable="{ id }">
        <TeleportableNode :id="id" />
      </template>
--- a/docs/examples/teleport/Sidebar.vue
+++ b/docs/examples/teleport/Sidebar.vue
@@ -1,7 +1,3 @@
-<script setup>
-// ...
-</script>
-
 <template>
  <aside>
    <div class="description">Teleport destination</div>
--- a/docs/examples/transition/App.vue
+++ b/docs/examples/transition/App.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import TransitionEdge from './TransitionEdge.vue'

-const elements = ref([
+const nodes = ref([
  {
    id: '1',
    type: 'input',
@@ -18,21 +18,19 @@ const elements = ref([
    position: { x: 1000, y: 1000 },
    targetPosition: Position.Left,
  },
-
-  { id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
 ])

+const edges = ref([{ id: 'e1-2', type: 'custom', source: '1', target: '2', animated: true, style: { stroke: '#fff' } }])
+
 const { onPaneReady } = useVueFlow()

-onPaneReady((i) => {
-  i.fitView({
-    nodes: ['1'],
-  })
+onPaneReady(({ fitView }) => {
+  fitView({ nodes: ['1'] })
 })
 </script>

 <template>
-  <VueFlow v-model="elements" :style="{ backgroundColor: '#1A192B' }">
+  <VueFlow :nodes="nodes" :edges="edges" :style="{ backgroundColor: '#1A192B' }">
    <template #edge-custom="props">
      <TransitionEdge v-bind="props" />
    </template>
--- a/docs/examples/transition/TransitionEdge.vue
+++ b/docs/examples/transition/TransitionEdge.vue
@@ -1,7 +1,7 @@
 <script setup>
+import { computed, ref } from 'vue'
 import { TransitionPresets, useDebounceFn, useTransition, watchDebounced } from '@vueuse/core'
 import { getBezierPath, useVueFlow } from '@vue-flow/core'
-import { computed, ref } from 'vue'

 const props = defineProps({
  id: {
--- a/docs/examples/update-edge/App.vue
+++ b/docs/examples/update-edge/App.vue
@@ -1,9 +1,11 @@
 <script setup>
+import { ref } from 'vue'
 import { Background } from '@vue-flow/background'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { ref } from 'vue'

-const elements = ref([
+const { updateEdge, addEdges } = useVueFlow()
+
+const nodes = ref([
  {
    id: '1',
    type: 'input',
@@ -21,31 +23,31 @@ const elements = ref([
    position: { x: 400, y: 100 },
    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
  },
-  { id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true },
 ])

-const { updateEdge, addEdges } = useVueFlow()
+const edges = ref([{ id: 'e1-2', source: '1', target: '2', label: 'Updateable edge', updatable: true }])

 function onEdgeUpdateStart(edge) {
-  return console.log('start update', edge)
+  console.log('start update', edge)
 }

 function onEdgeUpdateEnd(edge) {
-  return console.log('end update', edge)
+  console.log('end update', edge)
 }

 function onEdgeUpdate({ edge, connection }) {
-  return updateEdge(edge, connection)
+  updateEdge(edge, connection)
 }

 function onConnect(params) {
-  return addEdges([params])
+  addEdges([params])
 }
 </script>

 <template>
  <VueFlow
-    v-model="elements"
+    :nodes="nodes"
+    :edges="edges"
    fit-view-on-init
    @edge-update="onEdgeUpdate"
    @connect="onConnect"
--- a/docs/examples/update-node/App.vue
+++ b/docs/examples/update-node/App.vue
@@ -1,15 +1,8 @@
 <script setup>
+import { reactive, ref } from 'vue'
 import { VueFlow, useVueFlow } from '@vue-flow/core'
-import { reactive } from 'vue'

-const defaultLabel = '-'
-const { onPaneReady, getNode } = useVueFlow({
-  nodes: [
-    { id: '1', label: defaultLabel, position: { x: 100, y: 100 } },
-    { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
-  ],
-  edges: [{ id: 'e1-2', source: '1', target: '2' }],
-})
+const { onPaneReady, findNode, updateNode } = useVueFlow()

 const opts = reactive({
  bg: '#eeeeee',
@@ -17,31 +10,34 @@ const opts = reactive({
  hidden: false,
 })

-function updateNode() {
-  const node = getNode.value('1')
-  node.label = opts.label.trim() !== '' ? opts.label : defaultLabel
-  node.style = { backgroundColor: opts.bg }
-  node.hidden = opts.hidden
-}
+const nodes = ref([
+  { id: '1', label: opts.label, style: { backgroundColor: opts.bg }, hidden: opts.hidden, position: { x: 100, y: 100 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 200 } },
+])
+
+const edges = ref([{ id: 'e1-2', source: '1', target: '2' }])

 onPaneReady(({ fitView }) => {
  fitView()
-  updateNode()
 })
+
+function handleUpdate() {
+  updateNode(nodes.value[0].id, { label: opts.label, style: { backgroundColor: opts.bg }, hidden: opts.hidden })
+}
 </script>

 <template>
-  <VueFlow>
+  <VueFlow :nodes="nodes" :edges="edges">
    <div class="updatenode__controls">
      <label>label:</label>
-      <input v-model="opts.label" @input="updateNode" />
+      <input v-model="opts.label" @input="handleUpdate" />

      <label class="updatenode__bglabel">background:</label>
-      <input v-model="opts.bg" type="color" @input="updateNode" />
+      <input v-model="opts.bg" type="color" @input="handleUpdate" />

      <div class="updatenode__checkboxwrapper">
        <label>hidden:</label>
-        <input v-model="opts.hidden" type="checkbox" @change="updateNode" />
+        <input v-model="opts.hidden" type="checkbox" @change="handleUpdate" />
      </div>
    </div>
  </VueFlow>
--- a/docs/examples/validation/App.vue
+++ b/docs/examples/validation/App.vue
@@ -1,10 +1,12 @@
 <script setup>
-import { VueFlow, addEdge } from '@vue-flow/core'
 import { ref } from 'vue'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'

-const elements = ref([
+const { addEdges } = useVueFlow()
+
+const nodes = ref([
  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
  {
    id: 'A',
@@ -16,6 +18,8 @@ const elements = ref([
  { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
 ])

+const edges = ref([])
+
 function onConnectStart({ nodeId, handleType }) {
  return console.log('on connect start', { nodeId, handleType })
 }
@@ -26,13 +30,14 @@ function onConnectEnd(event) {

 function onConnect(params) {
  console.log('on connect', params)
-  addEdge(params, elements.value)
+  addEdges(params)
 }
 </script>

 <template>
  <VueFlow
-    v-model="elements"
+    :nodes="nodes"
+    :edges="edges"
    fit-view-on-init
    class="validationflow"
    @connect="onConnect"