Add TimeLine.vue

Add timeline shift and zoom actions, and basic styling/animation
Make App determine TimeLine dimensions (incl handling resizes)

1 files changed, 42 insertions, 3 deletions

diff --git a/src/App.vue b/src/App.vue
index f30339e..880a046 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,18 +13,57 @@
 		</icon-button>
 	</div>
 	<!-- Content area -->
-	<div class="grow min-h-0 relative bg-stone-800">
-		<div class="text-stone-50 p-4">Content</div>
+	<div class="grow min-h-0 bg-stone-800" ref="contentAreaRef">
+		<time-line :width="contentWidth" :height="contentHeight"/>
 	</div>
 </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watch, onMounted, onUnmounted, nextTick} from 'vue';
+import {ref, onMounted, onUnmounted} from 'vue';
 // Components
+import TimeLine from './components/TimeLine.vue';
 import IconButton from './components/IconButton.vue';
 // Icons
 import SettingsIcon from './components/icon/SettingsIcon.vue';
 import HelpIcon from './components/icon/HelpIcon.vue';
 
+// Refs
+const contentAreaRef = ref(null as HTMLElement | null);
+
+// For content sizing
+const contentWidth = ref(0);
+const contentHeight = ref(0);
+function updateAreaDims(){
+	let contentAreaEl = contentAreaRef.value!;
+	contentWidth.value = contentAreaEl.offsetWidth;
+	contentHeight.value = contentAreaEl.offsetHeight;
+}
+onMounted(updateAreaDims)
+
+// For resize handling
+let lastResizeHdlrTime = 0; // Used to throttle resize handling
+let afterResizeHdlr = 0; // Used to trigger handler after ending a run of resize events
+async function onResize(){
+	// Handle event if not recently done
+	let handleResize = async () => {
+		updateAreaDims();
+	};
+	let currentTime = new Date().getTime();
+	if (currentTime - lastResizeHdlrTime > 200){
+		lastResizeHdlrTime = currentTime;
+		await handleResize();
+		lastResizeHdlrTime = new Date().getTime();
+	}
+	// Setup a handler to execute after ending a run of resize events
+	clearTimeout(afterResizeHdlr);
+	afterResizeHdlr = setTimeout(async () => {
+		afterResizeHdlr = 0;
+		await handleResize();
+		lastResizeHdlrTime = new Date().getTime();
+	}, 200); // If too small, touch-device detection when swapping to/from mobile-mode gets unreliable
+}
+onMounted(() => window.addEventListener('resize', onResize));
+onUnmounted(() => window.removeEventListener('resize', onResize));
+
 </script>