fix: incorrect coordinates

packages/lib/src/motion.vue

@@ -17,10 +17,10 @@ provide('motion-height', props.height)
 <template>
   <svg
     :viewBox="`0 0 ${width} ${height}`" style="background-color: black;" :style="{
-      transform: `scale(${props.scale})`,
-      minWidth: `${props.minWidth}px`,
-      minHeight: `${props.minHeight}px`,
-    }"
+      transform: `scale(${props.scale ?? 1})`,
+      minWidth: `${props.minWidth ?? width}px`,
+      minHeight: `${props.minHeight ?? height}px`,
+    }" :width="width" :height="height"
   >
     <g v-bind="figure({ x: width / 2, y: height / 2 })">
       <slot />

test/src/App.vue

@@ -1,52 +1,43 @@
 <script setup lang="ts">
 import { usePlayer, useWidget } from '@vue-motion/core'
-import { Group, Motion, grow } from '@vue-motion/lib'
+import { Group, Motion, flash, grow, indicate, rotate, showCircleCreationThenDestructionAround } from '@vue-motion/lib'
 import { onMounted } from 'vue'
 import { MathFunction } from '@vue-motion/extension-math'
 import { NumberPlane, PolarPlane } from '@vue-motion/extension-math'
 import { Column, Container, Row } from '@vue-motion/extension-layout'
 
-const fn1 = useWidget<InstanceType<typeof MathFunction>>('fn1')
-const fn2 = useWidget<InstanceType<typeof MathFunction>>('fn2')
-const fn3 = useWidget<InstanceType<typeof MathFunction>>('fn3')
+const plane = useWidget<InstanceType<typeof PolarPlane>>('plane')
+const plane2 = useWidget<InstanceType<typeof PolarPlane>>('plane2')
+const plane3 = useWidget<InstanceType<typeof PolarPlane>>('plane3')
+const plane4 = useWidget<InstanceType<typeof PolarPlane>>('plane4')
 
 onMounted(() => {
   const { play, useAnimation } = usePlayer()
 
-  useAnimation(fn1)
-    .animate(grow, { duration: 1 })
-  useAnimation(fn2)
-    .animate(grow, { duration: 1 })
-  useAnimation(fn3)
-    .animate(grow, { duration: 1 })
+  useAnimation(plane)
+    .animate(rotate, { duration: 10, offset: -1000 })
+  useAnimation(plane4)
+    .animate(rotate, { duration: 10, offset: 1000 })
+  useAnimation(plane2)
+    .animate(rotate, { duration: 10, offset: -1000 })
+  useAnimation(plane3)
+    .animate(rotate, { duration: 10, offset: 1000 })
 
   play()
 })
 </script>
 
 <template>
-  <Motion id="motion" :width="1000" :height="3000">
+  <Motion id="motion" :width="1600" :height="900">
     <!--    <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" /> -->
     <!--      <MathFunction :fn="(x) => Math.cos(x)" color="red" :domain="[0, 0]" :ranges="[0, 5]" wid="fn2" /> -->
     <!--      <MathFunction :fn="(x) => Math.tan(x)" color="green" :domain="[0, 0]" :ranges="[0, 5]" wid="fn3" /> -->
     <!--    </Group> -->
-    <Group>
-      <Column :height="6000">
-        <Container>
-          <PolarPlane :radius="300" />
-        </Container>
-        <Container>
-          <PolarPlane :radius="300" />
-        </Container>
-        <!-- <Container>
-          <PolarPlane :radius="300" />
-        </Container>
-        <Container>
-          <PolarPlane :radius="300" />
-        </Container> -->
-      </Column>
-    </Group>
+    <PolarPlane :radius="300" wid="plane" />
+    <NumberPlane :ranges-x="[-4, 4]" :ranges-y="[-4, 4]" wid="plane2" />
+    <NumberPlane :ranges-x="[-6, 6]" :ranges-y="[-6, 6]" wid="plane3" />
+    <PolarPlane :radius="500" wid="plane4" />
   </Motion>
 </template>