diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 2 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 32 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 16 | ||||
| -rw-r--r-- | src/store.ts | 4 |
4 files changed, 35 insertions, 19 deletions
diff --git a/src/App.vue b/src/App.vue index fb9b0e9..b789d91 100644 --- a/src/App.vue +++ b/src/App.vue @@ -30,7 +30,7 @@ class="grow basis-full min-h-0 outline outline-1" @close="onTimelineClose(idx)" @state-chg="onTimelineChg($event, idx)" @event-display="onEventDisplay" @info-click="onInfoClick" @pointerenter="currentTimelineIdx = idx"/> - <base-line :vert="vert" :timelines="timelines" class='m-1 sm:m-2'/> + <base-line v-if="store.showBaseLine" :vert="vert" :timelines="timelines" class='m-1 sm:m-2'/> </div> <!-- Modals --> <transition name="fade"> diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index bb82016..3e56373 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -26,17 +26,27 @@ </div> <div class="pb-2" :class="borderBClasses"> <h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Display</h2> - <div class="px-2"> - <label> <input type="checkbox" v-model="store.reqImgs" - @change="onSettingChg('reqImgs')"/> Only show events with images </label> - </div> - <div class="px-2"> - <label> <input type="checkbox" v-model="store.showEventCounts" - @change="onSettingChg('showEventCounts')"/> Show event count indicators </label> - </div> - <div class="px-2"> - <label> <input type="checkbox" v-model="store.showMinorTicks" - @change="onSettingChg('showMinorTicks')"/> Show minor tick labels </label> + <div class="grid grid-cols-2"> + <div class="px-2 col-span-2"> + <label> <input type="checkbox" v-model="store.reqImgs" + @change="onSettingChg('reqImgs')"/> Only events with images </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showMinorTicks" + @change="onSettingChg('showMinorTicks')"/> Minor tick text </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showEventLines" + @change="onSettingChg('showEventLines')"/> Event lines </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showEventCounts" + @change="onSettingChg('showEventCounts')"/> Event density </label> + </div> + <div class="px-2"> + <label> <input type="checkbox" v-model="store.showBaseLine" + @change="onSettingChg('showBaseLine')"/> Baseline </label> + </div> </div> </div> <div v-if="store.touchDevice == false" class="pb-2" :class="borderBClasses"> diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 56136fd..073261c 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -15,13 +15,15 @@ </linearGradient> </defs> <!-- Event lines (dashed line indicates imprecise start date) --> - <line v-for="id in eventLines.keys()" :key="id" - x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01" - stroke="url('#eventLineGradient')" stroke-width="1px" - :stroke-dasharray="getEventPrecision(idToEvent.get(id)!) <= minorScale ? '' : '16,4'" - :style="eventLineStyles(id)" class="animate-fadein"/> - <!-- Note: With a fully vertical or horizontal line, nothing gets displayed --> - <!-- Note: Can't use :x2="1" with scaling in :style="", as it makes dashed-lines non-uniform --> + <template v-if="store.showEventLines"> + <line v-for="id in eventLines.keys()" :key="id" + x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01" + stroke="url('#eventLineGradient')" stroke-width="1px" + :stroke-dasharray="getEventPrecision(idToEvent.get(id)!) <= minorScale ? '' : '16,4'" + :style="eventLineStyles(id)" class="animate-fadein"/> + <!-- Note: With a fully vertical or horizontal line, nothing gets displayed --> + <!-- Note: Can't use :x2="1" with scaling in :style="", as it makes dashed-lines non-uniform --> + </template> <!-- Main line (unit horizontal line that gets transformed, with extra length to avoid gaps when panning) --> <line :stroke="store.color.alt" stroke-width="2px" x1="-1" y1="0" x2="2" y2="0" :style="mainlineStyles"/> <!-- Tick markers --> diff --git a/src/store.ts b/src/store.ts index d65dbcf..5da6241 100644 --- a/src/store.ts +++ b/src/store.ts @@ -24,6 +24,7 @@ export type StoreState = { eventImgSz: number, // Width/height of event images eventLabelHeight: number, spacing: number, // Spacing between display edge, events, and mainline area + showEventLines: boolean, // User input scrollRatio: number, // Fraction of timeline length to move by upon scroll zoomRatio: number, // Ratio of timeline expansion upon zooming out (eg: 1.5) @@ -32,6 +33,7 @@ export type StoreState = { // Other feature-specific reqImgs: boolean, // Only show events with images showEventCounts: boolean, + showBaseLine: boolean, searchSuggLimit: number, ctgs: { // Specifies event categories, and which ones should be visible event: boolean, @@ -101,6 +103,7 @@ function getDefaultState(): StoreState { eventImgSz: 100, eventLabelHeight: 20, spacing: 10, + showEventLines: true, // User input scrollRatio: 0.2, zoomRatio: 1.5, @@ -109,6 +112,7 @@ function getDefaultState(): StoreState { // Other feature-specific reqImgs: true, showEventCounts: true, + showBaseLine: true, searchSuggLimit: 10, ctgs: { event: true, |