velo-plot 1.11.1

package/dist/plugins/context-menu.js

@@ -0,0 +1,621 @@
+var j = Object.defineProperty;
+var K = (f, n, r) => n in f ? j(f, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : f[n] = r;
+var y = (f, n, r) => K(f, typeof n != "symbol" ? n + "" : n, r);
+const X = {
+  backgroundColor: "rgba(30, 30, 40, 0.95)",
+  textColor: "#e0e0e0",
+  borderColor: "rgba(100, 100, 120, 0.5)",
+  borderRadius: "8px",
+  boxShadow: "0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1)",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  fontSize: "13px",
+  itemPadding: "8px 16px",
+  hoverBackground: "rgba(0, 242, 255, 0.15)",
+  separatorColor: "rgba(100, 100, 120, 0.3)",
+  disabledOpacity: 0.4,
+  minWidth: "180px",
+  maxWidth: "300px",
+  animationDuration: "150ms"
+};
+class Q {
+  constructor(n, r, i, d) {
+    y(this, "_container");
+    y(this, "menuElement", null);
+    y(this, "style");
+    y(this, "onItemClick");
+    y(this, "zIndex");
+    y(this, "handleOutsideClick", (n) => {
+      this.menuElement && !this.menuElement.contains(n.target) && this.hide();
+    });
+    y(this, "handleKeyDown", (n) => {
+      n.key === "Escape" && this.hide();
+    });
+    this._container = n, this.style = { ...X, ...r }, this.zIndex = i, this.onItemClick = d;
+  }
+  /**
+   * Show the context menu
+   */
+  show(n) {
+    this.hide(), !(!n.items.length || !n.context) && (this.menuElement = this.createMenu(n.items, n.context), this.positionMenu(n.position), document.body.appendChild(this.menuElement), requestAnimationFrame(() => {
+      this.menuElement && (this.menuElement.style.opacity = "1", this.menuElement.style.transform = "scale(1)");
+    }), document.addEventListener("mousedown", this.handleOutsideClick), document.addEventListener("keydown", this.handleKeyDown));
+  }
+  /**
+   * Hide the context menu
+   */
+  hide() {
+    this.menuElement && (this.menuElement.style.opacity = "0", this.menuElement.style.transform = "scale(0.95)", setTimeout(() => {
+      var n;
+      (n = this.menuElement) != null && n.parentNode && this.menuElement.parentNode.removeChild(this.menuElement), this.menuElement = null;
+    }, 100)), document.removeEventListener("mousedown", this.handleOutsideClick), document.removeEventListener("keydown", this.handleKeyDown);
+  }
+  /**
+   * Check if menu is visible
+   */
+  isVisible() {
+    return this.menuElement !== null;
+  }
+  /**
+   * Destroy the renderer
+   */
+  destroy() {
+    this.hide();
+  }
+  /**
+   * Update styling
+   */
+  updateStyle(n) {
+    this.style = { ...X, ...n };
+  }
+  /**
+   * Get container reference
+   */
+  getContainer() {
+    return this._container;
+  }
+  // ============================================
+  // Private Methods
+  // ============================================
+  createMenu(n, r) {
+    const i = document.createElement("div");
+    return i.className = "velo-plot-context-menu", i.style.cssText = this.getMenuStyle(), n.forEach((d) => {
+      const h = this.createMenuItem(d, r);
+      h && i.appendChild(h);
+    }), i;
+  }
+  createMenuItem(n, r) {
+    if ("hidden" in n && n.hidden) return null;
+    if (n.type === "separator") {
+      const l = document.createElement("div");
+      return l.className = "velo-plot-menu-separator", l.style.cssText = `
+        height: 1px;
+        margin: 4px 8px;
+        background: ${this.style.separatorColor};
+      `, l;
+    }
+    const i = document.createElement("div");
+    i.className = "velo-plot-menu-item";
+    const d = "disabled" in n && !!n.disabled;
+    if (i.style.cssText = this.getItemStyle(d), "icon" in n && n.icon) {
+      const l = document.createElement("span");
+      l.className = "velo-plot-menu-icon", l.style.cssText = "margin-right: 12px; width: 16px; text-align: center;", l.textContent = n.icon, i.appendChild(l);
+    }
+    const h = document.createElement("span");
+    if (h.className = "velo-plot-menu-label", h.style.cssText = "flex: 1;", h.textContent = n.label, i.appendChild(h), n.type === "checkbox") {
+      const l = document.createElement("span");
+      l.style.cssText = "margin-left: 12px; width: 16px;", l.textContent = n.checked ? "✓" : "", i.appendChild(l);
+    }
+    if (n.type === "radio") {
+      const l = document.createElement("span");
+      l.style.cssText = "margin-left: 12px; width: 16px;", l.textContent = n.selected ? "●" : "○", i.appendChild(l);
+    }
+    if ("shortcut" in n && n.shortcut) {
+      const l = document.createElement("span");
+      l.className = "velo-plot-menu-shortcut", l.style.cssText = `
+        margin-left: 24px;
+        opacity: 0.5;
+        font-size: 11px;
+      `, l.textContent = n.shortcut, i.appendChild(l);
+    }
+    if (n.type === "submenu") {
+      const l = document.createElement("span");
+      l.style.cssText = "margin-left: 8px;", l.textContent = "▶", i.appendChild(l), i.addEventListener("mouseenter", () => {
+        this.showSubmenu(i, n.items, r);
+      }), i.addEventListener("mouseleave", (C) => {
+        this.hideSubmenu(i, C);
+      });
+    }
+    return d || (i.addEventListener("mouseenter", () => {
+      i.style.background = this.style.hoverBackground;
+    }), i.addEventListener("mouseleave", () => {
+      i.style.background = "transparent";
+    }), i.addEventListener("click", (l) => {
+      l.stopPropagation(), n.type !== "submenu" && this.onItemClick(n, r);
+    })), i;
+  }
+  showSubmenu(n, r, i) {
+    if (n.querySelector(".velo-plot-submenu")) return;
+    const h = document.createElement("div");
+    h.className = "velo-plot-submenu", h.style.cssText = `
+      ${this.getMenuStyle()}
+      position: absolute;
+      left: 100%;
+      top: 0;
+      margin-left: 4px;
+    `, r.forEach((l) => {
+      const C = this.createMenuItem(l, i);
+      C && h.appendChild(C);
+    }), n.style.position = "relative", n.appendChild(h);
+  }
+  hideSubmenu(n, r) {
+    const i = n.querySelector(".velo-plot-submenu");
+    if (!i) return;
+    const d = i.getBoundingClientRect();
+    r.clientX >= d.left && r.clientX <= d.right && r.clientY >= d.top && r.clientY <= d.bottom || setTimeout(() => {
+      i.remove();
+    }, 100);
+  }
+  positionMenu(n) {
+    if (!this.menuElement) return;
+    const r = window.innerWidth, i = window.innerHeight;
+    this.menuElement.style.left = `${n.x}px`, this.menuElement.style.top = `${n.y}px`;
+    const d = this.menuElement.getBoundingClientRect();
+    d.right > r && (this.menuElement.style.left = `${n.x - d.width}px`), d.bottom > i && (this.menuElement.style.top = `${n.y - d.height}px`);
+  }
+  getMenuStyle() {
+    return `
+      position: fixed;
+      z-index: ${this.zIndex};
+      background: ${this.style.backgroundColor};
+      color: ${this.style.textColor};
+      border: 1px solid ${this.style.borderColor};
+      border-radius: ${this.style.borderRadius};
+      box-shadow: ${this.style.boxShadow};
+      font-family: ${this.style.fontFamily};
+      font-size: ${this.style.fontSize};
+      min-width: ${this.style.minWidth};
+      max-width: ${this.style.maxWidth};
+      padding: 4px 0;
+      opacity: 0;
+      transform: scale(0.95);
+      transform-origin: top left;
+      transition: opacity ${this.style.animationDuration}, transform ${this.style.animationDuration};
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    `;
+  }
+  getItemStyle(n) {
+    return `
+      display: flex;
+      align-items: center;
+      padding: ${this.style.itemPadding};
+      cursor: ${n ? "default" : "pointer"};
+      opacity: ${n ? this.style.disabledOpacity : 1};
+      user-select: none;
+      transition: background 100ms;
+    `;
+  }
+}
+const _ = [
+  {
+    label: "Zoom to Fit",
+    icon: "⊡",
+    action: "zoomToFit",
+    shortcut: "Home"
+  },
+  {
+    label: "Reset View",
+    icon: "↻",
+    action: "resetView",
+    shortcut: "R"
+  },
+  { type: "separator" },
+  {
+    label: "Interaction Mode",
+    icon: "✋",
+    type: "submenu",
+    items: [
+      { label: "Pan", icon: "✋", action: "panMode" },
+      { label: "Box Zoom", icon: "⬚", action: "boxZoomMode" },
+      { label: "Select", icon: "➤", action: "selectMode" }
+    ]
+  },
+  { type: "separator" },
+  {
+    label: "Export",
+    icon: "💾",
+    type: "submenu",
+    items: [
+      { label: "CSV", icon: "📄", action: "exportCSV" },
+      { label: "JSON", icon: "📋", action: "exportJSON" },
+      { label: "Image", icon: "🖼️", action: "exportImage" }
+    ]
+  },
+  {
+    label: "Copy to Clipboard",
+    icon: "📋",
+    action: "copyToClipboard",
+    shortcut: "Ctrl+C"
+  },
+  { type: "separator" },
+  {
+    label: "Annotations",
+    icon: "📝",
+    type: "submenu",
+    items: [
+      { label: "Add Horizontal Line", icon: "—", action: "addHorizontalLine" },
+      { label: "Add Vertical Line", icon: "|", action: "addVerticalLine" },
+      { label: "Add Text", icon: "T", action: "addTextAnnotation" },
+      { type: "separator" },
+      { label: "Clear All", icon: "🗑️", action: "clearAnnotations" }
+    ]
+  },
+  { type: "separator" },
+  {
+    label: "Toggle Legend",
+    icon: "☰",
+    action: "toggleLegend",
+    shortcut: "L"
+  },
+  {
+    label: "Toggle Grid",
+    icon: "#",
+    action: "toggleGrid",
+    shortcut: "G"
+  },
+  {
+    label: "Show Statistics",
+    icon: "📊",
+    action: "showStats",
+    shortcut: "S"
+  }
+], ee = {
+  name: "velo-plot-context-menu",
+  version: "1.0.0",
+  description: "Customizable right-click context menu for velo-plot",
+  author: "Sci Plot Team",
+  provides: ["interaction"],
+  tags: ["context-menu", "right-click", "menu", "ui"]
+};
+function ne(f = {}) {
+  const {
+    enabled: n = !0,
+    items: r = [],
+    templates: i = [],
+    useDefaults: d = !0,
+    style: h,
+    preventDefault: l = !0,
+    showOnRightClick: C = !0,
+    showOnLongPress: B = !0,
+    longPressDuration: G = 500,
+    beforeShow: M,
+    afterHide: L,
+    zIndex: U = 1e4
+  } = f;
+  let s = null, u = null, v = {
+    visible: !1,
+    position: { x: 0, y: 0 },
+    items: [],
+    submenuPath: [],
+    context: null
+  }, g = null, x = null;
+  function H(t, o) {
+    var a, c, m, p, b, E, w, S, k, R, F, Y;
+    if (!s) return;
+    const e = s.chart;
+    switch (t) {
+      case "zoomToFit":
+        (a = e.zoomToFit) == null || a.call(e);
+        break;
+      case "zoomIn":
+        (c = e.zoom) == null || c.call(e, 1.5);
+        break;
+      case "zoomOut":
+        (m = e.zoom) == null || m.call(e, 0.67);
+        break;
+      case "resetView":
+        (p = e.resetView) == null || p.call(e);
+        break;
+      case "panMode":
+        (b = e.setMode) == null || b.call(e, "pan");
+        break;
+      case "boxZoomMode":
+        (E = e.setMode) == null || E.call(e, "boxZoom");
+        break;
+      case "selectMode":
+        (w = e.setMode) == null || w.call(e, "select");
+        break;
+      case "exportCSV":
+        I("csv");
+        break;
+      case "exportJSON":
+        I("json");
+        break;
+      case "exportImage":
+        W();
+        break;
+      case "copyToClipboard":
+        Z();
+        break;
+      case "toggleLegend":
+        (k = e.setShowLegend) == null || k.call(e, !((S = e.getShowLegend) != null && S.call(e)));
+        break;
+      case "toggleGrid":
+        (F = e.setShowGrid) == null || F.call(e, !((R = e.getShowGrid) != null && R.call(e)));
+        break;
+      case "toggleCrosshair":
+        break;
+      case "addHorizontalLine":
+        T("hline", o);
+        break;
+      case "addVerticalLine":
+        T("vline", o);
+        break;
+      case "addTextAnnotation":
+        T("text", o);
+        break;
+      case "clearAnnotations":
+        (Y = e.clearAnnotations) == null || Y.call(e);
+        break;
+    }
+  }
+  function I(t) {
+    var a, c, m, p;
+    const o = s == null ? void 0 : s.chart, e = (c = (a = o == null ? void 0 : o.plugins) == null ? void 0 : a.get("velo-plot-data-export")) == null ? void 0 : c.api;
+    if (e)
+      e.download(t);
+    else {
+      const b = ((m = o.toCSV) == null ? void 0 : m.call(o)) || ((p = o.toJSON) == null ? void 0 : p.call(o));
+      b && J(b, `chart.${t}`, `text/${t}`);
+    }
+  }
+  function W() {
+    var e;
+    const t = s == null ? void 0 : s.chart, o = (e = t.toImage) == null ? void 0 : e.call(t, "png");
+    if (o) {
+      const a = document.createElement("a");
+      a.href = o, a.download = "chart.png", a.click();
+    }
+  }
+  function Z() {
+    var e;
+    const t = s == null ? void 0 : s.chart, o = (e = t.toCSV) == null ? void 0 : e.call(t);
+    o && navigator.clipboard.writeText(o).catch(console.error);
+  }
+  function T(t, o) {
+    var m, p, b;
+    if (!o.dataPosition) return;
+    const e = s == null ? void 0 : s.chart, { x: a, y: c } = o.dataPosition;
+    switch (t) {
+      case "hline":
+        (m = e.addAnnotation) == null || m.call(e, {
+          type: "horizontalLine",
+          y: c,
+          color: "#ff6b6b",
+          label: `Y = ${c.toFixed(4)}`
+        });
+        break;
+      case "vline":
+        (p = e.addAnnotation) == null || p.call(e, {
+          type: "verticalLine",
+          x: a,
+          color: "#4ecdc4",
+          label: `X = ${a.toFixed(4)}`
+        });
+        break;
+      case "text":
+        (b = e.addAnnotation) == null || b.call(e, {
+          type: "text",
+          x: a,
+          y: c,
+          text: "Annotation",
+          color: "#ffffff"
+        });
+        break;
+    }
+  }
+  function J(t, o, e) {
+    const a = new Blob([t], { type: e }), c = URL.createObjectURL(a), m = document.createElement("a");
+    m.href = c, m.download = o, m.click(), URL.revokeObjectURL(c);
+  }
+  function z(t) {
+    const o = s == null ? void 0 : s.chart, e = s == null ? void 0 : s.ui.container;
+    if (!e)
+      return {
+        chart: o,
+        event: t,
+        pixelPosition: { x: t.clientX, y: t.clientY },
+        dataPosition: null,
+        seriesId: null,
+        annotationId: null,
+        pointIndex: null,
+        area: "outside"
+      };
+    const a = e.getBoundingClientRect(), c = t.clientX - a.left, m = t.clientY - a.top, p = s == null ? void 0 : s.render.plotArea;
+    let b = "outside";
+    p && (c >= p.x && c <= p.x + p.width && m >= p.y && m <= p.y + p.height ? b = "plot" : m > p.y + p.height ? b = "xAxis" : c < p.x && (b = "yAxis"));
+    let E = null;
+    b === "plot" && s && (E = {
+      x: s.coords.pixelToDataX(c),
+      y: s.coords.pixelToDataY(m)
+    });
+    let w = null, S = null;
+    if (E && s) {
+      const k = s.coords.pickPoint(c, m, 10);
+      k && (w = k.seriesId, S = k.index);
+    }
+    return {
+      chart: o,
+      event: t,
+      pixelPosition: { x: c, y: m },
+      dataPosition: E,
+      seriesId: w,
+      annotationId: null,
+      pointIndex: S,
+      area: b
+    };
+  }
+  function A(t) {
+    var e;
+    for (const a of i)
+      if ((e = a.condition) != null && e.call(a, t))
+        return [...a.items];
+    let o = [];
+    if (d && (o = [..._]), r.length > 0 && (o.length > 0 && o.push({ type: "separator" }), o.push(...r)), M) {
+      const a = M(t);
+      if (a === !1)
+        return [];
+      o = a;
+    }
+    return o;
+  }
+  function $(t) {
+    if (!n || !s) return;
+    const o = z(t), e = A(o);
+    e.length !== 0 && (v = {
+      visible: !0,
+      position: { x: t.clientX, y: t.clientY },
+      items: e,
+      submenuPath: [],
+      context: o
+    }, u == null || u.show(v));
+  }
+  function P() {
+    v = {
+      ...v,
+      visible: !1,
+      context: null
+    }, u == null || u.hide(), L == null || L();
+  }
+  function q(t, o) {
+    if (P(), t.type === "separator" || t.type === "submenu")
+      return;
+    if (t.type === "checkbox" && t.onChange) {
+      t.onChange(!t.checked, o);
+      return;
+    }
+    if (t.type === "radio" && t.onChange) {
+      t.onChange(t.value, o);
+      return;
+    }
+    const e = t;
+    e.onClick ? e.onClick(o) : e.action && H(e.action, o);
+  }
+  function V(t) {
+    C && (l && t.preventDefault(), $(t));
+  }
+  function O(t) {
+    if (!B) return;
+    const o = t.touches[0];
+    x = { x: o.clientX, y: o.clientY }, g = setTimeout(() => {
+      if (x) {
+        const e = new MouseEvent("contextmenu", {
+          clientX: x.x,
+          clientY: x.y
+        });
+        $(e);
+      }
+    }, G);
+  }
+  function D(t) {
+    if (!x || !g) return;
+    const o = t.touches[0], e = o.clientX - x.x, a = o.clientY - x.y;
+    Math.sqrt(e * e + a * a) > 10 && (clearTimeout(g), g = null, x = null);
+  }
+  function N() {
+    g && (clearTimeout(g), g = null), x = null;
+  }
+  return {
+    manifest: ee,
+    onInit(t) {
+      s = t;
+      const o = t.ui.container;
+      u = new Q(
+        o,
+        h,
+        U,
+        q
+      ), o.addEventListener("contextmenu", V), o.addEventListener("touchstart", O, { passive: !0 }), o.addEventListener("touchmove", D, { passive: !0 }), o.addEventListener("touchend", N), t.log.info("ContextMenu plugin initialized");
+    },
+    onDestroy() {
+      const t = s == null ? void 0 : s.ui.container;
+      t && (t.removeEventListener("contextmenu", V), t.removeEventListener("touchstart", O), t.removeEventListener("touchmove", D), t.removeEventListener("touchend", N)), u == null || u.destroy(), u = null, s = null;
+    },
+    api: {
+      /**
+       * Show the context menu programmatically
+       */
+      show(t, o, e) {
+        const a = new MouseEvent("contextmenu", { clientX: t, clientY: o }), c = z(a);
+        v = {
+          visible: !0,
+          position: { x: t, y: o },
+          items: e || A(c),
+          submenuPath: [],
+          context: c
+        }, u == null || u.show(v);
+      },
+      /**
+       * Hide the context menu
+       */
+      hide() {
+        P();
+      },
+      /**
+       * Check if menu is visible
+       */
+      isVisible() {
+        return (u == null ? void 0 : u.isVisible()) ?? !1;
+      },
+      /**
+       * Update menu items dynamically
+       */
+      setItems(t) {
+        f.items = t;
+      },
+      /**
+       * Enable/disable the menu
+       */
+      setEnabled(t) {
+        f.enabled = t;
+      },
+      /**
+       * Update styling
+       */
+      setStyle(t) {
+        u == null || u.updateStyle(t || {});
+      },
+      /**
+       * Get available built-in actions
+       */
+      getBuiltinActions() {
+        return [
+          "zoomToFit",
+          "zoomIn",
+          "zoomOut",
+          "resetView",
+          "panMode",
+          "boxZoomMode",
+          "selectMode",
+          "exportCSV",
+          "exportJSON",
+          "exportImage",
+          "copyToClipboard",
+          "toggleLegend",
+          "toggleGrid",
+          "toggleCrosshair",
+          "addHorizontalLine",
+          "addVerticalLine",
+          "addTextAnnotation",
+          "clearAnnotations",
+          "showStats"
+        ];
+      }
+    }
+  };
+}
+export {
+  ne as PluginContextMenu,
+  ne as default
+};
+//# sourceMappingURL=context-menu.js.map