gantt-lib 0.71.1 → 0.72.0

package/dist/index.mjs

@@ -1862,10 +1862,10 @@ var calculateMilestoneGeometry = (taskDate, monthStart, dayWidth, size = 14) =>
 };
 var calculateMilestoneConnectionBounds = (dayLeft, dayWidth, size = 14) => {
   const halfDiagonal = Math.round(size / Math.SQRT2);
-  const visualNudge = 2;
+  const centerX = Math.round(dayLeft + dayWidth / 2);
   return {
-    left: dayLeft + halfDiagonal + visualNudge,
-    right: dayLeft + dayWidth - halfDiagonal - visualNudge
+    left: centerX - halfDiagonal,
+    right: centerX + halfDiagonal
   };
 };
 var resolveTaskHorizontalGeometry = (task, monthStart, dayWidth, override) => {
@@ -1874,19 +1874,32 @@ var resolveTaskHorizontalGeometry = (task, monthStart, dayWidth, override) => {
   if (task.type === "milestone") {
     const size = 14;
     if (override) {
-      return calculateMilestoneConnectionBounds(override.left, dayWidth, size);
+      const bounds2 = calculateMilestoneConnectionBounds(override.left, dayWidth, size);
+      return {
+        ...bounds2,
+        centerX: Math.round(override.left + dayWidth / 2)
+      };
     }
     const bar2 = calculateTaskBar(startDate, startDate, monthStart, dayWidth);
-    return calculateMilestoneConnectionBounds(bar2.left, dayWidth, size);
+    const bounds = calculateMilestoneConnectionBounds(bar2.left, dayWidth, size);
+    return {
+      ...bounds,
+      centerX: Math.round(bar2.left + dayWidth / 2)
+    };
   }
   if (override) {
     return {
       left: override.left,
-      right: override.left + override.width
+      right: override.left + override.width,
+      centerX: Math.round(override.left + override.width / 2)
     };
   }
   const bar = calculateTaskBar(startDate, endDate, monthStart, dayWidth);
-  return { left: bar.left, right: bar.left + bar.width };
+  return {
+    left: bar.left,
+    right: bar.left + bar.width,
+    centerX: Math.round(bar.left + bar.width / 2)
+  };
 };
 var pixelsToDate = (pixels, monthStart, dayWidth) => {
   const days = Math.round(pixels / dayWidth);
@@ -3221,6 +3234,7 @@ var DependencyLines = React5.memo(({
       positions.set(task.id, {
         left: computed.left,
         right: computed.right,
+        centerX: computed.centerX,
         rowTop: index * rowHeight,
         isVirtual: false
       });
@@ -3239,6 +3253,7 @@ var DependencyLines = React5.memo(({
         positions.set(task.id, {
           left: computed.left,
           right: computed.right,
+          centerX: computed.centerX,
           rowTop: ancestorPosition.rowTop,
           isVirtual: true
         });
@@ -3289,12 +3304,12 @@ var DependencyLines = React5.memo(({
         fromY = predecessor.rowTop + rowHeight - 10;
         toY = successor.rowTop + 6;
       }
-      let fromX = edge.type === "SS" || edge.type === "SF" ? predecessor.left : predecessor.right;
-      const toX = edge.type === "FF" || edge.type === "SF" ? successor.right : successor.left;
+      let fromX = predecessorTask && isMilestoneTask(predecessorTask) ? predecessor.centerX : edge.type === "SS" || edge.type === "SF" ? predecessor.left : predecessor.right;
+      const toX = successorTask && isMilestoneTask(successorTask) ? successor.centerX : edge.type === "FF" || edge.type === "SF" ? successor.right : successor.left;
       const stackedMilestonesSameDay = Boolean(
         predecessorTask && successorTask && isMilestoneTask(predecessorTask) && isMilestoneTask(successorTask) && edge.lag === 0 && new Date(predecessorTask.startDate).toISOString().split("T")[0] === new Date(successorTask.startDate).toISOString().split("T")[0] && predecessor.rowTop !== successor.rowTop && edge.type === "FS"
       );
-      const finalToX = stackedMilestonesSameDay ? Math.round(((predecessor.left + predecessor.right) / 2 + (successor.left + successor.right) / 2) / 2) : toX;
+      const finalToX = stackedMilestonesSameDay ? Math.round((predecessor.centerX + successor.centerX) / 2) : toX;
       if (stackedMilestonesSameDay) {
         fromX = finalToX;
       }
@@ -7134,6 +7149,337 @@ var TaskList = ({
   );
 };
 
+// src/components/GanttChart/print.ts
+function getPrintDocumentTitle({ header, title, fileName }) {
+  return header?.projectName || title || header?.serviceName || fileName || "Gantt chart";
+}
+function formatHeaderExportDate(exportDate) {
+  if (!exportDate) return null;
+  if (typeof exportDate === "string") return exportDate;
+  return new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  }).format(exportDate);
+}
+function createPrintHeader(targetDocument, title, header) {
+  const headerElement = targetDocument.createElement("div");
+  headerElement.className = "gantt-print-header";
+  if (header?.logoUrl) {
+    const logoParent = targetDocument.createElement("span");
+    logoParent.className = "gantt-print-linkWrap";
+    const logo = targetDocument.createElement("img");
+    logo.className = "gantt-print-logo";
+    logo.src = header.logoUrl;
+    logo.alt = header.serviceName || title;
+    logoParent.appendChild(logo);
+    if (header.logoHref) {
+      const logoLink = targetDocument.createElement("a");
+      logoLink.href = header.logoHref;
+      logoLink.target = "_blank";
+      logoLink.rel = "noopener noreferrer";
+      logoLink.className = "gantt-print-linkOverlay";
+      logoLink.setAttribute("aria-label", header.serviceName || title);
+      logoParent.appendChild(logoLink);
+    }
+    headerElement.appendChild(logoParent);
+  }
+  const serviceName = header?.serviceName;
+  if (serviceName) {
+    const service = targetDocument.createElement("span");
+    service.className = header?.serviceHref ? "gantt-print-serviceName gantt-print-linkWrap" : "gantt-print-serviceName";
+    if (header.serviceHref) {
+      const serviceText = targetDocument.createElement("span");
+      serviceText.textContent = serviceName;
+      service.appendChild(serviceText);
+      const serviceLink = targetDocument.createElement("a");
+      serviceLink.href = header.serviceHref;
+      serviceLink.target = "_blank";
+      serviceLink.rel = "noopener noreferrer";
+      serviceLink.className = "gantt-print-linkOverlay";
+      serviceLink.setAttribute("aria-label", serviceName);
+      service.appendChild(serviceLink);
+    } else {
+      service.textContent = serviceName;
+    }
+    headerElement.appendChild(service);
+    const separator = targetDocument.createElement("span");
+    separator.className = "gantt-print-separator";
+    separator.textContent = "/";
+    headerElement.appendChild(separator);
+  }
+  const project = targetDocument.createElement("span");
+  project.className = "gantt-print-projectName";
+  project.textContent = header?.projectName || title;
+  headerElement.appendChild(project);
+  const exportDate = formatHeaderExportDate(header?.exportDate);
+  if (exportDate) {
+    const date = targetDocument.createElement("span");
+    date.className = "gantt-print-headerDate";
+    date.textContent = exportDate;
+    headerElement.appendChild(date);
+  }
+  return headerElement;
+}
+function copyGanttCssVariables(sourceElement, targetElement) {
+  const computedStyle = window.getComputedStyle(sourceElement);
+  for (const propertyName of Array.from(computedStyle)) {
+    if (!propertyName.startsWith("--gantt-")) continue;
+    const value = computedStyle.getPropertyValue(propertyName);
+    if (value) {
+      targetElement.style.setProperty(propertyName, value);
+    }
+  }
+}
+async function copyDocumentStyles(sourceDocument, targetDocument) {
+  const headNodes = Array.from(
+    sourceDocument.querySelectorAll('style, link[rel="stylesheet"]')
+  );
+  const pendingLoads = headNodes.map((node) => new Promise((resolve) => {
+    if (node instanceof HTMLStyleElement) {
+      const style = targetDocument.createElement("style");
+      style.textContent = node.textContent;
+      targetDocument.head.appendChild(style);
+      resolve();
+      return;
+    }
+    if (node instanceof HTMLLinkElement && node.href) {
+      const link = targetDocument.createElement("link");
+      link.rel = "stylesheet";
+      link.href = node.href;
+      if (node.media) {
+        link.media = node.media;
+      }
+      link.onload = () => resolve();
+      link.onerror = () => resolve();
+      targetDocument.head.appendChild(link);
+      return;
+    }
+    resolve();
+  }));
+  await Promise.all(pendingLoads);
+}
+function createPrintStyle(targetDocument, orientation) {
+  const style = targetDocument.createElement("style");
+  style.textContent = `
+    @page {
+      size: ${orientation};
+      margin: 12mm;
+    }
+
+    html, body {
+      margin: 0;
+      padding: 0;
+      background: #ffffff;
+    }
+
+    body {
+      color: #111827;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+
+    .gantt-print-root,
+    .gantt-print-root * {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+      box-sizing: border-box;
+    }
+
+    .gantt-print-root {
+      padding: 16px 20px 24px;
+      width: max-content;
+      min-width: 100%;
+    }
+
+    .gantt-print-header {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+      margin: 0 0 16px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid #e5e7eb;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .gantt-print-logo {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+      flex: 0 0 auto;
+    }
+
+    .gantt-print-linkWrap {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      flex: 0 0 auto;
+    }
+
+    .gantt-print-linkOverlay,
+    .gantt-print-linkOverlay:visited,
+    .gantt-print-linkOverlay:hover,
+    .gantt-print-linkOverlay:active {
+      position: absolute;
+      inset: 0;
+      color: transparent !important;
+      background: transparent !important;
+      text-decoration: none !important;
+      border: 0 !important;
+      outline: none !important;
+      font-size: 0 !important;
+      line-height: 0 !important;
+    }
+
+    .gantt-print-serviceName {
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 1.2;
+      color: #111827;
+    }
+
+    .gantt-print-separator {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.2;
+      color: #6b7280;
+    }
+
+    .gantt-print-projectName {
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.2;
+      color: #111827;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .gantt-print-headerDate {
+      flex: 0 0 auto;
+      font-size: 15px;
+      font-weight: 500;
+      white-space: nowrap;
+      color: #6b7280;
+    }
+
+    .gantt-print-root .gantt-container,
+    .gantt-print-root .gantt-scrollContainer,
+    .gantt-print-root .gantt-scrollContent,
+    .gantt-print-root .gantt-chartSurface,
+    .gantt-print-root .gantt-taskArea {
+      overflow: visible !important;
+      height: auto !important;
+      max-height: none !important;
+    }
+
+    .gantt-print-root .gantt-container {
+      width: max-content;
+      min-width: 100%;
+      border-radius: 0;
+    }
+
+    .gantt-print-root .gantt-scrollContainer {
+      cursor: default !important;
+    }
+
+    .gantt-print-root .gantt-stickyHeader,
+    .gantt-print-root .gantt-tl-header {
+      position: static !important;
+      top: auto !important;
+    }
+
+    .gantt-print-root .gantt-tl-overlay {
+      left: auto !important;
+    }
+
+    .gantt-print-root .gantt-tl-overlay-shadowed,
+    .gantt-print-root .gantt-tl-row:hover,
+    .gantt-print-root .gantt-tr-row:hover,
+    .gantt-print-root .gantt-tr-taskBar:hover {
+      box-shadow: none !important;
+    }
+
+    .gantt-print-root .gantt-tl-drag-handle,
+    .gantt-print-root .gantt-tl-add-btn,
+    .gantt-print-root .gantt-tl-name-actions,
+    .gantt-print-root .gantt-tl-context-menu,
+    .gantt-print-root .gantt-tl-dep-add,
+    .gantt-print-root .gantt-tl-dep-delete-label,
+    .gantt-print-root .gantt-tl-dep-source-picker,
+    .gantt-print-root .gantt-tl-dep-type-menu,
+    .gantt-print-root .gantt-tl-dep-type-trigger,
+    .gantt-print-root .gantt-tl-number-steppers,
+    .gantt-print-root .gantt-tr-resizeHandle {
+      display: none !important;
+    }
+  `;
+  targetDocument.head.appendChild(style);
+}
+function waitForNextPaint(printWindow) {
+  return new Promise((resolve) => {
+    if (typeof printWindow.requestAnimationFrame === "function") {
+      printWindow.requestAnimationFrame(() => {
+        printWindow.requestAnimationFrame(() => resolve());
+      });
+      return;
+    }
+    printWindow.setTimeout(() => resolve(), 50);
+  });
+}
+function createPrintFrame(sourceDocument) {
+  const iframe = sourceDocument.createElement("iframe");
+  iframe.setAttribute("aria-hidden", "true");
+  iframe.style.position = "fixed";
+  iframe.style.right = "0";
+  iframe.style.bottom = "0";
+  iframe.style.width = "0";
+  iframe.style.height = "0";
+  iframe.style.border = "0";
+  iframe.style.opacity = "0";
+  iframe.style.pointerEvents = "none";
+  sourceDocument.body.appendChild(iframe);
+  return iframe;
+}
+async function printGanttChart({
+  sourceDocument,
+  sourceContainer,
+  printContent,
+  header,
+  title,
+  fileName,
+  orientation
+}) {
+  const iframe = createPrintFrame(sourceDocument);
+  try {
+    const printWindow = iframe.contentWindow;
+    const printDocument = iframe.contentDocument;
+    if (!printWindow || !printDocument) {
+      throw new Error("Unable to create print frame");
+    }
+    const printTitle = getPrintDocumentTitle({ header, title, fileName });
+    printDocument.open();
+    printDocument.write('<!doctype html><html><head><meta charset="utf-8" /></head><body></body></html>');
+    printDocument.close();
+    printDocument.title = printTitle;
+    await copyDocumentStyles(sourceDocument, printDocument);
+    createPrintStyle(printDocument, orientation);
+    const root = printDocument.createElement("div");
+    root.className = "gantt-print-root";
+    copyGanttCssVariables(sourceContainer, root);
+    root.appendChild(createPrintHeader(printDocument, printTitle, header));
+    root.appendChild(printContent);
+    printDocument.body.appendChild(root);
+    await waitForNextPaint(printWindow);
+    printWindow.focus();
+    printWindow.print();
+  } finally {
+    window.setTimeout(() => {
+      iframe.remove();
+    }, 1e3);
+  }
+}
+
 // src/components/GanttChart/GanttChart.tsx
 import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var SCROLL_TO_ROW_CONTEXT_ROWS = 2;
@@ -7174,7 +7520,9 @@ function GanttChartInner(props, ref) {
     showChart = true,
     additionalColumns
   } = props;
+  const containerRef = useRef7(null);
   const scrollContainerRef = useRef7(null);
+  const scrollContentRef = useRef7(null);
   const [selectedTaskId, setSelectedTaskId] = useState7(null);
   const [taskListHasRightShadow, setTaskListHasRightShadow] = useState7(false);
   const [selectedChip, setSelectedChip] = useState7(null);
@@ -7456,6 +7804,40 @@ function GanttChartInner(props, ref) {
     if (externalCollapsedParentIds) return;
     setInternalCollapsedParentIds(/* @__PURE__ */ new Set());
   }, [externalCollapsedParentIds]);
+  const exportToPdf = useCallback6(async (options) => {
+    const sourceContainer = containerRef.current;
+    const sourceContent = scrollContentRef.current;
+    if (!sourceContainer || !sourceContent || typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    const includeTaskList = options?.includeTaskList ?? showTaskList;
+    const includeChart = options?.includeChart ?? showChart;
+    if (!includeTaskList && !includeChart) {
+      return;
+    }
+    const printContent = sourceContent.cloneNode(true);
+    const taskListClone = printContent.querySelector(".gantt-tl-overlay");
+    const chartClone = printContent.querySelector(".gantt-chartSurface");
+    if (includeTaskList) {
+      taskListClone?.classList.remove("gantt-tl-hidden", "gantt-tl-overlay-shadowed");
+    } else {
+      taskListClone?.remove();
+    }
+    if (includeChart) {
+      chartClone?.classList.remove("gantt-chart-hidden");
+    } else {
+      chartClone?.remove();
+    }
+    await printGanttChart({
+      sourceDocument: document,
+      sourceContainer,
+      printContent,
+      header: options?.header,
+      title: options?.title,
+      fileName: options?.fileName,
+      orientation: options?.orientation ?? "landscape"
+    });
+  }, [showTaskList, showChart]);
   useImperativeHandle(
     ref,
     () => ({
@@ -7463,9 +7845,10 @@ function GanttChartInner(props, ref) {
       scrollToTask,
       scrollToRow,
       collapseAll: handleCollapseAll,
-      expandAll: handleExpandAll
+      expandAll: handleExpandAll,
+      exportToPdf
     }),
-    [scrollToToday, scrollToTask, scrollToRow, handleCollapseAll, handleExpandAll]
+    [scrollToToday, scrollToTask, scrollToRow, handleCollapseAll, handleExpandAll, exportToPdf]
   );
   function getTaskDepth(taskId, tasks2) {
     let depth = 0;
@@ -7593,14 +7976,14 @@ function GanttChartInner(props, ref) {
       window.removeEventListener("mouseup", handlePanEnd);
     };
   }, []);
-  return /* @__PURE__ */ jsx15("div", { className: "gantt-container", children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "gantt-container", children: /* @__PURE__ */ jsx15(
     "div",
     {
       ref: scrollContainerRef,
       className: "gantt-scrollContainer",
       style: { height: containerHeight ?? "auto", cursor: "grab" },
       onMouseDown: handlePanStart,
-      children: /* @__PURE__ */ jsxs12("div", { className: "gantt-scrollContent", children: [
+      children: /* @__PURE__ */ jsxs12("div", { ref: scrollContentRef, className: "gantt-scrollContent", children: [
         /* @__PURE__ */ jsx15(
           TaskList,
           {
@@ -7637,7 +8020,7 @@ function GanttChartInner(props, ref) {
             additionalColumns
           }
         ),
-        /* @__PURE__ */ jsxs12("div", { className: showChart ? "" : "gantt-chart-hidden", style: { minWidth: `${gridWidth}px`, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs12("div", { className: showChart ? "gantt-chartSurface" : "gantt-chartSurface gantt-chart-hidden", style: { minWidth: `${gridWidth}px`, flex: 1 }, children: [
           /* @__PURE__ */ jsx15("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ jsx15(
             TimeScaleHeader_default,
             {