Update timeline features

baku89 · Apr 11, 2024 · 0b8cf26 · 0b8cf26
1 parent 6ad8cad
commit 0b8cf26
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 36 deletions.
diff --git a/src/components/Timeline/Timeline.vue b/src/components/Timeline/Timeline.vue
@@ -50,9 +50,16 @@ const visibleFrames = computed(() => {
 	return range(start, end + 1)
 })
 
+const minZoom = 0.1
+const maxZoom = 1
+
 function onZoom({origin, zoomDelta}: {origin: number; zoomDelta: number}) {
 	const oldZoomFactor = project.timeline.zoomFactor
-	const newZoomFactor = clamp(project.timeline.zoomFactor * zoomDelta, 0.1, 2)
+	const newZoomFactor = clamp(
+		project.timeline.zoomFactor * zoomDelta,
+		minZoom,
+		maxZoom
+	)
 	project.timeline.zoomFactor = newZoomFactor
 
 	const zoomFactorDelta = newZoomFactor / oldZoomFactor
@@ -87,9 +94,7 @@ const seekbarStyles = computed(() => {
 
 const vizStyles = computed(() => {
 	return {
-		top: `calc(var(--header-height) + var(--header-margin-bottom) + var(--koma-height) * ${
-			2 /*layers.value.length*/
-		})`,
+		top: 'calc(var(--header-height) + var(--header-margin-bottom) + var(--koma-height))',
 	}
 })
 </script>
@@ -139,7 +144,7 @@ const vizStyles = computed(() => {
 				<div class="viz" :style="vizStyles">
 					<TimelineWaveform />
 					<TimelineGraph />
-					<TimelineMarkers :komaWidth="timeline.komaWidth" />
+					<TimelineMarkers />
 				</div>
 				<div class="komas">
 					<TimelineKoma
@@ -157,10 +162,10 @@ const vizStyles = computed(() => {
 			<template #scrollbarRight>
 				<Tq.InputNumber
 					:modelValue="project.timeline.zoomFactor * 100"
-					:min="10"
-					:max="200"
+					:min="minZoom * 100"
+					:max="maxZoom * 100"
 					suffix="%"
-					:barOrigin="100"
+					:bar="100"
 					:step="1"
 					:precision="0"
 					style="width: 7em"
@@ -197,9 +202,6 @@ const vizStyles = computed(() => {
 
 .komas
 	position relative
-	width 100%
-	z-index 100
-	height 0
 
 .koma
 	position absolute
@@ -241,8 +243,7 @@ const vizStyles = computed(() => {
 	right 100%
 	height var(--header-height)
 	background var(--md-sys-color-on-tertiary-container)
-	opacity 0.5
-	border-radius 99px 0 0 99px
+	opacity 0.4
 
 	&.pos
 		left var(--koma-width)

diff --git a/src/components/Timeline/TimelineDrawing.vue b/src/components/Timeline/TimelineDrawing.vue
@@ -142,13 +142,6 @@ watch(
 .TimelineDrawing
 	position absolute
 	inset 0
-	z-index -10
-	pointer-events none
-
-	&.pencil
-	&.eraser
-		pointer-events auto
-		z-index 400
 
 	&.pencil
 		cursor crosshair

diff --git a/src/components/Timeline/TimelineHeader.vue b/src/components/Timeline/TimelineHeader.vue
@@ -74,6 +74,7 @@ const measures = computed(() => {
 	position relative
 	width 100%
 	height var(--header-height)
+	pointer-events auto
 
 	background-image linear-gradient(to right, var(--tq-color-surface-border) 1px, transparent 1px)
 	background-size var(--koma-width) 100%
@@ -87,6 +88,6 @@ const measures = computed(() => {
 .preview-range
 	position absolute
 	height var(--header-height)
-	background var(--md-sys-color-secondary)
+	background var(--tq-color-on-input)
 	opacity 0.2
 </style>
diff --git a/src/components/Timeline/TimelineMarker.vue b/src/components/Timeline/TimelineMarker.vue
@@ -19,7 +19,7 @@ const styles = computed(() => {
 	return {
 		'--duration': duration,
 		left: `${frame * timeline.komaWidth}px`,
-		top: `calc(${verticalPosition} * 100%)`,
+		top: `${verticalPosition * 100}%`,
 		color,
 	}
 })

diff --git a/src/components/Timeline/TimelineMarkers.vue b/src/components/Timeline/TimelineMarkers.vue
@@ -14,12 +14,6 @@ import {speak} from '@/utils'
 
 import TimelineMarker from './TimelineMarker.vue'
 
-interface Props {
-	komaWidth: number
-}
-
-const props = defineProps<Props>()
-
 const project = useProjectStore()
 const markers = useMarkersStore()
 const timeline = useTimelineStore()
@@ -69,7 +63,7 @@ useBndr($root, $root => {
 	const pointer = Bndr.pointer($root)
 
 	pointer.position({coordinate: 'offset'}).on(([x, y]) => {
-		const frame = Math.floor(x / props.komaWidth)
+		const frame = Math.floor(x / timeline.komaWidth)
 		const verticalPosition = scalar.clamp(y / $root.clientHeight, 0, 1)
 
 		timeline.toolOptions = {...timeline.toolOptions, frame, verticalPosition}
@@ -138,8 +132,8 @@ useBndr($root, $root => {
 				dragRect
 			)
 
-			const frameLower = Math.ceil(xLower / props.komaWidth)
-			const frameUpper = Math.floor(xUpper / props.komaWidth)
+			const frameLower = Math.ceil(xLower / timeline.komaWidth)
+			const frameUpper = Math.floor(xUpper / timeline.komaWidth)
 
 			const verticalPositionLower = yLower / $root.clientHeight
 			const verticalPositionUpper = yUpper / $root.clientHeight
@@ -229,7 +223,14 @@ useBndr($root, $root => {
 </script>
 
 <template>
-	<div ref="$root" class="TimelineMarkers">
+	<div
+		ref="$root"
+		class="TimelineMarkers"
+		:class="{
+			active:
+				timeline.currentTool === 'marker' || timeline.currentTool === 'select',
+		}"
+	>
 		<TimelineMarker
 			v-if="canAddMarker"
 			class="cursor"
@@ -252,7 +253,10 @@ useBndr($root, $root => {
 .TimelineMarkers
 	position absolute
 	inset 0
-	z-index 100
+	pointer-events none
+
+	&.active
+		pointer-events auto
 
 .cursor
 	opacity 0.5

diff --git a/src/components/Timeline/TimelineShot.vue b/src/components/Timeline/TimelineShot.vue
@@ -162,8 +162,8 @@ function printShotInfo(shot: Shot) {
 	background var(--tq-color-primary-container)
 
 .empty
-	background var(--tq-color-input)
-	opacity 0.2
+	background transparent
+	opacity 0.8
 
 	&:hover
 		background var(--tq-color-input-hover)

diff --git a/src/stores/timeline.ts b/src/stores/timeline.ts
@@ -15,7 +15,7 @@ export const useTimelineStore = defineStore('timeline', () => {
 
 	const currentTool = appConfig.ref<'select' | 'marker' | 'pencil' | 'eraser'>(
 		'timeline.currentTool',
-		'marker'
+		'select'
 	)
 
 	const toolOptions = appConfig.ref<Marker & PencilOption>('tool.options', {