@almadar/ui 5.110.0 → 5.111.0

package/dist/avl/index.cjs

@@ -11162,6 +11162,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -13006,8 +13013,9 @@ var init_DrawSprite = __esm({
         if (!r2) return;
         src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -13054,27 +13062,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          const y = p.y + (node.offsetY ?? 0) * tw;
+          const w = (node.width ?? 0) * tw;
+          const h = (node.height ?? 0) * tw;
           if (node.fill) painter.fillRect(x, y, w, h, node.fill);
           if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          const cy = p.y + (node.offsetY ?? 0) * tw;
+          const rx = (node.radiusX ?? 0) * tw;
+          const ry = (node.radiusY ?? rx) * tw;
           if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
           if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          const tw = dctx.projector.tileWidth;
+          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
           if (node.fill) painter.fillPoly(pts, node.fill);
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
@@ -13305,10 +13316,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -13323,7 +13336,7 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const [, setAtlasVersion] = React90.useState(0);
+  const [atlasVersion, setAtlasVersion] = React90.useState(0);
   const bumpAtlas = React90.useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = React90.useMemo(() => {
     if (!showMinimap) return [];
@@ -13391,6 +13404,9 @@ function Canvas2D({
   React90.useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  React90.useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   React90.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;

package/dist/avl/index.js

@@ -11116,6 +11116,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -12960,8 +12967,9 @@ var init_DrawSprite = __esm({
         if (!r2) return;
         src = { x: r2.sx, y: r2.sy, w: r2.sw, h: r2.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -13008,27 +13016,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          const y = p.y + (node.offsetY ?? 0) * tw;
+          const w = (node.width ?? 0) * tw;
+          const h = (node.height ?? 0) * tw;
           if (node.fill) painter.fillRect(x, y, w, h, node.fill);
           if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          const cy = p.y + (node.offsetY ?? 0) * tw;
+          const rx = (node.radiusX ?? 0) * tw;
+          const ry = (node.radiusY ?? rx) * tw;
           if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
           if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          const tw = dctx.projector.tileWidth;
+          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
           if (node.fill) painter.fillPoly(pts, node.fill);
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
@@ -13259,10 +13270,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -13277,7 +13290,7 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const [, setAtlasVersion] = useState(0);
+  const [atlasVersion, setAtlasVersion] = useState(0);
   const bumpAtlas = useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = useMemo(() => {
     if (!showMinimap) return [];
@@ -13345,6 +13358,9 @@ function Canvas2D({
   useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;

package/dist/components/game/atoms/DrawShape.d.ts

@@ -24,18 +24,18 @@ export interface DrawShapeProps extends DrawableBase {
     position: ScenePos;
     /** How the shape aligns to its projected position. Default varies by `shape`. */
     anchor?: DrawableAnchor;
-    /** Rect width in px. */
+    /** Rect width in world units (fractions of `projector.tileWidth`). */
     width?: number;
-    /** Rect height in px. */
+    /** Rect height in world units (fractions of `projector.tileWidth`). */
     height?: number;
-    /** Ellipse horizontal radius in px. */
+    /** Ellipse horizontal radius in world units (fractions of `projector.tileWidth`). */
     radiusX?: number;
-    /** Ellipse vertical radius in px; omitted → `radiusX` (a circle). */
+    /** Ellipse vertical radius in world units; omitted → `radiusX` (a circle). */
     radiusY?: number;
-    /** Fine px nudge from the anchor point (e.g. a disc drawn at `groundY - 8*scale`). */
+    /** Fine nudge from the anchor point in world units. */
     offsetX?: number;
     offsetY?: number;
-    /** Poly vertices as px offsets relative to the cell's projected top-left. */
+    /** Poly vertices as world-unit offsets relative to the cell's projected top-left. */
     points?: PainterPoint[];
     fill?: string;
     stroke?: string;

package/dist/components/game/atoms/DrawSprite.d.ts

@@ -25,9 +25,9 @@ export interface DrawSpriteProps extends DrawableBase {
     asset: Asset;
     /** How the sprite aligns to its projected position. Default `'top-left'`. */
     anchor?: DrawableAnchor;
-    /** Draw width in px (2D) / world units (3D); omitted → resolved source width. */
+    /** Draw width in world units (fractions of `projector.tileWidth`); omitted → resolved source width in px. */
     width?: number;
-    /** Draw height in px (2D) / world units (3D); omitted → resolved source height. */
+    /** Draw height in world units (fractions of `projector.tileWidth`); omitted → resolved source height in px. */
     height?: number;
     /** Explicit atlas sub-rect override (px); omitted → resolved from `asset.atlas`/`asset.sprite`. */
     frame?: BlitSrc;

package/dist/components/index.cjs

@@ -15303,6 +15303,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -15865,8 +15872,9 @@ var init_DrawSprite = __esm({
         if (!r) return;
         src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -15913,27 +15921,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          const y = p.y + (node.offsetY ?? 0) * tw;
+          const w = (node.width ?? 0) * tw;
+          const h = (node.height ?? 0) * tw;
           if (node.fill) painter.fillRect(x, y, w, h, node.fill);
           if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          const cy = p.y + (node.offsetY ?? 0) * tw;
+          const rx = (node.radiusX ?? 0) * tw;
+          const ry = (node.radiusY ?? rx) * tw;
           if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
           if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          const tw = dctx.projector.tileWidth;
+          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
           if (node.fill) painter.fillPoly(pts, node.fill);
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
@@ -16164,10 +16175,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -16182,7 +16195,7 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const [, setAtlasVersion] = React73.useState(0);
+  const [atlasVersion, setAtlasVersion] = React73.useState(0);
   const bumpAtlas = React73.useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = React73.useMemo(() => {
     if (!showMinimap) return [];
@@ -16250,6 +16263,9 @@ function Canvas2D({
   React73.useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  React73.useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   React73.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;

package/dist/components/index.js

@@ -15258,6 +15258,13 @@ function bindCanvasCapture(captureFn) {
     window.__orbitalVerification.captureFrame = captureFn;
   }
 }
+function bindLastDrawables(getDrawables) {
+  if (typeof window === "undefined") return;
+  exposeOnWindow();
+  if (window.__orbitalVerification) {
+    window.__orbitalVerification.getLastDrawables = getDrawables;
+  }
+}
 function updateAssetStatus(url, status) {
   if (typeof window === "undefined") return;
   exposeOnWindow();
@@ -15820,8 +15827,9 @@ var init_DrawSprite = __esm({
         if (!r) return;
         src = { x: r.sx, y: r.sy, w: r.sw, h: r.sh };
       }
-      const w = node.width ?? (src ? src.w : tex.width);
-      const h = node.height ?? (src ? src.h : tex.height);
+      const tw = dctx.projector.tileWidth;
+      const w = node.width !== void 0 ? node.width * tw : src ? src.w : tex.width;
+      const h = node.height !== void 0 ? node.height * tw : src ? src.h : tex.height;
       const anchor = node.anchor ?? "top-left";
       const p = dctx.projector.anchorPoint(node.position, anchor);
       const dx = anchor === "top-left" ? p.x : p.x - w / 2;
@@ -15868,27 +15876,30 @@ var init_DrawShape = __esm({
         }
         case "rect": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "top-left");
-          const x = p.x + (node.offsetX ?? 0);
-          const y = p.y + (node.offsetY ?? 0);
-          const w = node.width ?? 0;
-          const h = node.height ?? 0;
+          const tw = dctx.projector.tileWidth;
+          const x = p.x + (node.offsetX ?? 0) * tw;
+          const y = p.y + (node.offsetY ?? 0) * tw;
+          const w = (node.width ?? 0) * tw;
+          const h = (node.height ?? 0) * tw;
           if (node.fill) painter.fillRect(x, y, w, h, node.fill);
           if (node.stroke) painter.strokeRect(x, y, w, h, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "ellipse": {
           const p = dctx.projector.anchorPoint(node.position, node.anchor ?? "ground");
-          const cx = p.x + (node.offsetX ?? 0);
-          const cy = p.y + (node.offsetY ?? 0);
-          const rx = node.radiusX ?? 0;
-          const ry = node.radiusY ?? rx;
+          const tw = dctx.projector.tileWidth;
+          const cx = p.x + (node.offsetX ?? 0) * tw;
+          const cy = p.y + (node.offsetY ?? 0) * tw;
+          const rx = (node.radiusX ?? 0) * tw;
+          const ry = (node.radiusY ?? rx) * tw;
           if (node.fill) painter.fillEllipse(cx, cy, rx, ry, node.fill);
           if (node.stroke) painter.strokeEllipse(cx, cy, rx, ry, node.stroke, node.strokeWidth ?? 1);
           break;
         }
         case "poly": {
           const base = dctx.projector.project(node.position);
-          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x, y: base.y + pt.y }));
+          const tw = dctx.projector.tileWidth;
+          const pts = (node.points ?? []).map((pt) => ({ x: base.x + pt.x * tw, y: base.y + pt.y * tw }));
           if (node.fill) painter.fillPoly(pts, node.fill);
           if (node.stroke) painter.strokePoly(pts, node.stroke, node.strokeWidth ?? 1, true);
           break;
@@ -16119,10 +16130,12 @@ function Canvas2D({
     const canvas = canvasRef.current;
     if (!canvas) return;
     bindCanvasCapture(() => canvas.toDataURL("image/png"));
+    bindLastDrawables(() => drawables ?? null);
     return () => {
       bindCanvasCapture(() => null);
+      bindLastDrawables(() => null);
     };
-  }, []);
+  }, [drawables]);
   const enableCamera = camera === "pan-zoom";
   const {
     cameraRef,
@@ -16137,7 +16150,7 @@ function Canvas2D({
     screenToWorld,
     lerpToTarget
   } = useCamera();
-  const [, setAtlasVersion] = useState(0);
+  const [atlasVersion, setAtlasVersion] = useState(0);
   const bumpAtlas = useCallback(() => setAtlasVersion((v) => v + 1), []);
   const miniMapTiles = useMemo(() => {
     if (!showMinimap) return [];
@@ -16205,6 +16218,9 @@ function Canvas2D({
   useEffect(() => {
     draw();
   }, [_imagePendingCount, draw]);
+  useEffect(() => {
+    draw();
+  }, [atlasVersion, draw]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     let running = true;