feat: add ruler on timeline of studio

Author: sheepbox8646

packages/app/src/App.vue

@@ -23,7 +23,9 @@ import Widgets from './components/Widgets.vue'
           />
         </div>
         <div class="w-3/4 overflow-auto">
-          <Timeline />
+          <Timeline :widget="{
+            duration: 1000
+          }"/>
         </div>
       </div>
     </div>

packages/app/src/components/Preview.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** @ts-expect-error virtual-import */
-import Animation from 'virtual:user-main'
+// import Animation from 'virtual:user-main'
 import { Motion } from '@vue-motion/lib'
 import { ref, watch } from 'vue'
 // import TestAnimation from './__test__/TestAnimation.vue'
@@ -34,7 +34,7 @@ else
         id="motion" :width="width" :height="height" :scale="dev ? zoom : (null as any)" :min-width="dev ? (width * zoom) : (null as any)"
         :min-height="dev ? (height * zoom) : (null as any)"
       >
-        <Animation/>
+        <!-- <Animation/> -->
         <!-- <TestAnimation/> -->
       </Motion>
     </div>

packages/app/src/components/Timeline.vue

@@ -1,5 +1,31 @@
+<script setup lang="ts">
+const { widget } = defineProps<{
+  widget: {
+    duration: number
+  }
+}>()
+</script>
+
 <template>
   <div class="w-full h-full overflow-scroll">
-    test
+    <div class="mx-10">
+      <svg
+        :style="{
+          width: `${widget.duration * 10}px`,
+          textAlign: 'center'
+        }"
+      >
+        <line
+          :x1="0" :y1="0" :x2="0" :y2="35
+          " stroke="grey" stroke-width="1"
+        />
+        <line
+          v-for="i in (widget.duration * 10 - 10)" :key="i" :x1="i * 10" :y1="0" :x2="i * 10" :y2="i % 10 === 0 ? 35 : i % 5 === 0 ? 25 : 15
+          " stroke="grey" stroke-width="1"
+        />
+        <text :x="0" :y="50">0</text>
+        <text :x="i * 100" :y="50" v-for="i in (widget.duration - 1)" :key="i">{{ i }}</text>
+      </svg>
+    </div>
   </div>
-</template>
+</template>

packages/app/src/output.css

@@ -558,6 +558,14 @@ video {
   position: absolute;
 }
 
+.left-0 {
+  left: 0px;
+}
+
+.top-0 {
+  top: 0px;
+}
+
 .top-10 {
   top: 2.5rem;
 }
@@ -567,6 +575,16 @@ video {
   margin-right: 0.25rem;
 }
 
+.my-10 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
 .mr-5 {
   margin-right: 1.25rem;
 }

packages/app/vite.config.ts

@@ -7,6 +7,6 @@ export default defineConfig({
     vue(),
   ],
   define: {
-    __DEV__: process.env.NODE_ENV === 'development',
+    __D__: process.env.NODE_ENV === 'development',
   },
 })

test/src/App.vue

@@ -1,35 +1,42 @@
 <script setup lang="ts">
-import { usePlayer, useWidget } from '@vue-motion/core'
-import { Motion, grow } from '@vue-motion/lib'
-import { onMounted } from 'vue'
+import { defineAnimation, usePlayer, useWidget } from '@vue-motion/core'
+import { Line, Motion, grow } from '@vue-motion/lib'
+import { onMounted, ref } from 'vue'
 import type { MathFunction } from '@vue-motion/extension-math'
 import type { BubbleChart } from '@vue-motion/extension-chart'
-import { BarChart, ChartData, ChartDataset, ChartUtil, LineChart, MixedChart } from '@vue-motion/extension-chart'
+// import { BarChart, ChartData, ChartDataset, ChartUtil, LineChart, MixedChart } from '@vue-motion/extension-chart'
 import { DateTime, Duration } from 'luxon'
 
-const fn1 = useWidget<InstanceType<typeof MathFunction>>('fn1')
-const fn2 = useWidget<InstanceType<typeof MathFunction>>('fn2')
-const fn3 = useWidget<InstanceType<typeof MathFunction>>('fn3')
-const chart1 = useWidget<InstanceType<typeof BubbleChart>>('chart1')
+// const fn1 = useWidget<InstanceType<typeof MathFunction>>('fn1')
+// const fn2 = useWidget<InstanceType<typeof MathFunction>>('fn2')
+// const fn3 = useWidget<InstanceType<typeof MathFunction>>('fn3')
+const line = useWidget<InstanceType<typeof BubbleChart>>('www')
+
+const x = ref(0)
+
+const change = defineAnimation((_context, progress) => {
+  x.value = progress * 4000
+})
 
 onMounted(() => {
   const { play, useAnimation } = usePlayer()
 
-  useAnimation(fn1)
-    .animate(grow, { duration: 1 })
-  useAnimation(fn2)
-    .animate(grow, { duration: 1 })
-  useAnimation(fn3)
-    .animate(grow, { duration: 1 })
-  useAnimation(chart1)
-    .animate(grow, { duration: 4 })
+  // useAnimation(fn1)
+  //   .animate(grow, { duration: 1 })
+  // useAnimation(fn2)
+  //   .animate(grow, { duration: 1 })
+  // useAnimation(fn3)
+  //   .animate(grow, { duration: 1 })
+  useAnimation(line)
+    .animate(change, { duration: 4 })
 
   play()
 })
 </script>
 
 <template>
   <Motion id="motion" :width="1000" :height="1000">
+    <Line :from="[0, 0]" :to="[x, 1000]" wid="www" :border-width="x"/>
     <!--    <Group> -->
     <!--      <NumberPlane :ranges-x="[-5, 5]" :ranges-y="[-5, 5]" :grid="false"/> -->
     <!--      <MathFunction :fn="(x) => Math.sin(x)" color="skyblue" :domain="[0, 0]" :ranges="[0, 5]" wid="fn1" /> -->
@@ -39,7 +46,7 @@ onMounted(() => {
     <!--    <Group> -->
     <!--      <NumberPlane :ranges-x="[0, 10]" :ranges-y="[0, 10]" /> -->
     <!--    </Group> -->
-    <MixedChart
+    <!-- <MixedChart
       :labels="ChartUtil.dateSequence(
         DateTime.fromISO('2021-01-01').setLocale('en-US'),
         Duration.fromObject({ months: 4 }),
@@ -61,8 +68,8 @@ onMounted(() => {
           <ChartData :cross="1" />
           <ChartData :cross="3" />
           <ChartData :cross="2" />
-          <!--        <ChartData :cross="1.5" :index="DateTime.fromISO('2021-03-15').setLocale('en-US')" :weight="10" /> -->
-        </ChartDataset>
+          <ChartData :cross="1.5" :index="DateTime.fromISO('2021-03-15').setLocale('en-US')" :weight="10" /> -->
+    <!-- </ChartDataset>
       </BarChart>
       <LineChart>
         <ChartDataset label="Line1" :style="{ borderColor: '#00f', backgroundColor: '#00f' }">
@@ -79,6 +86,6 @@ onMounted(() => {
           <ChartData :cross="1.5" :index="DateTime.fromISO('2021-03-15').setLocale('en-US')" :weight="10" />
         </ChartDataset>
       </LineChart>
-    </MixedChart>
+    </MixedChart> -->
   </Motion>
 </template>