fix: Media Explorer canvas wheel dùng native non-passive listener
This commit is contained in:
+12
-1
@@ -9126,6 +9126,18 @@ const MediaExplorerPanel = ({ height, clipboardRef }) => {
|
||||
setZoom(prev => Math.max(0.2, prev / zoomFactor));
|
||||
}
|
||||
};
|
||||
// React attaches onWheel passively at the root, so e.preventDefault() there is
|
||||
// ignored and Chrome logs "Unable to preventDefault inside passive event listener".
|
||||
// Use a native non-passive wheel listener so page scroll is actually blocked.
|
||||
const handleCanvasWheelRef = React.useRef(handleCanvasWheel);
|
||||
handleCanvasWheelRef.current = handleCanvasWheel;
|
||||
React.useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
const h = (e) => handleCanvasWheelRef.current(e);
|
||||
canvas.addEventListener('wheel', h, { passive: false });
|
||||
return () => canvas.removeEventListener('wheel', h);
|
||||
}, []);
|
||||
|
||||
const handleCanvasMouseDown = (e) => {
|
||||
if (!selected) return;
|
||||
@@ -10509,7 +10521,6 @@ const MediaExplorerPanel = ({ height, clipboardRef }) => {
|
||||
onMouseMove={handleCanvasMouseMove}
|
||||
onMouseUp={handleCanvasMouseUp}
|
||||
onContextMenu={handleCanvasContextMenu}
|
||||
onWheel={handleCanvasWheel}
|
||||
></canvas>
|
||||
|
||||
{/* FLOATING ZOOM CONTROLS */}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1179,3 +1179,8 @@
|
||||
- **Tóm tắt thay đổi:** `openMyComputer` refactor thành helper `useClientRoot`: (1) client handle đã lưu (IndexedDB) + permission granted → auto-scan cây client; (2) KHÔNG có handle/không có quyền → gọi `window.showDirectoryPicker()` để cấp quyền đọc thư mục client rồi hiện cây client (lần đầu sẽ hiện picker 1 lần); (3) không hỗ trợ API/người dùng hủy → fallback server scan `/api/v1/media/computer` (ổ đĩa máy local). Bỏ điều kiện `browsed.dirs.length` để luôn giữ client mode sau khi chọn. Fix cha-con: `browseClientDir` gắn `parent: handle` cho từng thư mục con, `browseComputerDir` giữ `entry.parent` khi node chưa có trong tree → nút Up (↑) điều hướng đúng trong cây client.
|
||||
- **Các file ảnh hưởng:** `app/static/js/app.jsx`, `app/static/js/app.precompiled.js`
|
||||
- **Ghi chú/Test (nếu có):** `npm run build` (babel) thành công, grep bundle chứa `showDirectoryPicker`/`useClientRoot`/`parent:handle`. Smoke: không handle → click My Computer → picker hiện, chọn thư mục → cây client expand. Có handle → không picker, cây client auto-load.
|
||||
|
||||
### [2026-08-02 20:56] Task: Fix "Unable to preventDefault inside passive event listener invocation"
|
||||
- **Tóm tắt thay đổi:** Media Explorer preview canvas dùng React `onWheel={handleCanvasWheel}` có `e.preventDefault()` — React gắn `wheel` passive tại root nên Chrome log lỗi "Unable to preventDefault inside passive event listener invocation" và page vẫn scroll. Thay bằng native listener: `useEffect` + `canvasRef` + `addEventListener('wheel', h, { passive: false })` qua `handleCanvasWheelRef` (luôn gọi handler mới nhất), bỏ prop `onWheel` khỏi `<canvas>`. Giờ block scroll thật + hết lỗi console.
|
||||
- **Các file ảnh hưởng:** `app/static/js/app.jsx`, `app/static/js/app.precompiled.js`
|
||||
- **Ghi chú/Test (nếu có):** `npm run build` OK; bundle: `handleCanvasWheelRef` có mặt, `onWheel:handleCanvasWheel` đã bỏ. Scroll chuột trên canvas preview (có file selected) → zoom hoạt động, không lỗi passive. Lưu ý: các onWheel tương tự ở MixerStrip/MasterStrip/TrackStripConsole (pan dial, fader) vẫn còn cảnh báo này — chưa sửa.
|
||||
|
||||
Reference in New Issue
Block a user