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));
|
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) => {
|
const handleCanvasMouseDown = (e) => {
|
||||||
if (!selected) return;
|
if (!selected) return;
|
||||||
@@ -10509,7 +10521,6 @@ const MediaExplorerPanel = ({ height, clipboardRef }) => {
|
|||||||
onMouseMove={handleCanvasMouseMove}
|
onMouseMove={handleCanvasMouseMove}
|
||||||
onMouseUp={handleCanvasMouseUp}
|
onMouseUp={handleCanvasMouseUp}
|
||||||
onContextMenu={handleCanvasContextMenu}
|
onContextMenu={handleCanvasContextMenu}
|
||||||
onWheel={handleCanvasWheel}
|
|
||||||
></canvas>
|
></canvas>
|
||||||
|
|
||||||
{/* FLOATING ZOOM CONTROLS */}
|
{/* 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.
|
- **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`
|
- **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.
|
- **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