From edb9ac85069986d815f135eced347304bb81a63f Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 10 Oct 2022 13:23:54 +1100
Subject: Add timeline add/remove functionality

---
 src/components/TimeLine.vue       | 26 +++++++++++++++++++++-----
 src/components/icon/MinusIcon.vue |  6 ++++++
 src/components/icon/PlusIcon.vue  |  7 +++++++
 3 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 src/components/icon/MinusIcon.vue
 create mode 100644 src/components/icon/PlusIcon.vue

(limited to 'src/components')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 58e2fbc..187d915 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -1,13 +1,14 @@
 <template>
-<div class="touch-none" :width="width" :height="height"
+<div class="touch-none relative"
+	:style="{minWidth: width + 'px', maxWidth: width + 'px', maxHeight: height + 'px', minHeight: height + 'px'}"
 	@wheel.exact.prevent="onWheel" @wheel.shift.exact.prevent="onShiftWheel"
 	@pointerdown.prevent="onPointerDown" @pointermove.prevent="onPointerMove" @pointerup.prevent="onPointerUp"
 	@pointercancel.prevent="onPointerUp" @pointerout.prevent="onPointerUp" @pointerleave.prevent="onPointerUp"
 	ref="rootRef">
-	<svg :viewBox="`0 0 ${width} ${height}`">
+	<svg :viewBox="`0 0 ${width} ${height}`" width="100%" height="100%">
 		<line stroke="yellow" stroke-width="2px"
-			:x1="vert2 ? '50%' :      0" :y1="vert2 ?      0 : '50%'"
-			:x2="vert2 ? '50%' : '100%'" :y2="vert2 ? '100%' : '50%'"/>
+			:x1="vert2 ? width/2 :     0" :y1="vert2 ?      0 : height/2"
+			:x2="vert2 ? width/2 : width" :y2="vert2 ? height : height/2"/>
 		<template v-for="n in ticks" :key="n">
 			<line v-if="n == MIN_DATE || n == MAX_DATE"
 				:x1="vert2 ? -END_TICK_SZ : 0" :y1="vert2 ? 0 : -END_TICK_SZ"
@@ -24,21 +25,31 @@
 			{{n}}
 		</text>
 	</svg>
+	<!-- Icons -->
+	<icon-button :size="30" class="absolute bottom-2 right-2 text-stone-50 bg-yellow-600"
+		@click="onClose" title="Remove timeline">
+		<minus-icon/>
+	</icon-button>
 </div>
 </template>
 
 <script setup lang="ts">
 import {ref, onMounted, computed, watch, nextTick} from 'vue';
+// Components
+import IconButton from './IconButton.vue';
+// Icons
+import MinusIcon from './icon/MinusIcon.vue';
 
 // Refs
 const rootRef = ref(null as HTMLElement | null);
 
-// Props
+// Props + events
 const props = defineProps({
 	width: {type: Number, required: true},
 	height: {type: Number, required: true},
 	vert: {type: Boolean, default: false},
 });
+const emit = defineEmits(['close']);
 
 // Vars
 const MIN_DATE = -1000; // Lowest date that gets marked
@@ -336,6 +347,11 @@ function onShiftWheel(evt: WheelEvent){
 	}
 }
 
+// For button handling
+function onClose(){
+	emit('close');
+}
+
 // Styles
 function tickStyles(tick: number){
 	let offset = (tick - startDate.value) / (endDate.value - startDate.value) * availLen.value;
diff --git a/src/components/icon/MinusIcon.vue b/src/components/icon/MinusIcon.vue
new file mode 100644
index 0000000..d316073
--- /dev/null
+++ b/src/components/icon/MinusIcon.vue
@@ -0,0 +1,6 @@
+<template>
+<svg viewBox="0 0 24 24"
+	fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<line x1="5" y1="12" x2="19" y2="12"/>
+</svg>
+</template>
diff --git a/src/components/icon/PlusIcon.vue b/src/components/icon/PlusIcon.vue
new file mode 100644
index 0000000..e06ba79
--- /dev/null
+++ b/src/components/icon/PlusIcon.vue
@@ -0,0 +1,7 @@
+<template>
+<svg viewBox="0 0 24 24"
+	fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<line x1="12" y1="5" x2="12" y2="19"/>
+	<line x1="5" y1="12" x2="19" y2="12"/>
+</svg>
+</template>
-- 
cgit v1.2.3