From 831cfd758f9923c79be559563af8d37c08cf56ff Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 9 Oct 2022 14:13:21 +1100
Subject: Add zoom in/out buttons

---
 src/components/TimeLine.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/components/TimeLine.vue')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 82c2f67..3960db3 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="touch-none" :width="width" :height="height"
+<div class="relative touch-none" :width="width" :height="height"
 	@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"
@@ -22,11 +22,23 @@
 			{{Math.round(n * 100) / 100}}
 		</text>
 	</svg>
+	<!-- Icons -->
+	<icon-button :size="30" class="absolute bottom-[4px] left-[4px] text-stone-50 bg-yellow-600">
+		<zoom-in-icon/>
+	</icon-button>
+	<icon-button :size="30" class="absolute bottom-[4px] left-[38px] text-stone-50 bg-yellow-600">
+		<zoom-out-icon/>
+	</icon-button>
 </div>
 </template>
 
 <script setup lang="ts">
 import {ref, onMounted, nextTick} from 'vue';
+// Components
+import IconButton from './IconButton.vue';
+// Icons
+import ZoomInIcon from './icon/ZoomInIcon.vue';
+import ZoomOutIcon from './icon/ZoomOutIcon.vue';
 
 // Refs
 const rootRef = ref(null as HTMLElement | null);
-- 
cgit v1.2.3