feat(core,nodes): implement a11y in nodes

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

packages/core/src/composables/useDrag.ts

@@ -3,7 +3,7 @@ import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import type { Ref } from 'vue'
 import type { MaybeRef } from '@vueuse/core'
-import type { CoordinateExtent, NodeDragEvent, NodeDragItem, SnapGrid, XYPosition } from '~/types'
+import type { NodeDragEvent, NodeDragItem, SnapGrid, XYPosition } from '~/types'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
 
@@ -98,12 +98,18 @@ function useDrag(params: UseDragParams) {
                     nextPosition.y = snapY * Math.round(nextPosition.y / snapY)
                   }
 
-                  const currentExtent = applyExtent(n, nodeExtent, n.parentNode ? getNode(n.parentNode) : undefined)
+                  const { computedPosition, position } = calcNextPosition(
+                    n,
+                    nextPosition,
+                    nodeExtent,
+                    n.parentNode ? getNode(n.parentNode) : undefined,
+                  )
 
                   // we want to make sure that we only fire a change event when there is a changes
                   hasChange = hasChange || n.position.x !== nextPosition.x || n.position.y !== nextPosition.y
 
-                  n.position = currentExtent ? clampPosition(nextPosition, currentExtent as CoordinateExtent) : nextPosition
+                  n.computedPosition = { ...n.computedPosition, ...computedPosition }
+                  n.position = position
 
                   return n
                 })

packages/core/src/composables/useKeyPress.ts

@@ -2,12 +2,11 @@ import type { Ref } from 'vue'
 import type { KeyFilter, MaybeRef } from '@vueuse/core'
 import { isBoolean, isFunction } from '@vueuse/core'
 
-function isInputDOMNode(event: KeyboardEvent): boolean {
+export function isInputDOMNode(event: KeyboardEvent): boolean {
   const target = (event.composedPath?.()?.[0] || event.target) as HTMLElement
 
   // we want to be able to do a multi selection event if we are in an input field
   if (event.ctrlKey || event.metaKey || event.shiftKey) return false
-
   const hasAttribute = isFunction(target.hasAttribute) ? target.hasAttribute('contenteditable') : false
 
   const closest = isFunction(target.closest) ? target.closest('.nokey') : null

packages/core/src/composables/useUpdateNodePositions.ts

@@ -0,0 +1,32 @@
+import type { NodeDragItem, XYPosition } from '~/types'
+
+function useUpdateNodePositions() {
+  const { getSelectedNodes, nodeExtent, updateNodePositions, findNode } = useVueFlow()
+
+  return (positionDiff: XYPosition) => {
+    const nodeUpdates = getSelectedNodes.value.flatMap((n) => {
+      if (n.computedPosition) {
+        const nextPosition = { x: n.computedPosition.x + positionDiff.x, y: n.computedPosition.y + positionDiff.y }
+
+        const updatedPos = calcNextPosition(n, nextPosition, nodeExtent.value, n.parentNode ? findNode(n.parentNode) : undefined)
+
+        return [
+          {
+            id: n.id,
+            position: updatedPos.position,
+            computedPosition: { ...n.computedPosition, ...updatedPos.computedPosition },
+            from: n.position,
+            distance: { x: positionDiff.x, y: positionDiff.y },
+            dimensions: n.dimensions,
+          },
+        ] as NodeDragItem[]
+      }
+
+      return []
+    })
+
+    updateNodePositions(nodeUpdates, true, true)
+  }
+}
+
+export default useUpdateNodePositions