Function renderGuides

app.js:394–434

()

}

function renderGuides() {
  // remove old
  document.querySelectorAll(".guide-line").forEach((n) => n.remove());
  const scale = parseFloat(preview.dataset.scale || "1");
  guides.forEach((g) => {
    const div = document.createElement("div");
    div.className = "guide-line " + g.orient;
    div.dataset.id = g.id;
    if (g.orient === "v") div.style.left = (g.pos * scale) + "px";
    else div.style.top = (g.pos * scale) + "px";
    preview.appendChild(div);

    let dragging = false;
    let start = 0;
    div.addEventListener("mousedown", (e) => {
      e.preventDefault();
      dragging = true;
      start = g.orient === "v" ? e.clientX : e.clientY;
    });
    document.addEventListener("mousemove", (e) => {
      if (!dragging) return;
      const cur = g.orient === "v" ? e.clientX : e.clientY;
      const deltaPx = cur - start;
      const deltaUnits = deltaPx / scale;
      g.pos = Math.max(0, Math.round(g.pos + deltaUnits));
      start = cur;
      renderGuides();
    });
    document.addEventListener("mouseup", () => {
      if (!dragging) return;
      dragging = false;
      pushHistory();
    });
    div.addEventListener("dblclick", (e) => {
      e.preventDefault();
      guides = guides.filter((x) => x.id !== g.id);
      renderGuides();
      pushHistory();
    });
  });
}

function snapMoveToElements(elementId, x, y, opts) {
  const suppressSnap = !!(opts && opts.suppressSnap);