memori

commit 8afc87b9d08ae798be83dd94befa911a5b757da3
parent 0d40a80be15f90a4ce6c8e1e66c160be88836b98
Author: Hunter
Date:   Mon, 20 Oct 2025 12:07:26 -0400

add dimension labels; bring to front on hover

Diffstat:
M
script.js
 | 
37
++++++++++++++++++++++++++++++++-----
M
style.css
 | 
39
+++++++++++++++++++++++++++++++++++++++

2 files changed, 71 insertions(+), 5 deletions(-)
diff --git a/script.js b/script.js
@@ -19,6 +19,7 @@ for (let i = 0; i < GRID_COLS * GRID_ROWS; i++) {
 let images = [];
 let dragState = null;
 let resizeState = null;
+let highestZIndex = 0;
 
 // Prevent default drag behavior on entire document
 document.addEventListener('dragover', (e) => {
@@ -107,7 +108,7 @@ document.addEventListener('drop', async (e) => {
 				xCell = Math.max(0, Math.min(GRID_COLS - widthCells, xCell));
 				yCell = Math.max(0, Math.min(GRID_ROWS - heightCells, yCell));
 
-				addImage(event.target.result, xCell, yCell, widthCells, heightCells, idx + 1);
+				addImage(event.target.result, xCell, yCell, widthCells, heightCells);
 			};
 			img.src = event.target.result;
 		};
@@ -115,12 +116,11 @@ document.addEventListener('drop', async (e) => {
 	});
 });
 
-function addImage(src, xCell, yCell, widthCells, heightCells, zIndex = 0) {
+function addImage(src, xCell, yCell, widthCells, heightCells) {
 	const container = document.createElement('div');
 	container.className = 'image-container';
-	if (zIndex > 0) {
-		container.style.zIndex = zIndex;
-	}
+	highestZIndex++;
+	container.style.zIndex = highestZIndex;
 
 	const wrapper = document.createElement('div');
 	wrapper.className = 'image-wrapper';
@@ -138,6 +138,17 @@ function addImage(src, xCell, yCell, widthCells, heightCells, zIndex = 0) {
 		container.appendChild(handle);
 	});
 
+	// Add dimension labels
+	const widthLabel = document.createElement('div');
+	widthLabel.className = 'dimension-label width';
+	widthLabel.textContent = widthCells;
+	container.appendChild(widthLabel);
+
+	const heightLabel = document.createElement('div');
+	heightLabel.className = 'dimension-label height';
+	heightLabel.textContent = heightCells;
+	container.appendChild(heightLabel);
+
 	const imageData = {
 		container,
 		xCell,
@@ -208,6 +219,12 @@ function updateImagePosition(img) {
 	img.container.style.width = img.widthCells * CELL_SIZE_PX + 'px';
 	img.container.style.height = img.heightCells * CELL_SIZE_PX + 'px';
 
+	// Update dimension labels
+	const widthLabel = img.container.querySelector('.dimension-label.width');
+	const heightLabel = img.container.querySelector('.dimension-label.height');
+	if (widthLabel) widthLabel.textContent = img.widthCells;
+	if (heightLabel) heightLabel.textContent = img.heightCells;
+
 	// Recalculate baseScale if container size changed
 	if (img.naturalWidth > 0 && img.naturalHeight > 0) {
 		const containerWidth = img.widthCells * CELL_SIZE_PX;
@@ -229,9 +246,19 @@ function updateImagePosition(img) {
 	}
 }
 
+function bringToFront(container) {
+	highestZIndex++;
+	container.style.zIndex = highestZIndex;
+}
+
 function setupImageHandlers(imageData) {
 	const container = imageData.container;
 
+	// Bring to front on hover
+	container.addEventListener('mouseenter', () => {
+		bringToFront(container);
+	});
+
 	// Moving / Deleting
 	container.addEventListener('mousedown', (e) => {
 		if (e.target.classList.contains('resize-handle')) return;
diff --git a/style.css b/style.css
@@ -135,6 +135,41 @@ body.dragging * {
 	opacity: 1;
 }
 
+.dimension-label {
+	position: absolute;
+	background: var(--color-accent);
+	color: var(--color-white);
+	padding: 4px 10px;
+	border-radius: 12px;
+	font-size: 15px;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	font-weight: 500;
+	line-height: 1;
+	opacity: 0;
+	transition: opacity 0.2s;
+	pointer-events: none;
+	z-index: 9999;
+	white-space: nowrap;
+}
+
+.dimension-label.width {
+	top: 1px;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.dimension-label.height {
+	right: 1px;
+	top: 50%;
+	transform: translate(50%, -50%) rotate(90deg);
+}
+
+.image-container:hover .dimension-label,
+.image-container.dragging .dimension-label,
+.image-container.resizing .dimension-label {
+	opacity: 1;
+}
+
 .resize-handle.corner {
 	width: 10px;
 	height: 10px;
@@ -251,6 +286,10 @@ body.dragging * {
 	.resize-handle {
 		display: none !important;
 	}
+
+	.dimension-label {
+		display: none !important;
+	}
 }
 
 @page {