refactor(core): cleanup edge and node renderer

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

packages/core/src/components/Edges/EdgeWrapper.ts

@@ -15,7 +15,7 @@ interface Props {
 const EdgeWrapper = defineComponent({
   name: 'Edge',
   compatConfig: { MODE: 3 },
-  props: ['name', 'type', 'id', 'updatable', 'selectable', 'focusable', 'edge'],
+  props: ['name', 'type', 'id', 'edge'],
   setup(props: Props) {
     const {
       id: vueFlowId,
@@ -29,6 +29,9 @@ const EdgeWrapper = defineComponent({
       removeSelectedEdges,
       findEdge,
       findNode,
+      edgesUpdatable,
+      edgesFocusable,
+      elementsSelectable,
     } = useVueFlow()
 
     const hooks = useEdgeHooks(props.edge, emits)
@@ -52,6 +55,12 @@ const EdgeWrapper = defineComponent({
     provide(EdgeId, props.id)
     provide(EdgeRef, edgeEl)
 
+    const selectable = $computed(() => (typeof edge.selectable === 'undefined' ? elementsSelectable : edge.selectable))
+
+    const updatable = $computed(() => (typeof edge.updatable === 'undefined' ? edgesUpdatable : edge.updatable))
+
+    const focusable = $computed(() => (typeof edge.focusable === 'undefined' ? edgesFocusable : edge.focusable))
+
     const sourceNode = $computed(() => findNode(edge.source))
 
     const targetNode = $computed(() => findNode(edge.target))
@@ -118,7 +127,7 @@ const EdgeWrapper = defineComponent({
               updating: mouseOver,
               selected: edge.selected,
               animated: edge.animated,
-              inactive: !props.selectable,
+              inactive: !selectable,
             },
           ],
           'onClick': onEdgeClick,
@@ -127,11 +136,11 @@ const EdgeWrapper = defineComponent({
           'onMouseenter': onEdgeMouseEnter,
           'onMousemove': onEdgeMouseMove,
           'onMouseleave': onEdgeMouseLeave,
-          'onKeyDown': props.focusable ? onKeyDown : undefined,
+          'onKeyDown': focusable ? onKeyDown : undefined,
-          'tabIndex': props.focusable ? 0 : undefined,
+          'tabIndex': focusable ? 0 : undefined,
           'aria-label': edge.ariaLabel === null ? undefined : edge.ariaLabel || `Edge from ${edge.source} to ${edge.target}`,
-          'aria-describedby': props.focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
+          'aria-describedby': focusable ? `${ARIA_EDGE_DESC_KEY}-${vueFlowId}` : undefined,
-          'role': props.focusable ? 'button' : undefined,
+          'role': focusable ? 'button' : undefined,
         },
         [
           updating
@@ -143,7 +152,7 @@ const EdgeWrapper = defineComponent({
                 source: edge.source,
                 target: edge.target,
                 type: edge.type,
-                updatable: props.updatable,
+                updatable,
                 selected: edge.selected,
                 animated: edge.animated,
                 label: edge.label,
@@ -169,7 +178,7 @@ const EdgeWrapper = defineComponent({
               }),
 
           [
-            props.updatable === 'source' || props.updatable === true
+            updatable === 'source' || updatable === true
               ? [
                   h(
                     'g',
@@ -188,7 +197,7 @@ const EdgeWrapper = defineComponent({
                   ),
                 ]
               : null,
-            props.updatable === 'target' || props.updatable === true
+            updatable === 'target' || updatable === true
               ? [
                   h(
                     'g',
@@ -247,7 +256,7 @@ const EdgeWrapper = defineComponent({
 
     function onEdgeClick(event: MouseEvent) {
       const data = { event, edge }
-      if (props.selectable) {
+      if (selectable) {
         nodesSelectionActive.value = false
 
         addSelectedEdges([edge])
@@ -284,7 +293,7 @@ const EdgeWrapper = defineComponent({
     }
 
     function onKeyDown(event: KeyboardEvent) {
-      if (elementSelectionKeys.includes(event.key) && props.selectable) {
+      if (elementSelectionKeys.includes(event.key) && selectable) {
         const unselect = event.key === 'Escape'
 
         if (unselect) {

packages/core/src/components/Nodes/NodeWrapper.vue

@@ -1,14 +1,10 @@
 <script lang="ts" setup>
 import { isNumber } from '@vueuse/core'
-import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
+import type { GraphNode, NodeComponent } from '../../types'
 import { ARIA_NODE_DESC_KEY } from '../../utils/a11y'
 
-const { id, type, name, draggable, selectable, connectable, ...props } = defineProps<{
+const { id, type, name, ...props } = defineProps<{
   id: string
-  draggable: boolean
-  selectable: boolean
-  connectable: HandleConnectable
-  focusable: boolean
   type: NodeComponent | Function | Object | false
   name: string
   node: GraphNode
@@ -38,6 +34,10 @@ const {
   ariaLiveMessage,
   snapToGrid,
   snapGrid,
+  nodesDraggable,
+  elementsSelectable,
+  nodesConnectable,
+  nodesFocusable,
 } = $(useVueFlow())
 
 const updateNodePositions = useUpdateNodePositions()
@@ -48,6 +48,16 @@ const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode)
 
 const connectedEdges = $computed(() => getConnectedEdges([node], edges))
 
+const intersections = $computed(() => getIntersectingNodes(node))
+
+const draggable = $computed(() => (typeof node.draggable === 'undefined' ? nodesDraggable : node.draggable))
+
+const selectable = $computed(() => (typeof node.selectable === 'undefined' ? elementsSelectable : node.selectable))
+
+const connectable = $computed(() => (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable))
+
+const focusable = $computed(() => (typeof node.focusable === 'undefined' ? nodesFocusable : node.focusable))
+
 const nodeElement = ref<HTMLDivElement>()
 
 provide(NodeRef, nodeElement)
@@ -59,13 +69,13 @@ const dragging = useDrag({
   el: nodeElement,
   disabled: computed(() => !draggable),
   onStart(event, node, nodes) {
-    emit.dragStart({ event, node, nodes, intersections: getIntersectingNodes(node) })
+    emit.dragStart({ event, node, nodes, intersections })
   },
   onDrag(event, node, nodes) {
-    emit.drag({ event, node, nodes, intersections: getIntersectingNodes(node) })
+    emit.drag({ event, node, nodes, intersections })
   },
   onStop(event, node, nodes) {
-    emit.dragStop({ event, node, nodes, intersections: getIntersectingNodes(node) })
+    emit.dragStop({ event, node, nodes, intersections })
   },
 })
 

packages/core/src/container/EdgeRenderer/EdgeRenderer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import EdgeWrapper from '../../components/Edges/EdgeWrapper'
 import ConnectionLine from '../../components/ConnectionLine/ConnectionLine.vue'
-import type { EdgeComponent, EdgeUpdatable, GraphEdge } from '../../types'
+import type { EdgeComponent, GraphEdge } from '../../types'
 import MarkerDefinitions from './MarkerDefinitions.vue'
 
 const slots = inject(Slots)
@@ -9,9 +9,6 @@ const slots = inject(Slots)
 const {
   connectionStartHandle,
   nodesConnectable,
-  edgesUpdatable,
-  edgesFocusable,
-  elementsSelectable,
   getSelectedNodes,
   findNode,
   getEdges,
@@ -53,10 +50,6 @@ onBeforeUnmount(() => {
   stop?.()
 })
 
-const selectable = (edgeSelectable?: boolean) => (typeof edgeSelectable === 'undefined' ? elementsSelectable : edgeSelectable)
-const updatable = (edgeUpdatable?: EdgeUpdatable) => (typeof edgeUpdatable === 'undefined' ? edgesUpdatable : edgeUpdatable)
-const focusable = (edgeFocusable?: boolean) => (typeof edgeFocusable === 'undefined' ? edgesFocusable : edgeFocusable)
-
 function getType(type?: string, template?: GraphEdge['template']) {
   const name = type || 'default'
   let edgeType = template ?? getEdgeTypes[name]
@@ -100,9 +93,6 @@ export default {
         :edge="edge"
         :type="getType(edge.type, edge.template)"
         :name="edge.type || 'default'"
-        :selectable="selectable(edge.selectable)"
-        :updatable="updatable(edge.updatable)"
-        :focusable="focusable(edge.focusable)"
       />
     </g>
   </svg>

packages/core/src/container/NodeRenderer/NodeRenderer.vue

@@ -1,21 +1,10 @@
 <script lang="ts" setup>
 import { NodeWrapper } from '../../components'
-import type { GraphNode, HandleConnectable, NodeComponent } from '../../types'
+import type { GraphNode, NodeComponent } from '../../types'
 
 const slots = inject(Slots)
 
-const {
+const { nodes, getNodes, getNodesInitialized, getNodeTypes, updateNodeDimensions, emits } = $(useVueFlow())
-  nodesDraggable,
-  nodesFocusable,
-  elementsSelectable,
-  nodesConnectable,
-  nodes,
-  getNodes,
-  getNodesInitialized,
-  getNodeTypes,
-  updateNodeDimensions,
-  emits,
-} = $(useVueFlow())
 
 let resizeObserver = $ref<ResizeObserver>()
 
@@ -44,12 +33,6 @@ onMounted(() => {
 
 onBeforeUnmount(() => resizeObserver?.disconnect())
 
-const draggable = (nodeDraggable?: boolean) => (typeof nodeDraggable === 'undefined' ? nodesDraggable : nodeDraggable)
-const selectable = (nodeSelectable?: boolean) => (typeof nodeSelectable === 'undefined' ? elementsSelectable : nodeSelectable)
-const connectable = (nodeConnectable?: HandleConnectable) =>
-  typeof nodeConnectable === 'undefined' ? nodesConnectable : nodeConnectable
-const focusable = (nodeFocusable?: boolean) => (typeof nodeFocusable === 'undefined' ? nodesFocusable : nodeFocusable)
-
 function getType(type?: string, template?: GraphNode['template']) {
   const name = type || 'default'
   let nodeType = template ?? getNodeTypes[name]
@@ -92,10 +75,6 @@ export default {
         :resize-observer="resizeObserver"
         :type="getType(node.type, node.template)"
         :name="node.type || 'default'"
-        :draggable="draggable(node.draggable)"
-        :selectable="selectable(node.selectable)"
-        :connectable="connectable(node.connectable)"
-        :focusable="focusable(node.focusable)"
         :node="node"
       />
     </template>