@buoy-gg/image-overlay 7.0.40 → 7.0.42

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

@@ -1,452 +1 @@
-"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 { absoluteFill, monoFont } from "@buoy-gg/shared-ui";
-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 = {
-    ...absoluteFill,
-    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: monoFont
-  },
-  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
-  }
-});
+"use strict";import te,{useState as z,useEffect as N,useRef as B,useMemo as O,useCallback as U}from"react";import{View as i,Text as V,Image as Z,StyleSheet as j,PanResponder as k,Dimensions as J}from"react-native";import{absoluteFill as K,monoFont as Q}from"@buoy-gg/shared-ui";import{ImageOverlayController as R}from"../utils/ImageOverlayController";import{jsx as r,Fragment as q,jsxs as D}from"react/jsx-runtime";function G({uri:P,style:C,invertX:W,invertY:M}){const d=[];if(W)d.push({scaleX:-1});if(M)d.push({scaleY:-1});const x=d.length>0?{transform:d}:{};return r(Z,{testID:"buoy-internal-image-overlay",source:{uri:P},style:[C,x],pointerEvents:"none"})}const I=30;function $({imageUri:P,x:C,y:W,width:M,height:d,opacity:x,aspectRatio:m,invertX:n,invertY:X,locked:l}){const[b,f]=z(false);const _=B({x:0,y:0});const Y=B({x:0,y:0,width:0,height:0});const c=J.get("window");const E=O(()=>k.create({onStartShouldSetPanResponder:()=>!l,onMoveShouldSetPanResponder:(u,s)=>!l&&(Math.abs(s.dx)>2||Math.abs(s.dy)>2),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{const u=R.getState();_.current={x:u.freeX,y:u.freeY};f(true)},onPanResponderMove:(u,s)=>{const H=R.getState();const p=Math.max(0,Math.min(_.current.x+s.dx,c.width-H.freeWidth));const g=Math.max(0,Math.min(_.current.y+s.dy,c.height-H.freeHeight));R.setFreePosition(p,g)},onPanResponderRelease:()=>f(false),onPanResponderTerminate:()=>f(false)}),[c.width,c.height,l]);const w=U(u=>k.create({onStartShouldSetPanResponder:()=>!l,onMoveShouldSetPanResponder:()=>!l,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{const s=R.getState();Y.current={x:s.freeX,y:s.freeY,width:s.freeWidth,height:s.freeHeight};f(true)},onPanResponderMove:(s,H)=>{const{dx:p,dy:g}=H;if(Math.abs(p)<.5&&Math.abs(g)<.5)return;const e=Y.current;const h=m>0?m:e.width/e.height;const A=Math.abs(p);const T=Math.abs(g);const L=A>=T;let t;let a;let v=e.x;let y=e.y;switch(u){case"bottomRight":{t=L?e.width+p:(e.height+g)*h;t=Math.max(I,Math.min(t,c.width-e.x));a=t/h;break}case"bottomLeft":{t=L?e.width-p:(e.height+g)*h;t=Math.max(I,t);a=t/h;v=e.x+e.width-t;v=Math.max(0,v);t=Math.min(t,e.x+e.width);a=t/h;break}case"topRight":{t=L?e.width+p:(e.height-g)*h;t=Math.max(I,Math.min(t,c.width-e.x));a=t/h;y=e.y+e.height-a;y=Math.max(0,y);a=Math.min(a,e.y+e.height);t=a*h;break}case"topLeft":{t=L?e.width-p:(e.height-g)*h;t=Math.max(I,t);a=t/h;v=e.x+e.width-t;y=e.y+e.height-a;v=Math.max(0,v);y=Math.max(0,y);t=Math.min(t,e.x+e.width);a=t/h;y=e.y+e.height-a;break}}t=Math.max(I,Math.round(t));a=Math.max(I,Math.round(a));R.setFreeDimensions(t,a,Math.round(v),Math.round(y))},onPanResponderRelease:()=>f(false),onPanResponderTerminate:()=>f(false)}),[c.width,c.height,m,l]);const S=O(()=>({topLeft:w("topLeft"),topRight:w("topRight"),bottomLeft:w("bottomLeft"),bottomRight:w("bottomRight")}),[w]);const F={...K,opacity:x};return D(i,{style:{position:"absolute",left:C,top:W,width:M,height:d},pointerEvents:l?"none":"auto",children:[r(i,{style:j.absoluteFill,...l?{}:E.panHandlers,children:r(G,{uri:P,style:F,invertX:n,invertY:X})}),r(i,{pointerEvents:"none",style:[o.freeBorder,b&&o.freeBorderActive,l&&o.freeBorderLocked]}),!l&&D(q,{children:[r(i,{...S.topLeft.panHandlers,style:[o.cornerWrapper,{top:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:r(i,{style:[o.cornerHandle,b&&o.cornerHandleActive]})}),r(i,{...S.topRight.panHandlers,style:[o.cornerWrapper,{top:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:r(i,{style:[o.cornerHandle,b&&o.cornerHandleActive]})}),r(i,{...S.bottomLeft.panHandlers,style:[o.cornerWrapper,{bottom:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:r(i,{style:[o.cornerHandle,b&&o.cornerHandleActive]})}),r(i,{...S.bottomRight.panHandlers,style:[o.cornerWrapper,{bottom:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:r(i,{style:[o.cornerHandle,b&&o.cornerHandleActive]})})]})]})}export function ImageOverlayStandalone(){const[P,C]=z(()=>R.getState());N(()=>{return R.subscribe(C)},[]);const{mode:W,enabled:M,imageUri:d,imageWidth:x,imageHeight:m,targetRect:n,targetLabel:X,showOutline:l,opacity:b,scale:f,offsetX:_,offsetY:Y,invertX:c,invertY:E,locked:w,freeX:S,freeY:F,freeWidth:u,freeHeight:s}=P;const H=x&&m&&m>0?x/m:0;if(W==="free"&&M&&d){return r(i,{style:o.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:r($,{imageUri:d,x:S,y:F,width:u,height:s,opacity:b,aspectRatio:H,invertX:c,invertY:E,locked:w})})}if(!n)return null;const p=M&&d;return D(i,{style:o.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:[l&&D(q,{children:[r(i,{pointerEvents:"none",nativeID:"__image_overlay_highlight__",style:[o.highlight,{left:n.x-3,top:n.y-3,width:n.width+6,height:n.height+6}]}),X&&r(i,{pointerEvents:"none",style:[o.label,{left:n.x,top:n.y-20}],children:r(V,{style:o.labelText,children:X})})]}),p&&(()=>{const g=(x??n.width)*f;const e=(m??n.height)*f;const h=n.x+n.width/2;const A=n.y+n.height/2;const T={position:"absolute",left:h-g/2+_,top:A-e/2+Y,width:g,height:e,opacity:b};return r(G,{uri:d,style:T,invertX:c,invertY:E})})()]})}const o=j.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:Q},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:1e3,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:.8,shadowRadius:6}});