canvu-react 0.4.25 → 0.4.27

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';
@@ -37,6 +37,7 @@ function escapeHtmlText(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 var DEFAULT_TEXT_FONT_SIZE = 18;
+var DEFAULT_TEXT_TOOL_FONT_SIZE = 28;
 var TEXT_FONT_FAMILY = "Inter, -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif";
 var LINE_HEIGHT_RATIO = 22 / 18;
 var FIRST_LINE_BASELINE_RATIO = 20 / 18;
@@ -77,6 +78,12 @@ function lineHeightFor(fontSize) {
 function firstLineBaselineY(fontSize) {
   return fontSize * FIRST_LINE_BASELINE_RATIO;
 }
+function textBaselineYFor(fontSize) {
+  return firstLineBaselineY(fontSize);
+}
+function textLineHeightFor(fontSize) {
+  return lineHeightFor(fontSize);
+}
 function measureTextBoundsLocal(content, fontSize = DEFAULT_TEXT_FONT_SIZE) {
   const cacheKey = textMeasureCacheKey(content, fontSize);
   const cached = textMeasureCache.get(cacheKey);
@@ -1299,16 +1306,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 = [];
+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 }];
   }
-  result.push({ translateX: x }, { translateY: y });
-  return result;
+  return [];
+}
+function skiaItemRotationOrigin(x, y, cx, cy) {
+  return { x: x + cx, y: y + cy };
 }
 function rgbaFromHexAndOpacity(hex, opacity) {
   if (!hex) return hex;
@@ -2158,8 +2166,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,
@@ -2171,7 +2181,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) => {
@@ -2432,16 +2446,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(() => {
@@ -2633,14 +2659,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,
@@ -4611,17 +4635,21 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         if (!change) return;
         if (st.tool === "text") {
           const id = createShapeId();
+          const fs = DEFAULT_TEXT_TOOL_FONT_SIZE;
+          const baseline = textBaselineYFor(fs);
+          const lh = textLineHeightFor(fs);
+          const minH = Math.max(26, baseline + Math.max(4, lh * 0.2));
           const item = createTextItem(
             id,
             {
               x: st.startWorld.x - 4,
-              y: st.startWorld.y - 18,
+              y: st.startWorld.y - baseline,
               width: 160,
-              height: 26
+              height: minH
             },
             "Text",
             strokeStyleRef.current,
-            18
+            fs
           );
           change([...itemsRef.current, item]);
           onSelectionChangeRef.current?.([id]);