canvu-react 0.4.25 → 0.4.27

package/dist/native.cjs

@@ -43,6 +43,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;
@@ -83,6 +84,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);
@@ -1305,16 +1312,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;
@@ -2164,8 +2172,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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: t, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: translationTransform, children: /* @__PURE__ */ jsxRuntime.jsx(
           reactNativeSkia.Rect,
           {
             x: 0,
@@ -2177,7 +2187,11 @@ function NativeInteractionOverlay({
             strokeWidth: overlayStrokeWorld,
             antiAlias: true
           }
-        ) }, it.id);
+        ) });
+        if (rotationTransform.length === 0) {
+          return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { children: selectionRect }, it.id);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: rotationTransform, origin: rotationOrigin, children: selectionRect }, it.id);
       }),
       showResizeHandles && bSingle && single && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         HANDLE_ORDER.map((hid) => {
@@ -2438,16 +2452,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         reactNativeSkia.Group,
         {
-          transform: t,
+          transform: translationTransform,
           opacity: ERASER_PREVIEW_OPACITY,
           children: /* @__PURE__ */ jsxRuntime.jsx(NativeShapeRenderer, { item: it })
         },
         `erase-${it.id}`
       );
+      if (rotationTransform.length === 0) return preview;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeSkia.Group,
+        {
+          transform: rotationTransform,
+          origin: rotationOrigin,
+          children: preview
+        },
+        `erase-rot-${it.id}`
+      );
     }) });
   }, [eraserPreviewItems]);
   const eraserTrailElements = react.useMemo(() => {
@@ -2639,14 +2665,12 @@ var MemoShape = react.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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: itemTransform, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: translationTransform, children: /* @__PURE__ */ jsxRuntime.jsx(NativeShapeRenderer, { item }) });
+  if (rotationTransform.length === 0) return shape;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: rotationTransform, origin: rotationOrigin, children: shape });
 });
 function NativeSceneRenderer({
   items,
@@ -4617,17 +4641,21 @@ var NativeVectorViewport = react.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]);