@archireport/react-native-drawing 0.2.0

package/src/components/MeasurementEditModal.tsx

@@ -0,0 +1,163 @@
+import React, { useState, useCallback } from "react";
+import {
+  Modal,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+
+interface MeasurementEditModalProps {
+  visible: boolean;
+  initialValue: string;
+  initialUnit: string;
+  onSubmit: (value: string, unit: string) => void;
+  onCancel: () => void;
+}
+
+export const MeasurementEditModal = React.memo(function MeasurementEditModal({
+  visible,
+  initialValue,
+  initialUnit,
+  onSubmit,
+  onCancel,
+}: MeasurementEditModalProps) {
+  const [value, setValue] = useState(initialValue);
+  const [unit, setUnit] = useState(initialUnit);
+
+  React.useEffect(() => {
+    if (visible) {
+      setValue(initialValue);
+      setUnit(initialUnit);
+    }
+  }, [visible, initialValue, initialUnit]);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit(value || "0", unit || "cm");
+  }, [value, unit, onSubmit]);
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onCancel}
+    >
+      <KeyboardAvoidingView
+        style={styles.overlay}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+      >
+        <View style={styles.dialog}>
+          <Text style={styles.title}>Measurement</Text>
+
+          <View style={styles.inputRow}>
+            <TextInput
+              style={[styles.input, styles.valueInput]}
+              value={value}
+              onChangeText={setValue}
+              placeholder="Value"
+              placeholderTextColor="#999"
+              keyboardType="decimal-pad"
+              autoFocus
+            />
+            <TextInput
+              style={[styles.input, styles.unitInput]}
+              value={unit}
+              onChangeText={setUnit}
+              placeholder="Unit"
+              placeholderTextColor="#999"
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+          </View>
+
+          <View style={styles.buttons}>
+            <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
+              <Text style={styles.cancelText}>Cancel</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={styles.submitButton}
+              onPress={handleSubmit}
+            >
+              <Text style={styles.submitText}>OK</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+});
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 24,
+  },
+  dialog: {
+    backgroundColor: "#2C2C2E",
+    borderRadius: 14,
+    padding: 20,
+    width: "100%",
+    maxWidth: 320,
+  },
+  title: {
+    color: "#FFFFFF",
+    fontSize: 17,
+    fontWeight: "600",
+    marginBottom: 16,
+    textAlign: "center",
+  },
+  inputRow: {
+    flexDirection: "row",
+    gap: 10,
+    marginBottom: 16,
+  },
+  input: {
+    backgroundColor: "#1C1C1E",
+    borderRadius: 10,
+    padding: 12,
+    color: "#FFFFFF",
+    fontSize: 17,
+  },
+  valueInput: {
+    flex: 2,
+    textAlign: "center",
+  },
+  unitInput: {
+    flex: 1,
+    textAlign: "center",
+  },
+  buttons: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  cancelButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: "#3A3A3C",
+    alignItems: "center",
+  },
+  cancelText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+  },
+  submitButton: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: "#007AFF",
+    alignItems: "center",
+  },
+  submitText: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

package/src/components/MiniMap.tsx

@@ -0,0 +1,275 @@
+import React, { useRef } from "react";
+import { StyleSheet, type GestureResponderEvent } from "react-native";
+import {
+  Canvas,
+  Image,
+  Rect,
+  type SkImage,
+} from "@shopify/react-native-skia";
+import Animated, {
+  useAnimatedStyle,
+  withTiming,
+  type SharedValue,
+} from "react-native-reanimated";
+
+const MINIMAP_WIDTH = 100;
+const MINIMAP_BORDER_RADIUS = 6;
+
+interface MiniMapProps {
+  image: SkImage | null;
+  /** Image rect within the layout (fitted) */
+  imageRect: { x: number; y: number; width: number; height: number };
+  /** Viewport shared values */
+  scale: SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+  visible: boolean;
+  /** Clamp translate callback — keeps viewport in bounds */
+  onPanViewport?: (dtx: number, dty: number) => void;
+}
+
+export const MiniMap = React.memo(function MiniMap({
+  image,
+  imageRect,
+  scale: scaleSV,
+  translateX: txSV,
+  translateY: tySV,
+  visible,
+  onPanViewport,
+}: MiniMapProps) {
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: withTiming(visible && image && imageRect.width > 0 ? 1 : 0, {
+      duration: 250,
+    }),
+  }));
+
+  // Track last touch position for drag-to-pan
+  const lastTouchRef = useRef<{ x: number; y: number } | null>(null);
+
+  if (!image || imageRect.width === 0) return null;
+
+  const imgAspect = imageRect.width / imageRect.height;
+  const miniW = MINIMAP_WIDTH;
+  const miniH = miniW / imgAspect;
+
+  const handleTouchStart = (e: GestureResponderEvent) => {
+    const touch = e.nativeEvent;
+    lastTouchRef.current = { x: touch.locationX, y: touch.locationY };
+  };
+
+  const handleTouchMove = (e: GestureResponderEvent) => {
+    if (!lastTouchRef.current || !onPanViewport) return;
+    const touch = e.nativeEvent;
+    const dx = touch.locationX - lastTouchRef.current.x;
+    const dy = touch.locationY - lastTouchRef.current.y;
+    lastTouchRef.current = { x: touch.locationX, y: touch.locationY };
+
+    // Convert minimap drag to viewport translate delta
+    // Dragging right on minimap = viewing more right = translateX decreases
+    const s = scaleSV.value;
+    const dtx = -(dx * imageRect.width / miniW) * s;
+    const dty = -(dy * imageRect.height / miniH) * s;
+    onPanViewport(dtx, dty);
+  };
+
+  const handleTouchEnd = () => {
+    lastTouchRef.current = null;
+  };
+
+  return (
+    <Animated.View
+      style={[styles.container, { width: miniW + 4, height: miniH + 4 }, animatedStyle]}
+      pointerEvents={visible ? "auto" : "none"}
+      onStartShouldSetResponder={() => true}
+      onMoveShouldSetResponder={() => true}
+      onResponderGrant={handleTouchStart}
+      onResponderMove={handleTouchMove}
+      onResponderRelease={handleTouchEnd}
+      onResponderTerminate={handleTouchEnd}
+    >
+      <Canvas style={{ width: miniW, height: miniH }}>
+        {/* Thumbnail of the image */}
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={miniW}
+          height={miniH}
+          fit="contain"
+        />
+
+        {/* Visible region rect */}
+        <ViewportRect
+          miniW={miniW}
+          miniH={miniH}
+          imageRect={imageRect}
+          scale={scaleSV}
+          translateX={txSV}
+          translateY={tySV}
+        />
+      </Canvas>
+    </Animated.View>
+  );
+});
+
+/**
+ * Renders a translucent rectangle showing the currently visible area.
+ *
+ * The viewport transform is: screen = canvas * scale + translate
+ * So the visible canvas region in image-relative coords is:
+ *   visibleLeft = (imgOffX - tx/s ... but let's think in terms of the image area.
+ *
+ * Screen position of image top-left = imgOffX * scale + tx
+ * Screen position of image bottom-right = (imgOffX + imgW) * scale + tx
+ *
+ * The layout viewport is [0, 0, layoutW, layoutH].
+ * The image occupies [imgOffX, imgOffY, imgW, imgH] on screen at scale=1.
+ *
+ * Visible portion of image in normalized [0,1]:
+ *   left  = (imgOffX - (imgOffX * scale + tx)) / (imgW * scale)
+ *         = (imgOffX * (1 - scale) - tx) / (imgW * scale)
+ *   right = left + imgW / (imgW * scale) = left + 1/scale
+ *
+ * Actually simpler: the visible region on screen is the image area [imgOffX..imgOffX+imgW].
+ * A screen point sx maps to canvas point (sx - tx) / scale.
+ * So visible canvas x-range = [(imgOffX - tx)/scale, (imgOffX + imgW - tx)/scale].
+ * In image-relative coords (subtract imgOffX):
+ *   left  = (imgOffX - tx) / scale - imgOffX
+ *   right = (imgOffX + imgW - tx) / scale - imgOffX
+ * Normalized [0..1]:
+ *   nLeft  = left / imgW
+ *   nRight = right / imgW
+ */
+function ViewportRect({
+  miniW,
+  miniH,
+  imageRect,
+  scale,
+  translateX,
+  translateY,
+}: {
+  miniW: number;
+  miniH: number;
+  imageRect: { x: number; y: number; width: number; height: number };
+  scale: SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+}) {
+  const [rectState, setRectState] = React.useState({
+    x: 0,
+    y: 0,
+    w: miniW,
+    h: miniH,
+  });
+
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      const s = scale.value;
+      const tx = translateX.value;
+      const ty = translateY.value;
+      const { x: imgX, y: imgY, width: imgW, height: imgH } = imageRect;
+
+      // Canvas coords of visible region edges (the image display area on screen
+      // goes from imgX to imgX+imgW; map those screen coords to canvas coords)
+      const canvasLeft = (imgX - tx) / s;
+      const canvasTop = (imgY - ty) / s;
+      const canvasRight = (imgX + imgW - tx) / s;
+      const canvasBottom = (imgY + imgH - ty) / s;
+
+      // Image-relative
+      const relLeft = canvasLeft - imgX;
+      const relTop = canvasTop - imgY;
+      const relRight = canvasRight - imgX;
+      const relBottom = canvasBottom - imgY;
+
+      // Normalized [0..1]
+      const nLeft = Math.max(0, relLeft / imgW);
+      const nTop = Math.max(0, relTop / imgH);
+      const nRight = Math.min(1, relRight / imgW);
+      const nBottom = Math.min(1, relBottom / imgH);
+
+      const x = nLeft * miniW;
+      const y = nTop * miniH;
+      const w = (nRight - nLeft) * miniW;
+      const h = (nBottom - nTop) * miniH;
+
+      setRectState((prev) => {
+        if (
+          Math.abs(prev.x - x) < 0.5 &&
+          Math.abs(prev.y - y) < 0.5 &&
+          Math.abs(prev.w - w) < 0.5 &&
+          Math.abs(prev.h - h) < 0.5
+        ) {
+          return prev;
+        }
+        return { x, y, w, h };
+      });
+    }, 50);
+    return () => clearInterval(id);
+  }, [scale, translateX, translateY, imageRect, miniW, miniH]);
+
+  return (
+    <>
+      {/* Semi-transparent overlay outside visible rect */}
+      {/* Top band */}
+      <Rect
+        x={0}
+        y={0}
+        width={miniW}
+        height={Math.max(0, rectState.y)}
+        color="rgba(0, 0, 0, 0.55)"
+      />
+      {/* Bottom band */}
+      <Rect
+        x={0}
+        y={rectState.y + rectState.h}
+        width={miniW}
+        height={Math.max(0, miniH - rectState.y - rectState.h)}
+        color="rgba(0, 0, 0, 0.55)"
+      />
+      {/* Left band */}
+      <Rect
+        x={0}
+        y={rectState.y}
+        width={Math.max(0, rectState.x)}
+        height={rectState.h}
+        color="rgba(0, 0, 0, 0.55)"
+      />
+      {/* Right band */}
+      <Rect
+        x={rectState.x + rectState.w}
+        y={rectState.y}
+        width={Math.max(0, miniW - rectState.x - rectState.w)}
+        height={rectState.h}
+        color="rgba(0, 0, 0, 0.55)"
+      />
+      {/* Visible area border */}
+      <Rect
+        x={rectState.x + 0.5}
+        y={rectState.y + 0.5}
+        width={Math.max(0, rectState.w - 1)}
+        height={Math.max(0, rectState.h - 1)}
+        color="rgba(255, 255, 255, 0.6)"
+        style="stroke"
+        strokeWidth={1}
+      />
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 12,
+    right: 12,
+    borderRadius: MINIMAP_BORDER_RADIUS,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    overflow: "hidden",
+    // Subtle shadow instead of a hard border
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.5,
+    shadowRadius: 6,
+    elevation: 8,
+  },
+});

package/src/components/TextAnnotation.tsx

@@ -0,0 +1,198 @@
+import React, { useCallback, useMemo } from "react";
+import {
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+  type ViewStyle,
+} from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  runOnJS,
+} from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
+import type { TextObject, Size } from "../types";
+import { denormalize } from "../utils/coordinates";
+
+interface TextAnnotationProps {
+  object: TextObject;
+  canvasSize: Size;
+  imageOffset: { x: number; y: number };
+  isSelected: boolean;
+  onSelect: (id: string) => void;
+  onMove: (id: string, dx: number, dy: number) => void;
+  onDoubleTap: (id: string) => void;
+  onDelete: (id: string) => void;
+  viewScale: SharedValue<number>;
+  viewTranslateX: SharedValue<number>;
+  viewTranslateY: SharedValue<number>;
+}
+
+const textCursorStyle = { cursor: "grab" } as unknown as ViewStyle;
+
+export const TextAnnotation = React.memo(function TextAnnotation({
+  object,
+  canvasSize,
+  imageOffset,
+  isSelected,
+  onSelect,
+  onMove,
+  onDoubleTap,
+  onDelete,
+  viewScale,
+  viewTranslateX,
+  viewTranslateY,
+}: TextAnnotationProps) {
+  const pos = useMemo(() => {
+    const p = denormalize(object.position, canvasSize);
+    return { x: p.x + imageOffset.x, y: p.y + imageOffset.y };
+  }, [object.position, canvasSize, imageOffset]);
+  const width = object.width * canvasSize.width;
+  const height = object.height * canvasSize.height;
+
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  const handleDragEnd = useCallback(
+    (dx: number, dy: number) => {
+      // dx/dy are already in canvas space (divided by scale in gesture)
+      const normalizedDx = canvasSize.width > 0 ? dx / canvasSize.width : 0;
+      const normalizedDy = canvasSize.height > 0 ? dy / canvasSize.height : 0;
+      onMove(object.id, normalizedDx, normalizedDy);
+      translateX.value = 0;
+      translateY.value = 0;
+    },
+    [object.id, canvasSize, onMove, translateX, translateY],
+  );
+
+  const panGesture = Gesture.Pan()
+    .onBegin(() => {
+      "worklet";
+      runOnJS(onSelect)(object.id);
+    })
+    .onUpdate((e) => {
+      "worklet";
+      // Translate in screen space but represent in canvas space
+      translateX.value = e.translationX / viewScale.value;
+      translateY.value = e.translationY / viewScale.value;
+    })
+    .onEnd(() => {
+      "worklet";
+      const dx = translateX.value;
+      const dy = translateY.value;
+      runOnJS(handleDragEnd)(dx, dy);
+    });
+
+  const tapGesture = Gesture.Tap().onEnd(() => {
+    "worklet";
+    runOnJS(onSelect)(object.id);
+  });
+
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .onEnd(() => {
+      "worklet";
+      runOnJS(onDoubleTap)(object.id);
+    });
+
+  const composedGesture = Gesture.Exclusive(
+    doubleTapGesture,
+    tapGesture,
+    panGesture,
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const s = viewScale.value;
+    const vtx = viewTranslateX.value;
+    const vty = viewTranslateY.value;
+    return {
+      transform: [
+        // Apply drag offset in canvas space, then scale to screen space
+        { translateX: (pos.x + translateX.value) * s + vtx - pos.x },
+        { translateY: (pos.y + translateY.value) * s + vty - pos.y },
+        { scale: s },
+      ],
+    };
+  });
+
+  const bgColor = object.backgroundColor
+    ? object.backgroundColor.replace(
+        /[\d.]+\)$/,
+        `${object.backgroundAlpha ?? 0.5})`,
+      )
+    : "transparent";
+
+  return (
+    <GestureDetector gesture={composedGesture}>
+      <Animated.View
+        style={[
+          styles.container,
+          Platform.OS === "web" ? textCursorStyle : undefined,
+          {
+            left: pos.x,
+            top: pos.y,
+            width,
+            height,
+            backgroundColor: bgColor,
+            borderColor: isSelected ? "rgba(0, 122, 255, 0.8)" : "transparent",
+            borderWidth: isSelected ? 1 : 0,
+            borderStyle: isSelected ? "dashed" : "solid",
+          },
+          animatedStyle,
+        ]}
+      >
+        <Text
+          style={[styles.text, { color: object.color }]}
+          numberOfLines={0}
+          adjustsFontSizeToFit
+          minimumFontScale={0.035}
+        >
+          {object.value}
+        </Text>
+
+        {isSelected && (
+          <TouchableOpacity
+            style={styles.deleteButton}
+            onPress={() => onDelete(object.id)}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <Text style={styles.deleteIcon}>✕</Text>
+          </TouchableOpacity>
+        )}
+      </Animated.View>
+    </GestureDetector>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 4,
+    minWidth: 40,
+    minHeight: 24,
+  },
+  text: {
+    fontSize: 18,
+    textAlign: "center",
+  },
+  deleteButton: {
+    position: "absolute",
+    top: -12,
+    left: -12,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "rgba(255, 59, 48, 0.9)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  deleteIcon: {
+    color: "#FFFFFF",
+    fontSize: 12,
+    fontWeight: "bold",
+  },
+});