Function enableRotate

app.js:4471–4520

(handle, elementId)

}

function enableRotate(handle, elementId) {
  let rotating = false;
  let startAngleDeg = 0;
  let startRot = 0;

  handle.addEventListener("mousedown", (e) => {
    if (e.button !== 0) return;
    e.stopPropagation();
    e.preventDefault();
    const el = elements.find((x) => x.id === elementId);
    if (!el || el.locked || el.hidden) return;
    rotating = true;
    const cx = el.x + el.w / 2;
    const cy = el.y + el.h / 2;
    const p = clientToArtboardPx(e.clientX, e.clientY);
    startAngleDeg = Math.atan2(p.y - cy, p.x - cx) * (180 / Math.PI);
    startRot = Number(el.rotation) || 0;
    preview.classList.add("manipulating");
    document.addEventListener("mousemove", onRotMove);
    document.addEventListener("mouseup", onRotUp);
  });

  function onRotMove(e) {
    if (!rotating) return;
    const el = elements.find((x) => x.id === elementId);
    if (!el || el.locked || el.hidden) return;
    const cx = el.x + el.w / 2;
    const cy = el.y + el.h / 2;
    const p = clientToArtboardPx(e.clientX, e.clientY);
    const a1 = Math.atan2(p.y - cy, p.x - cx) * (180 / Math.PI);
    let delta = a1 - startAngleDeg;
    while (delta > 180) delta -= 360;
    while (delta < -180) delta += 360;
    let rot = startRot + delta;
    if (e.shiftKey) rot = Math.round(rot / 15) * 15;
    el.rotation = Math.round(rot);
    updatePropsInputs(false);
    renderElements();
    renderLayers();
    updateCode();
  }

  function onRotUp() {
    if (rotating) pushHistory();
    rotating = false;
    preview.classList.remove("manipulating");
    document.removeEventListener("mousemove", onRotMove);
    document.removeEventListener("mouseup", onRotUp);
  }
}


function enableDrag(node, id) {