Function initEditor

web/js/sparse_track_editor.js:155–237

(node)

// ---------------------------------------------------------------------------

function initEditor(node) {
  const pointsW = node.widgets.find((w) => w.name === "points_store");
  const coordsW = node.widgets.find((w) => w.name === "coordinates");
  hideWidget(pointsW);
  hideWidget(coordsW);

  const ed = {
    splines: [],
    active: 0,
    imgW: 1024,
    imgH: 576,
    bgImg: null,
    drag: null,
    hover: null,
    canvas: null,
    ctx: null,
    menu: null,
    dirty: true,
    rafId: null,
  };
  node._ed = ed;

  // Restore saved state
  try {
    const saved = JSON.parse(pointsW.value);
    if (Array.isArray(saved) && saved.length > 0) {
      ed.splines = saved;
    }
  } catch (_) {
    /* first run */
  }
  if (ed.splines.length === 0) {
    ed.splines = [
      [
        { x: ed.imgW * 0.3, y: ed.imgH * 0.5 },
        { x: ed.imgW * 0.7, y: ed.imgH * 0.5 },
      ],
    ];
  }

  // DOM
  const container = document.createElement("div");
  container.style.position = "relative";
  container.style.minHeight = `${CANVAS_MIN_HEIGHT}px`;

  const canvas = document.createElement("canvas");
  canvas.width = 1024;
  canvas.height = 576;
  canvas.style.width = "100%";
  canvas.style.display = "block";
  canvas.style.background = "#1a1a2e";
  canvas.style.borderRadius = "4px";
  canvas.style.cursor = "default";
  canvas.style.pointerEvents = "auto";
  canvas.style.touchAction = "none";
  container.appendChild(canvas);
  ed.canvas = canvas;
  ed.ctx = canvas.getContext("2d");