react-native-image-editor-skia 0.1.0

package/src/context/EditorContext.tsx

@@ -0,0 +1,229 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useSharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+import type {
+  Annotation,
+  ColorString,
+  EditorDocument,
+  Rect,
+  ToolType,
+  Vec2,
+} from '../types';
+import {
+  DEFAULT_PALETTE,
+  DEFAULT_STROKE_COLOR,
+  DEFAULT_STROKE_WIDTH,
+  DEFAULT_TEXT_COLOR,
+} from '../constants';
+import { useEditorReducer } from '../state/useEditorReducer';
+import type { EditorAction, EditorState } from '../state/useEditorReducer';
+import { canRedo, canUndo } from '../state/history';
+import { identity, imageToScreenMatrix } from '../utils/math';
+import type { Mat } from '../utils/math';
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+/** Live geometry of a shape currently being drawn (UI-thread shared values). */
+export interface DrawState {
+  active: SharedValue<boolean>;
+  start: SharedValue<Vec2>;
+  current: SharedValue<Vec2>;
+  points: SharedValue<Vec2[]>;
+}
+
+/** Live transform applied to the selected annotation during move/resize/rotate. */
+export interface LiveTransformState {
+  active: SharedValue<boolean>;
+  tx: SharedValue<number>;
+  ty: SharedValue<number>;
+  rotate: SharedValue<number>;
+  scale: SharedValue<number>;
+  origin: SharedValue<Vec2>;
+}
+
+export interface EditorContextValue {
+  // Document + history
+  state: EditorState;
+  dispatch: React.Dispatch<EditorAction>;
+  doc: EditorDocument;
+  annotations: Annotation[];
+  canUndo: boolean;
+  canRedo: boolean;
+
+  // Tool + selection
+  tool: ToolType;
+  setTool: (t: ToolType) => void;
+  selectedId: string | null;
+  setSelectedId: (id: string | null) => void;
+
+  // Style
+  strokeColor: ColorString;
+  setStrokeColor: (c: ColorString) => void;
+  textColor: ColorString;
+  setTextColor: (c: ColorString) => void;
+  strokeWidth: number;
+  setStrokeWidth: (w: number) => void;
+  palette: ColorString[];
+
+  // Text editing overlay
+  editingTextId: string | null;
+  setEditingTextId: (id: string | null) => void;
+
+  // Geometry
+  layout: Size;
+  setLayout: (s: Size) => void;
+  imageSize: Size;
+  /** image→screen affine matrix (JS thread). */
+  matrix: Mat;
+  /** image→screen affine matrix mirrored for worklet/UI-thread reads. */
+  matrixSV: SharedValue<Mat>;
+
+  // Live gesture shared values
+  draw: DrawState;
+  live: LiveTransformState;
+
+  /** In-progress crop rectangle (image space) while the crop tool is active. */
+  cropRectSV: SharedValue<Rect>;
+}
+
+const EditorContext = createContext<EditorContextValue | null>(null);
+
+export function useEditor(): EditorContextValue {
+  const ctx = useContext(EditorContext);
+  if (!ctx) {
+    throw new Error('useEditor must be used within <EditorProvider>');
+  }
+  return ctx;
+}
+
+export function EditorProvider({
+  imageSize,
+  initialStrokeColor = DEFAULT_STROKE_COLOR,
+  initialTextColor = DEFAULT_TEXT_COLOR,
+  palette = DEFAULT_PALETTE,
+  children,
+}: {
+  imageSize: Size;
+  initialStrokeColor?: ColorString;
+  initialTextColor?: ColorString;
+  palette?: ColorString[];
+  children: React.ReactNode;
+}) {
+  const [state, dispatch] = useEditorReducer();
+  const [tool, setTool] = useState<ToolType>('select');
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [strokeColor, setStrokeColor] = useState(initialStrokeColor);
+  const [textColor, setTextColor] = useState(initialTextColor);
+  const [strokeWidth, setStrokeWidth] = useState(DEFAULT_STROKE_WIDTH);
+  const [editingTextId, setEditingTextId] = useState<string | null>(null);
+  const [layout, setLayout] = useState<Size>({ width: 1, height: 1 });
+
+  const doc = state.present;
+
+  // Draw shared values.
+  const drawActive = useSharedValue(false);
+  const drawStart = useSharedValue<Vec2>({ x: 0, y: 0 });
+  const drawCurrent = useSharedValue<Vec2>({ x: 0, y: 0 });
+  const drawPoints = useSharedValue<Vec2[]>([]);
+
+  // Live transform shared values.
+  const liveActive = useSharedValue(false);
+  const liveTx = useSharedValue(0);
+  const liveTy = useSharedValue(0);
+  const liveRotate = useSharedValue(0);
+  const liveScale = useSharedValue(1);
+  const liveOrigin = useSharedValue<Vec2>({ x: 0, y: 0 });
+
+  const matrixSV = useSharedValue<Mat>(identity());
+
+  const cropRectSV = useSharedValue<Rect>({
+    x: 0,
+    y: 0,
+    width: imageSize.width,
+    height: imageSize.height,
+  });
+
+  const matrix = useMemo(
+    () => imageToScreenMatrix(doc.scene, imageSize, layout),
+    [doc.scene, imageSize, layout]
+  );
+
+  // Mirror the JS-thread matrix into the shared value for worklet reads.
+  useEffect(() => {
+    matrixSV.value = matrix;
+  }, [matrix, matrixSV]);
+
+  const value = useMemo<EditorContextValue>(
+    () => ({
+      state,
+      dispatch,
+      doc,
+      annotations: doc.annotations,
+      canUndo: canUndo(state),
+      canRedo: canRedo(state),
+      tool,
+      setTool,
+      selectedId,
+      setSelectedId,
+      strokeColor,
+      setStrokeColor,
+      textColor,
+      setTextColor,
+      strokeWidth,
+      setStrokeWidth,
+      palette,
+      editingTextId,
+      setEditingTextId,
+      layout,
+      setLayout,
+      imageSize,
+      matrix,
+      matrixSV,
+      draw: {
+        active: drawActive,
+        start: drawStart,
+        current: drawCurrent,
+        points: drawPoints,
+      },
+      live: {
+        active: liveActive,
+        tx: liveTx,
+        ty: liveTy,
+        rotate: liveRotate,
+        scale: liveScale,
+        origin: liveOrigin,
+      },
+      cropRectSV,
+    }),
+    // Shared values are stable refs; only re-memoize on JS-state changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      state,
+      doc,
+      tool,
+      selectedId,
+      strokeColor,
+      textColor,
+      strokeWidth,
+      palette,
+      editingTextId,
+      layout,
+      imageSize,
+      matrix,
+    ]
+  );
+
+  return (
+    <EditorContext.Provider value={value}>{children}</EditorContext.Provider>
+  );
+}

package/src/export/drawScene.ts

@@ -0,0 +1,120 @@
+import {
+  PaintStyle,
+  Skia,
+  StrokeCap,
+  StrokeJoin,
+  matchFont,
+} from '@shopify/react-native-skia';
+import type { SkCanvas, SkImage } from '@shopify/react-native-skia';
+
+import type { Annotation } from '../types';
+import { sortedByZ } from '../state/selectors';
+import { annotationCenter, buildArrowPath, buildFreehandPath } from '../annotations/geometry';
+import { withOpacity } from '../utils/color';
+
+const RAD_TO_DEG = 180 / Math.PI;
+
+/**
+ * Imperative draw of the base image + all annotations onto `canvas`, in IMAGE
+ * space. Shared by the off-screen export path. Mirrors the declarative on-screen
+ * renderers (same geometry, same rotation-about-center), so exports match the
+ * preview. The caller sets up the output transform + clip before calling this.
+ */
+export function drawScene(
+  canvas: SkCanvas,
+  image: SkImage,
+  annotations: Annotation[]
+): void {
+  canvas.drawImage(image, 0, 0);
+  for (const a of sortedByZ(annotations)) {
+    drawAnnotation(canvas, a);
+  }
+}
+
+function strokePaint(color: string, width: number) {
+  const paint = Skia.Paint();
+  paint.setColor(Skia.Color(color));
+  paint.setStyle(PaintStyle.Stroke);
+  paint.setStrokeWidth(width);
+  paint.setAntiAlias(true);
+  paint.setStrokeCap(StrokeCap.Round);
+  paint.setStrokeJoin(StrokeJoin.Round);
+  return paint;
+}
+
+function fillPaint(color: string) {
+  const paint = Skia.Paint();
+  paint.setColor(Skia.Color(color));
+  paint.setStyle(PaintStyle.Fill);
+  paint.setAntiAlias(true);
+  return paint;
+}
+
+function drawAnnotation(canvas: SkCanvas, a: Annotation): void {
+  const center = annotationCenter(a);
+  canvas.save();
+  if (a.rotation) {
+    canvas.translate(center.x, center.y);
+    canvas.rotate(a.rotation * RAD_TO_DEG, 0, 0);
+    canvas.translate(-center.x, -center.y);
+  }
+
+  switch (a.type) {
+    case 'circle': {
+      if (a.fill) {
+        canvas.drawCircle(a.center.x, a.center.y, a.radius, fillPaint(a.fill));
+      }
+      canvas.drawCircle(
+        a.center.x,
+        a.center.y,
+        a.radius,
+        strokePaint(a.strokeColor, a.strokeWidth)
+      );
+      break;
+    }
+    case 'arrow': {
+      const path = buildArrowPath(a.start, a.end, a.headSize);
+      canvas.drawPath(path, strokePaint(a.strokeColor, a.strokeWidth));
+      path.dispose?.();
+      break;
+    }
+    case 'marker': {
+      const rect = Skia.XYWHRect(
+        a.rect.x,
+        a.rect.y,
+        a.rect.width,
+        a.rect.height
+      );
+      canvas.drawRect(rect, fillPaint(withOpacity(a.color, a.opacity)));
+      break;
+    }
+    case 'freehand': {
+      const path = buildFreehandPath(a.points);
+      canvas.drawPath(path, strokePaint(a.strokeColor, a.strokeWidth));
+      path.dispose?.();
+      break;
+    }
+    case 'text': {
+      const font = matchFont({
+        fontFamily: 'sans-serif',
+        fontSize: a.fontSize,
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+      });
+      const paint = fillPaint(a.color);
+      const lineHeight = a.fontSize * 1.2;
+      a.text.split('\n').forEach((line, i) => {
+        canvas.drawText(
+          line,
+          a.origin.x,
+          a.origin.y + a.fontSize + i * lineHeight,
+          paint,
+          font
+        );
+      });
+      break;
+    }
+  }
+
+  canvas.restore();
+}

package/src/export/exportImage.ts

@@ -0,0 +1,111 @@
+import { ClipOp, ImageFormat, Skia } from '@shopify/react-native-skia';
+import type { SkImage } from '@shopify/react-native-skia';
+
+import type { Annotation, ExportOptions, Rect, SceneTransform } from '../types';
+import { clampSizeToMax } from '../utils/math';
+import { drawScene } from './drawScene';
+import { safeDispose } from '../image/disposeRegistry';
+
+const RAD_TO_DEG = 180 / Math.PI;
+
+export interface ExportParams {
+  image: SkImage;
+  annotations: Annotation[];
+  scene: SceneTransform;
+  imageWidth: number;
+  imageHeight: number;
+  options?: ExportOptions;
+}
+
+/**
+ * Render the scene OFF-SCREEN at full resolution and return base64.
+ *
+ * Output = the (optionally cropped) image + annotations, scaled by `scene.scale`
+ * and rotated by `scene.rotation`, on a surface sized to the rotated content's
+ * bounding box (transparent corners for PNG). Because annotations live in image
+ * space, no per-annotation rescaling is needed — the exact preview geometry is
+ * drawn at native resolution.
+ *
+ * All Skia objects created here (surface + snapshot) are disposed before return.
+ */
+export async function exportImage(params: ExportParams): Promise<string> {
+  const { image, annotations, scene, imageWidth, imageHeight, options } = params;
+  const format = options?.format ?? 'png';
+  const quality = options?.quality ?? 100;
+  const dataUri = options?.dataUri ?? true;
+
+  const src: Rect = scene.cropRect ?? {
+    x: 0,
+    y: 0,
+    width: imageWidth,
+    height: imageHeight,
+  };
+
+  const contentW = src.width * scene.scale;
+  const contentH = src.height * scene.scale;
+  const absCos = Math.abs(Math.cos(scene.rotation));
+  const absSin = Math.abs(Math.sin(scene.rotation));
+  const rotatedW = contentW * absCos + contentH * absSin;
+  const rotatedH = contentW * absSin + contentH * absCos;
+
+  const clamped = clampSizeToMax(
+    Math.max(1, Math.ceil(rotatedW)),
+    Math.max(1, Math.ceil(rotatedH)),
+    options?.maxExportSize
+  );
+  // Reduce the drawing scale by the same factor the clamp shrank the surface.
+  const clampFactor = clamped.width / Math.max(1, Math.ceil(rotatedW));
+  const drawScale = scene.scale * clampFactor;
+
+  const surface = Skia.Surface.MakeOffscreen(clamped.width, clamped.height);
+  if (!surface) {
+    throw new Error(
+      'Skia.Surface.MakeOffscreen returned null — offscreen export unavailable on this device/version.'
+    );
+  }
+
+  let snapshot: SkImage | null = null;
+  try {
+    const canvas = surface.getCanvas();
+    const srcCenter = {
+      x: src.x + src.width / 2,
+      y: src.y + src.height / 2,
+    };
+    canvas.save();
+    canvas.translate(clamped.width / 2, clamped.height / 2);
+    if (scene.rotation) {
+      canvas.rotate(scene.rotation * RAD_TO_DEG, 0, 0);
+    }
+    canvas.scale(drawScale, drawScale);
+    canvas.translate(-srcCenter.x, -srcCenter.y);
+    // Clip to the crop region so only the selected area is drawn.
+    canvas.clipRect(
+      Skia.XYWHRect(src.x, src.y, src.width, src.height),
+      ClipOp.Intersect,
+      true
+    );
+    drawScene(canvas, image, annotations);
+    canvas.restore();
+
+    surface.flush();
+    snapshot = surface.makeImageSnapshot();
+    const skFormat = format === 'jpeg' ? ImageFormat.JPEG : ImageFormat.PNG;
+    const base64 = snapshot.encodeToBase64(skFormat, quality);
+
+    // File output: write the raw base64 via the caller-supplied writer.
+    if (options?.output === 'file') {
+      if (!options.filePath || !options.writeFile) {
+        throw new Error(
+          "exportImage: output:'file' requires both `filePath` and `writeFile`."
+        );
+      }
+      await options.writeFile(options.filePath, base64);
+      return options.filePath;
+    }
+
+    return dataUri ? `data:image/${format};base64,${base64}` : base64;
+  } finally {
+    safeDispose(snapshot);
+    safeDispose(surface);
+  }
+}

package/src/gestures/applyTransform.ts

@@ -0,0 +1,76 @@
+import type { Annotation, Vec2 } from '../types';
+
+export interface LiveValues {
+  tx: number;
+  ty: number;
+  rotate: number;
+  scale: number;
+  origin: Vec2;
+}
+
+/**
+ * Bake a live move/resize/rotate transform into an annotation's stored geometry.
+ * This MUST match the on-screen preview (AnnotationLayer applies, in order:
+ * translate → rotate(about origin) → scale(about origin)). Rotation is folded
+ * into the annotation's `rotation` field (also about its center), so only scale
+ * and translate touch geometry here.
+ */
+export function applyTransformToAnnotation(
+  a: Annotation,
+  live: LiveValues
+): Annotation {
+  const { scale: s, origin: o, tx, ty, rotate } = live;
+  const map = (p: Vec2): Vec2 => ({
+    x: o.x + (p.x - o.x) * s + tx,
+    y: o.y + (p.y - o.y) * s + ty,
+  });
+  const rotation = a.rotation + rotate;
+
+  switch (a.type) {
+    case 'circle':
+      return {
+        ...a,
+        center: map(a.center),
+        radius: a.radius * s,
+        strokeWidth: a.strokeWidth * s,
+        rotation,
+      };
+    case 'arrow':
+      return {
+        ...a,
+        start: map(a.start),
+        end: map(a.end),
+        headSize: a.headSize * s,
+        strokeWidth: a.strokeWidth * s,
+        rotation,
+      };
+    case 'marker': {
+      const tl = map({ x: a.rect.x, y: a.rect.y });
+      return {
+        ...a,
+        rect: {
+          x: tl.x,
+          y: tl.y,
+          width: a.rect.width * s,
+          height: a.rect.height * s,
+        },
+        rotation,
+      };
+    }
+    case 'freehand':
+      return {
+        ...a,
+        points: a.points.map(map),
+        strokeWidth: a.strokeWidth * s,
+        rotation,
+      };
+    case 'text':
+      return {
+        ...a,
+        origin: map(a.origin),
+        fontSize: a.fontSize * s,
+        width: a.width * s,
+        rotation,
+      };
+  }
+}

package/src/gestures/createAnnotation.ts

@@ -0,0 +1,92 @@
+import type {
+  Annotation,
+  ColorString,
+  Rect,
+  TextAnnotation,
+  Vec2,
+} from '../types';
+import {
+  ARROW_HEAD_RATIO,
+  DEFAULT_FONT_SIZE,
+  DEFAULT_TEXT_WIDTH,
+  MARKER_OPACITY,
+} from '../constants';
+import { genId } from '../utils/id';
+
+export interface DrawStyle {
+  strokeColor: ColorString;
+  strokeWidth: number;
+}
+
+export function makeCircle(
+  center: Vec2,
+  radius: number,
+  style: DrawStyle
+): Annotation {
+  return {
+    id: genId('circle'),
+    type: 'circle',
+    rotation: 0,
+    z: 0,
+    center,
+    radius,
+    strokeColor: style.strokeColor,
+    strokeWidth: style.strokeWidth,
+  };
+}
+
+export function makeArrow(start: Vec2, end: Vec2, style: DrawStyle): Annotation {
+  return {
+    id: genId('arrow'),
+    type: 'arrow',
+    rotation: 0,
+    z: 0,
+    start,
+    end,
+    headSize: style.strokeWidth * ARROW_HEAD_RATIO,
+    strokeColor: style.strokeColor,
+    strokeWidth: style.strokeWidth,
+  };
+}
+
+export function makeMarker(rect: Rect, color: ColorString): Annotation {
+  return {
+    id: genId('marker'),
+    type: 'marker',
+    rotation: 0,
+    z: 0,
+    rect,
+    color,
+    opacity: MARKER_OPACITY,
+  };
+}
+
+export function makeFreehand(points: Vec2[], style: DrawStyle): Annotation {
+  return {
+    id: genId('freehand'),
+    type: 'freehand',
+    rotation: 0,
+    z: 0,
+    points,
+    strokeColor: style.strokeColor,
+    strokeWidth: style.strokeWidth,
+  };
+}
+
+export function makeText(
+  origin: Vec2,
+  color: ColorString,
+  fontSize = DEFAULT_FONT_SIZE
+): TextAnnotation {
+  return {
+    id: genId('text'),
+    type: 'text',
+    rotation: 0,
+    z: 0,
+    origin,
+    text: '',
+    color,
+    fontSize,
+    width: DEFAULT_TEXT_WIDTH,
+  };
+}

package/src/gestures/handles.ts

@@ -0,0 +1,50 @@
+import type { Annotation, Vec2 } from '../types';
+import { annotationBounds, annotationCenter } from '../annotations/geometryPure';
+import { ROTATE_HANDLE_OFFSET } from '../constants';
+import { applyToPoint, rotatePoint } from '../utils/math';
+import type { Mat } from '../utils/math';
+
+export interface SelectionHandles {
+  /** Corner handles in SCREEN space: top-left, top-right, bottom-right, bottom-left. */
+  corners: [Vec2, Vec2, Vec2, Vec2];
+  /** Rotate handle in screen space (above the top edge). */
+  rotate: Vec2;
+  /** Annotation center in screen space. */
+  center: Vec2;
+}
+
+/**
+ * Compute selection-box handle positions in SCREEN space for annotation `a`,
+ * accounting for its rotation and the current image→screen matrix. Worklet-safe
+ * (used by the transform gesture) and also callable from JS (SelectionOverlay).
+ */
+export function selectionHandles(a: Annotation, matrix: Mat): SelectionHandles {
+  'worklet';
+  const b = annotationBounds(a);
+  const center = annotationCenter(a);
+  const localCorners: Vec2[] = [
+    { x: b.x, y: b.y },
+    { x: b.x + b.width, y: b.y },
+    { x: b.x + b.width, y: b.y + b.height },
+    { x: b.x, y: b.y + b.height },
+  ];
+  const screenCorners = localCorners.map((c) =>
+    applyToPoint(matrix, rotatePoint(c, center, a.rotation))
+  ) as [Vec2, Vec2, Vec2, Vec2];
+
+  const centerScreen = applyToPoint(matrix, center);
+  const topMid = {
+    x: (screenCorners[0].x + screenCorners[1].x) / 2,
+    y: (screenCorners[0].y + screenCorners[1].y) / 2,
+  };
+  // Push the rotate handle outward from center along the top-edge direction.
+  const dx = topMid.x - centerScreen.x;
+  const dy = topMid.y - centerScreen.y;
+  const len = Math.hypot(dx, dy) || 1;
+  const rotate = {
+    x: topMid.x + (dx / len) * ROTATE_HANDLE_OFFSET,
+    y: topMid.y + (dy / len) * ROTATE_HANDLE_OFFSET,
+  };
+
+  return { corners: screenCorners, rotate, center: centerScreen };
+}