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

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