drawnui-react 0.1.0-preview.15 → 0.1.0-preview.17

package/dist/react/index.js

@@ -126,6 +126,13 @@ const NAVIGATION_KEYS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDow
  * canvas. Keyboard and screen-reader input arrive as DOM events: Enter / Space activate (a Tapped), the navigation keys
  * go to the focused control and then to its arrow-key group; a group is one Tab stop (roving tabindex).
  */
+/** aria-valuenow / min / max / valuetext of a range control (drawnui-cross 6c); a slider reads as horizontal. */
+function valueAttributes(n) {
+    const v = n.Value;
+    if (!v)
+        return undefined;
+    return { "aria-valuenow": v.Now, "aria-valuemin": v.Min, "aria-valuemax": v.Max, "aria-valuetext": v.Text || undefined, "aria-orientation": n.Role === "slider" ? "horizontal" : undefined };
+}
 function AccessibilityOverlay({ view }) {
     const [nodes, setNodes] = useState(() => view.AccessibilityManager.Snapshot);
     // keyboard focus moved by the manager (arrow keys in a group): focus that node's element once it is rendered
@@ -147,6 +154,23 @@ function AccessibilityOverlay({ view }) {
         setFocusRequest(undefined);
         elementOf(focusRequest.id)?.focus({ preventScroll: true });
     }, [focusRequest]);
+    // the focused node went away (its page or popup closed): the focus goes to the first Tab stop on screen in reading
+    // order instead of falling back to the page (drawnui-cross 6c refocus); a focus the user moved away stays away
+    const focusedId = useRef(0);
+    useLayoutEffect(() => {
+        const id = focusedId.current;
+        if (!id || nodes.some((n) => n.Id === id))
+            return;
+        focusedId.current = 0;
+        const active = document.activeElement;
+        if (active && active !== document.body)
+            return;
+        const box = overlayRef.current?.getBoundingClientRect();
+        const first = nodes.find((n) => n.CanInteract && view.AccessibilityManager.IsTabStop(n.Source)
+            && (!box || (n.Rect.Bottom > 0 && n.Rect.Top < box.height && n.Rect.Right > 0 && n.Rect.Left < box.width)));
+        if (first)
+            elementOf(first.Id)?.focus({ preventScroll: true });
+    }, [nodes]);
     // Tab / Shift+Tab in a text field leave it for the next node, also after a click into it: DOM focus goes to the
     // field's own element (without taking the caret again) and the browser's Tab moves on from there
     const tabbingOut = useRef(0);
@@ -198,7 +222,7 @@ function AccessibilityOverlay({ view }) {
     return (_jsxs("div", { className: "drawnui-a11y-overlay", onScroll: pin, ref: overlayRef, children: [_jsx("style", { children: A11Y_CSS }), nodes.map((n) => {
                 const pos = { left: n.Rect.Left, top: n.Rect.Top, width: n.Rect.Width, height: n.Rect.Height };
                 const activate = () => SkiaAccessibilityManager.Activate(n.Source);
-                return n.CanInteract ? (_jsx("div", { "data-a11y-id": n.Id, role: n.Role, "aria-label": n.Label, title: n.Hint, "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: view.AccessibilityManager.IsTabStop(n.Source) ? 0 : -1, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => {
+                return n.CanInteract ? (_jsx("div", { "data-a11y-id": n.Id, role: n.Role, "aria-label": n.Label, title: n.Hint, ...valueAttributes(n), "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: view.AccessibilityManager.IsTabStop(n.Source) ? 0 : -1, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             activate();
@@ -206,6 +230,7 @@ function AccessibilityOverlay({ view }) {
                         else if (NAVIGATION_KEYS.has(e.key) && SkiaAccessibilityManager.Key(n.Source, e.key))
                             e.preventDefault();
                     }, onFocus: (e) => {
+                        focusedId.current = n.Id;
                         pin({ currentTarget: e.currentTarget.parentElement });
                         SkiaScrollCtrl.EnsureVisible(n.Source); // inside every enclosing scroll
                         if (tabbingOut.current === n.Id)
@@ -215,15 +240,17 @@ function AccessibilityOverlay({ view }) {
                         n.Source.NotifyAccessibilityFocused(true);
                         setFocusTick((t) => t + 1);
                     }, onBlur: (e) => {
+                        if (e.currentTarget.isConnected && focusedId.current === n.Id)
+                            focusedId.current = 0; // moved away on purpose
                         if (TextInputProxy.IsProxyTarget(e.relatedTarget))
                             return; // a text field moved DOM focus to its own input
                         n.Source.OnAccessibilityFocused(false);
                         n.Source.NotifyAccessibilityFocused(false);
                     }, children: n.Label }, n.Id)) : n.TextLines ? (
                 // AccessibilityTextSelectable: one positioned span per drawn line, in the drawn font, so the browser selects and copies it like HTML
-                _jsx("div", { role: n.Role, title: n.Hint, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
+                _jsx("div", { role: n.Role, title: n.Hint, "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
                 // static text is exposed as real (transparent) text content; aria-label only for roles that need a name
-                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
+                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, ...valueAttributes(n), "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
             })] }));
 }
 // One import for apps: React tags + every engine type (Colors, Thickness, Super, gestures, animators...).

package/dist/react/reconciler.js

@@ -1,6 +1,7 @@
 import { createContext } from "react";
 import Reconciler from "react-reconciler";
 import { ConcurrentRoot, DefaultEventPriority } from "react-reconciler/constants";
+import { SkiaControl } from "../core/SkiaControl";
 import { SkiaLabel } from "../controls/SkiaLabel";
 import { TextSpan } from "../controls/TextSpan";
 import { SkiaRichLabel } from "../controls/SkiaRichLabel";
@@ -38,12 +39,14 @@ export const Registry = {
 const SKIP = new Set(["children", "key", "ref"]);
 /** Props that change how the subtree is composited, not what it contains: repaint, keep caches (DrawnUi RedrawCanvas). */
 const REPAINT_ONLY = new Set(["TranslationX", "TranslationY", "Rotation", "ScaleX", "ScaleY", "Scale", "SkewX", "SkewY", "AnchorX", "AnchorY", "Opacity"]);
+/** Props that change only how a control looks, never its size (C# NeedDraw): an ImageComposite above redraws only its area. */
+const isDrawOnly = (k) => k.endsWith("Color") || k === "FillGradient" || k === "StrokeGradient";
 /**
  * Assigns changed props straight onto the control (same names as the C# properties).
  * Handler props (functions) are swapped without invalidating: inline arrows change identity every render.
  */
 function applyProps(inst, prev, next) {
-    let changed = false, repaint = false;
+    let changed = false, repaint = false, layout = false;
     for (const k in next) {
         if (SKIP.has(k) || (prev && prev[k] === next[k]))
             continue;
@@ -52,23 +55,36 @@ function applyProps(inst, prev, next) {
             continue;
         if (REPAINT_ONLY.has(k))
             repaint = true;
-        else
+        else {
             changed = true;
+            if (!isDrawOnly(k))
+                layout = true;
+        }
     }
     if (prev)
         for (const k in prev)
             if (!SKIP.has(k) && !(k in next)) {
                 inst[k] = new inst.constructor()[k];
-                changed = true;
+                changed = layout = true;
             }
-    if (changed && prev)
-        inst.Update();
+    if (changed && prev) {
+        if (layout || !(inst instanceof SkiaControl))
+            inst.Update();
+        else
+            inst.UpdateDraw();
+    }
     else if (repaint && prev)
         inst.RepaintComposition?.();
 }
 let currentUpdatePriority = DefaultEventPriority;
 const noop = () => { };
 const hostContext = {};
+function appendChild(parent, child) {
+    if (parent instanceof SkiaLayout)
+        return parent.InsertChild(child);
+    child.IsChildrenItem = true;
+    parent.AddSubView(child);
+}
 // Record<string, unknown> absorbs members that react-reconciler 0.33 reads but @types 0.32 does not declare yet.
 const hostConfig = {
     supportsMutation: true,
@@ -94,12 +110,15 @@ const hostConfig = {
     createTextInstance(text) {
         throw new Error(`DrawnUi: raw text "${text}" is not allowed, use <SkiaLabel Text="..." />`);
     },
-    appendInitialChild: (parent, child) => parent.AddSubView(child),
-    appendChild: (parent, child) => parent.AddSubView(child),
+    // JSX children are the app's children (C# IsChildrenItem): a layout keeps them in JSX order inside the slots they
+    // occupy, so its own parts keep their place; an existing child passed again is a move
+    appendInitialChild: (parent, child) => appendChild(parent, child),
+    appendChild: (parent, child) => appendChild(parent, child),
     insertBefore: (parent, child, before) => {
-        const index = parent instanceof SkiaLayout ? parent.Views.indexOf(before)
-            : parent instanceof SkiaLabel ? parent.Spans.indexOf(before) : 0;
-        parent.InsertSubView(index, child);
+        if (parent instanceof SkiaLayout)
+            return parent.InsertChild(child, before);
+        child.IsChildrenItem = true;
+        parent.InsertSubView(parent instanceof SkiaLabel ? parent.Spans.indexOf(before) : 0, child);
     },
     removeChild: (parent, child) => parent.RemoveSubView(child),
     appendChildToContainer: (canvas, child) => { canvas.Content = child; },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.15",
+  "version": "0.1.0-preview.17",
   "description": "DrawnUi for React: the DrawnUi (.NET) drawn-UI engine in TypeScript on CanvasKit (Skia WASM). Same controls, same PascalCase API as DrawnUi.Net.",
   "license": "MIT",
   "author": "Nick Kovalsky (AppoMobi)",
@@ -56,6 +56,23 @@
     "check:recycling": "node dev/check.mjs dev/check-recycling.ts",
     "check:keyboard": "node dev/check.mjs dev/check-keyboard.ts",
     "check:wheel": "node dev/check.mjs dev/check-wheel.ts",
+    "check:children": "node dev/check.mjs dev/check-children.tsx",
+    "check:composite": "node dev/check.mjs dev/check-composite.tsx",
+    "check:hover": "node dev/check.mjs dev/check-hover.ts",
+    "check:grid-label": "node dev/check.mjs dev/check-grid-label.ts",
+    "check:snap": "node dev/check.mjs dev/check-snap.ts",
+    "check:game": "node dev/check.mjs dev/check-game.ts",
+    "check:animation": "node dev/check.mjs dev/check-animation.ts",
+    "check:shape": "node dev/check.mjs dev/check-shape.ts",
+    "check:label": "node dev/check.mjs dev/check-label.ts",
+    "check:image": "node dev/check.mjs dev/check-image.ts",
+    "check:longpress": "node dev/check.mjs dev/check-longpress.ts",
+    "check:hidden": "node dev/check.mjs dev/check-hidden.ts",
+    "check:shell": "node dev/check.mjs dev/check-shell.tsx",
+    "check:wheel-routing": "node dev/check.mjs dev/check-wheel-routing.ts",
+    "check:velocity": "node dev/check.mjs dev/check-velocity.ts",
+    "check:scroll-index": "node dev/check.mjs dev/check-scroll-index.ts",
+    "check:culling": "node dev/check.mjs dev/check-culling.ts",
     "site:extras": "node dev/site-extras.mjs dist/demo",
     "build:lib": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
     "prepublishOnly": "npm run build:lib",