wip: feedback screenshot annotations

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';
 
 const CROP_BUTTON_SIZE = 30;
 const CROP_BUTTON_BORDER = 3;
@@ -70,6 +71,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);
@@ -239,6 +241,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
@@ -303,6 +319,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
             </div>
           </div>
         </div>
+        <button onClick={() => setIsAnnotating(true)}>Annotate</button>
       </div>
     );
   };

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;
+}

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>
+  );
+}