canvu-react 0.4.38 → 0.4.40

package/dist/native.d.cts

@@ -296,6 +296,7 @@ type NativeVectorViewportProps = {
     readonly onCameraChange?: () => void;
     readonly customPlacement?: NativeCustomShapePlacementOptions;
     readonly customPlacements?: readonly NativeCustomShapePlacementOptions[];
+    readonly overlay?: React.ReactNode;
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
     readonly styleInspectorPlacement?: "bottom" | "top-left";

package/dist/native.d.ts

@@ -296,6 +296,7 @@ type NativeVectorViewportProps = {
     readonly onCameraChange?: () => void;
     readonly customPlacement?: NativeCustomShapePlacementOptions;
     readonly customPlacements?: readonly NativeCustomShapePlacementOptions[];
+    readonly overlay?: React.ReactNode;
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
     readonly styleInspectorPlacement?: "bottom" | "top-left";

package/dist/native.js

@@ -2180,6 +2180,11 @@ function rgba(hex, alpha) {
   if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return hex;
   return `rgba(${r},${g},${b},${alpha})`;
 }
+function dashIntervalsFromStrokeDasharray2(strokeDasharray) {
+  if (!strokeDasharray) return null;
+  const intervals = strokeDasharray.split(/[\s,]+/).map((part) => Number(part)).filter((part) => Number.isFinite(part) && part > 0);
+  return intervals.length > 0 ? intervals : null;
+}
 function localBounds(bounds) {
   const b = normalizeRect(bounds);
   return { w: Math.max(0, b.width), h: Math.max(0, b.height) };
@@ -2469,6 +2474,7 @@ function NativeShapeRenderer({ item }) {
         }
       );
     }
+    const intervals = dashIntervalsFromStrokeDasharray2(payload.strokeDasharray);
     return /* @__PURE__ */ jsx(
       Path,
       {
@@ -2478,7 +2484,8 @@ function NativeShapeRenderer({ item }) {
         strokeWidth: payload.strokeWidth,
         strokeCap: "round",
         strokeJoin: "round",
-        antiAlias: true
+        antiAlias: true,
+        children: intervals ? /* @__PURE__ */ jsx(DashPathEffect, { intervals }) : null
       }
     );
   }
@@ -2652,7 +2659,7 @@ function pointsToSmoothPathD(points) {
   const d = smoothFreehandPointsToPathD(points);
   return d || null;
 }
-function dashIntervalsFromStrokeDasharray2(strokeDasharray) {
+function dashIntervalsFromStrokeDasharray3(strokeDasharray) {
   if (!strokeDasharray) return null;
   const intervals = strokeDasharray.split(/\s+/).map((part) => Number(part)).filter((part) => Number.isFinite(part) && part > 0);
   return intervals.length > 0 ? intervals : null;
@@ -2942,7 +2949,7 @@ function NativeInteractionOverlay({
         );
       }
       if (payload.kind === "strokePath") {
-        const intervals = dashIntervalsFromStrokeDasharray2(payload.strokeDasharray);
+        const intervals = dashIntervalsFromStrokeDasharray3(payload.strokeDasharray);
         return /* @__PURE__ */ jsx(
           Path,
           {
@@ -4680,6 +4687,8 @@ var MARKER_TOOL_STYLE = {
   strokeWidth: 16,
   strokeOpacity: 0.5
 };
+var NATIVE_VIEWPORT_OVERLAY_Z_INDEX = 40;
+var NATIVE_VIEWPORT_OVERLAY_ELEVATION = 40;
 function isPlacementTool(toolId) {
   return toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud" || toolId === "line" || toolId === "arrow";
 }
@@ -4763,6 +4772,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onCameraChange,
   customPlacement,
   customPlacements = [],
+  overlay,
   toolbar,
   showStyleInspector = false,
   styleInspectorPlacement = "bottom"
@@ -5694,153 +5704,161 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   };
   const normalizedNativeLinkHref = normalizeNativeLinkHref(nativeLinkInputValue);
   const nativeLinkCanSubmit = pendingNativeLinkRequest !== null && normalizedNativeLinkHref !== null && onItemsChange != null;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: { flex: 1, overflow: "hidden" },
-      onLayout,
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerEnter: handlePointerMove,
-      onPointerLeave: () => {
-        hideToolCursor();
-        notifyWorldPointerLeave();
-      },
-      ...panResponder.panHandlers,
-      children: [
-        size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            NativeSceneRenderer,
+  return /* @__PURE__ */ jsxs(View, { style: { flex: 1, overflow: "hidden" }, onLayout, children: [
+    size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: StyleSheet.absoluteFill,
+          onPointerDown: handlePointerDown,
+          onPointerMove: handlePointerMove,
+          onPointerUp: handlePointerUp,
+          onPointerEnter: handlePointerMove,
+          onPointerLeave: () => {
+            hideToolCursor();
+            notifyWorldPointerLeave();
+          },
+          ...panResponder.panHandlers,
+          children: [
+            /* @__PURE__ */ jsx(
+              NativeSceneRenderer,
+              {
+                items: sceneItems,
+                camera,
+                width: size.width,
+                height: size.height
+              }
+            ),
+            interactive && /* @__PURE__ */ jsx(
+              NativeInteractionOverlay,
+              {
+                camera,
+                width: size.width,
+                height: size.height,
+                selectedItems,
+                showResizeHandles,
+                placementPreview,
+                laserTrail,
+                eraserTrail,
+                eraserPreviewItems: items.filter(
+                  (it) => eraserPreviewIds.includes(it.id)
+                ),
+                previewStrokeStyle: strokeStyleState,
+                remotePresence
+              }
+            )
+          ]
+        }
+      ),
+      overlay ? /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: overlay }) : null,
+      interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(
+        View,
+        {
+          pointerEvents: "box-none",
+          style: styleInspectorPlacement === "top-left" ? {
+            position: "absolute",
+            left: 16,
+            top: 104,
+            alignItems: "flex-start",
+            zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX,
+            elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION
+          } : {
+            position: "absolute",
+            left: 16,
+            right: 16,
+            bottom: 84,
+            alignItems: "center",
+            zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX,
+            elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION
+          },
+          children: /* @__PURE__ */ jsx(
+            NativeVectorStyleInspector,
             {
-              items: sceneItems,
-              camera,
-              width: size.width,
-              height: size.height
+              toolId: activeStyleToolId,
+              value: strokeStyleState,
+              onChange: patchCurrentStrokeStyle
             }
-          ),
-          interactive && /* @__PURE__ */ jsx(
-            NativeInteractionOverlay,
+          )
+        }
+      ) : null,
+      toolbar && /* @__PURE__ */ jsx(
+        View,
+        {
+          style: {
+            position: "absolute",
+            bottom: 16,
+            left: 16,
+            right: 16,
+            flexDirection: "row",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX,
+            elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION
+          },
+          pointerEvents: "box-none",
+          children: toolbar
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        animationType: "fade",
+        transparent: true,
+        visible: pendingNativeLinkRequest !== null,
+        onRequestClose: closeNativeLinkDialog,
+        children: /* @__PURE__ */ jsx(View, { style: styles3.nativeLinkDialogBackdrop, children: /* @__PURE__ */ jsxs(View, { style: styles3.nativeLinkDialogCard, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogTitle, children: nativeLinkDialogLabels.title }),
+          /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogDescription, children: nativeLinkDialogLabels.description }),
+          /* @__PURE__ */ jsx(
+            TextInput,
             {
-              camera,
-              width: size.width,
-              height: size.height,
-              selectedItems,
-              showResizeHandles,
-              placementPreview,
-              laserTrail,
-              eraserTrail,
-              eraserPreviewItems: items.filter(
-                (it) => eraserPreviewIds.includes(it.id)
-              ),
-              previewStrokeStyle: strokeStyleState,
-              remotePresence
+              accessibilityLabel: nativeLinkDialogLabels.title,
+              autoCapitalize: "none",
+              autoCorrect: false,
+              keyboardType: "url",
+              onChangeText: setNativeLinkInputValue,
+              onSubmitEditing: submitNativeLinkDialog,
+              placeholder: nativeLinkDialogLabels.inputPlaceholder,
+              returnKeyType: "done",
+              style: styles3.nativeLinkDialogInput,
+              value: nativeLinkInputValue
             }
           ),
-          interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(
-            View,
-            {
-              pointerEvents: "box-none",
-              style: styleInspectorPlacement === "top-left" ? {
-                position: "absolute",
-                left: 16,
-                top: 104,
-                alignItems: "flex-start"
-              } : {
-                position: "absolute",
-                left: 16,
-                right: 16,
-                bottom: 84,
-                alignItems: "center"
-              },
-              children: /* @__PURE__ */ jsx(
-                NativeVectorStyleInspector,
-                {
-                  toolId: activeStyleToolId,
-                  value: strokeStyleState,
-                  onChange: patchCurrentStrokeStyle
-                }
-              )
-            }
-          ) : null,
-          toolbar && /* @__PURE__ */ jsx(
-            View,
-            {
-              style: {
-                position: "absolute",
-                bottom: 16,
-                left: 16,
-                right: 16,
-                flexDirection: "row",
-                justifyContent: "center",
-                alignItems: "center"
-              },
-              pointerEvents: "box-none",
-              children: toolbar
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          Modal,
-          {
-            animationType: "fade",
-            transparent: true,
-            visible: pendingNativeLinkRequest !== null,
-            onRequestClose: closeNativeLinkDialog,
-            children: /* @__PURE__ */ jsx(View, { style: styles3.nativeLinkDialogBackdrop, children: /* @__PURE__ */ jsxs(View, { style: styles3.nativeLinkDialogCard, children: [
-              /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogTitle, children: nativeLinkDialogLabels.title }),
-              /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogDescription, children: nativeLinkDialogLabels.description }),
-              /* @__PURE__ */ jsx(
-                TextInput,
-                {
-                  accessibilityLabel: nativeLinkDialogLabels.title,
-                  autoCapitalize: "none",
-                  autoCorrect: false,
-                  keyboardType: "url",
-                  onChangeText: setNativeLinkInputValue,
-                  onSubmitEditing: submitNativeLinkDialog,
-                  placeholder: nativeLinkDialogLabels.inputPlaceholder,
-                  returnKeyType: "done",
-                  style: styles3.nativeLinkDialogInput,
-                  value: nativeLinkInputValue
-                }
-              ),
-              /* @__PURE__ */ jsxs(View, { style: styles3.nativeLinkDialogActions, children: [
-                /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    accessibilityRole: "button",
-                    onPress: closeNativeLinkDialog,
-                    style: ({ pressed }) => [
-                      styles3.nativeLinkDialogButton,
-                      pressed ? styles3.nativeLinkDialogButtonPressed : void 0
-                    ],
-                    children: /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogButtonText, children: nativeLinkDialogLabels.cancelLabel })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    accessibilityRole: "button",
-                    accessibilityState: { disabled: !nativeLinkCanSubmit },
-                    disabled: !nativeLinkCanSubmit,
-                    onPress: submitNativeLinkDialog,
-                    style: ({ pressed }) => [
-                      styles3.nativeLinkDialogButton,
-                      styles3.nativeLinkDialogPrimaryButton,
-                      pressed && nativeLinkCanSubmit ? styles3.nativeLinkDialogPrimaryButtonPressed : void 0,
-                      !nativeLinkCanSubmit ? styles3.nativeLinkDialogDisabledButton : void 0
-                    ],
-                    children: /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogPrimaryButtonText, children: nativeLinkDialogLabels.addLabel })
-                  }
-                )
-              ] })
-            ] }) })
-          }
-        )
-      ]
-    }
-  );
+          /* @__PURE__ */ jsxs(View, { style: styles3.nativeLinkDialogActions, children: [
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                onPress: closeNativeLinkDialog,
+                style: ({ pressed }) => [
+                  styles3.nativeLinkDialogButton,
+                  pressed ? styles3.nativeLinkDialogButtonPressed : void 0
+                ],
+                children: /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogButtonText, children: nativeLinkDialogLabels.cancelLabel })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityState: { disabled: !nativeLinkCanSubmit },
+                disabled: !nativeLinkCanSubmit,
+                onPress: submitNativeLinkDialog,
+                style: ({ pressed }) => [
+                  styles3.nativeLinkDialogButton,
+                  styles3.nativeLinkDialogPrimaryButton,
+                  pressed && nativeLinkCanSubmit ? styles3.nativeLinkDialogPrimaryButtonPressed : void 0,
+                  !nativeLinkCanSubmit ? styles3.nativeLinkDialogDisabledButton : void 0
+                ],
+                children: /* @__PURE__ */ jsx(Text, { style: styles3.nativeLinkDialogPrimaryButtonText, children: nativeLinkDialogLabels.addLabel })
+              }
+            )
+          ] })
+        ] }) })
+      }
+    )
+  ] });
 });
 var styles3 = StyleSheet.create({
   nativeLinkDialogBackdrop: {