canvu-react 0.4.46 → 0.4.48

package/dist/native.d.cts

@@ -1,13 +1,13 @@
-import { C as CanvuLinkData } from './link-item-DwzXOwU5.cjs';
-export { D as DEFAULT_LINK_CARD_SIZE, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-DwzXOwU5.cjs';
-import { C as Camera2D, S as StrokeStyle } from './shape-builders-CKEMjivV.cjs';
-export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-CKEMjivV.cjs';
-import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.cjs';
+import { C as CanvuLinkData } from './link-item-BMV3VUCr.cjs';
+export { D as DEFAULT_LINK_CARD_SIZE, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-BMV3VUCr.cjs';
+import { C as Camera2D, S as StrokeStyle } from './shape-builders-BmLS8CNh.cjs';
+export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-BmLS8CNh.cjs';
+import { V as VectorSceneItem, R as Rect } from './types-fJNwEnHf.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { R as RemotePresencePeer } from './types-BQUbxMgz.cjs';
+import { R as RemotePresencePeer } from './types-BOQLWyCw.cjs';
 
 type NativeImagesMenuLabels = {
     title?: string;

package/dist/native.d.ts

@@ -1,13 +1,13 @@
-import { C as CanvuLinkData } from './link-item-IW4GTnxl.js';
-export { D as DEFAULT_LINK_CARD_SIZE, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-IW4GTnxl.js';
-import { C as Camera2D, S as StrokeStyle } from './shape-builders-Cyh8zvDG.js';
-export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-Cyh8zvDG.js';
-import { V as VectorSceneItem, R as Rect } from './types-BCCvY6ie.js';
+import { C as CanvuLinkData } from './link-item-COoNNvCu.js';
+export { D as DEFAULT_LINK_CARD_SIZE, c as createLinkItem, g as getLinkData, i as isLinkItem } from './link-item-COoNNvCu.js';
+import { C as Camera2D, S as StrokeStyle } from './shape-builders-BCOAG0pS.js';
+export { o as createFreehandStrokeItem, q as createImageItem, t as createShapeId } from './shape-builders-BCOAG0pS.js';
+import { V as VectorSceneItem, R as Rect } from './types-fJNwEnHf.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { StyleProp, ViewStyle, TextStyle } from 'react-native';
-import { R as RemotePresencePeer } from './types-B82WiQQh.js';
+import { R as RemotePresencePeer } from './types-BMMPUak7.js';
 
 type NativeImagesMenuLabels = {
     title?: string;

package/dist/native.js

@@ -35,7 +35,7 @@ function buildCustomShapeChildrenSvg(inner, intrinsic, bounds) {
   const sy = b.height / intrinsic.height;
   return `<g transform="scale(${sx},${sy})">${inner}</g>`;
 }
-function createCustomShapeItem(id, bounds, content) {
+function createCustomShapeItem(id, bounds, content, options = {}) {
   const r = normalizeRect(bounds);
   const intrinsic = { width: r.width, height: r.height };
   const inner = resolveCustomInner(content, intrinsic);
@@ -47,6 +47,8 @@ function createCustomShapeItem(id, bounds, content) {
     toolKind: "custom",
     customIntrinsicSize: intrinsic,
     customInnerSvg: inner,
+    ...options.resizeHandles !== void 0 ? { customResizeHandles: options.resizeHandles } : {},
+    ...options.svgClassName ? { svgClassName: options.svgClassName } : {},
     childrenSvg: buildCustomShapeChildrenSvg(inner, intrinsic, r)
   };
 }
@@ -1589,7 +1591,42 @@ var styles = StyleSheet.create({
 });
 
 // src/interaction/resize-handles.ts
-var HANDLE_IDS = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+var ALL_RESIZE_HANDLES = [
+  "nw",
+  "n",
+  "ne",
+  "e",
+  "se",
+  "s",
+  "sw",
+  "w"
+];
+var CORNER_RESIZE_HANDLES = [
+  "nw",
+  "ne",
+  "se",
+  "sw"
+];
+function dedupeHandles(handles) {
+  const allowed = new Set(handles);
+  return ALL_RESIZE_HANDLES.filter((handle) => allowed.has(handle));
+}
+function resolveCustomResizeHandles(handles) {
+  if (handles === "corners") return CORNER_RESIZE_HANDLES;
+  if (handles === "all" || handles === void 0) return ALL_RESIZE_HANDLES;
+  return dedupeHandles(handles);
+}
+function resolveResizeHandlesForItem(item) {
+  if (!item) return ALL_RESIZE_HANDLES;
+  if (getLinkData(item)) return CORNER_RESIZE_HANDLES;
+  if (item.toolKind === "custom") {
+    return resolveCustomResizeHandles(item.customResizeHandles);
+  }
+  return ALL_RESIZE_HANDLES;
+}
+function itemAllowsResizeHandle(item, handle) {
+  return resolveResizeHandlesForItem(item).includes(handle);
+}
 function getHandleWorldPosition(bounds, id) {
   const r = normalizeRect(bounds);
   const cx = r.x + r.width / 2;
@@ -1613,7 +1650,7 @@ function getHandleWorldPosition(bounds, id) {
       return { x: r.x, y: cy };
   }
 }
-function hitTestResizeHandle(bounds, worldX, worldY, radiusWorld, rotationRad = 0) {
+function hitTestResizeHandle(bounds, worldX, worldY, radiusWorld, rotationRad = 0, handles = ALL_RESIZE_HANDLES) {
   const r = normalizeRect(bounds);
   const pl = worldToItemLocal(
     worldX,
@@ -1627,7 +1664,7 @@ function hitTestResizeHandle(bounds, worldX, worldY, radiusWorld, rotationRad =
   const localBounds2 = { x: 0, y: 0, width: r.width, height: r.height };
   let best = null;
   let bestD = radiusWorld;
-  for (const id of HANDLE_IDS) {
+  for (const id of handles) {
     const p = getHandleWorldPosition(localBounds2, id);
     const d = Math.hypot(pl.x - p.x, pl.y - p.y);
     if (d <= bestD) {
@@ -3026,6 +3063,35 @@ function resolveNativeStrokePreviewStyle(tool, previewStrokeStyle) {
   };
 }
 
+// src/native/native-stroke-preview.ts
+var NATIVE_STROKE_PREVIEW_MAX_POINTS = 160;
+function sampleNativeStrokePreviewPoints(points, maxPoints = NATIVE_STROKE_PREVIEW_MAX_POINTS) {
+  if (points.length <= maxPoints) return points.map((point) => ({ ...point }));
+  if (maxPoints <= 1) {
+    const last2 = points[points.length - 1];
+    return last2 ? [{ ...last2 }] : [];
+  }
+  const lastIndex = points.length - 1;
+  const last = points[lastIndex];
+  if (!last) return [];
+  const step = lastIndex / (maxPoints - 1);
+  return Array.from({ length: maxPoints }, (_, index) => {
+    const point = points[Math.round(index * step)] ?? last;
+    return { x: point.x, y: point.y };
+  });
+}
+function buildNativeStrokePreviewPath(points) {
+  if (points.length < 2) return null;
+  const d = smoothFreehandPointsToPathD(points);
+  return d || null;
+}
+function nativeStrokePreviewDashArray(style, tool) {
+  if (style.strokeDash !== "dashed" || tool !== "draw") return void 0;
+  const dash = Math.max(style.strokeWidth * 1.8, 4);
+  const gap = Math.max(style.strokeWidth * 1.4, 3);
+  return `${dash} ${gap}`;
+}
+
 // src/native/native-vector-interactions.ts
 var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
 function nativeItemPlacementBounds(item) {
@@ -3075,7 +3141,8 @@ function hitTestNativeSelectionHandle({
     worldPoint.x,
     worldPoint.y,
     handleRadiusWorld,
-    rotation
+    rotation,
+    resolveResizeHandlesForItem(selectedItem)
   );
   return handle ? { kind: "resize", handle } : null;
 }
@@ -3111,7 +3178,6 @@ function nativeRotationDragStart(input) {
     startRotation: input.item.rotation ?? 0
   };
 }
-var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var ERASER_PREVIEW_OPACITY = 0.3;
 var OVERLAY_STROKE_PX = 1.25;
 var MARQUEE_DASH_PX = 4;
@@ -3200,7 +3266,7 @@ function NativeInteractionOverlay({
         return /* @__PURE__ */ jsx(Group, { transform: rotationTransform, origin: rotationOrigin, children: selectionRect }, it.id);
       }),
       showResizeHandles && bSingle && single && /* @__PURE__ */ jsxs(Fragment, { children: [
-        HANDLE_ORDER.map((hid) => {
+        resolveResizeHandlesForItem(single).map((hid) => {
           const p = getHandleWorldPositionRotated(bSingle, hid, rotSingle);
           return /* @__PURE__ */ jsxs(Group, { children: [
             /* @__PURE__ */ jsx(
@@ -3397,58 +3463,42 @@ function NativeInteractionOverlay({
         p.tool,
         p.style ?? previewStrokeStyle
       );
-      const payload = computeFreehandSvgPayload(
-        p.points,
-        style,
-        isLaser ? "draw" : p.tool,
-        p.points.length === 2
+      const strokeColor = colorWithOpacity(
+        style.stroke,
+        isLaser ? 0.85 : style.strokeOpacity
       );
-      if (!payload) return null;
-      if (payload.kind === "circle") {
+      if (p.points.length === 1) {
+        const point = p.points[0];
+        if (!point) return null;
         return /* @__PURE__ */ jsx(
           Circle,
           {
-            cx: payload.cx,
-            cy: payload.cy,
-            r: payload.r,
-            color: colorWithOpacity(payload.fill, payload.fillOpacity),
-            style: "fill",
-            antiAlias: true
-          }
-        );
-      }
-      if (payload.kind === "fillPath") {
-        return /* @__PURE__ */ jsx(
-          Path,
-          {
-            path: payload.d,
-            color: colorWithOpacity(payload.fill, payload.fillOpacity),
+            cx: point.x,
+            cy: point.y,
+            r: Math.max(0.5, style.strokeWidth / 2),
+            color: strokeColor,
             style: "fill",
-            fillType: "winding",
             antiAlias: true
           }
         );
       }
-      if (payload.kind === "strokePath") {
-        const intervals = dashIntervalsFromStrokeDasharray3(payload.strokeDasharray);
-        return /* @__PURE__ */ jsx(
-          Path,
-          {
-            path: payload.d,
-            color: colorWithOpacity(
-              payload.stroke,
-              isLaser ? 0.85 : payload.strokeOpacity
-            ),
-            style: "stroke",
-            strokeWidth: payload.strokeWidth,
-            strokeCap: "round",
-            strokeJoin: "round",
-            antiAlias: true,
-            children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
-          }
-        );
-      }
-      return null;
+      const path = buildNativeStrokePreviewPath(p.points);
+      if (!path) return null;
+      const strokeDasharray = nativeStrokePreviewDashArray(style, p.tool);
+      const intervals = dashIntervalsFromStrokeDasharray3(strokeDasharray);
+      return /* @__PURE__ */ jsx(
+        Path,
+        {
+          path,
+          color: strokeColor,
+          style: "stroke",
+          strokeWidth: style.strokeWidth,
+          strokeCap: "round",
+          strokeJoin: "round",
+          antiAlias: true,
+          children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
+        }
+      );
     }
     return null;
   }, [placementPreview, previewStrokeStyle, overlayStrokeWorld, marqueeDashWorld]);
@@ -5013,6 +5063,9 @@ function applyRotationFromPointer(item, startRotation, startPointerAngleRad, poi
 }
 function resizeItemByHandle(item, start, handle, currentWorld) {
   const sb = normalizeRect(start.bounds);
+  if (!itemAllowsResizeHandle(item, handle)) {
+    return item;
+  }
   const newBoundsRaw = computeNewBoundsForResize(item, sb, handle, currentWorld);
   const nb = normalizeRect(newBoundsRaw);
   const k = item.toolKind;
@@ -5890,7 +5943,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         setRealtimePlacementPreview({
           kind: "stroke",
           tool: st.tool,
-          points: [...pts],
+          points: sampleNativeStrokePreviewPoints(pts),
           style: { ...strokeStyleRef.current }
         });
         return;