add dimension labels; bring to front on hover
Hunter
Monday, October 20th, 2025 at 12:07 PM
19 let images = [];
20 let dragState = null;
21 let resizeState = null;
22 +let highestZIndex = 0;
23
24 // Prevent default drag behavior on entire document
25 document.addEventListener('dragover', (e) => {
108 xCell = Math.max(0, Math.min(GRID_COLS - widthCells, xCell));
109 yCell = Math.max(0, Math.min(GRID_ROWS - heightCells, yCell));
110
- addImage(event.target.result, xCell, yCell, widthCells, heightCells, idx + 1);
111 + addImage(event.target.result, xCell, yCell, widthCells, heightCells);
112 };
113 img.src = event.target.result;
114 };
116 });
117 });
118
-function addImage(src, xCell, yCell, widthCells, heightCells, zIndex = 0) {
119 +function addImage(src, xCell, yCell, widthCells, heightCells) {
120 const container = document.createElement('div');
121 container.className = 'image-container';
- if (zIndex > 0) {
- container.style.zIndex = zIndex;
- }
122 + highestZIndex++;
123 + container.style.zIndex = highestZIndex;
124
125 const wrapper = document.createElement('div');
126 wrapper.className = 'image-wrapper';
138 container.appendChild(handle);
139 });
140
141 + // Add dimension labels
142 + const widthLabel = document.createElement('div');
143 + widthLabel.className = 'dimension-label width';
144 + widthLabel.textContent = widthCells;
145 + container.appendChild(widthLabel);
146 +
147 + const heightLabel = document.createElement('div');
148 + heightLabel.className = 'dimension-label height';
149 + heightLabel.textContent = heightCells;
150 + container.appendChild(heightLabel);
151 +
152 const imageData = {
153 container,
154 xCell,
219 img.container.style.width = img.widthCells * CELL_SIZE_PX + 'px';
220 img.container.style.height = img.heightCells * CELL_SIZE_PX + 'px';
221
222 + // Update dimension labels
223 + const widthLabel = img.container.querySelector('.dimension-label.width');
224 + const heightLabel = img.container.querySelector('.dimension-label.height');
225 + if (widthLabel) widthLabel.textContent = img.widthCells;
226 + if (heightLabel) heightLabel.textContent = img.heightCells;
227 +
228 // Recalculate baseScale if container size changed
229 if (img.naturalWidth > 0 && img.naturalHeight > 0) {
230 const containerWidth = img.widthCells * CELL_SIZE_PX;
246 }
247 }
248
249 +function bringToFront(container) {
250 + highestZIndex++;
251 + container.style.zIndex = highestZIndex;
252 +}
253 +
254 function setupImageHandlers(imageData) {
255 const container = imageData.container;
256
257 + // Bring to front on hover
258 + container.addEventListener('mouseenter', () => {
259 + bringToFront(container);
260 + });
261 +
262 // Moving / Deleting
263 container.addEventListener('mousedown', (e) => {
264 if (e.target.classList.contains('resize-handle')) return;
135 opacity: 1;
136 }
137
138 +.dimension-label {
139 + position: absolute;
140 + background: var(--color-accent);
141 + color: var(--color-white);
142 + padding: 4px 10px;
143 + border-radius: 12px;
144 + font-size: 15px;
145 + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
146 + font-weight: 500;
147 + line-height: 1;
148 + opacity: 0;
149 + transition: opacity 0.2s;
150 + pointer-events: none;
151 + z-index: 9999;
152 + white-space: nowrap;
153 +}
154 +
155 +.dimension-label.width {
156 + top: 1px;
157 + left: 50%;
158 + transform: translate(-50%, -50%);
159 +}
160 +
161 +.dimension-label.height {
162 + right: 1px;
163 + top: 50%;
164 + transform: translate(50%, -50%) rotate(90deg);
165 +}
166 +
167 +.image-container:hover .dimension-label,
168 +.image-container.dragging .dimension-label,
169 +.image-container.resizing .dimension-label {
170 + opacity: 1;
171 +}
172 +
173 .resize-handle.corner {
174 width: 10px;
175 height: 10px;
286 .resize-handle {
287 display: none !important;
288 }
289 +
290 + .dimension-label {
291 + display: none !important;
292 + }
293 }
294
295 @page {