@buoy-gg/image-overlay 2.1.11

package/lib/module/imageOverlay/components/ImageOverlayStandalone.js

@@ -0,0 +1,451 @@
+"use strict";
+
+/**
+ * Standalone overlay that renders:
+ * - Component mode: highlight border + image overlay on a tagged component
+ * - Free mode: draggable, resizable image anywhere on screen (aspect-ratio locked)
+ *
+ * Supports Normal, Difference, and Multiply blend modes.
+ * Supports image inversion (flip X/Y) and position locking.
+ * Auto-mounted by FloatingDevTools alongside other standalone overlays.
+ */
+
+import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { View, Text, Image as RNImage, StyleSheet, PanResponder, Dimensions } from "react-native";
+import { ImageOverlayController } from "../utils/ImageOverlayController";
+
+// ─── Overlay Image (handles flip transforms) ─────────────────────────────────
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function OverlayImage({
+  uri,
+  style,
+  invertX,
+  invertY
+}) {
+  const transform = [];
+  if (invertX) transform.push({
+    scaleX: -1
+  });
+  if (invertY) transform.push({
+    scaleY: -1
+  });
+  const flipStyle = transform.length > 0 ? {
+    transform
+  } : {};
+  return /*#__PURE__*/_jsx(RNImage, {
+    source: {
+      uri
+    },
+    style: [style, flipStyle]
+    // @ts-ignore
+    ,
+    pointerEvents: "none"
+  });
+}
+
+// ─── Free Placement ───────────────────────────────────────────────────────────
+
+const FREE_MIN_SIZE = 30;
+function FreePlacement({
+  imageUri,
+  x,
+  y,
+  width,
+  height,
+  opacity,
+  aspectRatio,
+  invertX,
+  invertY,
+  locked
+}) {
+  const [isInteracting, setIsInteracting] = useState(false);
+  const startPosRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const startDimsRef = useRef({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const screen = Dimensions.get("window");
+
+  // ── Drag ──
+  const dragResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => !locked,
+    onMoveShouldSetPanResponder: (_, g) => !locked && (Math.abs(g.dx) > 2 || Math.abs(g.dy) > 2),
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: () => {
+      const s = ImageOverlayController.getState();
+      startPosRef.current = {
+        x: s.freeX,
+        y: s.freeY
+      };
+      setIsInteracting(true);
+    },
+    onPanResponderMove: (_, g) => {
+      const s = ImageOverlayController.getState();
+      const newX = Math.max(0, Math.min(startPosRef.current.x + g.dx, screen.width - s.freeWidth));
+      const newY = Math.max(0, Math.min(startPosRef.current.y + g.dy, screen.height - s.freeHeight));
+      ImageOverlayController.setFreePosition(newX, newY);
+    },
+    onPanResponderRelease: () => setIsInteracting(false),
+    onPanResponderTerminate: () => setIsInteracting(false)
+  }), [screen.width, screen.height, locked]);
+
+  // ── Aspect-ratio-locked corner resize ──
+  const createResizeHandler = useCallback(corner => PanResponder.create({
+    onStartShouldSetPanResponder: () => !locked,
+    onMoveShouldSetPanResponder: () => !locked,
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: () => {
+      const s = ImageOverlayController.getState();
+      startDimsRef.current = {
+        x: s.freeX,
+        y: s.freeY,
+        width: s.freeWidth,
+        height: s.freeHeight
+      };
+      setIsInteracting(true);
+    },
+    onPanResponderMove: (_, g) => {
+      const {
+        dx,
+        dy
+      } = g;
+      if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return;
+      const start = startDimsRef.current;
+      const ratio = aspectRatio > 0 ? aspectRatio : start.width / start.height;
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+      const useDx = absDx >= absDy;
+      let newWidth;
+      let newHeight;
+      let newX = start.x;
+      let newY = start.y;
+      switch (corner) {
+        case "bottomRight":
+          {
+            newWidth = useDx ? start.width + dx : (start.height + dy) * ratio;
+            newWidth = Math.max(FREE_MIN_SIZE, Math.min(newWidth, screen.width - start.x));
+            newHeight = newWidth / ratio;
+            break;
+          }
+        case "bottomLeft":
+          {
+            newWidth = useDx ? start.width - dx : (start.height + dy) * ratio;
+            newWidth = Math.max(FREE_MIN_SIZE, newWidth);
+            newHeight = newWidth / ratio;
+            newX = start.x + start.width - newWidth;
+            newX = Math.max(0, newX);
+            newWidth = Math.min(newWidth, start.x + start.width);
+            newHeight = newWidth / ratio;
+            break;
+          }
+        case "topRight":
+          {
+            newWidth = useDx ? start.width + dx : (start.height - dy) * ratio;
+            newWidth = Math.max(FREE_MIN_SIZE, Math.min(newWidth, screen.width - start.x));
+            newHeight = newWidth / ratio;
+            newY = start.y + start.height - newHeight;
+            newY = Math.max(0, newY);
+            newHeight = Math.min(newHeight, start.y + start.height);
+            newWidth = newHeight * ratio;
+            break;
+          }
+        case "topLeft":
+          {
+            newWidth = useDx ? start.width - dx : (start.height - dy) * ratio;
+            newWidth = Math.max(FREE_MIN_SIZE, newWidth);
+            newHeight = newWidth / ratio;
+            newX = start.x + start.width - newWidth;
+            newY = start.y + start.height - newHeight;
+            newX = Math.max(0, newX);
+            newY = Math.max(0, newY);
+            newWidth = Math.min(newWidth, start.x + start.width);
+            newHeight = newWidth / ratio;
+            newY = start.y + start.height - newHeight;
+            break;
+          }
+      }
+      newWidth = Math.max(FREE_MIN_SIZE, Math.round(newWidth));
+      newHeight = Math.max(FREE_MIN_SIZE, Math.round(newHeight));
+      ImageOverlayController.setFreeDimensions(newWidth, newHeight, Math.round(newX), Math.round(newY));
+    },
+    onPanResponderRelease: () => setIsInteracting(false),
+    onPanResponderTerminate: () => setIsInteracting(false)
+  }), [screen.width, screen.height, aspectRatio, locked]);
+  const resizeHandlers = useMemo(() => ({
+    topLeft: createResizeHandler("topLeft"),
+    topRight: createResizeHandler("topRight"),
+    bottomLeft: createResizeHandler("bottomLeft"),
+    bottomRight: createResizeHandler("bottomRight")
+  }), [createResizeHandler]);
+  const imageStyle = {
+    ...StyleSheet.absoluteFillObject,
+    opacity
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      position: "absolute",
+      left: x,
+      top: y,
+      width,
+      height
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: StyleSheet.absoluteFill,
+      ...(locked ? {} : dragResponder.panHandlers),
+      children: /*#__PURE__*/_jsx(OverlayImage, {
+        uri: imageUri,
+        style: imageStyle,
+        invertX: invertX,
+        invertY: invertY
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [styles.freeBorder, isInteracting && styles.freeBorderActive, locked && styles.freeBorderLocked]
+    }), !locked && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        ...resizeHandlers.topLeft.panHandlers,
+        style: [styles.cornerWrapper, {
+          top: -20,
+          left: -20
+        }],
+        hitSlop: {
+          top: 10,
+          left: 10,
+          right: 10,
+          bottom: 10
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        ...resizeHandlers.topRight.panHandlers,
+        style: [styles.cornerWrapper, {
+          top: -20,
+          right: -20
+        }],
+        hitSlop: {
+          top: 10,
+          left: 10,
+          right: 10,
+          bottom: 10
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        ...resizeHandlers.bottomLeft.panHandlers,
+        style: [styles.cornerWrapper, {
+          bottom: -20,
+          left: -20
+        }],
+        hitSlop: {
+          top: 10,
+          left: 10,
+          right: 10,
+          bottom: 10
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        ...resizeHandlers.bottomRight.panHandlers,
+        style: [styles.cornerWrapper, {
+          bottom: -20,
+          right: -20
+        }],
+        hitSlop: {
+          top: 10,
+          left: 10,
+          right: 10,
+          bottom: 10
+        },
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
+        })
+      })]
+    })]
+  });
+}
+
+// ─── Main Standalone Overlay ──────────────────────────────────────────────────
+
+export function ImageOverlayStandalone() {
+  const [state, setState] = useState(() => ImageOverlayController.getState());
+  useEffect(() => {
+    return ImageOverlayController.subscribe(setState);
+  }, []);
+  const {
+    mode,
+    enabled,
+    imageUri,
+    imageWidth,
+    imageHeight,
+    targetRect,
+    targetLabel,
+    showOutline,
+    opacity,
+    scale,
+    offsetX,
+    offsetY,
+    invertX,
+    invertY,
+    locked,
+    freeX,
+    freeY,
+    freeWidth,
+    freeHeight
+  } = state;
+  const aspectRatio = imageWidth && imageHeight && imageHeight > 0 ? imageWidth / imageHeight : 0;
+
+  // ─── Free Placement Mode ───
+  if (mode === "free" && enabled && imageUri) {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.overlay,
+      pointerEvents: "box-none",
+      nativeID: "image-overlay-standalone",
+      children: /*#__PURE__*/_jsx(FreePlacement, {
+        imageUri: imageUri,
+        x: freeX,
+        y: freeY,
+        width: freeWidth,
+        height: freeHeight,
+        opacity: opacity,
+        aspectRatio: aspectRatio,
+        invertX: invertX,
+        invertY: invertY,
+        locked: locked
+      })
+    });
+  }
+
+  // ─── Component Match Mode ───
+  if (!targetRect) return null;
+  const showImage = enabled && imageUri;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.overlay,
+    pointerEvents: "box-none",
+    nativeID: "image-overlay-standalone",
+    children: [showOutline && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        nativeID: "__image_overlay_highlight__",
+        style: [styles.highlight, {
+          left: targetRect.x - 3,
+          top: targetRect.y - 3,
+          width: targetRect.width + 6,
+          height: targetRect.height + 6
+        }]
+      }), targetLabel && /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: [styles.label, {
+          left: targetRect.x,
+          top: targetRect.y - 20
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.labelText,
+          children: targetLabel
+        })
+      })]
+    }), showImage && (() => {
+      const w = (imageWidth ?? targetRect.width) * scale;
+      const h = (imageHeight ?? targetRect.height) * scale;
+      const centerX = targetRect.x + targetRect.width / 2;
+      const centerY = targetRect.y + targetRect.height / 2;
+      const imgStyle = {
+        position: "absolute",
+        left: centerX - w / 2 + offsetX,
+        top: centerY - h / 2 + offsetY,
+        width: w,
+        height: h,
+        opacity
+      };
+      return /*#__PURE__*/_jsx(OverlayImage, {
+        uri: imageUri,
+        style: imgStyle,
+        invertX: invertX,
+        invertY: invertY
+      });
+    })()]
+  });
+}
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999999,
+    elevation: 999999,
+    borderWidth: 0
+  },
+  highlight: {
+    position: "absolute",
+    borderWidth: 2,
+    borderStyle: "dashed",
+    borderColor: "#20C997",
+    backgroundColor: "transparent"
+  },
+  label: {
+    position: "absolute",
+    backgroundColor: "#20C997",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 3
+  },
+  labelText: {
+    color: "#fff",
+    fontSize: 10,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  freeBorder: {
+    position: "absolute",
+    top: -6,
+    left: -6,
+    right: -6,
+    bottom: -6,
+    borderWidth: 1,
+    borderColor: "transparent",
+    borderRadius: 4
+  },
+  freeBorderActive: {
+    borderColor: "#20C997",
+    borderStyle: "dashed"
+  },
+  freeBorderLocked: {
+    borderColor: "#f59e0b",
+    borderStyle: "solid"
+  },
+  cornerWrapper: {
+    position: "absolute",
+    width: 24,
+    height: 24,
+    zIndex: 1000,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cornerHandle: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+    backgroundColor: "#20C997",
+    borderWidth: 2,
+    borderColor: "#fff"
+  },
+  cornerHandleActive: {
+    backgroundColor: "#10b981",
+    shadowColor: "#10b981",
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.8,
+    shadowRadius: 6
+  }
+});

package/lib/module/imageOverlay/components/OverlayControls.js

@@ -0,0 +1,249 @@
+"use strict";
+
+/**
+ * Controls for adjusting the overlay: opacity, scale, offset.
+ * Each control has a slider track plus -/+ stepper buttons.
+ */
+
+import { useRef, useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet, PanResponder } from "react-native";
+import { macOSColors, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SliderStepper({
+  label,
+  value,
+  min,
+  max,
+  step,
+  displayValue,
+  onChange
+}) {
+  const trackWidth = useRef(0);
+  const trackX = useRef(0);
+  const clamp = useCallback(v => Math.max(min, Math.min(max, v)), [min, max]);
+  const fraction = max > min ? (value - min) / (max - min) : 0;
+
+  // Keep current values in refs so PanResponder always uses latest props
+  const onChangeRef = useRef(onChange);
+  const clampRef = useRef(clamp);
+  const minRef = useRef(min);
+  const maxRef = useRef(max);
+  onChangeRef.current = onChange;
+  clampRef.current = clamp;
+  minRef.current = min;
+  maxRef.current = max;
+  const handleSliderEvent = useCallback(pageX => {
+    const x = pageX - trackX.current;
+    const frac = Math.max(0, Math.min(1, x / trackWidth.current));
+    const val = minRef.current + frac * (maxRef.current - minRef.current);
+    onChangeRef.current(clampRef.current(val));
+  }, []);
+  const panResponder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: evt => {
+      handleSliderEvent(evt.nativeEvent.pageX);
+    },
+    onPanResponderMove: evt => {
+      handleSliderEvent(evt.nativeEvent.pageX);
+    }
+  })).current;
+  const onTrackLayout = useCallback(e => {
+    trackWidth.current = e.nativeEvent.layout.width;
+    // We need pageX, measure the track view
+  }, []);
+  const trackRef = useRef(null);
+  const measureTrack = useCallback(() => {
+    trackRef.current?.measure?.((_x, _y, _w, _h, pageX) => {
+      trackX.current = pageX;
+    });
+  }, []);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.controlRow,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.label,
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.controlRight,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.stepperButton,
+        onPress: () => onChange(clamp(value - step)),
+        activeOpacity: 0.6,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.stepperButtonText,
+          children: "-"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sliderHitArea,
+        ...panResponder.panHandlers,
+        children: /*#__PURE__*/_jsxs(View, {
+          ref: trackRef,
+          style: styles.sliderTrack,
+          onLayout: e => {
+            onTrackLayout(e);
+            measureTrack();
+          },
+          pointerEvents: "none",
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.sliderFill, {
+              width: `${fraction * 100}%`
+            }]
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.sliderThumb, {
+              left: `${fraction * 100}%`
+            }]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.stepperButton,
+        onPress: () => onChange(clamp(value + step)),
+        activeOpacity: 0.6,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.stepperButtonText,
+          children: "+"
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.valueText,
+        children: displayValue
+      })]
+    })]
+  });
+}
+export function OverlayControls({
+  opacity,
+  scale,
+  offsetX,
+  offsetY,
+  onOpacityChange,
+  onScaleChange,
+  onOffsetChange,
+  opacityOnly
+}) {
+  if (opacityOnly) {
+    return /*#__PURE__*/_jsx(SliderStepper, {
+      label: "Opacity",
+      value: opacity,
+      min: 0,
+      max: 1,
+      step: 0.05,
+      displayValue: `${Math.round(opacity * 100)}%`,
+      onChange: onOpacityChange
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(SliderStepper, {
+      label: "Opacity",
+      value: opacity,
+      min: 0,
+      max: 1,
+      step: 0.05,
+      displayValue: `${Math.round(opacity * 100)}%`,
+      onChange: onOpacityChange
+    }), /*#__PURE__*/_jsx(SliderStepper, {
+      label: "Scale",
+      value: scale,
+      min: 0.05,
+      max: 3,
+      step: 0.05,
+      displayValue: `${Math.round(scale * 100)}%`,
+      onChange: onScaleChange
+    }), /*#__PURE__*/_jsx(SliderStepper, {
+      label: "Offset X",
+      value: offsetX,
+      min: -200,
+      max: 200,
+      step: 2,
+      displayValue: `${Math.round(offsetX)}px`,
+      onChange: v => onOffsetChange(Math.round(v), offsetY)
+    }), /*#__PURE__*/_jsx(SliderStepper, {
+      label: "Offset Y",
+      value: offsetY,
+      min: -200,
+      max: 200,
+      step: 2,
+      displayValue: `${Math.round(offsetY)}px`,
+      onChange: v => onOffsetChange(offsetX, Math.round(v))
+    })]
+  });
+}
+const THUMB_SIZE = 18;
+const styles = StyleSheet.create({
+  container: {
+    gap: 8
+  },
+  controlRow: {
+    paddingHorizontal: 12,
+    gap: 4
+  },
+  label: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  controlRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  stepperButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  stepperButtonText: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: macOSColors.text.primary,
+    lineHeight: 18
+  },
+  sliderHitArea: {
+    flex: 1,
+    paddingVertical: 20,
+    paddingHorizontal: 40,
+    marginVertical: -20,
+    marginHorizontal: -40
+  },
+  sliderTrack: {
+    height: 28,
+    justifyContent: "center",
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    overflow: "hidden"
+  },
+  sliderFill: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: buoyColors.primary + "30",
+    borderRadius: 5
+  },
+  sliderThumb: {
+    position: "absolute",
+    width: 4,
+    top: 4,
+    bottom: 4,
+    marginLeft: -2,
+    borderRadius: 2,
+    backgroundColor: buoyColors.primary
+  },
+  valueText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+    width: 45,
+    textAlign: "right",
+    fontFamily: "monospace"
+  }
+});