diff options
Diffstat (limited to 'src/App.vue')
| -rw-r--r-- | src/App.vue | 22 |
1 files changed, 18 insertions, 4 deletions
diff --git a/src/App.vue b/src/App.vue index 2555d3f..95009e7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,8 +18,10 @@ <!-- Content area --> <div class="grow min-h-0 bg-stone-800 flex" :class="{'flex-col': !vert}" ref="contentAreaRef"> <time-line v-for="(data, idx) in timelineData" :key="data" - class="grow basis-full min-h-0 outline outline-1" :vert="vert" @close="onTimelineClose(idx)"/> - <base-line :vert="vert" :timelineData="[]"/> + :vert="vert" :initialStart="data.start" :initialEnd="data.end" + class="grow basis-full min-h-0 outline outline-1" + @close="onTimelineClose(idx)" @bound-chg="onBoundChg($event, idx)"/> + <base-line :vert="vert" :timelineData="timelineData"/> </div> </div> </template> @@ -50,14 +52,21 @@ onMounted(updateAreaDims) // For multiple timelines const vert = computed(() => contentHeight.value > contentWidth.value); -const timelineData = ref([{}]); +const timelineData = ref([]); +let nextTimelineId = 1; +function genTimelineData(){ + let data = {id: nextTimelineId, start: -500, end: 500}; + nextTimelineId++; + return data; +} +timelineData.value.push(genTimelineData()); function onTimelineAdd(){ if (vert.value && contentWidth.value / (timelineData.value.length + 1) < 150 || !vert.value && contentHeight.value / (timelineData.value.length + 1) < 150){ console.log('Reached timeline min size'); return; } - timelineData.value.push({}); + timelineData.value.push(genTimelineData()); } function onTimelineClose(idx: number){ if (timelineData.value.length == 1){ @@ -66,6 +75,11 @@ function onTimelineClose(idx: number){ } timelineData.value.splice(idx, 1); } +function onBoundChg(newBounds: [number, number], idx: number){ + let data = timelineData.value[idx]; + data.start = newBounds[0]; + data.end = newBounds[1]; +} // For resize handling let lastResizeHdlrTime = 0; // Used to throttle resize handling |