Function ensureRulers

app.js:294–392

()

}

function ensureRulers() {
  const wrapper = document.querySelector(".preview-wrapper");
  const frame = document.querySelector(".preview-frame");
  if (!wrapper || !frame) return;
  // Rulers sit in wrapper coordinates (not scaled with previewViewport transform).
  wrapper.style.position = wrapper.style.position || "relative";

  if (!rulerCorner) {
    rulerCorner = document.createElement("div");
    rulerCorner.className = "ruler-corner";
    wrapper.appendChild(rulerCorner);
  }
  if (!rulerX) {
    rulerX = document.createElement("div");
    rulerX.className = "ruler-x";
    rulerCanvasX = document.createElement("canvas");
    rulerCanvasX.className = "ruler-canvas";
    rulerX.appendChild(rulerCanvasX);
    wrapper.appendChild(rulerX);
  }
  if (!rulerY) {
    rulerY = document.createElement("div");
    rulerY.className = "ruler-y";
    rulerCanvasY = document.createElement("canvas");
    rulerCanvasY.className = "ruler-canvas";
    rulerY.appendChild(rulerCanvasY);
    wrapper.appendChild(rulerY);
  }

  // Size rulers to match the preview size on screen.
  const previewRect = preview.getBoundingClientRect();
  const wrapperRect = wrapper.getBoundingClientRect();
  const w = Math.max(0, Math.round(previewRect.width));
  const h = Math.max(0, Math.round(previewRect.height));
  const left = Math.round(previewRect.left - wrapperRect.left);
  const top = Math.round(previewRect.top - wrapperRect.top);

  rulerCorner.style.left = (left - 28) + "px";
  rulerCorner.style.top = (top - 28) + "px";
  rulerX.style.left = left + "px";
  rulerX.style.top = (top - 28) + "px";
  rulerX.style.width = w + "px";
  rulerY.style.left = (left - 28) + "px";
  rulerY.style.top = top + "px";
  rulerY.style.height = h + "px";

  // Canvas pixel ratio
  const dpr = window.devicePixelRatio || 1;
  rulerCanvasX.width = Math.max(1, Math.floor(w * dpr));
  rulerCanvasX.height = Math.max(1, Math.floor(28 * dpr));
  rulerCanvasX.style.width = w + "px";
  rulerCanvasX.style.height = "28px";

  rulerCanvasY.width = Math.max(1, Math.floor(28 * dpr));
  rulerCanvasY.height = Math.max(1, Math.floor(h * dpr));
  rulerCanvasY.style.width = "28px";
  rulerCanvasY.style.height = h + "px";