canvu-react 0.4.60 → 0.4.62

package/dist/native.d.cts

@@ -389,6 +389,39 @@ type NativeVectorViewportProps = {
 };
 declare const NativeVectorViewport: react.ForwardRefExoticComponent<NativeVectorViewportProps & react.RefAttributes<NativeVectorViewportHandle>>;
 
+type NativeVectorZoomControlsLabels = {
+    readonly zoomOut?: string;
+    readonly zoomIn?: string;
+};
+type NativeVectorZoomControlsProps = {
+    readonly zoomPercent: number;
+    readonly onZoomOut: () => void;
+    readonly onZoomIn: () => void;
+    readonly labels?: NativeVectorZoomControlsLabels;
+    readonly disabled?: boolean;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly buttonStyle?: StyleProp<ViewStyle>;
+    readonly iconStyle?: StyleProp<TextStyle>;
+    readonly labelStyle?: StyleProp<TextStyle>;
+};
+/**
+ * Native zoom-out, percentage, and zoom-in control for apps that compose
+ * {@link NativeVectorViewport} with their own floating chrome.
+ *
+ * Canvu owns the visual control and accessibility defaults; the consuming app
+ * should own placement, visibility, and camera wiring.
+ *
+ * @example
+ * ```tsx
+ * <NativeVectorZoomControls
+ *   zoomPercent={Math.round(camera.zoom * 100)}
+ *   onZoomOut={() => camera.setZoom(camera.zoom / 1.2)}
+ *   onZoomIn={() => camera.setZoom(camera.zoom * 1.2)}
+ * />
+ * ```
+ */
+declare function NativeVectorZoomControls({ zoomPercent, onZoomOut, onZoomIn, labels, disabled, style, buttonStyle, iconStyle, labelStyle, }: NativeVectorZoomControlsProps): react_jsx_runtime.JSX.Element;
+
 type NativeStyleColor = {
     readonly name: string;
     readonly hex: string;
@@ -520,4 +553,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, NativeVectorZoomControls, type NativeVectorZoomControlsLabels, type NativeVectorZoomControlsProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.d.ts

@@ -389,6 +389,39 @@ type NativeVectorViewportProps = {
 };
 declare const NativeVectorViewport: react.ForwardRefExoticComponent<NativeVectorViewportProps & react.RefAttributes<NativeVectorViewportHandle>>;
 
+type NativeVectorZoomControlsLabels = {
+    readonly zoomOut?: string;
+    readonly zoomIn?: string;
+};
+type NativeVectorZoomControlsProps = {
+    readonly zoomPercent: number;
+    readonly onZoomOut: () => void;
+    readonly onZoomIn: () => void;
+    readonly labels?: NativeVectorZoomControlsLabels;
+    readonly disabled?: boolean;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly buttonStyle?: StyleProp<ViewStyle>;
+    readonly iconStyle?: StyleProp<TextStyle>;
+    readonly labelStyle?: StyleProp<TextStyle>;
+};
+/**
+ * Native zoom-out, percentage, and zoom-in control for apps that compose
+ * {@link NativeVectorViewport} with their own floating chrome.
+ *
+ * Canvu owns the visual control and accessibility defaults; the consuming app
+ * should own placement, visibility, and camera wiring.
+ *
+ * @example
+ * ```tsx
+ * <NativeVectorZoomControls
+ *   zoomPercent={Math.round(camera.zoom * 100)}
+ *   onZoomOut={() => camera.setZoom(camera.zoom / 1.2)}
+ *   onZoomIn={() => camera.setZoom(camera.zoom * 1.2)}
+ * />
+ * ```
+ */
+declare function NativeVectorZoomControls({ zoomPercent, onZoomOut, onZoomIn, labels, disabled, style, buttonStyle, iconStyle, labelStyle, }: NativeVectorZoomControlsProps): react_jsx_runtime.JSX.Element;
+
 type NativeStyleColor = {
     readonly name: string;
     readonly hex: string;
@@ -520,4 +553,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeImagesMenu, type NativeImagesMenuLabels, type NativeImagesMenuProps, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, NativeVectorZoomControls, type NativeVectorZoomControlsLabels, type NativeVectorZoomControlsProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.js

@@ -7142,7 +7142,140 @@ var styles4 = 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__ */ jsxs(View, { style: [styles5.root, style], children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(
+          Text,
+          {
+            style: [styles5.icon, disabled ? styles5.disabledText : null, iconStyle],
+            children: "-"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles5.labelWrap, children: /* @__PURE__ */ jsxs(
+      Text,
+      {
+        accessibilityRole: "text",
+        style: [styles5.label, disabled ? styles5.disabledText : null, labelStyle],
+        children: [
+          zoomPercent,
+          "%"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(
+          Text,
+          {
+            style: [styles5.icon, disabled ? styles5.disabledText : null, iconStyle],
+            children: "+"
+          }
+        )
+      }
+    )
+  ] });
+}
+var styles5 = 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"
+  }
+});
 
-export { DEFAULT_LINK_CARD_SIZE, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, NativeImagesMenu, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorStyleInspector, NativeVectorToolbar, NativeVectorViewport, createFreehandStrokeItem, createImageItem, createLinkItem, createShapeId, getLinkData, isLinkItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { DEFAULT_LINK_CARD_SIZE, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, NativeImagesMenu, NativeInteractionOverlay, NativeSceneRenderer, NativeShapeRenderer, NativeVectorStyleInspector, NativeVectorToolbar, NativeVectorViewport, NativeVectorZoomControls, createFreehandStrokeItem, createImageItem, createLinkItem, createShapeId, getLinkData, isLinkItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
 //# sourceMappingURL=native.js.map
 //# sourceMappingURL=native.js.map