diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx index 55f8f99997c8..32a69a722c48 100644 --- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx +++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx @@ -82,6 +82,7 @@ export function ScreenshotEditorFactory({ const croppingRef = hooks.useRef(null); const [croppingRect, setCroppingRect] = hooks.useState({ startX: 0, startY: 0, endX: 0, endY: 0 }); const [confirmCrop, setConfirmCrop] = hooks.useState(false); + const [isResizing, setIsResizing] = hooks.useState(false); hooks.useEffect(() => { WINDOW.addEventListener('resize', resizeCropper, false); @@ -141,11 +142,13 @@ 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); @@ -194,6 +197,56 @@ export function ScreenshotEditorFactory({ }; }, []); + // DRAGGING FUNCTIONALITY. + const initialPositionRef = hooks.useRef({ initialX: 0, initialY: 0 }); + + function onDragStart(e: MouseEvent): void { + if (isResizing) return; + + initialPositionRef.current = { initialX: e.clientX, initialY: e.clientY }; + + const handleMouseMove = (moveEvent: MouseEvent): void => { + const cropCanvas = croppingRef.current; + if (!cropCanvas) return; + + 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)), + ); + const newStartY = Math.max( + 0, + Math.min(prev.startY + deltaY, cropCanvas.height / DPI - (prev.endY - prev.startY)), + ); + // Don't want to change size, just position + 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, + endX: newEndX, + endY: newEndY, + }; + }); + }; + + const handleMouseUp = (): void => { + 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 +316,11 @@ export function ScreenshotEditorFactory({