panelui-native 0.63.0 → 0.65.0

package/lib/module/components/flow/flow-accessibility.js

@@ -0,0 +1,84 @@
+"use strict";
+
+export const FLOW_MOVE_ACTIONS = [{
+  name: 'flow-move-up',
+  label: 'Move up',
+  dx: 0,
+  dy: -1
+}, {
+  name: 'flow-move-right',
+  label: 'Move right',
+  dx: 1,
+  dy: 0
+}, {
+  name: 'flow-move-down',
+  label: 'Move down',
+  dx: 0,
+  dy: 1
+}, {
+  name: 'flow-move-left',
+  label: 'Move left',
+  dx: -1,
+  dy: 0
+}];
+export const FLOW_DELETE_ACTION = {
+  name: 'flow-delete',
+  label: 'Delete node'
+};
+/** Keep pointer and assistive-technology movement inside the same group bounds. */
+export function clampNodePosition(rect, bounds, position) {
+  'worklet';
+
+  if (!bounds) return position;
+  return {
+    x: Math.min(Math.max(position.x, bounds.x), bounds.x + bounds.width - rect.width),
+    y: Math.min(Math.max(position.y, bounds.y), bounds.y + bounds.height - rect.height)
+  };
+}
+export function moveNodePosition(rect, bounds, actionName, step) {
+  const action = FLOW_MOVE_ACTIONS.find(entry => entry.name === actionName);
+  if (!action) return undefined;
+  return clampNodePosition(rect, bounds, {
+    x: rect.x + action.dx * Math.max(1, step),
+    y: rect.y + action.dy * Math.max(1, step)
+  });
+}
+
+/** Build connection choices from the same registered nodes and handles used by drag hit-testing. */
+export function getFlowConnectionActions(sourceNode, nodes, handles) {
+  const sources = handles.filter(handle => handle.node === sourceNode && handle.type !== 'target');
+  if (sources.length === 0) return [];
+  const actions = [];
+  for (const source of sources) {
+    for (const targetNode of nodes) {
+      if (targetNode.id === sourceNode) continue;
+      const targets = handles.filter(handle => handle.node === targetNode.id && handle.type !== 'source');
+      if (targets.length === 0) {
+        actions.push({
+          name: `flow-connect:${source.key}->${targetNode.id}`,
+          label: `Connect ${source.label} to ${targetNode.label}`,
+          connection: {
+            source: sourceNode,
+            sourceHandle: source.id,
+            target: targetNode.id
+          }
+        });
+        continue;
+      }
+      for (const target of targets) {
+        actions.push({
+          name: `flow-connect:${source.key}->${target.key}`,
+          label: `Connect ${source.label} to ${targetNode.label}, ${target.label}`,
+          connection: {
+            source: sourceNode,
+            sourceHandle: source.id,
+            target: target.node,
+            targetHandle: target.id
+          }
+        });
+      }
+    }
+  }
+  return actions;
+}
+//# sourceMappingURL=flow-accessibility.js.map

package/lib/module/components/flow/flow-accessibility.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FLOW_MOVE_ACTIONS","name","label","dx","dy","FLOW_DELETE_ACTION","clampNodePosition","rect","bounds","position","x","Math","min","max","width","y","height","moveNodePosition","actionName","step","action","find","entry","undefined","getFlowConnectionActions","sourceNode","nodes","handles","sources","filter","handle","node","type","length","actions","source","targetNode","id","targets","push","key","connection","sourceHandle","target","targetHandle"],"sourceRoot":"../../../../src","sources":["components/flow/flow-accessibility.ts"],"mappings":";;AAGA,OAAO,MAAMA,iBAAiB,GAAG,CAC/B;EAAEC,IAAI,EAAE,cAAc;EAAEC,KAAK,EAAE,SAAS;EAAEC,EAAE,EAAE,CAAC;EAAEC,EAAE,EAAE,CAAC;AAAE,CAAC,EACzD;EAAEH,IAAI,EAAE,iBAAiB;EAAEC,KAAK,EAAE,YAAY;EAAEC,EAAE,EAAE,CAAC;EAAEC,EAAE,EAAE;AAAE,CAAC,EAC9D;EAAEH,IAAI,EAAE,gBAAgB;EAAEC,KAAK,EAAE,WAAW;EAAEC,EAAE,EAAE,CAAC;EAAEC,EAAE,EAAE;AAAE,CAAC,EAC5D;EAAEH,IAAI,EAAE,gBAAgB;EAAEC,KAAK,EAAE,WAAW;EAAEC,EAAE,EAAE,CAAC,CAAC;EAAEC,EAAE,EAAE;AAAE,CAAC,CACrD;AAEV,OAAO,MAAMC,kBAAkB,GAAG;EAAEJ,IAAI,EAAE,aAAa;EAAEC,KAAK,EAAE;AAAc,CAAU;AAqBxF;AACA,OAAO,SAASI,iBAAiBA,CAC/BC,IAAc,EACdC,MAA4B,EAC5BC,QAA0B,EACR;EAClB,SAAS;;EACT,IAAI,CAACD,MAAM,EAAE,OAAOC,QAAQ;EAE5B,OAAO;IACLC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACJ,QAAQ,CAACC,CAAC,EAAEF,MAAM,CAACE,CAAC,CAAC,EAAEF,MAAM,CAACE,CAAC,GAAGF,MAAM,CAACM,KAAK,GAAGP,IAAI,CAACO,KAAK,CAAC;IACjFC,CAAC,EAAEJ,IAAI,CAACC,GAAG,CAACD,IAAI,CAACE,GAAG,CAACJ,QAAQ,CAACM,CAAC,EAAEP,MAAM,CAACO,CAAC,CAAC,EAAEP,MAAM,CAACO,CAAC,GAAGP,MAAM,CAACQ,MAAM,GAAGT,IAAI,CAACS,MAAM;EACpF,CAAC;AACH;AAEA,OAAO,SAASC,gBAAgBA,CAC9BV,IAAc,EACdC,MAA4B,EAC5BU,UAAkB,EAClBC,IAAY,EACkB;EAC9B,MAAMC,MAAM,GAAGpB,iBAAiB,CAACqB,IAAI,CAAEC,KAAK,IAAKA,KAAK,CAACrB,IAAI,KAAKiB,UAAU,CAAC;EAC3E,IAAI,CAACE,MAAM,EAAE,OAAOG,SAAS;EAE7B,OAAOjB,iBAAiB,CAACC,IAAI,EAAEC,MAAM,EAAE;IACrCE,CAAC,EAAEH,IAAI,CAACG,CAAC,GAAGU,MAAM,CAACjB,EAAE,GAAGQ,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEM,IAAI,CAAC;IACzCJ,CAAC,EAAER,IAAI,CAACQ,CAAC,GAAGK,MAAM,CAAChB,EAAE,GAAGO,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEM,IAAI;EAC1C,CAAC,CAAC;AACJ;;AAEA;AACA,OAAO,SAASK,wBAAwBA,CACtCC,UAAkB,EAClBC,KAA8B,EAC9BC,OAAkC,EACV;EACxB,MAAMC,OAAO,GAAGD,OAAO,CAACE,MAAM,CAC3BC,MAAM,IAAKA,MAAM,CAACC,IAAI,KAAKN,UAAU,IAAIK,MAAM,CAACE,IAAI,KAAK,QAC5D,CAAC;EACD,IAAIJ,OAAO,CAACK,MAAM,KAAK,CAAC,EAAE,OAAO,EAAE;EAEnC,MAAMC,OAA+B,GAAG,EAAE;EAC1C,KAAK,MAAMC,MAAM,IAAIP,OAAO,EAAE;IAC5B,KAAK,MAAMQ,UAAU,IAAIV,KAAK,EAAE;MAC9B,IAAIU,UAAU,CAACC,EAAE,KAAKZ,UAAU,EAAE;MAClC,MAAMa,OAAO,GAAGX,OAAO,CAACE,MAAM,CAC3BC,MAAM,IAAKA,MAAM,CAACC,IAAI,KAAKK,UAAU,CAACC,EAAE,IAAIP,MAAM,CAACE,IAAI,KAAK,QAC/D,CAAC;MAED,IAAIM,OAAO,CAACL,MAAM,KAAK,CAAC,EAAE;QACxBC,OAAO,CAACK,IAAI,CAAC;UACXtC,IAAI,EAAE,gBAAgBkC,MAAM,CAACK,GAAG,KAAKJ,UAAU,CAACC,EAAE,EAAE;UACpDnC,KAAK,EAAE,WAAWiC,MAAM,CAACjC,KAAK,OAAOkC,UAAU,CAAClC,KAAK,EAAE;UACvDuC,UAAU,EAAE;YACVN,MAAM,EAAEV,UAAU;YAClBiB,YAAY,EAAEP,MAAM,CAACE,EAAE;YACvBM,MAAM,EAAEP,UAAU,CAACC;UACrB;QACF,CAAC,CAAC;QACF;MACF;MAEA,KAAK,MAAMM,MAAM,IAAIL,OAAO,EAAE;QAC5BJ,OAAO,CAACK,IAAI,CAAC;UACXtC,IAAI,EAAE,gBAAgBkC,MAAM,CAACK,GAAG,KAAKG,MAAM,CAACH,GAAG,EAAE;UACjDtC,KAAK,EAAE,WAAWiC,MAAM,CAACjC,KAAK,OAAOkC,UAAU,CAAClC,KAAK,KAAKyC,MAAM,CAACzC,KAAK,EAAE;UACxEuC,UAAU,EAAE;YACVN,MAAM,EAAEV,UAAU;YAClBiB,YAAY,EAAEP,MAAM,CAACE,EAAE;YACvBM,MAAM,EAAEA,MAAM,CAACZ,IAAI;YACnBa,YAAY,EAAED,MAAM,CAACN;UACvB;QACF,CAAC,CAAC;MACJ;IACF;EACF;EACA,OAAOH,OAAO;AAChB","ignoreList":[]}

package/lib/module/components/flow/index.js

@@ -44,7 +44,7 @@
  * They are nested gesture detectors rather than one gesture doing three jobs,
  * so the innermost thing under the finger wins, which is what a finger expects.
  */
-import { createContext, Fragment, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, Fragment, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -56,6 +56,7 @@ import { AnimatedPressable } from "../../primitives/animated-pressable.js";
 import { Text, textChildren } from "../../primitives/text.js";
 import { cn } from "../../utils/cn.js";
 import { anchorOf, arrivalDirection, arrowHeadPath, autoSides, edgePath, standOff } from "./flow-paths.js";
+import { clampNodePosition, FLOW_DELETE_ACTION, FLOW_MOVE_ACTIONS, getFlowConnectionActions, moveNodePosition } from "./flow-accessibility.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
@@ -172,7 +173,7 @@ function FlowRoot({
     height: 0
   });
   const [locked, setLocked] = useState(false);
-  const [nodeIds, setNodeIds] = useState([]);
+  const [nodes, setNodes] = useState([]);
   const [groupIds, setGroupIds] = useState([]);
   const [handles, setHandles] = useState([]);
   const [edges, setEdges] = useState([]);
@@ -277,11 +278,14 @@ function FlowRoot({
       zoom: z
     });
   }, []);
-  const registerNode = useCallback(id => {
-    setNodeIds(current => current.includes(id) ? current : [...current, id]);
+  const registerNode = useCallback((id, label = id) => {
+    setNodes(current => [...current.filter(entry => entry.id !== id), {
+      id,
+      label
+    }]);
   }, []);
   const unregisterNode = useCallback(id => {
-    setNodeIds(current => current.filter(entry => entry !== id));
+    setNodes(current => current.filter(entry => entry.id !== id));
   }, []);
   const registerGroup = useCallback(id => {
     setGroupIds(current => current.includes(id) ? current : [...current, id]);
@@ -307,6 +311,14 @@ function FlowRoot({
   const unregisterEdge = useCallback(key => {
     setEdges(current => current.filter(edge => edge.key !== key));
   }, []);
+  const connectRef = useRef(onConnect);
+  connectRef.current = onConnect;
+  const validConnectionRef = useRef(isValidConnection);
+  validConnectionRef.current = isValidConnection;
+  const connectNodes = useCallback(next => {
+    if (validConnectionRef.current && !validConnectionRef.current(next)) return;
+    connectRef.current?.(next);
+  }, []);
   const fitView = useCallback(() => {
     const {
       width,
@@ -359,10 +371,10 @@ function FlowRoot({
   // mount has nothing to fit to yet. One frame later they do.
   const fitOnMount = useRef(fitViewOnMount);
   useEffect(() => {
-    if (!fitOnMount.current || nodeIds.length === 0) return;
+    if (!fitOnMount.current || nodes.length === 0) return;
     const timer = setTimeout(fitView, 32);
     return () => clearTimeout(timer);
-  }, [fitView, nodeIds.length]);
+  }, [fitView, nodes.length]);
   const panStart = useSharedValue({
     x: 0,
     y: 0
@@ -448,7 +460,7 @@ function FlowRoot({
     maxZoom,
     locked,
     setLocked,
-    nodeIds,
+    nodes,
     groupIds,
     handles,
     edges,
@@ -460,12 +472,12 @@ function FlowRoot({
     unregisterHandle,
     registerEdge,
     unregisterEdge,
-    onConnect,
-    isValidConnection,
+    connectNodes,
+    canConnect: Boolean(onConnect),
     onNodeDragEnd,
     fitView,
     zoomBy
-  }), [boxes, setNodeRect, dropNodeRect, box, layer, origin, connection, edges, fitView, handles, registerEdge, unregisterEdge, isValidConnection, locked, maxZoom, minZoom, nodeIds, groupIds, onConnect, onNodeDragEnd, rects, registerGroup, registerHandle, registerNode, size, translateX, translateY, unregisterGroup, unregisterHandle, unregisterNode, zoom, zoomBy]);
+  }), [boxes, setNodeRect, dropNodeRect, box, layer, origin, connection, edges, fitView, handles, registerEdge, unregisterEdge, connectNodes, locked, maxZoom, minZoom, nodes, groupIds, onConnect, onNodeDragEnd, rects, registerGroup, registerHandle, registerNode, size, translateX, translateY, unregisterGroup, unregisterHandle, unregisterNode, zoom, zoomBy]);
   const onLayout = useCallback(event => {
     const {
       width,
@@ -610,7 +622,7 @@ function FlowBackground({
   const token = useCSSVariable('--color-muted-foreground');
   const tint = color ?? (typeof token === 'string' ? token : '#737373');
   // A pattern is referenced by id, and two canvases on one screen would collide.
-  const id = useRef(`panelui-flow-${Math.random().toString(36).slice(2, 7)}`).current;
+  const id = `panelui-flow-${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
 
   /*
    * The grid is a tile that follows the viewport in whole-cell steps.
@@ -716,7 +728,11 @@ function FlowNode({
   pinned = false,
   selected = false,
   onPress,
+  onDelete,
+  accessibilityMoveStep = 24,
   accessibilityLabel,
+  accessibilityActions,
+  onAccessibilityAction,
   children,
   ...props
 }) {
@@ -733,7 +749,11 @@ function FlowNode({
     unregisterNode,
     registerGroup,
     unregisterGroup,
-    onNodeDragEnd
+    onNodeDragEnd,
+    nodes,
+    handles,
+    connectNodes,
+    canConnect
   } = flow;
 
   /*
@@ -743,13 +763,13 @@ function FlowNode({
    * layer both need to know it is a container and not a card.
    */
   useEffect(() => {
-    registerNode(id);
+    registerNode(id, accessibilityLabel ?? id);
     registerGroup(id);
     return () => {
       unregisterNode(id);
       unregisterGroup(id);
     };
-  }, [id, registerGroup, registerNode, unregisterGroup, unregisterNode]);
+  }, [accessibilityLabel, id, registerGroup, registerNode, unregisterGroup, unregisterNode]);
 
   // Writing on every render would fight the drag, snapping a node back to the
   // position it was first given. Only an actual change to the prop moves it.
@@ -798,6 +818,48 @@ function FlowNode({
   const pressRef = useRef(onPress);
   pressRef.current = onPress;
   const press = useCallback(() => pressRef.current?.(), []);
+  const moveNode = useCallback(actionName => {
+    const rect = rects.value[id];
+    if (!rect) return;
+    const bounds = confine && group ? rects.value[group] : undefined;
+    const next = moveNodePosition(rect, bounds, actionName, accessibilityMoveStep);
+    if (!next) return;
+    setNodeRect(id, next);
+    dragEnd(next.x, next.y);
+  }, [accessibilityMoveStep, confine, dragEnd, group, id, rects, setNodeRect]);
+  const connectionActions = useMemo(() => canConnect && !locked ? getFlowConnectionActions(id, nodes, handles) : [], [canConnect, handles, id, locked, nodes]);
+  const connectionByAction = useMemo(() => new Map(connectionActions.map(entry => [entry.name, entry.connection])), [connectionActions]);
+  const movable = draggable && !pinned && !locked;
+  const nodeActions = useMemo(() => [...(onPress ? [{
+    name: 'activate'
+  }] : []), ...(movable ? FLOW_MOVE_ACTIONS : []), ...connectionActions.map(({
+    name,
+    label
+  }) => ({
+    name,
+    label
+  })), ...(onDelete ? [FLOW_DELETE_ACTION] : []), ...(accessibilityActions ?? [])], [accessibilityActions, connectionActions, movable, onDelete, onPress]);
+  const handleAccessibilityAction = useCallback(event => {
+    const action = event.nativeEvent.actionName;
+    if (action === 'activate' && onPress) {
+      press();
+      return;
+    }
+    if (movable && FLOW_MOVE_ACTIONS.some(entry => entry.name === action)) {
+      moveNode(action);
+      return;
+    }
+    const nextConnection = connectionByAction.get(action);
+    if (nextConnection) {
+      connectNodes(nextConnection);
+      return;
+    }
+    if (action === FLOW_DELETE_ACTION.name && onDelete) {
+      onDelete();
+      return;
+    }
+    onAccessibilityAction?.(event);
+  }, [connectNodes, connectionByAction, movable, moveNode, onAccessibilityAction, onDelete, onPress, press]);
   const drag = useMemo(() => Gesture.Pan()
   // A pinned node takes no drag at all: it is part of its container, and
   // the container is what moves.
@@ -825,13 +887,12 @@ function FlowNode({
      * would leave the edges drawn to a position the node never reached.
      */
     if (confine && group) {
-      const box = rects.value[group];
-      if (box) {
-        const maxX = box.x + box.width - rect.width;
-        const maxY = box.y + box.height - rect.height;
-        x = x < box.x ? box.x : x > maxX ? maxX : x;
-        y = y < box.y ? box.y : y > maxY ? maxY : y;
-      }
+      const next = clampNodePosition(rect, rects.value[group], {
+        x,
+        y
+      });
+      x = next.x;
+      y = next.y;
     }
     rects.value = {
       ...rects.value,
@@ -886,6 +947,8 @@ function FlowNode({
         accessibilityState: {
           selected
         },
+        accessibilityActions: nodeActions,
+        onAccessibilityAction: handleAccessibilityAction,
         ...props,
         children: textChildren(children)
       })
@@ -912,6 +975,7 @@ function FlowHandle({
   type = 'both',
   offset = 0.5,
   className,
+  accessibilityLabel,
   hidden = false
 }) {
   const flow = useFlow('Flow.Handle');
@@ -926,7 +990,8 @@ function FlowHandle({
     handles,
     locked,
     registerHandle,
-    unregisterHandle
+    unregisterHandle,
+    connectNodes
   } = flow;
   const key = `${node}.${id}`;
   useEffect(() => {
@@ -934,26 +999,21 @@ function FlowHandle({
       key,
       node,
       id,
+      label: accessibilityLabel ?? id,
       side: position,
       offset,
       type
     });
     return () => unregisterHandle(key);
-  }, [id, key, node, offset, position, registerHandle, type, unregisterHandle]);
-  const connectRef = useRef(flow.onConnect);
-  connectRef.current = flow.onConnect;
-  const validRef = useRef(flow.isValidConnection);
-  validRef.current = flow.isValidConnection;
+  }, [accessibilityLabel, id, key, node, offset, position, registerHandle, type, unregisterHandle]);
   const land = useCallback((target, targetHandle) => {
-    const payload = {
+    connectNodes({
       source: node,
       sourceHandle: id,
       target,
       targetHandle
-    };
-    if (validRef.current && !validRef.current(payload)) return;
-    connectRef.current?.(payload);
-  }, [id, node]);
+    });
+  }, [connectNodes, id, node]);
 
   // A snapshot of what a drag can land on, rebuilt only when handles come and
   // go — the drop test runs on the UI thread and cannot read React state.
@@ -1067,8 +1127,7 @@ function FlowHandle({
     children: /*#__PURE__*/_jsx(View, {
       collapsable: false,
       hitSlop: 12,
-      accessibilityRole: "button",
-      accessibilityLabel: `${position} connection point`,
+      accessible: false,
       style: placement,
       className: flowVariants().handle({
         className
@@ -1301,9 +1360,9 @@ function FlowGroup({
     onNodeDragEnd
   } = flow;
   useEffect(() => {
-    registerNode(id);
+    registerNode(id, label ?? id);
     return () => unregisterNode(id);
-  }, [id, registerNode, unregisterNode]);
+  }, [id, label, registerNode, unregisterNode]);
   useEffect(() => {
     setNodeRect(id, {
       x: position.x,
@@ -1553,7 +1612,7 @@ function FlowMiniMap({
 }) {
   const {
     rects,
-    nodeIds,
+    nodes,
     groupIds,
     translateX,
     translateY,
@@ -1640,7 +1699,9 @@ function FlowMiniMap({
     children: /*#__PURE__*/_jsxs(Svg, {
       width: width,
       height: height,
-      children: [nodeIds.map(id => {
+      children: [nodes.map(({
+        id
+      }) => {
         const group = groups.has(id);
         return /*#__PURE__*/_jsx(MiniMapNode, {
           id: id,