update(examples): Fix examples

examples/DragNDrop/DnD.vue

@@ -1,86 +1,58 @@
+<script lang="ts" setup>
+import Sidebar from './Sidebar.vue'
+import Flow, { addEdge, removeElements, Controls, OnLoadParams, Elements, Connection, Edge, ElementId, Node } from '~/index'
+import './dnd.css'
+
+const revueFlowInstance = ref<OnLoadParams>()
+const elements = ref<Elements>([
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'input node' },
+    position: { x: 250, y: 5 },
+  },
+] as Elements)
+
+let id = 0
+const getId = (): ElementId => `dndnode_${id++}`
+
+const onDragOver = (event: DragEvent) => {
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements))
+const onElementsRemove = (elementsToRemove: Elements) =>
+  (elements.value = removeElements(elementsToRemove, elements.value as Elements))
+const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance)
+
+const onDrop = (event: DragEvent) => {
+  event.preventDefault()
+
+  if (revueFlowInstance.value) {
+    console.log(event.dataTransfer?.getData('application/revueflow'))
+    const type = event.dataTransfer?.getData('application/revueflow')
+    const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 })
+    const newNode = {
+      id: getId(),
+      type,
+      position,
+      data: { label: `${type} node` },
+    } as Node
+
+    elements.value.push(newNode)
+  }
+}
+</script>
 <template>
   <div class="dndflow">
     <div class="revueflow-wrapper" @drop="onDrop">
-      <RevueFlow v-model="elements" @elementsRemove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
+      <Flow :elements="elements" @elementsRemove="onElementsRemove" @load="onLoad" @connect="onConnect" @dragover="onDragOver">
         <Controls />
-      </RevueFlow>
+      </Flow>
     </div>
     <Sidebar />
   </div>
 </template>
-<script lang="ts">
-import RevueFlow, {
-  addEdge,
-  removeElements,
-  Controls,
-  OnLoadParams,
-  Elements,
-  Connection,
-  Edge,
-  ElementId,
-  Node
-} from '../../src';
-import Sidebar from './Sidebar';
-
-import './dnd.css';
-import { defineComponent, ref } from 'vue';
-
-const DnDFlow = defineComponent({
-  components: { RevueFlow, Controls, Sidebar },
-  setup() {
-    const revueFlowInstance = ref<OnLoadParams>();
-    const elements = ref<Elements>([
-      {
-        id: '1',
-        type: 'input',
-        data: { label: 'input node' },
-        position: { x: 250, y: 5 }
-      }
-    ] as Elements);
-
-    let id = 0;
-    const getId = (): ElementId => `dndnode_${id++}`;
-
-    const onDragOver = (event: DragEvent) => {
-      event.preventDefault();
-      if (event.dataTransfer) {
-        event.dataTransfer.dropEffect = 'move';
-      }
-    };
-
-    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value as Elements));
-    const onElementsRemove = (elementsToRemove: Elements) =>
-      (elements.value = removeElements(elementsToRemove, elements.value as Elements));
-    const onLoad = (instance: OnLoadParams) => (revueFlowInstance.value = instance);
-
-    const onDrop = (event: DragEvent) => {
-      event.preventDefault();
-
-      if (revueFlowInstance.value) {
-        console.log(event.dataTransfer?.getData('application/revueflow'));
-        const type = event.dataTransfer?.getData('application/revueflow');
-        const position = revueFlowInstance.value.project({ x: event.clientX, y: event.clientY - 40 });
-        const newNode = {
-          id: getId(),
-          type,
-          position,
-          data: { label: `${type} node` }
-        } as Node;
-
-        elements.value.push(newNode);
-      }
-    };
-
-    return {
-      onConnect,
-      onElementsRemove,
-      onLoad,
-      onDrop,
-      onDragOver,
-      elements
-    };
-  }
-});
-
-export default DnDFlow;
-</script>

examples/DragNDrop/Sidebar.tsx

@@ -1,25 +0,0 @@
-const onDragStart = (event: DragEvent, nodeType: string) => {
-  if (event.dataTransfer) {
-    event.dataTransfer.setData('application/revueflow', nodeType)
-    event.dataTransfer.effectAllowed = 'move'
-  }
-}
-
-const Sidebar = () => {
-  return (
-    <aside>
-      <div class="description">You can drag these nodes to the pane on the left.</div>
-      <div class="revue-flow__node-input" onDragstart={(event: DragEvent) => onDragStart(event, 'input')} draggable>
-        Input Node
-      </div>
-      <div class="revue-flow__node-default" onDragstart={(event: DragEvent) => onDragStart(event, 'default')} draggable>
-        Default Node
-      </div>
-      <div class="revue-flow__node-output" onDragstart={(event: DragEvent) => onDragStart(event, 'output')} draggable>
-        Output Node
-      </div>
-    </aside>
-  )
-}
-
-export default Sidebar

examples/DragNDrop/Sidebar.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+const onDragStart = (event: DragEvent, nodeType: string) => {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData('application/revueflow', nodeType)
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+</script>
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane on the left.</div>
+    <div class="revue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
+      Input Node
+    </div>
+    <div class="revue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
+      Default Node
+    </div>
+    <div class="revue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
+      Output Node
+    </div>
+  </aside>
+</template>