From 3570d76f27f59b3b7c4e196a7bf30d7f779d6559 Mon Sep 17 00:00:00 2001
From: Joe <joemmalatesta@gmail.com>
Date: Thu, 25 Jul 2024 11:07:54 -0700
Subject: [PATCH 1/4] movement formula is missing something...

---
 .../components/ScreenshotEditor.tsx           | 61 ++++++++++++++++++-
 1 file changed, 59 insertions(+), 2 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 55f8f99997c8..18f5dff66d2e 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -26,6 +26,7 @@ interface Props {
   onError: (error: Error) => void;
 }
 
+// The screenshot starting size
 interface Box {
   startX: number;
   startY: number;
@@ -33,6 +34,7 @@ interface Box {
   endY: number;
 }
 
+// The current screenshot size and what is exported as attachment
 interface Rect {
   x: number;
   y: number;
@@ -76,12 +78,14 @@ export function ScreenshotEditorFactory({
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
     const CropCorner = CropCornerFactory({ h });
-
+    console.log('rerunning factory');
     const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
     const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
     const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
     const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
     const [confirmCrop, setConfirmCrop] = hooks.useState(false);
+    const [isDragging, setIsDragging] = hooks.useState(false);
+    const [isResizing, setIsResizing] = hooks.useState(false);
 
     hooks.useEffect(() => {
       WINDOW.addEventListener('resize', resizeCropper, false);
@@ -141,19 +145,24 @@ export function ScreenshotEditorFactory({
 
     function onGrabButton(e: Event, corner: string): void {
       setConfirmCrop(false);
+      setIsResizing(true);
       const handleMouseMove = makeHandleMouseMove(corner);
       const handleMouseUp = (): void => {
         DOCUMENT.removeEventListener('mousemove', handleMouseMove);
         DOCUMENT.removeEventListener('mouseup', handleMouseUp);
         setConfirmCrop(true);
+        setIsResizing(false);
       };
 
       DOCUMENT.addEventListener('mouseup', handleMouseUp);
       DOCUMENT.addEventListener('mousemove', handleMouseMove);
     }
 
+    // Handling when the mouse is moved.
+    // THIS IS WHERE DRAGGING FUNCTIONALITY SHOULD GO
     const makeHandleMouseMove = hooks.useCallback((corner: string) => {
       return function (e: MouseEvent) {
+        // If the canvas element is not found
         if (!croppingRef.current) {
           return;
         }
@@ -194,6 +203,54 @@ export function ScreenshotEditorFactory({
       };
     }, []);
 
+    // DRAGGING FUNCTIONALITY
+    function onDragStart(e: MouseEvent): void {
+      if (isResizing) return;
+
+      setIsDragging(true);
+      const initialX = e.clientX;
+      const initialY = e.clientY;
+      console.log('dragging started ' + initialX, initialY);
+
+      const handleMouseMove = (moveEvent: MouseEvent) => {
+        const cropCanvas = croppingRef.current;
+        if (!cropCanvas) return;
+
+        const deltaX = (moveEvent.clientX - initialX) / DPI;
+        const deltaY = (moveEvent.clientY - initialY) / DPI;
+
+        setCroppingRect(prev => {
+          const newStartX = Math.max(
+            0,
+            Math.min(prev.startX + deltaX, cropCanvas.width / DPI - (prev.endX - prev.startX)),
+          );
+          const newStartY = Math.max(
+            0,
+            Math.min(prev.startY + deltaY, cropCanvas.height / DPI - (prev.endY - prev.startY)),
+          );
+          const newEndX = newStartX + (prev.endX - prev.startX);
+          const newEndY = newStartY + (prev.endY - prev.startY);
+
+          return {
+            startX: newStartX,
+            startY: newStartY,
+            endX: newEndX,
+            endY: newEndY,
+          };
+        });
+      };
+
+      const handleMouseUp = () => {
+        console.log('mouseup');
+        setIsDragging(false);
+        DOCUMENT.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      DOCUMENT.addEventListener('mousemove', handleMouseMove);
+      DOCUMENT.addEventListener('mouseup', handleMouseUp);
+    }
+
     function submit(): void {
       const cutoutCanvas = DOCUMENT.createElement('canvas');
       const imageBox = constructRect(getContainedSize(imageBuffer));
@@ -263,7 +320,7 @@ export function ScreenshotEditorFactory({
         <style dangerouslySetInnerHTML={styles} />
         <div class="editor__canvas-container" ref={canvasContainerRef}>
           <div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
-            <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
+            <canvas onMouseDown={onDragStart} style={{ position: 'absolute' }} ref={croppingRef}></canvas>
             <CropCorner
               left={croppingRect.startX - CROP_BUTTON_BORDER}
               top={croppingRect.startY - CROP_BUTTON_BORDER}

From b0ffb9be4b9af1db5395d99bd2e54e144ba96ba1 Mon Sep 17 00:00:00 2001
From: Joe <joemmalatesta@gmail.com>
Date: Thu, 25 Jul 2024 18:10:17 -0700
Subject: [PATCH 2/4] dragging speed is good :D

---
 .../components/ScreenshotEditor.tsx           | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 18f5dff66d2e..db4137937abf 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -26,7 +26,6 @@ interface Props {
   onError: (error: Error) => void;
 }
 
-// The screenshot starting size
 interface Box {
   startX: number;
   startY: number;
@@ -34,7 +33,6 @@ interface Box {
   endY: number;
 }
 
-// The current screenshot size and what is exported as attachment
 interface Rect {
   x: number;
   y: number;
@@ -78,7 +76,7 @@ export function ScreenshotEditorFactory({
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
     const CropCorner = CropCornerFactory({ h });
-    console.log('rerunning factory');
+
     const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
     const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
     const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
@@ -158,11 +156,8 @@ export function ScreenshotEditorFactory({
       DOCUMENT.addEventListener('mousemove', handleMouseMove);
     }
 
-    // Handling when the mouse is moved.
-    // THIS IS WHERE DRAGGING FUNCTIONALITY SHOULD GO
     const makeHandleMouseMove = hooks.useCallback((corner: string) => {
       return function (e: MouseEvent) {
-        // If the canvas element is not found
         if (!croppingRef.current) {
           return;
         }
@@ -204,22 +199,23 @@ export function ScreenshotEditorFactory({
     }, []);
 
     // DRAGGING FUNCTIONALITY
+    const initialPositionRef = hooks.useRef({ initialX: 0, initialY: 0 });
+
     function onDragStart(e: MouseEvent): void {
       if (isResizing) return;
 
       setIsDragging(true);
-      const initialX = e.clientX;
-      const initialY = e.clientY;
-      console.log('dragging started ' + initialX, initialY);
+      initialPositionRef.current = { initialX: e.clientX, initialY: e.clientY };
 
       const handleMouseMove = (moveEvent: MouseEvent) => {
         const cropCanvas = croppingRef.current;
         if (!cropCanvas) return;
 
-        const deltaX = (moveEvent.clientX - initialX) / DPI;
-        const deltaY = (moveEvent.clientY - initialY) / DPI;
+        const deltaX = moveEvent.clientX - initialPositionRef.current.initialX;
+        const deltaY = moveEvent.clientY - initialPositionRef.current.initialY;
 
         setCroppingRect(prev => {
+          // Math.max stops it from going outside of the borders
           const newStartX = Math.max(
             0,
             Math.min(prev.startX + deltaX, cropCanvas.width / DPI - (prev.endX - prev.startX)),
@@ -228,9 +224,13 @@ export function ScreenshotEditorFactory({
             0,
             Math.min(prev.startY + deltaY, cropCanvas.height / DPI - (prev.endY - prev.startY)),
           );
+          // Don't want to change size, just post
           const newEndX = newStartX + (prev.endX - prev.startX);
           const newEndY = newStartY + (prev.endY - prev.startY);
 
+          initialPositionRef.current.initialX = moveEvent.clientX;
+          initialPositionRef.current.initialY = moveEvent.clientY;
+
           return {
             startX: newStartX,
             startY: newStartY,
@@ -241,7 +241,6 @@ export function ScreenshotEditorFactory({
       };
 
       const handleMouseUp = () => {
-        console.log('mouseup');
         setIsDragging(false);
         DOCUMENT.removeEventListener('mousemove', handleMouseMove);
         DOCUMENT.removeEventListener('mouseup', handleMouseUp);

From c5a5a47a0b95234cfe5d90e2c4092cf7a89c85e4 Mon Sep 17 00:00:00 2001
From: Joe <joemmalatesta@gmail.com>
Date: Fri, 26 Jul 2024 10:05:49 -0700
Subject: [PATCH 3/4] small spelling error.

---
 .../feedback/src/screenshot/components/ScreenshotEditor.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index db4137937abf..97a7f51ce516 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -224,7 +224,7 @@ export function ScreenshotEditorFactory({
             0,
             Math.min(prev.startY + deltaY, cropCanvas.height / DPI - (prev.endY - prev.startY)),
           );
-          // Don't want to change size, just post
+          // Don't want to change size, just position
           const newEndX = newStartX + (prev.endX - prev.startX);
           const newEndY = newStartY + (prev.endY - prev.startY);
 

From 4e7dec9a7bbd1550e164e56bb2d12e5cdb917d0b Mon Sep 17 00:00:00 2001
From: Joe <joemmalatesta@gmail.com>
Date: Fri, 26 Jul 2024 10:46:46 -0700
Subject: [PATCH 4/4] feat (feedback) - Make cropped screenshot area draggable

---
 .../screenshot/components/ScreenshotEditor.tsx    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 97a7f51ce516..32a69a722c48 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -82,7 +82,6 @@ export function ScreenshotEditorFactory({
     const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
     const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
     const [confirmCrop, setConfirmCrop] = hooks.useState(false);
-    const [isDragging, setIsDragging] = hooks.useState(false);
     const [isResizing, setIsResizing] = hooks.useState(false);
 
     hooks.useEffect(() => {
@@ -198,16 +197,15 @@ export function ScreenshotEditorFactory({
       };
     }, []);
 
-    // DRAGGING FUNCTIONALITY
+    // DRAGGING FUNCTIONALITY.
     const initialPositionRef = hooks.useRef({ initialX: 0, initialY: 0 });
 
     function onDragStart(e: MouseEvent): void {
       if (isResizing) return;
 
-      setIsDragging(true);
       initialPositionRef.current = { initialX: e.clientX, initialY: e.clientY };
 
-      const handleMouseMove = (moveEvent: MouseEvent) => {
+      const handleMouseMove = (moveEvent: MouseEvent): void => {
         const cropCanvas = croppingRef.current;
         if (!cropCanvas) return;
 
@@ -240,8 +238,7 @@ export function ScreenshotEditorFactory({
         });
       };
 
-      const handleMouseUp = () => {
-        setIsDragging(false);
+      const handleMouseUp = (): void => {
         DOCUMENT.removeEventListener('mousemove', handleMouseMove);
         DOCUMENT.removeEventListener('mouseup', handleMouseUp);
       };
@@ -319,7 +316,11 @@ export function ScreenshotEditorFactory({
         <style dangerouslySetInnerHTML={styles} />
         <div class="editor__canvas-container" ref={canvasContainerRef}>
           <div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
-            <canvas onMouseDown={onDragStart} style={{ position: 'absolute' }} ref={croppingRef}></canvas>
+            <canvas
+              onMouseDown={onDragStart}
+              style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
+              ref={croppingRef}
+            ></canvas>
             <CropCorner
               left={croppingRect.startX - CROP_BUTTON_BORDER}
               top={croppingRect.startY - CROP_BUTTON_BORDER}