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 +++++++++++++-
 src/components/icon/ZoomInIcon.vue  |  9 +++++++++
 src/components/icon/ZoomOutIcon.vue |  8 ++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/icon/ZoomInIcon.vue
 create mode 100644 src/components/icon/ZoomOutIcon.vue

(limited to 'src/components')

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);
diff --git a/src/components/icon/ZoomInIcon.vue b/src/components/icon/ZoomInIcon.vue
new file mode 100644
index 0000000..499b834
--- /dev/null
+++ b/src/components/icon/ZoomInIcon.vue
@@ -0,0 +1,9 @@
+<template>
+<svg viewBox="0 0 24 24"
+	fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="11" cy="11" r="8"/>
+	<line x1="21" y1="21" x2="16.65" y2="16.65"/>
+	<line x1="11" y1="8" x2="11" y2="14"/>
+	<line x1="8" y1="11" x2="14" y2="11"/>
+</svg>
+</template>
diff --git a/src/components/icon/ZoomOutIcon.vue b/src/components/icon/ZoomOutIcon.vue
new file mode 100644
index 0000000..1129c75
--- /dev/null
+++ b/src/components/icon/ZoomOutIcon.vue
@@ -0,0 +1,8 @@
+<template>
+<svg viewBox="0 0 24 24"
+	fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<circle cx="11" cy="11" r="8"/>
+	<line x1="21" y1="21" x2="16.65" y2="16.65"/>
+	<line x1="8" y1="11" x2="14" y2="11"/>
+</svg>
+</template>
-- 
cgit v1.2.3