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): keep draw overlay scrollable (#1848)

Browse source
This commit is contained in:
mehmet turac 2026-05-15 18:05:49 +03:00 committed by GitHub
parent 13c8bc4193
commit 7d9488300e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 38 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useCallback, useEffect, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from 'react';
import { useCallback, useEffect, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode, type WheelEvent } from 'react';
import { Icon } from './Icon';
import type { PreviewVisualMarkKind } from '../types';
@ -159,6 +159,15 @@ export function PreviewDrawOverlay({
redraw();
}
function onCanvasWheel(e: WheelEvent<HTMLCanvasElement>) {
if (mode !== 'draw' || sending) return;
const iframe = wrapRef.current?.querySelector('iframe');
const win = iframe?.contentWindow;
if (!win || typeof win.scrollBy !== 'function') return;
e.preventDefault();
win.scrollBy({ left: e.deltaX, top: e.deltaY, behavior: 'auto' });
}
function clearInk() {
strokesRef.current = [];
drawingRef.current = null;
@ -374,6 +383,7 @@ export function PreviewDrawOverlay({
onPointerMove={onPointerMove}
onPointerUp={onPointerUp}
onPointerCancel={onPointerUp}
onWheel={onCanvasWheel}
style={{
position: 'absolute',
inset: 0,

28
apps/web/tests/components/PreviewDrawOverlay.test.tsx
View file

@ -1,7 +1,7 @@
// @vitest-environment jsdom
import { fireEvent, render, waitFor } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { describe, expect, it, vi } from 'vitest';
import { PreviewDrawOverlay } from '../../src/components/PreviewDrawOverlay';
@ -28,4 +28,30 @@ describe('PreviewDrawOverlay', () => {
await waitFor(() => expect(container.querySelector('canvas')).toBeNull());
});
it('forwards wheel scrolling to the preview iframe while drawing', () => {
const { container } = render(
<PreviewDrawOverlay active>
<iframe title="preview" />
</PreviewDrawOverlay>,
);
const canvas = container.querySelector('canvas');
const iframe = container.querySelector('iframe');
expect(canvas).toBeTruthy();
expect(iframe?.contentWindow).toBeTruthy();
const scrollBy = vi.fn();
Object.defineProperty(iframe!.contentWindow!, 'scrollBy', {
value: scrollBy,
configurable: true,
});
fireEvent.wheel(canvas!, {
deltaX: 12,
deltaY: 180,
});
expect(scrollBy).toHaveBeenCalledWith({ left: 12, top: 180, behavior: 'auto' });
});
});