apexgantt 3.5.0 → 3.6.1

package/README.md

@@ -46,6 +46,20 @@ const gantt = new ApexGantt(document.getElementById('gantt-container'), ganttOpt
 gantt.render();
 ```
 
+## Setting the License
+
+To use ApexGantt with a commercial license, set your license key before creating any chart instances:
+
+```js
+import ApexGantt from 'apexgantt';
+
+// set license key before creating any charts
+ApexGantt.setLicense('your-license-key');
+
+const gantt = new ApexGantt(document.getElementById('gantt-container'), ganttOptions);
+gantt.render();
+```
+
 ## ApexGantt Options
 
 The layout can be configured by either setting the properties in the table below by passing a second arg to ApexGantt with these properties set. The latter takes precedence.

package/apexgantt.es.min.js

@@ -5919,6 +5919,109 @@ registerMorphableType([
   Point
 ]);
 makeMorphable();
+const ToolbarStyle = `
+  #toolbar {
+    display: flex;
+    gap: 5px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 100;
+  }
+  
+  .toolbar-item {
+    align-items: center;
+    background-color: var(--toolbar-bg-color, #FFFFFF);
+    border: 1px solid var(--toolbar-border-color, #BCBCBC);
+    cursor: pointer;
+    display: flex;
+    height: 30px;
+    justify-content: center;
+    width: 30px;
+    border-radius: 3px;
+    transition: all 0.2s ease;
+    position: relative;
+  }
+  
+  .toolbar-item:hover {
+    background-color: var(--toolbar-hover-bg-color, #f8f9fa);
+    border-color: var(--toolbar-border-color, #999);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .toolbar-item:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+  
+  .toolbar-item:focus {
+    outline: none;
+    border-color: var(--button-bg-color, #0066cc);
+    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
+  }
+  
+  .toolbar-item img {
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+    filter: var(--toolbar-icon-filter, none);
+  }
+  
+  .toolbar-item[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+  
+  /* Tooltip styles */
+  .toolbar-item::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: -35px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--tooltip-bg-color, #333);
+    color: var(--tooltip-text-color, white);
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 1000;
+  }
+  
+  .toolbar-item::before {
+    content: '';
+    position: absolute;
+    bottom: -25px;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-bottom-color: var(--tooltip-bg-color, #333);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+    z-index: 1000;
+  }
+  
+  .toolbar-item:hover::after,
+  .toolbar-item:hover::before {
+    opacity: 1;
+  }
+  
+  /* Shadow DOM specific adjustments */
+  :host #toolbar {
+    display: flex;
+    gap: 5px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 100;
+  }
+`;
 const _Watermark = class _Watermark {
   /**
    * Add watermark to a container element
@@ -6465,14 +6568,12 @@ const getCursorFollowingTooltipStyles = ({
   fontFamily,
   fontSize,
   fontWeight,
-  maxWidth = 300,
+  maxWidth,
   padding,
   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;");
@@ -6481,6 +6582,10 @@ const getCursorFollowingTooltipStyles = ({
   if (borderColor) {
     styles.push(`border: 1px solid ${borderColor};`);
   }
+  if (maxWidth) {
+    styles.push(`width: ${maxWidth}px;`);
+    styles.push(`max-width: ${maxWidth}px;`);
+  }
   styles.push("border-radius: 6px;");
   styles.push("box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);");
   styles.push("transition: opacity 0.2s ease;");
@@ -15883,109 +15988,6 @@ const TooltipStyle = `
     margin-bottom: 0;
   }
 `;
-const ToolbarStyle = `
-  #toolbar {
-    display: flex;
-    gap: 5px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 100;
-  }
-  
-  .toolbar-item {
-    align-items: center;
-    background-color: var(--toolbar-bg-color, #FFFFFF);
-    border: 1px solid var(--toolbar-border-color, #BCBCBC);
-    cursor: pointer;
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    width: 30px;
-    border-radius: 3px;
-    transition: all 0.2s ease;
-    position: relative;
-  }
-  
-  .toolbar-item:hover {
-    background-color: var(--toolbar-hover-bg-color, #f8f9fa);
-    border-color: var(--toolbar-border-color, #999);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .toolbar-item:active {
-    transform: translateY(0);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  }
-  
-  .toolbar-item:focus {
-    outline: none;
-    border-color: var(--button-bg-color, #0066cc);
-    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
-  }
-  
-  .toolbar-item img {
-    width: 16px;
-    height: 16px;
-    pointer-events: none;
-    filter: var(--toolbar-icon-filter, none);
-  }
-  
-  .toolbar-item[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  
-  /* Tooltip styles */
-  .toolbar-item::after {
-    content: attr(data-tooltip);
-    position: absolute;
-    bottom: -35px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--tooltip-bg-color, #333);
-    color: var(--tooltip-text-color, white);
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    white-space: nowrap;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    z-index: 1000;
-  }
-  
-  .toolbar-item::before {
-    content: '';
-    position: absolute;
-    bottom: -25px;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 5px solid transparent;
-    border-bottom-color: var(--tooltip-bg-color, #333);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease;
-    z-index: 1000;
-  }
-  
-  .toolbar-item:hover::after,
-  .toolbar-item:hover::before {
-    opacity: 1;
-  }
-  
-  /* Shadow DOM specific adjustments */
-  :host #toolbar {
-    display: flex;
-    gap: 5px;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 100;
-  }
-`;
 const DefaultOptions = {
   paddingX: 20,
   paddingY: 15
@@ -17188,7 +17190,7 @@ class ApexGantt extends BaseChart {
     }
   }
   disableHeaderMousewheelScroll() {
-    const timelineHeader = this.chartContext.querySelector(".timeline-header");
+    const timelineHeader = this.element.querySelector(".timeline-header");
     if (!timelineHeader) {
       return;
     }
@@ -17273,16 +17275,16 @@ class ApexGantt extends BaseChart {
     this.chartContext.addEventListener("splitview-resize", this.splitBarResizeHandler);
   }
   positionHorizontalScrollbar() {
-    const horizontalScroll = this.chartContext.querySelector(".timeline-horizontal-scroll");
-    const ganttContainer = this.chartContext.querySelector(".gantt-container");
-    const tasksContainer = this.chartContext.querySelector(".tasks-container");
+    const horizontalScroll = this.element.querySelector(".timeline-horizontal-scroll");
+    const ganttContainer = this.element.querySelector(".gantt-container");
+    const tasksContainer = this.element.querySelector(".tasks-container");
     if (!horizontalScroll || !ganttContainer) {
       console.warn("Missing elements for scrollbar positioning");
       return;
     }
     void ganttContainer.offsetHeight;
     const tasksWidth = tasksContainer ? tasksContainer.offsetWidth : 0;
-    const splitBar = this.chartContext.querySelector(".split-bar-container");
+    const splitBar = this.element.querySelector(".split-bar-container");
     const splitBarWidth = splitBar ? splitBar.offsetWidth : 0;
     const totalOffset = tasksWidth + splitBarWidth + 2;
     const computedStyle = window.getComputedStyle(this.element);
@@ -17294,8 +17296,8 @@ class ApexGantt extends BaseChart {
     horizontalScroll.style.width = `${Math.max(0, availableWidth)}px`;
   }
   compensateForScrollbar() {
-    const bodyWrapper = this.chartContext.querySelector(".tasks-body-wrapper");
-    const headerContainer = this.chartContext.querySelector(".tasks-header");
+    const bodyWrapper = this.element.querySelector(".tasks-body-wrapper");
+    const headerContainer = this.element.querySelector(".tasks-header");
     if (!bodyWrapper || !headerContainer) {
       return;
     }
@@ -17308,9 +17310,9 @@ class ApexGantt extends BaseChart {
     }
   }
   setupTimelineHorizontalScroll() {
-    const horizontalScroll = this.chartContext.querySelector(".timeline-horizontal-scroll");
-    const timelineHeader = this.chartContext.querySelector(".timeline-header");
-    const timelineBodyWrapper = this.chartContext.querySelector(".timeline-body-wrapper");
+    const horizontalScroll = this.element.querySelector(".timeline-horizontal-scroll");
+    const timelineHeader = this.element.querySelector(".timeline-header");
+    const timelineBodyWrapper = this.element.querySelector(".timeline-body-wrapper");
     if (!horizontalScroll || !timelineHeader || !timelineBodyWrapper) {
       return;
     }
@@ -17437,15 +17439,15 @@ class ApexGantt extends BaseChart {
     const tasksWithDependency = this.dataManager.getFlatVisibleTasks().filter((task) => !!task.dependency).map((task) => {
       const sourceSelector = `.bar-container [data-taskid="${task.dependency}"][data-chart-instance="${chartInstanceId}"]`;
       const targetSelector = `.bar-container [data-taskid="${task.id}"][data-chart-instance="${chartInstanceId}"]`;
-      const source = this.chartContext.querySelector(sourceSelector);
-      const target = this.chartContext.querySelector(targetSelector);
+      const source = this.element.querySelector(sourceSelector);
+      const target = this.element.querySelector(targetSelector);
       return {
         id: `${task.dependency}-${task.id}`,
         source,
         target
       };
     }).filter((edge) => edge.source && edge.target);
-    const timelineBody = this.chartContext.querySelector(".timeline-body");
+    const timelineBody = this.element.querySelector(".timeline-body");
     if (!timelineBody) {
       console.warn(`[${chartInstanceId}] Timeline body not found for arrows`);
       return;
@@ -17736,7 +17738,7 @@ class ApexGantt extends BaseChart {
     return this.isColorDark(currentBgColor) ? "dark" : "light";
   }
   fillEmptyRowsAfterRender() {
-    const ganttContainer = this.chartContext.querySelector(".gantt-container");
+    const ganttContainer = this.element.querySelector(".gantt-container");
     const timelineBody = ganttContainer == null ? void 0 : ganttContainer.querySelector(".timeline-body");
     const tasksBody = ganttContainer == null ? void 0 : ganttContainer.querySelector(".tasks-data-container");
     if (!ganttContainer || !timelineBody || !tasksBody) {
@@ -17884,9 +17886,9 @@ class ApexGantt extends BaseChart {
    * update the horizontal scrollbar's content width to match timeline width
    */
   updateHorizontalScrollbarContent() {
-    const horizontalScroll = this.chartContext.querySelector(".timeline-horizontal-scroll");
+    const horizontalScroll = this.element.querySelector(".timeline-horizontal-scroll");
     const scrollContent = horizontalScroll == null ? void 0 : horizontalScroll.querySelector(".timeline-horizontal-scroll-content");
-    const timelineBody = this.chartContext.querySelector(".timeline-body");
+    const timelineBody = this.element.querySelector(".timeline-body");
     if (!horizontalScroll || !scrollContent || !timelineBody) {
       console.warn("Scrollbar update: Missing elements", {
         horizontalScroll: !!horizontalScroll,