@pictor-sdk/ui 0.1.0 → 0.2.1

package/dist/index.mjs

@@ -745,10 +745,12 @@ function LayerGestureSurface({ onSnap }) {
   );
   const aspect = document.size.height / document.size.width;
   const [measureVersion, setMeasureVersion] = useState2(0);
-  useEffect2(
-    () => renderer.textMeasures.subscribe(() => setMeasureVersion((v) => v + 1)),
-    [renderer]
-  );
+  useEffect2(() => {
+    const refresh = () => setMeasureVersion((v) => v + 1);
+    const unsubscribe = renderer.textMeasures.subscribe(refresh);
+    refresh();
+    return unsubscribe;
+  }, [renderer]);
   const hitCandidates = useMemo5(
     () => document.layers.map((layer, index) => ({ layer, index })).filter(
       ({ layer, index }) => !layer.hidden && !layer.locked && isDirectManipulationLayer(layer, index, profile.interaction?.layers)
@@ -2795,38 +2797,70 @@ import { Pressable as Pressable7, ScrollView as ScrollView6, Text as Text10 } fr
 
 // src/panels/layoutMath.ts
 function layoutCells(preset, _doc) {
-  switch (preset) {
-    case "1":
-      return [{ x: 0.5, y: 0.5, scale: 1 }];
-    case "2v":
-      return [
-        { x: 0.5, y: 0.25, scale: 1 },
-        { x: 0.5, y: 0.75, scale: 1 }
-      ];
-    case "2h":
-      return [
-        { x: 0.25, y: 0.5, scale: 0.5 },
-        { x: 0.75, y: 0.5, scale: 0.5 }
-      ];
-    case "3v":
-      return [
-        { x: 0.5, y: 1 / 6, scale: 1 },
-        { x: 0.5, y: 0.5, scale: 1 },
-        { x: 0.5, y: 5 / 6, scale: 1 }
-      ];
-    case "4grid":
-      return [
-        { x: 0.25, y: 0.25, scale: 0.5 },
-        { x: 0.75, y: 0.25, scale: 0.5 },
-        { x: 0.25, y: 0.75, scale: 0.5 },
-        { x: 0.75, y: 0.75, scale: 0.5 }
-      ];
-    default: {
-      const _exhaustive = preset;
-      void _exhaustive;
-      return [{ x: 0.5, y: 0.5, scale: 1 }];
+  return layoutCellBounds(preset).map((cell) => ({
+    x: (cell.x / cell.width + 0.5) * cell.width,
+    y: (cell.y / cell.height + 0.5) * cell.height,
+    scale: cell.width
+  }));
+}
+function layoutCellBounds(preset) {
+  const dimensions = {
+    "1": [1, 1],
+    "2v": [1, 2],
+    "2h": [2, 1],
+    "3v": [1, 3],
+    "4grid": [2, 2],
+    "6grid": [2, 3]
+  };
+  const grid = dimensions[preset];
+  if (!grid) throw new RangeError("Unknown layout preset");
+  const [columns, rows] = grid;
+  return Array.from({ length: columns * rows }, (_, index) => ({
+    x: index % columns / columns,
+    y: Math.floor(index / columns) / rows,
+    width: 1 / columns,
+    height: 1 / rows
+  }));
+}
+function fitImageToLayoutCell(cell, documentSize, intrinsic, options = {}) {
+  for (const size of [documentSize, intrinsic]) {
+    if (![size.width, size.height].every((v) => Number.isFinite(v) && v > 0)) {
+      throw new RangeError("Layout sizes must be finite and positive");
     }
   }
+  if (![cell.x, cell.y, cell.width, cell.height].every(Number.isFinite) || cell.x < 0 || cell.y < 0 || cell.width <= 0 || cell.height <= 0 || cell.x + cell.width > 1 + 1e-12 || cell.y + cell.height > 1 + 1e-12) {
+    throw new RangeError("Layout cell must lie inside the document");
+  }
+  const zoom = options.zoom ?? 1;
+  const center = options.center ?? { x: 0.5, y: 0.5 };
+  if (![zoom, center.x, center.y].every(Number.isFinite)) {
+    throw new RangeError("Layout controls must be finite");
+  }
+  const base = centeredCropForAspect(
+    intrinsic,
+    cell.width * documentSize.width / (cell.height * documentSize.height)
+  );
+  const factor = Math.max(1, Math.min(32, zoom));
+  const width = base.width / factor;
+  const height = base.height / factor;
+  return {
+    pixelSnap: true,
+    crop: {
+      x: Math.max(0, Math.min(1 - width, center.x - width / 2)),
+      y: Math.max(0, Math.min(1 - height, center.y - height / 2)),
+      width,
+      height
+    },
+    transform: {
+      x: cell.x + cell.width / 2,
+      y: cell.y + cell.height / 2,
+      scale: cell.width,
+      rotation: 0,
+      anchor: { x: 0.5, y: 0.5 },
+      flipX: false,
+      flipY: false
+    }
+  };
 }
 function cellToTransformPatch(cell) {
   return { x: cell.x, y: cell.y, scale: cell.scale, rotation: 0 };
@@ -2839,17 +2873,23 @@ var PRESETS = [
   { id: "2v", label: "2 rows" },
   { id: "2h", label: "2 cols" },
   { id: "3v", label: "3 rows" },
-  { id: "4grid", label: "Grid" }
+  { id: "4grid", label: "Grid" },
+  { id: "6grid", label: "6 grid" }
 ];
 function LayoutPanel() {
   const { document, dispatch } = useEditor13();
   const theme = useTheme();
   const apply = (preset) => {
-    const cells = layoutCells(preset, document.size);
+    const cells = layoutCellBounds(preset);
     const images = document.layers.filter((l) => l.type === "image");
+    const fits = images.slice(0, cells.length).map((layer, i) => ({
+      layer,
+      fit: fitImageToLayoutCell(cells[i], document.size, layer.data.intrinsic)
+    }));
     dispatch({ type: "history/beginBatch", label: "layout" });
-    images.slice(0, cells.length).forEach((layer, i) => {
-      dispatch({ type: "layer/transform", id: layer.id, patch: cellToTransformPatch(cells[i]) });
+    fits.forEach(({ layer, fit }) => {
+      dispatch({ type: "layer/transform", id: layer.id, patch: fit.transform });
+      dispatch({ type: "layer/patchData", id: layer.id, patch: { crop: fit.crop, pixelSnap: fit.pixelSnap } });
     });
     dispatch({ type: "history/endBatch" });
   };
@@ -4624,6 +4664,8 @@ export {
   createGestureController,
   createUiStateStore,
   defaultTheme,
+  fitImageToLayoutCell,
+  layoutCellBounds,
   layoutCells,
   mergeSlots,
   mergeTheme,