vertical dashed connectors from main rail to project pins

This commit is contained in:
2026-08-08 20:30:49 +02:00
parent dc7fa003f0
commit 9402456020
+35
View File
@@ -674,6 +674,14 @@
position: absolute; top: 16px; bottom: 0; position: absolute; top: 16px; bottom: 0;
z-index: 2; cursor: crosshair; background: transparent; z-index: 2; cursor: crosshair; background: transparent;
} }
.tl-connector {
position: absolute;
width: 0;
border-left: 1px dashed rgba(232,220,196,.22);
transform: translateX(-50%);
pointer-events: none;
z-index: 0;
}
.project-events { .project-events {
margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line);
@@ -922,6 +930,13 @@
</div> </div>
</div> </div>
<!-- Vertical connectors: main rail → project pin -->
<template x-for="line in projectConnectors()" :key="line.id">
<div class="tl-connector"
:style="`left:${line.pct}%;top:${line.top}px;height:${line.height}px`">
</div>
</template>
</div><!-- /.tl-wrap --> </div><!-- /.tl-wrap -->
</div> </div>
@@ -2131,6 +2146,26 @@
return result.sort((a, b) => a.term.localeCompare(b.term)) return result.sort((a, b) => a.term.localeCompare(b.term))
}, },
// Vertical connector lines from main-rail event dots down to project pins.
// SUBLABEL_H ≈ 1rem margin-top + 10px text + 6px margin-bottom = 32px
projectConnectors() {
if (!this.game) return []
const projs = this.projects()
if (!projs.length) return []
const SUBLABEL_H = 32, ROW_H = 36, PIN_LEVEL = 7
return this.events()
.filter(ev => ev.project_id)
.map(ev => {
const idx = projs.findIndex(p => p.id === ev.project_id)
if (idx === -1) return null
const pct = this.posPercent(ev.date)
const topY = this.tlRailY()
const pinY = this.tlHeight() + SUBLABEL_H + idx * ROW_H + PIN_LEVEL
return { id: ev.id, pct, top: topY, height: Math.max(0, pinY - topY) }
})
.filter(Boolean)
},
openAddEventToProject(project, clickEvent) { openAddEventToProject(project, clickEvent) {
const env = this.randomEnv(project.discipline) const env = this.randomEnv(project.discipline)
this.activeForm = { this.activeForm = {