@ganttloom/gantt-core 0.2.0 → 0.2.1

package/README.md

@@ -1,5 +1,8 @@
 # @ganttloom/gantt-core
 
+[![npm](https://img.shields.io/npm/v/%40ganttloom%2Fgantt-core)](https://www.npmjs.com/package/@ganttloom/gantt-core)
+[![license](https://img.shields.io/npm/l/%40ganttloom%2Fgantt-core)](../../LICENSE)
+
 Framework-agnostic Gantt chart engine: layout, SVG rendering, drag/resize/link
 interactions, grouping, critical path, undo/redo, and more — zero runtime
 dependencies. If you're using React, prefer
@@ -381,6 +384,54 @@ in addition to the JS `theme` option (`Partial<GanttTheme>`) — style via
 either, or both. `colorScheme: "auto"` (the default) follows
 `prefers-color-scheme` live.
 
+To override a token via CSS, target `.gantt-root` itself (the element the
+chart renders into) rather than an ancestor — the defaults are declared on
+`.gantt-root`, and a same-element declaration always wins over one inherited
+from a parent, regardless of specificity:
+
+```css
+.gantt-root {
+  --gantt-bar-color: #16a34a;
+  --gantt-critical-color: #ea580c;
+}
+```
+
+### Styling structural elements (buttons, cells, rows)
+
+Beyond color tokens, every structural/interactive element the chart renders
+has a stable, undocumented-nowhere-else class name and **no inline styles
+and no `!important`** — so plain CSS targeting these classes has full
+control, same as any element you'd render yourself:
+
+| Class | What it is |
+|---|---|
+| `.gantt-toggle` | The expand/collapse button on a group row |
+| `.gantt-grid-header-cell` | A column header cell |
+| `.gantt-grid-cell` | A grid body cell |
+| `.gantt-grid-row` | A grid body row (has a default `:hover` background) |
+| `.gantt-rename-input` | The inline text input shown while renaming a task |
+
+For example, to make the expand/collapse toggle look like a small round
+button instead of bare text:
+
+```css
+.gantt-toggle {
+  border-radius: 999px;
+  padding: 2px 6px;
+  background: var(--gantt-grid-color, #e5e7eb);
+}
+.gantt-toggle:hover {
+  background: var(--gantt-bar-color, #3b82f6);
+  color: #fff;
+}
+```
+
+None of this is specific to the library's own chrome, either — anything
+*you* render, like the playground demo's toolbar (`apps/playground`,
+`apps/vue-playground`), is plain HTML/CSS in your own app code with no
+library involvement at all, so it's exactly as customizable as any other
+element on your page.
+
 ## API surface
 
 The full, current type/function list is re-exported from

package/dist/index.cjs

@@ -189,7 +189,6 @@ function computeCriticalPath(tasks, dependencies) {
   }
   for (const e of edges) {
     outgoing.get(e.fromId)?.push(e);
-    incoming.get(e.fromId) === void 0 ? void 0 : void 0;
     incoming.get(e.toId)?.push(e);
   }
   const inDegree = /* @__PURE__ */ new Map();
@@ -274,11 +273,9 @@ function computeCriticalPath(tasks, dependencies) {
       criticalLinks.add(linkKey(e.fromId, e.toId));
     }
   }
-  const taskMap = new Map(tasks.map((t) => [t.id, t]));
   for (const task of tasks) {
     if (!task.isGroup) continue;
     let hasCriticalDescendant = false;
-    let cur = task;
     const descendantStack = [task.id];
     const visited = /* @__PURE__ */ new Set();
     while (descendantStack.length > 0) {
@@ -293,8 +290,6 @@ function computeCriticalPath(tasks, dependencies) {
       }
     }
     if (hasCriticalDescendant) criticalTasks.add(task.id);
-    void cur;
-    void taskMap;
   }
   return { criticalTasks, criticalLinks };
 }
@@ -689,6 +684,9 @@ function flatten(roots) {
   }
   return out;
 }
+function estimateTextWidth(text, fontSize) {
+  return text.length * fontSize * 0.62;
+}
 function anchorPoint(bar, side) {
   const y = bar.y + bar.height / 2;
   return side === "start" ? { x: bar.x, y } : { x: bar.x + bar.width, y };
@@ -814,8 +812,9 @@ function computeLayout(input) {
     const end = row.node.computedEnd;
     if (!start || !end) return;
     const x = dateToX(start, paddedStart, viewMode, columnWidth);
-    const width2 = Math.max(0, dateToX(end, paddedStart, viewMode, columnWidth) - x);
-    if (!Number.isFinite(x) || !Number.isFinite(width2)) return;
+    const rawWidth = Math.max(0, dateToX(end, paddedStart, viewMode, columnWidth) - x);
+    if (!Number.isFinite(x) || !Number.isFinite(rawWidth)) return;
+    const width2 = rawWidth > 0 ? Math.max(rawWidth, 3) : rawWidth;
     const progress = task.progress !== void 0 ? Math.min(100, Math.max(0, task.progress)) : autoRollupProgress ? row.node.computedProgress : 0;
     const barHeight = theme.barHeight;
     const barY = y + (theme.rowHeight - barHeight) / 2;
@@ -923,7 +922,13 @@ function computeLayout(input) {
   })).filter((m) => Number.isFinite(m.x));
   let width = 0;
   for (const tick of ticks) width = Math.max(width, tick.x);
-  for (const bar of bars) width = Math.max(width, bar.x + bar.width);
+  for (const bar of bars) {
+    width = Math.max(width, bar.x + bar.width);
+    if (bar.label) {
+      const labelOffset = bar.isMilestone ? theme.barHeight * 0.4 + 8 : bar.width + 6;
+      width = Math.max(width, bar.x + labelOffset + estimateTextWidth(bar.label, theme.fontSize));
+    }
+  }
   width += columnWidth;
   const height = rows.length * theme.rowHeight;
   return {
@@ -1422,7 +1427,9 @@ var GanttRenderer = class {
     }
   }
   renderMarkers(group, model) {
-    for (const marker of model.markers) {
+    const sorted = [...model.markers].sort((a, b) => a.x - b.x);
+    let defs = null;
+    sorted.forEach((marker, i) => {
       const line = svgEl("line");
       line.setAttribute("x1", String(marker.x));
       line.setAttribute("x2", String(marker.x));
@@ -1434,16 +1441,33 @@ var GanttRenderer = class {
       line.dataset.ganttMarker = marker.label;
       group.appendChild(line);
       if (marker.label) {
+        const nextX = sorted[i + 1]?.x ?? model.width;
+        const cellWidth = Math.max(0, nextX - marker.x);
+        if (!defs) {
+          defs = svgEl("defs");
+          group.insertBefore(defs, group.firstChild);
+        }
+        const clipId = `${this.markerDefsId}-marker-${i}`;
+        const clipPath = svgEl("clipPath");
+        clipPath.setAttribute("id", clipId);
+        const clipRect = svgEl("rect");
+        clipRect.setAttribute("x", String(marker.x));
+        clipRect.setAttribute("y", "0");
+        clipRect.setAttribute("width", String(cellWidth));
+        clipRect.setAttribute("height", String(model.height));
+        clipPath.appendChild(clipRect);
+        defs.appendChild(clipPath);
         const label = svgEl("text");
         label.setAttribute("x", String(marker.x + 4));
         label.setAttribute("y", "12");
+        label.setAttribute("clip-path", `url(#${clipId})`);
         label.setAttribute("fill", marker.color);
         label.setAttribute("font-size", String(model.theme.fontSize));
         label.setAttribute("font-family", model.theme.fontFamily);
         label.textContent = marker.label;
         group.appendChild(label);
       }
-    }
+    });
   }
   renderHeader(model) {
     let headerGroup = this.svg.querySelector(".gantt-header-group");
@@ -1457,16 +1481,32 @@ var GanttRenderer = class {
     bg.setAttribute("height", String(model.headerHeight));
     bg.style.fill = themedFill("backgroundColor", model.theme.backgroundColor);
     headerGroup.appendChild(bg);
-    for (const tick of model.ticks) {
+    const defs = svgEl("defs");
+    const ticks = model.ticks;
+    for (let i = 0; i < ticks.length; i++) {
+      const tick = ticks[i];
+      const cellWidth = (ticks[i + 1]?.x ?? model.width) - tick.x;
+      const clipId = `${this.markerDefsId}-tick-${i}`;
+      const clipPath = svgEl("clipPath");
+      clipPath.setAttribute("id", clipId);
+      const clipRect = svgEl("rect");
+      clipRect.setAttribute("x", String(tick.x));
+      clipRect.setAttribute("y", "0");
+      clipRect.setAttribute("width", String(Math.max(0, cellWidth)));
+      clipRect.setAttribute("height", String(model.headerHeight));
+      clipPath.appendChild(clipRect);
+      defs.appendChild(clipPath);
       const text = svgEl("text");
       text.setAttribute("x", String(tick.x + 4));
       text.setAttribute("y", String(model.headerHeight - 8));
+      text.setAttribute("clip-path", `url(#${clipId})`);
       text.style.fill = themedFill("textColor", model.theme.textColor);
       text.setAttribute("font-size", String(model.theme.fontSize));
       text.setAttribute("font-family", model.theme.fontFamily);
       text.textContent = tick.label;
       headerGroup.appendChild(text);
     }
+    headerGroup.insertBefore(defs, headerGroup.firstChild);
     this.svg.appendChild(headerGroup);
   }
   /**
@@ -2550,7 +2590,7 @@ var _GanttChart = class _GanttChart {
     const newStart = edge === "left" ? new Date(task.start.getTime() + dxMs) : task.start;
     const newEnd = edge === "right" ? new Date(task.end.getTime() + dxMs) : task.end;
     if (newEnd.getTime() <= newStart.getTime()) return;
-    let newSegments = task.segments?.map((s) => ({ ...s }));
+    const newSegments = task.segments?.map((s) => ({ ...s }));
     if (newSegments && newSegments.length > 0) {
       if (edge === "left") newSegments[0] = { ...newSegments[0], start: newStart };
       else newSegments[newSegments.length - 1] = { ...newSegments[newSegments.length - 1], end: newEnd };