@pictor-sdk/ui 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pictor-sdk/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Default slot-based editor UI for Pictor, built entirely on the public headless API.",
   "license": "MIT",
   "sideEffects": false,
@@ -33,8 +33,8 @@
     "react-native-gesture-handler": ">=2.20.0",
     "react-native-reanimated": ">=3.16.0",
     "react-native-worklets": ">=0.5.1",
-    "@pictor-sdk/core": "^0.1.0",
-    "@pictor-sdk/skia": "^0.1.0"
+    "@pictor-sdk/core": "^0.2.0",
+    "@pictor-sdk/skia": "^0.2.0"
   },
   "devDependencies": {
     "@shopify/react-native-skia": "^2.0.0",
@@ -44,8 +44,8 @@
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "^4.1.0",
     "react-native-worklets": "0.5.1",
-    "@pictor-sdk/core": "0.1.0",
-    "@pictor-sdk/skia": "0.1.0"
+    "@pictor-sdk/core": "0.2.0",
+    "@pictor-sdk/skia": "0.2.0"
   },
   "publishConfig": {
     "access": "public",

package/src/index.ts

@@ -67,6 +67,7 @@ export { StickerPanel, type StickerAsset } from './panels/StickerPanel'
 export { LayersPanel } from './panels/LayersPanel'
 export { LayoutPanel } from './panels/LayoutPanel'
 export { layoutCells, cellToTransformPatch, type LayoutCell, type LayoutPreset } from './panels/layoutMath'
+export { layoutCellBounds, fitImageToLayoutCell, type LayoutCropOptions, type LayoutImageFit } from './panels/layoutMath'
 export { DrawingSurface, DEFAULT_BRUSH } from './gestures/DrawingSurface'
 export { createDrawController, type BrushConfig, type DrawController } from './gestures/drawController'
 export { UiStateProvider, useUiState, createUiStateStore, type UiStateStore } from './uiState'

package/src/panels/LayoutPanel.tsx

@@ -1,8 +1,8 @@
-import { useEditor } from '@pictor-sdk/core'
+import { useEditor, type ImageLayerData } from '@pictor-sdk/core'
 import React from 'react'
 import { Pressable, ScrollView, Text } from 'react-native'
 import { useTheme } from '../theme'
-import { cellToTransformPatch, layoutCells, type LayoutPreset } from './layoutMath'
+import { fitImageToLayoutCell, layoutCellBounds, type LayoutPreset } from './layoutMath'
 
 const PRESETS: Array<{ id: LayoutPreset; label: string }> = [
   { id: '1', label: 'Single' },
@@ -10,6 +10,7 @@ const PRESETS: Array<{ id: LayoutPreset; label: string }> = [
   { id: '2h', label: '2 cols' },
   { id: '3v', label: '3 rows' },
   { id: '4grid', label: 'Grid' },
+  { id: '6grid', label: '6 grid' },
 ]
 
 /** Layout grids: snap the image layers into the chosen arrangement. */
@@ -18,11 +19,16 @@ export function LayoutPanel() {
   const theme = useTheme()
 
   const apply = (preset: LayoutPreset) => {
-    const cells = layoutCells(preset, document.size)
+    const cells = layoutCellBounds(preset)
     const images = document.layers.filter((l) => l.type === 'image')
+    // Calculate before opening history: invalid intrinsic data cannot leave a batch open.
+    const fits = images.slice(0, cells.length).map((layer, i) => ({
+      layer, fit: fitImageToLayoutCell(cells[i]!, document.size, (layer.data as ImageLayerData).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' })
   }

package/src/panels/layoutMath.ts

@@ -1,7 +1,8 @@
-import { type Size, type Transform } from '@pictor-sdk/core'
+import { type Rect, type Size, type Transform } from '@pictor-sdk/core'
+import { centeredCropForAspect } from './cropMath'
 
 /** The bundled multi-photo arrangements, by cell count and split direction. */
-export type LayoutPreset = '1' | '2v' | '2h' | '3v' | '4grid'
+export type LayoutPreset = '1' | '2v' | '2h' | '3v' | '4grid' | '6grid'
 
 /** One slot in a layout: where its photo sits, in normalized document units. */
 export interface LayoutCell {
@@ -18,38 +19,91 @@ export interface LayoutCell {
  * canvas size works.
  */
 export function layoutCells(preset: LayoutPreset, _doc: Size): LayoutCell[] {
-  switch (preset) {
-    case '1':
-      return [{ x: 0.5, y: 0.5, scale: 1 }]
-    case '2v': // two rows
-      return [
-        { x: 0.5, y: 0.25, scale: 1 },
-        { x: 0.5, y: 0.75, scale: 1 },
-      ]
-    case '2h': // two columns
-      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: never = 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,
+  }))
+}
+
+/**
+ * Axis-aligned cell rectangles, row-major, normalized to document width/height.
+ * x/y are TOP-LEFT coordinates, unlike the centres in legacy LayoutCell.
+ * Returns fresh rectangles; no document aspect ratio is assumed.
+ */
+export function layoutCellBounds(preset: LayoutPreset): Rect[] {
+  const dimensions: Record<LayoutPreset, readonly [number, number]> = {
+    '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,
+  }))
+}
+
+/** Source-window controls; pan is a source-space crop centre, not a layer translation. */
+export interface LayoutCropOptions {
+  /** Magnification relative to crop-to-fill. Clamped to [1, 32]; default 1. */
+  zoom?: number
+  /** Desired source-normalized crop centre; clamped so the crop stays in the source. */
+  center?: { x: number; y: number }
+}
+
+/** Crop and complete transform to apply together in one history batch. */
+export interface LayoutImageFit {
+  crop: Rect
+  transform: Transform
+  /** Apply to ImageLayerData together with crop for seam-free cell edges. */
+  pixelSnap: true
+}
+
+/**
+ * Fill a fixed cell without bleed. Zoom/pan alter only the source crop, never
+ * the cell bounds. intrinsic must describe the decoded, orientation-corrected
+ * source. Recompute after source replacement or document resize.
+ * Throws RangeError for non-finite controls, invalid sizes or out-of-document cells.
+ * Apply transform with layer/transform and crop + pixelSnap with layer/patchData in one batch.
+ * General layer gestures must not subsequently move/rotate/scale a fixed cell.
+ */
+export function fitImageToLayoutCell(
+  cell: Rect, documentSize: Size, intrinsic: Size, options: LayoutCropOptions = {},
+): LayoutImageFit {
+  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,
+    },
+  }
 }
 
 /** The transform patch that moves a layer into a cell, leaving its other fields alone. */