apextree 1.6.0 → 1.6.1

package/README.md

@@ -76,7 +76,7 @@ The layout can be configured by either setting the properties in the table below
 | groupLeafNodesSpacing | 10 | Spacing between stacked leaf nodes |
 | tooltipId | `apextree-tooltip-container` | The tooltip HTML element id |
 | tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip |
-| tooltipMaxWidth | 300 | The max width of the tooltip in pixels |
+| tooltipMaxWidth | undefined | The max width of the tooltip in pixels |
 | tooltipMinWidth | 100 | The min width of the tooltip in pixels |
 | tooltipBorderColor | `#BCBCBC` | The border color of tooltip |
 | tooltipBGColor | `#FFFFFF` | The background color of tooltip |

package/apextree.es.min.js

@@ -10081,7 +10081,7 @@ const applyButtonHoverEffects = (buttonGroup) => {
     buttonGroup.attr("style", "cursor: pointer;");
   });
 };
-const highlightToPath = (selfNode, nodeMap, isHighlighted, options, chartContext) => {
+const highlightToPath = (selfNode, nodeMap, isHighlighted, options, chartContext, containerClassName) => {
   const nodeOptions = selfNode == null ? void 0 : selfNode.options;
   const nodeBorderWidth = (nodeOptions == null ? void 0 : nodeOptions.borderWidth) || options.borderWidth;
   let borderColor = (nodeOptions == null ? void 0 : nodeOptions.borderColor) || options.borderColor;
@@ -10091,7 +10091,7 @@ const highlightToPath = (selfNode, nodeMap, isHighlighted, options, chartContext
     backgroundColor = (nodeOptions == null ? void 0 : nodeOptions.nodeBGColorHover) || options.nodeBGColorHover;
   }
   const selfContentElement = chartContext.querySelector(
-    `[data-self='${selfNode.id}'] foreignObject div`
+    `#${containerClassName} [data-self='${selfNode.id}'] foreignObject div`
   );
   if (selfContentElement && !selfNode.id.endsWith("_leafs")) {
     selfContentElement.style.borderWidth = `${nodeBorderWidth}px`;
@@ -10099,7 +10099,7 @@ const highlightToPath = (selfNode, nodeMap, isHighlighted, options, chartContext
     selfContentElement.style.backgroundColor = backgroundColor;
   }
   if (selfNode.parent) {
-    const edge = chartContext.getElementById(`${selfNode.parent}-${selfNode.id}`);
+    const edge = chartContext.querySelector(`#${containerClassName} #${selfNode.parent}-${selfNode.id}`);
     if (isHighlighted) {
       setAttributes(edge, {
         stroke: options.edgeColorHover,
@@ -10112,7 +10112,7 @@ const highlightToPath = (selfNode, nodeMap, isHighlighted, options, chartContext
       });
     }
     if (selfNode.parent) {
-      highlightToPath(nodeMap[selfNode.parent], nodeMap, isHighlighted, options, chartContext);
+      highlightToPath(nodeMap[selfNode.parent], nodeMap, isHighlighted, options, chartContext, containerClassName);
     }
   }
 };
@@ -16298,6 +16298,7 @@ class Graph2 extends Paper {
     const node = this.nodeMap[nodeId];
     const { options } = this;
     const {
+      containerClassName,
       contentKey,
       direction,
       enableTooltip,
@@ -16366,14 +16367,28 @@ class Graph2 extends Paper {
         const { self: self2 } = this.node.dataset;
         const selfNode = graphInstance.nodeMap[self2];
         if (selfNode) {
-          highlightToPath(selfNode, graphInstance.nodeMap, true, options, graphInstance.chartContext);
+          highlightToPath(
+            selfNode,
+            graphInstance.nodeMap,
+            true,
+            options,
+            graphInstance.chartContext,
+            containerClassName
+          );
         }
       });
       group.on("mouseout", function() {
         const { self: self2 } = this.node.dataset;
         const selfNode = graphInstance.nodeMap[self2];
         if (selfNode) {
-          highlightToPath(selfNode, graphInstance.nodeMap, false, options, graphInstance.chartContext);
+          highlightToPath(
+            selfNode,
+            graphInstance.nodeMap,
+            false,
+            options,
+            graphInstance.chartContext,
+            containerClassName
+          );
         }
       });
     }
@@ -16420,6 +16435,7 @@ class Graph2 extends Paper {
     const { options } = this;
     const {
       borderRadius,
+      containerClassName,
       contentKey,
       direction,
       enableExpandCollapse,
@@ -16481,14 +16497,28 @@ class Graph2 extends Paper {
         const { self: self2 } = this.node.dataset;
         const selfNode = graphInstance.nodeMap[self2];
         if (selfNode) {
-          highlightToPath(selfNode, graphInstance.nodeMap, true, options, graphInstance.chartContext);
+          highlightToPath(
+            selfNode,
+            graphInstance.nodeMap,
+            true,
+            options,
+            graphInstance.chartContext,
+            containerClassName
+          );
         }
       });
       group.on("mouseout", function() {
         const { self: self2 } = this.node.dataset;
         const selfNode = graphInstance.nodeMap[self2];
         if (selfNode) {
-          highlightToPath(selfNode, graphInstance.nodeMap, false, options, graphInstance.chartContext);
+          highlightToPath(
+            selfNode,
+            graphInstance.nodeMap,
+            false,
+            options,
+            graphInstance.chartContext,
+            containerClassName
+          );
         }
       });
     }
@@ -16572,7 +16602,12 @@ class ApexTree extends BaseChart {
   constructor(element, options = {}) {
     const instanceId = "tree_" + Math.random().toString(36).substr(2, 9);
     super(element, instanceId);
-    this.options = { ...DefaultOptions, ...options };
+    const uniqueContainerClassName = options.containerClassName ? `${options.containerClassName}-${instanceId}` : `root-${instanceId}`;
+    this.options = {
+      ...DefaultOptions,
+      ...options,
+      containerClassName: uniqueContainerClassName
+    };
     const { height: height2, width: width2 } = this.options;
     this.graph = new Graph2(this.element, this.options, this.chartContext);
     this.setupElementDimensions(width2, height2);