@toneflix/flipbook-native 0.2.3 → 0.3.4

package/lib/Cover.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useId } from 'react';
+import { useId, useState } from 'react';
 import { Image, StyleSheet, Text, View } from 'react-native';
 import Svg, { ClipPath, Defs, Ellipse, Image as SvgImage, Path, RadialGradient, Rect, Stop } from 'react-native-svg';
-import { COVER_THEMES, DECO, FLEURON, coverHasText } from '@toneflix/flipbook-core';
+import { COVER_THEMES, DECO, FLEURON, PhotoCrop, coverHasText, } from '@toneflix/flipbook-core';
 import { Gradient } from './Gradient';
 import { PAPERS, useSerif } from './look';
 import { Ornament, PAGE_RATIO } from './pages';
+import { CroppedImage, useNaturalSize } from './position';
 const CORNERS = ['tl', 'tr', 'bl', 'br'];
 const MIRROR = {
     tl: undefined,
@@ -31,12 +32,21 @@ function GiltFrame({ unit, color }) {
 /** A photo clipped to an oval or an arch, ruled in the ink. */
 function ShapedPhoto({ photo, shape, width, height, unit, color, show, }) {
     const id = `c${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
+    const natural = useNaturalSize(show ? photo : null);
+    const drawn = PhotoCrop.of(photo.position).rect({ width, height }, natural);
     const r = width / 2;
     const arch = `M0 ${height}V${r}A${r} ${r} 0 0 1 ${width} ${r}V${height}Z`;
     const outline = shape === 'oval' ? _jsx(Ellipse, { cx: r, cy: height / 2, rx: r - 0.3 * unit, ry: height / 2 - 0.3 * unit }) : _jsx(Path, { d: arch });
-    return (_jsxs(Svg, { width: width, height: height, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: id, children: outline }) }), show ? (_jsx(SvgImage, { href: { uri: photo.src }, width: width, height: height, preserveAspectRatio: "xMidYMid slice", clipPath: `url(#${id})` })) : (_jsx(Rect, { width: width, height: height, fill: color, fillOpacity: 0.15, clipPath: `url(#${id})` })), shape === 'oval' ? (_jsx(Ellipse, { cx: r, cy: height / 2, rx: r - 0.3 * unit, ry: height / 2 - 0.3 * unit, fill: "none", stroke: color, strokeWidth: 0.6 * unit })) : (_jsx(Path, { d: arch, fill: "none", stroke: color, strokeWidth: 1 * unit }))] }));
+    return (_jsxs(Svg, { width: width, height: height, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: id, children: outline }) }), show ? (_jsx(SvgImage, { href: { uri: photo.src }, x: drawn.left, y: drawn.top, width: drawn.width, height: drawn.height, preserveAspectRatio: "xMidYMid slice", clipPath: `url(#${id})` })) : (_jsx(Rect, { width: width, height: height, fill: color, fillOpacity: 0.15, clipPath: `url(#${id})` })), shape === 'oval' ? (_jsx(Ellipse, { cx: r, cy: height / 2, rx: r - 0.3 * unit, ry: height / 2 - 0.3 * unit, fill: "none", stroke: color, strokeWidth: 0.6 * unit })) : (_jsx(Path, { d: arch, fill: "none", stroke: color, strokeWidth: 1 * unit }))] }));
+}
+/** A photo covering its parent, cropped by its position. */
+function Photo({ photo, show }) {
+    const [box, setBox] = useState(null);
+    const natural = useNaturalSize(show ? photo : null);
+    if (!show)
+        return null;
+    return (_jsx(View, { style: StyleSheet.absoluteFill, onLayout: (e) => setBox(e.nativeEvent.layout), children: box && _jsx(CroppedImage, { photo: photo, crop: PhotoCrop.of(photo.position), box: box, image: natural }) }));
 }
-const Photo = ({ photo, show }) => show ? _jsx(Image, { source: { uri: photo.src }, style: StyleSheet.absoluteFill, resizeMode: "cover", "aria-label": photo.alt ?? undefined }) : null;
 /** Cover board: cloth, light, the hinge shadow along the spine and a grain finish. */
 function Board({ book, width, hinge, children }) {
     const theme = COVER_THEMES[book.theme ?? 'classic'];

package/lib/PrintedPhoto.d.ts

@@ -1,4 +1,4 @@
-import { type FlipbookPhoto, type FrameStyle } from '@toneflix/flipbook-core';
+import { type FlipbookPhoto, type FrameStyle, type PhotoPosition } from '@toneflix/flipbook-core';
 /**
  * A photo printed on a page inside its frame. It fills its parent, or with `fit="contain"` keeps the
  * photo's shape and centres it. `unit` is 1% of the page's width, so frames look the same at any size.
@@ -11,5 +11,9 @@ export interface PrintedPhotoProps {
     fit?: 'cover' | 'contain';
     /** False draws a placeholder instead of loading the image. */
     show?: boolean;
+    /** Editor: lets people drag and pinch to choose which part of the photo shows. */
+    onPosition?: (position: PhotoPosition) => void;
+    /** Editor: called with true when a positioning gesture starts and false when it ends. */
+    onPositionGesture?: (active: boolean) => void;
 }
-export declare function PrintedPhoto({ photo, frame, unit, fit, show }: PrintedPhotoProps): import("react").JSX.Element;
+export declare function PrintedPhoto({ photo, frame, unit, fit, show, onPosition, onPositionGesture }: PrintedPhotoProps): import("react").JSX.Element;

package/lib/PrintedPhoto.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useId, useState } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import Svg, { ClipPath, Defs, Ellipse, G, Image as SvgImage, LinearGradient as SvgGradient, Path, Pattern, Polygon, Rect, Circle, Stop, } from 'react-native-svg';
 import { BANDED_FRAMES } from '@toneflix/flipbook-core';
 import { Gradient } from './Gradient';
 import { ink, usePaper } from './look';
+import { CroppedImage, useNaturalSize, usePhotoGestures } from './position';
 const BANDS = BANDED_FRAMES;
 /** The space inside the frame line (pad) and the frame line itself, in page units. Mirrors the web's .frame-* styles. */
 function measure(frame, unit) {
@@ -32,7 +33,7 @@ function measure(frame, unit) {
             return { pad: 0, line: 0 };
     }
 }
-export function PrintedPhoto({ photo, frame, unit, fit = 'cover', show = true }) {
+export function PrintedPhoto({ photo, frame, unit, fit = 'cover', show = true, onPosition, onPositionGesture }) {
     const look = usePaper();
     const [box, setBox] = useState(null);
     const { pad, line } = measure(frame, unit);
@@ -45,7 +46,9 @@ export function PrintedPhoto({ photo, frame, unit, fit = 'cover', show = true })
         height = (width - 2 * edge) / ratio + 2 * edge;
     }
     const inner = { left: edge, top: edge, width: Math.max(0, width - 2 * edge), height: Math.max(0, height - 2 * edge) };
-    return (_jsx(View, { style: styles.box, onLayout: (event) => setBox(event.nativeEvent.layout), children: box && (_jsxs(View, { style: { width, height }, children: [_jsx(Backing, { frame: frame, look: look, unit: unit, width: width, height: height, line: line }), frame === 'oval' ? (_jsx(OvalPhoto, { photo: show ? photo : null, look: look, rect: inner, width: width, height: height, line: line })) : (_jsxs(View, { style: [styles.abs, inner], children: [photo && show ? (_jsx(Image, { source: { uri: photo.src }, style: StyleSheet.absoluteFill, resizeMode: "cover", "aria-label": photo.alt ?? undefined })) : (_jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: ink(look, 0.15) }] })), frame === 'feather' && _jsx(Feather, { look: look })] })), _jsx(Trim, { frame: frame, look: look, unit: unit, width: width, height: height, rect: inner })] })) }));
+    const natural = useNaturalSize(show ? photo : null);
+    const { crop, handlers } = usePhotoGestures(photo?.position, inner, natural, photo && show ? onPosition : undefined, onPositionGesture);
+    return (_jsx(View, { style: styles.box, onLayout: (event) => setBox(event.nativeEvent.layout), children: box && (_jsxs(View, { style: { width, height }, ...handlers, children: [_jsx(Backing, { frame: frame, look: look, unit: unit, width: width, height: height, line: line }), frame === 'oval' ? (_jsx(OvalPhoto, { photo: show ? photo : null, crop: crop, natural: natural, look: look, rect: inner, width: width, height: height })) : (_jsxs(View, { style: [styles.abs, inner], children: [photo && show ? (_jsx(CroppedImage, { photo: photo, crop: crop, box: inner, image: natural })) : (_jsx(View, { style: [StyleSheet.absoluteFill, { backgroundColor: ink(look, 0.15) }] })), frame === 'feather' && _jsx(Feather, { look: look })] })), _jsx(Trim, { frame: frame, look: look, unit: unit, width: width, height: height, rect: inner })] })) }));
 }
 /** What is printed under the photo: rules, mats, tints and bands. */
 function Backing({ frame, look, unit, width, height, line, }) {
@@ -142,9 +145,10 @@ function Band({ frame, look, unit, band, width, height, }) {
                                 ].map(([radius, color]) => (_jsx(Circle, { cx: 1.2 * unit, cy: 1.3 * unit, r: radius * unit, fill: color }, color))) }), [45, -45].map((angle) => (_jsx(Pattern, { id: `hatch${angle}${id}`, patternUnits: "userSpaceOnUse", width: 0.8 * unit, height: 0.8 * unit, patternTransform: `rotate(${angle})`, children: _jsx(Rect, { width: 0.22 * unit, height: 0.8 * unit, fill: "rgba(180,138,50,0.75)" }) }, angle))), _jsxs(Pattern, { id: `grain${id}`, patternUnits: "userSpaceOnUse", width: 1.5 * unit, height: 4 * unit, patternTransform: "rotate(8)", children: [_jsx(Rect, { width: 0.12 * unit, height: 4 * unit, fill: "rgba(110,70,30,0.4)" }), _jsx(Rect, { x: 0.55 * unit, width: 0.25 * unit, height: 4 * unit, fill: "rgba(110,70,30,0.22)" })] })] }), frame === 'watercolor' && _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#wash${id})`, opacity: 0.7 }), frame === 'arcs' && _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#arcs${id})`, opacity: 0.8 }), frame === 'gilt' && (_jsxs(_Fragment, { children: [_jsx(Path, { d: ring, fillRule: "evenodd", fill: "rgba(214,178,92,0.45)" }), _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#hatch45${id})` }), _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#hatch-45${id})` }), _jsx(Rect, { x: gilt / 2, y: gilt / 2, width: width - gilt, height: height - gilt, stroke: "#b48a32", strokeWidth: gilt, fill: "none" })] })), frame === 'woodgrain' && (_jsxs(G, { opacity: 0.85, children: [_jsx(Path, { d: ring, fillRule: "evenodd", fill: "#cfa874" }), _jsx(Path, { d: ring, fillRule: "evenodd", fill: `url(#grain${id})` })] }))] })] }));
 }
 /** The photo cut to an oval. */
-function OvalPhoto({ photo, look, rect, width, height, }) {
+function OvalPhoto({ photo, crop, natural, look, rect, width, height, }) {
     const id = `oval${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
-    return (_jsxs(Svg, { width: width, height: height, style: styles.abs, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: id, children: _jsx(Ellipse, { cx: width / 2, cy: height / 2, rx: rect.width / 2, ry: rect.height / 2 }) }) }), photo ? (_jsx(SvgImage, { href: { uri: photo.src }, x: rect.left, y: rect.top, width: rect.width, height: rect.height, preserveAspectRatio: "xMidYMid slice", clipPath: `url(#${id})` })) : (_jsx(Ellipse, { cx: width / 2, cy: height / 2, rx: rect.width / 2, ry: rect.height / 2, fill: ink(look, 0.15) }))] }));
+    const drawn = crop.rect(rect, natural);
+    return (_jsxs(Svg, { width: width, height: height, style: styles.abs, children: [_jsx(Defs, { children: _jsx(ClipPath, { id: id, children: _jsx(Ellipse, { cx: width / 2, cy: height / 2, rx: rect.width / 2, ry: rect.height / 2 }) }) }), photo ? (_jsx(SvgImage, { href: { uri: photo.src }, x: rect.left + drawn.left, y: rect.top + drawn.top, width: drawn.width, height: drawn.height, preserveAspectRatio: "xMidYMid slice", clipPath: `url(#${id})` })) : (_jsx(Ellipse, { cx: width / 2, cy: height / 2, rx: rect.width / 2, ry: rect.height / 2, fill: ink(look, 0.15) }))] }));
 }
 /** Fades the photo's edges into the paper. */
 function Feather({ look }) {

package/lib/index.d.ts

@@ -7,3 +7,4 @@ export { BookLookProvider, useBookLook, usePaper, useSerif, ink, PAPERS, type Bo
 export { Gradient, type GradientStop } from './Gradient';
 export { FoldLayout } from './geometry';
 export { lockLandscape } from './orientation';
+export { CroppedImage, useNaturalSize, usePhotoGestures, type CroppedImageProps } from './position';

package/lib/index.js

@@ -7,3 +7,4 @@ export { BookLookProvider, useBookLook, usePaper, useSerif, ink, PAPERS } from '
 export { Gradient } from './Gradient';
 export { FoldLayout } from './geometry';
 export { lockLandscape } from './orientation';
+export { CroppedImage, useNaturalSize, usePhotoGestures } from './position';

package/lib/pages.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ViewStyle } from 'react-native';
-import { type FlipbookBook, type FlipbookPage } from '@toneflix/flipbook-core';
+import { type FlipbookBook, type FlipbookPage, type PhotoPosition } from '@toneflix/flipbook-core';
 /** Pages are 3:4, like the web's. */
 export declare const PAGE_RATIO: number;
 type Side = 'left' | 'right';
@@ -14,6 +14,10 @@ export interface PageViewProps {
     /** Editor: makes each photo slot pressable. */
     onSlotPress?: (slot: number) => void;
     activeSlot?: number | null;
+    /** Editor: lets people drag and pinch the photo in the active slot to choose which part shows. */
+    onPhotoPosition?: (slot: number, position: PhotoPosition) => void;
+    /** Editor: true while a finger is moving a photo, e.g. to pause the scroll view the page sits in. */
+    onPositionGesture?: (active: boolean) => void;
     /** Editor: colour of the highlighted slot. */
     accent?: string;
 }
@@ -21,7 +25,7 @@ export interface PageViewProps {
  * The inside of one book page, `width` wide. Sizes are in units of 1% of the width, so the same
  * page looks right as a thumbnail and full screen.
  */
-export declare function PageView({ page, width, number, side, showImages, onSlotPress, activeSlot, accent }: PageViewProps): import("react").JSX.Element;
+export declare function PageView({ page, width, number, side, showImages, onSlotPress, activeSlot, onPhotoPosition, onPositionGesture, accent, }: PageViewProps): import("react").JSX.Element;
 /** A sheet of the book's paper: texture under the content, grain and page light over it. */
 export declare function Paper({ width, side, children, style }: {
     width: number;

package/lib/pages.js

@@ -12,7 +12,7 @@ export const PAGE_RATIO = 3 / 4;
  * The inside of one book page, `width` wide. Sizes are in units of 1% of the width, so the same
  * page looks right as a thumbnail and full screen.
  */
-export function PageView({ page, width, number, side, showImages = true, onSlotPress, activeSlot, accent = '#00afff' }) {
+export function PageView({ page, width, number, side, showImages = true, onSlotPress, activeSlot, onPhotoPosition, onPositionGesture, accent = '#00afff', }) {
     const look = usePaper();
     const serif = useSerif();
     const unit = width / 100;
@@ -23,7 +23,7 @@ export function PageView({ page, width, number, side, showImages = true, onSlotP
     const slot = (index, style, fit = 'cover') => {
         const photo = photos[index] ?? null;
         const frame = photoFrame(page, photo, bookFrame);
-        return (_jsxs(Pressable, { disabled: !onSlotPress, onPress: () => onSlotPress?.(index), role: onSlotPress ? 'button' : undefined, "aria-label": onSlotPress ? `Photo slot ${index + 1}` : undefined, style: [style, fit === 'cover' && styles.clip], children: [photo ? (_jsx(PrintedPhoto, { photo: photo, frame: frame, unit: unit, fit: fit, show: showImages })) : (_jsx(View, { style: [
+        return (_jsxs(Pressable, { disabled: !onSlotPress, onPress: () => onSlotPress?.(index), role: onSlotPress ? 'button' : undefined, "aria-label": onSlotPress ? `Photo slot ${index + 1}` : undefined, style: [style, fit === 'cover' && styles.clip], children: [photo ? (_jsx(PrintedPhoto, { photo: photo, frame: frame, unit: unit, fit: fit, show: showImages, onPosition: onPhotoPosition && activeSlot === index ? (position) => onPhotoPosition(index, position) : undefined, onPositionGesture: onPositionGesture })) : (_jsx(View, { style: [
                         StyleSheet.absoluteFill,
                         styles.empty,
                         { backgroundColor: ink(look, 0.1) },

package/lib/position.d.ts

@@ -0,0 +1,21 @@
+import { PhotoCrop, type FlipbookPhoto, type PhotoPosition, type Size } from '@toneflix/flipbook-core';
+/** The photo's own size: from the photo data, else read from the image once. */
+export declare function useNaturalSize(photo: Pick<FlipbookPhoto, 'src' | 'width' | 'height'> | null): Size | null;
+/**
+ * Drag to move a photo in its box and pinch to zoom it. Returns the position to draw, which follows the
+ * fingers, and the handlers for the box. `onChange` gets the new position when the fingers lift; without it
+ * the photo stays put. `onGesture` hears when fingers go down and lift, e.g. to pause a scroll view.
+ */
+export declare function usePhotoGestures(position: Partial<PhotoPosition> | null | undefined, box: Size, image: Size | null, onChange?: (position: PhotoPosition) => void, onGesture?: (active: boolean) => void): {
+    crop: PhotoCrop;
+    handlers: {};
+};
+export interface CroppedImageProps {
+    photo: FlipbookPhoto;
+    crop: PhotoCrop;
+    /** The box the photo covers, which this fills. */
+    box: Size;
+    image: Size | null;
+}
+/** A photo covering its box, moved and zoomed by `crop`. */
+export declare function CroppedImage({ photo, crop, box, image }: CroppedImageProps): import("react").JSX.Element;

package/lib/position.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Image, PanResponder, StyleSheet, View } from 'react-native';
+import { PhotoCrop } from '@toneflix/flipbook-core';
+/** The photo's own size: from the photo data, else read from the image once. */
+export function useNaturalSize(photo) {
+    const known = photo?.width && photo.height ? { width: photo.width, height: photo.height } : null;
+    const [read, setRead] = useState(null);
+    useEffect(() => {
+        if (known || !photo)
+            return;
+        let live = true;
+        Image.getSize(photo.src, (width, height) => live && setRead({ src: photo.src, size: { width, height } }), () => undefined);
+        return () => {
+            live = false;
+        };
+    }, [photo?.src, !!known]);
+    return known ?? (read && read.src === photo?.src ? read.size : null);
+}
+const spread = (e) => {
+    const [a, b] = e.nativeEvent.touches;
+    return a && b ? Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY) : 0;
+};
+/**
+ * Drag to move a photo in its box and pinch to zoom it. Returns the position to draw, which follows the
+ * fingers, and the handlers for the box. `onChange` gets the new position when the fingers lift; without it
+ * the photo stays put. `onGesture` hears when fingers go down and lift, e.g. to pause a scroll view.
+ */
+export function usePhotoGestures(position, box, image, onChange, onGesture) {
+    const [moving, setMoving] = useState(null);
+    const latest = useRef({ position, box, image, onChange, onGesture });
+    latest.current = { position, box, image, onChange, onGesture };
+    useEffect(() => setMoving(null), [position?.x, position?.y, position?.zoom]);
+    const responder = useMemo(() => {
+        let crop = PhotoCrop.CENTRE;
+        let last = { dx: 0, dy: 0 };
+        let pinch = { spread: 0, zoom: 1 };
+        const finish = () => {
+            const { position, onChange, onGesture } = latest.current;
+            onGesture?.(false);
+            if (crop.equals(position))
+                setMoving(null);
+            else
+                onChange?.(crop.toJSON());
+        };
+        return PanResponder.create({
+            onStartShouldSetPanResponder: () => !!latest.current.onChange,
+            onMoveShouldSetPanResponder: () => !!latest.current.onChange,
+            onPanResponderTerminationRequest: () => false,
+            onPanResponderGrant: (e) => {
+                latest.current.onGesture?.(true);
+                crop = PhotoCrop.of(latest.current.position);
+                last = { dx: 0, dy: 0 };
+                pinch = { spread: spread(e), zoom: crop.zoom };
+            },
+            onPanResponderMove: (e, { dx, dy }) => {
+                const now = spread(e);
+                if (now && pinch.spread)
+                    crop = crop.zoomTo((pinch.zoom * now) / pinch.spread);
+                else if (now)
+                    pinch = { spread: now, zoom: crop.zoom };
+                else {
+                    pinch.spread = 0;
+                    crop = crop.pan(dx - last.dx, dy - last.dy, latest.current.box, latest.current.image);
+                }
+                last = { dx, dy };
+                setMoving(crop);
+            },
+            onPanResponderRelease: finish,
+            onPanResponderTerminate: finish,
+        });
+    }, []);
+    return { crop: moving ?? PhotoCrop.of(position), handlers: onChange ? responder.panHandlers : {} };
+}
+/** A photo covering its box, moved and zoomed by `crop`. */
+export function CroppedImage({ photo, crop, box, image }) {
+    const rect = crop.rect(box, image);
+    return (_jsx(View, { style: [StyleSheet.absoluteFill, styles.clip], children: _jsx(Image, { source: { uri: photo.src }, style: [styles.abs, rect], resizeMode: "cover", "aria-label": photo.alt ?? undefined }) }));
+}
+const styles = StyleSheet.create({
+    abs: { position: 'absolute' },
+    clip: { overflow: 'hidden' },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toneflix/flipbook-native",
-  "version": "0.2.3",
+  "version": "0.3.4",
   "description": "An expressive flipbook for creating personalised and interactive reading and photo viewing experiences, for React Native and Expo.",
   "license": "MIT",
   "homepage": "https://toneflix.github.io/flipbook/frameworks/react-native",
@@ -29,7 +29,7 @@
     "assets"
   ],
   "dependencies": {
-    "@toneflix/flipbook-core": "^0.2.3"
+    "@toneflix/flipbook-core": "^0.3.4"
   },
   "peerDependencies": {
     "expo-screen-orientation": "*",

package/src/Cover.tsx

@@ -1,10 +1,21 @@
-import { useId, type ReactNode } from 'react'
+import { useId, useState, type ReactNode } from 'react'
 import { Image, StyleSheet, Text, View, type TextStyle, type ViewStyle } from 'react-native'
 import Svg, { ClipPath, Defs, Ellipse, Image as SvgImage, Path, RadialGradient, Rect, Stop } from 'react-native-svg'
-import { COVER_THEMES, DECO, FLEURON, coverHasText, type CoverArt, type FlipbookBook, type FlipbookPhoto } from '@toneflix/flipbook-core'
+import {
+  COVER_THEMES,
+  DECO,
+  FLEURON,
+  PhotoCrop,
+  coverHasText,
+  type CoverArt,
+  type FlipbookBook,
+  type FlipbookPhoto,
+  type Size,
+} from '@toneflix/flipbook-core'
 import { Gradient } from './Gradient'
 import { PAPERS, useSerif } from './look'
 import { Ornament, PAGE_RATIO } from './pages'
+import { CroppedImage, useNaturalSize } from './position'
 
 type Side = 'left' | 'right'
 type Corner = 'tl' | 'tr' | 'bl' | 'br'
@@ -79,6 +90,8 @@ function ShapedPhoto({
   show: boolean
 }) {
   const id = `c${useId().replace(/[^a-zA-Z0-9]/g, '')}`
+  const natural = useNaturalSize(show ? photo : null)
+  const drawn = PhotoCrop.of(photo.position).rect({ width, height }, natural)
   const r = width / 2
   const arch = `M0 ${height}V${r}A${r} ${r} 0 0 1 ${width} ${r}V${height}Z`
   const outline = shape === 'oval' ? <Ellipse cx={r} cy={height / 2} rx={r - 0.3 * unit} ry={height / 2 - 0.3 * unit} /> : <Path d={arch} />
@@ -89,7 +102,15 @@ function ShapedPhoto({
         <ClipPath id={id}>{outline}</ClipPath>
       </Defs>
       {show ? (
-        <SvgImage href={{ uri: photo.src }} width={width} height={height} preserveAspectRatio="xMidYMid slice" clipPath={`url(#${id})`} />
+        <SvgImage
+          href={{ uri: photo.src }}
+          x={drawn.left}
+          y={drawn.top}
+          width={drawn.width}
+          height={drawn.height}
+          preserveAspectRatio="xMidYMid slice"
+          clipPath={`url(#${id})`}
+        />
       ) : (
         <Rect width={width} height={height} fill={color} fillOpacity={0.15} clipPath={`url(#${id})`} />
       )}
@@ -110,8 +131,19 @@ function ShapedPhoto({
   )
 }
 
-const Photo = ({ photo, show }: { photo: FlipbookPhoto; show: boolean }) =>
-  show ? <Image source={{ uri: photo.src }} style={StyleSheet.absoluteFill} resizeMode="cover" aria-label={photo.alt ?? undefined} /> : null
+/** A photo covering its parent, cropped by its position. */
+function Photo({ photo, show }: { photo: FlipbookPhoto; show: boolean }) {
+  const [box, setBox] = useState<Size | null>(null)
+  const natural = useNaturalSize(show ? photo : null)
+
+  if (!show) return null
+
+  return (
+    <View style={StyleSheet.absoluteFill} onLayout={(e) => setBox(e.nativeEvent.layout)}>
+      {box && <CroppedImage photo={photo} crop={PhotoCrop.of(photo.position)} box={box} image={natural} />}
+    </View>
+  )
+}
 
 /** Cover board: cloth, light, the hinge shadow along the spine and a grain finish. */
 function Board({ book, width, hinge, children }: { book: Pick<FlipbookBook, 'theme'>; width: number; hinge: Side; children?: ReactNode }) {

package/src/PrintedPhoto.tsx

@@ -1,5 +1,5 @@
 import { useId, useState } from 'react'
-import { Image, StyleSheet, View, type LayoutChangeEvent, type ViewStyle } from 'react-native'
+import { StyleSheet, View, type LayoutChangeEvent, type ViewStyle } from 'react-native'
 import Svg, {
   ClipPath,
   Defs,
@@ -14,9 +14,10 @@ import Svg, {
   Circle,
   Stop,
 } from 'react-native-svg'
-import { BANDED_FRAMES, type FlipbookPhoto, type FrameStyle } from '@toneflix/flipbook-core'
+import { BANDED_FRAMES, type FlipbookPhoto, type FrameStyle, type PhotoCrop, type PhotoPosition, type Size } from '@toneflix/flipbook-core'
 import { Gradient } from './Gradient'
 import { ink, usePaper, type PaperLook } from './look'
+import { CroppedImage, useNaturalSize, usePhotoGestures } from './position'
 
 type Box = { left: number; top: number; width: number; height: number }
 
@@ -62,9 +63,13 @@ export interface PrintedPhotoProps {
   fit?: 'cover' | 'contain'
   /** False draws a placeholder instead of loading the image. */
   show?: boolean
+  /** Editor: lets people drag and pinch to choose which part of the photo shows. */
+  onPosition?: (position: PhotoPosition) => void
+  /** Editor: called with true when a positioning gesture starts and false when it ends. */
+  onPositionGesture?: (active: boolean) => void
 }
 
-export function PrintedPhoto({ photo, frame, unit, fit = 'cover', show = true }: PrintedPhotoProps) {
+export function PrintedPhoto({ photo, frame, unit, fit = 'cover', show = true, onPosition, onPositionGesture }: PrintedPhotoProps) {
   const look = usePaper()
   const [box, setBox] = useState<{ width: number; height: number } | null>(null)
   const { pad, line } = measure(frame, unit)
@@ -80,18 +85,20 @@ export function PrintedPhoto({ photo, frame, unit, fit = 'cover', show = true }:
   }
 
   const inner: Box = { left: edge, top: edge, width: Math.max(0, width - 2 * edge), height: Math.max(0, height - 2 * edge) }
+  const natural = useNaturalSize(show ? photo : null)
+  const { crop, handlers } = usePhotoGestures(photo?.position, inner, natural, photo && show ? onPosition : undefined, onPositionGesture)
 
   return (
     <View style={styles.box} onLayout={(event: LayoutChangeEvent) => setBox(event.nativeEvent.layout)}>
       {box && (
-        <View style={{ width, height }}>
+        <View style={{ width, height }} {...handlers}>
           <Backing frame={frame} look={look} unit={unit} width={width} height={height} line={line} />
           {frame === 'oval' ? (
-            <OvalPhoto photo={show ? photo : null} look={look} rect={inner} width={width} height={height} line={line} />
+            <OvalPhoto photo={show ? photo : null} crop={crop} natural={natural} look={look} rect={inner} width={width} height={height} />
           ) : (
             <View style={[styles.abs, inner]}>
               {photo && show ? (
-                <Image source={{ uri: photo.src }} style={StyleSheet.absoluteFill} resizeMode="cover" aria-label={photo.alt ?? undefined} />
+                <CroppedImage photo={photo} crop={crop} box={inner} image={natural} />
               ) : (
                 <View style={[StyleSheet.absoluteFill, { backgroundColor: ink(look, 0.15) }]} />
               )}
@@ -369,19 +376,23 @@ function Band({
 /** The photo cut to an oval. */
 function OvalPhoto({
   photo,
+  crop,
+  natural,
   look,
   rect,
   width,
   height,
 }: {
   photo: FlipbookPhoto | null
+  crop: PhotoCrop
+  natural: Size | null
   look: PaperLook
   rect: Box
   width: number
   height: number
-  line: number
 }) {
   const id = `oval${useId().replace(/[^a-zA-Z0-9]/g, '')}`
+  const drawn = crop.rect(rect, natural)
 
   return (
     <Svg width={width} height={height} style={styles.abs}>
@@ -393,10 +404,10 @@ function OvalPhoto({
       {photo ? (
         <SvgImage
           href={{ uri: photo.src }}
-          x={rect.left}
-          y={rect.top}
-          width={rect.width}
-          height={rect.height}
+          x={rect.left + drawn.left}
+          y={rect.top + drawn.top}
+          width={drawn.width}
+          height={drawn.height}
           preserveAspectRatio="xMidYMid slice"
           clipPath={`url(#${id})`}
         />

package/src/index.ts

@@ -7,3 +7,4 @@ export { BookLookProvider, useBookLook, usePaper, useSerif, ink, PAPERS, type Bo
 export { Gradient, type GradientStop } from './Gradient'
 export { FoldLayout } from './geometry'
 export { lockLandscape } from './orientation'
+export { CroppedImage, useNaturalSize, usePhotoGestures, type CroppedImageProps } from './position'

package/src/pages.tsx

@@ -1,7 +1,7 @@
 import { useId, type ReactNode } from 'react'
 import { Image, Pressable, StyleSheet, Text, View, type ViewStyle } from 'react-native'
 import Svg, { Circle, Defs, Path, RadialGradient, Rect, Stop } from 'react-native-svg'
-import { PLACED_LAYOUTS, photoFrame, type FlipbookBook, type FlipbookPage, type PageBox } from '@toneflix/flipbook-core'
+import { PLACED_LAYOUTS, photoFrame, type FlipbookBook, type FlipbookPage, type PageBox, type PhotoPosition } from '@toneflix/flipbook-core'
 import { Gradient } from './Gradient'
 import { ink, useBookLook, usePaper, useSerif, type PaperLook } from './look'
 import { PrintedPhoto } from './PrintedPhoto'
@@ -21,6 +21,10 @@ export interface PageViewProps {
   /** Editor: makes each photo slot pressable. */
   onSlotPress?: (slot: number) => void
   activeSlot?: number | null
+  /** Editor: lets people drag and pinch the photo in the active slot to choose which part shows. */
+  onPhotoPosition?: (slot: number, position: PhotoPosition) => void
+  /** Editor: true while a finger is moving a photo, e.g. to pause the scroll view the page sits in. */
+  onPositionGesture?: (active: boolean) => void
   /** Editor: colour of the highlighted slot. */
   accent?: string
 }
@@ -29,7 +33,18 @@ export interface PageViewProps {
  * The inside of one book page, `width` wide. Sizes are in units of 1% of the width, so the same
  * page looks right as a thumbnail and full screen.
  */
-export function PageView({ page, width, number, side, showImages = true, onSlotPress, activeSlot, accent = '#00afff' }: PageViewProps) {
+export function PageView({
+  page,
+  width,
+  number,
+  side,
+  showImages = true,
+  onSlotPress,
+  activeSlot,
+  onPhotoPosition,
+  onPositionGesture,
+  accent = '#00afff',
+}: PageViewProps) {
   const look = usePaper()
   const serif = useSerif()
   const unit = width / 100
@@ -52,7 +67,15 @@ export function PageView({ page, width, number, side, showImages = true, onSlotP
         style={[style, fit === 'cover' && styles.clip]}
       >
         {photo ? (
-          <PrintedPhoto photo={photo} frame={frame} unit={unit} fit={fit} show={showImages} />
+          <PrintedPhoto
+            photo={photo}
+            frame={frame}
+            unit={unit}
+            fit={fit}
+            show={showImages}
+            onPosition={onPhotoPosition && activeSlot === index ? (position) => onPhotoPosition(index, position) : undefined}
+            onPositionGesture={onPositionGesture}
+          />
         ) : (
           <View
             style={[

package/src/position.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Image, PanResponder, StyleSheet, View, type GestureResponderEvent } from 'react-native'
+import { PhotoCrop, type FlipbookPhoto, type PhotoPosition, type Size } from '@toneflix/flipbook-core'
+
+/** The photo's own size: from the photo data, else read from the image once. */
+export function useNaturalSize(photo: Pick<FlipbookPhoto, 'src' | 'width' | 'height'> | null): Size | null {
+  const known = photo?.width && photo.height ? { width: photo.width, height: photo.height } : null
+  const [read, setRead] = useState<{ src: string; size: Size } | null>(null)
+
+  useEffect(() => {
+    if (known || !photo) return
+
+    let live = true
+
+    Image.getSize(
+      photo.src,
+      (width, height) => live && setRead({ src: photo.src, size: { width, height } }),
+      () => undefined,
+    )
+
+    return () => {
+      live = false
+    }
+  }, [photo?.src, !!known])
+
+  return known ?? (read && read.src === photo?.src ? read.size : null)
+}
+
+const spread = (e: GestureResponderEvent) => {
+  const [a, b] = e.nativeEvent.touches
+
+  return a && b ? Math.hypot(a.pageX - b.pageX, a.pageY - b.pageY) : 0
+}
+
+/**
+ * Drag to move a photo in its box and pinch to zoom it. Returns the position to draw, which follows the
+ * fingers, and the handlers for the box. `onChange` gets the new position when the fingers lift; without it
+ * the photo stays put. `onGesture` hears when fingers go down and lift, e.g. to pause a scroll view.
+ */
+export function usePhotoGestures(
+  position: Partial<PhotoPosition> | null | undefined,
+  box: Size,
+  image: Size | null,
+  onChange?: (position: PhotoPosition) => void,
+  onGesture?: (active: boolean) => void,
+) {
+  const [moving, setMoving] = useState<PhotoCrop | null>(null)
+  const latest = useRef({ position, box, image, onChange, onGesture })
+
+  latest.current = { position, box, image, onChange, onGesture }
+
+  useEffect(() => setMoving(null), [position?.x, position?.y, position?.zoom])
+
+  const responder = useMemo(() => {
+    let crop = PhotoCrop.CENTRE
+    let last = { dx: 0, dy: 0 }
+    let pinch = { spread: 0, zoom: 1 }
+
+    const finish = () => {
+      const { position, onChange, onGesture } = latest.current
+
+      onGesture?.(false)
+      if (crop.equals(position)) setMoving(null)
+      else onChange?.(crop.toJSON())
+    }
+
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => !!latest.current.onChange,
+      onMoveShouldSetPanResponder: () => !!latest.current.onChange,
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderGrant: (e) => {
+        latest.current.onGesture?.(true)
+        crop = PhotoCrop.of(latest.current.position)
+        last = { dx: 0, dy: 0 }
+        pinch = { spread: spread(e), zoom: crop.zoom }
+      },
+      onPanResponderMove: (e, { dx, dy }) => {
+        const now = spread(e)
+
+        if (now && pinch.spread) crop = crop.zoomTo((pinch.zoom * now) / pinch.spread)
+        else if (now) pinch = { spread: now, zoom: crop.zoom }
+        else {
+          pinch.spread = 0
+          crop = crop.pan(dx - last.dx, dy - last.dy, latest.current.box, latest.current.image)
+        }
+
+        last = { dx, dy }
+        setMoving(crop)
+      },
+      onPanResponderRelease: finish,
+      onPanResponderTerminate: finish,
+    })
+  }, [])
+
+  return { crop: moving ?? PhotoCrop.of(position), handlers: onChange ? responder.panHandlers : {} }
+}
+
+export interface CroppedImageProps {
+  photo: FlipbookPhoto
+  crop: PhotoCrop
+  /** The box the photo covers, which this fills. */
+  box: Size
+  image: Size | null
+}
+
+/** A photo covering its box, moved and zoomed by `crop`. */
+export function CroppedImage({ photo, crop, box, image }: CroppedImageProps) {
+  const rect = crop.rect(box, image)
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.clip]}>
+      <Image source={{ uri: photo.src }} style={[styles.abs, rect]} resizeMode="cover" aria-label={photo.alt ?? undefined} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  abs: { position: 'absolute' },
+  clip: { overflow: 'hidden' },
+})