@linkurious/ogma-annotations 2.0.3 → 2.1.1

package/dist/ui.mjs

@@ -0,0 +1,533 @@
+var x = Object.defineProperty;
+var $ = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var l = (r, t, e) => $(r, typeof t != "symbol" ? t + "" : t, e);
+import { RgbaBase as M } from "vanilla-colorful/lib/entrypoints/rgba";
+import { j as g, s as L, t as T, i as P, v as k, h as b, G as d, aH as B, D as C, ah as E, ac as S } from "./Polygon-DVFVmDbR.js";
+const y = "rgba-color-picker";
+class D extends M {
+}
+function F() {
+  return customElements.get(y) || customElements.define(y, D), document.createElement(y);
+}
+const O = [
+  { value: "#f5f5f5", style: "--circle-color: #f5f5f5;" },
+  { value: "#EDE6FF", style: "--circle-color: #EDE6FF;" },
+  {
+    value: "transparent",
+    style: "--circle-color: white; border: 2px dashed #ccc;"
+  }
+], m = [
+  { value: "sans-serif", label: "Sans Serif", icon: "type" },
+  { value: "serif", label: "Serif", icon: "italic" },
+  { value: "monospace", label: "Monospace", icon: "code" }
+], N = [
+  { value: "none", label: "None", icon: "x" },
+  { value: "arrow", label: "Open Arrow", icon: "arrow-left" },
+  { value: "arrow-plain", label: "Filled Arrow", icon: "play" },
+  { value: "halo-dot", label: "Halo Dot", icon: "circle-dot" },
+  { value: "dot", label: "Dot", icon: "dot" }
+], R = [
+  { value: "plain", icon: "circle" },
+  { value: "dashed", icon: "circle-dashed" }
+], H = ["#0099FF", "#FF7523", "#44AA99"];
+function I(r) {
+  return `rgba(${r.r}, ${r.g}, ${r.b}, ${r.a})`;
+}
+const _ = 3;
+function z() {
+  return { colors: [...H], activeIndex: 0 };
+}
+function q(r, t) {
+  const e = r.colors.indexOf(t);
+  return e === -1 ? { colors: [t, ...r.colors].slice(0, _), activeIndex: 0 } : { colors: r.colors, activeIndex: e };
+}
+const W = {
+  "chevron-down": '<path d="m6 9 6 6 6-6"/>',
+  x: '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
+  "arrow-left": '<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>',
+  "arrow-right": '<path d="M5 12h14"/><path d="m12 5 7 7-7 7"/>',
+  play: '<polygon points="6 3 20 12 6 21 6 3"/>',
+  "circle-dot": '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/>',
+  dot: '<circle cx="12.1" cy="12.1" r="1"/>',
+  circle: '<circle cx="12" cy="12" r="10"/>',
+  "circle-dashed": '<path d="M10.1 2.182a10 10 0 0 1 3.8 0"/><path d="M13.9 21.818a10 10 0 0 1-3.8 0"/><path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"/><path d="M2.182 13.9a10 10 0 0 1 0-3.8"/><path d="M20.279 17.609a10 10 0 0 1-2.7 2.69"/><path d="M21.818 10.1a10 10 0 0 1 0 3.8"/><path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"/><path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"/>',
+  type: '<path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/>',
+  italic: '<line x1="19" x2="10" y1="4" y2="4"/><line x1="14" x2="5" y1="20" y2="20"/><line x1="15" x2="9" y1="4" y2="20"/>',
+  code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
+  trash: '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>',
+  undo: '<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>',
+  redo: '<path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/>',
+  pentagon: '<path d="M10.83 2.38a2 2 0 0 1 2.34 0l8 5.74a2 2 0 0 1 .73 2.25l-3.04 9.26a2 2 0 0 1-1.9 1.37H7.04a2 2 0 0 1-1.9-1.37L2.1 10.37a2 2 0 0 1 .73-2.25z"/>',
+  "rectangle-horizontal": '<rect width="20" height="12" x="2" y="6" rx="2"/>',
+  "message-square": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>',
+  "sticky-note": '<path d="M21 9a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 15 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z"/><path d="M15 3v5a1 1 0 0 0 1 1h5"/>',
+  eraser: '<path d="M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"/><path d="m5.082 11.09 8.828 8.828"/>',
+  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>',
+  camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
+  "rotate-cw": '<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>',
+  "rotate-ccw": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>',
+  minimize: '<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>'
+};
+function v(r, t = 18) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${W[r]}</svg>`;
+}
+const V = 150;
+function U(r, { onShow: t, onHide: e }) {
+  let o = null, i = null;
+  const n = () => {
+    i !== null && (clearTimeout(i), i = null);
+  }, s = () => {
+    n(), o && (t(o), o = null);
+  }, a = (h) => {
+    if (n(), h.ids.length === 1) {
+      const u = r.getAnnotation(h.ids[0]);
+      if (!u) return;
+      if (o = u, r.isDrawing()) {
+        r.once("cancelDrawing", s), r.once("completeDrawing", s);
+        return;
+      }
+      i = setTimeout(s, V);
+    } else
+      o = null, e();
+  }, c = () => {
+    n(), o = null, e();
+  }, p = () => {
+    n(), o = null, e();
+  };
+  return r.on("select", a), r.on("click", s), r.on("dragend", s), r.on("dragstart", c), r.on("unselect", p), () => {
+    n(), r.off("select", a), r.off("click", s), r.off("dragend", s), r.off("dragstart", c), r.off("unselect", p), r.off("cancelDrawing", s), r.off("completeDrawing", s);
+  };
+}
+const G = "right", Y = "vertical";
+class Z {
+  constructor(t) {
+    l(this, "control");
+    l(this, "panel");
+    l(this, "panelBody");
+    l(this, "mode", null);
+    l(this, "currentAnnotation", null);
+    l(this, "currentColor", "#0099FF");
+    l(this, "recent", z());
+    l(this, "colorCircles", []);
+    l(this, "colorPickerOverlay", null);
+    l(this, "colorPicker", null);
+    l(this, "detachVisibility");
+    l(this, "documentClickHandler");
+    l(this, "hide", () => {
+      this.panel.style.display = "none", this.closeColorPicker(), this.currentAnnotation = null, this.mode = null;
+    });
+    this.control = t.control;
+    const e = t.container ?? document.body;
+    this.panel = document.createElement("div"), this.panel.className = "annotation-panel", this.panel.style.display = "none", this.panel.dataset.placement = t.placement ?? G, this.panel.dataset.orientation = t.orientation ?? Y, this.panelBody = document.createElement("div"), this.panelBody.className = "panel-body", this.panel.appendChild(this.panelBody), e.appendChild(this.panel), this.detachVisibility = U(this.control, {
+      onShow: (o) => {
+        this.setAnnotation(o), this.show();
+      },
+      onHide: this.hide
+    }), ["click", "mousedown", "mousemove"].forEach(
+      (o) => this.panel.addEventListener(o, (i) => i.stopPropagation())
+    ), this.documentClickHandler = (o) => {
+      this.colorPickerOverlay && !this.colorPickerOverlay.contains(o.target) && !this.colorCircles.some((i) => i.contains(o.target)) && this.closeColorPicker(), this.panelBody.querySelectorAll(".custom-select").forEach((i) => i.classList.remove("open"));
+    }, document.addEventListener("click", this.documentClickHandler);
+  }
+  setAnnotation(t) {
+    this.currentAnnotation = t, g(t) ? (this.mode = "arrow", this.renderArrow(t)) : L(t) || T(t) || P(t) ? (this.mode = "text", this.renderText(t)) : k(t) && (this.mode = "polygon", this.renderPolygon(t));
+  }
+  renderArrow(t) {
+    const e = t.properties.style || {};
+    this.updateColorFromAnnotation(
+      e.strokeColor || b.strokeColor
+    ), this.panelBody.innerHTML = `
+      ${this.section("Color", this.colorSelector())}
+      ${this.section(
+      "Extremities",
+      `<div class="custom-select-section">
+        ${this.extremitySelector("head", t)}
+        ${this.extremitySelector("tail", t)}
+      </div>`
+    )}
+      ${this.slider("Stroke width", "line-width", e.strokeWidth || b.strokeWidth, 1, 20)}
+      ${this.lineTypeButtons(e.strokeType || "plain")}
+    `, this.bind();
+  }
+  renderText(t) {
+    const e = t.properties.style || {};
+    this.updateColorFromAnnotation(e.color || d.color);
+    const o = typeof e.fontSize == "number" ? e.fontSize : typeof d.fontSize == "number" ? d.fontSize : 18;
+    this.panelBody.innerHTML = `
+      ${this.section("Color", this.colorSelector())}
+      ${this.section("Background", this.backgroundSelector(e.background || d.background))}
+      ${this.section("Font", `<div class="custom-select-section">${this.fontSelector(e.font || d.font)}</div>`)}
+      ${this.slider("Font size", "font-size", o, 8, 72)}
+      ${this.slider("Stroke width", "line-width", e.strokeWidth || d.strokeWidth, 1, 20)}
+      ${this.lineTypeButtons(e.strokeType || "plain")}
+    `, this.bind();
+  }
+  renderPolygon(t) {
+    const e = t.properties.style || {};
+    this.updateColorFromAnnotation(e.strokeColor || "#000000"), this.panelBody.innerHTML = `
+      ${this.section("Color", this.colorSelector())}
+      ${this.section("Fill", this.backgroundSelector(e.background || "transparent"))}
+      ${this.slider("Stroke width", "line-width", e.strokeWidth || 2, 1, 20)}
+      ${this.lineTypeButtons(e.strokeType || "plain")}
+    `, this.bind();
+  }
+  // Rendering helpers
+  section(t, e) {
+    return `<div class="section-header"><h3>${t}</h3></div>${e}`;
+  }
+  icon(t, e = !1) {
+    return e ? `<span style="display:inline-flex;transform:rotate(180deg)">${v(t)}</span>` : v(t);
+  }
+  colorSelector() {
+    return `<div class="color-selector">${this.recent.colors.map(
+      (t, e) => `
+      <button class="color-circle ${e === 0 ? "color-circle-primary" : ""}" data-index="${e}" data-color="${t}">
+        <div class="color-inner"></div>
+      </button>
+    `
+    ).join("")}</div>`;
+  }
+  backgroundSelector(t) {
+    return `<div class="color-selector">${O.map(
+      ({ value: e, style: o }) => `
+      <button class="color-circle ${e === t ? "color-circle-primary" : ""}" data-background-color="${e}">
+        <div class="color-inner" style="${o}"></div>
+      </button>
+    `
+    ).join("")}</div>`;
+  }
+  fontSelector(t) {
+    const e = m.find((o) => o.value === t) || m[0];
+    return this.dropdown(
+      "font",
+      e,
+      m.map((o) => ({ ...o, selected: o.value === t }))
+    );
+  }
+  extremitySelector(t, e) {
+    var s;
+    const o = ((s = e.properties.style) == null ? void 0 : s[t]) || "none", i = N.map((a) => ({
+      ...a,
+      icon: a.value === "arrow" && t === "tail" ? "arrow-left" : a.value === "arrow" ? "arrow-right" : a.icon,
+      selected: a.value === o,
+      rotate: a.value === "arrow-plain" && t === "tail"
+    })), n = i.find((a) => a.selected) || i[0];
+    return `<div class="extremity-wrapper"><label>${t}</label>${this.dropdown(t, n, i, `data-end="${t}"`)}</div>`;
+  }
+  dropdown(t, e, o, i = "") {
+    return `<div class="custom-select" data-type="${t}" ${i}>
+      <div class="custom-select-trigger">
+        ${this.icon(e.icon, e.rotate)}
+        <span>${e.label}</span>
+        ${this.icon("chevron-down")}
+      </div>
+      <div class="custom-select-options">${o.map(
+      (n) => `
+        <div class="custom-select-option ${n.selected ? "selected" : ""}" data-value="${n.value}" data-icon="${n.icon}" data-rotate="${n.rotate ? "1" : ""}" title="${n.label}">
+          ${this.icon(n.icon, n.rotate)}
+          <span>${n.label}</span>
+        </div>
+      `
+    ).join("")}</div>
+    </div>`;
+  }
+  slider(t, e, o, i, n) {
+    return `${this.section(
+      t,
+      `<div class="slider-section">
+      <input type="range" id="${e}-slider" class="slider" min="${i}" max="${n}" value="${o}">
+      <div class="slider-value"><span id="${e}-value">${o}</span></div>
+    </div>`
+    )}`;
+  }
+  lineTypeButtons(t) {
+    return `${this.section(
+      "Line type",
+      `<div class="linetype-section">${R.map(
+        ({ value: e, icon: o }) => `
+      <button class="linetype-button ${t === e ? "active" : ""}" data-linetype="${e}" title="${e}">
+        ${this.icon(o)}
+      </button>
+    `
+      ).join("")}</div>`
+    )}`;
+  }
+  // Event binding - unified for all modes
+  bind() {
+    this.colorCircles = Array.from(
+      this.panelBody.querySelectorAll("[data-index]")
+    ), this.colorCircles.forEach((t, e) => {
+      t.addEventListener("click", (o) => {
+        o.stopPropagation();
+        const i = this.recent.activeIndex === e && t.classList.contains("color-circle-primary");
+        this.recent = { ...this.recent, activeIndex: e }, this.currentColor = this.recent.colors[e], this.updateColorCircles(), i ? this.toggleColorPicker(t) : this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" && this.updateStyle({ strokeColor: this.currentColor });
+      });
+    }), this.updateColorCircles(), this.panelBody.querySelectorAll("[data-background-color]").forEach((t) => {
+      t.addEventListener(
+        "click",
+        () => this.updateStyle({ background: t.dataset.backgroundColor })
+      );
+    }), this.panelBody.querySelectorAll(".custom-select").forEach((t) => {
+      const e = t.querySelector(
+        ".custom-select-trigger"
+      ), o = t.querySelectorAll(
+        ".custom-select-option"
+      );
+      e.addEventListener("click", (i) => {
+        i.stopPropagation(), this.panelBody.querySelectorAll(".custom-select").forEach((n) => {
+          n !== t && n.classList.remove("open");
+        }), t.classList.toggle("open");
+      }), o.forEach((i) => {
+        i.addEventListener("click", (n) => {
+          n.stopPropagation();
+          const s = i.dataset.value;
+          o.forEach((w) => w.classList.remove("selected")), i.classList.add("selected");
+          const a = i.dataset.icon, c = i.dataset.rotate === "1", p = i.querySelector("span").textContent || "", h = e.querySelector("svg, span[style]");
+          h && (h.outerHTML = this.icon(a, c)), e.querySelector("span").textContent = p, t.classList.remove("open");
+          const u = t.dataset.type, f = t.dataset.end;
+          u === "font" ? this.updateStyle({ font: s }) : f === "head" ? this.updateStyle({ head: s }) : f === "tail" && this.updateStyle({ tail: s });
+        });
+      });
+    }), ["line-width", "font-size"].forEach((t) => {
+      const e = this.panelBody.querySelector(
+        `#${t}-slider`
+      ), o = this.panelBody.querySelector(`#${t}-value`);
+      e && o && e.addEventListener("input", () => {
+        const i = parseInt(e.value, 10);
+        o.textContent = i.toString(), t === "line-width" ? this.updateStyle(
+          this.mode === "text" ? { strokeWidth: i, strokeColor: this.currentColor } : { strokeWidth: i }
+        ) : t === "font-size" && this.updateStyle({ fontSize: i });
+      });
+    }), this.panelBody.querySelectorAll(".linetype-button").forEach((t) => {
+      t.addEventListener("click", () => {
+        const e = t.dataset.linetype;
+        this.panelBody.querySelectorAll(".linetype-button").forEach((o) => o.classList.remove("active")), t.classList.add("active"), this.updateStyle({ strokeType: e });
+      });
+    });
+  }
+  // Color management
+  updateColorFromAnnotation(t) {
+    this.recent = q(this.recent, t), this.currentColor = t;
+  }
+  updateColorCircles() {
+    this.colorCircles.forEach((t, e) => {
+      t.setAttribute("data-color", this.recent.colors[e]), t.style.setProperty("--circle-color", this.recent.colors[e]), t.classList.toggle(
+        "color-circle-primary",
+        e === this.recent.activeIndex
+      );
+    });
+  }
+  toggleColorPicker(t) {
+    if (this.colorPickerOverlay) {
+      this.closeColorPicker();
+      return;
+    }
+    this.colorPickerOverlay = document.createElement("div"), this.colorPickerOverlay.className = "color-picker-overlay", document.body.appendChild(this.colorPickerOverlay), this.colorPicker = F(), this.colorPicker.color = B(this.currentColor), this.colorPickerOverlay.appendChild(this.colorPicker);
+    const e = t.getBoundingClientRect();
+    this.colorPickerOverlay.style.right = `${window.innerWidth - e.right}px`, this.colorPickerOverlay.style.top = `${e.bottom + 10}px`, this.colorPicker.addEventListener("color-changed", (o) => {
+      this.currentColor = I(o.detail.value), this.recent.colors[this.recent.activeIndex] = this.currentColor, this.updateColorCircles(), this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" ? this.updateStyle({ color: this.currentColor }) : this.mode === "polygon" && this.updateStyle({ strokeColor: this.currentColor });
+    });
+  }
+  closeColorPicker() {
+    this.colorPickerOverlay && (this.colorPickerOverlay.remove(), this.colorPickerOverlay = null, this.colorPicker = null);
+  }
+  // Unified update method
+  updateStyle(t) {
+    this.currentAnnotation && (g(this.currentAnnotation) ? this.control.updateStyle(this.currentAnnotation.id, t) : k(this.currentAnnotation) ? this.control.updateStyle(this.currentAnnotation.id, t) : this.control.updateStyle(this.currentAnnotation.id, t));
+  }
+  // Layout
+  setPlacement(t) {
+    this.panel.dataset.placement = t;
+  }
+  setOrientation(t) {
+    this.panel.dataset.orientation = t;
+  }
+  // Visibility
+  show() {
+    this.panel.style.display = "block";
+  }
+  destroy() {
+    this.closeColorPicker(), this.detachVisibility(), document.removeEventListener("click", this.documentClickHandler), this.panel.remove();
+  }
+}
+const j = "bottom", X = "horizontal", A = [
+  "arrow",
+  "comment",
+  "sticky-note",
+  "box",
+  "text",
+  "polygon"
+];
+class tt {
+  constructor(t) {
+    l(this, "control");
+    l(this, "root");
+    l(this, "activeButton", null);
+    l(this, "undoButton");
+    l(this, "redoButton");
+    l(this, "handleDrawingEnd", () => this.setActiveMode(null));
+    l(this, "handleHistory", () => this.updateUndoRedo());
+    this.control = t.control;
+    const e = t.container ?? document.body;
+    this.root = document.createElement("div"), this.root.className = "annotation-toolbar", this.root.dataset.placement = t.placement ?? j, this.root.dataset.orientation = t.orientation ?? X, e.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
+      (s) => this.root.addEventListener(s, (a) => a.stopPropagation())
+    );
+    const o = t.enabledTypes ?? A, i = t.styles ?? {};
+    A.filter((s) => o.includes(s)).forEach(
+      (s) => this.root.appendChild(this.drawingButton(s, i))
+    ), o.length > 0 && this.root.appendChild(this.separator()), this.undoButton = this.button(null, "undo", "Undo", () => this.control.undo()), this.redoButton = this.button(null, "redo", "Redo", () => this.control.redo()), this.root.appendChild(this.undoButton), this.root.appendChild(this.redoButton);
+    const n = t.deleteMode ?? "erase";
+    (n === "erase" || n === "both") && (this.root.appendChild(this.separator()), this.root.appendChild(
+      this.button(
+        "erase",
+        "eraser",
+        "Erase (click annotations to delete them)",
+        () => {
+          this.control.isEraseModeActive() ? (this.control.disableEraseMode(), this.setActiveMode(null)) : (this.control.enableEraseMode(), this.setActiveMode("erase"));
+        }
+      )
+    )), (n === "select" || n === "both") && (n === "select" && this.root.appendChild(this.separator()), this.root.appendChild(
+      this.button(null, "trash", "Delete selected", () => {
+        const s = this.control.getSelectedAnnotations();
+        s.features.length > 0 && this.control.remove(s);
+      })
+    )), (t.onJsonExport || t.onSvgExport) && (this.root.appendChild(this.separator()), t.onJsonExport && this.root.appendChild(
+      this.button(null, "download", "Export annotations", t.onJsonExport)
+    ), t.onSvgExport && this.root.appendChild(
+      this.button(null, "camera", "Export SVG", t.onSvgExport)
+    )), this.control.on(C, this.handleDrawingEnd), this.control.on(E, this.handleDrawingEnd), this.control.on(S, this.handleHistory), this.updateUndoRedo();
+  }
+  drawingButton(t, e) {
+    switch (t) {
+      case "arrow":
+        return this.button("arrow", "arrow-right", "Add arrow", () => {
+          this.control.enableArrowDrawing({
+            strokeType: "plain",
+            strokeColor: "#3A03CF",
+            strokeWidth: 2,
+            head: "arrow",
+            ...e.arrow
+          }), this.setActiveMode("arrow");
+        });
+      case "comment":
+        return this.button("comment", "message-square", "Add comment", () => {
+          var n, s, a, c;
+          const o = (n = e.comment) == null ? void 0 : n.commentStyle, i = (s = e.comment) == null ? void 0 : s.arrowStyle;
+          this.control.enableCommentDrawing({
+            offsetX: ((a = e.comment) == null ? void 0 : a.offsetX) ?? 200,
+            offsetY: ((c = e.comment) == null ? void 0 : c.offsetY) ?? -150,
+            commentStyle: {
+              content: "",
+              ...o,
+              style: {
+                color: "#3A03CF",
+                background: "#EDE6FF",
+                fontSize: 16,
+                font: "IBM Plex Sans",
+                ...o == null ? void 0 : o.style
+              }
+            },
+            arrowStyle: {
+              ...i,
+              style: {
+                strokeType: "plain",
+                strokeColor: "#3A03CF",
+                strokeWidth: 2,
+                head: "halo-dot",
+                ...i == null ? void 0 : i.style
+              }
+            }
+          }), this.setActiveMode("comment");
+        });
+      case "sticky-note":
+        return this.button(
+          "sticky-note",
+          "sticky-note",
+          "Add sticky note",
+          () => {
+            this.control.enableStickyNoteDrawing({
+              ...e.stickyNote
+            }), this.setActiveMode("sticky-note");
+          }
+        );
+      case "box":
+        return this.button("box", "rectangle-horizontal", "Add box", () => {
+          this.control.enableBoxDrawing({
+            background: "#EDE6FF",
+            borderRadius: 8,
+            padding: 12,
+            ...e.box
+          }), this.setActiveMode("box");
+        });
+      case "text":
+        return this.button("text", "type", "Add text", () => {
+          this.control.enableTextDrawing({
+            font: "IBM Plex Sans",
+            fontSize: 24,
+            color: "#3A03CF",
+            background: "#EDE6FF",
+            borderRadius: 8,
+            padding: 12,
+            ...e.text
+          }), this.setActiveMode("text");
+        });
+      case "polygon":
+        return this.button(
+          "polygon",
+          "pentagon",
+          "Add polygon (click points, Esc to finish)",
+          () => {
+            this.control.enablePolygonDrawing({
+              strokeColor: "#3A03CF",
+              strokeWidth: 2,
+              background: "rgba(58, 3, 207, 0.15)",
+              ...e.polygon
+            }), this.setActiveMode("polygon");
+          }
+        );
+    }
+  }
+  button(t, e, o, i) {
+    const n = document.createElement("button");
+    return n.dataset.tooltip = o, n.innerHTML = v(e, 16), n.addEventListener("click", i), t && (n.dataset.mode = t), n;
+  }
+  separator() {
+    const t = document.createElement("span");
+    return t.className = "separator", t;
+  }
+  setActiveMode(t) {
+    this.activeButton && this.activeButton.classList.remove("active"), this.activeButton = t ? this.root.querySelector(`[data-mode="${t}"]`) : null, this.activeButton && this.activeButton.classList.add("active");
+  }
+  updateUndoRedo() {
+    this.undoButton.disabled = !this.control.canUndo(), this.redoButton.disabled = !this.control.canRedo();
+  }
+  // Layout
+  setPlacement(t) {
+    this.root.dataset.placement = t;
+  }
+  setOrientation(t) {
+    this.root.dataset.orientation = t;
+  }
+  destroy() {
+    this.control.off(C, this.handleDrawingEnd), this.control.off(E, this.handleDrawingEnd), this.control.off(S, this.handleHistory), this.root.remove();
+  }
+}
+export {
+  Z as AnnotationPanel,
+  tt as AnnotationToolbar,
+  O as BACKGROUNDS,
+  Y as DEFAULT_PANEL_ORIENTATION,
+  G as DEFAULT_PANEL_PLACEMENT,
+  H as DEFAULT_RECENT_COLORS,
+  N as EXTREMITY_OPTIONS,
+  m as FONTS,
+  W as ICON_PATHS,
+  R as LINE_TYPES,
+  _ as MAX_RECENT_COLORS,
+  U as attachPanelVisibility,
+  F as createRgbaColorPicker,
+  z as initialRecentColors,
+  I as rgbaToString,
+  v as svgIcon,
+  q as withColorFromAnnotation
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linkurious/ogma-annotations",
-  "version": "2.0.3",
+  "version": "2.1.1",
   "description": "Headless annotation plugin for Ogma",
   "type": "module",
   "main": "dist/index.mjs",
@@ -12,7 +12,8 @@
     "dist/*.mjs",
     "dist/*.js",
     "dist/**/*.css",
-    "dist/types"
+    "dist/types",
+    "src/style.d.ts"
   ],
   "exports": {
     ".": {
@@ -21,17 +22,34 @@
       "require": "./dist/index.js",
       "default": "./dist/index.mjs"
     },
+    "./ui": {
+      "types": "./dist/types/ui.d.ts",
+      "import": "./dist/ui.mjs",
+      "require": "./dist/ui.js",
+      "default": "./dist/ui.mjs"
+    },
+    "./ui/styles.css": {
+      "style": {
+        "default": "./dist/ui-styles.css"
+      },
+      "import": {
+        "default": "./dist/ui-styles.css"
+      },
+      "require": {
+        "default": "./dist/ui-styles.css"
+      }
+    },
     "./style.css": {
       "style": {
-        "default": "./src/style.css"
+        "default": "./dist/ogma-annotations.css"
       },
       "import": {
         "types": "./src/style.d.ts",
-        "default": "./src/style.css"
+        "default": "./dist/ogma-annotations.css"
       },
       "require": {
         "types": "./src/style.d.ts",
-        "default": "./src/style.css"
+        "default": "./dist/ogma-annotations.css"
       }
     },
     "./umd": {
@@ -51,6 +69,7 @@
     "bump:minor": "bump2version minor && npm version --no-git-tag-version minor",
     "bump:major": "bump2version major && npm version --no-git-tag-version major",
     "build": "vite build",
+    "postbuild": "cp src/ui/styles.css dist/ui-styles.css",
     "lint": "npx oxlint -c oxlint.json src",
     "lint:ci": "mkdir -p reports && npx oxlint -c oxlint.json -f checkstyle src > reports/checkstyle.xml",
     "types": "tsc --d -emitDeclarationOnly --outDir dist/types",
@@ -88,29 +107,29 @@
     "@linkurious/ogma": ">=5.3.11"
   },
   "dependencies": {
-    "@borgar/textbox": "1.8.0",
+    "@chenglou/pretext": "0.0.7",
     "eventemitter3": "5.0.1",
     "geojson": "0.5.0",
     "rbush": "4.0.1",
+    "vanilla-colorful": "0.7.2",
     "zundo": "2.3.0",
     "zustand": "5.0.7"
   },
   "devDependencies": {
     "@linkurious/eslint-config-ogma": "2.1.0",
     "oxlint": "0.16.0",
-    "@types/geojson": "7946.0.13",
+    "@types/geojson": "7946.0.16",
     "@types/rbush": "4.0.0",
     "get-port": "7.0.0",
     "jsdom": "24.0.0",
     "playwright": "1.57.0",
-    "typedoc": "0.28.15",
+    "typedoc": "0.28.20",
     "typedoc-plugin-markdown": "4.9.0",
     "typedoc-vitepress-theme": "1.1.2",
     "typescript": "5.3.3",
-    "vanilla-colorful": "0.7.2",
-    "vite": "6.3.5",
+    "vite": "6.4.3",
     "vite-plugin-dts": "^4.1.0",
-    "vitest": "3.2.4",
+    "vitest": "3.2.6",
     "vitest-canvas-mock": "1.1.3"
   },
   "prettier": {

package/src/style.d.ts

@@ -0,0 +1,2 @@
+declare const css: string;
+export default css;