@buoy-gg/image-overlay 7.0.41 → 7.0.42

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

@@ -1,463 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ImageOverlayStandalone = ImageOverlayStandalone;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _ImageOverlayController = require("../utils/ImageOverlayController");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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.
- */
-
-// ─── Overlay Image (handles flip transforms) ─────────────────────────────────
-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__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
-    testID: "buoy-internal-image-overlay",
-    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] = (0, _react.useState)(false);
-  const startPosRef = (0, _react.useRef)({
-    x: 0,
-    y: 0
-  });
-  const startDimsRef = (0, _react.useRef)({
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0
-  });
-  const screen = _reactNative.Dimensions.get("window");
-
-  // ── Drag ──
-  const dragResponder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
-    onStartShouldSetPanResponder: () => !locked,
-    onMoveShouldSetPanResponder: (_, g) => !locked && (Math.abs(g.dx) > 2 || Math.abs(g.dy) > 2),
-    onPanResponderTerminationRequest: () => false,
-    onPanResponderGrant: () => {
-      const s = _ImageOverlayController.ImageOverlayController.getState();
-      startPosRef.current = {
-        x: s.freeX,
-        y: s.freeY
-      };
-      setIsInteracting(true);
-    },
-    onPanResponderMove: (_, g) => {
-      const s = _ImageOverlayController.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.ImageOverlayController.setFreePosition(newX, newY);
-    },
-    onPanResponderRelease: () => setIsInteracting(false),
-    onPanResponderTerminate: () => setIsInteracting(false)
-  }), [screen.width, screen.height, locked]);
-
-  // ── Aspect-ratio-locked corner resize ──
-  const createResizeHandler = (0, _react.useCallback)(corner => _reactNative.PanResponder.create({
-    onStartShouldSetPanResponder: () => !locked,
-    onMoveShouldSetPanResponder: () => !locked,
-    onPanResponderTerminationRequest: () => false,
-    onPanResponderGrant: () => {
-      const s = _ImageOverlayController.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.ImageOverlayController.setFreeDimensions(newWidth, newHeight, Math.round(newX), Math.round(newY));
-    },
-    onPanResponderRelease: () => setIsInteracting(false),
-    onPanResponderTerminate: () => setIsInteracting(false)
-  }), [screen.width, screen.height, aspectRatio, locked]);
-  const resizeHandlers = (0, _react.useMemo)(() => ({
-    topLeft: createResizeHandler("topLeft"),
-    topRight: createResizeHandler("topRight"),
-    bottomLeft: createResizeHandler("bottomLeft"),
-    bottomRight: createResizeHandler("bottomRight")
-  }), [createResizeHandler]);
-  const imageStyle = {
-    ..._sharedUi.absoluteFill,
-    opacity
-  };
-  return (
-    /*#__PURE__*/
-    // Locked means "let me use the app under it": the box must not swallow
-    // touches, or a locked full-screen mockup blocks every tap on the screen.
-    (0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        left: x,
-        top: y,
-        width,
-        height
-      },
-      pointerEvents: locked ? "none" : "auto",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        ...(locked ? {} : dragResponder.panHandlers),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OverlayImage, {
-          uri: imageUri,
-          style: imageStyle,
-          invertX: invertX,
-          invertY: invertY
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        style: [styles.freeBorder, isInteracting && styles.freeBorderActive, locked && styles.freeBorderLocked]
-      }), !locked && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          ...resizeHandlers.topLeft.panHandlers,
-          style: [styles.cornerWrapper, {
-            top: -20,
-            left: -20
-          }],
-          hitSlop: {
-            top: 10,
-            left: 10,
-            right: 10,
-            bottom: 10
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          ...resizeHandlers.topRight.panHandlers,
-          style: [styles.cornerWrapper, {
-            top: -20,
-            right: -20
-          }],
-          hitSlop: {
-            top: 10,
-            left: 10,
-            right: 10,
-            bottom: 10
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          ...resizeHandlers.bottomLeft.panHandlers,
-          style: [styles.cornerWrapper, {
-            bottom: -20,
-            left: -20
-          }],
-          hitSlop: {
-            top: 10,
-            left: 10,
-            right: 10,
-            bottom: 10
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          ...resizeHandlers.bottomRight.panHandlers,
-          style: [styles.cornerWrapper, {
-            bottom: -20,
-            right: -20
-          }],
-          hitSlop: {
-            top: 10,
-            left: 10,
-            right: 10,
-            bottom: 10
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.cornerHandle, isInteracting && styles.cornerHandleActive]
-          })
-        })]
-      })]
-    })
-  );
-}
-
-// ─── Main Standalone Overlay ──────────────────────────────────────────────────
-
-function ImageOverlayStandalone() {
-  const [state, setState] = (0, _react.useState)(() => _ImageOverlayController.ImageOverlayController.getState());
-  (0, _react.useEffect)(() => {
-    return _ImageOverlayController.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.overlay,
-      pointerEvents: "box-none",
-      nativeID: "image-overlay-standalone",
-      children: /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.overlay,
-    pointerEvents: "box-none",
-    nativeID: "image-overlay-standalone",
-    children: [showOutline && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        style: [styles.label, {
-          left: targetRect.x,
-          top: targetRect.y - 20
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(OverlayImage, {
-        uri: imageUri,
-        style: imgStyle,
-        invertX: invertX,
-        invertY: invertY
-      });
-    })()]
-  });
-}
-const styles = _reactNative.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: _sharedUi.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";Object.defineProperty(exports,"__esModule",{value:true});exports.ImageOverlayStandalone=ImageOverlayStandalone;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _ImageOverlayController=require("../utils/ImageOverlayController");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(x,w){if("function"==typeof WeakMap)var v=new WeakMap,u=new WeakMap;return(_interopRequireWildcard=function(r,c){if(!c&&r&&r.__esModule)return r;var a,o,g={__proto__:null,default:r};if(null===r||"object"!=typeof r&&"function"!=typeof r)return g;if(a=c?u:v){if(a.has(r))return a.get(r);a.set(r,g)}for(const n in r)"default"!==n&&{}.hasOwnProperty.call(r,n)&&((o=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(r,n))&&(o.get||o.set)?a(g,n,o):g[n]=r[n]);return g})(x,w)}function OverlayImage({uri:x,style:w,invertX:v,invertY:u}){const r=[];if(v)r.push({scaleX:-1});if(u)r.push({scaleY:-1});const c=r.length>0?{transform:r}:{};return(0,_jsxRuntime.jsx)(_reactNative.Image,{testID:"buoy-internal-image-overlay",source:{uri:x},style:[w,c],pointerEvents:"none"})}const FREE_MIN_SIZE=30;function FreePlacement({imageUri:x,x:w,y:v,width:u,height:r,opacity:c,aspectRatio:a,invertX:o,invertY:g,locked:n}){const[y,p]=(0,_react.useState)(false);const I=(0,_react.useRef)({x:0,y:0});const C=(0,_react.useRef)({x:0,y:0,width:0,height:0});const h=_reactNative.Dimensions.get("window");const _=(0,_react.useMemo)(()=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>!n,onMoveShouldSetPanResponder:(m,s)=>!n&&(Math.abs(s.dx)>2||Math.abs(s.dy)>2),onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{const m=_ImageOverlayController.ImageOverlayController.getState();I.current={x:m.freeX,y:m.freeY};p(true)},onPanResponderMove:(m,s)=>{const j=_ImageOverlayController.ImageOverlayController.getState();const f=Math.max(0,Math.min(I.current.x+s.dx,h.width-j.freeWidth));const d=Math.max(0,Math.min(I.current.y+s.dy,h.height-j.freeHeight));_ImageOverlayController.ImageOverlayController.setFreePosition(f,d)},onPanResponderRelease:()=>p(false),onPanResponderTerminate:()=>p(false)}),[h.width,h.height,n]);const R=(0,_react.useCallback)(m=>_reactNative.PanResponder.create({onStartShouldSetPanResponder:()=>!n,onMoveShouldSetPanResponder:()=>!n,onPanResponderTerminationRequest:()=>false,onPanResponderGrant:()=>{const s=_ImageOverlayController.ImageOverlayController.getState();C.current={x:s.freeX,y:s.freeY,width:s.freeWidth,height:s.freeHeight};p(true)},onPanResponderMove:(s,j)=>{const{dx:f,dy:d}=j;if(Math.abs(f)<.5&&Math.abs(d)<.5)return;const e=C.current;const l=a>0?a:e.width/e.height;const O=Math.abs(f);const W=Math.abs(d);const H=O>=W;let t;let i;let M=e.x;let b=e.y;switch(m){case"bottomRight":{t=H?e.width+f:(e.height+d)*l;t=Math.max(FREE_MIN_SIZE,Math.min(t,h.width-e.x));i=t/l;break}case"bottomLeft":{t=H?e.width-f:(e.height+d)*l;t=Math.max(FREE_MIN_SIZE,t);i=t/l;M=e.x+e.width-t;M=Math.max(0,M);t=Math.min(t,e.x+e.width);i=t/l;break}case"topRight":{t=H?e.width+f:(e.height-d)*l;t=Math.max(FREE_MIN_SIZE,Math.min(t,h.width-e.x));i=t/l;b=e.y+e.height-i;b=Math.max(0,b);i=Math.min(i,e.y+e.height);t=i*l;break}case"topLeft":{t=H?e.width-f:(e.height-d)*l;t=Math.max(FREE_MIN_SIZE,t);i=t/l;M=e.x+e.width-t;b=e.y+e.height-i;M=Math.max(0,M);b=Math.max(0,b);t=Math.min(t,e.x+e.width);i=t/l;b=e.y+e.height-i;break}}t=Math.max(FREE_MIN_SIZE,Math.round(t));i=Math.max(FREE_MIN_SIZE,Math.round(i));_ImageOverlayController.ImageOverlayController.setFreeDimensions(t,i,Math.round(M),Math.round(b))},onPanResponderRelease:()=>p(false),onPanResponderTerminate:()=>p(false)}),[h.width,h.height,a,n]);const S=(0,_react.useMemo)(()=>({topLeft:R("topLeft"),topRight:R("topRight"),bottomLeft:R("bottomLeft"),bottomRight:R("bottomRight")}),[R]);const P={..._sharedUi.absoluteFill,opacity:c};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"absolute",left:w,top:v,width:u,height:r},pointerEvents:n?"none":"auto",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:_reactNative.StyleSheet.absoluteFill,...n?{}:_.panHandlers,children:(0,_jsxRuntime.jsx)(OverlayImage,{uri:x,style:P,invertX:o,invertY:g})}),(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.freeBorder,y&&styles.freeBorderActive,n&&styles.freeBorderLocked]}),!n&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{...S.topLeft.panHandlers,style:[styles.cornerWrapper,{top:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.cornerHandle,y&&styles.cornerHandleActive]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...S.topRight.panHandlers,style:[styles.cornerWrapper,{top:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.cornerHandle,y&&styles.cornerHandleActive]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...S.bottomLeft.panHandlers,style:[styles.cornerWrapper,{bottom:-20,left:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.cornerHandle,y&&styles.cornerHandleActive]})}),(0,_jsxRuntime.jsx)(_reactNative.View,{...S.bottomRight.panHandlers,style:[styles.cornerWrapper,{bottom:-20,right:-20}],hitSlop:{top:10,left:10,right:10,bottom:10},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.cornerHandle,y&&styles.cornerHandleActive]})})]})]})}function ImageOverlayStandalone(){const[x,w]=(0,_react.useState)(()=>_ImageOverlayController.ImageOverlayController.getState());(0,_react.useEffect)(()=>{return _ImageOverlayController.ImageOverlayController.subscribe(w)},[]);const{mode:v,enabled:u,imageUri:r,imageWidth:c,imageHeight:a,targetRect:o,targetLabel:g,showOutline:n,opacity:y,scale:p,offsetX:I,offsetY:C,invertX:h,invertY:_,locked:R,freeX:S,freeY:P,freeWidth:m,freeHeight:s}=x;const j=c&&a&&a>0?c/a:0;if(v==="free"&&u&&r){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:(0,_jsxRuntime.jsx)(FreePlacement,{imageUri:r,x:S,y:P,width:m,height:s,opacity:y,aspectRatio:j,invertX:h,invertY:_,locked:R})})}if(!o)return null;const f=u&&r;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.overlay,pointerEvents:"box-none",nativeID:"image-overlay-standalone",children:[n&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",nativeID:"__image_overlay_highlight__",style:[styles.highlight,{left:o.x-3,top:o.y-3,width:o.width+6,height:o.height+6}]}),g&&(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[styles.label,{left:o.x,top:o.y-20}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.labelText,children:g})})]}),f&&(()=>{const d=(c??o.width)*p;const e=(a??o.height)*p;const l=o.x+o.width/2;const O=o.y+o.height/2;const W={position:"absolute",left:l-d/2+I,top:O-e/2+C,width:d,height:e,opacity:y};return(0,_jsxRuntime.jsx)(OverlayImage,{uri:r,style:W,invertX:h,invertY:_})})()]})}const styles=_reactNative.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:_sharedUi.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: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}});