northdata-viz 1.301.10 → 1.302.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "northdata-viz",
-  "version": "1.301.10",
+  "version": "1.302.10",
   "description": "North Data Widget API",
   "main": "viz.min.js",
   "module": "viz.esm.js",

package/viz.esm.js

@@ -1,4 +1,4 @@
-/*! northdata-viz V1.301.10 */
+/*! northdata-viz V1.302.10 */
 /******/ var __webpack_modules__ = ({
 
 /***/ 100:
@@ -463,8 +463,8 @@ module.exports = debounce;
 /************************************************************************/
 
 ;// ./src/ts/env.ts
-var VERSION = "1.301.10";
-var VERSION_PREFIX = (/* unused pure expression or super */ null && ("/ui/v1-301-10"));
+var VERSION = "1.302.10";
+var VERSION_PREFIX = (/* unused pure expression or super */ null && ("/ui/v1-302-10"));
 
 ;// ./src/ts/util/params.ts
 function clone(object) {
@@ -6550,6 +6550,11 @@ function enrichNodes(widget, svg,
 //rootId: number | undefined,
 denseLeaves) {
     var maxWidth = widget.container.getBoundingClientRect().width;
+    var d3NodesContainer = svg.select("g.nodes");
+    var highlightContainer = svg
+        .append("g")
+        .attr("class", "highlight-container")
+        .attr("style", "pointer-events: none;");
     function selectNode(id) {
         return svg.select(".node[data-id='" + id + "']");
     }
@@ -6561,21 +6566,21 @@ denseLeaves) {
         var nodeId = node.getAttribute("data-id");
         var highlightMode = node.getAttribute("data-root") == "true" ? "root" : "node";
         // highlight node
-        node.setAttribute("data-highlight", highlightMode);
+        src_select(node).attr("data-highlight", highlightMode).classed("hovered", true);
         var textNode = node.querySelector(".text");
         if (textNode) {
             textNode.textContent = node.getAttribute("data-description");
         }
         syncTextBackground(src_select(node), ".text", ".text-bg", denseLeaves ? 2 : 5, 2, maxWidth);
         // highlight links
-        var linkEls = svg
+        var linkEls = d3NodesContainer
             .selectAll(".link[data-source-id='" + nodeId + "'],.link[data-target-id='" + nodeId + "']")
             .attr("data-highlight", highlightMode);
         syncTextBackground(linkEls, ".desc", ".desc-bg", 3, 2, maxWidth);
         // bring highlighted stuff to front
         window.clearTimeout(restoreDefaultOrder);
         var toBeMoved = [];
-        linkEls.each(function (link) {
+        linkEls.each(function () {
             var linkEl = this;
             toBeMoved.push(linkEl);
             function moveOtherEndToFront(id) {
@@ -6589,6 +6594,26 @@ denseLeaves) {
         toBeMoved.push(node);
         moveToFront(toBeMoved);
     }
+    function highlightLink(link) {
+        var _a;
+        // Move clone of link element to highlight container that is always in front of all nodes & links
+        var linkClone = src_select(link).clone(true);
+        linkClone
+            .attr("data-highlight", "link")
+            .selectAll(":not(.desc, .desc-bg)")
+            .remove();
+        var linkCloneNode = linkClone.node();
+        if (linkCloneNode) {
+            highlightContainer.html(null);
+            (_a = highlightContainer.node()) === null || _a === void 0 ? void 0 : _a.append(linkCloneNode);
+        }
+    }
+    function unhighlightAll() {
+        svg
+            .selectAll("[data-highlight]")
+            .attr("data-highlight", "false")
+            .classed("hovered", false);
+    }
     function arrangeInDefaultOrder() {
         var toBeMoved = [];
         svg.select(".node").each(function () {
@@ -6598,7 +6623,7 @@ denseLeaves) {
         moveToFront(toBeMoved);
     }
     function unhighlight(node) {
-        svg.selectAll("[data-highlight]").attr("data-highlight", "false");
+        unhighlightAll();
         var nodeId = node.getAttribute("data-id");
         svg
             .select(".node[data-id='" + nodeId + "']")
@@ -6607,8 +6632,7 @@ denseLeaves) {
             .attr("x", 0);
         restoreDefaultOrder = window.setTimeout(arrangeInDefaultOrder, 1000);
     }
-    var d3NodesContainer = svg.select("g.nodes");
-    var d3NewNodes = d3NodesContainer.selectAll(".node").each(function () {
+    d3NodesContainer.selectAll(".node").each(function () {
         var el = this;
         var root = el.getAttribute("data-root") == "true";
         var linkify = widget.getLinkifier();
@@ -6634,6 +6658,14 @@ denseLeaves) {
         .on("mouseout", function () {
         unhighlight(this);
     });
+    d3NodesContainer
+        .selectAll(".link")
+        .on("mouseover", function () {
+        highlightLink(this);
+    })
+        .on("mouseout", function () {
+        unhighlightAll();
+    });
     arrangeInDefaultOrder();
     // REMOVE ME
     NorthData.debug("successfully completed v12");