| 4357 | } |
| 4358 | |
| 4359 | function enableResize(handle, elementId, direction) { |
| 4360 | let isResizing = false; |
| 4361 | let startX = 0; |
| 4362 | let startY = 0; |
| 4363 | let startWidth = 0; |
| 4364 | let startHeight = 0; |
| 4365 | let startXPos = 0; |
| 4366 | let startYPos = 0; |
| 4367 | |
| 4368 | handle.addEventListener("mousedown", (e) => { |
| 4369 | if (e.button !== 0) return; |
| 4370 | e.stopPropagation(); |
| 4371 | e.preventDefault(); |
| 4372 | const el0 = elements.find((el) => el.id === elementId); |
| 4373 | if (!el0 || el0.locked || el0.hidden) return; |
| 4374 | isResizing = true; |
| 4375 | startX = e.clientX; |
| 4376 | startY = e.clientY; |
| 4377 | |
| 4378 | const el = elements.find((el) => el.id === elementId); |
| 4379 | if (!el) return; |
| 4380 | |
| 4381 | startWidth = el.w; |
| 4382 | startHeight = el.h; |
| 4383 | startXPos = el.x; |
| 4384 | startYPos = el.y; |
| 4385 | |
| 4386 | // Add resizing class for visual feedback |
| 4387 | const elementDiv = handle.closest('.ui-element'); |
| 4388 | if (elementDiv) { |
| 4389 | elementDiv.classList.add('resizing'); |
| 4390 | } |
| 4391 | preview.classList.add('manipulating'); |
| 4392 | |
| 4393 | document.addEventListener("mousemove", onResizeMove); |
| 4394 | document.addEventListener("mouseup", onResizeUp); |
| 4395 | }); |
| 4396 | |
| 4397 | function onResizeMove(e) { |
| 4398 | if (!isResizing) return; |
| 4399 | const elLock = elements.find((el) => el.id === elementId); |
| 4400 | if (!elLock || elLock.locked || elLock.hidden) return; |
| 4401 | const scale = parseFloat(preview.dataset.scale || "1"); |
| 4402 | const z = clamp(zoomFactor || 1, 0.5, 3); |
| 4403 | const effectiveScale = scale * z; |
| 4404 | const dx = (e.clientX - startX) / effectiveScale; |
| 4405 | const dy = (e.clientY - startY) / effectiveScale; |
| 4406 | |
| 4407 | const el = elements.find((el) => el.id === elementId); |
| 4408 | if (!el) return; |
| 4409 | |
| 4410 | let newWidth = startWidth; |
| 4411 | let newHeight = startHeight; |
| 4412 | let newX = startXPos; |
| 4413 | let newY = startYPos; |
| 4414 | |
| 4415 | |
| 4416 | if (direction.includes("e")) { |