gantt-lib 0.78.0 → 0.80.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;
@@ -1959,12 +2046,20 @@
   font-weight: 500;
   background: var(--gantt-cell-background, #ffffff);
 }
+.gantt-resourceTimeline-resourceHeaderNew {
+  align-items: center;
+  padding-top: 0;
+}
 .gantt-resourceTimeline-resourceName {
   min-width: 0;
   flex: 1 1 auto;
+  display: -webkit-box;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  font-size: 13px;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 .gantt-resourceTimeline-conflictBadge {
   display: inline-flex;
@@ -1981,6 +2076,104 @@
   font-weight: 700;
   line-height: 18px;
 }
+.gantt-resourceTimeline-resourceMenuButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  margin-top: -3px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  font: inherit;
+  font-size: 18px;
+  line-height: 1;
+  opacity: 0;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    opacity 120ms ease;
+}
+.gantt-resourceTimeline-resourceHeader:hover .gantt-resourceTimeline-resourceMenuButton,
+.gantt-resourceTimeline-resourceHeader:focus-within .gantt-resourceTimeline-resourceMenuButton,
+.gantt-resourceTimeline-resourceHeaderMenuOpen .gantt-resourceTimeline-resourceMenuButton {
+  opacity: 1;
+}
+.gantt-resourceTimeline-resourceMenuButton:hover,
+.gantt-resourceTimeline-resourceMenuButton:focus-visible {
+  background: #e5e7eb;
+  color: #374151;
+  outline: none;
+}
+.gantt-resourceTimeline-resourceMenu {
+  min-width: 150px !important;
+  padding: 4px !important;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.gantt-resourceTimeline-resourceMenuItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #374151;
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8rem;
+  text-align: left;
+  white-space: nowrap;
+}
+.gantt-resourceTimeline-resourceMenuItem:hover:not(:disabled),
+.gantt-resourceTimeline-resourceMenuItem:focus-visible:not(:disabled) {
+  background-color: rgba(0, 0, 0, 0.05);
+  outline: none;
+}
+.gantt-resourceTimeline-resourceMenuItem:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+.gantt-resourceTimeline-resourceMenuItemDanger {
+  color: #ef4444;
+}
+.gantt-resourceTimeline-resourceMenuItemDanger:hover:not(:disabled),
+.gantt-resourceTimeline-resourceMenuItemDanger:focus-visible:not(:disabled) {
+  background-color: rgba(239, 68, 68, 0.08);
+  color: #dc2626;
+}
+.gantt-resourceTimeline-resourceInput {
+  width: 100%;
+}
+.gantt-resourceTimeline-addResourceButton {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 12px;
+  border: 0;
+  border-bottom: 1px solid var(--gantt-grid-line-color, #e0e0e0);
+  background: var(--gantt-cell-background, #ffffff);
+  color: #2563eb;
+  cursor: pointer;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: left;
+}
+.gantt-resourceTimeline-addResourceButton:hover,
+.gantt-resourceTimeline-addResourceButton:focus-visible {
+  background: #f8fafc;
+  color: #1d4ed8;
+  outline: none;
+}
 .gantt-resourceTimeline-chartSurface {
   position: relative;
   flex: 1;
@@ -1995,6 +2188,9 @@
 .gantt-resourceTimeline-grid {
   position: relative;
 }
+.gantt-resourceTimeline .gantt-ti-indicator {
+  z-index: 4;
+}
 .gantt-resourceTimeline-row {
   position: absolute;
   left: 0;
@@ -2010,16 +2206,51 @@
   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;
   bottom: 0;
   z-index: 1;
   pointer-events: none;
+  border-radius: inherit;
   background-image:
     repeating-linear-gradient(
       135deg,
@@ -2035,6 +2266,7 @@
   bottom: 0;
   z-index: 0;
   pointer-events: none;
+  border-radius: inherit;
   background-color: rgba(239, 68, 68, 1);
 }
 .gantt-resourceTimeline-resizeHandle {

package/package.json

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