diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.tsx index df22c66a23..4ff532b1f5 100644 --- a/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.tsx +++ b/packages/ketchup/src/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.tsx @@ -417,9 +417,8 @@ export class KupGridRenderer { this.dropZoneTask = dropAllowedOn.find(task => this.isPhaseWithinTaskArea(changedTask, task)) if (this.dropZoneTask?.ySecondary) { - const rects = this.svg.querySelectorAll(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`) - - rects.forEach(rect => { + const rects = this.getBarRectsForDropzoneVisualization(); + rects.forEach((rect: Element) => { rect.setAttribute('fill', defaultStylingOptions.barDropZoneColor) }) } @@ -427,14 +426,40 @@ export class KupGridRenderer { resetDropzoneVisualization() { if (!this.dropZoneTask) return; - const rects = this.svg.querySelectorAll(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`) + const rects = this.getBarRectsForDropzoneVisualization(); const isSelected = !!this.selectedTask && this.dropZoneTask.id === this.selectedTask.id - rects.forEach(rect => { + rects.forEach((rect: Element) => { rect.setAttribute('fill', this.getBarColor(isSelected, this.dropZoneTask.styles)) }) } + getBarRectsForDropzoneVisualization(): Element[] | NodeListOf { + let rects: Element[] | NodeListOf; + + if (!this.showSecondaryDates) { + rects = this.svg.querySelectorAll(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`); + } else { + const rect = this.svg.querySelector(`.barWrapper[data-type="${this.dropZoneTask.type}"] rect[y='${this.dropZoneTask.ySecondary}']`); + const siblings = [rect]; + let nextSibling = rect.nextElementSibling; + while (nextSibling !== null) { + siblings.push(nextSibling); + nextSibling = nextSibling.nextElementSibling; + } + + let prevSibling = rect.previousElementSibling; + while (prevSibling !== null) { + siblings.unshift(prevSibling); + prevSibling = prevSibling.previousElementSibling; + } + + rects = siblings; + } + + return rects; + } + handleBarEventStart( action: KupPlannerGanttContentMoveAction, task: KupPlannerBarTask, @@ -1144,6 +1169,18 @@ export class KupGridRenderer { ); })} + {this.currentTarget && this.ganttEvent.changedTask && ( + + { + this.renderKupBar( + this.ganttEvent.changedTask, + false, + false, + false + ) + } + + )}