@alekstar79/context-menu 2.0.0

package/lib/context-menu.js

@@ -0,0 +1,709 @@
+const I = {
+  sectors: [],
+  sprite: "../icons.svg",
+  innerRadius: 50,
+  outerRadius: 150,
+  opacity: 0.7
+};
+function J(o) {
+  return { ...I, ...o };
+}
+const A = /* @__PURE__ */ new Map();
+function H(o) {
+  if (A.has(o))
+    return A.get(o);
+  const e = document.createElement("canvas").getContext("2d");
+  if (!e) {
+    const c = { ascent: 9, descent: 3, height: 12 };
+    return A.set(o, c), c;
+  }
+  e.font = o;
+  const s = e.measureText("A"), i = s.actualBoundingBoxAscent ?? 9, n = s.actualBoundingBoxDescent ?? 3, r = i + n, a = { ascent: i, descent: n, height: r };
+  return A.set(o, a), a;
+}
+let R = null;
+function N() {
+  if (R) return R;
+  const o = document.createElement("div");
+  o.className = "radial-hint", o.style.position = "absolute", o.style.visibility = "hidden", o.style.pointerEvents = "none", o.textContent = "A", document.body.appendChild(o);
+  const t = window.getComputedStyle(o), e = `${t.fontWeight} ${t.fontSize} ${t.fontFamily}`;
+  document.body.removeChild(o);
+  const s = H(e);
+  return R = s, s;
+}
+function q(o) {
+  const t = "http://www.w3.org/2000/svg", e = document.createElementNS(t, "svg");
+  e.style.position = "absolute", e.style.visibility = "hidden", document.body.appendChild(e);
+  const s = document.createElementNS(t, "text");
+  s.textContent = o, e.appendChild(s);
+  const i = s.getComputedTextLength();
+  return document.body.removeChild(e), i;
+}
+const D = (o) => o % 360 * Math.PI / 180, T = /,?([a-z]),?/gi;
+function O() {
+  return this.join(",").replace(T, "$1");
+}
+const z = (o) => {
+  if (!o) return null;
+  let t = [];
+  return Array.isArray(o) && Array.isArray(o[0]) && (t = o.map((e) => [...e])), t.length || String(o).replace(/([rstm])\s*,?\s*((-?\d*\.?\d*(?:e[\-+]?\d+)?\s*,?\s*)+)/ig, (e, s, i) => {
+    const n = [];
+    return i.replace(/(-?\d*\.?\d*(?:e[\-+]?\d+)?)\s*,?\s*/ig, (r, a) => (a && n.push(+a), "")), t.push([s, ...n]), "";
+  }), t.toString = O, t;
+}, _ = (o) => {
+  const t = z(o), e = new C();
+  if (t)
+    for (let s = 0, i = t.length; s < i; s++) {
+      const n = t[s];
+      switch (n[0].toLowerCase()) {
+        case "t":
+          e.translate(n[1], n[2] || 0);
+          break;
+        case "r":
+          e.rotate(n[1], n[2] || 0, n[3] || 0);
+          break;
+        case "s":
+          e.scale(n[1] || 1, n[2] || n[1] || 1, n[3] || 0, n[4] || 0);
+          break;
+        case "m":
+          e.add(n[1] || 1, n[2] || 0, n[3] || 0, n[4] || 1, n[5] || 0, n[6] || 0);
+          break;
+      }
+    }
+  return e;
+}, G = { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+class C {
+  a;
+  b;
+  c;
+  d;
+  e;
+  f;
+  /**
+   * Creates a new matrix.
+   * If no arguments are given, creates an identity matrix.
+   * If an object with a,b,c,d,e,f properties is provided (e.g., SVGMatrix), copies its values.
+   */
+  constructor(t, e, s, i, n, r) {
+    if (t instanceof SVGMatrix) {
+      Object.assign(this, t);
+      return;
+    }
+    t != null ? Object.assign(this, { a: +t, b: +e, c: +s, d: +i, e: +n, f: +r }) : Object.assign(this, G);
+  }
+  /**
+   * Multiplies current matrix by another matrix.
+   */
+  add(t, e, s, i, n, r) {
+    if (t instanceof C)
+      return this.add(t.a, t.b, t.c, t.d, t.e, t.f);
+    const a = t * this.a + e * this.c, c = t * this.b + e * this.d;
+    return this.e += n * this.a + r * this.c, this.f += n * this.b + r * this.d, this.c = s * this.a + i * this.c, this.d = s * this.b + i * this.d, this.a = a, this.b = c, this;
+  }
+  /**
+   * Returns inverse matrix.
+   */
+  invert() {
+    const t = this.a * this.d - this.b * this.c;
+    return new C(
+      this.d / t,
+      -this.b / t,
+      -this.c / t,
+      this.a / t,
+      (this.c * this.f - this.d * this.e) / t,
+      (this.b * this.e - this.a * this.f) / t
+    );
+  }
+  /**
+   * Returns a copy of the matrix.
+   */
+  clone() {
+    return new C(this.a, this.b, this.c, this.d, this.e, this.f);
+  }
+  /**
+   * Translates the matrix by x and y.
+   */
+  translate(t, e = 0) {
+    return this.add(1, 0, 0, 1, t, e);
+  }
+  /**
+   * Scales the matrix by x and y, optionally about point (cx, cy).
+   */
+  scale(t, e = t, s, i) {
+    return (s != null || i != null) && this.translate(s, i), this.a *= t, this.b *= t, this.c *= e, this.d *= e, (s != null || i != null) && this.translate(-s, -i), this;
+  }
+  /**
+   * Rotates the matrix by angle (degrees) about point (x, y).
+   */
+  rotate(t, e = 0, s = 0) {
+    t = D(t);
+    const i = +Math.cos(t).toFixed(9), n = +Math.sin(t).toFixed(9);
+    return this.add(i, n, -n, i, e, s), this.add(1, 0, 0, 1, -e, -s);
+  }
+  /**
+   * Applies matrix to point (x, y) and returns resulting x.
+   */
+  x(t, e) {
+    return t * this.a + e * this.c + this.e;
+  }
+  /**
+   * Applies matrix to point (x, y) and returns resulting y.
+   */
+  y(t, e) {
+    return t * this.b + e * this.d + this.f;
+  }
+  /**
+   * Returns matrix as an SVG matrix string.
+   */
+  toString() {
+    return `matrix(${this.a},${this.b},${this.c},${this.d},${this.e},${this.f})`;
+  }
+}
+const b = {
+  linear: (o) => o,
+  easeinout: (o) => {
+    if (o === 1) return 1;
+    if (o === 0) return 0;
+    const t = 0.48 - o / 1.04, e = Math.sqrt(0.1734 + t * t), s = e - t, i = Math.pow(Math.abs(s), 1 / 3) * (s < 0 ? -1 : 1), n = -e - t, r = Math.pow(Math.abs(n), 1 / 3) * (n < 0 ? -1 : 1), a = i + r + 0.5;
+    return (1 - a) * 3 * a * a + a * a * a;
+  },
+  elastic: (o) => o === 0 || o === 1 ? o : Math.pow(2, -10 * o) * Math.sin((o - 0.075) * (2 * Math.PI) / 0.3) + 1
+};
+function P(o, t, e, s, i = b.linear, n) {
+  const r = performance.now();
+  let a = !1, c = 0;
+  const l = (h) => {
+    if (a) return;
+    const p = h - r, u = Math.min(p / s, 1), d = i(u);
+    if (Array.isArray(o) && Array.isArray(t)) {
+      const m = o.map((y, w) => y + (t[w] - y) * d);
+      e(m);
+    } else {
+      const m = o + (t - o) * d;
+      e(m);
+    }
+    u < 1 ? c = requestAnimationFrame(l) : n?.();
+  };
+  return c = requestAnimationFrame(l), {
+    stop: () => {
+      a = !0, cancelAnimationFrame(c);
+    }
+  };
+}
+let W = 0;
+const $ = /* @__PURE__ */ new WeakMap();
+function x(o, t) {
+  if ($.has(o)) {
+    const s = $.get(o);
+    return t && !s.paper && (s.paper = t), s;
+  }
+  const e = new B(o, t);
+  return $.set(o, e), e;
+}
+class B {
+  node;
+  paper;
+  _id;
+  constructor(t, e) {
+    this.node = t, this.paper = e, this._id = "e" + (W++).toString(36);
+  }
+  get type() {
+    return this.node.tagName;
+  }
+  get id() {
+    return this.node.id || this._id;
+  }
+  parent() {
+    return this.node.parentNode ? x(this.node.parentNode, this.paper) : null;
+  }
+  children() {
+    return Array.from(this.node.children).map((t) => x(t, this.paper));
+  }
+  clear() {
+    for (; this.node.firstChild; )
+      this.node.removeChild(this.node.firstChild);
+    return this;
+  }
+  attr(t, e) {
+    if (typeof t == "string")
+      return e === void 0 ? this.node.getAttribute(t) : (this._setAttr(t, e), this);
+    if (typeof t == "object") {
+      for (const s in t)
+        this._setAttr(s, t[s]);
+      return this;
+    }
+    return this;
+  }
+  _setAttr(t, e) {
+    t === "textpath" ? this._setTextPath(e) : t === "text" ? this._setText(e) : this.node.setAttribute(t, String(e));
+  }
+  _setText(t) {
+    const e = this.node.querySelector("textPath");
+    e ? e.textContent = t : this.node.textContent = t;
+  }
+  _setTextPath(t) {
+    if (this.node.tagName !== "text") return;
+    const e = this.node;
+    let s = e.querySelector("textPath"), i = "";
+    if (s)
+      i = s.textContent || "";
+    else {
+      for (let r = 0; r < e.childNodes.length; r++) {
+        const a = e.childNodes[r];
+        a.nodeType === 3 && (i += a.textContent);
+      }
+      for (; e.firstChild; )
+        e.removeChild(e.firstChild);
+      s = document.createElementNS("http://www.w3.org/2000/svg", "textPath"), e.appendChild(s), e.removeAttribute("x"), e.removeAttribute("y");
+    }
+    let n;
+    if (t.startsWith("#"))
+      n = t;
+    else {
+      if (!this.paper)
+        throw new Error("No paper reference for creating defs");
+      const r = this.paper.defs, a = "p" + Date.now() + Math.random().toString(36).slice(2), c = document.createElementNS("http://www.w3.org/2000/svg", "path");
+      c.setAttribute("d", t), c.id = a, r.node.appendChild(c), n = "#" + a;
+    }
+    s.setAttributeNS("http://www.w3.org/1999/xlink", "href", n), i && (s.textContent = i);
+  }
+  addClass(t) {
+    const e = t.trim().split(/\s+/);
+    for (const s of e)
+      s && this.node.classList.add(s);
+    return this;
+  }
+  removeClass(t) {
+    const e = t.trim().split(/\s+/);
+    for (const s of e)
+      s && this.node.classList.remove(s);
+    return this;
+  }
+  transform(t) {
+    if (t === void 0) return this;
+    if (t instanceof C)
+      this.node.setAttribute("transform", t.toString());
+    else {
+      const e = _(t);
+      this.node.setAttribute("transform", e.toString());
+    }
+    return this;
+  }
+  getBBox() {
+    if (this.node.isConnected) {
+      const i = this.node.getBBox();
+      return {
+        x: i.x,
+        y: i.y,
+        width: i.width,
+        height: i.height,
+        cx: i.x + i.width / 2,
+        cy: i.y + i.height / 2,
+        x2: i.x + i.width,
+        y2: i.y + i.height
+      };
+    }
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    e.style.position = "absolute", e.style.visibility = "hidden", e.style.pointerEvents = "none", document.body.appendChild(e), e.appendChild(this.node);
+    const s = this.node.getBBox();
+    return e.removeChild(this.node), document.body.removeChild(e), {
+      x: s.x,
+      y: s.y,
+      width: s.width,
+      height: s.height,
+      cx: s.x + s.width / 2,
+      cy: s.y + s.height / 2,
+      x2: s.x + s.width,
+      y2: s.y + s.height
+    };
+  }
+  select(t) {
+    const e = this.node.querySelector(t);
+    return e ? x(e, this.paper) : null;
+  }
+  selectAll(t) {
+    const e = this.node.querySelectorAll(t);
+    return Array.from(e).map((s) => x(s, this.paper));
+  }
+  clone() {
+    return x(this.node.cloneNode(!0), this.paper);
+  }
+  add(t) {
+    return this.node.appendChild(t.node), this;
+  }
+  hover(t, e) {
+    return this.node.addEventListener("mouseover", t), this.node.addEventListener("mouseout", e), this;
+  }
+  mouseup(t) {
+    return this.node.addEventListener("mouseup", t), this;
+  }
+}
+class k extends B {
+  defs;
+  constructor(t) {
+    super(t, null), this.paper = this, $.set(t, this);
+    let e = t.querySelector("defs");
+    e || (e = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.appendChild(e)), this.defs = x(e, this);
+  }
+  g(...t) {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    this.node.appendChild(e);
+    const s = x(e, this);
+    return t.length === 1 && t[0] && !t[0].node ? s.attr(t[0]) : t.length && t.forEach((i) => {
+      i instanceof B && s.add(i);
+    }), s;
+  }
+  path(t) {
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    this.node.appendChild(e);
+    const s = x(e, this);
+    return t && (typeof t == "string" ? s.attr("d", t) : s.attr(t)), s;
+  }
+  circle(t, e, s) {
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    this.node.appendChild(i);
+    const n = x(i, this);
+    return typeof t == "object" ? n.attr(t) : t != null && n.attr({ cx: t, cy: e ?? t, r: s ?? 0 }), n;
+  }
+  text(t, e, s) {
+    const i = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    this.node.appendChild(i);
+    const n = x(i, this);
+    return typeof t == "object" ? n.attr(t) : t != null && n.attr({ x: t, y: e ?? t, text: s ?? "" }), n;
+  }
+}
+class Y {
+  frag;
+  constructor(t) {
+    this.frag = t;
+  }
+  select(t) {
+    const e = this.frag.querySelector(t);
+    return e ? x(e) : null;
+  }
+  selectAll(t) {
+    const e = this.frag.querySelectorAll(t);
+    return Array.from(e).map((s) => x(s));
+  }
+}
+function j(o) {
+  if (typeof o == "string") {
+    const t = document.querySelector(o);
+    return t ? new k(t) : null;
+  }
+  return o instanceof SVGSVGElement ? new k(o) : null;
+}
+function V(o) {
+  const t = document.createElement("div");
+  let e = o.trim();
+  e.match(/^\s*<\s*svg/i) || (e = "<svg>" + e + "</svg>"), t.innerHTML = e;
+  const s = t.querySelector("svg"), i = document.createDocumentFragment();
+  if (s)
+    for (; s.firstChild; )
+      i.appendChild(s.firstChild);
+  return new Y(i);
+}
+const X = (o, t, e) => o > e ? e : o < t ? t : o, L = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap();
+function M(o, t, e, s) {
+  return s = (s - 90) * Math.PI / 180, {
+    x: o + e * Math.cos(s),
+    y: t + e * Math.sin(s)
+  };
+}
+function S(o, t, e, s, i, n, r) {
+  const a = M(o, t, e, s %= 360), c = M(o, t, e, i %= 360);
+  return `${n ? "L" : "M"}${a.x} ${a.y} A${e} ${e}, 0, ${i - s >= 180 ? 1 : 0}, ${r ? 0 : 1}, ${c.x} ${c.y}`;
+}
+function F(o, t, e, s, i, n) {
+  return `${S(o, t, e, i, n, !1, !1)} ${S(o, t, s, n, i, !0, !0)}Z`;
+}
+class Q {
+  config;
+  events = {};
+  container;
+  snap;
+  angle;
+  size = 500;
+  c = this.size / 2;
+  element;
+  area;
+  duration = 300;
+  icons = null;
+  theme = "light";
+  constructor(t) {
+    this.config = t, this.size = 2 * t.outerRadius, this.c = this.size / 2, this.angle = 360 / (this.config.sectors.length || 6), this.element = this.createMenuElement(), this.snap = j(this.element.querySelector("svg")), this.area = this.snap, this.container = this.area.g().transform("s0"), this.init().catch(console.error);
+  }
+  createMenuElement() {
+    const t = document.createElement("div");
+    t.className = "context theme--light hidden", t.style.position = "fixed", t.style.top = "0", t.style.left = "0", t.style.width = "100vw", t.style.height = "100vh", t.style.overflow = "visible", t.style.pointerEvents = "auto";
+    const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    return e.setAttribute("width", this.size.toString()), e.setAttribute("height", this.size.toString()), e.setAttribute("viewBox", `0 0 ${this.size} ${this.size}`), e.style.position = "absolute", e.style.display = "block", e.style.overflow = "visible", e.style.pointerEvents = "auto", e.classList.add("radial-menu-svg"), e.addEventListener("wheel", (s) => {
+      s.preventDefault(), this.transformOpacity(s);
+    }), e.addEventListener("contextmenu", (s) => {
+      s.stopPropagation(), s.preventDefault(), this.hide();
+    }), e.addEventListener("click", (s) => {
+      s.stopPropagation(), this.hide();
+    }), t.addEventListener("click", (s) => {
+      s.target === t && this.hide();
+    }), t.appendChild(e), t;
+  }
+  async init() {
+    await this.loadIcons(), this.updateButtons();
+  }
+  async loadIcons() {
+    if (!this.icons)
+      try {
+        const t = await fetch(this.config.sprite);
+        t.ok && (this.icons = V(await t.text()));
+      } catch (t) {
+        console.error("Failed to load icons:", t);
+      }
+  }
+  updateButtons() {
+    if (!(!this.icons || !this.container) && (this.container.clear(), this.config.sectors.forEach((t) => {
+      const e = this.createIcon(t);
+      if (e) {
+        const s = this.createButton(t, this.createSector(), e, this.createHint(t));
+        this.container.add(s);
+      }
+    }), this.config.centralButton)) {
+      const t = this.createCentralButton(this.config.centralButton);
+      t && this.container.add(t);
+    }
+  }
+  createSector() {
+    const t = this.config.color ?? "#1976D2";
+    return this.area.path(F(this.c, this.c, this.config.outerRadius, this.config.innerRadius, 0, this.angle)).attr({ fill: t, stroke: t, opacity: this.config.opacity }).addClass("radial-sector");
+  }
+  createButton(t, e, s, i) {
+    const n = this.area.g(e, s, i);
+    return n.hover(
+      () => {
+        n.select(".radial-hint")?.addClass("active");
+        const r = n.select(".radial-hint-bg");
+        r && (r.addClass("active"), r.node.style.opacity = String(this.config.opacity)), this.animateButtonHover(n, 0, 1, 200, b.easeinout);
+      },
+      () => {
+        n.select(".radial-hint")?.removeClass("active");
+        const r = n.select(".radial-hint-bg");
+        r && (r.removeClass("active"), r.node.style.opacity = "0"), this.animateButtonHover(n, 1, 0, 2e3, b.elastic);
+      }
+    ), n.mouseup((r) => {
+      r.button === 0 && (this.emit("click", { icon: t.icon, hint: t.hint }), t.onclick?.());
+    }), n;
+  }
+  createIcon(t) {
+    if (!this.icons) return null;
+    const e = this.icons.select(`#${t.icon}`);
+    if (!e)
+      return console.error(`Icon #${t.icon} not found in SVG`), null;
+    const s = e.clone(), i = s.getBBox(), n = (this.config.innerRadius + this.config.outerRadius) / 2, a = (this.config.outerRadius - this.config.innerRadius) * 0.5 / i.height, c = t.iconRadius ?? this.config.iconRadius ?? n, l = t.iconScale ?? this.config.iconScale ?? a, h = this.angle / 2, p = h + (t.rotate || 0);
+    E.set(s, { midRadius: c, scale: l, rotation: p, bbox: i });
+    const u = M(this.c, this.c, c, h), d = new C();
+    return d.translate(u.x, u.y), d.scale(l), d.rotate(p, 0, 0), d.translate(-i.cx, -i.cy), s.transform(d), s.addClass("radial-icon");
+  }
+  createHint(t) {
+    const e = this.area.g();
+    e.addClass("hint-group");
+    const s = t.hintPadding ?? this.config.hintPadding, i = N(), n = t.hint || t.icon, r = q(n), a = 2;
+    let c, l = 0;
+    if (s !== void 0)
+      l = i.height + 2 * s, c = this.config.outerRadius + l / 2 + a;
+    else {
+      const v = i.height * 0.75;
+      c = this.config.outerRadius + v;
+    }
+    const p = r / c * 180 / Math.PI, u = this.angle / 2, d = u - p / 2, m = u + p / 2, y = S(this.c, this.c, c, d, m, !1, !1);
+    if (s !== void 0) {
+      const v = this.config.color ?? "#1976D2", g = this.area.path(y).attr({
+        stroke: v,
+        "stroke-width": `${l}`,
+        "stroke-linecap": "round",
+        fill: "none",
+        "vector-effect": "non-scaling-stroke"
+      }).addClass("radial-hint-bg");
+      g.node.style.opacity = "0", e.add(g);
+    }
+    const w = this.area.text(0, 0, n).addClass("radial-hint").attr({
+      fill: this.theme === "light" ? "#333333" : "#7a7a7a",
+      textpath: y
+    }), f = w.select("textPath");
+    return f && (f.attr("dominant-baseline", "central"), f.attr("startOffset", "50%")), e.add(w), L.set(e, {
+      sectorMidAngle: u,
+      baseRadius: c,
+      textLength: r
+    }), e;
+  }
+  createCentralButton(t) {
+    const e = this.config.innerRadius * 0.6, s = t.iconRadius ?? this.config.iconRadius ?? e, i = this.config.color ?? "#1976D2", n = this.area.circle({
+      cx: this.c,
+      cy: this.c,
+      r: s,
+      fill: i,
+      stroke: i,
+      opacity: this.config.opacity
+    }).addClass("radial-sector central-sector");
+    n.node.dataset.initialRadius = `${s}`;
+    let r = null, a = null;
+    t.icon && (r = this.createCentralIcon(t, s)), t.hint && (a = this.createCentralHint(t, s));
+    const c = [n, r, a].filter((h) => h !== null), l = this.area.g(...c).addClass("central-button");
+    return l.hover(
+      () => {
+        l.select(".central-hint")?.addClass("active");
+        const h = l.select(".radial-hint-bg");
+        h && (h.addClass("active"), h.node.style.opacity = String(this.config.opacity)), this.animateCentralHover(l, !0);
+      },
+      () => {
+        l.select(".central-hint")?.removeClass("active");
+        const h = l.select(".radial-hint-bg");
+        h && (h.removeClass("active"), h.node.style.opacity = "0"), this.animateCentralHover(l, !1);
+      }
+    ), l.mouseup((h) => {
+      h.button === 0 && (this.emit("click", { icon: t.icon, hint: t.hint || "" }), t.onclick?.());
+    }), l;
+  }
+  createCentralIcon(t, e) {
+    if (!this.icons) return null;
+    const s = this.icons.select(`#${t.icon}`);
+    if (!s)
+      return console.error(`Icon #${t.icon} not found in SVG`), null;
+    const i = s.clone(), n = i.getBBox(), r = e * 0.8 / Math.max(n.width, n.height), a = t.iconScale ?? this.config.iconScale ?? r, c = new C();
+    return c.translate(this.c, this.c), c.scale(a), c.translate(-n.cx, -n.cy), i.transform(c).addClass("radial-icon central-icon"), E.set(i, {
+      midRadius: 0,
+      rotation: 0,
+      scale: a,
+      bbox: n
+    }), i;
+  }
+  createCentralHint(t, e) {
+    const s = this.area.g(), i = t.hintPadding ?? this.config.hintPadding, n = N(), r = t.hint ?? "";
+    let a, c = 0;
+    i !== void 0 ? (c = n.height + 2 * i, a = t.hintOffset ?? c / 2 + 2) : t.hintOffset != null ? a = t.hintOffset : a = t.hintDistance ?? 8;
+    const h = e + a;
+    let p, u, d;
+    if (t.hintStartAngle != null && t.hintEndAngle != null)
+      p = t.hintStartAngle, u = t.hintEndAngle, d = p > u;
+    else {
+      const g = (t.hintSpan ?? 120) / 2;
+      (t.hintPosition ?? "top") === "bottom" ? (p = 180 + g, u = 180 - g, d = !0) : (p = 360 - g, u = g, d = !1);
+    }
+    const m = S(this.c, this.c, h, p, u, !1, d);
+    if (i !== void 0) {
+      const v = this.config.color ?? "#1976D2", g = this.area.path(m).attr({
+        stroke: v,
+        "stroke-width": `${c}`,
+        "stroke-linecap": "round",
+        fill: "none",
+        "vector-effect": "non-scaling-stroke"
+      }).addClass("radial-hint-bg");
+      g.node.style.opacity = "0", s.add(g);
+    }
+    const y = this.area.text(0, 0, r).addClass("radial-hint central-hint").attr({
+      fill: this.theme === "light" ? "#333333" : "#7a7a7a",
+      textpath: m
+    }), w = y.select("textPath");
+    w && (w.attr("dominant-baseline", "central"), w.attr("startOffset", "50%"));
+    const f = y.node;
+    return f.dataset.hintOffset = a.toString(), f.dataset.startAngle = p.toString(), f.dataset.endAngle = u.toString(), f.dataset.alter = d ? "true" : "false", f.dataset.centerX = this.c.toString(), f.dataset.centerY = this.c.toString(), s.add(y), s;
+  }
+  show(t) {
+    this.element.classList.remove("hidden");
+    const e = this.element.querySelector("svg");
+    e.style.left = t.clientX - this.c + "px", e.style.top = t.clientY - this.c + "px", this.animateContainer(0, 1, this.duration * 8, b.elastic), this.animateButtons(0, 1, this.duration, this.duration * 8, b.elastic);
+  }
+  hide() {
+    this.animateContainer(1, 0, this.duration, b.easeinout, () => {
+      this.element.classList.add("hidden");
+    }), this.animateButtons(1, 0, this.duration, this.duration, b.easeinout);
+  }
+  animate(t, e, s, i, n, r, a, c) {
+    t.animation ||= [], t.animation[e]?.stop(), t.animation[e] = P(s, i, a, n, r, c);
+  }
+  animateContainer(t, e, s, i, n) {
+    this.animate(this, 0, t, e, s, i, (r) => {
+      this.container.transform(`r${90 - 90 * r},${this.c},${this.c}s${r},${r},${this.c},${this.c}`);
+    }, n);
+  }
+  animateButtons(t, e, s, i, n) {
+    const r = (a, c) => Math.random() * (c - a) + a;
+    this.container.children().forEach((a, c) => {
+      const l = a.node.classList.contains("central-button");
+      this.animate(a, 0, t, e, r(s, i), n, (h) => {
+        l ? a.transform(`s${h},${h},${this.c},${this.c}`) : a.transform(`r${this.angle * c},${this.c},${this.c}s${h},${h},${this.c},${this.c}`);
+      });
+    });
+  }
+  animateButtonHover(t, e, s, i, n, r) {
+    const a = t.select(".radial-icon"), c = a ? E.get(a) : void 0, l = t.select(".hint-group"), h = l ? L.get(l) : void 0;
+    this.animate(t, 1, e, s, i, n, (p) => {
+      const u = p * 10;
+      if (t.select(".radial-sector")?.attr({
+        d: F(this.c, this.c, this.config.outerRadius - u, this.config.innerRadius, 0, this.angle)
+      }), a && c) {
+        const d = c.midRadius - u, m = c.scale * (1 - p * 0.1), y = this.angle / 2, w = M(this.c, this.c, d, y), f = new C();
+        f.translate(w.x, w.y), f.scale(m), f.rotate(c.rotation, 0, 0), f.translate(-c.bbox.cx, -c.bbox.cy), a.transform(f);
+      }
+      if (h && l) {
+        const d = h.baseRadius - u, m = h.textLength / d * 180 / Math.PI, y = h.sectorMidAngle - m / 2, w = h.sectorMidAngle + m / 2, f = S(this.c, this.c, d, y, w, !1, !1), v = l.select(".radial-hint");
+        v && v.attr("textpath", f);
+        const g = l.select(".radial-hint-bg");
+        g && g.attr("d", f);
+      }
+    }, r);
+  }
+  animateCentralHover(t, e) {
+    const s = t.select(".central-sector"), i = t.select(".central-icon"), n = t.select(".central-hint"), r = t.select(".radial-hint-bg");
+    if (!s || !i) return;
+    const a = parseFloat(s.node.dataset.initialRadius || "30"), c = parseFloat(s.attr("r")), l = e ? a - 8 : a, h = i ? E.get(i) : void 0;
+    let p = 12, u = 0, d = 0, m = this.c, y = this.c, w = !1;
+    n && (p = parseFloat(n.node.dataset.hintOffset || "12"), u = parseFloat(n.node.dataset.startAngle || "0"), d = parseFloat(n.node.dataset.endAngle || "0"), m = parseFloat(n.node.dataset.centerX || this.c.toString()), y = parseFloat(n.node.dataset.centerY || this.c.toString()), w = n.node.dataset.alter === "true"), P(c, l, (f) => {
+      if (s.attr("r", f), i && h) {
+        const v = h.scale * (f / a), g = new C();
+        g.translate(this.c, this.c), g.scale(v), g.translate(-h.bbox.cx, -h.bbox.cy), i.transform(g);
+      }
+      if (n) {
+        const v = f + p, g = S(m, y, v, u, d, !1, w);
+        n.attr({ textpath: g }), r && r.attr({ d: g });
+      }
+    }, 200, b.easeinout);
+  }
+  transformOpacity(t) {
+    const e = t.deltaY > 0 ? 0.03 : -0.03;
+    this.config.opacity = X(this.config.opacity + e, 0.4, 1), this.area.selectAll(".radial-sector").forEach((s) => {
+      s.attr({ opacity: this.config.opacity });
+    }), this.area.selectAll(".radial-hint-bg.active").forEach((s) => {
+      s.node.style.opacity = String(this.config.opacity);
+    });
+  }
+  on(t, e) {
+    (this.events[t] ??= []).push(e);
+  }
+  emit(t, e) {
+    this.events[t] && this.events[t].forEach((s) => s(e));
+  }
+}
+class K {
+  menu;
+  constructor(t, e) {
+    this.menu = new Q(e), t.appendChild(this.menu.element), e.autoBindContextMenu !== !1 && this.bindEvents();
+  }
+  bindEvents() {
+    window.addEventListener("contextmenu", (t) => {
+      t.preventDefault(), this.menu.show(t);
+    });
+  }
+  on(t, e) {
+    this.menu.on(t, e);
+  }
+  show(t) {
+    this.menu.show(t);
+  }
+  hide() {
+    this.menu.hide();
+  }
+}
+export {
+  K as Manager,
+  J as defineConfig
+};
+//# sourceMappingURL=context-menu.js.map