don't rotate image if it would go offgrid
Hunter
Monday, October 20th, 2025 at 1:13 PM
299
300 // Option-click (or Alt-click on Windows/Linux) to rotate
301 if (e.altKey) {
- // Rotate 90 degrees clockwise
302 + // Check if rotation would cause dimension swap and if it would fit on grid
303 const oldRotation = imageData.rotation;
- imageData.rotation = (imageData.rotation + 90) % 360;
304 + const newRotation = (imageData.rotation + 90) % 360;
305
- // Don't rotate pan coordinates - they stay in the image's original coordinate system
- // The CSS transform applies rotation before pan, so pan is relative to the rotated image
306 + // When rotating between portrait and landscape (90° or 270°), dimensions swap
307 + const willSwapDimensions = (oldRotation % 180 === 0 && newRotation % 180 !== 0) ||
308 + (oldRotation % 180 !== 0 && newRotation % 180 === 0);
309
- // When rotating between portrait and landscape (90° or 270°), we need to swap dimensions
- if ((oldRotation % 180 === 0 && imageData.rotation % 180 !== 0) ||
- (oldRotation % 180 !== 0 && imageData.rotation % 180 === 0)) {
- // Swap width and height
- const temp = imageData.widthCells;
- imageData.widthCells = imageData.heightCells;
- imageData.heightCells = temp;
310 + if (willSwapDimensions) {
311 + // Check if swapped dimensions would fit on grid at current position
312 + const newWidthCells = imageData.heightCells;
313 + const newHeightCells = imageData.widthCells;
314 +
315 + // Don't allow rotation if it would exceed grid bounds
316 + if (imageData.xCell + newWidthCells > GRID_COLS ||
317 + imageData.yCell + newHeightCells > GRID_ROWS) {
318 + return; // Silently ignore the rotation
319 + }
320
- // Adjust position to keep image within bounds after dimension swap
- imageData.xCell = Math.max(0, Math.min(GRID_COLS - imageData.widthCells, imageData.xCell));
- imageData.yCell = Math.max(0, Math.min(GRID_ROWS - imageData.heightCells, imageData.yCell));
321 + // Swap width and height
322 + imageData.widthCells = newWidthCells;
323 + imageData.heightCells = newHeightCells;
324 }
325
326 + // Rotate 90 degrees clockwise
327 + imageData.rotation = newRotation;
328 +
329 + // Don't rotate pan coordinates - they stay in the image's original coordinate system
330 + // The CSS transform applies rotation before pan, so pan is relative to the rotated image
331 +
332 updateImagePosition(imageData);
333 return;
334 }