feat(core,nodes): implement a11y in nodes

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

packages/core/src/utils/a11y.ts

@@ -1,4 +1,13 @@
+import type { XYPosition } from '~/types'
+
 export const ARIA_NODE_DESC_KEY = 'vue-flow__node-desc'
 export const ARIA_EDGE_DESC_KEY = 'vue-flow__edge-desc'
 
 export const elementSelectionKeys = ['Enter', ' ', 'Escape']
+
+export const arrowKeyDiffs: Record<string, XYPosition> = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+}

packages/core/src/utils/drag.ts

@@ -26,7 +26,8 @@ export function getDragItems(
     .map((n) =>
       markRaw({
         id: n.id,
-        position: n.computedPosition || { x: 0, y: 0, z: 0 },
+        position: n.position || { x: 0, y: 0 },
+        computedPosition: n.computedPosition || { x: 0, y: 0, z: 1 },
         distance: {
           x: mousePos.x - n.computedPosition?.x || 0,
           y: mousePos.y - n.computedPosition?.y || 0,
@@ -59,7 +60,7 @@ export function getEventHandlerParams({
   return [id ? extendedDragItems.find((n) => n.id === id)! : extendedDragItems[0], extendedDragItems]
 }
 
-export function applyExtent<T extends NodeDragItem | GraphNode>(item: T, extent?: CoordinateExtent, parent?: GraphNode) {
+export function getExtent<T extends NodeDragItem | GraphNode>(item: T, extent?: CoordinateExtent, parent?: GraphNode) {
   let currentExtent = item.extent || extent
 
   if (item.extent === 'parent') {
@@ -95,3 +96,28 @@ export function applyExtent<T extends NodeDragItem | GraphNode>(item: T, extent?
 
   return currentExtent as CoordinateExtent
 }
+export const calcNextPosition = (
+  node: GraphNode | NodeDragItem,
+  nextPosition: XYPosition,
+  nodeExtent?: CoordinateExtent,
+  parentNode?: GraphNode,
+) => {
+  const extent = getExtent(node, nodeExtent, parentNode)
+
+  const clampedPos = clampPosition(nextPosition, extent)
+
+  const parentPosition = { x: 0, y: 0 }
+
+  if (parentNode) {
+    parentPosition.x = parentNode.computedPosition.x
+    parentPosition.y = parentNode.computedPosition.y
+  }
+
+  return {
+    position: {
+      x: clampedPos.x - parentPosition.x,
+      y: clampedPos.y - parentPosition.y,
+    },
+    computedPosition: clampedPos,
+  }
+}

packages/core/src/utils/graph.ts

@@ -89,6 +89,7 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent, defaults?: P
       draggable: undefined,
       selectable: undefined,
       connectable: undefined,
+      focusable: undefined,
       selected: false,
       dragging: false,
       resizing: false,
@@ -125,6 +126,7 @@ export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge
         targetY: 0 || defaults?.targetY,
         updatable: edge.updatable ?? defaults?.updatable,
         selectable: edge.selectable ?? defaults?.selectable,
+        focusable: edge.focusable ?? defaults?.focusable,
         data,
         events: markRaw(events),
         label: (edge.label && !isString(edge.label) ? markRaw(edge.label) : edge.label) || defaults?.label,
@@ -369,6 +371,6 @@ export const getMarkerId = (marker: EdgeMarkerType | undefined, vueFlowId?: stri
 
   return `${idPrefix}${Object.keys(marker)
     .sort()
-    .map((key: string) => `${key}=${marker[<keyof EdgeMarkerType>key]}`)
+    .map((key) => `${key}=${marker[<keyof EdgeMarkerType>key]}`)
     .join('&')}`
 }

packages/core/src/utils/node.ts

@@ -30,12 +30,13 @@ export const handleNodeClick = (
   addSelectedNodes: Actions['addSelectedNodes'],
   removeSelectedElements: Actions['removeSelectedElements'],
   nodesSelectionActive: Ref<boolean>,
+  unselect = false,
 ) => {
   nodesSelectionActive.value = false
 
   if (!node.selected) {
     addSelectedNodes([node])
-  } else if (node.selected && multiSelectionActive) {
+  } else if (unselect || (node.selected && multiSelectionActive)) {
     removeSelectedElements([node])
   }
 }