@almadar/ui 5.136.0 → 5.137.0

package/dist/avl/index.cjs

@@ -13207,6 +13207,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React92.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React92.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -13311,10 +13316,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -13327,7 +13335,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React92.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/avl/index.js

@@ -13131,6 +13131,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -13235,10 +13240,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -13251,7 +13259,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/components/index.cjs

@@ -16337,6 +16337,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React75.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React75.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -16441,10 +16446,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -16457,7 +16465,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React75.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/components/index.js

@@ -16262,6 +16262,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -16366,10 +16371,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -16382,7 +16390,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/providers/index.cjs

@@ -9465,6 +9465,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React85.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React85.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9569,10 +9574,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9585,7 +9593,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React85.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/providers/index.js

@@ -9391,6 +9391,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9495,10 +9500,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9511,7 +9519,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/runtime/index.cjs

@@ -9819,6 +9819,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = React83.useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = React83.useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9923,10 +9928,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9939,7 +9947,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   React83.useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/dist/runtime/index.js

@@ -9745,6 +9745,11 @@ function Canvas2D({
     }
     return { width: maxX + 1, height: maxY + 1 };
   }, [scenePositions]);
+  const defaultGridFocus = useMemo(() => {
+    if (isFree || projection === "side") return void 0;
+    if (gridExtent.width < 2 || gridExtent.height < 2) return void 0;
+    return { x: (gridExtent.width - 1) / 2, y: (gridExtent.height - 1) / 2 };
+  }, [isFree, projection, gridExtent]);
   const baseOffsetX = useMemo(() => {
     if (isFree || projection === "flat" || projection === "side") return 0;
     return (gridExtent.height - 1) * (scaledTileWidth / 2);
@@ -9849,10 +9854,13 @@ function Canvas2D({
     }
     if (!drawables || drawables.length === 0) return;
     const cam = cameraRef.current;
-    if (cameraPos && dragDistance() === 0) {
-      const p = projector.anchorPoint(cameraPos, "center");
-      cam.x = p.x - viewportSize.width / 2;
-      cam.y = p.y - viewportSize.height / 2;
+    if (camera !== "follow" && dragDistance() === 0) {
+      const focus = cameraPos ?? defaultGridFocus;
+      if (focus) {
+        const p = projector.anchorPoint(focus, "center");
+        cam.x = p.x - viewportSize.width / 2;
+        cam.y = p.y - viewportSize.height / 2;
+      }
     }
     const containerRect = containerRef.current?.getBoundingClientRect();
     const canvasRect = canvas.getBoundingClientRect();
@@ -9865,7 +9873,7 @@ function Canvas2D({
     const dctx = { projector, time: 0, invalidate: bumpAtlas };
     for (const node of drawables) paintDrawable(painter, node, dctx);
     painter.restore();
-  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage]);
+  }, [viewportSize, backgroundImage, bgColor, drawables, projector, cameraRef, bumpAtlas, getImage, cameraPos, defaultGridFocus, camera, dragDistance]);
   useEffect(() => {
     if (camera !== "follow" || !followTarget) return;
     const p = projector.anchorPoint(followTarget, "center");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.136.0",
+  "version": "5.137.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [