ref(feedback): Refactor screenshot editor into multiple files (#15362)

We are splitting up screenshot editor into 3 additional parts: cropping,
annotations, toolbar

Author: c298lee

packages/feedback/src/screenshot/components/Annotations.tsx

@@ -0,0 +1,91 @@
+import type { VNode, h as hType } from 'preact';
+import type * as Hooks from 'preact/hooks';
+import { DOCUMENT } from '../../constants';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function AnnotationsFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function Annotations({
+    action,
+    imageBuffer,
+    annotatingRef,
+  }: {
+    action: 'crop' | 'annotate' | '';
+    imageBuffer: HTMLCanvasElement;
+    annotatingRef: Hooks.Ref<HTMLCanvasElement>;
+  }): VNode {
+    const onAnnotateStart = (): void => {
+      if (action !== 'annotate') {
+        return;
+      }
+
+      const handleMouseMove = (moveEvent: MouseEvent): void => {
+        const annotateCanvas = annotatingRef.current;
+        if (annotateCanvas) {
+          const rect = annotateCanvas.getBoundingClientRect();
+          const x = moveEvent.clientX - rect.x;
+          const y = moveEvent.clientY - rect.y;
+
+          const ctx = annotateCanvas.getContext('2d');
+          if (ctx) {
+            ctx.lineTo(x, y);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+          }
+        }
+      };
+
+      const handleMouseUp = (): void => {
+        const ctx = annotatingRef.current?.getContext('2d');
+        if (ctx) {
+          ctx.beginPath();
+        }
+
+        // Add your apply annotation logic here
+        applyAnnotation();
+
+        DOCUMENT.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      DOCUMENT.addEventListener('mousemove', handleMouseMove);
+      DOCUMENT.addEventListener('mouseup', handleMouseUp);
+    };
+
+    const applyAnnotation = (): void => {
+      // Logic to apply the annotation
+      const imageCtx = imageBuffer.getContext('2d');
+      const annotateCanvas = annotatingRef.current;
+      if (imageCtx && annotateCanvas) {
+        imageCtx.drawImage(
+          annotateCanvas,
+          0,
+          0,
+          annotateCanvas.width,
+          annotateCanvas.height,
+          0,
+          0,
+          imageBuffer.width,
+          imageBuffer.height,
+        );
+
+        const annotateCtx = annotateCanvas.getContext('2d');
+        if (annotateCtx) {
+          annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
+        }
+      }
+    };
+    return (
+      <canvas
+        class={`editor__annotation ${action === 'annotate' ? 'editor__annotation--active' : ''}`}
+        onMouseDown={onAnnotateStart}
+        ref={annotatingRef}
+      ></canvas>
+    );
+  };
+}