allow dropping off page
Hunter
Sunday, October 19th, 2025 at 10:05 PM
233 let dragState = null;
234 let resizeState = null;
235
- // Prevent default drag behavior
- page.addEventListener('dragover', (e) => {
236 + // Prevent default drag behavior on entire document
237 + document.addEventListener('dragover', (e) => {
238 e.preventDefault();
239 e.stopPropagation();
240 });
241
- page.addEventListener('drop', async (e) => {
242 + document.addEventListener('drop', async (e) => {
243 e.preventDefault();
244 e.stopPropagation();
245
246 const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
247 + if (files.length === 0) return;
248
249 // Get drop position relative to the grid
250 const gridRect = grid.getBoundingClientRect();
- const dropX = e.clientX - gridRect.left;
- const dropY = e.clientY - gridRect.top;
251 + const gridWidth = GRID_COLS * CELL_SIZE_PX;
252 + const gridHeight = GRID_ROWS * CELL_SIZE_PX;
253 +
254 + // Clamp drop position to grid boundaries
255 + let dropX = e.clientX - gridRect.left;
256 + let dropY = e.clientY - gridRect.top;
257 + dropX = Math.max(0, Math.min(gridWidth, dropX));
258 + dropY = Math.max(0, Math.min(gridHeight, dropY));
259
260 // Load first image to get base dimensions
261 let firstImageDimensions = null;