chore(core): cleanup

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

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

@@ -47,7 +47,7 @@ const NodeWrapper = defineComponent({
 
     const node = $(useVModel(props, 'node'))
 
-    const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode) : undefined))
+    const parentNode = computed(() => findNode(node.parentNode))
 
     const connectedEdges = $computed(() => getConnectedEdges([node], edges))
 
@@ -73,9 +73,9 @@ const NodeWrapper = defineComponent({
       },
     })
 
-    const getClass = $computed(() => (node.class instanceof Function ? node.class(node) : node.class))
+    const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
 
-    const getStyle = $computed(() => {
+    const getStyle = computed(() => {
       const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
 
       const width = node.width instanceof Function ? node.width(node) : node.width
@@ -92,7 +92,7 @@ const NodeWrapper = defineComponent({
       return styles
     })
 
-    const zIndex = computed(() => Number(node.zIndex ?? getStyle.zIndex ?? 0))
+    const zIndex = computed(() => Number(node.zIndex ?? getStyle.value.zIndex ?? 0))
 
     onUpdateNodeInternals((updateIds) => {
       if (updateIds.includes(props.id)) {
@@ -121,14 +121,14 @@ const NodeWrapper = defineComponent({
       [
         () => node.position.x,
         () => node.position.y,
-        () => parentNode?.computedPosition.x,
+        () => parentNode.value?.computedPosition.x,
-        () => parentNode?.computedPosition.y,
+        () => parentNode.value?.computedPosition.y,
-        () => parentNode?.computedPosition.z,
+        () => parentNode.value?.computedPosition.z,
         () => node.selected,
         () => node.dimensions.height,
         () => node.dimensions.width,
-        () => parentNode?.dimensions.height,
+        () => parentNode.value?.dimensions.height,
-        () => parentNode?.dimensions.width,
+        () => parentNode.value?.dimensions.width,
         zIndex,
       ],
       ([newX, newY, parentX, parentY, parentZ]) => {
@@ -184,14 +184,14 @@ const NodeWrapper = defineComponent({
               selected: node.selected,
               selectable: props.selectable,
             },
-            getClass,
+            getClass.value,
           ],
           'style': {
             zIndex: node.computedPosition.z ?? zIndex.value,
             transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
             pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
             visibility: node.initialized ? 'visible' : 'hidden',
-            ...getStyle,
+            ...getStyle.value,
           },
           'tabIndex': props.focusable ? 0 : undefined,
           'role': props.focusable ? 'button' : undefined,
@@ -239,7 +239,7 @@ const NodeWrapper = defineComponent({
         nextPos.y = snapGrid[1] * Math.round(nextPos.y / snapGrid[1])
       }
 
-      const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent, parentNode)
+      const { computedPosition, position } = calcNextPosition(node, nextPos, emits.error, nodeExtent, parentNode.value)
 
       // only overwrite positions if there are changes when clamping
       if (node.computedPosition.x !== computedPosition.x || node.computedPosition.y !== computedPosition.y) {

packages/core/src/composables/useHandle.ts

@@ -1,12 +1,12 @@
-import type { MaybeRef } from '@vueuse/core'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc } from '~/types'
+import type { MaybeRefOrGetter } from '~/types/utils'
 
 interface UseHandleProps {
-  handleId: MaybeRef<string | null>
+  handleId: MaybeRefOrGetter<string | null>
-  nodeId: MaybeRef<string>
+  nodeId: MaybeRefOrGetter<string>
-  type: MaybeRef<HandleType>
+  type: MaybeRefOrGetter<HandleType>
   isValidConnection?: ValidConnectionFunc | null
-  edgeUpdaterType?: MaybeRef<HandleType>
+  edgeUpdaterType?: MaybeRefOrGetter<HandleType>
   onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
   onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
 }
@@ -16,18 +16,15 @@ function alwaysValid() {
 }
 
 export default function useHandle({
-  handleId: _handleId,
+  handleId,
-  nodeId: _nodeId,
+  nodeId,
   type,
   isValidConnection,
-  edgeUpdaterType: _edgeUpdaterType,
+  edgeUpdaterType,
   onEdgeUpdate,
   onEdgeUpdateEnd,
 }: UseHandleProps) {
-  const isTarget = computed(() => unref(type) === 'target')
+  const isTarget = computed(() => resolveUnref(type) === 'target')
-  const nodeId = computed(() => unref(_nodeId))
-  const handleId = computed(() => unref(_handleId))
-  const edgeUpdaterType = computed(() => unref(_edgeUpdaterType))
 
   const {
     vueFlowRef,
@@ -60,7 +57,7 @@ export default function useHandle({
     const doc = getHostForElement(event.target as HTMLElement)
 
     if ((isMouseTriggered && event.button === 0) || !isMouseTriggered) {
-      const node = findNode(nodeId.value)
+      const node = findNode(resolveUnref(nodeId))
 
       let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
 
@@ -74,7 +71,7 @@ export default function useHandle({
 
       const { x, y } = getEventPosition(event)
       const clickedHandle = doc?.elementFromPoint(x, y)
-      const handleType = getHandleType(edgeUpdaterType.value, clickedHandle)
+      const handleType = getHandleType(resolveUnref(edgeUpdaterType), clickedHandle)
       const containerBounds = vueFlowRef.value?.getBoundingClientRect()
 
       if (!containerBounds || !handleType) {
@@ -87,8 +84,8 @@ export default function useHandle({
 
       const handleLookup = getHandleLookup({
         nodes: getNodes.value,
-        nodeId: nodeId.value,
+        nodeId: resolveUnref(nodeId),
-        handleId: handleId.value,
+        handleId: resolveUnref(handleId),
         handleType,
       })
 
@@ -106,8 +103,8 @@ export default function useHandle({
 
       startConnection(
         {
-          nodeId: nodeId.value,
+          nodeId: resolveUnref(nodeId),
-          handleId: handleId.value,
+          handleId: resolveUnref(handleId),
           type: handleType,
         },
         {
@@ -117,7 +114,7 @@ export default function useHandle({
         event,
       )
 
-      emits.connectStart({ event, nodeId: nodeId.value, handleId: handleId.value, handleType })
+      emits.connectStart({ event, nodeId: resolveUnref(nodeId), handleId: resolveUnref(handleId), handleType })
 
       function onPointerMove(event: MouseTouchEvent) {
         connectionPosition = getEventPosition(event, containerBounds)
@@ -137,8 +134,8 @@ export default function useHandle({
           event,
           prevClosestHandle,
           connectionMode.value,
-          nodeId.value,
+          resolveUnref(nodeId),
-          handleId.value,
+          resolveUnref(handleId),
           isTarget.value ? 'target' : 'source',
           isValidConnectionHandler,
           doc,
@@ -227,13 +224,18 @@ export default function useHandle({
     }
 
     if (!connectionClickStartHandle.value) {
-      emits.clickConnectStart({ event, nodeId: nodeId.value, handleId: handleId.value })
+      emits.clickConnectStart({ event, nodeId: resolveUnref(nodeId), handleId: resolveUnref(handleId) })
 
-      startConnection({ nodeId: nodeId.value, type: unref(type), handleId: handleId.value }, undefined, event, true)
+      startConnection(
+        { nodeId: resolveUnref(nodeId), type: resolveUnref(type), handleId: resolveUnref(handleId) },
+        undefined,
+        event,
+        true,
+      )
     } else {
       let isValidConnectionHandler = isValidConnection || isValidConnectionProp.value || alwaysValid
 
-      const node = findNode(nodeId.value)
+      const node = findNode(resolveUnref(nodeId))
 
       if (!isValidConnectionHandler && node) {
         isValidConnectionHandler = (!isTarget ? node.isValidTargetPos : node.isValidSourcePos) || alwaysValid
@@ -248,9 +250,9 @@ export default function useHandle({
       const { connection, isValid } = isValidHandle(
         event,
         {
-          nodeId: nodeId.value,
+          nodeId: resolveUnref(nodeId),
-          id: handleId.value,
+          id: resolveUnref(handleId),
-          type: unref(type),
+          type: resolveUnref(type),
         },
         connectionMode.value,
         connectionClickStartHandle.value.nodeId,

packages/core/src/composables/useNode.ts

@@ -23,7 +23,7 @@ export default function useNode<Data = ElementData, CustomEvents extends Record<
     id: nodeId,
     nodeEl,
     node,
-    parentNode: computed(() => (node.parentNode ? findNode(node.parentNode) : undefined)),
+    parentNode: computed(() => findNode(node.parentNode)),
     connectedEdges: computed(() => getConnectedEdges([node], edges.value)),
   }
 }

packages/core/src/store/actions.ts

@@ -180,13 +180,15 @@ export function useActions(
   }
 
   const nodeSelectionHandler = (nodes: GraphNode[], selected: boolean) => {
+    const nodeIds = nodes.map((n) => n.id)
+
     let changedNodes: NodeChange[]
     let changedEdges: EdgeChange[] = []
 
     if (state.multiSelectionActive) {
-      changedNodes = nodeIds.value.map((nodeId) => createSelectionChange(nodeId, selected))
+      changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, selected))
     } else {
-      const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], nodeIds.value)
+      const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], nodeIds)
       changedNodes = selectionChanges.changedNodes
       changedEdges = selectionChanges.changedEdges
     }
@@ -201,13 +203,15 @@ export function useActions(
   }
 
   const edgeSelectionHandler = (edges: GraphEdge[], selected: boolean) => {
+    const edgeIds = edges.map((e) => e.id)
+
     let changedNodes: NodeChange[] = []
     let changedEdges: EdgeChange[]
 
     if (state.multiSelectionActive) {
-      changedEdges = edgeIds.value.map((edgeId) => createSelectionChange(edgeId, selected))
+      changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, selected))
     } else {
-      const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], edgeIds.value)
+      const selectionChanges = getSelectionChanges([...state.nodes, ...state.edges], edgeIds)
       changedNodes = selectionChanges.changedNodes
       changedEdges = selectionChanges.changedEdges
     }
@@ -222,14 +226,14 @@ export function useActions(
   }
 
   const elementSelectionHandler = (elements: Elements, selected: boolean) => {
-    let { changedNodes, changedEdges } = getSelectionChanges(
+    const nodeIds = elements.filter(isNode).map((n) => n.id)
-      [...state.nodes, ...state.edges],
+    const edgeIds = elements.filter(isEdge).map((e) => e.id)
-      [...nodeIds.value, ...edgeIds.value],
+
-    )
+    let { changedNodes, changedEdges } = getSelectionChanges([...state.nodes, ...state.edges], [...nodeIds, ...edgeIds])
 
     if (state.multiSelectionActive) {
-      changedNodes = nodeIds.value.map((nodeId) => createSelectionChange(nodeId, selected))
+      changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, selected))
-      changedEdges = edgeIds.value.map((edgeId) => createSelectionChange(edgeId, selected))
+      changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, selected))
     }
 
     if (changedNodes.length) {
@@ -258,7 +262,9 @@ export function useActions(
       return nodeSelectionHandler(nodes, false)
     }
 
-    const changedNodes = nodeIds.value.map((nodeId) => createSelectionChange(nodeId, false))
+    const nodeIds = nodes.map((n) => n.id)
+
+    const changedNodes = nodeIds.map((nodeId) => createSelectionChange(nodeId, false))
 
     if (changedNodes.length) {
       state.hooks.nodesChange.trigger(changedNodes)
@@ -270,7 +276,9 @@ export function useActions(
       return edgeSelectionHandler(edges, false)
     }
 
-    const changedEdges = edgeIds.value.map((edgeId) => createSelectionChange(edgeId, false))
+    const edgeIds = edges.map((e) => e.id)
+
+    const changedEdges = edgeIds.map((edgeId) => createSelectionChange(edgeId, false))
 
     if (changedEdges.length) {
       state.hooks.edgesChange.trigger(changedEdges)
@@ -285,7 +293,7 @@ export function useActions(
     const { changedNodes, changedEdges } = elements.reduce(
       (acc, curr) => {
         const selectionChange = createSelectionChange(curr.id, false)
-        if (isGraphNode(curr)) {
+        if (isNode(curr)) {
           acc.changedNodes.push(selectionChange)
         } else {
           acc.changedEdges.push(selectionChange)