feat(user feedback): Adds toolbar for cropping and annotating#15282

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 4 commits into from
Feb 4, 2025
Merged

feat(user feedback): Adds toolbar for cropping and annotating #15282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
20de538
tool wip
c298lee Jan 31, 2025
5ba5800
use multiple class names in BEM format
c298lee Feb 3, 2025
ff07b6c
still works when option is off
c298lee Feb 3, 2025
71d8049
rm extra options
c298lee Feb 3, 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
23 changes: 23 additions & 0 deletions packages/feedback/src/screenshot/components/CropIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
h: typeof hType;
}

export default function CropIconFactory({
h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
return function CropIcon(): VNode {
return (
<svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
};
}
2 changes: 1 addition & 1 deletion packages/feedback/src/screenshot/components/PenIcon.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
<svg width="20" height="20" 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"
Expand Down
180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
const CropCorner = CropCornerFactory({ h });
const PenIcon = PenIconFactory({ h });
const CropIcon = CropIconFactory({ h });

return function ScreenshotEditor({ onError }: Props): VNode {
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
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 [isCropping, setIsCropping] = hooks.useState(true);
const [isAnnotating, setIsAnnotating] = hooks.useState(false);
Comment on lines +91 to 92

@ryan953ryan953Feb 3, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.
Right now i'm noticing spots like this:

setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.


hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
const croppingBox = constructRect(croppingRect);
ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

if (!isCropping) {
return;
}
Comment on lines +148 to +150

@ryan953ryan953Feb 3, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case

@c298leec298leeFeb 3, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image


// draw gray overlay around the selection
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
ctx.strokeStyle = '#000000';
ctx.lineWidth = 1;
ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
}, [croppingRect]);
}, [croppingRect, isCropping]);

function onGrabButton(e: Event, corner: string): void {
setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
}}
<div class="editor__image-container">
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div
class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
${confirmCrop ? 'editor__crop-container--move' : ''}`}
ref={cropContainerRef}
>
<PenIcon />
</button>
</div>
)}
<div class="editor__canvas-container" ref={canvasContainerRef}>
<div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
<canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
{isCropping && (
<div>
<CropCorner
left={croppingRect.startX - CROP_BUTTON_BORDER}
top={croppingRect.startY - CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="top-left"
></CropCorner>
<CropCorner
left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
top={croppingRect.startY - CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="top-right"
></CropCorner>
<CropCorner
left={croppingRect.startX - CROP_BUTTON_BORDER}
top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="bottom-left"
></CropCorner>
<CropCorner
left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="bottom-right"
></CropCorner>
</div>
)}
{isCropping && (
<div
style={{
left: Math.max(0, croppingRect.endX - 191),
top: Math.max(0, croppingRect.endY + 8),
}}
class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
>
<button
onClick={e => {
e.preventDefault();
if (croppingRef.current) {
setCroppingRect({
startX: 0,
startY: 0,
endX: croppingRef.current.width / DPI,
endY: croppingRef.current.height / DPI,
});
}
setConfirmCrop(false);
}}
class="btn btn--default"
>
{options.cancelButtonLabel}
</button>
<button
onClick={e => {
e.preventDefault();
applyCrop();
setConfirmCrop(false);
}}
class="btn btn--primary"
>
{options.confirmButtonLabel}
</button>
</div>
)}
</div>
<canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
ref={annotatingRef}
></canvas>
<CropCorner
left={croppingRect.startX - CROP_BUTTON_BORDER}
top={croppingRect.startY - CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="top-left"
></CropCorner>
<CropCorner
left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
top={croppingRect.startY - CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="top-right"
></CropCorner>
<CropCorner
left={croppingRect.startX - CROP_BUTTON_BORDER}
top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="bottom-left"
></CropCorner>
<CropCorner
left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
onGrabButton={onGrabButton}
corner="bottom-right"
></CropCorner>
<div
style={{
left: Math.max(0, croppingRect.endX - 191),
top: Math.max(0, croppingRect.endY + 8),
display: confirmCrop ? 'flex' : 'none',
}}
class="editor__crop-btn-group"
>
</div>
</div>
{options._experiments.annotations && (
<div class="editor__tool-container">
<div />

@c298leec298leeFeb 3, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR

@billyvgbillyvgFeb 4, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?

@c298leec298leeFeb 4, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)

<div class="editor__tool-bar">
<button
class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
onClick={e => {
e.preventDefault();
if (croppingRef.current) {
setCroppingRect({
startX: 0,
startY: 0,
endX: croppingRef.current.width / DPI,
endY: croppingRef.current.height / DPI,
});
}
setConfirmCrop(false);
setIsCropping(!isCropping);
setIsAnnotating(false);
}}
class="btn btn--default"
>
{options.cancelButtonLabel}
<CropIcon />
</button>
<button
class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
onClick={e => {
e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
}}
class="btn btn--primary"
>
{options.confirmButtonLabel}
<PenIcon />
</button>
</div>
<div />

@c298leec298leeFeb 3, 2025•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR

</div>
<canvas
class="editor__annotation"
onMouseDown={onAnnotateStart}
style={{ zIndex: isAnnotating ? '2' : '1' }}
ref={annotatingRef}
></canvas>
</div>
)}
</div>
);
};
Expand Down
48 changes: 42 additions & 6 deletions packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

style.textContent = `
.editor {
display: flex;
flex-grow: 1;
flex-direction: column;
}
.editor__image-container {
padding: 10px;
padding-top: 65px;
padding-bottom: 65px;
flex-grow: 1;
position: relative;
height: 100%;
border-radius: var(--menu-border-radius, 6px);

background-color: ${surface200};
background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
);
}

.editor__annotation {
z-index: 1;
}
.editor__annotation--active {
z-index: 2;
}

.editor__canvas-container {
width: 100%;
height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
custor: auto;
position: absolute;
z-index: 2;
}
.editor__crop-container--inactive {
z-index: 1;
}
.editor__crop-container--move {
cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
background: var(--button-background, var(--background));
width: 175px;
position: absolute;
display: none;
}
.editor__crop-btn-group--active {
display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
height: 30px;
.editor__tool-bar {
display: flex;
gap: 8px;
}
.editor__tool {
display: flex;
padding: 8px 12px;
justify-content: center;
align-items: center;
border: var(--button-border, var(--border));
border-radius: var(--button-border-radius, 6px);
background: var(--button-background, var(--background));
color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
background: var(--button-primary-background, var(--accent-background));
color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 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 toolbar for cropping and annotating#15282

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 4 commits into

from

Feb 4, 2025
 Merged


feat(user feedback): Adds toolbar for cropping and annotating
#15282
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
20de538

tool wip


c298lee Jan 31, 2025
5ba5800

use multiple class names in BEM format


c298lee Feb 3, 2025
ff07b6c

still works when option is off


c298lee Feb 3, 2025
71d8049

rm extra options


c298lee Feb 3, 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


23 changes: 23 additions & 0 deletions
packages/feedback/src/screenshot/components/CropIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
 h: typeof hType;
}

export default function CropIconFactory({
 h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
 return function CropIcon(): VNode {
 return (
 <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path
 d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
 stroke="currentColor"
 strokeWidth="1.5"
 strokeLinecap="round"
 strokeLinejoin="round"
 />
 </svg>
 );
 };
}

2 changes: 1 addition & 1 deletion
packages/feedback/src/screenshot/components/PenIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
 <svg width="20" height="20" 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"
Expand Down

180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
 const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
 const CropCorner = CropCornerFactory({ h });
 const PenIcon = PenIconFactory({ h });
 const CropIcon = CropIconFactory({ h });

 return function ScreenshotEditor({ onError }: Props): VNode {
 const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
 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 [isCropping, setIsCropping] = hooks.useState(true);
 const [isAnnotating, setIsAnnotating] = hooks.useState(false);

Comment on lines

+91
 to 
92

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.

Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.

 hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
 const croppingBox = constructRect(croppingRect);
 ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

 if (!isCropping) {
 return;
 }

Comment on lines

+148
 to 
+150

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image

 // draw gray overlay around the selection
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
 ctx.strokeStyle = '#000000';
 ctx.lineWidth = 1;
 ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
 }, [croppingRect]);
 }, [croppingRect, isCropping]);

 function onGrabButton(e: Event, corner: string): void {
 setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
 }}
 <div class="editor__image-container">
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div
 class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
 ${confirmCrop ? 'editor__crop-container--move' : ''}`}
 ref={cropContainerRef}
 >
 <PenIcon />
 </button>
 </div>
 )}
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
 <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
 {isCropping && (
 <div>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 </div>
 )}
 {isCropping && (
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 }}
 class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
 >
 <button
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 }}
 class="btn btn--default"
 >
 {options.cancelButtonLabel}
 </button>
 <button
 onClick={e => {
 e.preventDefault();
 applyCrop();
 setConfirmCrop(false);
 }}
 class="btn btn--primary"
 >
 {options.confirmButtonLabel}
 </button>
 </div>
 )}
 </div>
 <canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
 ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
 ref={annotatingRef}
 ></canvas>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 display: confirmCrop ? 'flex' : 'none',
 }}
 class="editor__crop-btn-group"
 >
 </div>
 </div>
 {options._experiments.annotations && (
 <div class="editor__tool-container">
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR
@billyvgbillyvgFeb 4, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?
@c298leec298leeFeb 4, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)
 <div class="editor__tool-bar">
 <button
 class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 setIsCropping(!isCropping);
 setIsAnnotating(false);
 }}
 class="btn btn--default"
 >
{options.cancelButtonLabel}
<CropIcon />
 </button>
 <button
 class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
 }}
 class="btn btn--primary"
 >
{options.confirmButtonLabel}
<PenIcon />
 </button>
 </div>
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR
 </div>
 <canvas
 class="editor__annotation"
 onMouseDown={onAnnotateStart}
 style={{ zIndex: isAnnotating ? '2' : '1' }}
 ref={annotatingRef}
 ></canvas>
 </div>
 )}
 </div>
 );
 };
Expand Down

48 changes: 42 additions & 6 deletions
packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

 style.textContent = `
.editor {
 display: flex;
 flex-grow: 1;
 flex-direction: column;
}
.editor__image-container {
 padding: 10px;
 padding-top: 65px;
 padding-bottom: 65px;
 flex-grow: 1;
 position: relative;
 height: 100%;
 border-radius: var(--menu-border-radius, 6px);

 background-color: ${surface200};
 background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 );
}

.editor__annotation {
 z-index: 1;
}
.editor__annotation--active {
 z-index: 2;
}

.editor__canvas-container {
 width: 100%;
 height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
 custor: auto;
 position: absolute;
 z-index: 2;
}
.editor__crop-container--inactive {
 z-index: 1;
}
.editor__crop-container--move {
 cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 background: var(--button-background, var(--background));
 width: 175px;
 position: absolute;
 display: none;
}
.editor__crop-btn-group--active {
 display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
 height: 30px;
.editor__tool-bar {
 display: flex;
 gap: 8px;
}
.editor__tool {
 display: flex;
 padding: 8px 12px;
 justify-content: center;
 align-items: center;
 border: var(--button-border, var(--border));
 border-radius: var(--button-border-radius, 6px);
 background: var(--button-background, var(--background));
 color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
 background: var(--button-primary-background, var(--accent-background));
 color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

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 toolbar for cropping and annotating#15282

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 4 commits into

from

Feb 4, 2025
 Merged


feat(user feedback): Adds toolbar for cropping and annotating
#15282
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
20de538

tool wip


c298lee Jan 31, 2025
5ba5800

use multiple class names in BEM format


c298lee Feb 3, 2025
ff07b6c

still works when option is off


c298lee Feb 3, 2025
71d8049

rm extra options


c298lee Feb 3, 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


23 changes: 23 additions & 0 deletions
packages/feedback/src/screenshot/components/CropIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
 h: typeof hType;
}

export default function CropIconFactory({
 h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
 return function CropIcon(): VNode {
 return (
 <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path
 d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
 stroke="currentColor"
 strokeWidth="1.5"
 strokeLinecap="round"
 strokeLinejoin="round"
 />
 </svg>
 );
 };
}

2 changes: 1 addition & 1 deletion
packages/feedback/src/screenshot/components/PenIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
 <svg width="20" height="20" 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"
Expand Down

180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
 const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
 const CropCorner = CropCornerFactory({ h });
 const PenIcon = PenIconFactory({ h });
 const CropIcon = CropIconFactory({ h });

 return function ScreenshotEditor({ onError }: Props): VNode {
 const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
 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 [isCropping, setIsCropping] = hooks.useState(true);
 const [isAnnotating, setIsAnnotating] = hooks.useState(false);

Comment on lines

+91
 to 
92

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.

Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.

 hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
 const croppingBox = constructRect(croppingRect);
 ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

 if (!isCropping) {
 return;
 }

Comment on lines

+148
 to 
+150

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image

 // draw gray overlay around the selection
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
 ctx.strokeStyle = '#000000';
 ctx.lineWidth = 1;
 ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
 }, [croppingRect]);
 }, [croppingRect, isCropping]);

 function onGrabButton(e: Event, corner: string): void {
 setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
 }}
 <div class="editor__image-container">
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div
 class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
 ${confirmCrop ? 'editor__crop-container--move' : ''}`}
 ref={cropContainerRef}
 >
 <PenIcon />
 </button>
 </div>
 )}
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
 <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
 {isCropping && (
 <div>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 </div>
 )}
 {isCropping && (
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 }}
 class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
 >
 <button
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 }}
 class="btn btn--default"
 >
 {options.cancelButtonLabel}
 </button>
 <button
 onClick={e => {
 e.preventDefault();
 applyCrop();
 setConfirmCrop(false);
 }}
 class="btn btn--primary"
 >
 {options.confirmButtonLabel}
 </button>
 </div>
 )}
 </div>
 <canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
 ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
 ref={annotatingRef}
 ></canvas>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 display: confirmCrop ? 'flex' : 'none',
 }}
 class="editor__crop-btn-group"
 >
 </div>
 </div>
 {options._experiments.annotations && (
 <div class="editor__tool-container">
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR
@billyvgbillyvgFeb 4, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?
@c298leec298leeFeb 4, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)
 <div class="editor__tool-bar">
 <button
 class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 setIsCropping(!isCropping);
 setIsAnnotating(false);
 }}
 class="btn btn--default"
 >
{options.cancelButtonLabel}
<CropIcon />
 </button>
 <button
 class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
 }}
 class="btn btn--primary"
 >
{options.confirmButtonLabel}
<PenIcon />
 </button>
 </div>
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR
 </div>
 <canvas
 class="editor__annotation"
 onMouseDown={onAnnotateStart}
 style={{ zIndex: isAnnotating ? '2' : '1' }}
 ref={annotatingRef}
 ></canvas>
 </div>
 )}
 </div>
 );
 };
Expand Down

48 changes: 42 additions & 6 deletions
packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

 style.textContent = `
.editor {
 display: flex;
 flex-grow: 1;
 flex-direction: column;
}
.editor__image-container {
 padding: 10px;
 padding-top: 65px;
 padding-bottom: 65px;
 flex-grow: 1;
 position: relative;
 height: 100%;
 border-radius: var(--menu-border-radius, 6px);

 background-color: ${surface200};
 background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 );
}

.editor__annotation {
 z-index: 1;
}
.editor__annotation--active {
 z-index: 2;
}

.editor__canvas-container {
 width: 100%;
 height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
 custor: auto;
 position: absolute;
 z-index: 2;
}
.editor__crop-container--inactive {
 z-index: 1;
}
.editor__crop-container--move {
 cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 background: var(--button-background, var(--background));
 width: 175px;
 position: absolute;
 display: none;
}
.editor__crop-btn-group--active {
 display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
 height: 30px;
.editor__tool-bar {
 display: flex;
 gap: 8px;
}
.editor__tool {
 display: flex;
 padding: 8px 12px;
 justify-content: center;
 align-items: center;
 border: var(--button-border, var(--border));
 border-radius: var(--button-border-radius, 6px);
 background: var(--button-background, var(--background));
 color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
 background: var(--button-primary-background, var(--accent-background));
 color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

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 > 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 toolbar for cropping and annotating#15282

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 4 commits into

from

Feb 4, 2025
 Merged


feat(user feedback): Adds toolbar for cropping and annotating
#15282
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
20de538

tool wip


c298lee Jan 31, 2025
5ba5800

use multiple class names in BEM format


c298lee Feb 3, 2025
ff07b6c

still works when option is off


c298lee Feb 3, 2025
71d8049

rm extra options


c298lee Feb 3, 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


23 changes: 23 additions & 0 deletions
packages/feedback/src/screenshot/components/CropIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
 h: typeof hType;
}

export default function CropIconFactory({
 h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
 return function CropIcon(): VNode {
 return (
 <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path
 d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
 stroke="currentColor"
 strokeWidth="1.5"
 strokeLinecap="round"
 strokeLinejoin="round"
 />
 </svg>
 );
 };
}

2 changes: 1 addition & 1 deletion
packages/feedback/src/screenshot/components/PenIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
 <svg width="20" height="20" 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"
Expand Down

180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
 const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
 const CropCorner = CropCornerFactory({ h });
 const PenIcon = PenIconFactory({ h });
 const CropIcon = CropIconFactory({ h });

 return function ScreenshotEditor({ onError }: Props): VNode {
 const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
 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 [isCropping, setIsCropping] = hooks.useState(true);
 const [isAnnotating, setIsAnnotating] = hooks.useState(false);

Comment on lines

+91
 to 
92

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.

Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.

 hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
 const croppingBox = constructRect(croppingRect);
 ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

 if (!isCropping) {
 return;
 }

Comment on lines

+148
 to 
+150

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image

 // draw gray overlay around the selection
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
 ctx.strokeStyle = '#000000';
 ctx.lineWidth = 1;
 ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
 }, [croppingRect]);
 }, [croppingRect, isCropping]);

 function onGrabButton(e: Event, corner: string): void {
 setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
 }}
 <div class="editor__image-container">
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div
 class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
 ${confirmCrop ? 'editor__crop-container--move' : ''}`}
 ref={cropContainerRef}
 >
 <PenIcon />
 </button>
 </div>
 )}
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
 <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
 {isCropping && (
 <div>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 </div>
 )}
 {isCropping && (
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 }}
 class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
 >
 <button
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 }}
 class="btn btn--default"
 >
 {options.cancelButtonLabel}
 </button>
 <button
 onClick={e => {
 e.preventDefault();
 applyCrop();
 setConfirmCrop(false);
 }}
 class="btn btn--primary"
 >
 {options.confirmButtonLabel}
 </button>
 </div>
 )}
 </div>
 <canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
 ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
 ref={annotatingRef}
 ></canvas>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 display: confirmCrop ? 'flex' : 'none',
 }}
 class="editor__crop-btn-group"
 >
 </div>
 </div>
 {options._experiments.annotations && (
 <div class="editor__tool-container">
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR
@billyvgbillyvgFeb 4, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?
@c298leec298leeFeb 4, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)
 <div class="editor__tool-bar">
 <button
 class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 setIsCropping(!isCropping);
 setIsAnnotating(false);
 }}
 class="btn btn--default"
 >
{options.cancelButtonLabel}
<CropIcon />
 </button>
 <button
 class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
 }}
 class="btn btn--primary"
 >
{options.confirmButtonLabel}
<PenIcon />
 </button>
 </div>
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR
 </div>
 <canvas
 class="editor__annotation"
 onMouseDown={onAnnotateStart}
 style={{ zIndex: isAnnotating ? '2' : '1' }}
 ref={annotatingRef}
 ></canvas>
 </div>
 )}
 </div>
 );
 };
Expand Down

48 changes: 42 additions & 6 deletions
packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

 style.textContent = `
.editor {
 display: flex;
 flex-grow: 1;
 flex-direction: column;
}
.editor__image-container {
 padding: 10px;
 padding-top: 65px;
 padding-bottom: 65px;
 flex-grow: 1;
 position: relative;
 height: 100%;
 border-radius: var(--menu-border-radius, 6px);

 background-color: ${surface200};
 background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 );
}

.editor__annotation {
 z-index: 1;
}
.editor__annotation--active {
 z-index: 2;
}

.editor__canvas-container {
 width: 100%;
 height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
 custor: auto;
 position: absolute;
 z-index: 2;
}
.editor__crop-container--inactive {
 z-index: 1;
}
.editor__crop-container--move {
 cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 background: var(--button-background, var(--background));
 width: 175px;
 position: absolute;
 display: none;
}
.editor__crop-btn-group--active {
 display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
 height: 30px;
.editor__tool-bar {
 display: flex;
 gap: 8px;
}
.editor__tool {
 display: flex;
 padding: 8px 12px;
 justify-content: center;
 align-items: center;
 border: var(--button-border, var(--border));
 border-radius: var(--button-border-radius, 6px);
 background: var(--button-background, var(--background));
 color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
 background: var(--button-primary-background, var(--accent-background));
 color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

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 toolbar for cropping and annotating#15282

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 4 commits into

from

Feb 4, 2025
 Merged


feat(user feedback): Adds toolbar for cropping and annotating
#15282
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
20de538

tool wip


c298lee Jan 31, 2025
5ba5800

use multiple class names in BEM format


c298lee Feb 3, 2025
ff07b6c

still works when option is off


c298lee Feb 3, 2025
71d8049

rm extra options


c298lee Feb 3, 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


23 changes: 23 additions & 0 deletions
packages/feedback/src/screenshot/components/CropIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
 h: typeof hType;
}

export default function CropIconFactory({
 h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
 return function CropIcon(): VNode {
 return (
 <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path
 d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
 stroke="currentColor"
 strokeWidth="1.5"
 strokeLinecap="round"
 strokeLinejoin="round"
 />
 </svg>
 );
 };
}

2 changes: 1 addition & 1 deletion
packages/feedback/src/screenshot/components/PenIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
 <svg width="20" height="20" 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"
Expand Down

180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
 const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
 const CropCorner = CropCornerFactory({ h });
 const PenIcon = PenIconFactory({ h });
 const CropIcon = CropIconFactory({ h });

 return function ScreenshotEditor({ onError }: Props): VNode {
 const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
 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 [isCropping, setIsCropping] = hooks.useState(true);
 const [isAnnotating, setIsAnnotating] = hooks.useState(false);

Comment on lines

+91
 to 
92

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.

Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.

 hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
 const croppingBox = constructRect(croppingRect);
 ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

 if (!isCropping) {
 return;
 }

Comment on lines

+148
 to 
+150

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image

 // draw gray overlay around the selection
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
 ctx.strokeStyle = '#000000';
 ctx.lineWidth = 1;
 ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
 }, [croppingRect]);
 }, [croppingRect, isCropping]);

 function onGrabButton(e: Event, corner: string): void {
 setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
 }}
 <div class="editor__image-container">
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div
 class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
 ${confirmCrop ? 'editor__crop-container--move' : ''}`}
 ref={cropContainerRef}
 >
 <PenIcon />
 </button>
 </div>
 )}
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
 <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
 {isCropping && (
 <div>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 </div>
 )}
 {isCropping && (
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 }}
 class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
 >
 <button
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 }}
 class="btn btn--default"
 >
 {options.cancelButtonLabel}
 </button>
 <button
 onClick={e => {
 e.preventDefault();
 applyCrop();
 setConfirmCrop(false);
 }}
 class="btn btn--primary"
 >
 {options.confirmButtonLabel}
 </button>
 </div>
 )}
 </div>
 <canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
 ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
 ref={annotatingRef}
 ></canvas>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 display: confirmCrop ? 'flex' : 'none',
 }}
 class="editor__crop-btn-group"
 >
 </div>
 </div>
 {options._experiments.annotations && (
 <div class="editor__tool-container">
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR
@billyvgbillyvgFeb 4, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?
@c298leec298leeFeb 4, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)
 <div class="editor__tool-bar">
 <button
 class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 setIsCropping(!isCropping);
 setIsAnnotating(false);
 }}
 class="btn btn--default"
 >
{options.cancelButtonLabel}
<CropIcon />
 </button>
 <button
 class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
 }}
 class="btn btn--primary"
 >
{options.confirmButtonLabel}
<PenIcon />
 </button>
 </div>
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR
 </div>
 <canvas
 class="editor__annotation"
 onMouseDown={onAnnotateStart}
 style={{ zIndex: isAnnotating ? '2' : '1' }}
 ref={annotatingRef}
 ></canvas>
 </div>
 )}
 </div>
 );
 };
Expand Down

48 changes: 42 additions & 6 deletions
packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

 style.textContent = `
.editor {
 display: flex;
 flex-grow: 1;
 flex-direction: column;
}
.editor__image-container {
 padding: 10px;
 padding-top: 65px;
 padding-bottom: 65px;
 flex-grow: 1;
 position: relative;
 height: 100%;
 border-radius: var(--menu-border-radius, 6px);

 background-color: ${surface200};
 background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 );
}

.editor__annotation {
 z-index: 1;
}
.editor__annotation--active {
 z-index: 2;
}

.editor__canvas-container {
 width: 100%;
 height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
 custor: auto;
 position: absolute;
 z-index: 2;
}
.editor__crop-container--inactive {
 z-index: 1;
}
.editor__crop-container--move {
 cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 background: var(--button-background, var(--background));
 width: 175px;
 position: absolute;
 display: none;
}
.editor__crop-btn-group--active {
 display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
 height: 30px;
.editor__tool-bar {
 display: flex;
 gap: 8px;
}
.editor__tool {
 display: flex;
 padding: 8px 12px;
 justify-content: center;
 align-items: center;
 border: var(--button-border, var(--border));
 border-radius: var(--button-border-radius, 6px);
 background: var(--button-background, var(--background));
 color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
 background: var(--button-primary-background, var(--accent-background));
 color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

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 toolbar for cropping and annotating#15282

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 4 commits into

from

Feb 4, 2025
 Merged


feat(user feedback): Adds toolbar for cropping and annotating
#15282
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
20de538

tool wip


c298lee Jan 31, 2025
5ba5800

use multiple class names in BEM format


c298lee Feb 3, 2025
ff07b6c

still works when option is off


c298lee Feb 3, 2025
71d8049

rm extra options


c298lee Feb 3, 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


23 changes: 23 additions & 0 deletions
packages/feedback/src/screenshot/components/CropIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
 h: typeof hType;
}

export default function CropIconFactory({
 h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
 return function CropIcon(): VNode {
 return (
 <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path
 d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
 stroke="currentColor"
 strokeWidth="1.5"
 strokeLinecap="round"
 strokeLinejoin="round"
 />
 </svg>
 );
 };
}

2 changes: 1 addition & 1 deletion
packages/feedback/src/screenshot/components/PenIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
 <svg width="20" height="20" 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"
Expand Down

180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
 const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
 const CropCorner = CropCornerFactory({ h });
 const PenIcon = PenIconFactory({ h });
 const CropIcon = CropIconFactory({ h });

 return function ScreenshotEditor({ onError }: Props): VNode {
 const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
 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 [isCropping, setIsCropping] = hooks.useState(true);
 const [isAnnotating, setIsAnnotating] = hooks.useState(false);

Comment on lines

+91
 to 
92

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.

Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.

 hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
 const croppingBox = constructRect(croppingRect);
 ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

 if (!isCropping) {
 return;
 }

Comment on lines

+148
 to 
+150

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image

 // draw gray overlay around the selection
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
 ctx.strokeStyle = '#000000';
 ctx.lineWidth = 1;
 ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
 }, [croppingRect]);
 }, [croppingRect, isCropping]);

 function onGrabButton(e: Event, corner: string): void {
 setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
 }}
 <div class="editor__image-container">
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div
 class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
 ${confirmCrop ? 'editor__crop-container--move' : ''}`}
 ref={cropContainerRef}
 >
 <PenIcon />
 </button>
 </div>
 )}
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
 <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
 {isCropping && (
 <div>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 </div>
 )}
 {isCropping && (
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 }}
 class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
 >
 <button
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 }}
 class="btn btn--default"
 >
 {options.cancelButtonLabel}
 </button>
 <button
 onClick={e => {
 e.preventDefault();
 applyCrop();
 setConfirmCrop(false);
 }}
 class="btn btn--primary"
 >
 {options.confirmButtonLabel}
 </button>
 </div>
 )}
 </div>
 <canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
 ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
 ref={annotatingRef}
 ></canvas>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 display: confirmCrop ? 'flex' : 'none',
 }}
 class="editor__crop-btn-group"
 >
 </div>
 </div>
 {options._experiments.annotations && (
 <div class="editor__tool-container">
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR
@billyvgbillyvgFeb 4, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?
@c298leec298leeFeb 4, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)
 <div class="editor__tool-bar">
 <button
 class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 setIsCropping(!isCropping);
 setIsAnnotating(false);
 }}
 class="btn btn--default"
 >
{options.cancelButtonLabel}
<CropIcon />
 </button>
 <button
 class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
 }}
 class="btn btn--primary"
 >
{options.confirmButtonLabel}
<PenIcon />
 </button>
 </div>
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR
 </div>
 <canvas
 class="editor__annotation"
 onMouseDown={onAnnotateStart}
 style={{ zIndex: isAnnotating ? '2' : '1' }}
 ref={annotatingRef}
 ></canvas>
 </div>
 )}
 </div>
 );
 };
Expand Down

48 changes: 42 additions & 6 deletions
packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

 style.textContent = `
.editor {
 display: flex;
 flex-grow: 1;
 flex-direction: column;
}
.editor__image-container {
 padding: 10px;
 padding-top: 65px;
 padding-bottom: 65px;
 flex-grow: 1;
 position: relative;
 height: 100%;
 border-radius: var(--menu-border-radius, 6px);

 background-color: ${surface200};
 background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 );
}

.editor__annotation {
 z-index: 1;
}
.editor__annotation--active {
 z-index: 2;
}

.editor__canvas-container {
 width: 100%;
 height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
 custor: auto;
 position: absolute;
 z-index: 2;
}
.editor__crop-container--inactive {
 z-index: 1;
}
.editor__crop-container--move {
 cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 background: var(--button-background, var(--background));
 width: 175px;
 position: absolute;
 display: none;
}
.editor__crop-btn-group--active {
 display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
 height: 30px;
.editor__tool-bar {
 display: flex;
 gap: 8px;
}
.editor__tool {
 display: flex;
 padding: 8px 12px;
 justify-content: center;
 align-items: center;
 border: var(--button-border, var(--border));
 border-radius: var(--button-border-radius, 6px);
 background: var(--button-background, var(--background));
 color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
 background: var(--button-primary-background, var(--accent-background));
 color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

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 toolbar for cropping and annotating#15282

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 4 commits into

from

Feb 4, 2025
 Merged


feat(user feedback): Adds toolbar for cropping and annotating
#15282
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
20de538

tool wip


c298lee Jan 31, 2025
5ba5800

use multiple class names in BEM format


c298lee Feb 3, 2025
ff07b6c

still works when option is off


c298lee Feb 3, 2025
71d8049

rm extra options


c298lee Feb 3, 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


23 changes: 23 additions & 0 deletions
packages/feedback/src/screenshot/components/CropIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
 h: typeof hType;
}

export default function CropIconFactory({
 h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
 return function CropIcon(): VNode {
 return (
 <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path
 d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
 stroke="currentColor"
 strokeWidth="1.5"
 strokeLinecap="round"
 strokeLinejoin="round"
 />
 </svg>
 );
 };
}

2 changes: 1 addition & 1 deletion
packages/feedback/src/screenshot/components/PenIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
 <svg width="20" height="20" 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"
Expand Down

180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
 const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
 const CropCorner = CropCornerFactory({ h });
 const PenIcon = PenIconFactory({ h });
 const CropIcon = CropIconFactory({ h });

 return function ScreenshotEditor({ onError }: Props): VNode {
 const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
 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 [isCropping, setIsCropping] = hooks.useState(true);
 const [isAnnotating, setIsAnnotating] = hooks.useState(false);

Comment on lines

+91
 to 
92

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.

Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.

 hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
 const croppingBox = constructRect(croppingRect);
 ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

 if (!isCropping) {
 return;
 }

Comment on lines

+148
 to 
+150

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image

 // draw gray overlay around the selection
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
 ctx.strokeStyle = '#000000';
 ctx.lineWidth = 1;
 ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
 }, [croppingRect]);
 }, [croppingRect, isCropping]);

 function onGrabButton(e: Event, corner: string): void {
 setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
 }}
 <div class="editor__image-container">
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div
 class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
 ${confirmCrop ? 'editor__crop-container--move' : ''}`}
 ref={cropContainerRef}
 >
 <PenIcon />
 </button>
 </div>
 )}
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
 <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
 {isCropping && (
 <div>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 </div>
 )}
 {isCropping && (
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 }}
 class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
 >
 <button
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 }}
 class="btn btn--default"
 >
 {options.cancelButtonLabel}
 </button>
 <button
 onClick={e => {
 e.preventDefault();
 applyCrop();
 setConfirmCrop(false);
 }}
 class="btn btn--primary"
 >
 {options.confirmButtonLabel}
 </button>
 </div>
 )}
 </div>
 <canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
 ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
 ref={annotatingRef}
 ></canvas>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 display: confirmCrop ? 'flex' : 'none',
 }}
 class="editor__crop-btn-group"
 >
 </div>
 </div>
 {options._experiments.annotations && (
 <div class="editor__tool-container">
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR
@billyvgbillyvgFeb 4, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?
@c298leec298leeFeb 4, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)
 <div class="editor__tool-bar">
 <button
 class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 setIsCropping(!isCropping);
 setIsAnnotating(false);
 }}
 class="btn btn--default"
 >
{options.cancelButtonLabel}
<CropIcon />
 </button>
 <button
 class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
 }}
 class="btn btn--primary"
 >
{options.confirmButtonLabel}
<PenIcon />
 </button>
 </div>
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR
 </div>
 <canvas
 class="editor__annotation"
 onMouseDown={onAnnotateStart}
 style={{ zIndex: isAnnotating ? '2' : '1' }}
 ref={annotatingRef}
 ></canvas>
 </div>
 )}
 </div>
 );
 };
Expand Down

48 changes: 42 additions & 6 deletions
packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

 style.textContent = `
.editor {
 display: flex;
 flex-grow: 1;
 flex-direction: column;
}
.editor__image-container {
 padding: 10px;
 padding-top: 65px;
 padding-bottom: 65px;
 flex-grow: 1;
 position: relative;
 height: 100%;
 border-radius: var(--menu-border-radius, 6px);

 background-color: ${surface200};
 background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 );
}

.editor__annotation {
 z-index: 1;
}
.editor__annotation--active {
 z-index: 2;
}

.editor__canvas-container {
 width: 100%;
 height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
 custor: auto;
 position: absolute;
 z-index: 2;
}
.editor__crop-container--inactive {
 z-index: 1;
}
.editor__crop-container--move {
 cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 background: var(--button-background, var(--background));
 width: 175px;
 position: absolute;
 display: none;
}
.editor__crop-btn-group--active {
 display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
 height: 30px;
.editor__tool-bar {
 display: flex;
 gap: 8px;
}
.editor__tool {
 display: flex;
 padding: 8px 12px;
 justify-content: center;
 align-items: center;
 border: var(--button-border, var(--border));
 border-radius: var(--button-border-radius, 6px);
 background: var(--button-background, var(--background));
 color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
 background: var(--button-primary-background, var(--accent-background));
 color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

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 toolbar for cropping and annotating#15282

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 4 commits into

from

Feb 4, 2025
 Merged


feat(user feedback): Adds toolbar for cropping and annotating
#15282
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
20de538

tool wip


c298lee Jan 31, 2025
5ba5800

use multiple class names in BEM format


c298lee Feb 3, 2025
ff07b6c

still works when option is off


c298lee Feb 3, 2025
71d8049

rm extra options


c298lee Feb 3, 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


23 changes: 23 additions & 0 deletions
packages/feedback/src/screenshot/components/CropIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import type { VNode, h as hType } from 'preact';

interface FactoryParams {
 h: typeof hType;
}

export default function CropIconFactory({
 h, // eslint-disable-line @typescript-eslint/no-unused-vars
}: FactoryParams) {
 return function CropIcon(): VNode {
 return (
 <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path
 d="M15.25 12.5H12.5M12.5 12.5H4.50001C3.94773 12.5 3.50001 12.0523 3.50001 11.5V3.50002M12.5 12.5L12.5 4.50002C12.5 3.94773 12.0523 3.50002 11.5 3.50002H3.50001M12.5 12.5L12.5 15.25M3.50001 3.50002V0.750031M3.50001 3.50002H0.75"
 stroke="currentColor"
 strokeWidth="1.5"
 strokeLinecap="round"
 strokeLinejoin="round"
 />
 </svg>
 );
 };
}

2 changes: 1 addition & 1 deletion
packages/feedback/src/screenshot/components/PenIcon.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,7 +9,7 @@ export default function PenIconFactory({
}: 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">
 <svg width="20" height="20" 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"
Expand Down

180 changes: 100 additions & 80 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 CropIconFactory from './CropIcon';
import PenIconFactory from './PenIcon';
import { createScreenshotInputStyles } from './ScreenshotInput.css';
import { useTakeScreenshotFactory } from './useTakeScreenshot';
Expand DownExpand Up@@ -75,6 +76,7 @@ export function ScreenshotEditorFactory({
 const useTakeScreenshot = useTakeScreenshotFactory({ hooks });
 const CropCorner = CropCornerFactory({ h });
 const PenIcon = PenIconFactory({ h });
 const CropIcon = CropIconFactory({ h });

 return function ScreenshotEditor({ onError }: Props): VNode {
 const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles(options.styleNonce).innerText }), []);
Expand All@@ -86,6 +88,7 @@ export function ScreenshotEditorFactory({
 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 [isCropping, setIsCropping] = hooks.useState(true);
 const [isAnnotating, setIsAnnotating] = hooks.useState(false);

Comment on lines

+91
 to 
92

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We might want to make these a single state where the value is more like an enum.

Right now i'm noticing spots like this:
setIsCropping(!isCropping);
setIsAnnotating(false);

which will only get more annoying if more tools get added. Not something for now, but when the next one gets added this'll be a fix.

 hooks.useEffect(() => {
Expand DownExpand Up@@ -142,6 +145,10 @@ export function ScreenshotEditorFactory({
 const croppingBox = constructRect(croppingRect);
 ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);

 if (!isCropping) {
 return;
 }

Comment on lines

+148
 to 
+150

@ryan953ryan953Feb 3, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this important to be after the clearRect() call? which rect is being cleared in this case
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it is important to be after the clearRect. It removes the white border that's used to show that it's in the cropping state. Here's waht it would look like if it was before clearRect:
image

 // draw gray overlay around the selection
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
Expand All@@ -154,7 +161,7 @@ export function ScreenshotEditorFactory({
 ctx.strokeStyle = '#000000';
 ctx.lineWidth = 1;
 ctx.strokeRect(croppingBox.x + 3, croppingBox.y + 3, croppingBox.width - 6, croppingBox.height - 6);
 }, [croppingRect]);
 }, [croppingRect, isCropping]);

 function onGrabButton(e: Event, corner: string): void {
 setIsAnnotating(false);
Expand DownExpand Up@@ -398,102 +405,115 @@ 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);
 }}
 <div class="editor__image-container">
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div
 class={`editor__crop-container ${isAnnotating ? 'editor__crop-container--inactive' : ''}
 ${confirmCrop ? 'editor__crop-container--move' : ''}`}
 ref={cropContainerRef}
 >
 <PenIcon />
 </button>
 </div>
 )}
 <div class="editor__canvas-container" ref={canvasContainerRef}>
 <div class="editor__crop-container" style={{ zIndex: isAnnotating ? 1 : 2 }} ref={cropContainerRef}>
 <canvas onMouseDown={onDragStart} ref={croppingRef}></canvas>
 {isCropping && (
 <div>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 </div>
 )}
 {isCropping && (
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 }}
 class={`editor__crop-btn-group ${confirmCrop ? 'editor__crop-btn-group--active' : ''}`}
 >
 <button
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 }}
 class="btn btn--default"
 >
 {options.cancelButtonLabel}
 </button>
 <button
 onClick={e => {
 e.preventDefault();
 applyCrop();
 setConfirmCrop(false);
 }}
 class="btn btn--primary"
 >
 {options.confirmButtonLabel}
 </button>
 </div>
 )}
 </div>
 <canvas
onMouseDown={onDragStart}
style={{ cursor: confirmCrop ? 'move' : 'auto' }}
 ref={croppingRef}
class={`editor__annotation ${isAnnotating ? 'editor__annotation--active' : ''}`}
onMouseDown={onAnnotateStart}
 ref={annotatingRef}
 ></canvas>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.startY - CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="top-right"
 ></CropCorner>
 <CropCorner
 left={croppingRect.startX - CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-left"
 ></CropCorner>
 <CropCorner
 left={croppingRect.endX - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 top={croppingRect.endY - CROP_BUTTON_SIZE + CROP_BUTTON_BORDER}
 onGrabButton={onGrabButton}
 corner="bottom-right"
 ></CropCorner>
 <div
 style={{
 left: Math.max(0, croppingRect.endX - 191),
 top: Math.max(0, croppingRect.endY + 8),
 display: confirmCrop ? 'flex' : 'none',
 }}
 class="editor__crop-btn-group"
 >
 </div>
 </div>
 {options._experiments.annotations && (
 <div class="editor__tool-container">
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for reset button in a future PR
@billyvgbillyvgFeb 4, 2025

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this here for layout reasons?
@c298leec298leeFeb 4, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, it's so we don't have to modify the CSS each time we add a new tool (reset button and colour picker buttons)
 <div class="editor__tool-bar">
 <button
 class={`editor__tool ${isCropping ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
 if (croppingRef.current) {
 setCroppingRect({
 startX: 0,
 startY: 0,
 endX: croppingRef.current.width / DPI,
 endY: croppingRef.current.height / DPI,
 });
 }
 setConfirmCrop(false);
 setIsCropping(!isCropping);
 setIsAnnotating(false);
 }}
 class="btn btn--default"
 >
{options.cancelButtonLabel}
<CropIcon />
 </button>
 <button
 class={`editor__tool ${isAnnotating ? 'editor__tool--active' : ''}`}
 onClick={e => {
 e.preventDefault();
applyCrop();
setConfirmCrop(false);
setIsAnnotating(!isAnnotating);
setIsCropping(false);
 }}
 class="btn btn--primary"
 >
{options.confirmButtonLabel}
<PenIcon />
 </button>
 </div>
 <div />
@c298leec298leeFeb 3, 2025•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra div for colour picking in a future PR
 </div>
 <canvas
 class="editor__annotation"
 onMouseDown={onAnnotateStart}
 style={{ zIndex: isAnnotating ? '2' : '1' }}
 ref={annotatingRef}
 ></canvas>
 </div>
 )}
 </div>
 );
 };
Expand Down

48 changes: 42 additions & 6 deletions
packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -11,11 +11,17 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme

 style.textContent = `
.editor {
 display: flex;
 flex-grow: 1;
 flex-direction: column;
}
.editor__image-container {
 padding: 10px;
 padding-top: 65px;
 padding-bottom: 65px;
 flex-grow: 1;
 position: relative;
 height: 100%;
 border-radius: var(--menu-border-radius, 6px);

 background-color: ${surface200};
 background-image: repeating-linear-gradient(
Expand All@@ -34,6 +40,13 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 );
}

.editor__annotation {
 z-index: 1;
}
.editor__annotation--active {
 z-index: 2;
}

.editor__canvas-container {
 width: 100%;
 height: 100%;
Expand All@@ -49,7 +62,15 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
}

.editor__crop-container {
 custor: auto;
 position: absolute;
 z-index: 2;
}
.editor__crop-container--inactive {
 z-index: 1;
}
.editor__crop-container--move {
 cursor: move;
}

.editor__crop-btn-group {
Expand All@@ -59,6 +80,10 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 background: var(--button-background, var(--background));
 width: 175px;
 position: absolute;
 display: none;
}
.editor__crop-btn-group--active {
 display: flex;
}

.editor__crop-corner {
Expand DownExpand Up@@ -90,17 +115,28 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
 border-top: none;
}
.editor__tool-container {
position: absolute;
padding: 10px 0px;
top: 0;
padding-top: 8px;
display: flex;
justify-content: space-between;
}
.editor__pen-tool {
 height: 30px;
.editor__tool-bar {
 display: flex;
 gap: 8px;
}
.editor__tool {
 display: flex;
 padding: 8px 12px;
 justify-content: center;
 align-items: center;
 border: var(--button-border, var(--border));
 border-radius: var(--button-border-radius, 6px);
 background: var(--button-background, var(--background));
 color: var(--button-foreground, var(--foreground));
}

.editor__tool--active {
 background: var(--button-primary-background, var(--accent-background));
 color: var(--button-primary-foreground, var(--accent-foreground));
}
`;

Expand Down