react-native-image-editor-skia 0.1.0

package/src/index.ts

@@ -0,0 +1,32 @@
+export { ImageEditor } from './ImageEditor';
+
+export type {
+  ImageEditorProps,
+  ImageEditorRef,
+  ImageSource,
+  ExportOptions,
+  WriteFileFn,
+  OutputFormat,
+  Annotation,
+  AnnotationType,
+  CircleAnnotation,
+  ArrowAnnotation,
+  MarkerAnnotation,
+  FreehandAnnotation,
+  TextAnnotation,
+  SceneTransform,
+  ToolType,
+  ColorString,
+  Vec2,
+  Rect,
+} from './types';
+
+// Advanced: build a custom UI on top of the editor state/context.
+export { EditorProvider, useEditor } from './context/EditorContext';
+export { exportImage } from './export/exportImage';
+
+export {
+  DEFAULT_PALETTE,
+  DEFAULT_STROKE_COLOR,
+  DEFAULT_TEXT_COLOR,
+} from './constants';

package/src/state/history.ts

@@ -0,0 +1,71 @@
+import { MAX_HISTORY } from '../constants';
+
+/**
+ * Generic, pure undo/redo history over an immutable document `T`.
+ * Snapshots are cheap here because the document is plain JSON (annotations +
+ * scene transform) — it never contains image bytes.
+ */
+export interface History<T> {
+  past: T[];
+  present: T;
+  future: T[];
+}
+
+export function initHistory<T>(present: T): History<T> {
+  return { past: [], present, future: [] };
+}
+
+/** Replace the present, pushing the old present onto the undo stack. */
+export function commit<T>(history: History<T>, next: T): History<T> {
+  if (next === history.present) {
+    return history;
+  }
+  const past = [...history.past, history.present];
+  // Cap the depth to bound memory.
+  if (past.length > MAX_HISTORY) {
+    past.shift();
+  }
+  return { past, present: next, future: [] };
+}
+
+/**
+ * Replace the present WITHOUT creating a history entry — used for live edits
+ * (e.g. typing in a text box) that should collapse into the eventual commit.
+ */
+export function replacePresent<T>(history: History<T>, next: T): History<T> {
+  return { ...history, present: next };
+}
+
+export function undo<T>(history: History<T>): History<T> {
+  if (history.past.length === 0) {
+    return history;
+  }
+  const previous = history.past[history.past.length - 1]!;
+  const past = history.past.slice(0, -1);
+  return {
+    past,
+    present: previous,
+    future: [history.present, ...history.future],
+  };
+}
+
+export function redo<T>(history: History<T>): History<T> {
+  if (history.future.length === 0) {
+    return history;
+  }
+  const next = history.future[0]!;
+  const future = history.future.slice(1);
+  return {
+    past: [...history.past, history.present],
+    present: next,
+    future,
+  };
+}
+
+export function canUndo<T>(history: History<T>): boolean {
+  return history.past.length > 0;
+}
+
+export function canRedo<T>(history: History<T>): boolean {
+  return history.future.length > 0;
+}

package/src/state/selectors.ts

@@ -0,0 +1,16 @@
+import type { Annotation } from '../types';
+
+export function getAnnotationById(
+  annotations: Annotation[],
+  id: string | null
+): Annotation | undefined {
+  if (!id) {
+    return undefined;
+  }
+  return annotations.find((a) => a.id === id);
+}
+
+/** Annotations in paint order (ascending z). */
+export function sortedByZ(annotations: Annotation[]): Annotation[] {
+  return [...annotations].sort((a, b) => a.z - b.z);
+}

package/src/state/useEditorReducer.ts

@@ -0,0 +1,93 @@
+import { useReducer } from 'react';
+
+import type { Annotation, EditorDocument, SceneTransform } from '../types';
+import { IDENTITY_SCENE } from '../types';
+import {
+  commit,
+  initHistory,
+  redo as redoHistory,
+  replacePresent,
+  undo as undoHistory,
+} from './history';
+import type { History } from './history';
+
+export type EditorAction =
+  | { type: 'ADD_ANNOTATION'; annotation: Annotation }
+  | {
+      type: 'UPDATE_ANNOTATION';
+      id: string;
+      changes: Partial<Annotation>;
+      /** When true, does not create a history entry (live edit). */
+      transient?: boolean;
+    }
+  | { type: 'DELETE_ANNOTATION'; id: string }
+  | {
+      type: 'SET_SCENE';
+      changes: Partial<SceneTransform>;
+      /** When true, does not create a history entry (live slider drag). */
+      transient?: boolean;
+    }
+  | { type: 'REPLACE'; document: EditorDocument }
+  | { type: 'RESET' }
+  | { type: 'UNDO' }
+  | { type: 'REDO' };
+
+export type EditorState = History<EditorDocument>;
+
+const EMPTY_DOCUMENT: EditorDocument = {
+  annotations: [],
+  scene: IDENTITY_SCENE,
+};
+
+function nextZ(annotations: Annotation[]): number {
+  return annotations.reduce((max, a) => Math.max(max, a.z), 0) + 1;
+}
+
+function reducer(state: EditorState, action: EditorAction): EditorState {
+  const doc = state.present;
+  switch (action.type) {
+    case 'ADD_ANNOTATION': {
+      const annotation = { ...action.annotation, z: nextZ(doc.annotations) };
+      return commit(state, {
+        ...doc,
+        annotations: [...doc.annotations, annotation],
+      });
+    }
+    case 'UPDATE_ANNOTATION': {
+      const annotations = doc.annotations.map((a) =>
+        a.id === action.id ? ({ ...a, ...action.changes } as Annotation) : a
+      );
+      const next = { ...doc, annotations };
+      return action.transient ? replacePresent(state, next) : commit(state, next);
+    }
+    case 'DELETE_ANNOTATION': {
+      return commit(state, {
+        ...doc,
+        annotations: doc.annotations.filter((a) => a.id !== action.id),
+      });
+    }
+    case 'SET_SCENE': {
+      const next = { ...doc, scene: { ...doc.scene, ...action.changes } };
+      return action.transient ? replacePresent(state, next) : commit(state, next);
+    }
+    case 'REPLACE': {
+      return commit(state, action.document);
+    }
+    case 'RESET': {
+      return commit(state, EMPTY_DOCUMENT);
+    }
+    case 'UNDO':
+      return undoHistory(state);
+    case 'REDO':
+      return redoHistory(state);
+    default:
+      return state;
+  }
+}
+
+export function useEditorReducer(initial?: Partial<EditorDocument>) {
+  return useReducer(
+    reducer,
+    initHistory<EditorDocument>({ ...EMPTY_DOCUMENT, ...initial })
+  );
+}

package/src/toolbar/ColorPicker.tsx

@@ -0,0 +1,72 @@
+import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
+
+import { useEditor } from '../context/EditorContext';
+import { getAnnotationById } from '../state/selectors';
+import type { ColorString } from '../types';
+
+/**
+ * Horizontal swatch strip. Picking a color sets the "current" color used for new
+ * shapes and, if an annotation is selected, recolors it (the right field per
+ * type). While editing text, it also updates the live text color.
+ */
+export function ColorPicker() {
+  const {
+    palette,
+    strokeColor,
+    setStrokeColor,
+    setTextColor,
+    selectedId,
+    editingTextId,
+    annotations,
+    dispatch,
+  } = useEditor();
+
+  const onPick = (color: ColorString) => {
+    setStrokeColor(color);
+    setTextColor(color);
+    const target = getAnnotationById(annotations, editingTextId ?? selectedId);
+    if (target) {
+      if (target.type === 'text' || target.type === 'marker') {
+        dispatch({ type: 'UPDATE_ANNOTATION', id: target.id, changes: { color } });
+      } else {
+        dispatch({
+          type: 'UPDATE_ANNOTATION',
+          id: target.id,
+          changes: { strokeColor: color },
+        });
+      }
+    }
+  };
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={styles.row}
+    >
+      {palette.map((color) => (
+        <Pressable key={color} onPress={() => onPick(color)} hitSlop={4}>
+          <View
+            style={[
+              styles.swatch,
+              { backgroundColor: color },
+              color === strokeColor && styles.selected,
+            ]}
+          />
+        </Pressable>
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { alignItems: 'center', paddingHorizontal: 8, gap: 8 },
+  swatch: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    borderWidth: 2,
+    borderColor: 'rgba(255,255,255,0.5)',
+  },
+  selected: { borderColor: '#FFFFFF', borderWidth: 3 },
+});

package/src/toolbar/CropControls.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet, View } from 'react-native';
+
+import { useEditor } from '../context/EditorContext';
+import { ToolButton } from './ToolButton';
+
+/** Apply / reset / cancel controls shown while the crop tool is active. */
+export function CropControls() {
+  const { cropRectSV, dispatch, setTool, imageSize } = useEditor();
+
+  const apply = () => {
+    const r = cropRectSV.value;
+    // Ignore a degenerate crop.
+    const isFull =
+      r.x <= 0 &&
+      r.y <= 0 &&
+      r.width >= imageSize.width &&
+      r.height >= imageSize.height;
+    dispatch({
+      type: 'SET_SCENE',
+      changes: { cropRect: isFull ? null : { ...r } },
+    });
+    setTool('select');
+  };
+
+  const reset = () => {
+    dispatch({ type: 'SET_SCENE', changes: { cropRect: null } });
+    setTool('select');
+  };
+
+  return (
+    <View style={styles.row}>
+      <ToolButton label="✕ Cancel" onPress={() => setTool('select')} />
+      <ToolButton label="↺ Reset" onPress={reset} />
+      <ToolButton label="✓ Apply" active onPress={apply} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 6,
+  },
+});

package/src/toolbar/RotationSlider.tsx

@@ -0,0 +1,56 @@
+import { StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { runOnJS, useSharedValue } from 'react-native-reanimated';
+
+import { useEditor } from '../context/EditorContext';
+
+const SENSITIVITY = 0.006; // radians per pixel dragged
+
+/**
+ * Drag left/right anywhere on the bar to rotate the whole image to ANY angle.
+ * Updates are transient during the drag (no history spam) and committed on
+ * release. Double-nothing here is fine — the scene re-renders, but rotation is
+ * an occasional interaction.
+ */
+export function RotationSlider() {
+  const { doc, dispatch } = useEditor();
+  const startRotation = useSharedValue(0);
+  const rotationDeg = Math.round((doc.scene.rotation * 180) / Math.PI);
+
+  const setScene = (rotation: number, transient: boolean) =>
+    dispatch({ type: 'SET_SCENE', changes: { rotation }, transient });
+
+  const pan = Gesture.Pan()
+    .onBegin(() => {
+      'worklet';
+      startRotation.value = doc.scene.rotation;
+    })
+    .onChange((e) => {
+      'worklet';
+      runOnJS(setScene)(startRotation.value + e.translationX * SENSITIVITY, true);
+    })
+    .onEnd((e) => {
+      'worklet';
+      runOnJS(setScene)(startRotation.value + e.translationX * SENSITIVITY, false);
+    });
+
+  return (
+    <GestureDetector gesture={pan}>
+      <View style={styles.bar}>
+        <Text style={styles.label}>⟲ Rotate  {rotationDeg}°  ⟳</Text>
+      </View>
+    </GestureDetector>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255,255,255,0.12)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 8,
+  },
+  label: { color: '#FFFFFF', fontSize: 14, fontWeight: '600' },
+});

package/src/toolbar/TextInputOverlay.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+
+import { useEditor } from '../context/EditorContext';
+import { getAnnotationById } from '../state/selectors';
+import { applyToPoint } from '../utils/math';
+
+/**
+ * Native TextInput overlaid on the text annotation being edited. Skia can't
+ * accept keyboard input, so we edit here and mirror the string back into the
+ * annotation (transient updates while typing; a committed update on blur). The
+ * Skia text for this annotation is hidden while editing (see AnnotationLayer).
+ * Positioning ignores rotation for simplicity.
+ */
+export function TextInputOverlay() {
+  const {
+    editingTextId,
+    setEditingTextId,
+    annotations,
+    dispatch,
+    matrix,
+    setSelectedId,
+  } = useEditor();
+
+  const target = getAnnotationById(annotations, editingTextId);
+  const isText = target?.type === 'text' ? target : null;
+  const inputRef = useRef<TextInput>(null);
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    if (isText) {
+      setValue(isText.text);
+      const t = setTimeout(() => inputRef.current?.focus(), 50);
+      return () => clearTimeout(t);
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editingTextId]);
+
+  if (!isText) {
+    return null;
+  }
+
+  const scaleFactor = Math.hypot(matrix.a, matrix.b) || 1;
+  const screen = applyToPoint(matrix, isText.origin);
+  const fontSize = isText.fontSize * scaleFactor;
+  const width = isText.width * scaleFactor;
+
+  const onChange = (text: string) => {
+    setValue(text);
+    dispatch({
+      type: 'UPDATE_ANNOTATION',
+      id: isText.id,
+      changes: { text },
+      transient: true,
+    });
+  };
+
+  const onDone = () => {
+    const trimmed = value.trim();
+    if (trimmed.length === 0) {
+      dispatch({ type: 'DELETE_ANNOTATION', id: isText.id });
+      setSelectedId(null);
+    } else {
+      // Promote the accumulated transient edits into a single history entry.
+      dispatch({ type: 'UPDATE_ANNOTATION', id: isText.id, changes: { text: value } });
+    }
+    setEditingTextId(null);
+  };
+
+  return (
+    <TextInput
+      ref={inputRef}
+      value={value}
+      onChangeText={onChange}
+      onBlur={onDone}
+      onSubmitEditing={onDone}
+      multiline
+      blurOnSubmit
+      style={[
+        styles.input,
+        {
+          left: screen.x,
+          top: screen.y,
+          width: Math.max(width, 80),
+          fontSize,
+          color: isText.color,
+          lineHeight: fontSize * 1.2,
+        },
+      ]}
+      placeholder="Text"
+      placeholderTextColor="rgba(255,255,255,0.5)"
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  input: {
+    position: 'absolute',
+    padding: 0,
+    margin: 0,
+    textAlignVertical: 'top',
+  },
+});

package/src/toolbar/ToolButton.tsx

@@ -0,0 +1,46 @@
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+export function ToolButton({
+  label,
+  active,
+  disabled,
+  onPress,
+}: {
+  label: string;
+  active?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        styles.button,
+        active && styles.active,
+        disabled && styles.disabled,
+        pressed && styles.pressed,
+      ]}
+      hitSlop={6}
+    >
+      <Text style={[styles.label, active && styles.activeLabel]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 44,
+    height: 44,
+    paddingHorizontal: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    marginHorizontal: 2,
+  },
+  active: { backgroundColor: '#1E90FF' },
+  disabled: { opacity: 0.35 },
+  pressed: { opacity: 0.6 },
+  label: { color: '#FFFFFF', fontSize: 18 },
+  activeLabel: { color: '#FFFFFF', fontWeight: '700' },
+});

package/src/toolbar/Toolbar.tsx

@@ -0,0 +1,110 @@
+import { StyleSheet, View } from 'react-native';
+
+import { useEditor } from '../context/EditorContext';
+import type { ToolType } from '../types';
+import { ToolButton } from './ToolButton';
+import { ColorPicker } from './ColorPicker';
+import { CropControls } from './CropControls';
+import { RotationSlider } from './RotationSlider';
+
+const TOOLS: { tool: ToolType; label: string }[] = [
+  { tool: 'select', label: '⇱' },
+  { tool: 'circle', label: '◯' },
+  { tool: 'arrow', label: '↗' },
+  { tool: 'marker', label: '▬' },
+  { tool: 'freehand', label: '✎' },
+  { tool: 'text', label: 'T' },
+  { tool: 'crop', label: '⛶' },
+];
+
+export function Toolbar({ onDone }: { onDone?: () => void }) {
+  const {
+    tool,
+    setTool,
+    selectedId,
+    setSelectedId,
+    canUndo,
+    canRedo,
+    dispatch,
+    doc,
+  } = useEditor();
+
+  const cropping = tool === 'crop';
+
+  const deleteSelected = () => {
+    if (selectedId) {
+      dispatch({ type: 'DELETE_ANNOTATION', id: selectedId });
+      setSelectedId(null);
+    }
+  };
+
+  const bumpScale = (delta: number) => {
+    const next = Math.max(0.1, Math.min(4, doc.scene.scale + delta));
+    dispatch({ type: 'SET_SCENE', changes: { scale: next } });
+  };
+
+  return (
+    <View style={styles.container}>
+      {cropping ? (
+        <>
+          <RotationSlider />
+          <CropControls />
+        </>
+      ) : (
+        <>
+          <View style={styles.topRow}>
+            <ToolButton label="↶" disabled={!canUndo} onPress={() => dispatch({ type: 'UNDO' })} />
+            <ToolButton label="↷" disabled={!canRedo} onPress={() => dispatch({ type: 'REDO' })} />
+            <ToolButton label="−" onPress={() => bumpScale(-0.1)} />
+            <ToolButton label="+" onPress={() => bumpScale(0.1)} />
+            <ToolButton
+              label="🗑"
+              disabled={!selectedId}
+              onPress={deleteSelected}
+            />
+            {onDone ? <ToolButton label="Done" active onPress={onDone} /> : null}
+          </View>
+
+          <RotationSlider />
+          <ColorPicker />
+
+          <View style={styles.toolRow}>
+            {TOOLS.map((t) => (
+              <ToolButton
+                key={t.tool}
+                label={t.label}
+                active={tool === t.tool}
+                onPress={() => {
+                  setTool(t.tool);
+                  if (t.tool !== 'select') {
+                    setSelectedId(null);
+                  }
+                }}
+              />
+            ))}
+          </View>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#1C1C1E',
+    paddingVertical: 8,
+    gap: 8,
+  },
+  topRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+  },
+  toolRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+  },
+});