canvu-react 0.4.61 → 0.4.62

package/dist/native.cjs

@@ -5374,35 +5374,6 @@ function duplicateNativeSelectedShapes(input) {
   });
 }
 
-// src/native/native-style-inspector-overlay.ts
-function resolveNativeStyleInspectorOverlayStyle({
-  placement,
-  overlayElevation,
-  overlayStyle,
-  overlayZIndex
-}) {
-  const placementStyle = placement === "top-left" ? {
-    position: "absolute",
-    left: 16,
-    top: 104,
-    alignItems: "flex-start"
-  } : {
-    position: "absolute",
-    left: 16,
-    right: 16,
-    bottom: 84,
-    alignItems: "center"
-  };
-  return [
-    placementStyle,
-    {
-      zIndex: overlayZIndex,
-      elevation: overlayElevation
-    },
-    overlayStyle
-  ];
-}
-
 // src/native/native-transient-items.ts
 function moveNativeTransientItems({
   items,
@@ -5699,8 +5670,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   overlay,
   toolbar,
   showStyleInspector = false,
-  styleInspectorPlacement = "bottom",
-  styleInspectorOverlayStyle
+  styleInspectorPlacement = "bottom"
 }, ref) {
   const [size, setSize] = react.useState({ width: 0, height: 0 });
   const cameraRef = react.useRef(null);
@@ -6934,12 +6904,22 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         reactNative.View,
         {
           pointerEvents: "box-none",
-          style: resolveNativeStyleInspectorOverlayStyle({
-            placement: styleInspectorPlacement,
-            overlayElevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION,
-            overlayStyle: styleInspectorOverlayStyle,
-            overlayZIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX
-          }),
+          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__ */ jsxRuntime.jsx(
             NativeVectorStyleInspector,
             {
@@ -7168,6 +7148,139 @@ var styles4 = reactNative.StyleSheet.create({
     fontWeight: "700"
   }
 });
+var DEFAULT_NATIVE_VECTOR_ZOOM_CONTROLS_LABELS = {
+  zoomOut: "Zoom out",
+  zoomIn: "Zoom in"
+};
+function NativeVectorZoomControls({
+  zoomPercent,
+  onZoomOut,
+  onZoomIn,
+  labels,
+  disabled = false,
+  style,
+  buttonStyle,
+  iconStyle,
+  labelStyle
+}) {
+  const resolvedLabels = {
+    ...DEFAULT_NATIVE_VECTOR_ZOOM_CONTROLS_LABELS,
+    ...labels
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles5.root, style], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: resolvedLabels.zoomOut,
+        accessibilityState: { disabled },
+        disabled,
+        onPress: onZoomOut,
+        style: ({ pressed }) => [
+          styles5.button,
+          pressed && !disabled ? styles5.buttonPressed : null,
+          disabled ? styles5.buttonDisabled : null,
+          buttonStyle
+        ],
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [styles5.icon, disabled ? styles5.disabledText : null, iconStyle],
+            children: "-"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles5.labelWrap, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Text,
+      {
+        accessibilityRole: "text",
+        style: [styles5.label, disabled ? styles5.disabledText : null, labelStyle],
+        children: [
+          zoomPercent,
+          "%"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: resolvedLabels.zoomIn,
+        accessibilityState: { disabled },
+        disabled,
+        onPress: onZoomIn,
+        style: ({ pressed }) => [
+          styles5.button,
+          pressed && !disabled ? styles5.buttonPressed : null,
+          disabled ? styles5.buttonDisabled : null,
+          buttonStyle
+        ],
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: [styles5.icon, disabled ? styles5.disabledText : null, iconStyle],
+            children: "+"
+          }
+        )
+      }
+    )
+  ] });
+}
+var styles5 = reactNative.StyleSheet.create({
+  root: {
+    alignItems: "center",
+    backgroundColor: "#ffffff",
+    borderColor: "rgba(15, 23, 42, 0.12)",
+    borderRadius: 18,
+    borderWidth: 1,
+    elevation: 4,
+    flexDirection: "row",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    shadowColor: "#0f172a",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.16,
+    shadowRadius: 3
+  },
+  button: {
+    alignItems: "center",
+    borderRadius: 12,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  buttonPressed: {
+    backgroundColor: "rgba(15, 23, 42, 0.08)"
+  },
+  buttonDisabled: {
+    opacity: 0.54
+  },
+  icon: {
+    color: "#0f172a",
+    fontSize: 30,
+    fontWeight: "400",
+    includeFontPadding: false,
+    lineHeight: 32,
+    textAlign: "center"
+  },
+  labelWrap: {
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 64,
+    paddingHorizontal: 8
+  },
+  label: {
+    color: "#0f172a",
+    fontSize: 16,
+    fontWeight: "700",
+    includeFontPadding: false,
+    lineHeight: 20
+  },
+  disabledText: {
+    color: "#64748b"
+  }
+});
 
 exports.DEFAULT_LINK_CARD_SIZE = DEFAULT_LINK_CARD_SIZE;
 exports.DEFAULT_NATIVE_OVERFLOW_TOOL_IDS = DEFAULT_NATIVE_OVERFLOW_TOOL_IDS;
@@ -7180,6 +7293,7 @@ exports.NativeShapeRenderer = NativeShapeRenderer;
 exports.NativeVectorStyleInspector = NativeVectorStyleInspector;
 exports.NativeVectorToolbar = NativeVectorToolbar;
 exports.NativeVectorViewport = NativeVectorViewport;
+exports.NativeVectorZoomControls = NativeVectorZoomControls;
 exports.createFreehandStrokeItem = createFreehandStrokeItem;
 exports.createImageItem = createImageItem;
 exports.createLinkItem = createLinkItem;