apextree 1.5.0 → 1.6.1

package/README.md

@@ -4,7 +4,6 @@ The Apextree is a javascript library built on SVG that helps to create organizat
 
 <img width="811" alt="Screenshot 2023-12-17 at 10 28 04 PM" src="https://github.com/apexcharts/tree/assets/17950663/e09212ec-6322-4c68-ac12-9afc524d2abd">
 
-
 ## Installation
 
 To add the Apextree to your project and its dependencies, install the package from npm.
@@ -16,7 +15,7 @@ npm install apextree
 ## Usage
 
 ```js
-import ApexTree from 'apextree'
+import ApexTree from 'apextree';
 ```
 
 To create a basic tree with minimal configuration, write as follows:
@@ -47,43 +46,48 @@ To create a basic tree with minimal configuration, write as follows:
 
 The layout can be configured by either setting the properties in the table below by passing a second arg to Apextree with these properties set. The latter takes precedence.
 
-Options | Default                      | Description
---- |------------------------------| ---
-width | 400                         | The width of graph container
-height | 400                         | The height of graph container
-direction | top                          | The direction of the tree to start rendering. Possible values: `top`, `bottom`, `left` and `right`
-contentKey | name                         | The key of content in passed data object 
-siblingSpacing | 50                           | The spacing between sibling nodes
-childrenSpacing | 50                           | The spacing between children and parent
-highlightOnHover | true                         | Enable/disable highlight on hover
-containerClassName | root                         | The class name for the root container
-canvasStyle | None                         | The css styles for canvas root container
-enableToolbar | false                        | Enable/disable graph toolbar
-nodeWidth | 50                           | The width of graph nodes
-nodeHeight | 30                           | The height of graph nodes
-nodeTemplate | defaultNodeTemplate          | The HTML template for nodes
-nodeBGColor | `#FFFFFF`                    | The background color of nodes
-nodeBGColorHover | `#FFFFFF`                    | The background color on hover of nodes
-borderWidth | 1                            | The border width of the nodes in pixels
-borderStyle | solid                        | The border style of the nodes
-borderRadius | 5px                          | The border radius of the nodes in pixels
-borderColor | `#BCBCBC`                    | The border color of the nodes
-borderColorHover | `#5C6BC0`                    | The border color on hover of the nodes
-edgeWidth | `1`                    | The width for the edges
-edgeColor | `#BCBCBC`                    | The color for the edges
-edgeColorHover | `#BCBCBC`                    | The color for the edges when highlighted
-enableTooltip | false                        | Enable tooltip on hover of nodes
-groupLeafNodes | false                        | For stacking leaf nodes
-groupLeafNodesSpacing | 10                        | Spacing between stacked leaf nodes
-tooltipId | `apextree-tooltip-container` | The tooltip HTML element id
-tooltipTemplate | defaultNodeTemplate          | The HTML template for tooltip
-tooltipMaxWidth | 100                          | The max width of the tooltip
-tooltipBorderColor | `#BCBCBC`                    | The border color of tooltip
-tooltipBGColor | `#FFFFFF`                    | The background color of tooltip
-fontSize | 14px                         | The size of font of nodes
-fontFamily | None                         | The font family of nodes
-fontWeight | 400                          | The font weight of nodes
-fontColor | `#000000`                    | The font color of nodes
+| Options | Default | Description |
+| --- | --- | --- |
+| width | 400 | The width of graph container |
+| height | 400 | The height of graph container |
+| direction | top | The direction of the tree to start rendering. Possible values: `top`, `bottom`, `left` and `right` |
+| contentKey | name | The key of content in passed data object |
+| siblingSpacing | 50 | The spacing between sibling nodes |
+| childrenSpacing | 50 | The spacing between children and parent |
+| highlightOnHover | true | Enable/disable highlight on hover |
+| containerClassName | root | The class name for the root container |
+| canvasStyle | None | The css styles for canvas root container |
+| enableToolbar | false | Enable/disable graph toolbar |
+| nodeWidth | 50 | The width of graph nodes |
+| nodeHeight | 30 | The height of graph nodes |
+| nodeTemplate | defaultNodeTemplate | The HTML template for nodes |
+| nodeBGColor | `#FFFFFF` | The background color of nodes |
+| nodeBGColorHover | `#FFFFFF` | The background color on hover of nodes |
+| borderWidth | 1 | The border width of the nodes in pixels |
+| borderStyle | solid | The border style of the nodes |
+| borderRadius | 5px | The border radius of the nodes in pixels |
+| borderColor | `#BCBCBC` | The border color of the nodes |
+| borderColorHover | `#5C6BC0` | The border color on hover of the nodes |
+| edgeWidth | `1` | The width for the edges |
+| edgeColor | `#BCBCBC` | The color for the edges |
+| edgeColorHover | `#5C6BC0` | The color for the edges when highlighted |
+| enableTooltip | false | Enable tooltip on hover of nodes |
+| groupLeafNodes | false | For stacking leaf nodes |
+| groupLeafNodesSpacing | 10 | Spacing between stacked leaf nodes |
+| tooltipId | `apextree-tooltip-container` | The tooltip HTML element id |
+| tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip |
+| 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 |
+| tooltipFontColor | `#000000` | The font color of tooltip text |
+| tooltipFontSize | `12px` | The font size of tooltip text |
+| tooltipPadding | 8 | The padding of tooltip in pixels (0 if custom tooltipTemplate is used) |
+| tooltipOffset | 10 | The offset distance between tooltip and cursor in pixels |
+| fontSize | 14px | The size of font of nodes |
+| fontFamily | None | The font family of nodes |
+| fontWeight | 400 | The font weight of nodes |
+| fontColor | `#000000` | The font color of nodes |
 
 Default node template
 
@@ -92,43 +96,46 @@ const defaultNodeTemplate = (content: string) => {
   return `<div style='display: flex;justify-content: center;align-items: center; text-align: center; height: 100%;'>${content}</div>`;
 };
 ```
+
 ### Expected data format
 
 ```json
 {
-  "id": "1", 
+  "id": "1",
   "name": "A",
   "children": []
 }
 ```
+
 Passed data object should contain id, name and children.
 
-For *id* key, value of id can be unique otherwise edge highlight won't work as expected.
+For _id_ key, value of id can be unique otherwise edge highlight won't work as expected.
 
-For *name* key, if using other than *name* then specify key name in contentKey option
+For _name_ key, if using other than _name_ then specify key name in contentKey option
 
-For *children* key, it contains list of child objects
+For _children_ key, it contains list of child objects
 
 **Example**
+
 ```js
 const data = {
-  "id": "1",
-  "name": "A",
-  "children": [
-     {
-       "id": "2",
-       "name": "B",
-       "children": [
-         {
-           "id": "3",
-           "name": "C"
-         },
-         {
-            "id": "4",
-            "name": "D"
-         }
-      ]
-     }
-  ]
-}
+  id: '1',
+  name: 'A',
+  children: [
+    {
+      id: '2',
+      name: 'B',
+      children: [
+        {
+          id: '3',
+          name: 'C',
+        },
+        {
+          id: '4',
+          name: 'D',
+        },
+      ],
+    },
+  ],
+};
 ```

package/apextree.es.min.js

@@ -6613,21 +6613,23 @@ const getTooltipStyles = ({
   fontFamily,
   fontSize,
   fontWeight,
-  maxWidth = 300,
+  maxWidth,
   padding,
   placement = "top",
   x: x2,
   y: y2
 }) => {
   const styles = ["position: absolute;", "z-index: 1000;", "pointer-events: none;"];
-  styles.push(`width: ${maxWidth}px;`);
-  styles.push(`max-width: ${maxWidth}px;`);
   styles.push("box-sizing: border-box;");
   styles.push("word-wrap: break-word;");
   styles.push("overflow-wrap: break-word;");
   styles.push(`left: ${x2}px;`);
   styles.push(`top: ${y2}px;`);
   styles.push(`data-placement: ${placement};`);
+  if (maxWidth) {
+    styles.push(`width: ${maxWidth}px;`);
+    styles.push(`max-width: ${maxWidth}px;`);
+  }
   if (borderColor) {
     styles.push(`border: 1px solid ${borderColor};`);
   }
@@ -9992,8 +9994,13 @@ const DefaultOptions = {
   siblingSpacing: 50,
   tooltipBGColor: "#FFFFFF",
   tooltipBorderColor: "#BCBCBC",
+  tooltipFontColor: "#000000",
+  tooltipFontSize: "12px",
   tooltipId: "apextree-tooltip-container",
-  tooltipMaxWidth: 100,
+  tooltipMaxWidth: void 0,
+  tooltipMinWidth: 100,
+  tooltipPadding: 8,
+  tooltipOffset: 10,
   viewPortHeight: 600,
   viewPortWidth: 800,
   width: "100%"
@@ -10074,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;
@@ -10084,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`;
@@ -10092,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,
@@ -10105,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);
     }
   }
 };
@@ -10147,6 +10154,77 @@ function findParentsWithOnlyLeafNodes(tree) {
   dfs2(tree);
   return result;
 }
+function calculateTooltipPosition(mouseX, mouseY, tooltipWidth, tooltipHeight, offset) {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const scrollX = window.scrollX || document.documentElement.scrollLeft;
+  const scrollY = window.scrollY || document.documentElement.scrollTop;
+  const padding = 10;
+  let placement = "top";
+  let x2 = mouseX;
+  let y2 = mouseY - tooltipHeight - offset;
+  const viewportY = mouseY - scrollY;
+  if (viewportY - tooltipHeight - offset < padding) {
+    placement = "bottom";
+    y2 = mouseY + offset;
+    if (viewportY + offset + tooltipHeight > viewportHeight - padding) {
+      placement = "top";
+      y2 = scrollY + padding;
+    }
+  }
+  const viewportX = mouseX - scrollX;
+  if (viewportX + tooltipWidth > viewportWidth - padding) {
+    x2 = scrollX + viewportWidth - tooltipWidth - padding;
+  }
+  if (viewportX < padding) {
+    x2 = scrollX + padding;
+  }
+  if (placement === "top" || placement === "bottom") {
+    const centeredX = mouseX - tooltipWidth / 2;
+    const centeredViewportX = centeredX - scrollX;
+    if (centeredViewportX >= padding && centeredViewportX + tooltipWidth <= viewportWidth - padding) {
+      x2 = centeredX;
+    }
+  }
+  return { placement, x: x2, y: y2 };
+}
+function showTooltip(chartContext, config, content, mouseX, mouseY, containerElement) {
+  const { bgColor, borderColor, fontColor, fontSize, fontFamily, maxWidth, minWidth, offset, padding, tooltipId } = config;
+  const tempDiv = document.createElement("div");
+  tempDiv.style.position = "absolute";
+  tempDiv.style.visibility = "hidden";
+  tempDiv.style.width = `${maxWidth}px`;
+  tempDiv.style.minWidth = `${minWidth}px`;
+  tempDiv.style.padding = `${padding}px`;
+  tempDiv.style.fontSize = fontSize;
+  tempDiv.style.fontFamily = fontFamily;
+  tempDiv.style.wordWrap = "break-word";
+  tempDiv.style.whiteSpace = "normal";
+  tempDiv.innerHTML = content;
+  document.body.appendChild(tempDiv);
+  const tooltipHeight = tempDiv.offsetHeight;
+  const tooltipWidth = tempDiv.offsetWidth;
+  document.body.removeChild(tempDiv);
+  const position2 = calculateTooltipPosition(mouseX, mouseY, tooltipWidth, tooltipHeight, offset);
+  const styles = getTooltipStyles({
+    bgColor,
+    borderColor,
+    fontColor,
+    fontFamily,
+    fontSize,
+    fontWeight: "400",
+    maxWidth,
+    padding,
+    placement: position2.placement,
+    x: position2.x,
+    y: position2.y
+  });
+  const enhancedStyles = `${styles} min-width: ${minWidth}px; word-wrap: break-word; white-space: normal; overflow-wrap: break-word; line-height: 1.4;`;
+  updateTooltip(chartContext, tooltipId, enhancedStyles, content);
+}
+function hideTooltip(chartContext, tooltipId) {
+  updateTooltip(chartContext, tooltipId);
+}
 const methods$1 = {};
 const names = [];
 function registerMethods(name, m) {
@@ -15916,6 +15994,7 @@ class Paper {
     this.chartContext = chartContext;
     this.width = width2;
     this.height = height2;
+    this.containerElement = element;
     element.innerHTML = "";
     this.canvas = SVG().addTo(element).size("100%", "100%").viewbox(`0 0 ${width2} ${height2}`).panZoom({ zoomFactor: 0.2, zoomMin: 0.1 }).attr({ style: canvasStyle });
   }
@@ -16002,6 +16081,9 @@ class Paper {
       this.canvas.zoom(newZoomVal);
     }
   }
+  getContainerElement() {
+    return this.containerElement;
+  }
 }
 const graphOptions = {
   marginx: 100,
@@ -16216,7 +16298,7 @@ class Graph2 extends Paper {
     const node = this.nodeMap[nodeId];
     const { options } = this;
     const {
-      borderRadius,
+      containerClassName,
       contentKey,
       direction,
       enableTooltip,
@@ -16228,6 +16310,7 @@ class Graph2 extends Paper {
     const {
       borderColor,
       borderStyle,
+      borderRadius,
       borderWidth,
       fontColor,
       fontFamily,
@@ -16240,8 +16323,13 @@ class Graph2 extends Paper {
       nodeWidth,
       tooltipBGColor,
       tooltipBorderColor,
+      tooltipFontColor,
+      tooltipFontSize,
       tooltipId,
-      tooltipMaxWidth
+      tooltipMaxWidth,
+      tooltipMinWidth,
+      tooltipOffset,
+      tooltipPadding
     } = { ...options, ...node.options };
     const x2 = DirectionConfig[direction].leafX({
       childrenSpacing: groupLeafNodesSpacing,
@@ -16279,33 +16367,58 @@ 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
+          );
         }
       });
     }
     if (enableTooltip) {
       const tooltipContent = tooltipTemplate ? tooltipTemplate(node[contentKey]) : nodeContent;
       group.on("mousemove", (e) => {
-        const styles2 = getTooltipStyles({
-          bgColor: tooltipBGColor,
-          borderColor: tooltipBorderColor,
-          maxWidth: tooltipMaxWidth,
-          padding: !tooltipTemplate ? 10 : 0,
-          x: e.pageX,
-          y: e.pageY
-        });
-        updateTooltip(graphInstance.chartContext, tooltipId, styles2, tooltipContent);
+        showTooltip(
+          graphInstance.chartContext,
+          {
+            bgColor: tooltipBGColor,
+            borderColor: tooltipBorderColor,
+            fontColor: tooltipFontColor,
+            fontSize: tooltipFontSize,
+            fontFamily,
+            maxWidth: tooltipMaxWidth,
+            minWidth: tooltipMinWidth,
+            offset: tooltipOffset,
+            padding: tooltipTemplate ? 0 : tooltipPadding,
+            tooltipId
+          },
+          tooltipContent,
+          e.pageX,
+          e.pageY,
+          graphInstance.getContainerElement()
+        );
       });
       group.on("mouseout", (e) => {
-        if (e.relatedTarget.tagName === "svg") {
-          updateTooltip(graphInstance.chartContext, tooltipId);
+        var _a;
+        if (((_a = e.relatedTarget) == null ? void 0 : _a.tagName) === "svg") {
+          hideTooltip(graphInstance.chartContext, tooltipId);
         }
       });
     }
@@ -16322,6 +16435,7 @@ class Graph2 extends Paper {
     const { options } = this;
     const {
       borderRadius,
+      containerClassName,
       contentKey,
       direction,
       enableExpandCollapse,
@@ -16346,7 +16460,12 @@ class Graph2 extends Paper {
       tooltipBGColor,
       tooltipBorderColor,
       tooltipId,
-      tooltipMaxWidth
+      tooltipFontColor,
+      tooltipFontSize,
+      tooltipMaxWidth,
+      tooltipMinWidth,
+      tooltipOffset,
+      tooltipPadding
     } = { ...options, ...node.options };
     const { height: height2, width: width2, x: x2, y: y2 } = node;
     const graphInstance = this;
@@ -16378,33 +16497,58 @@ 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
+          );
         }
       });
     }
     if (enableTooltip) {
       const tooltipContent = tooltipTemplate ? tooltipTemplate(node[contentKey]) : nodeContent;
       group.on("mousemove", (e) => {
-        const styles = getTooltipStyles({
-          bgColor: tooltipBGColor,
-          borderColor: tooltipBorderColor,
-          maxWidth: tooltipMaxWidth,
-          padding: !tooltipTemplate ? 10 : 0,
-          x: e.pageX,
-          y: e.pageY
-        });
-        updateTooltip(graphInstance.chartContext, tooltipId, styles, tooltipContent);
+        showTooltip(
+          graphInstance.chartContext,
+          {
+            bgColor: tooltipBGColor,
+            borderColor: tooltipBorderColor,
+            fontColor: tooltipFontColor,
+            fontSize: tooltipFontSize,
+            fontFamily,
+            maxWidth: tooltipMaxWidth,
+            minWidth: tooltipMinWidth,
+            offset: tooltipOffset,
+            padding: tooltipTemplate ? 0 : tooltipPadding,
+            tooltipId
+          },
+          tooltipContent,
+          e.pageX,
+          e.pageY,
+          graphInstance.getContainerElement()
+        );
       });
       group.on("mouseout", (e) => {
-        if (e.relatedTarget.tagName === "svg") {
-          updateTooltip(graphInstance.chartContext, tooltipId);
+        var _a2;
+        if (((_a2 = e.relatedTarget) == null ? void 0 : _a2.tagName) === "svg") {
+          hideTooltip(graphInstance.chartContext, tooltipId);
         }
       });
     }
@@ -16458,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);