refactor: pass props to edge/nodewrapper separately

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

examples/Basic/Basic.vue

@@ -16,8 +16,8 @@ import {
   useVueFlow,
 } from '~/index'
 
-const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
-const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
+const onNodeDragStop = (e) => console.log('drag stop', e)
+const onElementClick = (e) => console.log('click', e)
 const elements = ref<Elements>([
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
@@ -26,12 +26,12 @@ const elements = ref<Elements>([
   { id: 'e1-2', source: '1', target: '2', animated: true },
   { id: 'e1-3', source: '1', target: '3' },
 ])
-const rfInstance = ref<FlowInstance | null>(null)
+const vfInstance = ref<FlowInstance>()
 const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
 const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView({ padding: 0.1 })
-  rfInstance.value = flowInstance
+  vfInstance.value = flowInstance
 }
 
 const updatePos = () => {
@@ -46,8 +46,8 @@ const updatePos = () => {
   })
 }
 
-const logToObject = () => console.log(rfInstance.value?.toObject())
-const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+const logToObject = () => console.log(vfInstance.value?.toObject())
+const resetTransform = () => vfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
 
 const toggleclasss = () => {
   elements.value = elements.value.map((el) => {
@@ -64,11 +64,11 @@ const toggleclasss = () => {
     :min-zoom="0.2"
     :max-zoom="4"
     :zoom-on-scroll="false"
+    :worker="true"
     @elements-remove="onElementsRemove"
     @connect="onConnect"
     @node-drag-stop="onNodeDragStop"
     @node-click="onElementClick"
-    @elementClick="onElementClick"
     @load="onLoad"
   >
     <MiniMap />