@archireport/react-native-drawing 0.2.0

package/src/components/TextEditModal.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useCallback } from "react";
+import {
+  Modal,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+
+interface TextEditModalProps {
+  visible: boolean;
+  initialValue: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+export const TextEditModal = React.memo(function TextEditModal({
+  visible,
+  initialValue,
+  onSubmit,
+  onCancel,
+}: TextEditModalProps) {
+  const [text, setText] = useState(initialValue);
+
+  const handleSubmit = useCallback(() => {
+    if (text.trim()) {
+      onSubmit(text.trim());
+    }
+  }, [text, onSubmit]);
+
+  // Reset text when modal becomes visible
+  React.useEffect(() => {
+    if (visible) {
+      setText(initialValue);
+    }
+  }, [visible, initialValue]);
+
+  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}>Edit Text</Text>
+          <TextInput
+            style={styles.input}
+            value={text}
+            onChangeText={setText}
+            placeholder="Enter text..."
+            placeholderTextColor="#999"
+            multiline
+            autoFocus
+            textAlignVertical="top"
+          />
+          <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}>Done</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: 400,
+  },
+  title: {
+    color: "#FFFFFF",
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 16,
+    textAlign: "center",
+  },
+  input: {
+    backgroundColor: "#1C1C1E",
+    borderRadius: 10,
+    padding: 12,
+    color: "#FFFFFF",
+    fontSize: 16,
+    minHeight: 100,
+    marginBottom: 16,
+  },
+  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/Toolbar.tsx

@@ -0,0 +1,254 @@
+import React, { useCallback } from "react";
+import {
+  View,
+  TouchableOpacity,
+  ScrollView,
+  StyleSheet,
+  Text,
+  Image,
+  useWindowDimensions,
+  type ImageSourcePropType,
+} from "react-native";
+import type { ToolType } from "../types";
+
+interface ToolbarProps {
+  currentTool: ToolType | null;
+  onSelectTool: (tool: ToolType | null) => void;
+  onUndo: () => void;
+  canUndo: boolean;
+  isZoomed: boolean;
+  onResetZoom: () => void;
+}
+
+interface ToolIconSet {
+  default: ImageSourcePropType;
+  active: ImageSourcePropType;
+}
+
+interface ToolDefinition {
+  type: ToolType;
+  label: string;
+  icons: ToolIconSet;
+}
+
+const BUTTON_SIZE = 44;
+const BUTTON_GAP = 4;
+const TOOLBAR_HORIZONTAL_PADDING = 12;
+
+const TOOLS: ToolDefinition[] = [
+  {
+    type: "freehand",
+    label: "Pen",
+    icons: {
+      default: require("../assets/toolbar-icons/freehand.png"),
+      active: require("../assets/toolbar-icons/freehand-enabled.png"),
+    },
+  },
+  {
+    type: "line",
+    label: "Line",
+    icons: {
+      default: require("../assets/toolbar-icons/line.png"),
+      active: require("../assets/toolbar-icons/line-enabled.png"),
+    },
+  },
+  {
+    type: "arrow",
+    label: "Arrow",
+    icons: {
+      default: require("../assets/toolbar-icons/arrow.png"),
+      active: require("../assets/toolbar-icons/arrow-enabled.png"),
+    },
+  },
+  {
+    type: "rectangle",
+    label: "Rect",
+    icons: {
+      default: require("../assets/toolbar-icons/rectangle.png"),
+      active: require("../assets/toolbar-icons/rectangle-enabled.png"),
+    },
+  },
+  {
+    type: "circle",
+    label: "Circle",
+    icons: {
+      default: require("../assets/toolbar-icons/circle.png"),
+      active: require("../assets/toolbar-icons/circle-enabled.png"),
+    },
+  },
+  {
+    type: "polygon",
+    label: "Polygon",
+    icons: {
+      default: require("../assets/toolbar-icons/polygon.png"),
+      active: require("../assets/toolbar-icons/polygon-enabled.png"),
+    },
+  },
+  {
+    type: "measure",
+    label: "Measure",
+    icons: {
+      default: require("../assets/toolbar-icons/measure.png"),
+      active: require("../assets/toolbar-icons/measure-enabled.png"),
+    },
+  },
+  {
+    type: "text",
+    label: "Text",
+    icons: {
+      default: require("../assets/toolbar-icons/text.png"),
+      active: require("../assets/toolbar-icons/text-enabled.png"),
+    },
+  },
+];
+
+const FULL_TOOLBAR_WIDTH =
+  TOOLS.length * BUTTON_SIZE +
+  BUTTON_SIZE * 2 + // undo + reset
+  BUTTON_GAP * (TOOLS.length + 1) +
+  TOOLBAR_HORIZONTAL_PADDING * 2;
+
+export const Toolbar = React.memo(function Toolbar({
+  currentTool,
+  onSelectTool,
+  onUndo,
+  canUndo,
+  isZoomed,
+  onResetZoom,
+}: ToolbarProps) {
+  const { width } = useWindowDimensions();
+  const availableWidth = Math.max(width - 24, BUTTON_SIZE * 4);
+  const shellWidth = Math.min(availableWidth, 560);
+  const shouldCenterContent = shellWidth >= FULL_TOOLBAR_WIDTH;
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.shell, { width: shellWidth }]}>
+        <ScrollView
+          horizontal
+          bounces={false}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={[
+            styles.scrollContent,
+            shouldCenterContent && styles.scrollContentCentered,
+          ]}
+        >
+          {TOOLS.map((tool) => (
+            <ToolButton
+              key={tool.type}
+              tool={tool}
+              isActive={currentTool === tool.type}
+              onPress={onSelectTool}
+            />
+          ))}
+          <TouchableOpacity
+            accessibilityLabel="Undo"
+            style={[styles.button, !canUndo && styles.buttonDisabled]}
+            onPress={onUndo}
+            disabled={!canUndo}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.undoIcon, !canUndo && styles.iconDisabled]}>
+              ↩
+            </Text>
+          </TouchableOpacity>
+
+          {/* Reset zoom */}
+          {isZoomed && (
+            <TouchableOpacity
+              accessibilityLabel="Reset zoom"
+              style={styles.button}
+              onPress={onResetZoom}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.undoIcon}>⊙</Text>
+            </TouchableOpacity>
+          )}
+        </ScrollView>
+      </View>
+    </View>
+  );
+});
+
+interface ToolButtonProps {
+  tool: ToolDefinition;
+  isActive: boolean;
+  onPress: (tool: ToolType) => void;
+}
+
+const ToolButton = React.memo(function ToolButton({
+  tool,
+  isActive,
+  onPress,
+}: ToolButtonProps) {
+  const handlePress = useCallback(() => {
+    onPress(tool.type);
+  }, [onPress, tool.type]);
+
+  return (
+    <TouchableOpacity
+      accessibilityLabel={tool.label}
+      style={styles.button}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
+      <Image
+        source={isActive ? tool.icons.active : tool.icons.default}
+        style={[styles.iconImage, isActive && styles.iconImageActive]}
+        resizeMode="contain"
+      />
+    </TouchableOpacity>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  shell: {
+    backgroundColor: "rgba(0, 0, 0, 0.88)",
+    borderRadius: 18,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(255, 255, 255, 0.16)",
+  },
+  scrollContent: {
+    alignItems: "center",
+    flexGrow: 1,
+    paddingHorizontal: TOOLBAR_HORIZONTAL_PADDING,
+    paddingVertical: 10,
+    gap: BUTTON_GAP,
+  },
+  scrollContentCentered: {
+    justifyContent: "center",
+  },
+  button: {
+    width: BUTTON_SIZE,
+    height: BUTTON_SIZE,
+    borderRadius: BUTTON_SIZE / 2,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "transparent",
+  },
+  buttonDisabled: {
+    opacity: 0.4,
+  },
+  iconImage: {
+    width: 26,
+    height: 26,
+  },
+  iconImageActive: {
+    width: 36,
+    height: 36,
+  },
+  iconDisabled: {
+    color: "#666666",
+  },
+  undoIcon: {
+    fontSize: 24,
+    lineHeight: 24,
+    color: "#FFFFFF",
+  },
+});

package/src/components/ZoomBadge.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming,
+  type SharedValue,
+} from "react-native-reanimated";
+
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+
+const HINT_DURATION = 3000;
+const FADE_DURATION = 400;
+
+interface ZoomBadgeProps {
+  scale: SharedValue<number>;
+  onPress: () => void;
+}
+
+export const ZoomBadge = React.memo(function ZoomBadge({
+  scale,
+  onPress,
+}: ZoomBadgeProps) {
+  const isZoomed = useDerivedValue(() => scale.value > 1.02);
+  const [hintExpired, setHintExpired] = React.useState(false);
+  const [mounted, setMounted] = React.useState(true);
+  const [zoomed, setZoomed] = React.useState(false);
+
+  // Start fade-out after HINT_DURATION, then unmount after animation
+  React.useEffect(() => {
+    const fadeTimer = setTimeout(() => setHintExpired(true), HINT_DURATION);
+    const unmountTimer = setTimeout(
+      () => setMounted(false),
+      HINT_DURATION + FADE_DURATION,
+    );
+    return () => {
+      clearTimeout(fadeTimer);
+      clearTimeout(unmountTimer);
+    };
+  }, []);
+
+  // Track zoom state on JS thread
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      setZoomed(isZoomed.value);
+    }, 100);
+    return () => clearInterval(id);
+  }, [isZoomed]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const show = isZoomed.value || !hintExpired;
+    return {
+      opacity: withTiming(show ? 1 : 0, { duration: FADE_DURATION }),
+      transform: [
+        { scale: withTiming(show ? 1 : 0.85, { duration: FADE_DURATION }) },
+      ],
+    };
+  }, [hintExpired]);
+
+  const zoomText = useDerivedValue(() => {
+    const s = Math.round(scale.value * 10) / 10;
+    return `${s}x`;
+  });
+
+  // Keep mounted while hint is visible OR zoomed
+  if (!mounted && !zoomed) return null;
+
+  return (
+    <AnimatedTouchable
+      style={[styles.badge, animatedStyle]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      {zoomed ? (
+        <ZoomLabel zoomText={zoomText} />
+      ) : (
+        <View style={styles.iconRow}>
+          <MagnifyIcon />
+          <Text style={styles.hintText}>Pinch to zoom</Text>
+        </View>
+      )}
+    </AnimatedTouchable>
+  );
+});
+
+function ZoomLabel({ zoomText }: { zoomText: SharedValue<string> }) {
+  const [text, setText] = React.useState("1x");
+
+  React.useEffect(() => {
+    const id = setInterval(() => {
+      const val = zoomText.value;
+      setText((prev) => (prev !== val ? val : prev));
+    }, 100);
+    return () => clearInterval(id);
+  }, [zoomText]);
+
+  return <Text style={styles.text}>{text}</Text>;
+}
+
+function MagnifyIcon() {
+  return (
+    <View style={styles.magnifyIcon}>
+      {/* Lens circle */}
+      <View style={styles.lens} />
+      {/* Handle */}
+      <View style={styles.handle} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  badge: {
+    position: "absolute",
+    top: 12,
+    alignSelf: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.55)",
+    borderRadius: 14,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "rgba(255, 255, 255, 0.25)",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  text: {
+    color: "#FFFFFF",
+    fontSize: 13,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"],
+  },
+  iconRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+  },
+  hintText: {
+    color: "rgba(255, 255, 255, 0.9)",
+    fontSize: 12,
+    fontWeight: "500",
+  },
+  magnifyIcon: {
+    width: 14,
+    height: 14,
+    position: "relative",
+  },
+  lens: {
+    width: 9,
+    height: 9,
+    borderRadius: 5,
+    borderWidth: 1.5,
+    borderColor: "#FFFFFF",
+    position: "absolute",
+    top: 0,
+    left: 0,
+  },
+  handle: {
+    width: 5,
+    height: 1.5,
+    backgroundColor: "#FFFFFF",
+    borderRadius: 1,
+    position: "absolute",
+    bottom: 1.5,
+    right: 0,
+    transform: [{ rotate: "45deg" }],
+  },
+});