gantt-lib 0.78.0 → 0.79.0

package/dist/styles.css

@@ -717,12 +717,24 @@
   pointer-events: none;
   overflow: visible;
 }
+.gantt-dependency-line {
+  pointer-events: visibleStroke;
+}
+.gantt-dependency-hit-area {
+  fill: none;
+  stroke: transparent;
+  stroke-width: 12;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: stroke;
+}
 .gantt-dependency-path {
   fill: none;
   stroke: var(--gantt-dependency-line-color, #666666);
   stroke-width: 1;
   stroke-linecap: round;
   stroke-linejoin: round;
+  pointer-events: none;
 }
 .gantt-dependency-virtual {
   stroke-dasharray: 4 2;
@@ -735,6 +747,14 @@
   stroke: #ef4444;
   stroke-width: 2;
 }
+.gantt-dependency-line:hover .gantt-dependency-hit-area {
+  stroke: var(--gantt-dependency-hover-background, rgba(239, 68, 68, 0.22));
+}
+.gantt-dependency-line:hover .gantt-dependency-path {
+  stroke: var(--gantt-dependency-hover-color, #ef4444);
+  stroke-width: 2;
+  marker-end: url(#arrowhead-hover);
+}
 .gantt-dependency-arrow polygon {
   fill: var(--gantt-dependency-line-color, #666666);
 }
@@ -1172,7 +1192,7 @@
   cursor: not-allowed;
 }
 .gantt-tl-cell-deps {
-  width: 90px;
+  width: 128px;
   flex-shrink: 0;
   flex-wrap: wrap;
   gap: 4px;
@@ -1362,23 +1382,90 @@
 .gantt-tl-dep-chip {
   display: inline-flex;
   align-items: center;
-  gap: 1px;
-  background-color: rgba(59, 130, 246, 0.12);
+  gap: 2px;
+  background-color: rgba(107, 114, 128, 0.12);
   border-radius: 6px;
-  padding: 4px 4px;
-  font-size: 0.7rem;
-  color: #1d4ed8;
+  padding: 3px 4px;
+  font-size: inherit;
+  color: #4b5563;
   white-space: nowrap;
   line-height: 14px;
   cursor: pointer;
-  min-width: 42px;
+  width: fit-content;
+  min-width: 22px;
   justify-content: center;
 }
-.gantt-tl-dep-chip-selected {
+.gantt-tl-dep-chip-with-number {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  padding: 3px 6px;
+}
+.gantt-tl-dep-chip-with-number:hover {
+  background-color: rgba(59, 130, 246, 0.12);
+}
+.gantt-tl-dep-chip-with-number:hover .gantt-tl-dep-chip-task-number,
+.gantt-tl-dep-chip-with-number:hover .gantt-tl-dep-chip svg,
+.gantt-tl-dep-chip-with-number:hover .gantt-tl-dep-chip-lag {
+  color: #2563eb;
+}
+.gantt-tl-dep-chip-with-number:hover .gantt-tl-dep-chip {
+  background-color: rgba(59, 130, 246, 0.18);
+}
+.gantt-tl-dep-chip-tooltip {
+  position: absolute;
+  left: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1000;
+  display: none;
+  width: max-content;
+  min-width: 0;
+  max-width: min(360px, calc(100vw - 32px));
+  padding: 5px 8px;
+  border-radius: 4px;
+  background: #111827;
+  color: #fff;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
+  pointer-events: none;
+}
+.gantt-tl-dep-chip-with-number:hover .gantt-tl-dep-chip-tooltip,
+.gantt-tl-dep-chip-with-number:focus-visible .gantt-tl-dep-chip-tooltip {
+  display: block;
+}
+.gantt-tl-dep-chip-task-number {
+  color: #4b5563;
+  font-weight: 400;
+  line-height: 14px;
+}
+.gantt-tl-dep-chip svg {
+  color: #4b5563;
+}
+.gantt-tl-dep-chip-lag {
+  color: #9ca3af;
+  line-height: 14px;
+}
+.gantt-tl-dep-chip-with-number-selected {
   background-color: #2563eb;
-  border-color: #2563eb;
   color: #fff;
-  font-weight: 600;
+}
+.gantt-tl-dep-chip-with-number-selected .gantt-tl-dep-chip {
+  background-color: rgba(255, 255, 255, 0.16);
+}
+.gantt-tl-dep-chip-with-number-selected .gantt-tl-dep-chip-task-number,
+.gantt-tl-dep-chip-with-number-selected .gantt-tl-dep-chip svg,
+.gantt-tl-dep-chip-with-number-selected .gantt-tl-dep-chip-lag {
+  color: #fff;
+}
+.gantt-tl-dep-chip-with-number-selected .gantt-tl-dep-chip-lag {
+  opacity: 0.82;
 }
 .gantt-tl-dep-chip-wrapper {
   display: inline-flex;
@@ -2010,10 +2097,44 @@
   padding: 4px;
   color: var(--gantt-task-bar-text-color, #ffffff);
   border-radius: var(--gantt-resource-bar-radius, 4px);
-  overflow: hidden;
+  overflow: visible;
   cursor: grab;
   user-select: none;
 }
+.gantt-resourceTimeline-item::after {
+  content: attr(data-resource-item-tooltip);
+  position: absolute;
+  left: 50%;
+  top: -8px;
+  z-index: 20;
+  max-width: 360px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: rgba(15, 23, 42, 0.96);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+  opacity: 0;
+  pointer-events: none;
+  text-align: left;
+  transform: translate(-50%, calc(-100% + 2px));
+  transition: opacity 80ms ease-out, transform 80ms ease-out;
+  visibility: hidden;
+  white-space: normal;
+  width: max-content;
+  word-break: break-word;
+}
+.gantt-resourceTimeline-item:hover::after,
+.gantt-resourceTimeline-item:focus-visible::after {
+  opacity: 1;
+  transform: translate(-50%, -100%);
+  visibility: visible;
+}
+.gantt-resourceTimeline-item:hover,
+.gantt-resourceTimeline-item:focus-visible {
+  z-index: 30;
+}
 .gantt-resourceTimeline-weekendOverlay {
   position: absolute;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.78.0",
+  "version": "0.79.0",
   "description": "Lightweight React Gantt chart component library",
   "license": "MIT",
   "repository": {