From 46f39d16e8a37509ac5e36c86ee89c7927084506 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 15 Mar 2024 14:14:20 -0400
Subject: [PATCH] hackweek annotation code

---
 .../components/ScreenshotEditor.tsx           |  17 +
 .../components/imageEditorWrapper.css.ts      | 154 +++++++
 .../components/imageEditorWrapper.tsx         | 139 ++++++
 .../components/useImageEditor/icons.tsx       |  60 +++
 .../components/useImageEditor/imageEditor.ts  | 397 ++++++++++++++++++
 .../components/useImageEditor/index.ts        |  76 ++++
 .../components/useImageEditor/tool.ts         | 290 +++++++++++++
 .../components/useImageEditor/types.ts        |  35 ++
 .../components/useImageEditor/utils.ts        | 238 +++++++++++
 9 files changed, 1406 insertions(+)
 create mode 100644 packages/feedback/src/screenshot/components/imageEditorWrapper.css.ts
 create mode 100644 packages/feedback/src/screenshot/components/imageEditorWrapper.tsx
 create mode 100644 packages/feedback/src/screenshot/components/useImageEditor/icons.tsx
 create mode 100644 packages/feedback/src/screenshot/components/useImageEditor/imageEditor.ts
 create mode 100644 packages/feedback/src/screenshot/components/useImageEditor/index.ts
 create mode 100644 packages/feedback/src/screenshot/components/useImageEditor/tool.ts
 create mode 100644 packages/feedback/src/screenshot/components/useImageEditor/types.ts
 create mode 100644 packages/feedback/src/screenshot/components/useImageEditor/utils.ts

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index d3753631ec1c..6e6741533399 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -7,6 +7,7 @@ import { DOCUMENT, WINDOW } from '../../constants';
 import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshot } from './useTakeScreenshot';
+import { ImageEditorWrapper } from './imageEditorWrapper';
 
 interface FactoryParams {
   h: typeof hType;
@@ -64,6 +65,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     const croppingRef = useRef<HTMLCanvasElement>(null);
     const [croppingRect, setCroppingRect] = useState<Box>({ startx: 0, starty: 0, endx: 0, endy: 0 });
     const [confirmCrop, setConfirmCrop] = useState(false);
+    const [isAnnotating, setIsAnnotating] = useState(false);
 
     useEffect(() => {
       WINDOW.addEventListener('resize', resizeCropper, false);
@@ -226,6 +228,20 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
         <div class="canvasContainer" ref={canvasContainerRef}>
+          {isAnnotating && (
+            <ImageEditorWrapper
+              src={imageBuffer}
+              onCancel={() => setIsAnnotating(false)}
+              onSubmit={annotatedImage => {
+                setIsAnnotating(false);
+                const ctx = imageBuffer.getContext('2d');
+                if (ctx && annotatedImage) {
+                  ctx.clearRect(0, 0, imageBuffer.width, imageBuffer.height);
+                  ctx.drawImage(annotatedImage, 0, 0);
+                }
+              }}
+            ></ImageEditorWrapper>
+          )}
           <div class="cropButtonContainer" style={{ position: 'absolute' }} ref={cropContainerRef}>
             <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
             <CropCorner
@@ -290,6 +306,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
             </div>
           </div>
         </div>
+        <button onClick={() => setIsAnnotating(true)}>Annotate</button>
       </div>
     );
   };
diff --git a/packages/feedback/src/screenshot/components/imageEditorWrapper.css.ts b/packages/feedback/src/screenshot/components/imageEditorWrapper.css.ts
new file mode 100644
index 000000000000..756e3cc879ce
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/imageEditorWrapper.css.ts
@@ -0,0 +1,154 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createScreenshotAnnotateStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  const surface200 = '#FAF9FB';
+  const gray100 = '#F0ECF3';
+
+  style.textContent = `
+  .canvas {
+    cursor: crosshair;
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+
+  .container {
+    position: fixed;
+    z-index: 10000;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    background-color: rgba(240, 236, 243, 1);
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 5px,
+      rgba(0, 0, 0, 0.03) 5px,
+      rgba(0, 0, 0, 0.03) 10px
+    );
+  }
+
+  .canvasWrapper {
+    position: relative;
+    width: 100%;
+    margin-top: 32px;
+    height: calc(100% - 96px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .toolbarGroup {
+    display: flex;
+    flex-direction: row;
+    height: 42px;
+    background-color: white;
+    border: rgba(58, 17, 95, 0.14) 1px solid;
+    border-radius: 10px;
+    padding: 4px;
+    overflow: hidden;
+    gap: 4px;
+    box-shadow: 0px 1px 2px 1px rgba(43, 34, 51, 0.04);
+  }
+
+  .toolbar {
+    position: absolute;
+    width: 100%;
+    bottom: 0px;
+    padding: 12px 16px;
+    display: flex;
+    gap: 12px;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .flexSpacer {
+    flex: 1;
+  }
+
+  .toolButton {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+    border: none;
+    background-color: white;
+    color: rgba(43, 34, 51, 1);
+    font-size: 16px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover {
+      background-color: rgba(43, 34, 51, 0.06);
+    }
+    &:active {
+      background-color: rgba(108, 95, 199, 1) !important;\
+      color: white;
+    }
+  }
+
+  .cancelButton {
+    height: 40px;
+    width: 84px;
+    border: rgba(58, 17, 95, 0.14) 1px solid;
+    background-color: #fff;
+    color: rgba(43, 34, 51, 1);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 10px;
+    &:hover {
+      background-color: #eee;
+    }
+  }
+
+  .submitButton {
+    height: 40px;
+    width: 84px;
+    border: none;
+    background-color: rgba(108, 95, 199, 1);
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border-radius: 10px;
+    &:hover {
+      background-color: rgba(88, 74, 192, 1);
+    }
+  }
+
+  .colorInput {
+    position: relative;
+    display: flex;
+    width: 32px;
+    height: 32px;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    cursor: pointer;
+    & input[type='color'] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+  }
+
+  .colorDisplay {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    background-color: var(--annotateColor);
+  }
+`;
+
+  return style;
+}
diff --git a/packages/feedback/src/screenshot/components/imageEditorWrapper.tsx b/packages/feedback/src/screenshot/components/imageEditorWrapper.tsx
new file mode 100644
index 000000000000..52aac87abf27
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/imageEditorWrapper.tsx
@@ -0,0 +1,139 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { h } from 'preact';
+import type { ToolKey } from './useImageEditor';
+import { Tools, useImageEditor } from './useImageEditor';
+import { ArrowIcon, HandIcon, PenIcon, RectangleIcon } from './useImageEditor/icons';
+import { WINDOW } from './../../constants';
+import type { ComponentType } from 'preact';
+import { createScreenshotAnnotateStyles } from './imageEditorWrapper.css';
+
+export interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+interface ImageEditorWrapperProps {
+  onCancel: () => void;
+  onSubmit: (screenshot: HTMLCanvasElement | null) => void;
+  src: HTMLCanvasElement;
+}
+
+const iconMap: Record<ToolKey, ComponentType> = {
+  arrow: ArrowIcon,
+  pen: PenIcon,
+  rectangle: RectangleIcon,
+  select: HandIcon,
+};
+
+const getCanvasRenderSize = (canvas: HTMLCanvasElement, containerElement: HTMLDivElement) => {
+  const canvasWidth = canvas.width;
+  const canvasHeight = canvas.height;
+  const maxWidth = containerElement.getBoundingClientRect().width;
+  const maxHeight = containerElement.getBoundingClientRect().height;
+  // fit canvas to window
+  let width = canvasWidth;
+  let height = canvasHeight;
+  const canvasRatio = canvasWidth / canvasHeight;
+  const windowRatio = maxWidth / maxHeight;
+
+  if (canvasRatio > windowRatio && canvasWidth > maxWidth) {
+    height = (maxWidth / canvasWidth) * canvasHeight;
+    width = maxWidth;
+  }
+
+  if (canvasRatio < windowRatio && canvasHeight > maxHeight) {
+    width = (maxHeight / canvasHeight) * canvasWidth;
+    height = maxHeight;
+  }
+
+  return { width, height };
+};
+
+const srcToImage = (src: string): HTMLImageElement => {
+  const image = new Image();
+  image.src = src;
+  return image;
+};
+
+function ToolIcon({ tool }: { tool: ToolKey }) {
+  const Icon = tool ? iconMap[tool] : HandIcon;
+  return <Icon />;
+}
+
+export function ImageEditorWrapper({ src, onCancel, onSubmit }: ImageEditorWrapperProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
+  const styles = useMemo(() => ({ __html: createScreenshotAnnotateStyles().innerText }), []);
+
+  const resizeCanvas = useCallback(() => {
+    if (!canvas || !wrapperRef.current) {
+      return;
+    }
+    // fit canvas to window
+    const { width, height } = getCanvasRenderSize(canvas, wrapperRef.current);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+  }, [canvas]);
+
+  // const image = useMemo(() => srcToImage(src), [src]);
+  const { selectedTool, setSelectedTool, selectedColor, setSelectedColor, getBlob } = useImageEditor({
+    canvas,
+    image: src,
+    onLoad: resizeCanvas,
+  });
+
+  useEffect(() => {
+    resizeCanvas();
+    WINDOW.addEventListener('resize', resizeCanvas);
+    return () => {
+      WINDOW.removeEventListener('resize', resizeCanvas);
+    };
+  }, [resizeCanvas]);
+
+  return (
+    <div>
+      <style dangerouslySetInnerHTML={styles} />
+      <div class="container">
+        <div class="canvasWrapper" ref={wrapperRef}>
+          <canvas class="canvas" ref={setCanvas} />
+        </div>
+        <div class="toolbar">
+          <button class="cancelButton" onClick={() => onCancel()}>
+            Cancel
+          </button>
+          <div class="flexSpacer" />
+          <div class="toolbarGroup">
+            {Tools.map(tool => (
+              <button
+                class="toolButton"
+                key={tool}
+                // active={selectedTool === tool}
+                onClick={() => setSelectedTool(tool)}
+              >
+                <ToolIcon tool={tool} />
+              </button>
+            ))}
+          </div>
+          <div class="toolbarGroup">
+            <label class="colorInput">
+              <div
+                class="colorDisplay"
+                // color={selectedColor}
+              />
+              <input
+                type="color"
+                value={selectedColor}
+                // onChange={e => setSelectedColor(e?.target?.value)}
+              />
+            </label>
+          </div>
+          <div />
+          <button class="submitButton" onClick={async () => onSubmit(canvas)}>
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/feedback/src/screenshot/components/useImageEditor/icons.tsx b/packages/feedback/src/screenshot/components/useImageEditor/icons.tsx
new file mode 100644
index 000000000000..f35db1c18145
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/useImageEditor/icons.tsx
@@ -0,0 +1,60 @@
+import { h } from 'preact';
+
+export function PenIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M8.5 12L12 8.5L14 11L11 14L8.5 12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 8.5L11 3.5L2 2L3.5 11L8.5 12L12 8.5Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M2 2L7.5 7.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export function RectangleIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="2.5" y="2.5" width="11" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function ArrowIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M2.5 2.5L13 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M8.5 2.5H2.5L2.5 8.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function HandIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2 2L6.5 14.5L8.5 8.5L14.5 6.5L2 2Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/feedback/src/screenshot/components/useImageEditor/imageEditor.ts b/packages/feedback/src/screenshot/components/useImageEditor/imageEditor.ts
new file mode 100644
index 000000000000..dc35ee63175a
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/useImageEditor/imageEditor.ts
@@ -0,0 +1,397 @@
+import type { IDrawing, ITool, Rect } from './types';
+import { Point, translateBoundingBoxToDocument, translateMouseEvent, translatePointToCanvas } from './utils';
+import { h } from 'preact';
+
+interface Options {
+  canvas: HTMLCanvasElement;
+  image: HTMLCanvasElement;
+  onLoad?: () => void;
+}
+
+class Resizer {
+  private boundingBox: Rect;
+  private box: HTMLDivElement;
+  private isDragging: boolean = false;
+  private isDraggingHandle: boolean = false;
+
+  constructor(boundingBox: Rect, onDrag?: (event: MouseEvent) => void, onResize?: (event: MouseEvent) => void) {
+    this.boundingBox = boundingBox;
+
+    const box = document.createElement('div');
+    this.box = box;
+    document.body.appendChild(box);
+
+    const horizontalDashedGradient = `repeating-linear-gradient(
+      to right,
+      white,
+      white 5px,
+      black 5px,
+      black 10px
+    )`;
+    const verticalDashedGradient = `repeating-linear-gradient(
+      to bottom,
+      white,
+      white 5px,
+      black 5px,
+      black 10px
+    )`;
+
+    const topBorder = document.createElement('div');
+    topBorder.style.position = 'absolute';
+    topBorder.style.width = 'calc(100% + 16px)';
+    topBorder.style.height = '2px';
+    topBorder.style.top = '-8px';
+    topBorder.style.left = '-8px';
+    topBorder.style.backgroundImage = horizontalDashedGradient;
+
+    const bottomBorder = document.createElement('div');
+    bottomBorder.style.position = 'absolute';
+    bottomBorder.style.width = 'calc(100% + 16px)';
+    bottomBorder.style.height = '2px';
+    bottomBorder.style.bottom = '-8px';
+    bottomBorder.style.left = '-8px';
+    bottomBorder.style.backgroundImage = horizontalDashedGradient;
+
+    this.box.appendChild(topBorder);
+    this.box.appendChild(bottomBorder);
+
+    const leftBorder = document.createElement('div');
+    leftBorder.style.position = 'absolute';
+    leftBorder.style.height = 'calc(100% + 16px)';
+    leftBorder.style.width = '2px';
+    leftBorder.style.top = '-8px';
+    leftBorder.style.left = '-8px';
+    leftBorder.style.backgroundImage = verticalDashedGradient;
+
+    const rightBorder = document.createElement('div');
+    rightBorder.style.position = 'absolute';
+    rightBorder.style.height = 'calc(100% + 16px)';
+    rightBorder.style.width = '2px';
+    rightBorder.style.top = '-8px';
+    rightBorder.style.right = '-8px';
+    rightBorder.style.backgroundImage = verticalDashedGradient;
+
+    this.box.appendChild(leftBorder);
+    this.box.appendChild(rightBorder);
+
+    const handle = document.createElement('div');
+    handle.style.position = 'absolute';
+    handle.style.width = '10px';
+    handle.style.height = '10px';
+    handle.style.borderRadius = '50%';
+    handle.style.backgroundColor = 'white';
+    handle.style.border = '2px solid black';
+    handle.style.right = '-12px';
+    handle.style.bottom = '-12px';
+    handle.style.cursor = 'nwse-resize';
+    handle.addEventListener('mousedown', e => {
+      e.stopPropagation();
+      this.isDraggingHandle = true;
+    });
+    this.box.appendChild(handle);
+
+    this.box.addEventListener('mousedown', () => {
+      this.isDragging = true;
+    });
+
+    window.addEventListener('mouseup', () => {
+      this.isDragging = false;
+      this.isDraggingHandle = false;
+    });
+
+    window.addEventListener('mousemove', e => {
+      if (this.isDragging) {
+        onDrag?.(e);
+      }
+      if (this.isDraggingHandle) {
+        onResize?.(e);
+      }
+    });
+
+    this.updateStyles();
+  }
+
+  destroy() {
+    this.box.remove();
+  }
+
+  move(x: number, y: number) {
+    this.boundingBox = {
+      ...this.boundingBox,
+      x: this.boundingBox.x + x,
+      y: this.boundingBox.y + y,
+    };
+    this.updateStyles();
+  }
+
+  resize(x: number, y: number) {
+    this.boundingBox = {
+      ...this.boundingBox,
+      width: this.boundingBox.width + x,
+      height: this.boundingBox.height + y,
+    };
+    this.updateStyles();
+  }
+
+  private updateStyles() {
+    this.box.style.position = 'fixed';
+    this.box.style.zIndex = '90000';
+    this.box.style.width = `${Math.abs(this.boundingBox.width)}px`;
+    this.box.style.height = `${Math.abs(this.boundingBox.height)}px`;
+    this.box.style.left = `${this.boundingBox.x}px`;
+    this.box.style.top = `${this.boundingBox.y}px`;
+    this.box.style.cursor = 'move';
+    this.box.style.transformOrigin = 'top left';
+
+    if (this.boundingBox.width < 0 && this.boundingBox.height < 0) {
+      this.box.style.transform = 'scale(-1)';
+    } else if (this.boundingBox.width < 0) {
+      this.box.style.transform = 'scaleX(-1)';
+    } else if (this.boundingBox.height < 0) {
+      this.box.style.transform = 'scaleY(-1)';
+    } else {
+      this.box.style.transform = 'none';
+    }
+  }
+}
+
+const SCALEING_BASE = 1000 * 1000;
+
+const getScaling = (width: number, height: number) => {
+  const area = width * height;
+  return Math.max(Math.sqrt(area / SCALEING_BASE), 1);
+};
+
+/**
+ *
+ */
+export class ImageEditor {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D | null;
+  private drawings: IDrawing[] = [];
+  private scheduledFrame: number | null = null;
+  private image: HTMLCanvasElement;
+  private isInteractive: boolean = false;
+  private selectedDrawingId: string | null = null;
+  private resizer: Resizer | null = null;
+  private drawingScaling: number = 1;
+  private _tool: ITool | null = null;
+  private _color: string = '#79628c';
+  private _strokeSize: number = 6;
+
+  constructor(options: Options) {
+    const { canvas, image, onLoad } = options;
+    this.canvas = canvas;
+    this.image = image;
+    this.ctx = canvas.getContext('2d');
+
+    if (image) {
+      this.isInteractive = true;
+      this.canvas.width = image.width;
+      this.canvas.height = image.height;
+      this.drawingScaling = getScaling(image.width, image.height);
+      this.sheduleUpdateCanvas();
+      onLoad?.();
+    } else {
+      // image.addEventListener('load', () => {
+      //   this.isInteractive = true;
+      //   this.canvas.width = image.width;
+      //   this.canvas.height = image.height;
+      //   this.drawingScaling = getScaling(image.width, image.height);
+      //   this.sheduleUpdateCanvas();
+      //   onLoad?.();
+      // });
+    }
+
+    this.canvas.addEventListener('click', this.handleClick);
+    this.canvas.addEventListener('mousedown', this.handleMouseDown);
+    window.addEventListener('mousemove', this.handleMouseMove, { passive: true });
+    window.addEventListener('mouseup', this.handleMouseUp);
+    window.addEventListener('keydown', this.handleDelete);
+  }
+
+  /**
+   *
+   */
+  destroy() {
+    this.canvas.removeEventListener('click', this.handleClick);
+    this.canvas.removeEventListener('mousedown', this.handleMouseDown);
+    window.removeEventListener('mousemove', this.handleMouseMove);
+    window.removeEventListener('mouseup', this.handleMouseUp);
+    window.removeEventListener('keydown', this.handleDelete);
+    this.resizer?.destroy();
+    this.drawings = [];
+  }
+
+  /**
+   *
+   */
+  set tool(tool: ITool | null) {
+    if (this._tool?.isDrawing) {
+      // end the current drawing and discard it
+      this._tool.endDrawing(Point.fromNumber(0));
+    }
+    this._tool = tool;
+    // TODO(arthur): where to place this?
+    this.canvas.style.cursor = this._tool ? 'crosshair' : 'grab';
+  }
+
+  /**
+   *
+   */
+  get tool(): ITool | null {
+    return this._tool;
+  }
+
+  /**
+   *
+   */
+  set color(color: string) {
+    this._color = color;
+    if (this.selectedDrawingId) {
+      const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+      selectedDrawing?.setColor(color);
+      this.sheduleUpdateCanvas();
+    }
+  }
+
+  /**
+   *
+   */
+  get color(): string {
+    return this._color;
+  }
+
+  /**
+   *
+   */
+  set strokeSize(strokeSize: number) {
+    this._strokeSize = strokeSize;
+    if (this.selectedDrawingId) {
+      const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+      selectedDrawing?.setStrokeSize(strokeSize);
+    }
+  }
+
+  /**
+   *
+   */
+  get strokeSize(): number {
+    return this._strokeSize;
+  }
+
+  private updateCanvas = () => {
+    if (this.ctx) {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.ctx.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
+      this.drawings.forEach(drawing => {
+        drawing.drawToCanvas(this.ctx, drawing.id === this.selectedDrawingId);
+      });
+      if (this._tool?.isDrawing) {
+        const drawing = this._tool.getDrawingBuffer();
+        if (drawing) {
+          drawing.drawToCanvas(this.ctx, false);
+        }
+      }
+    }
+  };
+
+  private sheduleUpdateCanvas = () => {
+    if (this.scheduledFrame) {
+      cancelAnimationFrame(this.scheduledFrame);
+    }
+    this.scheduledFrame = requestAnimationFrame(this.updateCanvas);
+  };
+
+  private handleClick = (e: MouseEvent) => {
+    if (this._tool || !this.isInteractive) {
+      return;
+    }
+    const point = translateMouseEvent(e, this.canvas);
+    const drawing = [...this.drawings].reverse().find(d => d.isInPath(this.ctx, point));
+    this.selectedDrawingId = drawing?.id ?? null;
+    this.sheduleUpdateCanvas();
+    this.resizer?.destroy();
+    this.resizer = null;
+    if (drawing) {
+      const boundingBox = drawing.getBoundingBox();
+      this.resizer = new Resizer(
+        translateBoundingBoxToDocument(boundingBox, this.canvas),
+        this.handleDrag,
+        this.handleResize,
+      );
+    }
+  };
+
+  private handleDelete = (e: KeyboardEvent) => {
+    if (!this.selectedDrawingId || !['Delete', 'Backspace'].includes(e.key)) {
+      return;
+    }
+    this.drawings = this.drawings.filter(d => d.id !== this.selectedDrawingId);
+    this.selectedDrawingId = null;
+    this.resizer?.destroy();
+    this.resizer = null;
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleMouseDown = (e: MouseEvent) => {
+    if (!this._tool || this._tool.isDrawing || !this.isInteractive) {
+      return;
+    }
+    this._tool.startDrawing(translateMouseEvent(e, this.canvas), this._color, this.drawingScaling);
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleMouseMove = (e: MouseEvent) => {
+    if (!this._tool || !this._tool.isDrawing) {
+      return;
+    }
+    this._tool.draw(translateMouseEvent(e, this.canvas));
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleMouseUp = (e: MouseEvent) => {
+    if (!this._tool || !this._tool.isDrawing) {
+      return;
+    }
+    const drawing = this._tool.endDrawing(translateMouseEvent(e, this.canvas));
+    if (drawing) {
+      this.drawings.push(drawing);
+    }
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleDrag = (e: MouseEvent) => {
+    const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+    if (!this.resizer || !this.selectedDrawingId) {
+      return;
+    }
+    const delta = Point.fromNumber(e.movementX, e.movementY);
+    selectedDrawing?.moveBy(translatePointToCanvas(delta, this.canvas));
+    this.resizer.move(e.movementX, e.movementY);
+    this.sheduleUpdateCanvas();
+  };
+
+  private handleResize = (e: MouseEvent) => {
+    const selectedDrawing = this.drawings.find(d => d.id === this.selectedDrawingId);
+    if (!this.resizer || !this.selectedDrawingId) {
+      return;
+    }
+    const delta = Point.fromNumber(e.movementX, e.movementY);
+    selectedDrawing?.scaleBy(translatePointToCanvas(delta, this.canvas));
+    this.resizer.resize(e.movementX, e.movementY);
+    this.sheduleUpdateCanvas();
+  };
+
+  public getDataURL = (): string => {
+    return this.canvas.toDataURL();
+  };
+
+  public getBlob = (): Promise<Blob | null> => {
+    return new Promise<Blob | null>(resolve => {
+      this.canvas.toBlob(blob => {
+        resolve(blob);
+      });
+    });
+  };
+}
diff --git a/packages/feedback/src/screenshot/components/useImageEditor/index.ts b/packages/feedback/src/screenshot/components/useImageEditor/index.ts
new file mode 100644
index 000000000000..14cd4a492093
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/useImageEditor/index.ts
@@ -0,0 +1,76 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { h } from 'preact';
+
+import { ImageEditor } from './imageEditor';
+import { Arrow, Pen, Rectangle } from './tool';
+
+interface Params {
+  canvas: HTMLCanvasElement | null;
+  image: HTMLCanvasElement;
+  onLoad?: () => void;
+}
+
+export type ToolKey = 'arrow' | 'pen' | 'rectangle' | 'select';
+export const Tools: ToolKey[] = ['arrow', 'pen', 'rectangle', 'select'];
+
+export function useImageEditor({ canvas, image, onLoad }: Params) {
+  const editorRef = useRef<ImageEditor | null>(null);
+  const [selectedTool, setSelectedTool] = useState<ToolKey>('arrow');
+  const [selectedColor, setSelectedColor] = useState<string>('#ff7738');
+  const [strokeSize, setStrokeSize] = useState<number>(6);
+
+  useEffect(() => {
+    if (!canvas) {
+      return () => {};
+    }
+    const editor = new ImageEditor({ canvas, image, onLoad });
+    editor.tool = new Arrow();
+    editor.color = '#ff7738';
+    editor.strokeSize = 6;
+    editorRef.current = editor;
+    return () => {
+      editor.destroy();
+    };
+  }, [canvas, image, onLoad]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      switch (selectedTool) {
+        case 'arrow':
+          editorRef.current.tool = new Arrow();
+          break;
+        case 'pen':
+          editorRef.current.tool = new Pen();
+          break;
+        case 'rectangle':
+          editorRef.current.tool = new Rectangle();
+          break;
+        default:
+          editorRef.current.tool = null;
+          break;
+      }
+    }
+  }, [selectedTool]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.color = selectedColor;
+    }
+  }, [selectedColor]);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.strokeSize = strokeSize;
+    }
+  }, [strokeSize]);
+
+  return {
+    selectedTool,
+    setSelectedTool,
+    selectedColor,
+    setSelectedColor,
+    strokeSize,
+    setStrokeSize,
+    getBlob: () => editorRef.current!.getBlob(),
+  };
+}
diff --git a/packages/feedback/src/screenshot/components/useImageEditor/tool.ts b/packages/feedback/src/screenshot/components/useImageEditor/tool.ts
new file mode 100644
index 000000000000..0a573956fbf8
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/useImageEditor/tool.ts
@@ -0,0 +1,290 @@
+import type { IDrawing, IPoint, ITool, Rect } from './types';
+import { getPointsBoundingBox, Point, translateRect, updateBoundingBox, Vector } from './utils';
+import { h } from 'preact';
+
+class Tool implements ITool {
+  private DrawingConstructor: new () => IDrawing;
+  private drawing: IDrawing | null = null;
+
+  get isDrawing() {
+    return this.drawing !== null;
+  }
+
+  constructor(DrawingConstructor: new () => IDrawing) {
+    this.DrawingConstructor = DrawingConstructor;
+  }
+
+  startDrawing(point: IPoint, color: string, scalingFactor: number) {
+    this.drawing = new this.DrawingConstructor();
+    this.drawing.setStrokeScalingFactor(scalingFactor);
+    this.drawing.setColor(color);
+    this.drawing.start(point);
+  }
+
+  draw(point: IPoint) {
+    if (!this.isDrawing || !this.drawing) {
+      throw new Error('Call startDrawing before calling draw');
+    }
+    this.drawing.draw(point);
+  }
+  endDrawing(point: IPoint) {
+    if (!this.isDrawing || !this.drawing) {
+      throw new Error('Call startDrawing before calling endDrawing');
+    }
+    this.drawing.end(point);
+    const drawing = this.drawing;
+    this.drawing = null;
+    return drawing;
+  }
+  getDrawingBuffer() {
+    return this.drawing;
+  }
+}
+
+class Drawing implements IDrawing {
+  protected path = new Path2D();
+  protected startPoint: IPoint = { x: 0, y: 0 };
+  protected endPoint: IPoint = { x: 0, y: 0 };
+  protected translate: IPoint = { x: 0, y: 0 };
+  protected color = 'red';
+  protected strokeSize = 6;
+  protected strokeScalingFactor = 1;
+  protected scalingFactorX = 1;
+  protected scalingFactorY = 1;
+
+  public id = Math.random().toString();
+
+  constructor() {
+    this.start = this.start.bind(this);
+    this.draw = this.draw.bind(this);
+    this.end = this.end.bind(this);
+    this.isInPath = this.isInPath.bind(this);
+    this.drawToCanvas = this.drawToCanvas.bind(this);
+    this.getBoundingBox = this.getBoundingBox.bind(this);
+  }
+
+  get isValid() {
+    return true;
+  }
+
+  get topLeftPoint() {
+    return Point.fromNumber(Math.min(this.startPoint.x, this.endPoint.x), Math.min(this.startPoint.y, this.endPoint.y));
+  }
+
+  get bottomRightPoint() {
+    return Point.fromNumber(Math.max(this.startPoint.x, this.endPoint.x), Math.max(this.startPoint.y, this.endPoint.y));
+  }
+
+  start(point: IPoint): void {
+    this.startPoint = point;
+    this.endPoint = point;
+  }
+
+  draw(point: IPoint): void {
+    this.endPoint = point;
+  }
+
+  end(point: IPoint): void {
+    this.endPoint = point;
+  }
+
+  getBoundingBox() {
+    const box = getPointsBoundingBox([
+      Point.add(this.startPoint, this.translate),
+      Point.add(this.endPoint, this.translate),
+    ]);
+
+    return {
+      ...box,
+      width: box.width * this.scalingFactorX,
+      height: box.height * this.scalingFactorY,
+    };
+  }
+
+  setStrokeScalingFactor(strokeScalingFactor: number) {
+    this.strokeScalingFactor = strokeScalingFactor;
+  }
+
+  setColor(color: string) {
+    this.color = color;
+  }
+
+  setStrokeSize(strokeSize: number) {
+    this.strokeSize = strokeSize;
+  }
+
+  isInPath(context: CanvasRenderingContext2D | null, point: IPoint) {
+    return this.withTransform(
+      context,
+      () =>
+        // we check for multiple points to make selection easier
+        context?.isPointInStroke(this.path, point.x, point.y) ||
+        context?.isPointInStroke(this.path, point.x + this.strokeSize, point.y) ||
+        context?.isPointInStroke(this.path, point.x - this.strokeSize, point.y) ||
+        context?.isPointInStroke(this.path, point.x, point.y + this.strokeSize) ||
+        context?.isPointInStroke(this.path, point.x, point.y - this.strokeSize) ||
+        context?.isPointInStroke(this.path, point.x + this.strokeSize, point.y + this.strokeSize) ||
+        context?.isPointInStroke(this.path, point.x - this.strokeSize, point.y - this.strokeSize) ||
+        false,
+    );
+  }
+
+  private withTransform<T>(context: CanvasRenderingContext2D | null, callback: () => T): T {
+    context?.setTransform(
+      this.scalingFactorX,
+      0,
+      0,
+      this.scalingFactorY,
+      this.translate.x + this.topLeftPoint.x * (1 - this.scalingFactorX),
+      this.translate.y + this.topLeftPoint.y * (1 - this.scalingFactorY),
+    );
+    const result = callback();
+    // Reset current transformation matrix to the identity matrix
+    context?.setTransform(1, 0, 0, 1, 0, 0);
+    return result;
+  }
+
+  drawToCanvas(context: CanvasRenderingContext2D | null) {
+    if (!this.isValid || !context) {
+      return;
+    }
+
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.strokeStyle = this.color;
+    context.lineWidth = this.strokeSize * this.strokeScalingFactor;
+
+    this.withTransform(context, () => {
+      context.stroke(this.path);
+    });
+  }
+
+  scaleBy(delta: IPoint) {
+    const originalWidth = this.topLeftPoint.x - this.bottomRightPoint.x;
+    const originalHeight = this.topLeftPoint.y - this.bottomRightPoint.y;
+    const currentWidth = originalWidth * this.scalingFactorX;
+    const currentHeight = originalHeight * this.scalingFactorY;
+
+    const newWidth = currentWidth - delta.x;
+    const newHeight = currentHeight - delta.y;
+
+    this.scalingFactorX = newWidth / originalWidth;
+    this.scalingFactorY = newHeight / originalHeight;
+  }
+
+  moveBy(point: IPoint) {
+    this.translate = Point.add(this.translate, point);
+  }
+}
+
+class RectangleDrawing extends Drawing {
+  get isValid() {
+    return Point.distance(this.startPoint, this.endPoint) > 0;
+  }
+
+  draw = (point: IPoint) => {
+    super.draw(point);
+    this.endPoint = point;
+    this.path = new Path2D();
+    this.path.rect(
+      this.startPoint.x,
+      this.startPoint.y,
+      this.endPoint.x - this.startPoint.x,
+      this.endPoint.y - this.startPoint.y,
+    );
+  };
+}
+
+/**
+ *
+ */
+export class Rectangle extends Tool {
+  constructor() {
+    super(RectangleDrawing);
+  }
+}
+
+class PenDrawing extends Drawing {
+  private lastPoint: IPoint = { x: 0, y: 0 };
+  private boundingBox: Rect = { x: 0, y: 0, width: 0, height: 0 };
+
+  getBoundingBox(): Rect {
+    const rect = translateRect(this.boundingBox, this.translate);
+    return {
+      ...rect,
+      width: rect.width * this.scalingFactorX,
+      height: rect.height * this.scalingFactorY,
+    };
+  }
+
+  get topLeftPoint() {
+    return Point.fromNumber(this.boundingBox.x, this.boundingBox.y);
+  }
+
+  get bottomRightPoint() {
+    return Point.fromNumber(this.boundingBox.x + this.boundingBox.width, this.boundingBox.y + this.boundingBox.height);
+  }
+
+  start = (point: IPoint) => {
+    super.start(point);
+    this.path.moveTo(point.x, point.y);
+    this.lastPoint = point;
+    this.boundingBox = getPointsBoundingBox([point]);
+  };
+
+  draw = (point: IPoint) => {
+    super.draw(point);
+    // Smooth the line
+    if (Point.distance(this.lastPoint, point) < 5) {
+      return;
+    }
+    this.lastPoint = point;
+    this.path.lineTo(point.x, point.y);
+    this.boundingBox = updateBoundingBox(this.boundingBox, [point]);
+  };
+
+  end = (point: IPoint) => {
+    this.path.lineTo(point.x, point.y);
+    this.boundingBox = updateBoundingBox(this.boundingBox, [point]);
+  };
+}
+
+/**
+ *
+ */
+export class Pen extends Tool {
+  constructor() {
+    super(PenDrawing);
+  }
+}
+
+class ArrowDrawing extends Drawing {
+  get isValid() {
+    return Point.distance(this.startPoint, this.endPoint) > 0;
+  }
+
+  draw = (point: IPoint) => {
+    super.draw(point);
+
+    this.path = new Path2D();
+    this.path.moveTo(this.startPoint.x, this.startPoint.y);
+    this.path.lineTo(this.endPoint.x, this.endPoint.y);
+    const unitVector = new Vector(Point.subtract(this.startPoint, this.endPoint)).normalize();
+    const leftVector = unitVector.rotate(Math.PI / 5);
+    const rightVector = unitVector.rotate(-Math.PI / 5);
+    const leftPoint = Point.add(this.endPoint, Point.multiply(leftVector, 20 * this.strokeScalingFactor));
+    const rightPoint = Point.add(this.endPoint, Point.multiply(rightVector, 20 * this.strokeScalingFactor));
+    this.path.lineTo(leftPoint.x, leftPoint.y);
+    this.path.moveTo(this.endPoint.x, this.endPoint.y);
+    this.path.lineTo(rightPoint.x, rightPoint.y);
+  };
+}
+
+/**
+ *
+ */
+export class Arrow extends Tool {
+  constructor() {
+    super(ArrowDrawing);
+  }
+}
diff --git a/packages/feedback/src/screenshot/components/useImageEditor/types.ts b/packages/feedback/src/screenshot/components/useImageEditor/types.ts
new file mode 100644
index 000000000000..51f078af73d5
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/useImageEditor/types.ts
@@ -0,0 +1,35 @@
+export interface IPoint {
+  x: number;
+  y: number;
+}
+
+export interface IDrawing {
+  id: string;
+  isValid: boolean;
+  draw: (point: IPoint) => void;
+  drawToCanvas: (context: CanvasRenderingContext2D | null, isSelected: boolean) => void;
+  end: (point: IPoint) => void;
+  getBoundingBox: () => Rect;
+  isInPath: (ctx: CanvasRenderingContext2D | null, point: IPoint) => boolean;
+  moveBy: (point: IPoint) => void;
+  scaleBy: (point: IPoint) => void;
+  setColor: (color: string) => void;
+  setStrokeScalingFactor: (scalingFactor: number) => void;
+  setStrokeSize: (strokeSize: number) => void;
+  start: (point: IPoint) => void;
+}
+
+export interface ITool {
+  draw: (point: IPoint) => void;
+  endDrawing: (point: IPoint) => IDrawing | null;
+  getDrawingBuffer: () => IDrawing | null;
+  isDrawing: boolean;
+  startDrawing: (point: IPoint, color: string, scalingFactor: number) => void;
+}
+
+export interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
diff --git a/packages/feedback/src/screenshot/components/useImageEditor/utils.ts b/packages/feedback/src/screenshot/components/useImageEditor/utils.ts
new file mode 100644
index 000000000000..fe3ac03414c2
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/useImageEditor/utils.ts
@@ -0,0 +1,238 @@
+import type { IPoint, Rect } from './types';
+import { h } from 'preact';
+
+function asPoint(x: IPoint | number): IPoint {
+  return typeof x === 'number' ? Point.fromNumber(x) : x;
+}
+
+/**
+ *
+ */
+export class Vector implements IPoint {
+  public x: number;
+  public y: number;
+
+  /**
+   *
+   */
+  public get length(): number {
+    return Point.distance(Point.fromNumber(0), this);
+  }
+
+  /**
+   *
+   */
+  static fromPoints(point1: IPoint, point2: IPoint): Vector {
+    return new Vector(Point.subtract(point2, point1));
+  }
+
+  constructor(point: IPoint) {
+    this.x = point.x;
+    this.y = point.y;
+  }
+
+  /**
+   *
+   */
+  normalize() {
+    const length = this.length;
+    return new Vector({
+      x: this.x / length,
+      y: this.y / length,
+    });
+  }
+
+  /**
+   *
+   */
+  rotate(angle: number) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    return new Vector({
+      x: this.x * cos - this.y * sin,
+      y: this.x * sin + this.y * cos,
+    });
+  }
+}
+
+/**
+ *
+ */
+export class Point {
+  /**
+   *
+   */
+  static fromMouseEvent(e: MouseEvent): IPoint {
+    return {
+      x: e.clientX,
+      y: e.clientY,
+    };
+  }
+
+  /**
+   *
+   */
+  static fromNumber(x: number, y?: number): IPoint {
+    return { x, y: y ?? x };
+  }
+
+  /**
+   *
+   */
+  static multiply(point: IPoint, multiplier: number | IPoint): IPoint {
+    const mult = asPoint(multiplier);
+    return {
+      x: point.x * mult.x,
+      y: point.y * mult.y,
+    };
+  }
+
+  /**
+   *
+   */
+  static divide(point: IPoint, divisor: number | IPoint): IPoint {
+    const div = asPoint(divisor);
+    return {
+      x: point.x / div.x,
+      y: point.y / div.y,
+    };
+  }
+
+  /**
+   *
+   */
+  static add(point1: IPoint, point2: number | IPoint): IPoint {
+    const point = asPoint(point2);
+    return {
+      x: point1.x + point.x,
+      y: point1.y + point.y,
+    };
+  }
+
+  /**
+   *
+   */
+  static subtract(point1: IPoint, point2: number | IPoint): IPoint {
+    const point = asPoint(point2);
+    return {
+      x: point1.x - point.x,
+      y: point1.y - point.y,
+    };
+  }
+
+  /**
+   *
+   */
+  static distance(point1: IPoint, point2: IPoint): number {
+    return Math.sqrt(Math.pow(point1.x - point2.x, 2) + Math.pow(point1.y - point2.y, 2));
+  }
+
+  /**
+   *
+   */
+  static round(point: IPoint): IPoint {
+    return {
+      x: Math.round(point.x),
+      y: Math.round(point.y),
+    };
+  }
+}
+
+/**
+ *
+ */
+export function getCanvasScaleRatio(canvas: HTMLCanvasElement): IPoint {
+  const rect = canvas.getBoundingClientRect();
+  const verticalScale = canvas.height / rect.height;
+  const horizontalScale = canvas.width / rect.width;
+  return {
+    x: horizontalScale,
+    y: verticalScale,
+  };
+}
+
+/**
+ *
+ */
+export function translatePoint(point: IPoint, ratio: IPoint): IPoint {
+  return Point.multiply(point, ratio);
+}
+
+/**
+ *
+ */
+export function translatePointToDocument(point: IPoint, canvas: HTMLCanvasElement): IPoint {
+  return translatePoint(point, Point.divide(Point.fromNumber(1), getCanvasScaleRatio(canvas)));
+}
+
+/**
+ *
+ */
+export function translateBoundingBoxToDocument(boundingBox: Rect, canvas: HTMLCanvasElement): Rect {
+  const start = translatePointToDocument(boundingBox, canvas);
+  const dimensions = translatePointToDocument(Point.fromNumber(boundingBox.width, boundingBox.height), canvas);
+  return {
+    x: start.x + canvas.getBoundingClientRect().left,
+    y: start.y + canvas.getBoundingClientRect().top,
+    width: dimensions.x,
+    height: dimensions.y,
+  };
+}
+
+/**
+ *
+ */
+export function translateMouseEvent(e: MouseEvent, canvas: HTMLCanvasElement): IPoint {
+  const ratio = getCanvasScaleRatio(canvas);
+  const clientRect = canvas.getBoundingClientRect();
+  const canvasOffset = Point.fromNumber(clientRect.left, clientRect.top);
+  return Point.round(translatePoint(Point.subtract(Point.fromMouseEvent(e), canvasOffset), ratio));
+}
+
+/**
+ *
+ */
+export function translatePointToCanvas(point: IPoint, canvas: HTMLCanvasElement): IPoint {
+  return translatePoint(point, getCanvasScaleRatio(canvas));
+}
+
+/**
+ *
+ */
+export function translateRect(rect: Rect, vector: IPoint): Rect {
+  return {
+    x: rect.x + vector.x,
+    y: rect.y + vector.y,
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+/**
+ *
+ */
+export function getPointsBoundingBox(points: IPoint[]): Rect {
+  const xValues = points.map(p => p.x);
+  const yValues = points.map(p => p.y);
+  const minX = Math.min(...xValues);
+  const maxX = Math.max(...xValues);
+  const minY = Math.min(...yValues);
+  const maxY = Math.max(...yValues);
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
+
+/**
+ *
+ */
+export function updateBoundingBox(boundingBox: Rect, points: IPoint[]): Rect {
+  return getPointsBoundingBox([
+    ...points,
+    Point.fromNumber(boundingBox.x, boundingBox.y),
+    Point.fromNumber(boundingBox.x + boundingBox.width, boundingBox.y + boundingBox.height),
+  ]);
+}