Function onMouseMove

app.js:4574–4628

(e)

  });

  function onMouseMove(e) {
    if (!isDragging) return;
    const scale = parseFloat(preview.dataset.scale || "1");
    const z = clamp(zoomFactor || 1, 0.5, 3);
    const effectiveScale = scale * z;
    let dx = (e.clientX - startX) / effectiveScale;
    let dy = (e.clientY - startY) / effectiveScale;

    let newX = origX + dx;
    let newY = origY + dy;

    const suppressSnap = e.ctrlKey || e.metaKey;
    const snapped = snapMoveToElements(id, newX, newY, { suppressSnap });
    newX = snapped.x;
    newY = snapped.y;

    if (snapToGrid && gridSize > 0 && !suppressSnap) {
      newX = Math.round(newX / gridSize) * gridSize;
      newY = Math.round(newY / gridSize) * gridSize;
    }

    const leadOrig = dragOrig.get(id) || { x: origX, y: origY };
    const ddx = Math.round(newX) - Math.round(leadOrig.x);
    const ddy = Math.round(newY) - Math.round(leadOrig.y);

    dragIds.forEach((sid) => {
      const s = elements.find((x) => x.id === sid);
      const o = dragOrig.get(sid);
      if (!s || !o) return;
      s.x = Math.round(o.x + ddx);
      s.y = Math.round(o.y + ddy);
    });

    // Snap guides (in preview coordinates)
    const guides = ensureSnapGuides();
    if (guides.v && snapped.gx != null) {
      guides.v.style.left = snapped.gx * scale + "px";
      guides.v.classList.add("show");
    } else if (guides.v) {
      guides.v.classList.remove("show");
    }
    if (guides.h && snapped.gy != null) {
      guides.h.style.top = snapped.gy * scale + "px";
      guides.h.classList.add("show");
    } else if (guides.h) {
      guides.h.classList.remove("show");
    }

    updatePropsInputs(false);
    renderElements();
    renderLayers();
    updateCode();
    const elLead = elements.find((x) => x.id === id);
    if (elLead) updateDistanceHintsForDrag(id, elLead.x, elLead.y, elLead.w, elLead.h);
  }

  function onMouseUp() {
    if (isDragging) {