react-native-image-editor-skia 0.1.0

package/src/gestures/hitTest.ts

@@ -0,0 +1,79 @@
+import type { Annotation, Vec2 } from '../types';
+import { annotationBounds, annotationCenter } from '../annotations/geometryPure';
+import { distanceToSegment, rotatePoint } from '../utils/math';
+
+// NOTE: `hitOne` is declared BEFORE `hitTest`. The worklets Babel plugin rewrites
+// `'worklet'` function declarations into `const`s (no hoisting), so a worklet that
+// calls another must be defined after its callee.
+function hitOne(a: Annotation, p: Vec2, slop: number): boolean {
+  'worklet';
+  switch (a.type) {
+    case 'circle': {
+      const d = Math.hypot(p.x - a.center.x, p.y - a.center.y);
+      if (a.fill !== undefined) {
+        return d <= a.radius + slop;
+      }
+      // Outline: hit near the ring.
+      return Math.abs(d - a.radius) <= slop + a.strokeWidth / 2;
+    }
+    case 'arrow':
+      return distanceToSegment(p, a.start, a.end) <= slop + a.strokeWidth / 2;
+    case 'marker': {
+      const r = a.rect;
+      return (
+        p.x >= r.x - slop &&
+        p.x <= r.x + r.width + slop &&
+        p.y >= r.y - slop &&
+        p.y <= r.y + r.height + slop
+      );
+    }
+    case 'freehand': {
+      const pts = a.points;
+      const tol = slop + a.strokeWidth / 2;
+      for (let i = 1; i < pts.length; i++) {
+        if (distanceToSegment(p, pts[i - 1]!, pts[i]!) <= tol) {
+          return true;
+        }
+      }
+      return pts.length === 1
+        ? Math.hypot(p.x - pts[0]!.x, p.y - pts[0]!.y) <= tol
+        : false;
+    }
+    case 'text': {
+      const b = annotationBounds(a);
+      return (
+        p.x >= b.x - slop &&
+        p.x <= b.x + b.width + slop &&
+        p.y >= b.y - slop &&
+        p.y <= b.y + b.height + slop
+      );
+    }
+  }
+}
+
+/**
+ * Return the id of the top-most annotation hit by `point` (image space), or null.
+ * Worklet-safe so selection resolves on the UI thread during a tap.
+ *
+ * `slop` is an extra hit margin, in image pixels (screen slop / current scale).
+ */
+export function hitTest(
+  annotations: Annotation[],
+  point: Vec2,
+  slop: number
+): string | null {
+  'worklet';
+  // Iterate from top (highest z) to bottom.
+  const ordered = [...annotations].sort((a, b) => b.z - a.z);
+  for (let i = 0; i < ordered.length; i++) {
+    const a = ordered[i]!;
+    // Transform the touch into the annotation's local (unrotated) frame.
+    const local = a.rotation
+      ? rotatePoint(point, annotationCenter(a), -a.rotation)
+      : point;
+    if (hitOne(a, local, slop)) {
+      return a.id;
+    }
+  }
+  return null;
+}

package/src/gestures/useCropGesture.ts

@@ -0,0 +1,123 @@
+import { useMemo } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { useSharedValue } from 'react-native-reanimated';
+
+import type { Rect, Vec2 } from '../types';
+import { useEditor } from '../context/EditorContext';
+import { HANDLE_SIZE } from '../constants';
+import { applyToPoint, distance, invert } from '../utils/math';
+
+const MIN_CROP = 24; // minimum crop size, in image pixels
+
+type CropMode = 'none' | 'move' | 'resize';
+
+/**
+ * Pan gesture that edits `cropRectSV` (image space) while the crop tool is
+ * active. Grab a corner to resize, or the interior to move. All values stay
+ * clamped inside the image bounds.
+ */
+export function useCropGesture() {
+  const { tool, matrix, cropRectSV, imageSize } = useEditor();
+  const invMatrix = useMemo(() => invert(matrix), [matrix]);
+
+  const cropMode = useSharedValue<CropMode>('none');
+  const corner = useSharedValue(-1);
+  const startRect = useSharedValue<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+  const startImg = useSharedValue<Vec2>({ x: 0, y: 0 });
+
+  return useMemo(() => {
+    return Gesture.Pan()
+      .enabled(tool === 'crop')
+      .maxPointers(1)
+      .onBegin((e) => {
+        'worklet';
+        const screen = { x: e.x, y: e.y };
+        const img = applyToPoint(invMatrix, screen);
+        const r = cropRectSV.value;
+        startRect.value = r;
+        startImg.value = img;
+
+        const corners: Vec2[] = [
+          { x: r.x, y: r.y },
+          { x: r.x + r.width, y: r.y },
+          { x: r.x + r.width, y: r.y + r.height },
+          { x: r.x, y: r.y + r.height },
+        ];
+        for (let i = 0; i < corners.length; i++) {
+          const cs = applyToPoint(matrix, corners[i]!);
+          if (distance(screen, cs) <= HANDLE_SIZE * 1.5) {
+            cropMode.value = 'resize';
+            corner.value = i;
+            return;
+          }
+        }
+        if (
+          img.x >= r.x &&
+          img.x <= r.x + r.width &&
+          img.y >= r.y &&
+          img.y <= r.y + r.height
+        ) {
+          cropMode.value = 'move';
+        } else {
+          cropMode.value = 'none';
+        }
+      })
+      .onChange((e) => {
+        'worklet';
+        const img = applyToPoint(invMatrix, { x: e.x, y: e.y });
+        const dx = img.x - startImg.value.x;
+        const dy = img.y - startImg.value.y;
+        const s = startRect.value;
+
+        if (cropMode.value === 'move') {
+          let nx = s.x + dx;
+          let ny = s.y + dy;
+          nx = Math.max(0, Math.min(nx, imageSize.width - s.width));
+          ny = Math.max(0, Math.min(ny, imageSize.height - s.height));
+          cropRectSV.value = { x: nx, y: ny, width: s.width, height: s.height };
+        } else if (cropMode.value === 'resize') {
+          // Fixed corner = the one opposite the grabbed corner.
+          const left = s.x;
+          const top = s.y;
+          const right = s.x + s.width;
+          const bottom = s.y + s.height;
+          let x0 = left;
+          let y0 = top;
+          let x1 = right;
+          let y1 = bottom;
+          switch (corner.value) {
+            case 0: // TL moves
+              x0 = Math.min(right - MIN_CROP, Math.max(0, left + dx));
+              y0 = Math.min(bottom - MIN_CROP, Math.max(0, top + dy));
+              break;
+            case 1: // TR moves
+              x1 = Math.max(left + MIN_CROP, Math.min(imageSize.width, right + dx));
+              y0 = Math.min(bottom - MIN_CROP, Math.max(0, top + dy));
+              break;
+            case 2: // BR moves
+              x1 = Math.max(left + MIN_CROP, Math.min(imageSize.width, right + dx));
+              y1 = Math.max(top + MIN_CROP, Math.min(imageSize.height, bottom + dy));
+              break;
+            case 3: // BL moves
+              x0 = Math.min(right - MIN_CROP, Math.max(0, left + dx));
+              y1 = Math.max(top + MIN_CROP, Math.min(imageSize.height, bottom + dy));
+              break;
+            default:
+              break;
+          }
+          cropRectSV.value = {
+            x: x0,
+            y: y0,
+            width: x1 - x0,
+            height: y1 - y0,
+          };
+        }
+      })
+      .onEnd(() => {
+        'worklet';
+        cropMode.value = 'none';
+        corner.value = -1;
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tool, matrix, imageSize]);
+}

package/src/gestures/useEditorGestures.ts

@@ -0,0 +1,308 @@
+import { useMemo } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
+
+import type { Annotation, Rect, ToolType, Vec2 } from '../types';
+import { useEditor } from '../context/EditorContext';
+import {
+  FREEHAND_MIN_DISTANCE,
+  HANDLE_SIZE,
+  HIT_SLOP,
+} from '../constants';
+import { applyToPoint, distance, invert } from '../utils/math';
+import { annotationCenter } from '../annotations/geometry';
+import { hitTest } from './hitTest';
+import { selectionHandles } from './handles';
+import { applyTransformToAnnotation } from './applyTransform';
+import type { LiveValues } from './applyTransform';
+import {
+  makeArrow,
+  makeCircle,
+  makeFreehand,
+  makeMarker,
+  makeText,
+} from './createAnnotation';
+
+type Mode = 'none' | 'draw' | 'text' | 'move' | 'resize' | 'rotate';
+
+function isDrawTool(tool: ToolType): boolean {
+  'worklet';
+  return (
+    tool === 'circle' ||
+    tool === 'arrow' ||
+    tool === 'marker' ||
+    tool === 'freehand'
+  );
+}
+
+/**
+ * A single composed Pan gesture over the canvas. It branches on the active tool
+ * and, in select mode, on where the touch began (rotate handle → rotate, corner
+ * handle → resize, body → move, empty → (de)select). All geometry math runs on
+ * the UI thread; only final commits hop to JS via runOnJS.
+ */
+export function useEditorGestures() {
+  const editor = useEditor();
+  const {
+    tool,
+    selectedId,
+    annotations,
+    matrix,
+    draw,
+    live,
+    strokeColor,
+    strokeWidth,
+    dispatch,
+    setSelectedId,
+    setEditingTextId,
+  } = editor;
+
+  const invMatrix = useMemo(() => invert(matrix), [matrix]);
+  const scaleFactor = useMemo(
+    () => Math.hypot(matrix.a, matrix.b) || 1,
+    [matrix]
+  );
+  const slopImage = HIT_SLOP / scaleFactor;
+
+  // Per-gesture UI-thread scratch state.
+  const mode = useSharedValue<Mode>('none');
+  const startImg = useSharedValue<Vec2>({ x: 0, y: 0 });
+  const startDist = useSharedValue(0);
+  const startAngle = useSharedValue(0);
+  const activeId = useSharedValue<string | null>(null);
+
+  // ---- JS-thread commit callbacks --------------------------------------
+  const selectId = (id: string | null) => setSelectedId(id);
+
+  const commitCircle = (center: Vec2, radius: number) =>
+    dispatch({
+      type: 'ADD_ANNOTATION',
+      annotation: makeCircle(center, radius, { strokeColor, strokeWidth }),
+    });
+
+  const commitArrow = (start: Vec2, end: Vec2) =>
+    dispatch({
+      type: 'ADD_ANNOTATION',
+      annotation: makeArrow(start, end, { strokeColor, strokeWidth }),
+    });
+
+  const commitMarker = (rect: Rect) =>
+    dispatch({
+      type: 'ADD_ANNOTATION',
+      annotation: makeMarker(rect, strokeColor),
+    });
+
+  const commitFreehand = (points: Vec2[]) =>
+    dispatch({
+      type: 'ADD_ANNOTATION',
+      annotation: makeFreehand(points, { strokeColor, strokeWidth }),
+    });
+
+  const placeText = (origin: Vec2) => {
+    const annotation = makeText(origin, editor.textColor);
+    dispatch({ type: 'ADD_ANNOTATION', annotation });
+    setSelectedId(annotation.id);
+    setEditingTextId(annotation.id);
+  };
+
+  const commitTransform = (id: string | null, vals: LiveValues) => {
+    if (!id) {
+      return;
+    }
+    // Skip no-op transforms (a plain tap) so they don't pollute history.
+    const identity =
+      vals.tx === 0 && vals.ty === 0 && vals.rotate === 0 && vals.scale === 1;
+    if (identity) {
+      return;
+    }
+    const target = annotations.find((a) => a.id === id);
+    if (!target) {
+      return;
+    }
+    const updated = applyTransformToAnnotation(target, vals);
+    dispatch({ type: 'UPDATE_ANNOTATION', id, changes: updated });
+  };
+
+  const resetLive = () => {
+    live.active.value = false;
+    live.tx.value = 0;
+    live.ty.value = 0;
+    live.rotate.value = 0;
+    live.scale.value = 1;
+  };
+
+  // ---- The gesture ------------------------------------------------------
+  const pan = useMemo(() => {
+    return Gesture.Pan()
+      .maxPointers(1)
+      .onBegin((e) => {
+        'worklet';
+        if (tool === 'crop') {
+          mode.value = 'none';
+          return;
+        }
+        const screen = { x: e.x, y: e.y };
+        const img = applyToPoint(invMatrix, screen);
+        startImg.value = img;
+        activeId.value = selectedId;
+
+        if (isDrawTool(tool)) {
+          mode.value = 'draw';
+          draw.active.value = true;
+          draw.start.value = img;
+          draw.current.value = img;
+          if (tool === 'freehand') {
+            draw.points.value = [img];
+          }
+          return;
+        }
+
+        if (tool === 'text') {
+          mode.value = 'text';
+          return;
+        }
+
+        // select tool: figure out what was grabbed.
+        const sel: Annotation | undefined = selectedId
+          ? annotations.find((a) => a.id === selectedId)
+          : undefined;
+        if (sel) {
+          const h = selectionHandles(sel, matrix);
+          const center = annotationCenter(sel);
+          if (distance(screen, h.rotate) <= HANDLE_SIZE * 1.5) {
+            mode.value = 'rotate';
+            live.origin.value = center;
+            live.active.value = true;
+            startAngle.value = Math.atan2(img.y - center.y, img.x - center.x);
+            return;
+          }
+          for (let i = 0; i < h.corners.length; i++) {
+            if (distance(screen, h.corners[i]!) <= HANDLE_SIZE * 1.5) {
+              mode.value = 'resize';
+              live.origin.value = center;
+              live.active.value = true;
+              startDist.value = distance(center, img);
+              return;
+            }
+          }
+          // Body of the selected annotation → move it.
+          if (hitTest([sel], img, slopImage) === sel.id) {
+            mode.value = 'move';
+            live.origin.value = center;
+            live.active.value = true;
+            return;
+          }
+        }
+
+        // Otherwise (de)select whatever is under the touch.
+        const hitId = hitTest(annotations, img, slopImage);
+        runOnJS(selectId)(hitId);
+        activeId.value = hitId;
+        if (hitId) {
+          const target = annotations.find((a) => a.id === hitId)!;
+          mode.value = 'move';
+          live.origin.value = annotationCenter(target);
+          live.active.value = true;
+        } else {
+          mode.value = 'none';
+        }
+      })
+      .onChange((e) => {
+        'worklet';
+        const screen = { x: e.x, y: e.y };
+        const img = applyToPoint(invMatrix, screen);
+        switch (mode.value) {
+          case 'draw':
+            if (tool === 'freehand') {
+              const pts = draw.points.value;
+              const last = pts[pts.length - 1];
+              if (!last || distance(last, img) >= FREEHAND_MIN_DISTANCE) {
+                draw.points.value = [...pts, img];
+              }
+            } else {
+              draw.current.value = img;
+            }
+            break;
+          case 'move':
+            live.tx.value = img.x - startImg.value.x;
+            live.ty.value = img.y - startImg.value.y;
+            break;
+          case 'resize':
+            live.scale.value =
+              startDist.value > 0 ? distance(live.origin.value, img) / startDist.value : 1;
+            break;
+          case 'rotate': {
+            const ang = Math.atan2(
+              img.y - live.origin.value.y,
+              img.x - live.origin.value.x
+            );
+            live.rotate.value = ang - startAngle.value;
+            break;
+          }
+          default:
+            break;
+        }
+      })
+      .onEnd(() => {
+        'worklet';
+        if (mode.value === 'draw') {
+          draw.active.value = false;
+          const s = draw.start.value;
+          const c = draw.current.value;
+          if (tool === 'circle') {
+            const r = distance(s, c);
+            if (r > 2) runOnJS(commitCircle)(s, r);
+          } else if (tool === 'arrow') {
+            if (distance(s, c) > 2) runOnJS(commitArrow)(s, c);
+          } else if (tool === 'marker') {
+            const rect: Rect = {
+              x: Math.min(s.x, c.x),
+              y: Math.min(s.y, c.y),
+              width: Math.abs(c.x - s.x),
+              height: Math.abs(c.y - s.y),
+            };
+            if (rect.width > 2 && rect.height > 2) runOnJS(commitMarker)(rect);
+          } else if (tool === 'freehand') {
+            const pts = draw.points.value;
+            if (pts.length > 1) runOnJS(commitFreehand)(pts);
+            draw.points.value = [];
+          }
+          mode.value = 'none';
+          return;
+        }
+
+        if (mode.value === 'text') {
+          runOnJS(placeText)(startImg.value);
+          mode.value = 'none';
+          return;
+        }
+
+        if (
+          mode.value === 'move' ||
+          mode.value === 'resize' ||
+          mode.value === 'rotate'
+        ) {
+          const vals: LiveValues = {
+            tx: live.tx.value,
+            ty: live.ty.value,
+            rotate: live.rotate.value,
+            scale: live.scale.value,
+            origin: live.origin.value,
+          };
+          runOnJS(commitTransform)(activeId.value, vals);
+          runOnJS(resetLive)();
+          mode.value = 'none';
+        }
+      })
+      .onFinalize(() => {
+        'worklet';
+        // Safety: ensure draw preview is cleared if the gesture is cancelled.
+        if (draw.active.value && mode.value !== 'draw') {
+          draw.active.value = false;
+        }
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tool, selectedId, annotations, matrix, strokeColor, strokeWidth]);
+
+  return pan;
+}

package/src/image/disposeRegistry.ts

@@ -0,0 +1,59 @@
+/**
+ * Tracks Skia native objects (SkImage / SkData / SkSurface / SkParagraph …) so
+ * they can be released deterministically. Skia objects are JSI HostObjects; the
+ * Hermes GC under-counts their native footprint and may never collect them, so
+ * we must call `.dispose()` explicitly. This registry is a safety net: register
+ * anything created imperatively, and `flush()` on unmount to guarantee cleanup.
+ */
+
+export interface Disposable {
+  dispose: () => void;
+}
+
+export class DisposeRegistry {
+  private items = new Set<Disposable>();
+
+  /** Track an object and return it for convenient chaining. */
+  add<T extends Disposable>(item: T): T {
+    this.items.add(item);
+    return item;
+  }
+
+  /** Stop tracking without disposing (e.g. ownership handed elsewhere). */
+  forget(item: Disposable): void {
+    this.items.delete(item);
+  }
+
+  /** Dispose a single tracked object now. */
+  release(item: Disposable | null | undefined): void {
+    if (!item) {
+      return;
+    }
+    this.items.delete(item);
+    safeDispose(item);
+  }
+
+  /** Dispose everything still tracked. Call on unmount. */
+  flush(): void {
+    for (const item of this.items) {
+      safeDispose(item);
+    }
+    this.items.clear();
+  }
+
+  get size(): number {
+    return this.items.size;
+  }
+}
+
+/** Dispose without throwing if the object was already released. */
+export function safeDispose(item: Disposable | null | undefined): void {
+  if (!item) {
+    return;
+  }
+  try {
+    item.dispose();
+  } catch {
+    // Already disposed or not a real disposable — ignore.
+  }
+}

package/src/image/useLoadedImage.ts

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useState } from 'react';
+import { Skia } from '@shopify/react-native-skia';
+import type { SkImage } from '@shopify/react-native-skia';
+
+import type { ImageSource } from '../types';
+import { safeDispose } from './disposeRegistry';
+
+export interface LoadedImage {
+  image: SkImage | null;
+  width: number;
+  height: number;
+  loading: boolean;
+  error: Error | null;
+}
+
+function stripDataUri(base64: string): string {
+  const comma = base64.indexOf(',');
+  if (base64.startsWith('data:') && comma !== -1) {
+    return base64.slice(comma + 1);
+  }
+  return base64;
+}
+
+/**
+ * Decode an {@link ImageSource} into an `SkImage`, managing native memory.
+ *
+ * Memory rules enforced here:
+ *  - The encoded `SkData` is disposed immediately after `MakeImageFromEncoded`;
+ *    the decoded `SkImage` owns its pixels, so retaining the encoded bytes would
+ *    roughly double memory usage.
+ *  - When `source` changes (or the component unmounts) the previous `SkImage` is
+ *    disposed before the next one is created.
+ *  - The input base64 string is consumed inside the effect and never copied into
+ *    state, so a large payload is not retained by this hook.
+ */
+export function useLoadedImage(source: ImageSource): LoadedImage {
+  const [state, setState] = useState<LoadedImage>({
+    image: null,
+    width: 0,
+    height: 0,
+    loading: true,
+    error: null,
+  });
+
+  // Serialize the source so the effect re-runs only on a real change, without
+  // holding the (possibly huge) base64 string in a memoized ref.
+  const sourceKey =
+    'base64' in source ? `b64:${source.base64.length}:${source.base64.slice(-64)}` : `uri:${source.uri}`;
+
+  const currentImage = useRef<SkImage | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const commit = (image: SkImage) => {
+      if (cancelled) {
+        // A newer load superseded us — drop this result.
+        safeDispose(image);
+        return;
+      }
+      // Dispose the previous image before swapping in the new one.
+      if (currentImage.current && currentImage.current !== image) {
+        safeDispose(currentImage.current);
+      }
+      currentImage.current = image;
+      setState({
+        image,
+        width: image.width(),
+        height: image.height(),
+        loading: false,
+        error: null,
+      });
+    };
+
+    const fail = (error: Error) => {
+      if (cancelled) {
+        return;
+      }
+      setState((prev) => ({ ...prev, loading: false, error }));
+    };
+
+    setState((prev) => ({ ...prev, loading: true, error: null }));
+
+    try {
+      if ('base64' in source) {
+        const data = Skia.Data.fromBase64(stripDataUri(source.base64));
+        const image = Skia.Image.MakeImageFromEncoded(data);
+        safeDispose(data); // decoded pixels are owned by `image` now
+        if (!image) {
+          throw new Error('Failed to decode image from base64.');
+        }
+        commit(image);
+      } else {
+        // fromURI is async (may fetch a remote/local file).
+        Skia.Data.fromURI(source.uri)
+          .then((data) => {
+            if (cancelled) {
+              safeDispose(data);
+              return;
+            }
+            const image = Skia.Image.MakeImageFromEncoded(data);
+            safeDispose(data);
+            if (!image) {
+              throw new Error(`Failed to decode image from URI: ${source.uri}`);
+            }
+            commit(image);
+          })
+          .catch((e: unknown) =>
+            fail(e instanceof Error ? e : new Error(String(e)))
+          );
+      }
+    } catch (e) {
+      fail(e instanceof Error ? e : new Error(String(e)));
+    }
+
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceKey]);
+
+  // Final safety net: dispose the last image when the hook unmounts.
+  useEffect(() => {
+    return () => {
+      safeDispose(currentImage.current);
+      currentImage.current = null;
+    };
+  }, []);
+
+  return state;
+}