feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content

feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

feat(user feedback): Adds draw tool for UF screenshot annotations#15062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
c298lee merged 9 commits into from
Jan 21, 2025
Merged

feat(user feedback): Adds draw tool for UF screenshot annotations #15062

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
17b1ec9
UF annotation: adds draw tool
c298lee Jan 17, 2025
d3b1c9f
adds experiment flag for annotations
c298lee Jan 20, 2025
e4d096a
PR comments
c298lee Jan 20, 2025
88f3e42
remove listener and lint
c298lee Jan 20, 2025
9a6d802
Merge branch 'develop' into cl/annotate-draw-tool
c298lee Jan 20, 2025
d00efd7
lint again
c298lee Jan 21, 2025
c4492d2
Update packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
c298lee Jan 21, 2025
fa65a20
PR comments
c298lee Jan 21, 2025
26d7601
feat(user feedback): Create pen tool button for uf annotations (#15102)
c298lee Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/core/src/types-hoist/feedback/config.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -57,6 +57,15 @@ export interface FeedbackGeneralConfiguration {
name: string;
};

/**
* _experiments allows users to enable experimental or internal features.
* We don't consider such features as part of the public API and hence we don't guarantee semver for them.
* Experimental features can be added, changed or removed at any time.
*
* Default: undefined
*/
_experiments: Partial<{ annotations: boolean }>;

/**
* Set an object that will be merged sent as tags data with the event.
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/feedback/src/core/integration.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -84,6 +84,7 @@ export const buildFeedbackIntegration = ({
email: 'email',
name: 'username',
},
_experiments = {},
tags,
styleNonce,
scriptNonce,
Expand DownExpand Up@@ -158,6 +159,8 @@ export const buildFeedbackIntegration = ({
onSubmitError,
onSubmitSuccess,
onFormSubmitted,

_experiments,
};

let _shadow: ShadowRoot | null = null;
Expand Down
31 changes: 31 additions & 0 deletions packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function PenIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function PenIcon(): VNode {
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>
);
};
}
159 changes: 135 additions & 24 deletions packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,6 +6,7 @@ import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-
import type * as Hooks from 'preact/hooks';
import { DOCUMENT, WINDOW } from '../../constants';
import CropCornerFactory from './CropCorner';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';

Expand DownExpand Up@@ -72,40 +73,55 @@ export function ScreenshotEditorFactory({
options,
}: FactoryParams): ComponentType<Props> {
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
const CropCorner = CropCornerFactory({ h });

const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
const croppingRef = hooks.useRef<HTMLCanvasElement>(null);
const annotatingRef = hooks.useRef<HTMLCanvasElement>(null);
const [croppingRect, setCroppingRect] = hooks.useState<Box>({ startX: 0, startY: 0, endX: 0, endY: 0 });
const [confirmCrop, setConfirmCrop] = hooks.useState(false);
const [isResizing, setIsResizing] = hooks.useState(false);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);

hooks.useEffect(() => {
WINDOW.addEventListener('resize', resizeCropper, false);
WINDOW.addEventListener('resize', resize);

return () => {
WINDOW.removeEventListener('resize', resize);
};
}, []);

function resizeCropper(): void {
const cropper = croppingRef.current;
const imageDimensions = constructRect(getContainedSize(imageBuffer));
if (cropper) {
cropper.width = imageDimensions.width * DPI;
cropper.height = imageDimensions.height * DPI;
cropper.style.width = `${imageDimensions.width}px`;
cropper.style.height = `${imageDimensions.height}px`;
const ctx = cropper.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
function resizeCanvas(canvasRef: Hooks.Ref<HTMLCanvasElement>, imageDimensions: Rect): void {
const canvas = canvasRef.current;
if (!canvas) {
return;
}

const cropButton = cropContainerRef.current;
if (cropButton) {
cropButton.style.width = `${imageDimensions.width}px`;
cropButton.style.height = `${imageDimensions.height}px`;
canvas.width = imageDimensions.width * DPI;
canvas.height = imageDimensions.height * DPI;
canvas.style.width = `${imageDimensions.width}px`;
canvas.style.height = `${imageDimensions.height}px`;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.scale(DPI, DPI);
}
}

function resize(): void {
const imageDimensions = constructRect(getContainedSize(imageBuffer));

resizeCanvas(croppingRef, imageDimensions);
resizeCanvas(annotatingRef, imageDimensions);

const cropContainer = cropContainerRef.current;
if (cropContainer) {
cropContainer.style.width = `${imageDimensions.width}px`;
cropContainer.style.height = `${imageDimensions.height}px`;
}

setCroppingRect({ startX: 0, startY: 0, endX: imageDimensions.width, endY: imageDimensions.height });
Expand DownExpand Up@@ -141,6 +157,7 @@ export function ScreenshotEditorFactory({
}, [croppingRect]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
setConfirmCrop(false);
setIsResizing(true);
const handleMouseMove = makeHandleMouseMove(corner);
Expand DownExpand Up@@ -247,7 +264,49 @@ export function ScreenshotEditorFactory({
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function submit(): void {
function onAnnotateStart(): void {
if (!isAnnotating) {
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');
// starts a new path so on next mouse down, the lines won't connect
if (ctx) {
ctx.beginPath();
}

// draws the annotation onto the image buffer
// TODO: move this to a better place
applyAnnotation();

DOCUMENT.removeEventListener('mousemove', handleMouseMove);
DOCUMENT.removeEventListener('mouseup', handleMouseUp);
};

DOCUMENT.addEventListener('mousemove', handleMouseMove);
DOCUMENT.addEventListener('mouseup', handleMouseUp);
}

function applyCrop(): void {
const cutoutCanvas = DOCUMENT.createElement('canvas');
const imageBox = constructRect(getContainedSize(imageBuffer));
const croppingBox = constructRect(croppingRect);
Expand DownExpand Up@@ -277,7 +336,32 @@ export function ScreenshotEditorFactory({
imageBuffer.style.width = `${croppingBox.width}px`;
imageBuffer.style.height = `${croppingBox.height}px`;
ctx.drawImage(cutoutCanvas, 0, 0);
resizeCropper();
resize();
}
}

function applyAnnotation(): void {
// draw the annotations onto the image (ie "squash" the canvases)
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,
);

// clear the annotation canvas
const annotateCtx = annotateCanvas.getContext('2d');
if (annotateCtx) {
annotateCtx.clearRect(0, 0, annotateCanvas.width, annotateCanvas.height);
}
}
}

Expand All@@ -303,7 +387,7 @@ export function ScreenshotEditorFactory({
(dialog.el as HTMLElement).style.display = 'block';
const container = canvasContainerRef.current;
container?.appendChild(imageBuffer);
resizeCropper();
resize();
}, []),
onError: hooks.useCallback(error => {
(dialog.el as HTMLElement).style.display = 'block';
Expand All@@ -314,11 +398,32 @@ export function ScreenshotEditorFactory({
return (
<div class="editor">
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
{options._experiments.annotations && (
<div class="editor__tool-container">
<button
class="editor__pen-tool"
style={{
background: isAnnotating
? 'var(--button-primary-background, var(--accent-background))'
: 'var(--button-background, var(--background))',
color: isAnnotating
? 'var(--button-primary-foreground, var(--accent-foreground))'
: 'var(--button-foreground, var(--foreground))',
}}
onClick={e => {
e.preventDefault();
setIsAnnotating(!isAnnotating);
}}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ position: 'absolute', zIndex: 1 }} ref={cropContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas
onMouseDown={onDragStart}
style={{ position: 'absolute', cursor: confirmCrop ? 'move' : 'auto' }}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
></canvas>
<CropCorner
Expand DownExpand Up@@ -373,7 +478,7 @@ export function ScreenshotEditorFactory({
<button
onClick={e => {
e.preventDefault();
submit();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
Expand All@@ -382,6 +487,12 @@ export function ScreenshotEditorFactory({
</button>
</div>
</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
</div>
);
Expand Down
22 changes: 20 additions & 2 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,6 +15,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand DownExpand Up@@ -44,14 +45,18 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

.editor__canvas-container canvas {
object-fit: contain;
position: relative;
position: absolute;
}

.editor__crop-container {
position: absolute;
}

.editor__crop-btn-group {
padding: 8px;
gap: 8px;
border-radius: var(--menu-border-radius, 6px);
background: var(--button-primary-background, var(--background));
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
}
Expand DownExpand Up@@ -84,6 +89,19 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-left: none;
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
}
.editor__pen-tool {
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
}
`;

if (styleNonce) {
Expand Down