drawnui-react 0.1.0-preview.14 → 0.1.0-preview.16

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.14",
+  "version": "0.1.0-preview.16",
   "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,9 @@
     "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",
     "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",