Function enableDrag

app.js:4523–4647

(node, id)

function enableDrag(node, id) {
  let isDragging = false;
  let startX = 0;
  let startY = 0;
  let origX = 0;
  let origY = 0;
  let dragIds = [];
  let dragOrig = new Map(); // id -> {x,y}

  node.addEventListener("mousedown", (e) => {
    if (e.button !== 0) return;
    if (e.target.classList.contains("resize-handle") || e.target.classList.contains("rotate-handle")) {
      return;
    }
    const el0 = elements.find((el) => el.id === id);
    if (!el0 || el0.locked || el0.hidden) return;
    e.preventDefault();
    // If the clicked element isn't part of the current multi-selection, select it.
    if (!(selectedIds && selectedIds.size > 1 && selectedIds.has(id))) {
      selectElement(id, false);
    }
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;

    const el = elements.find((el) => el.id === id);
    if (!el) return;
    origX = el.x;
    origY = el.y;

    // Multi-drag: move all selected, unlocked, visible elements.
    dragIds = (selectedIds && selectedIds.size ? Array.from(selectedIds) : [id])
      .filter((sid) => {
        const s = elements.find((x) => x.id === sid);
        return s && !s.locked && !s.hidden;
      });
    if (!dragIds.includes(id)) dragIds.push(id);
    dragOrig = new Map();
    dragIds.forEach((sid) => {
      const s = elements.find((x) => x.id === sid);
      if (s) dragOrig.set(sid, { x: s.x, y: s.y });
    });

    // Add dragging class for visual feedback
    node.classList.add('dragging');
    preview.classList.add('manipulating');

    document.addEventListener("mousemove", onMouseMove);
    document.addEventListener("mouseup", onMouseUp);
  });

  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;