@archireport/react-native-drawing 0.2.0

package/src/components/ColorPalette.tsx

@@ -0,0 +1,497 @@
+import React, { useCallback, useMemo, useState } from "react";
+import {
+  View,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  Pressable,
+  ScrollView,
+  Platform,
+  useWindowDimensions,
+} from "react-native";
+import { PRESET_COLORS, EXTENDED_COLOR_GROUPS } from "../utils/colors";
+
+interface ColorPaletteProps {
+  strokeColor: string;
+  onSelectColor: (color: string) => void;
+  direction?: "horizontal" | "vertical";
+}
+
+export const ColorPalette = React.memo(function ColorPalette({
+  strokeColor,
+  onSelectColor,
+  direction = "vertical",
+}: ColorPaletteProps) {
+  const [modalVisible, setModalVisible] = useState(false);
+
+  const isExtendedColor =
+    !PRESET_COLORS.includes(strokeColor as (typeof PRESET_COLORS)[number]);
+
+  const handleOpenModal = useCallback(() => {
+    setModalVisible(true);
+  }, []);
+
+  const handleSelectExtended = useCallback(
+    (color: string) => {
+      onSelectColor(color);
+      setModalVisible(false);
+    },
+    [onSelectColor]
+  );
+
+  const handleCloseModal = useCallback(() => {
+    setModalVisible(false);
+  }, []);
+
+  return (
+    <>
+      <View
+        style={[
+          styles.container,
+          direction === "horizontal"
+            ? styles.containerHorizontal
+            : styles.containerVertical,
+        ]}
+      >
+        {/* Multi-color button */}
+        <MultiColorButton
+          isSelected={isExtendedColor}
+          selectedColor={isExtendedColor ? strokeColor : undefined}
+          onPress={handleOpenModal}
+        />
+
+        {PRESET_COLORS.map((color, index) => (
+          <ColorButton
+            key={index}
+            color={color}
+            isSelected={strokeColor === color}
+            onPress={onSelectColor}
+          />
+        ))}
+      </View>
+
+      <ColorPickerModal
+        visible={modalVisible}
+        selectedColor={strokeColor}
+        onSelectColor={handleSelectExtended}
+        onClose={handleCloseModal}
+      />
+    </>
+  );
+});
+
+/* ─── Multi-color rainbow button ──────────────────────────────────────────── */
+
+interface MultiColorButtonProps {
+  isSelected: boolean;
+  selectedColor?: string;
+  onPress: () => void;
+}
+
+const RAINBOW_SEGMENTS = [
+  "#FF4F3D",
+  "#FFa345",
+  "#FACE15",
+  "#42E07D",
+  "#5E70FF",
+  "#A855F7",
+];
+
+const MultiColorButton = React.memo(function MultiColorButton({
+  isSelected,
+  selectedColor,
+  onPress,
+}: MultiColorButtonProps) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      activeOpacity={0.7}
+      style={[styles.buttonOuter, isSelected && styles.buttonOuterSelected]}
+    >
+      {isSelected && selectedColor ? (
+        <View style={[styles.colorCircle, { backgroundColor: selectedColor }]}>
+          <View style={styles.rainbowDot} />
+        </View>
+      ) : (
+        <View style={[styles.colorCircle, styles.rainbowCircle]}>
+          {RAINBOW_SEGMENTS.map((c, i) => (
+            <View
+              key={i}
+              style={[
+                styles.rainbowSegment,
+                {
+                  backgroundColor: c,
+                  transform: [{ rotate: `${i * 60}deg` }],
+                },
+              ]}
+            />
+          ))}
+          <View style={styles.rainbowCenter} />
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+});
+
+/* ─── Single color button ─────────────────────────────────────────────────── */
+
+interface ColorButtonProps {
+  color: string;
+  isSelected: boolean;
+  onPress: (color: string) => void;
+}
+
+const ColorButton = React.memo(function ColorButton({
+  color,
+  isSelected,
+  onPress,
+}: ColorButtonProps) {
+  const handlePress = useCallback(() => {
+    onPress(color);
+  }, [onPress, color]);
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      activeOpacity={0.7}
+      style={[styles.buttonOuter, isSelected && styles.buttonOuterSelected]}
+    >
+      <View style={[styles.colorCircle, { backgroundColor: color }]} />
+    </TouchableOpacity>
+  );
+});
+
+/* ─── Color picker modal ──────────────────────────────────────────────────── */
+
+interface ColorPickerModalProps {
+  visible: boolean;
+  selectedColor: string;
+  onSelectColor: (color: string) => void;
+  onClose: () => void;
+}
+
+const ColorPickerModal = React.memo(function ColorPickerModal({
+  visible,
+  selectedColor,
+  onSelectColor,
+  onClose,
+}: ColorPickerModalProps) {
+  const { width, height } = useWindowDimensions();
+  const shortestSide = Math.min(width, height);
+  const isTablet = shortestSide >= 768;
+  const horizontalPadding = isTablet ? 32 : 20;
+  const cardWidth = Math.min(
+    width - horizontalPadding * 2,
+    isTablet ? 760 : 380
+  );
+  const columns = Math.max(
+    4,
+    Math.min(isTablet ? 8 : 6, Math.floor(cardWidth / (isTablet ? 84 : 68)))
+  );
+  const swatchOuterSize = isTablet ? 76 : 60;
+  const swatchInnerSize = isTablet ? 58 : 46;
+  const cardRadius = isTablet ? 28 : 24;
+  const phoneBottomPadding = Platform.OS === "ios" ? 12 : 16;
+  const paletteRows = useMemo(
+    () =>
+      EXTENDED_COLOR_GROUPS.flatMap((group) =>
+        Array.from({ length: Math.ceil(group.length / columns) }, (_item, index) =>
+          group.slice(index * columns, index * columns + columns)
+        )
+      ),
+    [columns]
+  );
+
+  const renderSwatch = useCallback(
+    (item: string) => (
+      <TouchableOpacity
+        key={item}
+        onPress={() => onSelectColor(item)}
+        activeOpacity={0.7}
+        accessibilityRole="button"
+        accessibilityLabel={`Select color ${item}`}
+        style={[
+          styles.gridItem,
+          {
+            width: swatchOuterSize,
+            height: swatchOuterSize,
+            borderRadius: swatchOuterSize / 2,
+          },
+          selectedColor === item && styles.gridItemSelected,
+        ]}
+      >
+        <View
+          style={[
+            styles.gridCircle,
+            {
+              width: swatchInnerSize,
+              height: swatchInnerSize,
+              borderRadius: swatchInnerSize / 2,
+              backgroundColor: item,
+            },
+          ]}
+        >
+          {selectedColor === item && (
+            <View
+              style={[
+                styles.checkmark,
+                {
+                  width: swatchInnerSize * 0.34,
+                  height: swatchInnerSize * 0.34,
+                },
+              ]}
+            >
+              <View
+                style={[
+                  styles.checkmarkShort,
+                  {
+                    width: Math.max(2, Math.round(swatchInnerSize * 0.07)),
+                    height: Math.max(6, Math.round(swatchInnerSize * 0.18)),
+                    left: Math.round(swatchInnerSize * 0.04),
+                    top: Math.round(swatchInnerSize * 0.16),
+                  },
+                ]}
+              />
+              <View
+                style={[
+                  styles.checkmarkLong,
+                  {
+                    width: Math.max(2, Math.round(swatchInnerSize * 0.07)),
+                    height: Math.max(10, Math.round(swatchInnerSize * 0.28)),
+                    left: Math.round(swatchInnerSize * 0.16),
+                    top: Math.round(swatchInnerSize * 0.02),
+                  },
+                ]}
+              />
+            </View>
+          )}
+        </View>
+      </TouchableOpacity>
+    ),
+    [onSelectColor, selectedColor, swatchInnerSize, swatchOuterSize]
+  );
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.modalOverlay} onPress={onClose}>
+        {isTablet ? (
+          <Pressable
+            style={[
+              styles.modalCard,
+              styles.modalCardTablet,
+              {
+                width: cardWidth,
+                maxHeight: height * 0.84,
+                borderRadius: cardRadius,
+                padding: 28,
+              },
+            ]}
+            onPress={() => {}}
+          >
+            <View style={styles.modalHandle} />
+            <ScrollView
+              contentContainerStyle={styles.gridContainer}
+              showsVerticalScrollIndicator={false}
+            >
+              {paletteRows.map((row, index) => (
+                <View key={`row-${index}`} style={styles.gridRow}>
+                  {row.map(renderSwatch)}
+                </View>
+              ))}
+            </ScrollView>
+          </Pressable>
+        ) : (
+          <View
+            pointerEvents="box-none"
+            style={[
+              styles.modalPhoneSafeArea,
+              {
+                paddingHorizontal: horizontalPadding,
+                paddingBottom: phoneBottomPadding,
+              },
+            ]}
+          >
+            <Pressable
+              style={[
+                styles.modalCard,
+                styles.modalCardPhone,
+                {
+                  width: "100%",
+                  maxWidth: cardWidth,
+                  maxHeight: height * 0.74,
+                  borderRadius: cardRadius,
+                  padding: 18,
+                },
+              ]}
+              onPress={() => {}}
+            >
+              <View style={styles.modalHandle} />
+              <ScrollView
+                contentContainerStyle={styles.gridContainer}
+                showsVerticalScrollIndicator={false}
+              >
+                {paletteRows.map((row, index) => (
+                  <View key={`row-${index}`} style={styles.gridRow}>
+                    {row.map(renderSwatch)}
+                  </View>
+                ))}
+              </ScrollView>
+            </Pressable>
+          </View>
+        )}
+      </Pressable>
+    </Modal>
+  );
+});
+
+/* ─── Styles ──────────────────────────────────────────────────────────────── */
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+    gap: 6,
+  },
+  containerVertical: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  containerHorizontal: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  buttonOuter: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 2,
+    borderColor: "transparent",
+  },
+  buttonOuterSelected: {
+    borderColor: "#FFFFFF",
+  },
+  colorCircle: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.3)",
+    overflow: "hidden",
+  },
+
+  /* Rainbow button */
+  rainbowCircle: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  rainbowSegment: {
+    position: "absolute",
+    width: 12,
+    height: 12,
+    top: 0,
+    left: 6,
+    transformOrigin: "0% 100%",
+  },
+  rainbowCenter: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#222",
+    zIndex: 1,
+  },
+  rainbowDot: {
+    position: "absolute",
+    bottom: 1,
+    right: 1,
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.3)",
+    backgroundColor: "transparent",
+    overflow: "hidden",
+  },
+
+  /* Modal */
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalCard: {
+    backgroundColor: "#1C1C1E",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    shadowRadius: 12,
+    elevation: 12,
+  },
+  modalCardTablet: {
+    alignSelf: "center",
+  },
+  modalPhoneSafeArea: {
+    flex: 1,
+    width: "100%",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    paddingTop: 24,
+  },
+  modalCardPhone: {
+    alignSelf: "center",
+  },
+  modalHandle: {
+    alignSelf: "center",
+    width: 44,
+    height: 5,
+    borderRadius: 999,
+    marginBottom: 16,
+    backgroundColor: "rgba(255, 255, 255, 0.14)",
+  },
+  gridContainer: {
+    gap: 10,
+  },
+  gridRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 10,
+  },
+  gridItem: {
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 3,
+    borderColor: "transparent",
+  },
+  gridItemSelected: {
+    borderColor: "#FFFFFF",
+  },
+  gridCircle: {
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.2)",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  checkmark: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  checkmarkShort: {
+    position: "absolute",
+    backgroundColor: "#FFF",
+    borderRadius: 1,
+    transform: [{ rotate: "-45deg" }],
+  },
+  checkmarkLong: {
+    position: "absolute",
+    backgroundColor: "#FFF",
+    borderRadius: 1,
+    transform: [{ rotate: "35deg" }],
+  },
+});

package/src/components/LineWidthSlider.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import Slider from "@react-native-community/slider";
+
+interface LineWidthSliderProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  minimumValue?: number;
+  maximumValue?: number;
+  orientation?: "horizontal" | "vertical";
+}
+
+export const LineWidthSlider = React.memo(function LineWidthSlider({
+  value,
+  onValueChange,
+  minimumValue = 1,
+  maximumValue = 20,
+  orientation = "vertical",
+}: LineWidthSliderProps) {
+  const handleChange = useCallback(
+    (v: number) => {
+      onValueChange(Math.round(v));
+    },
+    [onValueChange],
+  );
+
+  return (
+    <View
+      style={[
+        styles.container,
+        orientation === "vertical" && styles.containerVertical,
+      ]}
+    >
+      <View
+        style={
+          orientation === "vertical"
+            ? styles.sliderWrapperVertical
+            : styles.sliderWrapperHorizontal
+        }
+      >
+        <Slider
+          style={
+            orientation === "vertical"
+              ? styles.sliderVertical
+              : styles.sliderHorizontal
+          }
+          value={value}
+          onValueChange={handleChange}
+          minimumValue={minimumValue}
+          maximumValue={maximumValue}
+          minimumTrackTintColor="#FFFFFF"
+          maximumTrackTintColor="rgba(255, 255, 255, 0.3)"
+          thumbTintColor="#FFFFFF"
+        />
+      </View>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+  containerVertical: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  sliderWrapperVertical: {
+    width: 40,
+    height: 200,
+    transform: [{ rotate: "-90deg" }],
+    justifyContent: "center",
+  },
+  sliderWrapperHorizontal: {
+    width: 150,
+    height: 40,
+    justifyContent: "center",
+  },
+  sliderVertical: {
+    width: 200,
+    height: 40,
+  },
+  sliderHorizontal: {
+    width: 150,
+    height: 40,
+  },
+});