@merittdev/horus-lens 0.6.0 → 0.6.1

package/dist/react-native.js

@@ -5,7 +5,7 @@ import {
   SDK_VERSION,
   Transport,
   installConsole
-} from "./chunk-XGZ7BZTS.js";
+} from "./chunk-KRNRUQ7I.js";
 
 // ../react-native/dist/index.js
 import { AppState as AppState2 } from "react-native";
@@ -684,6 +684,7 @@ var NativeLensClient = class {
   }
 };
 var tools = [
+  ["pan", "Move"],
   ["rect", "Rectangle"],
   ["ellipse", "Ellipse"],
   ["arrow", "Arrow"],
@@ -863,6 +864,10 @@ function AnnotationEditor({
   const [exporting, setExporting] = useState(false);
   const [error, setError] = useState("");
   const canvas = useRef(null);
+  const viewport = useRef(null);
+  const scrollOffset = useRef(0);
+  const scrollStart = useRef(0);
+  const scrollTouchY = useRef(0);
   const mounted = useRef(true);
   useEffect(() => {
     mounted.current = true;
@@ -873,16 +878,30 @@ function AnnotationEditor({
   const points = useRef([]);
   const screen = useWindowDimensions();
   const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
-  const scale = Math.min(
-    Math.max(1, (stageSize.width || screen.width) - 32) / image.width,
-    Math.max(1, (stageSize.height || screen.height - 260) - 16) / image.height
-  );
+  const scale = exporting ? 1 : Math.max(1, (stageSize.width || screen.width) - 32) / image.width;
   const shownCrop = exporting ? crop : null;
+  function moveScreenshot(pageY) {
+    const maxOffset = Math.max(
+      0,
+      image.height * scale - (stageSize.height - 16)
+    );
+    const y = Math.max(
+      0,
+      Math.min(maxOffset, scrollStart.current + scrollTouchY.current - pageY)
+    );
+    scrollOffset.current = y;
+    viewport.current?.scrollTo({ y, animated: false });
+  }
   const responder = useMemo(
     () => PanResponder.create({
       onStartShouldSetPanResponder: () => !exporting,
       onMoveShouldSetPanResponder: () => !exporting,
       onPanResponderGrant: (event) => {
+        if (tool === "pan") {
+          scrollStart.current = scrollOffset.current;
+          scrollTouchY.current = event.nativeEvent.pageY;
+          return;
+        }
         const { locationX, locationY } = event.nativeEvent;
         points.current = [
           {
@@ -901,6 +920,10 @@ function AnnotationEditor({
         );
       },
       onPanResponderMove: (event) => {
+        if (tool === "pan") {
+          moveScreenshot(event.nativeEvent.pageY);
+          return;
+        }
         const { locationX, locationY } = event.nativeEvent;
         const p = {
           x: Math.max(0, Math.min(image.width, locationX / scale)),
@@ -920,6 +943,10 @@ function AnnotationEditor({
         );
       },
       onPanResponderRelease: (event) => {
+        if (tool === "pan") {
+          moveScreenshot(event.nativeEvent.pageY);
+          return;
+        }
         const first = points.current[0];
         if (first && tool !== "text" && tool !== "step") {
           const { locationX, locationY } = event.nativeEvent;
@@ -963,7 +990,17 @@ function AnnotationEditor({
         points.current = [];
       }
     }),
-    [color, exporting, image.height, image.width, marks, scale, text, tool]
+    [
+      color,
+      exporting,
+      image.height,
+      image.width,
+      marks,
+      scale,
+      stageSize.height,
+      text,
+      tool
+    ]
   );
   async function done() {
     if (exporting) return;
@@ -1111,95 +1148,109 @@ function AnnotationEditor({
             (current) => current.width === layout.width && current.height === layout.height ? current : { width: layout.width, height: layout.height }
           );
         },
-        children: /* @__PURE__ */ jsxs(
-          View,
+        children: /* @__PURE__ */ jsx(
+          ScrollView,
           {
-            ref: canvas,
-            collapsable: false,
-            style: {
-              width: (shownCrop?.width ?? image.width) * scale,
-              height: (shownCrop?.height ?? image.height) * scale,
-              overflow: "hidden",
-              backgroundColor: "#fff"
+            ref: viewport,
+            style: s.viewport,
+            contentContainerStyle: s.canvasContent,
+            scrollEnabled: false,
+            bounces: false,
+            onScroll: (event) => {
+              scrollOffset.current = event.nativeEvent.contentOffset.y;
             },
-            children: [
-              /* @__PURE__ */ jsxs(
-                View,
-                {
-                  style: {
-                    position: "absolute",
-                    left: -(shownCrop?.x ?? 0) * scale,
-                    top: -(shownCrop?.y ?? 0) * scale,
-                    width: image.width * scale,
-                    height: image.height * scale
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Image,
-                      {
-                        source: { uri: image.uri },
-                        style: {
-                          width: image.width * scale,
-                          height: image.height * scale
-                        },
-                        resizeMode: "stretch"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs(
-                      Svg,
-                      {
-                        pointerEvents: "none",
-                        style: StyleSheet.absoluteFill,
+            scrollEventThrottle: 16,
+            children: /* @__PURE__ */ jsxs(
+              View,
+              {
+                ref: canvas,
+                collapsable: false,
+                style: {
+                  width: (shownCrop?.width ?? image.width) * scale,
+                  height: (shownCrop?.height ?? image.height) * scale,
+                  overflow: "hidden",
+                  backgroundColor: "#fff"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    View,
+                    {
+                      style: {
+                        position: "absolute",
+                        left: -(shownCrop?.x ?? 0) * scale,
+                        top: -(shownCrop?.y ?? 0) * scale,
                         width: image.width * scale,
-                        height: image.height * scale,
-                        viewBox: `0 0 ${image.width} ${image.height}`,
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            AnnotationShapes,
-                            {
-                              annotations: [...marks, ...draft ? [draft] : []]
-                            }
-                          ),
-                          !exporting && crop && /* @__PURE__ */ jsx(
-                            Rect,
-                            {
-                              ...crop,
-                              fill: "none",
-                              stroke: "#3b82f6",
-                              strokeWidth: 2,
-                              strokeDasharray: "6 4"
-                            }
-                          ),
-                          target?.boundingRect && /* @__PURE__ */ jsx(
-                            Rect,
-                            {
-                              ...target.boundingRect,
-                              fill: "none",
-                              stroke: "#22c55e",
-                              strokeWidth: 2,
-                              strokeDasharray: "4 4"
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              !exporting && /* @__PURE__ */ jsx(
-                View,
-                {
-                  style: StyleSheet.absoluteFill,
-                  ...responder.panHandlers,
-                  accessibilityLabel: "Screenshot annotation canvas"
-                }
-              )
-            ]
+                        height: image.height * scale
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Image,
+                          {
+                            source: { uri: image.uri },
+                            style: {
+                              width: image.width * scale,
+                              height: image.height * scale
+                            },
+                            resizeMode: "stretch"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          Svg,
+                          {
+                            pointerEvents: "none",
+                            style: StyleSheet.absoluteFill,
+                            width: image.width * scale,
+                            height: image.height * scale,
+                            viewBox: `0 0 ${image.width} ${image.height}`,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                AnnotationShapes,
+                                {
+                                  annotations: [...marks, ...draft ? [draft] : []]
+                                }
+                              ),
+                              !exporting && crop && /* @__PURE__ */ jsx(
+                                Rect,
+                                {
+                                  ...crop,
+                                  fill: "none",
+                                  stroke: "#3b82f6",
+                                  strokeWidth: 2,
+                                  strokeDasharray: "6 4"
+                                }
+                              ),
+                              target?.boundingRect && /* @__PURE__ */ jsx(
+                                Rect,
+                                {
+                                  ...target.boundingRect,
+                                  fill: "none",
+                                  stroke: "#22c55e",
+                                  strokeWidth: 2,
+                                  strokeDasharray: "4 4"
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  !exporting && /* @__PURE__ */ jsx(
+                    View,
+                    {
+                      style: StyleSheet.absoluteFill,
+                      ...responder.panHandlers,
+                      accessibilityLabel: "Screenshot annotation canvas"
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: s.hint, children: error || (tool === "target" ? "Mark the native screen region related to the issue." : tool === "blur" ? "Redaction permanently covers screenshot pixels and removes earlier recording frames." : "Draw on the screenshot. Changes are attached when you submit.") })
+    /* @__PURE__ */ jsx(Text, { style: s.hint, children: error || (tool === "pan" ? "Scroll to another part of the screenshot, then select a drawing tool." : tool === "target" ? "Mark the native screen region related to the issue." : tool === "blur" ? "Redaction permanently covers screenshot pixels and removes earlier recording frames." : "Draw on the screenshot. Use Move to scroll. Changes are attached when you submit.") })
   ] });
 }
 var s = StyleSheet.create({
@@ -1244,11 +1295,11 @@ var s = StyleSheet.create({
   swatch: { width: 24, height: 24, borderRadius: 12, borderColor: "#a1a1aa" },
   stage: {
     flex: 1,
-    alignItems: "flex-start",
-    justifyContent: "flex-start",
     paddingHorizontal: 16,
     paddingVertical: 8
   },
+  viewport: { flex: 1 },
+  canvasContent: { alignItems: "center" },
   hint: {
     paddingHorizontal: 16,
     fontSize: 12,