spawn images with 5 cell lesser axis; drop images near cursor location
Hunter
Sunday, October 19th, 2025 at 9:06 PM
244
245 const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/'));
246
247 + // Get drop position relative to the grid
248 + const gridRect = grid.getBoundingClientRect();
249 + const dropX = e.clientX - gridRect.left;
250 + const dropY = e.clientY - gridRect.top;
251 +
252 files.forEach((file, idx) => {
253 const reader = new FileReader();
254 reader.onload = (event) => {
256 img.onload = () => {
257 const aspectRatio = img.width / img.height;
258
- // Calculate best fit in grid cells
- let widthCells = Math.round(Math.sqrt(16 * aspectRatio));
- let heightCells = Math.round(widthCells / aspectRatio);
-
- // Ensure minimum size
- widthCells = Math.max(2, widthCells);
- heightCells = Math.max(2, heightCells);
-
- // Calculate position in grid cells
- const xCell = 2 + (idx * 2) % 20;
- const yCell = 2 + Math.floor((idx * 2) / 20) * 2;
259 + // Set smaller dimension to 5 cells, calculate larger dimension
260 + let widthCells, heightCells;
261 + if (aspectRatio >= 1) {
262 + // Width is larger or equal
263 + heightCells = 5;
264 + widthCells = Math.round(heightCells * aspectRatio);
265 + } else {
266 + // Height is larger
267 + widthCells = 5;
268 + heightCells = Math.round(widthCells / aspectRatio);
269 + }
270 +
271 + // Clamp to grid boundaries
272 + widthCells = Math.min(widthCells, GRID_COLS);
273 + heightCells = Math.min(heightCells, GRID_ROWS);
274 +
275 + // Calculate position near drop point
276 + let xCell = Math.round(dropX / CELL_SIZE_PX) + (idx * 2);
277 + let yCell = Math.round(dropY / CELL_SIZE_PX);
278 +
279 + // Ensure image stays within grid bounds
280 + xCell = Math.max(0, Math.min(GRID_COLS - widthCells, xCell));
281 + yCell = Math.max(0, Math.min(GRID_ROWS - heightCells, yCell));
282
283 addImage(event.target.result, xCell, yCell, widthCells, heightCells);
284 };