react-native-image-editor-skia 0.1.0

package/lib/module/annotations/FreehandAnnotation.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { Path } from '@shopify/react-native-skia';
+import { annotationCenter, buildFreehandPath } from './geometry';
+import { RotatedGroup } from './RotatedGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function FreehandAnnotationView({
+  a
+}) {
+  const path = useMemo(() => buildFreehandPath(a.points), [a.points]);
+  return /*#__PURE__*/_jsx(RotatedGroup, {
+    center: annotationCenter(a),
+    rotation: a.rotation,
+    children: /*#__PURE__*/_jsx(Path, {
+      path: path,
+      color: a.strokeColor,
+      style: "stroke",
+      strokeWidth: a.strokeWidth,
+      strokeCap: "round",
+      strokeJoin: "round"
+    })
+  });
+}
+//# sourceMappingURL=FreehandAnnotation.js.map

package/lib/module/annotations/FreehandAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","Path","annotationCenter","buildFreehandPath","RotatedGroup","jsx","_jsx","FreehandAnnotationView","a","path","points","center","rotation","children","color","strokeColor","style","strokeWidth","strokeCap","strokeJoin"],"sourceRoot":"..\\..\\..\\src","sources":["annotations/FreehandAnnotation.tsx"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,YAAY;AAChE,SAASC,YAAY,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9C,OAAO,SAASC,sBAAsBA,CAAC;EAAEC;AAAiC,CAAC,EAAE;EAC3E,MAAMC,IAAI,GAAGT,OAAO,CAAC,MAAMG,iBAAiB,CAACK,CAAC,CAACE,MAAM,CAAC,EAAE,CAACF,CAAC,CAACE,MAAM,CAAC,CAAC;EACnE,oBACEJ,IAAA,CAACF,YAAY;IAACO,MAAM,EAAET,gBAAgB,CAACM,CAAC,CAAE;IAACI,QAAQ,EAAEJ,CAAC,CAACI,QAAS;IAAAC,QAAA,eAC9DP,IAAA,CAACL,IAAI;MACHQ,IAAI,EAAEA,IAAK;MACXK,KAAK,EAAEN,CAAC,CAACO,WAAY;MACrBC,KAAK,EAAC,QAAQ;MACdC,WAAW,EAAET,CAAC,CAACS,WAAY;MAC3BC,SAAS,EAAC,OAAO;MACjBC,UAAU,EAAC;IAAO,CACnB;EAAC,CACU,CAAC;AAEnB","ignoreList":[]}

package/lib/module/annotations/MarkerAnnotation.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { Rect } from '@shopify/react-native-skia';
+import { annotationCenter } from './geometry';
+import { RotatedGroup } from './RotatedGroup';
+import { withOpacity } from '../utils/color';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function MarkerAnnotationView({
+  a
+}) {
+  return /*#__PURE__*/_jsx(RotatedGroup, {
+    center: annotationCenter(a),
+    rotation: a.rotation,
+    children: /*#__PURE__*/_jsx(Rect, {
+      x: a.rect.x,
+      y: a.rect.y,
+      width: a.rect.width,
+      height: a.rect.height,
+      color: withOpacity(a.color, a.opacity)
+    })
+  });
+}
+//# sourceMappingURL=MarkerAnnotation.js.map

package/lib/module/annotations/MarkerAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Rect","annotationCenter","RotatedGroup","withOpacity","jsx","_jsx","MarkerAnnotationView","a","center","rotation","children","x","rect","y","width","height","color","opacity"],"sourceRoot":"..\\..\\..\\src","sources":["annotations/MarkerAnnotation.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,4BAA4B;AAGjD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,WAAW,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,OAAO,SAASC,oBAAoBA,CAAC;EAAEC;AAA+B,CAAC,EAAE;EACvE,oBACEF,IAAA,CAACH,YAAY;IAACM,MAAM,EAAEP,gBAAgB,CAACM,CAAC,CAAE;IAACE,QAAQ,EAAEF,CAAC,CAACE,QAAS;IAAAC,QAAA,eAC9DL,IAAA,CAACL,IAAI;MACHW,CAAC,EAAEJ,CAAC,CAACK,IAAI,CAACD,CAAE;MACZE,CAAC,EAAEN,CAAC,CAACK,IAAI,CAACC,CAAE;MACZC,KAAK,EAAEP,CAAC,CAACK,IAAI,CAACE,KAAM;MACpBC,MAAM,EAAER,CAAC,CAACK,IAAI,CAACG,MAAO;MACtBC,KAAK,EAAEb,WAAW,CAACI,CAAC,CAACS,KAAK,EAAET,CAAC,CAACU,OAAO;IAAE,CACxC;EAAC,CACU,CAAC;AAEnB","ignoreList":[]}

package/lib/module/annotations/RotatedGroup.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import React from 'react';
+import { Group } from '@shopify/react-native-skia';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Wraps children in a Skia Group rotated by `rotation` radians about `center`.
+ * Every annotation renderer uses this so its stored `rotation` is applied
+ * consistently (and identically in the off-screen export path).
+ */
+export function RotatedGroup({
+  center,
+  rotation,
+  children
+}) {
+  if (!rotation) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(Group, {
+    origin: center,
+    transform: [{
+      rotate: rotation
+    }],
+    children: children
+  });
+}
+//# sourceMappingURL=RotatedGroup.js.map

package/lib/module/annotations/RotatedGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Group","Fragment","_Fragment","jsx","_jsx","RotatedGroup","center","rotation","children","origin","transform","rotate"],"sourceRoot":"..\\..\\..\\src","sources":["annotations/RotatedGroup.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,4BAA4B;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAInD;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAC;EAC3BC,MAAM;EACNC,QAAQ;EACRC;AAKF,CAAC,EAAE;EACD,IAAI,CAACD,QAAQ,EAAE;IACb,oBAAOH,IAAA,CAAAF,SAAA;MAAAM,QAAA,EAAGA;IAAQ,CAAG,CAAC;EACxB;EACA,oBACEJ,IAAA,CAACJ,KAAK;IAACS,MAAM,EAAEH,MAAO;IAACI,SAAS,EAAE,CAAC;MAAEC,MAAM,EAAEJ;IAAS,CAAC,CAAE;IAAAC,QAAA,EACtDA;EAAQ,CACJ,CAAC;AAEZ","ignoreList":[]}

package/lib/module/annotations/TextAnnotation.js

@@ -0,0 +1,37 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { Text, matchFont } from '@shopify/react-native-skia';
+import { annotationCenter } from './geometry';
+import { RotatedGroup } from './RotatedGroup';
+
+/**
+ * Renders text using a system font via `matchFont` (no bundled font file
+ * required). Honors explicit newlines; automatic width-wrapping is intentionally
+ * out of scope for v1 (would require SkParagraph + a shared FontMgr).
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TextAnnotationView({
+  a
+}) {
+  const font = useMemo(() => matchFont({
+    fontFamily: 'sans-serif',
+    fontSize: a.fontSize,
+    fontStyle: 'normal',
+    fontWeight: 'normal'
+  }), [a.fontSize]);
+  const lines = a.text.split('\n');
+  const lineHeight = a.fontSize * 1.2;
+  return /*#__PURE__*/_jsx(RotatedGroup, {
+    center: annotationCenter(a),
+    rotation: a.rotation,
+    children: lines.map((line, i) => /*#__PURE__*/_jsx(Text, {
+      x: a.origin.x,
+      y: a.origin.y + a.fontSize + i * lineHeight,
+      text: line,
+      font: font,
+      color: a.color
+    }, i))
+  });
+}
+//# sourceMappingURL=TextAnnotation.js.map

package/lib/module/annotations/TextAnnotation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","Text","matchFont","annotationCenter","RotatedGroup","jsx","_jsx","TextAnnotationView","a","font","fontFamily","fontSize","fontStyle","fontWeight","lines","text","split","lineHeight","center","rotation","children","map","line","i","x","origin","y","color"],"sourceRoot":"..\\..\\..\\src","sources":["annotations/TextAnnotation.tsx"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,IAAI,EAAEC,SAAS,QAAQ,4BAA4B;AAG5D,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,YAAY,QAAQ,gBAAgB;;AAE7C;AACA;AACA;AACA;AACA;AAJA,SAAAC,GAAA,IAAAC,IAAA;AAKA,OAAO,SAASC,kBAAkBA,CAAC;EAAEC;AAA6B,CAAC,EAAE;EACnE,MAAMC,IAAI,GAAGT,OAAO,CAClB,MACEE,SAAS,CAAC;IACRQ,UAAU,EAAE,YAAY;IACxBC,QAAQ,EAAEH,CAAC,CAACG,QAAQ;IACpBC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE;EACd,CAAC,CAAC,EACJ,CAACL,CAAC,CAACG,QAAQ,CACb,CAAC;EAED,MAAMG,KAAK,GAAGN,CAAC,CAACO,IAAI,CAACC,KAAK,CAAC,IAAI,CAAC;EAChC,MAAMC,UAAU,GAAGT,CAAC,CAACG,QAAQ,GAAG,GAAG;EAEnC,oBACEL,IAAA,CAACF,YAAY;IAACc,MAAM,EAAEf,gBAAgB,CAACK,CAAC,CAAE;IAACW,QAAQ,EAAEX,CAAC,CAACW,QAAS;IAAAC,QAAA,EAC7DN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,kBACjBjB,IAAA,CAACL,IAAI;MAEHuB,CAAC,EAAEhB,CAAC,CAACiB,MAAM,CAACD,CAAE;MACdE,CAAC,EAAElB,CAAC,CAACiB,MAAM,CAACC,CAAC,GAAGlB,CAAC,CAACG,QAAQ,GAAGY,CAAC,GAAGN,UAAW;MAC5CF,IAAI,EAAEO,IAAK;MACXb,IAAI,EAAEA,IAAK;MACXkB,KAAK,EAAEnB,CAAC,CAACmB;IAAM,GALVJ,CAMN,CACF;EAAC,CACU,CAAC;AAEnB","ignoreList":[]}

package/lib/module/annotations/geometry.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import { Skia } from '@shopify/react-native-skia';
+// Re-export the pure helpers so existing imports from './geometry' keep working.
+// (Worklet/test-safe versions with no Skia dependency live in ./geometryPure.)
+export { annotationCenter, annotationBounds } from './geometryPure';
+
+/**
+ * Build a Skia path for an arrow (shaft + two arrowhead barbs).
+ * Not a worklet — it allocates an `SkPath` (a Skia object) on the JS thread.
+ */
+export function buildArrowPath(start, end, headSize) {
+  const path = Skia.Path.Make();
+  path.moveTo(start.x, start.y);
+  path.lineTo(end.x, end.y);
+  const angle = Math.atan2(end.y - start.y, end.x - start.x);
+  const barb = Math.PI * 5 / 6; // 150° from the shaft direction
+  const b1 = {
+    x: end.x + headSize * Math.cos(angle + barb),
+    y: end.y + headSize * Math.sin(angle + barb)
+  };
+  const b2 = {
+    x: end.x + headSize * Math.cos(angle - barb),
+    y: end.y + headSize * Math.sin(angle - barb)
+  };
+  path.moveTo(end.x, end.y);
+  path.lineTo(b1.x, b1.y);
+  path.moveTo(end.x, end.y);
+  path.lineTo(b2.x, b2.y);
+  return path;
+}
+
+/** Build a smoothed (quadratic) path through freehand points. */
+export function buildFreehandPath(points) {
+  const path = Skia.Path.Make();
+  if (points.length === 0) {
+    return path;
+  }
+  path.moveTo(points[0].x, points[0].y);
+  if (points.length === 1) {
+    // Draw a dot.
+    path.lineTo(points[0].x + 0.01, points[0].y + 0.01);
+    return path;
+  }
+  for (let i = 1; i < points.length - 1; i++) {
+    const p = points[i];
+    const next = points[i + 1];
+    const midX = (p.x + next.x) / 2;
+    const midY = (p.y + next.y) / 2;
+    path.quadTo(p.x, p.y, midX, midY);
+  }
+  const last = points[points.length - 1];
+  path.lineTo(last.x, last.y);
+  return path;
+}
+//# sourceMappingURL=geometry.js.map

package/lib/module/annotations/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skia","annotationCenter","annotationBounds","buildArrowPath","start","end","headSize","path","Path","Make","moveTo","x","y","lineTo","angle","Math","atan2","barb","PI","b1","cos","sin","b2","buildFreehandPath","points","length","i","p","next","midX","midY","quadTo","last"],"sourceRoot":"..\\..\\..\\src","sources":["annotations/geometry.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/annotations/geometryPure.js

@@ -0,0 +1,100 @@
+"use strict";
+
+/**
+ * Pure annotation geometry (no Skia imports) so it is safe to use from worklets
+ * AND from plain unit tests without loading the native Skia module.
+ */
+
+import { boundsOfPoints } from '../utils/math';
+
+/** Center of an annotation in image space (used as rotation/scale origin). */
+export function annotationCenter(a) {
+  'worklet';
+
+  switch (a.type) {
+    case 'circle':
+      return {
+        x: a.center.x,
+        y: a.center.y
+      };
+    case 'arrow':
+      return {
+        x: (a.start.x + a.end.x) / 2,
+        y: (a.start.y + a.end.y) / 2
+      };
+    case 'marker':
+      return {
+        x: a.rect.x + a.rect.width / 2,
+        y: a.rect.y + a.rect.height / 2
+      };
+    case 'freehand':
+      {
+        const b = boundsOfPoints(a.points);
+        return {
+          x: b.x + b.width / 2,
+          y: b.y + b.height / 2
+        };
+      }
+    case 'text':
+      return {
+        x: a.origin.x + a.width / 2,
+        y: a.origin.y + a.fontSize * 1.2 / 2
+      };
+  }
+}
+
+/**
+ * Axis-aligned bounding box of an annotation in its LOCAL (unrotated) frame.
+ * The selection overlay rotates this box by `annotation.rotation` about the
+ * center when drawing handles.
+ */
+export function annotationBounds(a) {
+  'worklet';
+
+  switch (a.type) {
+    case 'circle':
+      return {
+        x: a.center.x - a.radius,
+        y: a.center.y - a.radius,
+        width: a.radius * 2,
+        height: a.radius * 2
+      };
+    case 'arrow':
+      {
+        const pad = a.headSize + a.strokeWidth;
+        const minX = Math.min(a.start.x, a.end.x) - pad;
+        const minY = Math.min(a.start.y, a.end.y) - pad;
+        const maxX = Math.max(a.start.x, a.end.x) + pad;
+        const maxY = Math.max(a.start.y, a.end.y) + pad;
+        return {
+          x: minX,
+          y: minY,
+          width: maxX - minX,
+          height: maxY - minY
+        };
+      }
+    case 'marker':
+      return {
+        ...a.rect
+      };
+    case 'freehand':
+      {
+        const b = boundsOfPoints(a.points);
+        const pad = a.strokeWidth / 2;
+        return {
+          x: b.x - pad,
+          y: b.y - pad,
+          width: b.width + pad * 2,
+          height: b.height + pad * 2
+        };
+      }
+    case 'text':
+      return {
+        x: a.origin.x,
+        y: a.origin.y,
+        width: a.width,
+        height: a.fontSize * 1.2
+      };
+  }
+}
+//# sourceMappingURL=geometryPure.js.map

package/lib/module/annotations/geometryPure.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["boundsOfPoints","annotationCenter","a","type","x","center","y","start","end","rect","width","height","b","points","origin","fontSize","annotationBounds","radius","pad","headSize","strokeWidth","minX","Math","min","minY","maxX","max","maxY"],"sourceRoot":"..\\..\\..\\src","sources":["annotations/geometryPure.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/canvas/AnnotationLayer.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { Group } from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+import { sortedByZ } from '../state/selectors';
+import { AnnotationView } from '../annotations/AnnotationView';
+
+/**
+ * Renders all committed annotations in paint order. The selected annotation is
+ * wrapped in a Group whose transform is driven by the `live` shared values, so
+ * move/resize/rotate previews run on the UI thread with zero React re-renders.
+ * When idle the live transform is identity, so this is a no-op visually.
+ */
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export function AnnotationLayer({
+  editor
+}) {
+  const {
+    annotations,
+    selectedId,
+    live,
+    editingTextId
+  } = editor;
+  const liveTransform = useDerivedValue(() => [{
+    translateX: live.tx.value
+  }, {
+    translateY: live.ty.value
+  }, {
+    rotate: live.rotate.value
+  }, {
+    scale: live.scale.value
+  }]);
+  const liveOrigin = useDerivedValue(() => live.origin.value);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: sortedByZ(annotations).map(a => {
+      // Hide the text annotation currently being edited in the native overlay.
+      if (a.type === 'text' && a.id === editingTextId) {
+        return null;
+      }
+      if (a.id === selectedId) {
+        return /*#__PURE__*/_jsx(Group, {
+          origin: liveOrigin,
+          transform: liveTransform,
+          children: /*#__PURE__*/_jsx(AnnotationView, {
+            a: a
+          })
+        }, a.id);
+      }
+      return /*#__PURE__*/_jsx(AnnotationView, {
+        a: a
+      }, a.id);
+    })
+  });
+}
+//# sourceMappingURL=AnnotationLayer.js.map

package/lib/module/canvas/AnnotationLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Group","useDerivedValue","sortedByZ","AnnotationView","jsx","_jsx","Fragment","_Fragment","AnnotationLayer","editor","annotations","selectedId","live","editingTextId","liveTransform","translateX","tx","value","translateY","ty","rotate","scale","liveOrigin","origin","children","map","a","type","id","transform"],"sourceRoot":"..\\..\\..\\src","sources":["canvas/AnnotationLayer.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAClD,SAASC,eAAe,QAAQ,yBAAyB;AAGzD,SAASC,SAAS,QAAQ,oBAAoB;AAC9C,SAASC,cAAc,QAAQ,+BAA+B;;AAE9D;AACA;AACA;AACA;AACA;AACA;AALA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA;AAMA,OAAO,SAASC,eAAeA,CAAC;EAAEC;AAAuC,CAAC,EAAE;EAC1E,MAAM;IAAEC,WAAW;IAAEC,UAAU;IAAEC,IAAI;IAAEC;EAAc,CAAC,GAAGJ,MAAM;EAE/D,MAAMK,aAAa,GAAGb,eAAe,CAAC,MAAM,CAC1C;IAAEc,UAAU,EAAEH,IAAI,CAACI,EAAE,CAACC;EAAM,CAAC,EAC7B;IAAEC,UAAU,EAAEN,IAAI,CAACO,EAAE,CAACF;EAAM,CAAC,EAC7B;IAAEG,MAAM,EAAER,IAAI,CAACQ,MAAM,CAACH;EAAM,CAAC,EAC7B;IAAEI,KAAK,EAAET,IAAI,CAACS,KAAK,CAACJ;EAAM,CAAC,CAC5B,CAAC;EACF,MAAMK,UAAU,GAAGrB,eAAe,CAAC,MAAMW,IAAI,CAACW,MAAM,CAACN,KAAK,CAAC;EAE3D,oBACEZ,IAAA,CAAAE,SAAA;IAAAiB,QAAA,EACGtB,SAAS,CAACQ,WAAW,CAAC,CAACe,GAAG,CAAEC,CAAC,IAAK;MACjC;MACA,IAAIA,CAAC,CAACC,IAAI,KAAK,MAAM,IAAID,CAAC,CAACE,EAAE,KAAKf,aAAa,EAAE;QAC/C,OAAO,IAAI;MACb;MACA,IAAIa,CAAC,CAACE,EAAE,KAAKjB,UAAU,EAAE;QACvB,oBACEN,IAAA,CAACL,KAAK;UAAYuB,MAAM,EAAED,UAAW;UAACO,SAAS,EAAEf,aAAc;UAAAU,QAAA,eAC7DnB,IAAA,CAACF,cAAc;YAACuB,CAAC,EAAEA;UAAE,CAAE;QAAC,GADdA,CAAC,CAACE,EAEP,CAAC;MAEZ;MACA,oBAAOvB,IAAA,CAACF,cAAc;QAAYuB,CAAC,EAAEA;MAAE,GAAXA,CAAC,CAACE,EAAW,CAAC;IAC5C,CAAC;EAAC,CACF,CAAC;AAEP","ignoreList":[]}

package/lib/module/canvas/BaseImageLayer.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import { Image } from '@shopify/react-native-skia';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Draws the base image in IMAGE space (x=0,y=0, native width/height). The parent
+ * scene `<Group>` maps it onto the screen, so this same layer renders identically
+ * off-screen at full resolution during export.
+ */
+export function BaseImageLayer({
+  image,
+  size
+}) {
+  return /*#__PURE__*/_jsx(Image, {
+    image: image,
+    x: 0,
+    y: 0,
+    width: size.width,
+    height: size.height,
+    fit: "fill"
+  });
+}
+//# sourceMappingURL=BaseImageLayer.js.map

package/lib/module/canvas/BaseImageLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Image","jsx","_jsx","BaseImageLayer","image","size","x","y","width","height","fit"],"sourceRoot":"..\\..\\..\\src","sources":["canvas/BaseImageLayer.tsx"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,4BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKnD;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAAC;EAC7BC,KAAK;EACLC;AAIF,CAAC,EAAE;EACD,oBACEH,IAAA,CAACF,KAAK;IACJI,KAAK,EAAEA,KAAM;IACbE,CAAC,EAAE,CAAE;IACLC,CAAC,EAAE,CAAE;IACLC,KAAK,EAAEH,IAAI,CAACG,KAAM;IAClBC,MAAM,EAAEJ,IAAI,CAACI,MAAO;IACpBC,GAAG,EAAC;EAAM,CACX,CAAC;AAEN","ignoreList":[]}

package/lib/module/canvas/CropOverlay.js

@@ -0,0 +1,131 @@
+"use strict";
+
+import { useEffect } from 'react';
+import { Circle, Group, Path, Rect, Skia } from '@shopify/react-native-skia';
+import { useDerivedValue } from 'react-native-reanimated';
+import { HANDLE_SIZE } from '../constants';
+import { applyToPoint } from '../utils/math';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Crop UI drawn in screen space: a dimmed full-screen scrim plus the crop
+ * rectangle's border and corner handles, which follow `cropRectSV` on the UI
+ * thread (works even when the scene is rotated, since the border is a quad).
+ */
+export function CropOverlay({
+  editor
+}) {
+  const {
+    tool,
+    doc,
+    cropRectSV,
+    matrixSV,
+    imageSize,
+    layout
+  } = editor;
+
+  // When entering the crop tool, seed the crop rect from the current scene.
+  useEffect(() => {
+    if (tool === 'crop') {
+      cropRectSV.value = doc.scene.cropRect ?? {
+        x: 0,
+        y: 0,
+        width: imageSize.width,
+        height: imageSize.height
+      };
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tool]);
+  const cropPath = useDerivedValue(() => {
+    const r = cropRectSV.value;
+    const m = matrixSV.value;
+    const p = Skia.Path.Make();
+    const c0 = applyToPoint(m, {
+      x: r.x,
+      y: r.y
+    });
+    const c1 = applyToPoint(m, {
+      x: r.x + r.width,
+      y: r.y
+    });
+    const c2 = applyToPoint(m, {
+      x: r.x + r.width,
+      y: r.y + r.height
+    });
+    const c3 = applyToPoint(m, {
+      x: r.x,
+      y: r.y + r.height
+    });
+    p.moveTo(c0.x, c0.y);
+    p.lineTo(c1.x, c1.y);
+    p.lineTo(c2.x, c2.y);
+    p.lineTo(c3.x, c3.y);
+    p.close();
+    return p;
+  });
+  const corners = useDerivedValue(() => {
+    const r = cropRectSV.value;
+    const m = matrixSV.value;
+    return [applyToPoint(m, {
+      x: r.x,
+      y: r.y
+    }), applyToPoint(m, {
+      x: r.x + r.width,
+      y: r.y
+    }), applyToPoint(m, {
+      x: r.x + r.width,
+      y: r.y + r.height
+    }), applyToPoint(m, {
+      x: r.x,
+      y: r.y + r.height
+    })];
+  });
+
+  // Per-corner x/y derived values (declared unconditionally — rules of hooks).
+  const c0x = useDerivedValue(() => corners.value[0].x);
+  const c0y = useDerivedValue(() => corners.value[0].y);
+  const c1x = useDerivedValue(() => corners.value[1].x);
+  const c1y = useDerivedValue(() => corners.value[1].y);
+  const c2x = useDerivedValue(() => corners.value[2].x);
+  const c2y = useDerivedValue(() => corners.value[2].y);
+  const c3x = useDerivedValue(() => corners.value[3].x);
+  const c3y = useDerivedValue(() => corners.value[3].y);
+  if (tool !== 'crop') {
+    return null;
+  }
+  const r = HANDLE_SIZE / 2;
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [/*#__PURE__*/_jsx(Rect, {
+      x: 0,
+      y: 0,
+      width: layout.width,
+      height: layout.height,
+      color: "rgba(0,0,0,0.45)"
+    }), /*#__PURE__*/_jsx(Path, {
+      path: cropPath,
+      color: "#FFFFFF",
+      style: "stroke",
+      strokeWidth: 2
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: c0x,
+      cy: c0y,
+      r: r,
+      color: "#FFFFFF"
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: c1x,
+      cy: c1y,
+      r: r,
+      color: "#FFFFFF"
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: c2x,
+      cy: c2y,
+      r: r,
+      color: "#FFFFFF"
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: c3x,
+      cy: c3y,
+      r: r,
+      color: "#FFFFFF"
+    })]
+  });
+}
+//# sourceMappingURL=CropOverlay.js.map

package/lib/module/canvas/CropOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","Circle","Group","Path","Rect","Skia","useDerivedValue","HANDLE_SIZE","applyToPoint","jsx","_jsx","jsxs","_jsxs","CropOverlay","editor","tool","doc","cropRectSV","matrixSV","imageSize","layout","value","scene","cropRect","x","y","width","height","cropPath","r","m","p","Make","c0","c1","c2","c3","moveTo","lineTo","close","corners","c0x","c0y","c1x","c1y","c2x","c2y","c3x","c3y","children","color","path","style","strokeWidth","cx","cy"],"sourceRoot":"..\\..\\..\\src","sources":["canvas/CropOverlay.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/canvas/EditorCanvas.js

@@ -0,0 +1,88 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Canvas, Group } from '@shopify/react-native-skia';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { useEditor } from '../context/EditorContext';
+import { sceneTransforms2d } from '../utils/math';
+import { useEditorGestures } from '../gestures/useEditorGestures';
+import { useCropGesture } from '../gestures/useCropGesture';
+import { BaseImageLayer } from './BaseImageLayer';
+import { AnnotationLayer } from './AnnotationLayer';
+import { InFlightLayer } from './InFlightLayer';
+import { SelectionOverlay } from './SelectionOverlay';
+import { CropOverlay } from './CropOverlay';
+
+/**
+ * The Skia canvas host. Layers, under one scene `<Group>` transform:
+ *   base image → committed annotations → in-flight draft
+ * plus screen-space overlays (selection handles, crop UI). A single composed
+ * gesture drives all editing.
+ *
+ * IMPORTANT: React Context does NOT cross the Skia `<Canvas>` boundary — Skia
+ * renders Canvas children with its own reconciler, so a Provider mounted outside
+ * the Canvas is invisible inside it. Every Canvas child therefore receives the
+ * whole editor value via an `editor` PROP instead of calling `useEditor()`.
+ * Also, `<Canvas onLayout>` is unsupported on the New Architecture, so we measure
+ * on a wrapping `<View>`.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function EditorCanvas({
+  image
+}) {
+  const editor = useEditor();
+  const {
+    doc,
+    imageSize,
+    setLayout,
+    layout
+  } = editor;
+  const pan = useEditorGestures();
+  const cropPan = useCropGesture();
+  const gesture = useMemo(() => Gesture.Race(cropPan, pan), [cropPan, pan]);
+  const transform = useMemo(() => sceneTransforms2d(doc.scene, imageSize, layout), [doc.scene, imageSize, layout]);
+  const onLayout = e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    if (width > 0 && height > 0) {
+      setLayout({
+        width,
+        height
+      });
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.fill,
+    onLayout: onLayout,
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: gesture,
+      children: /*#__PURE__*/_jsxs(Canvas, {
+        style: styles.fill,
+        children: [/*#__PURE__*/_jsxs(Group, {
+          transform: transform,
+          children: [/*#__PURE__*/_jsx(BaseImageLayer, {
+            image: image,
+            size: imageSize
+          }), /*#__PURE__*/_jsx(AnnotationLayer, {
+            editor: editor
+          }), /*#__PURE__*/_jsx(InFlightLayer, {
+            editor: editor
+          })]
+        }), /*#__PURE__*/_jsx(SelectionOverlay, {
+          editor: editor
+        }), /*#__PURE__*/_jsx(CropOverlay, {
+          editor: editor
+        })]
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=EditorCanvas.js.map

package/lib/module/canvas/EditorCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","StyleSheet","View","Canvas","Group","GestureDetector","Gesture","useEditor","sceneTransforms2d","useEditorGestures","useCropGesture","BaseImageLayer","AnnotationLayer","InFlightLayer","SelectionOverlay","CropOverlay","jsx","_jsx","jsxs","_jsxs","EditorCanvas","image","editor","doc","imageSize","setLayout","layout","pan","cropPan","gesture","Race","transform","scene","onLayout","e","width","height","nativeEvent","style","styles","fill","children","size","create","flex"],"sourceRoot":"..\\..\\..\\src","sources":["canvas/EditorCanvas.tsx"],"mappings":"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","ignoreList":[]}