Skip to content

Commit dc273c3

Browse files
c298leec298lee
committed
no bugs hopefully
1 parent 8908648 commit dc273c3

File tree

2 files changed

+57
-77
lines changed

2 files changed

+57
-77
lines changed

‎packages/feedback/src/screenshot/components/ScreenshotEditorv2.tsx

Lines changed: 35 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const getContainedSize = (measurementDiv: HTMLDivElement, imageSource: HTMLCanva
6262
return { action: '', x: x, y: y, width: width, height: height };
6363
};
6464

65-
function drawRect(rect: Rect, ctx: CanvasRenderingContext2D, scale: number = 1): void {
65+
function drawRect(rect: Rect, ctx: CanvasRenderingContext2D, scale: number = 1, lineWidth: number = 4): void {
6666
const scaledX = rect.x * scale;
6767
const scaledY = rect.y * scale;
6868
const scaledWidth = rect.width * scale;
@@ -90,8 +90,12 @@ function drawRect(rect: Rect, ctx: CanvasRenderingContext2D, scale: number = 1):
9090
break;
9191
}
9292

93+
// Disable shadow after the action is drawn
94+
ctx.shadowColor = 'transparent';
95+
ctx.shadowBlur = 0;
96+
9397
ctx.strokeStyle = '#ff0000';
94-
ctx.lineWidth = 2;
98+
ctx.lineWidth = lineWidth;
9599
ctx.strokeRect(scaledX + 1, scaledY + 1, scaledWidth - 2, scaledHeight - 2);
96100
}
97101

@@ -100,10 +104,6 @@ function resizeCanvas(canvas: HTMLCanvasElement, imageDimensions: Rect): void {
100104
canvas.height = imageDimensions.height * DPI;
101105
canvas.style.width = `${imageDimensions.width}px`;
102106
canvas.style.height = `${imageDimensions.height}px`;
103-
const ctx = canvas.getContext('2d', { alpha: false });
104-
if (ctx) {
105-
ctx.scale(DPI, DPI);
106-
}
107107
}
108108

109109
export function ScreenshotEditorFactoryv2({
@@ -126,15 +126,16 @@ export function ScreenshotEditorFactoryv2({
126126
const screenshotRef = hooks.useRef<HTMLCanvasElement>(null);
127127
const graywashRef = hooks.useRef<HTMLCanvasElement>(null);
128128
const rectDivRef = hooks.useRef<HTMLDivElement>(null);
129-
const [imageSource, setImageSource] = hooks.useState<HTMLCanvasElement | null>(null);
130-
const [isShown, setIsShown] = hooks.useState<boolean>(true);
129+
const [imageSource, setimageSource] = hooks.useState<HTMLCanvasElement | null>(null);
130+
const [displayEditor, setdisplayEditor] = hooks.useState<boolean>(true);
131131
const [scaleFactor, setScaleFactor] = hooks.useState<number>(1);
132132

133133
const resize = hooks.useCallback((): void => {
134134
const screenshotCanvas = screenshotRef.current;
135135
const graywashCanvas = graywashRef.current;
136136
const measurementDiv = measurementRef.current;
137-
if (!screenshotCanvas || !graywashCanvas || !imageSource || !measurementDiv) {
137+
const rectDiv = rectDivRef.current;
138+
if (!screenshotCanvas || !graywashCanvas || !imageSource || !measurementDiv || !rectDiv) {
138139
return;
139140
}
140141

@@ -143,24 +144,19 @@ export function ScreenshotEditorFactoryv2({
143144
resizeCanvas(screenshotCanvas, imageDimensions);
144145
resizeCanvas(graywashCanvas, imageDimensions);
145146

147+
rectDiv.style.width = `${imageDimensions.width}px`;
148+
rectDiv.style.height = `${imageDimensions.height}px`;
149+
146150
const scale = graywashCanvas.clientWidth / imageBuffer.width;
147151
setScaleFactor(scale);
148152

149153
const screenshotContext = screenshotCanvas.getContext('2d', { alpha: false });
150154
if (!screenshotContext) {
151155
return;
152156
}
153-
154157
screenshotContext.drawImage(imageSource, 0, 0, imageDimensions.width, imageDimensions.height);
155158
drawScene();
156-
157-
const rectDiv = rectDivRef.current;
158-
if (!rectDiv) {
159-
return;
160-
}
161-
rectDiv.style.width = `${imageDimensions.width}px`;
162-
rectDiv.style.height = `${imageDimensions.height}px`;
163-
}, [imageSource, isShown, drawCommands]);
159+
}, [imageSource, drawCommands]);
164160

165161
hooks.useEffect(() => {
166162
WINDOW.addEventListener('resize', resize);
@@ -170,12 +166,13 @@ export function ScreenshotEditorFactoryv2({
170166
};
171167
}, [resize]);
172168

169+
hooks.useLayoutEffect(() => {
170+
resize();
171+
}, [displayEditor]);
172+
173173
hooks.useEffect(() => {
174-
const graywashCanvas = graywashRef.current;
175-
if (graywashCanvas) {
176-
drawScene();
177-
drawBuffer();
178-
}
174+
drawScene();
175+
drawBuffer();
179176
}, [drawCommands]);
180177

181178
hooks.useEffect(() => {
@@ -235,47 +232,44 @@ export function ScreenshotEditorFactoryv2({
235232

236233
const scale = graywashCanvas.clientWidth / imageBuffer.width;
237234
drawCommands.forEach(rect => {
238-
drawRect(rect, ctx, scale);
235+
drawRect(rect, ctx, scale, 2);
239236
});
240237

241238
if (currentRect) {
242-
drawRect(currentRect, ctx);
239+
drawRect(currentRect, ctx, 1, 2);
243240
setCurrentRect(undefined);
244241
}
245242
}
246243

247244
useTakeScreenshot({
248245
onBeforeScreenshot: hooks.useCallback(() => {
249246
(dialog.el as HTMLElement).style.display = 'none';
250-
setIsShown(false);
247+
setdisplayEditor(false);
251248
}, []),
252249
onScreenshot: hooks.useCallback((imageSource: HTMLVideoElement) => {
253250
const bufferCanvas = DOCUMENT.createElement('canvas');
254251
bufferCanvas.width = imageSource.videoWidth;
255252
bufferCanvas.height = imageSource.videoHeight;
256253
bufferCanvas.getContext('2d', { alpha: false })?.drawImage(imageSource, 0, 0);
257-
setImageSource(bufferCanvas);
254+
setimageSource(bufferCanvas);
255+
258256
imageBuffer.width = imageSource.videoWidth;
259257
imageBuffer.height = imageSource.videoHeight;
260258
}, []),
261259
onAfterScreenshot: hooks.useCallback(() => {
262260
(dialog.el as HTMLElement).style.display = 'block';
263-
setIsShown(true);
261+
setdisplayEditor(true);
264262
}, []),
265263
onError: hooks.useCallback(error => {
266264
(dialog.el as HTMLElement).style.display = 'block';
267-
setIsShown(true);
265+
setdisplayEditor(true);
268266
onError(error);
269267
}, []),
270268
});
271269

272270
const onDraw = (e: MouseEvent): void => {
273-
if (!action) {
274-
return;
275-
}
276-
277271
const graywashCanvas = graywashRef.current;
278-
if (!graywashCanvas) {
272+
if (!action || !graywashCanvas) {
279273
return;
280274
}
281275

@@ -299,7 +293,7 @@ export function ScreenshotEditorFactoryv2({
299293
const handleMouseUp = (e: MouseEvent): void => {
300294
const endX = Math.max(0, Math.min(e.clientX - boundingRect.left, graywashCanvas.width / DPI));
301295
const endY = Math.max(0, Math.min(e.clientY - boundingRect.top, graywashCanvas.height / DPI));
302-
// prevent drawing rect when clicking on the canvas (ie clicking delete)
296+
// prevent drawing rect when clicking on the canvas (ie. clicking delete)
303297
if (startX != endX && startY != endY) {
304298
// scale to image buffer
305299
const scale = imageBuffer.width / graywashCanvas.clientWidth;
@@ -331,51 +325,23 @@ export function ScreenshotEditorFactoryv2({
331325
<div class="editor">
332326
<style nonce={options.styleNonce} dangerouslySetInnerHTML={styles} />
333327
<div class="editor__image-container">
334-
<div class="editor__canvas-container">
335-
<div ref={measurementRef} style={{ position: 'absolute', width: '100%', height: '100%' }}></div>
336-
<canvas style={{ position: 'absolute', zIndex: '1', objectFit: 'contain' }} ref={screenshotRef}></canvas>
337-
<canvas
338-
style={{ position: 'absolute', zIndex: '2', objectFit: 'contain' }}
339-
ref={graywashRef}
340-
onMouseDown={onDraw}
341-
></canvas>
342-
<div
343-
ref={rectDivRef}
344-
style={{ position: 'absolute', zIndex: '2', objectFit: 'contain' }}
345-
onMouseDown={onDraw}
346-
>
328+
<div class="editor__canvas-container" ref={measurementRef}>
329+
<canvas ref={screenshotRef}></canvas>
330+
<canvas class="editor__canvas-annotate" ref={graywashRef} onMouseDown={onDraw}></canvas>
331+
<div class="editor__rect-container" ref={rectDivRef} onMouseDown={onDraw}>
347332
{drawCommands.map((rect, index) => (
348333
<div
349334
key={index}
350-
class="rect"
335+
class="editor__rect"
351336
style={{
352-
position: 'absolute',
353337
top: `${rect.y * scaleFactor}px`,
354338
left: `${rect.x * scaleFactor}px`,
355339
width: `${rect.width * scaleFactor}px`,
356340
height: `${rect.height * scaleFactor}px`,
357-
zIndex: 2,
358341
}}
359342
onMouseDown={onDraw}
360343
>
361-
<button
362-
type="button"
363-
style={{
364-
position: 'absolute',
365-
top: '-12px',
366-
right: '-12px',
367-
width: '25px',
368-
height: '25px',
369-
cursor: 'pointer',
370-
borderRadius: 999999,
371-
padding: 0,
372-
placeContent: 'center',
373-
zIndex: 3,
374-
border: 'none',
375-
background: 'none',
376-
}}
377-
onClick={() => handleDeleteRect(index)}
378-
>
344+
<button type="button" onClick={() => handleDeleteRect(index)}>
379345
<IconClose />
380346
</button>
381347
</div>

‎packages/feedback/src/screenshot/components/ScreenshotInput.css.ts

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
1717
}
1818
.editor__image-container {
1919
justify-items: center;
20-
padding: 10px;
21-
padding-top: 65px;
22-
padding-bottom: 65px;
20+
padding: 15px;
2321
position: relative;
2422
height: 100%;
2523
border-radius: var(--menu-border-radius, 6px);
@@ -61,7 +59,9 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
6159
object-fit: contain;
6260
position: absolute;
6361
}
64-
62+
.editor__canvas-annotate {
63+
z-index: 2;
64+
}
6565
.editor__crop-container {
6666
custor: auto;
6767
position: absolute;
@@ -140,12 +140,26 @@ export function createScreenshotInputStyles(styleNonce?: string): HTMLStyleEleme
140140
color: var(--button-primary-foreground, var(--accent-foreground));
141141
}
142142
143-
.rect:hover button{
144-
opacity: 1;
143+
.editor__rect-container {
144+
position: absolute;
145+
z-index: 2;
145146
}
146-
.rect button{
147+
.editor__rect {
148+
position: absolute;
149+
}
150+
.editor__rect button{
147151
opacity: 0;
148-
display: flex;
152+
position: absolute;
153+
top: -12px;
154+
right: -12px;
155+
cursor: pointer;
156+
padding: 0;
157+
z-index: 3;
158+
border: none;
159+
background: none;
160+
}
161+
.editor__rect:hover button{
162+
opacity: 1;
149163
}
150164
`;
151165

0 commit comments

Comments
 (0)