feat(edges): add selectable option to edges

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

src/components/Edges/EdgeWrapper.vue

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { useHandle, useVueFlow } from '../../composables'
-import { ConnectionMode, Position, GraphEdge } from '../../types'
+import { ConnectionMode, Position, GraphEdge, EdgeComponent } from '../../types'
 import { getEdgePositions, getHandle, getMarkerId } from '../../utils'
 import EdgeAnchor from './EdgeAnchor.vue'
 
 interface EdgeWrapper {
   edge: GraphEdge
-  component?: any
-  edgeUpdaterRadius?: number
+  component?: EdgeComponent
   selectable?: boolean
   updatable?: boolean
 }
@@ -22,7 +21,7 @@ const handler = useHandle()
 
 const onEdgeClick = (event: MouseEvent) => {
   const data = { event, edge: edge.value }
-  if (store.elementsSelectable) {
+  if (props.selectable) {
     store.nodesSelectionActive = false
     store.addSelectedEdges([edge.value])
   }
@@ -68,6 +67,7 @@ const sourceHandle = controlledComputed(
 const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
 const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
 const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
+const edgeUpdaterRadius = computed(() => store.edgeUpdaterRadius)
 
 onMounted(() => {
   nextTick(() => {
@@ -108,6 +108,7 @@ export default {
 </script>
 <template>
   <g
+    :key="`edge-${edge.id}`"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${edge.type || 'default'}`,
@@ -194,12 +195,7 @@ export default {
       @mouseenter="onEdgeUpdaterMouseEnter"
       @mouseout="onEdgeUpdaterMouseOut"
     >
-      <EdgeAnchor
-        :position="sourcePosition"
-        :center-x="edge.sourceX"
-        :center-y="edge.sourceY"
-        :radius="props.edgeUpdaterRadius"
-      />
+      <EdgeAnchor :position="sourcePosition" :center-x="edge.sourceX" :center-y="edge.sourceY" :radius="edgeUpdaterRadius" />
     </g>
     <g
       v-if="props.updatable"
@@ -207,12 +203,7 @@ export default {
       @mouseenter="onEdgeUpdaterMouseEnter"
       @mouseout="onEdgeUpdaterMouseOut"
     >
-      <EdgeAnchor
-        :position="targetPosition"
-        :center-x="edge.targetX"
-        :center-y="edge.targetY"
-        :radius="props.edgeUpdaterRadius"
-      />
+      <EdgeAnchor :position="targetPosition" :center-x="edge.targetX" :center-y="edge.targetY" :radius="edgeUpdaterRadius" />
     </g>
   </g>
 </template>

src/components/Nodes/NodeWrapper.vue

@@ -1,15 +1,14 @@
 <script lang="ts" setup>
 import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { useVueFlow } from '../../composables'
-import { GraphNode, SnapGrid } from '../../types'
+import { GraphNode, NodeComponent, SnapGrid } from '../../types'
 import { NodeId } from '../../context'
 import { getDimensions, getHandleBounds, getXYZPos } from '../../utils'
 
 interface NodeWrapperProps {
   node: GraphNode
-  selectNodesOnDrag?: boolean
   snapGrid?: SnapGrid
-  component?: any
+  component?: NodeComponent
   draggable?: boolean
   selectable?: boolean
   connectable?: boolean
@@ -23,6 +22,22 @@ provide(NodeId, props.node.id)
 
 const nodeElement = templateRef<HTMLDivElement>('node-element', null)
 
+const scale = controlledComputed(
+  () => store.transform[2],
+  () => store.transform[2],
+)
+watch([() => node.value.position, () => node.value.parentNode?.position], () => {
+  const xyzPos = {
+    ...node.value.position,
+    z: node.value.computedPosition.z,
+  }
+  if (node.value.parentNode) {
+    node.value.computedPosition = getXYZPos(node.value, xyzPos)
+  } else {
+    node.value.computedPosition = xyzPos
+  }
+})
+
 const onMouseEnterHandler = () =>
   node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: node.value }))
 const onMouseMoveHandler = () =>
@@ -48,11 +63,11 @@ const onDragStart: DraggableEventListener = ({ event }) => {
   store.addSelectedNodes([])
   store.hooks.nodeDragStart.trigger({ event, node: node.value })
 
-  if (props.selectNodesOnDrag && props.selectable) {
+  if (store.selectNodesOnDrag && props.selectable) {
     store.nodesSelectionActive = false
 
     if (!node.value.selected) store.addSelectedNodes([node.value])
-  } else if (!props.selectNodesOnDrag && !node.value.selected && props.selectable) {
+  } else if (!store.selectNodesOnDrag && !node.value.selected && props.selectable) {
     store.nodesSelectionActive = false
     store.addSelectedNodes([])
   }
@@ -65,7 +80,7 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
   // 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 (!node.value.dragging) {
-    if (props.selectable && !props.selectNodesOnDrag && !node.value.selected) {
+    if (props.selectable && !store.selectNodesOnDrag && !node.value.selected) {
       store.addSelectedNodes([node.value])
     }
     store.hooks.nodeClick.trigger({ event, node: node.value })
@@ -75,18 +90,6 @@ const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } })
   store.hooks.nodeDragStop.trigger({ event, node: node.value })
 }
 
-watch([() => node.value.position, () => node.value.parentNode?.position], () => {
-  const xyzPos = {
-    ...node.value.position,
-    z: node.value.computedPosition.z,
-  }
-  if (node.value.parentNode) {
-    node.value.computedPosition = getXYZPos(node.value, xyzPos)
-  } else {
-    node.value.computedPosition = xyzPos
-  }
-})
-
 store.updateNodePosition({ id: node.value.id, diff: { x: 0, y: 0 } })
 onMounted(() => {
   const dimensions = ref(getDimensions(nodeElement.value))
@@ -96,7 +99,7 @@ onMounted(() => {
     ({ width: w, height: h }) => {
       nextTick(() => {
         if (w > 0 && h > 0) {
-          const handleBounds = getHandleBounds(nodeElement.value, store.transform[2], id)
+          const handleBounds = getHandleBounds(nodeElement.value, scale.value, id)
 
           node.value.dimensions = {
             width: w,
@@ -120,16 +123,16 @@ export default {
     cancel=".nodrag"
     :handle="node.dragHandle"
     :disabled="!props.draggable"
-    :scale="store.transform[2]"
+    :scale="scale"
     :grid="props.snapGrid"
     :enable-user-select-hack="false"
-    v-bind="props.draggable"
     @start="onDragStart"
     @move="onDrag"
     @stop="onDragStop"
   >
     <div
       ref="node-element"
+      :key="`node-${node.id}`"
       :class="[
         'vue-flow__node',
         `vue-flow__node-${node.type}`,

src/container/EdgeRenderer/EdgeRenderer.vue

@@ -58,9 +58,8 @@ export default {
         :key="edge.id"
         :edge="edge"
         :component="getType(edge.type)"
-        :selectable="store.elementsSelectable"
+        :selectable="typeof edge.selectable === 'undefined' ? store.elementsSelectable : edge.selectable"
         :updatable="typeof edge.updatable === 'undefined' ? store.edgesUpdatable : edge.updatable"
-        :edge-updater-radius="store.edgeUpdaterRadius"
       >
         <template #default="edgeProps">
           <slot :name="`edge-${edge.type}`" v-bind="edgeProps"></slot>

src/types/edge.ts

@@ -46,6 +46,7 @@ export interface Edge<T = any> extends Element<T> {
   markerStart?: EdgeMarkerType
   markerEnd?: EdgeMarkerType
   updatable?: boolean
+  selectable?: boolean
 }
 
 export interface EdgePositions {