@abi-software/map-utilities 1.1.3-beta.4 → 1.1.3-beta.5

package/dist/map-utilities.js

@@ -28364,8 +28364,9 @@ Ea.warnings = function(t) {
 };
 Ea.version = ZL;
 Ea.stylesheet = Ea.Stylesheet = o0;
-let jL = class {
-  constructor(e, r) {
+let jL = class extends EventTarget {
+  constructor(r, n) {
+    super();
     Kr(this, "cyg", null);
     Kr(this, "nodes", []);
     Kr(this, "edges", []);
@@ -28373,16 +28374,16 @@ let jL = class {
     Kr(this, "dendrites", []);
     Kr(this, "labelCache", /* @__PURE__ */ new Map());
     Kr(this, "graphCanvas", null);
-    this.labelCache = e, this.graphCanvas = r;
-  }
-  async addConnectivity(e) {
-    if (this.axons = e.axons.map((r) => JSON.stringify(r)), this.dendrites = e.dendrites.map((r) => JSON.stringify(r)), e.connectivity.length)
-      for (const r of e.connectivity) {
-        const n = await this.graphNode(r[0]), a = await this.graphNode(r[1]);
-        this.nodes.push(n), this.nodes.push(a), this.edges.push({
-          id: `${n.id}_${a.id}`,
-          source: n.id,
-          target: a.id
+    this.labelCache = r, this.graphCanvas = n;
+  }
+  async addConnectivity(r) {
+    if (this.axons = r.axons.map((n) => JSON.stringify(n)), this.dendrites = r.dendrites.map((n) => JSON.stringify(n)), r.connectivity.length)
+      for (const n of r.connectivity) {
+        const a = await this.graphNode(n[0]), i = await this.graphNode(n[1]);
+        this.nodes.push(a), this.nodes.push(i), this.edges.push({
+          id: `${a.id}_${i.id}`,
+          source: a.id,
+          target: i.id
         });
       }
     else
@@ -28391,43 +28392,51 @@ let jL = class {
         label: "NO PATHS"
       });
   }
-  showConnectivity(e) {
-    this.cyg = new JL(this, e);
+  showConnectivity(r) {
+    this.cyg = new JL(this, r), this.cyg.on("tap-node", (n) => {
+      const a = new CustomEvent("tap-node", {
+        detail: n.detail
+      });
+      this.dispatchEvent(a);
+    });
   }
   clearConnectivity() {
-    var e;
-    (e = this.cyg) != null && e.cy && (this.cyg.cy.remove(), this.cyg.cy = null);
+    var r;
+    (r = this.cyg) != null && r.cy && (this.cyg.cy.remove(), this.cyg.cy = null);
   }
   reset() {
-    var e;
-    (e = this.cyg) != null && e.cy && this.cyg.cy.reset();
-  }
-  enableZoom(e) {
     var r;
-    (r = this.cyg) != null && r.cy && this.cyg.cy.userZoomingEnabled(e);
+    (r = this.cyg) != null && r.cy && this.cyg.cy.reset();
+  }
+  enableZoom(r) {
+    var n;
+    (n = this.cyg) != null && n.cy && this.cyg.cy.userZoomingEnabled(r);
   }
   get elements() {
     return [
-      ...this.nodes.map((e) => ({ data: e })),
-      ...this.edges.map((e) => ({ data: e }))
+      ...this.nodes.map((r) => ({ data: r })),
+      ...this.edges.map((r) => ({ data: r }))
     ];
   }
   get roots() {
     return this.dendrites;
   }
-  async graphNode(e) {
-    const r = JSON.stringify(e), n = [e[0], ...e[1]], a = [];
-    for (const o of n) {
-      const s = this.labelCache.has(o) ? this.labelCache.get(o) : "";
-      a.push(s);
+  async graphNode(r) {
+    const n = JSON.stringify(r), a = [r[0], ...r[1]], i = [];
+    for (const s of a) {
+      const u = this.labelCache.has(s) ? this.labelCache.get(s) : "";
+      i.push(u);
     }
-    n.push(...a);
-    const i = {
-      id: r,
-      label: n.join(`
+    a.push(...i);
+    const o = {
+      id: n,
+      label: a.join(`
 `)
     };
-    return this.axons.includes(r) ? this.dendrites.includes(r) ? i["both-a-d"] = !0 : i.axon = !0 : this.dendrites.includes(r) && (i.dendrite = !0), i;
+    return this.axons.includes(n) ? this.dendrites.includes(n) ? o["both-a-d"] = !0 : o.axon = !0 : this.dendrites.includes(n) && (o.dendrite = !0), o;
+  }
+  on(r, n) {
+    this.addEventListener(r, n);
   }
 };
 const QL = [
@@ -28471,44 +28480,54 @@ const QL = [
     }
   }
 ];
-class JL {
-  constructor(e, r) {
+class JL extends EventTarget {
+  constructor(r, n) {
+    var a;
+    super();
     Kr(this, "cy");
     Kr(this, "tooltip");
-    var n;
     this.cy = Ea({
-      container: r,
-      elements: e.elements,
+      container: n,
+      elements: r.elements,
       layout: {
         name: "breadthfirst",
         circle: !1,
-        roots: e.roots
+        roots: r.roots
       },
       directed: !0,
       style: QL,
       minZoom: 0.5,
       maxZoom: 10,
       wheelSensitivity: 0.4
-    }).on("mouseover", "node", this.overNode.bind(this)).on("mouseout", "node", this.exitNode.bind(this)).on("position", "node", this.moveNode.bind(this)), this.tooltip = document.createElement("div"), this.tooltip.className = "cy-graph-tooltip", this.tooltip.hidden = !0, (n = r == null ? void 0 : r.lastChild) == null || n.appendChild(this.tooltip);
+    }).on("mouseover", "node", this.overNode.bind(this)).on("mouseout", "node", this.exitNode.bind(this)).on("position", "node", this.moveNode.bind(this)).on("tap", "node", this.tapNode.bind(this)), this.tooltip = document.createElement("div"), this.tooltip.className = "cy-graph-tooltip", this.tooltip.hidden = !0, (a = n == null ? void 0 : n.lastChild) == null || a.appendChild(this.tooltip);
   }
   remove() {
     this.cy && this.cy.destroy();
   }
-  checkRightBoundary(e) {
-    var r;
-    e + this.tooltip.offsetWidth >= ((r = this.tooltip.parentElement) == null ? void 0 : r.offsetWidth) && (this.tooltip.style.left = `${e - this.tooltip.offsetWidth}px`);
+  checkRightBoundary(r) {
+    var n;
+    r + this.tooltip.offsetWidth >= ((n = this.tooltip.parentElement) == null ? void 0 : n.offsetWidth) && (this.tooltip.style.left = `${r - this.tooltip.offsetWidth}px`);
   }
-  overNode(e) {
-    const r = e.target;
-    this.tooltip.innerText = r.data().label, this.tooltip.style.left = `${e.renderedPosition.x}px`, this.tooltip.style.top = `${e.renderedPosition.y}px`, this.tooltip.hidden = !1, this.checkRightBoundary(e.renderedPosition.x);
+  overNode(r) {
+    const n = r.target;
+    this.tooltip.innerText = n.data().label, this.tooltip.style.left = `${r.renderedPosition.x}px`, this.tooltip.style.top = `${r.renderedPosition.y}px`, this.tooltip.hidden = !1, this.checkRightBoundary(r.renderedPosition.x);
   }
-  moveNode(e) {
-    const r = e.target;
-    this.tooltip.style.left = `${r.renderedPosition().x}px`, this.tooltip.style.top = `${r.renderedPosition().y}px`, this.checkRightBoundary(r.renderedPosition().x);
+  moveNode(r) {
+    const n = r.target;
+    this.tooltip.style.left = `${n.renderedPosition().x}px`, this.tooltip.style.top = `${n.renderedPosition().y}px`, this.checkRightBoundary(n.renderedPosition().x);
   }
-  exitNode(e) {
+  exitNode(r) {
     this.tooltip.hidden = !0;
   }
+  tapNode(r) {
+    const a = r.target.data(), i = new CustomEvent("tap-node", {
+      detail: a
+    });
+    this.dispatchEvent(i);
+  }
+  on(r, n) {
+    this.addEventListener(r, n);
+  }
 }
 const eF = 1.3, tF = 24 * 60 * 60 * 1e3, rF = "Reset position", fv = "Lock zoom (to scroll)", nF = "Unlock zoom", aF = "#8300bf", iF = {
   name: "ConnectivityGraph",
@@ -28583,7 +28602,11 @@ const eF = 1.3, tF = 24 * 60 * 60 * 1e3, rF = "Reset position", fv = "Lock zoom
     },
     showGraph: async function(t) {
       const e = this.$refs.graphCanvas;
-      this.showSpinner(), this.connectivityGraph = new jL(this.labelCache, e), await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(t)), this.hideSpinner(), this.connectivityGraph.showConnectivity(e);
+      this.showSpinner(), this.connectivityGraph = new jL(this.labelCache, e), await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(t)), this.hideSpinner(), this.connectivityGraph.showConnectivity(e), this.connectivityGraph.on("tap-node", (r) => {
+        const { label: n } = r.detail, a = n.split(`
+`);
+        this.$emit("tap-node", a);
+      });
     },
     query: async function(t, e) {
       const r = `${this.mapServer}knowledge/query/`, n = { sql: t, params: e };
@@ -28690,7 +28713,7 @@ const eF = 1.3, tF = 24 * 60 * 60 * 1e3, rF = "Reset position", fv = "Lock zoom
 }, oF = { class: "connectivity-graph" }, sF = {
   ref: "graphCanvas",
   class: "graph-canvas"
-}, lF = { class: "control-panel" }, uF = /* @__PURE__ */ P0('<div class="node-key" data-v-ec98b14b><div class="key-head" data-v-ec98b14b>Node type:</div><div data-v-ec98b14b><div data-v-ec98b14b><span data-v-ec98b14b>Node:</span><span class="key-box" style="background:#80F0F0;" data-v-ec98b14b></span></div><div data-v-ec98b14b><span data-v-ec98b14b>Axon:</span><span class="key-box" style="background:green;" data-v-ec98b14b></span></div><div data-v-ec98b14b><span data-v-ec98b14b>Dendrite:</span><span class="key-box" style="background:red;" data-v-ec98b14b></span></div><div data-v-ec98b14b><span data-v-ec98b14b>Both:</span><span class="key-box" style="background:gray;" data-v-ec98b14b></span></div></div></div>', 1), cF = { class: "tools" }, dF = { class: "visually-hidden" }, fF = { class: "visually-hidden" };
+}, lF = { class: "control-panel" }, uF = /* @__PURE__ */ P0('<div class="node-key" data-v-d620c023><div class="key-head" data-v-d620c023>Node type:</div><div data-v-d620c023><div data-v-d620c023><span data-v-d620c023>Node:</span><span class="key-box" style="background:#80F0F0;" data-v-d620c023></span></div><div data-v-d620c023><span data-v-d620c023>Axon:</span><span class="key-box" style="background:green;" data-v-d620c023></span></div><div data-v-d620c023><span data-v-d620c023>Dendrite:</span><span class="key-box" style="background:red;" data-v-d620c023></span></div><div data-v-d620c023><span data-v-d620c023>Both:</span><span class="key-box" style="background:gray;" data-v-d620c023></span></div></div></div>', 1), cF = { class: "tools" }, dF = { class: "visually-hidden" }, fF = { class: "visually-hidden" };
 function vF(t, e, r, n, a, i) {
   const o = Xb, s = Vt, u = pn, l = xo, c = g2, d = w2, v = tc;
   return je(($(), Z("div", oF, [
@@ -28754,7 +28777,7 @@ function vF(t, e, r, n, a, i) {
     [v, t.loading]
   ]);
 }
-const CF = /* @__PURE__ */ rn(iF, [["render", vF], ["__scopeId", "data-v-ec98b14b"]]);
+const CF = /* @__PURE__ */ rn(iF, [["render", vF], ["__scopeId", "data-v-d620c023"]]);
 export {
   CF as ConnectivityGraph,
   wF as CopyToClipboard,