vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(web): clear draw ink when exiting mode (#1821)

Browse source
This commit is contained in:
mehmet turac 2026-05-15 12:48:28 +03:00 committed by GitHub
parent e3185d57c8
commit fd80d7c997
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 39 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/web/src/components/PreviewDrawOverlay.tsx
View file

@ -166,6 +166,14 @@ export function PreviewDrawOverlay({
redraw();
}
useEffect(() => {
if (active) return;
strokesRef.current = [];
drawingRef.current = null;
setHasInk(false);
redraw();
}, [active, redraw]);
function strokeBounds(): { x: number; y: number; width: number; height: number } | null {
const points = strokesRef.current.flatMap((stroke) => stroke.points);
if (points.length === 0) return null;

31
apps/web/tests/components/PreviewDrawOverlay.test.tsx Normal file
View file

@ -0,0 +1,31 @@
// @vitest-environment jsdom
import { fireEvent, render, waitFor } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { PreviewDrawOverlay } from '../../src/components/PreviewDrawOverlay';
describe('PreviewDrawOverlay', () => {
it('clears transient ink when draw mode exits', async () => {
const { container, rerender } = render(
<PreviewDrawOverlay active>
<div style={{ width: 320, height: 200 }} />
</PreviewDrawOverlay>,
);
const canvas = container.querySelector('canvas');
expect(canvas).toBeTruthy();
fireEvent.pointerDown(canvas!, { clientX: 10, clientY: 10, pointerId: 1 });
fireEvent.pointerMove(canvas!, { clientX: 40, clientY: 40, pointerId: 1 });
fireEvent.pointerUp(canvas!, { pointerId: 1 });
rerender(
<PreviewDrawOverlay active={false}>
<div style={{ width: 320, height: 200 }} />
</PreviewDrawOverlay>,
);
await waitFor(() => expect(container.querySelector('canvas')).toBeNull());
});
});