update: pass store state as props to edge-renderer and edge

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

src/components/Nodes/NodeWrapper.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { CSSProperties } from 'vue'
+import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useStore } from '../../composables'
 import { ElementId, FlowEvents, GraphNode, Position, SnapGrid, VFInternals, XYPosition } from '../../types'
 import { NodeId } from '../../context'
@@ -47,11 +47,7 @@ provide(NodeId, props.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
-const selectable = computed(() => (typeof props.selectable === 'undefined' ? store.elementsSelectable : props.selectable))
-const draggable = computed(() => (typeof props.draggable === 'undefined' ? store.nodesDraggable : props.draggable))
-const connectable = computed(() => (typeof props.connectable === 'undefined' ? store.nodesConnectable : props.connectable))
-const scale = computed(() => props.scale)
-const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.id))
+const selected = computed(() => props.selectable && store.selectedElements?.some(({ id }) => id === props.id))
 
 const onMouseEnterHandler = () =>
   props.vf.isDragging &&
@@ -91,8 +87,8 @@ const onDoubleClick = () => (event: MouseEvent) => {
 
 const onSelectNodeHandler = (event: MouseEvent) => {
   const n = props.node
-  if (!draggable.value) {
-    if (selectable.value) {
+  if (!props.draggable) {
+    if (props.selectable) {
       store.unsetNodesSelection()
       if (!selected.value) store.addSelectedElements([n])
     }
@@ -106,11 +102,11 @@ const onDragStart: DraggableEventListener = ({ event }) => {
   emit('dragStart', { event, node: n })
   store.hooks.nodeDragStart.trigger({ event, node: n })
 
-  if (props.selectNodesOnDrag && selectable) {
+  if (props.selectNodesOnDrag && props.selectable) {
     store.unsetNodesSelection()
 
     if (!selected.value) store.addSelectedElements([n])
-  } else if (!props.selectNodesOnDrag && !selected.value && selectable.value) {
+  } else if (!props.selectNodesOnDrag && !selected.value && props.selectable) {
     store.unsetNodesSelection()
     store.addSelectedElements([])
   }
@@ -138,7 +134,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
   // onDragStop also gets called when user just clicks on a node.
   // Because of that we set dragging to true inside the onDrag handler and handle the click here
   if (!props.vf.isDragging) {
-    if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
+    if (props.selectable && !props.selectNodesOnDrag && !selected.value) {
       store.addSelectedElements([n])
     }
     store.hooks.nodeClick.trigger({ event, node: n })
@@ -193,7 +189,7 @@ export default {
     cancel=".nodrag"
     :handle="props.dragHandle"
     :disabled="!draggable"
-    :scale="scale"
+    :scale="props.scale"
     :grid="props.snapGrid"
     :enable-user-select-hack="false"
     @start="onDragStart"
@@ -207,14 +203,14 @@ export default {
         `vue-flow__node-${props.type}`,
         {
           selected,
-          selectable: selectable,
+          selectable: props.selectable,
         },
         props.class,
       ]"
       :style="{
         zIndex: selected ? 10 : 3,
         transform: `translate(${props.vf.position.x}px,${props.vf.position.y}px)`,
-        pointerEvents: selectable || draggable ? 'all' : 'none',
+        pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
         opacity: props.vf.width !== null && props.vf.height !== null ? 1 : 0,
         ...props.style,
       }"
@@ -234,7 +230,7 @@ export default {
           xPos: props.vf.position.x,
           yPos: props.vf.position.y,
           selected,
-          connectable,
+          connectable: props.connectable,
           sourcePosition: props.sourcePosition,
           targetPosition: props.targetPosition,
           dragging: props.vf.isDragging,
@@ -249,7 +245,7 @@ export default {
             xPos: props.vf.position.x,
             yPos: props.vf.position.y,
             selected,
-            connectable,
+            connectable: props.connectable,
             sourcePosition: props.sourcePosition,
             targetPosition: props.targetPosition,
             dragging: props.vf.isDragging,