gantt-lib 0.121.2 → 0.123.0

package/dist/styles.css

@@ -567,6 +567,80 @@
   display: flex;
   align-items: center;
 }
+.gantt-tr-dependencyPort {
+  position: absolute;
+  top: 50%;
+  z-index: 12;
+  width: 24px;
+  height: var(--gantt-dependency-port-height, var(--gantt-task-bar-height, 28px));
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  transform: translateY(-50%);
+  cursor: crosshair;
+  opacity: 0;
+  transition:
+    opacity 140ms ease,
+    background-color 140ms ease,
+    transform 140ms ease;
+}
+.gantt-tr-row:hover .gantt-tr-dependencyPort,
+.gantt-tr-dependencyPort:focus-visible,
+.gantt-tr-dependencyPortDragActive {
+  opacity: 1;
+}
+.gantt-tr-dependencyPort::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  width: 8px;
+  height: 8px;
+  border: 2px solid var(--gantt-dependency-port-color, #7c3aed);
+  border-radius: 50%;
+  background: var(--gantt-cell-background, #fff);
+  transform: translateY(-50%) scale(.75);
+  transition: transform 140ms cubic-bezier(.2, 0, 0, 1), background-color 140ms ease;
+}
+.gantt-tr-dependencyPort:hover,
+.gantt-tr-dependencyPort:focus-visible {
+  background: color-mix(in srgb, var(--gantt-dependency-port-color, #7c3aed) 12%, transparent);
+  outline: none;
+}
+.gantt-tr-dependencyPort:hover::after,
+.gantt-tr-dependencyPort:focus-visible::after,
+.gantt-tr-dependencyPortDragActive::after {
+  transform: translateY(-50%) scale(1);
+  background: var(--gantt-dependency-port-color, #7c3aed);
+}
+.gantt-tr-dependencyPortLeft {
+}
+.gantt-tr-dependencyPort::after {
+  pointer-events: none;
+}
+.gantt-tr-dependencyPortLeft::after {
+  left: 12px;
+}
+.gantt-tr-dependencyPortRight::after {
+  left: 0;
+}
+.gantt-tr-dependencyPortMilestone {
+  height: var(--gantt-dependency-port-height, 14px);
+}
+.gantt-tr-dependencyPortParent {
+  top: calc(50% - 4px);
+  height: var(--gantt-parent-bar-height, 14px);
+  transform: translateY(-50%);
+}
+.gantt-tr-dependencyPortDragActive {
+  background: color-mix(in srgb, var(--gantt-dependency-port-color, #7c3aed) 10%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .gantt-tr-dependencyPort,
+  .gantt-tr-dependencyPort::after {
+    transition: none;
+  }
+}
 .gantt-tr-baseline {
   position: absolute;
   top: calc(50% + var(--gantt-task-bar-height, 28px) / 2 + var(--gantt-baseline-offset, -6px));
@@ -812,6 +886,7 @@
 }
 .gantt-dependency-line {
   pointer-events: visibleStroke;
+  cursor: pointer;
 }
 .gantt-dependency-hit-area {
   fill: none;
@@ -820,6 +895,7 @@
   stroke-linecap: round;
   stroke-linejoin: round;
   pointer-events: stroke;
+  cursor: pointer;
 }
 .gantt-dependency-path {
   fill: none;
@@ -840,11 +916,11 @@
   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));
-  stroke-width: 6;
+.gantt-dependency-line-hovered .gantt-dependency-hit-area {
+  stroke: transparent;
+  stroke-width: 12;
 }
-.gantt-dependency-line:hover .gantt-dependency-path {
+.gantt-dependency-line-hovered .gantt-dependency-path {
   stroke: var(--gantt-dependency-hover-color, #ef4444);
   stroke-width: 2;
   marker-end: url(#arrowhead-hover);
@@ -863,6 +939,55 @@
   opacity: 0.85;
 }
 
+/* src/components/DependencyCreationOverlay/DependencyCreationOverlay.css */
+.gantt-dependencyCreation-svg {
+  position: absolute;
+  inset: 0;
+  z-index: 15;
+  overflow: visible;
+  pointer-events: none;
+}
+.gantt-dependencyCreation-path {
+  fill: none;
+  stroke: var(--gantt-dependency-port-color, #7c3aed);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-dasharray: 5 5;
+  animation: gantt-dependencyCreation-dash 420ms linear infinite;
+}
+.gantt-dependencyCreation-pathTargeted {
+  stroke: var(--gantt-dependency-port-target-color, #16a34a);
+}
+.gantt-dependencyCreation-source,
+.gantt-dependencyCreation-target {
+  fill: var(--gantt-cell-background, #fff);
+  stroke: var(--gantt-dependency-port-color, #7c3aed);
+  stroke-width: 2;
+}
+.gantt-dependencyCreation-targetValid {
+  fill: var(--gantt-dependency-port-target-color, #16a34a);
+  stroke: var(--gantt-cell-background, #fff);
+}
+.gantt-dependencyCreation-label {
+  fill: var(--gantt-dependency-port-color, #7c3aed);
+  font-size: 11px;
+  font-weight: 700;
+  paint-order: stroke;
+  stroke: var(--gantt-cell-background, #fff);
+  stroke-width: 4px;
+  stroke-linejoin: round;
+}
+@keyframes gantt-dependencyCreation-dash {
+  to {
+    stroke-dashoffset: -10;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gantt-dependencyCreation-path {
+    animation: none;
+  }
+}
+
 /* src/components/TaskList/TaskList.css */
 .gantt-tl-overlay {
   position: sticky;
@@ -1831,6 +1956,11 @@
   font-weight: 600;
   color: #1d4ed8;
 }
+.gantt-tl-dep-chip-control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
 .gantt-tl-dep-chip {
   display: inline-flex;
   align-items: center;
@@ -1856,6 +1986,28 @@
   font-size: 0.75rem;
   padding: 3px 6px;
 }
+.gantt-tl-dep-expand {
+  position: absolute;
+  left: calc(100% + 4px);
+  top: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #2563eb;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.gantt-tl-dep-expand:hover,
+.gantt-tl-dep-expand:focus-visible {
+  background: rgba(37, 99, 235, 0.12);
+  outline: none;
+}
 .gantt-tl-dep-chip-with-number:hover {
   background-color: rgba(59, 130, 246, 0.12);
 }
@@ -2122,6 +2274,7 @@
 .gantt-tl-dep-overflow-list {
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   gap: 4px;
   padding: 8px;
   min-width: 140px;
@@ -3975,6 +4128,69 @@
   position: relative;
   background-color: var(--gantt-cell-background, #ffffff);
 }
+.gantt-dependencyCreation-error {
+  position: sticky;
+  top: 12px;
+  z-index: 30;
+  width: max-content;
+  max-width: min(360px, calc(100% - 24px));
+  margin: 12px auto 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: #991b1b;
+  background: #fef2f2;
+  box-shadow: 0 6px 18px rgba(127, 29, 29, .14);
+  font-size: .8rem;
+  font-weight: 650;
+  pointer-events: none;
+}
+.gantt-dependencyLineMenu {
+  position: absolute;
+  z-index: 32;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 28px;
+  padding: 3px 4px 3px 8px;
+  border-radius: 7px;
+  background: var(--gantt-popover-bg, #fff);
+  box-shadow: 0 5px 16px rgba(15, 23, 42, .18), 0 0 0 1px rgba(148, 163, 184, .2);
+  transform: translateY(-50%);
+  pointer-events: auto;
+}
+.gantt-dependencyLineMenuType {
+  color: var(--gantt-dependency-hover-color, #ef4444);
+  font-size: .72rem;
+  font-weight: 750;
+  line-height: 1;
+}
+.gantt-dependencyLineMenuDelete {
+  display: inline-grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: #991b1b;
+  background: #fef2f2;
+  cursor: pointer;
+  font-size: 17px;
+  line-height: 1;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease,
+    transform 120ms ease;
+}
+.gantt-dependencyLineMenuDelete:hover,
+.gantt-dependencyLineMenuDelete:focus-visible {
+  color: #fff;
+  background: #dc2626;
+  outline: none;
+}
+.gantt-dependencyLineMenuDelete:active {
+  transform: scale(.96);
+}
 .gantt-chartSurface {
   display: block;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-lib",
-  "version": "0.121.2",
+  "version": "0.123.0",
   "description": "React scheduling UI library for Gantt charts, resource planners, and table-matrix views",
   "license": "MIT",
   "repository": {