canvu-react 0.4.24 → 0.4.26

package/dist/native.js

@@ -1,5 +1,5 @@
 import getStroke from 'perfect-freehand';
-import { Group, RoundedRect, Circle, Line, vec, Path, matchFont, Text, Canvas, Rect, Oval, DashPathEffect, useImage, Image } from '@shopify/react-native-skia';
+import { Group, Canvas, Rect, Circle, Path, RoundedRect, Oval, DashPathEffect, Line, vec, matchFont, Text, useImage, Image } from '@shopify/react-native-skia';
 import { memo, forwardRef, useState, useRef, useEffect, useCallback, useMemo, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { StyleSheet, PanResponder, View, Pressable, Text as Text$1, ScrollView } from 'react-native';
@@ -1299,15 +1299,17 @@ function parseSvgTransform(s) {
 function skiaCameraTransform(zoom, panX, panY) {
   return [{ translateX: panX }, { translateY: panY }, { scale: zoom }];
 }
-function skiaItemPlacementTransform(x, y, cx, cy, rotationRad) {
-  const result = [{ translateX: x }, { translateY: y }];
+function skiaItemTranslationTransform(x, y) {
+  return [{ translateX: x }, { translateY: y }];
+}
+function skiaItemRotationTransform(rotationRad) {
   if (Math.abs(rotationRad) > 1e-12) {
-    result.push({
-      rotate: rotationRad,
-      origin: { x: cx, y: cy }
-    });
+    return [{ rotate: rotationRad }];
   }
-  return result;
+  return [];
+}
+function skiaItemRotationOrigin(x, y, cx, cy) {
+  return { x: x + cx, y: y + cy };
 }
 function rgbaFromHexAndOpacity(hex, opacity) {
   if (!hex) return hex;
@@ -2157,8 +2159,10 @@ function NativeInteractionOverlay({
         const b = normalizeRect(it.bounds);
         const cx = b.width / 2;
         const cy = b.height / 2;
-        const t = skiaItemPlacementTransform(it.x, it.y, cx, cy, it.rotation ?? 0);
-        return /* @__PURE__ */ jsx(Group, { transform: t, children: /* @__PURE__ */ jsx(
+        const rotationTransform = skiaItemRotationTransform(it.rotation ?? 0);
+        const rotationOrigin = skiaItemRotationOrigin(it.x, it.y, cx, cy);
+        const translationTransform = skiaItemTranslationTransform(it.x, it.y);
+        const selectionRect = /* @__PURE__ */ jsx(Group, { transform: translationTransform, children: /* @__PURE__ */ jsx(
           Rect,
           {
             x: 0,
@@ -2170,7 +2174,11 @@ function NativeInteractionOverlay({
             strokeWidth: overlayStrokeWorld,
             antiAlias: true
           }
-        ) }, it.id);
+        ) });
+        if (rotationTransform.length === 0) {
+          return /* @__PURE__ */ jsx(Group, { children: selectionRect }, it.id);
+        }
+        return /* @__PURE__ */ jsx(Group, { transform: rotationTransform, origin: rotationOrigin, children: selectionRect }, it.id);
       }),
       showResizeHandles && bSingle && single && /* @__PURE__ */ jsxs(Fragment, { children: [
         HANDLE_ORDER.map((hid) => {
@@ -2431,16 +2439,28 @@ function NativeInteractionOverlay({
       const b = normalizeRect(it.bounds);
       const cx = b.width / 2;
       const cy = b.height / 2;
-      const t = skiaItemPlacementTransform(it.x, it.y, cx, cy, it.rotation ?? 0);
-      return /* @__PURE__ */ jsx(
+      const rotationTransform = skiaItemRotationTransform(it.rotation ?? 0);
+      const rotationOrigin = skiaItemRotationOrigin(it.x, it.y, cx, cy);
+      const translationTransform = skiaItemTranslationTransform(it.x, it.y);
+      const preview = /* @__PURE__ */ jsx(
         Group,
         {
-          transform: t,
+          transform: translationTransform,
           opacity: ERASER_PREVIEW_OPACITY,
           children: /* @__PURE__ */ jsx(NativeShapeRenderer, { item: it })
         },
         `erase-${it.id}`
       );
+      if (rotationTransform.length === 0) return preview;
+      return /* @__PURE__ */ jsx(
+        Group,
+        {
+          transform: rotationTransform,
+          origin: rotationOrigin,
+          children: preview
+        },
+        `erase-rot-${it.id}`
+      );
     }) });
   }, [eraserPreviewItems]);
   const eraserTrailElements = useMemo(() => {
@@ -2632,14 +2652,12 @@ var MemoShape = memo(function MemoShape2({
   const b = normalizeRect(item.bounds);
   const cx = b.width / 2;
   const cy = b.height / 2;
-  const itemTransform = skiaItemPlacementTransform(
-    item.x,
-    item.y,
-    cx,
-    cy,
-    item.rotation ?? 0
-  );
-  return /* @__PURE__ */ jsx(Group, { transform: itemTransform, children: /* @__PURE__ */ jsx(NativeShapeRenderer, { item }) });
+  const rotationTransform = skiaItemRotationTransform(item.rotation ?? 0);
+  const rotationOrigin = skiaItemRotationOrigin(item.x, item.y, cx, cy);
+  const translationTransform = skiaItemTranslationTransform(item.x, item.y);
+  const shape = /* @__PURE__ */ jsx(Group, { transform: translationTransform, children: /* @__PURE__ */ jsx(NativeShapeRenderer, { item }) });
+  if (rotationTransform.length === 0) return shape;
+  return /* @__PURE__ */ jsx(Group, { transform: rotationTransform, origin: rotationOrigin, children: shape });
 });
 function NativeSceneRenderer({
   items,