kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(gantt): always show relation arrows and fix arrow Y positioning 

Remove the toggle checkbox and always render relation arrows.
Wrap rows and arrow overlay in a position:relative container so
arrows anchor to the row area instead of the chart wrapper which
includes the timeline header.
This commit is contained in:
kolaente 2026-03-02 10:28:30 +01:00
parent 5731ce9c76
commit df766a0636
2 changed files with 45 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/components/gantt/GanttChart.vue
View File

@ -31,44 +31,46 @@
@enterPressed="handleEnterPressed"
>
<template #default="{ focusedRow, focusedCell }">
<div class="gantt-rows">
<GanttRow
v-for="(rowId, index) in ganttRows"
:id="rowId"
:key="rowId"
:index="index"
>
<div class="gantt-row-content">
<GanttRowBars
:bars="ganttBars[index] ?? []"
:total-width="totalWidth"
:date-from-date="dateFromDate"
:date-to-date="dateToDate"
:day-width-pixels="DAY_WIDTH_PIXELS"
:is-dragging="isDragging"
:is-resizing="isResizing"
:drag-state="dragState"
:focused-row="focusedRow ?? null"
:focused-cell="focusedCell"
:row-id="rowId"
:indent-level="ganttBars[index]?.[0]?.meta?.indentLevel ?? 0"
:is-parent="ganttBars[index]?.[0]?.meta?.isParent ?? false"
:is-collapsed="collapsedTaskIds.has(Number(ganttBars[index]?.[0]?.id))"
@barPointerDown="handleBarPointerDown"
@startResize="startResize"
@updateTask="updateGanttTask"
@toggleCollapse="toggleCollapse(Number(ganttBars[index]?.[0]?.id))"
/>
</div>
</GanttRow>
<div class="gantt-rows-container">
<div class="gantt-rows">
<GanttRow
v-for="(rowId, index) in ganttRows"
:id="rowId"
:key="rowId"
:index="index"
>
<div class="gantt-row-content">
<GanttRowBars
:bars="ganttBars[index] ?? []"
:total-width="totalWidth"
:date-from-date="dateFromDate"
:date-to-date="dateToDate"
:day-width-pixels="DAY_WIDTH_PIXELS"
:is-dragging="isDragging"
:is-resizing="isResizing"
:drag-state="dragState"
:focused-row="focusedRow ?? null"
:focused-cell="focusedCell"
:row-id="rowId"
:indent-level="ganttBars[index]?.[0]?.meta?.indentLevel ?? 0"
:is-parent="ganttBars[index]?.[0]?.meta?.isParent ?? false"
:is-collapsed="collapsedTaskIds.has(Number(ganttBars[index]?.[0]?.id))"
@barPointerDown="handleBarPointerDown"
@startResize="startResize"
@updateTask="updateGanttTask"
@toggleCollapse="toggleCollapse(Number(ganttBars[index]?.[0]?.id))"
/>
</div>
</GanttRow>
</div>
<GanttRelationArrows
v-if="relationArrows.length > 0"
:arrows="relationArrows"
:width="totalWidth"
:height="totalHeight"
:row-height="ROW_HEIGHT"
/>
</div>
<GanttRelationArrows
v-if="showRelationArrows && relationArrows.length > 0"
:arrows="relationArrows"
:width="totalWidth"
:height="totalHeight"
:row-height="ROW_HEIGHT"
/>
</template>
</GanttChartBody>
</div>
@ -101,16 +103,13 @@ import Loading from '@/components/misc/Loading.vue'
import {MILLISECONDS_A_DAY} from '@/constants/date'
import {roundToNaturalDayBoundary} from '@/helpers/time/roundToNaturalDayBoundary'
const props = withDefaults(defineProps<{
const props = defineProps<{
isLoading: boolean,
filters: GanttFilters,
tasks: Map<ITask['id'], ITask>,
defaultTaskStartDate: DateISO
defaultTaskEndDate: DateISO
showRelationArrows?: boolean
}>(), {
showRelationArrows: false,
})
}>()
const emit = defineEmits<{
(e: 'update:task', task: ITaskPartialWithId): void
@ -373,7 +372,6 @@ function computeBarWidth(bar: GanttBarModel): number {
// Compute relation arrows
const relationArrows = computed<GanttArrow[]>(() => {
if (!props.showRelationArrows) return []
return buildRelationArrows(tasks.value, barPositions.value, hiddenToAncestor.value)
})
@ -683,6 +681,10 @@ onUnmounted(() => {
position: relative;
}
.gantt-rows-container {
position: relative;
}
.gantt-rows {
position: relative;
z-index: 2;

9
frontend/src/components/project/views/ProjectGantt.vue
View File

@ -38,12 +38,6 @@
>
{{ $t('task.show.noDates') }}
</FancyCheckbox>
<FancyCheckbox
v-model="showRelationArrows"
is-block
>
{{ $t('project.gantt.toggleRelationArrows') }}
</FancyCheckbox>
</div>
</Card>
@ -59,7 +53,6 @@
:is-loading="isLoading"
:default-task-start-date="defaultTaskStartDate"
:default-task-end-date="defaultTaskEndDate"
:show-relation-arrows="showRelationArrows"
@update:task="updateTask"
/>
<TaskForm
@ -118,8 +111,6 @@ const {
updateTask,
} = useGanttFilters(route, viewId)
const showRelationArrows = ref(false)
const DEFAULT_DATE_RANGE_DAYS = 7
const today = new Date()