refactor: RENAME types XXXMixin to XXXIns

extensions/animations/src/index.ts

@@ -17,7 +17,7 @@ export const setups = [
 ];
 
 declare module "@vue-motion/lib" {
-  export interface PositionalMixin {
+  export interface PositionalIns {
     focusOn: (params?: any) => void;
   }
 }

extensions/math/src/math-function.vue

@@ -41,7 +41,6 @@ function generateSvgPath(
     // Convert the values of a mathematical function to SVG coordinates
     const svgX = (x - xMin) * scaleX;
     const svgY = (yMax - y) * scaleY; // Invert the y-axis to conform to the SVG coordinate system
-
     path.push(
       `${x === xMin || svgY > 1500 || svgY < -1500 ? "M" : "L"} ${svgX} ${svgY}`,
     );

extensions/math/src/number-plane.vue

@@ -71,35 +71,36 @@ const domain = [options.domainX.sort(), options.domainY.sort()];
     </Text>
     <g v-if="options.grid">
       <Line
-        v-for="i in domain[0][1] - domain[0][0]"
-        :key="i"
+        v-for="i in domain[0][1] - domain[0][0] + 1"
+        :key="`v-${i}`"
         :from="[
           i * (options.intervalX ?? 100),
-          options.domainY[0] * (options.intervalY ?? 100),
+          domain[1][0] * (options.intervalY ?? 100),
         ]"
         :to="[
           i * (options.intervalX ?? 100),
-          options.domainY[1] * (options.intervalY ?? 100),
+          domain[1][1] * (options.intervalY ?? 100),
         ]"
         :border-color="options.gridColor ?? 'white'"
         :border-width="options.gridWidth ?? 1"
         :x="(options.domainX[0] - 1) * (options.intervalX ?? 100)"
         :progress="options.progress ?? 1"
+        :scale-y="-1"
       />
       <Line
-        v-for="i in domain[1][1] - domain[1][0]"
-        :key="i"
+        v-for="i in domain[1][1] - domain[1][0] + 1"
+        :key="`h-${i}`"
         :from="[
-          options.domainX[0] * (options.intervalX ?? 100),
+          domain[0][0] * (options.intervalX ?? 100),
           i * (options.intervalY ?? 100),
         ]"
         :to="[
-          options.domainX[1] * (options.intervalX ?? 100),
+          domain[0][1] * (options.intervalX ?? 100),
           i * (options.intervalY ?? 100),
         ]"
         :border-color="options.gridColor ?? 'white'"
         :border-width="options.gridWidth ?? 1"
-        :y="(options.domainY[0] - 1) * (options.intervalY ?? 100)"
+        :y="(options.intervalY ?? 100) * options.domainY[0]"
         :progress="options.progress ?? 1"
       />
     </g>

extensions/three/src/widget3d.ts

@@ -4,11 +4,10 @@ export interface Widget3DOptions extends WidgetOptions {
   x?: number;
   y?: number;
   z?: number;
-  rx?: number;
-  ry?: number;
-  rz?: number;
+  rotationX?: number;
+  rotationY?: number;
+  rotationZ?: number;
   scaleX?: number;
   scaleY?: number;
   scaleZ?: number;
-  opacity?: number;
 }

packages/lib/src/animations/color.ts

@@ -7,7 +7,7 @@ export interface Colorable {
   color?: string;
 }
 
-export interface ColorableMixin {
+export interface ColorableIns {
   discolorate: (offset: string) => void;
   discolorateTo: (to: string) => void;
   discolorateBorder: (offset: string) => void;

packages/lib/src/animations/fade.ts

@@ -5,7 +5,7 @@ import { interpolator } from "../interpolator";
 export interface HasOpacity {
   opacity?: number;
 }
-export interface HasOpacityMixin extends HasOpacity {
+export interface HasOpacityIns extends HasOpacity {
   fadeTo: (to: number, params?: AnimationParams) => void;
   fadeIn: (params?: AnimationParams) => void;
   fadeOut: (params?: AnimationParams) => void;

packages/lib/src/animations/grow.ts

@@ -4,7 +4,7 @@ export interface Growable {
   progress?: number;
 }
 
-export interface GrowableMixin extends Growable {
+export interface GrowableIns extends Growable {
   grow: () => void;
 }
 

packages/lib/src/animations/move.ts

@@ -7,7 +7,7 @@ export interface Positional {
   y?: number;
 }
 
-export interface PositionalMixin extends Positional {
+export interface PositionalIns extends Positional {
   move: (offsetX: number, offsetY: number, options?: AnimationParams) => void;
   moveTo: (toX: number, toY: number, options?: AnimationParams) => void;
   moveOnPath: (path: string, options?: AnimationParams) => void;

packages/lib/src/animations/path.ts

@@ -24,11 +24,16 @@ export const moveOnFunction = defineAnimation<
       x: number;
       y: number;
     };
+    divisionX?: number;
+    divisionY?: number;
   }
 >((target, context) => {
+  const divisionX = context.divisionX ?? 1;
+  const divisionY = context.divisionY ?? 1;
+
   return (progress) => {
     const point = context.path(progress);
-    target.x = point.x;
-    target.y = point.y;
+    target.x = point.x * divisionX;
+    target.y = point.y * divisionY;
   };
 });

packages/lib/src/animations/rotate.ts

@@ -6,7 +6,7 @@ export interface Rotatable {
   rotation?: number;
 }
 
-export interface RotatableMixin extends Rotatable {
+export interface RotatableIns extends Rotatable {
   rotate: (offset: number, options?: AnimationParams) => void;
   rotateTo: (to: number, options?: AnimationParams) => void;
 }

packages/lib/src/animations/scale.ts

@@ -7,7 +7,7 @@ export interface Scalable {
   scaleY?: number;
 }
 
-export interface ScalableMixin extends Scalable {
+export interface ScalableIns extends Scalable {
   scale: (offsetX: number, offsetY: number, options?: AnimationParams) => void;
   scaleTo: (toX: number, toY: number, options?: AnimationParams) => void;
 }

packages/lib/src/animations/trace.ts

@@ -6,7 +6,7 @@ import type { HasOpacity } from "./fade";
 export interface Strokable {
   borderInterval: number[];
 }
-export interface StrokableMixin extends Strokable {
+export interface StrokableIns extends Strokable {
   trace: (origin: number, options?: AnimationParams) => void;
   traceFill: (origin: number, options?: AnimationParams) => void;
 }

packages/lib/src/animations/zoom.ts

@@ -6,7 +6,7 @@ export interface HasScale {
   scaleX?: number;
   scaleY?: number;
 }
-export interface HasScaleMixin extends HasScale {
+export interface HasScaleIns extends HasScale {
   zoomTo: (toX: number, toY: number, options?: AnimationParams) => void;
   zoomIn: (options?: AnimationParams) => void;
   zoomOut: (options?: AnimationParams) => void;

packages/lib/src/widgets/arc.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineWidget } from "@vue-motion/core";
 import { computed, defineProps, withDefaults } from "vue";
-import type { Growable, GrowableMixin } from "../animations";
+import type { Growable, GrowableIns } from "../animations";
 import type { Vector } from "../animations/typings";
 import { type FigureOptions, figure } from "./figure";
 
@@ -11,7 +11,7 @@ export interface ArcOptions extends FigureOptions, Growable {
   to?: number;
 }
 
-export type ArcMixin = ArcOptions & GrowableMixin;
+export type ArcIns = ArcOptions & GrowableIns;
 
 const props = withDefaults(defineProps<ArcOptions>(), {
   progress: 1,

packages/lib/src/widgets/arrow.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { Vector } from "../animations/typings";
+import type { FigureOptions } from "./figure";
+import { defineWidget } from "@vue-motion/core";
+import Polygon from "./polygon.vue";
+import { widget, WidgetIns } from "./widget";
+import type { Growable } from "../animations";
+
+export interface ArrowOptions extends FigureOptions, Growable {
+  from: Vector;
+  to: Vector;
+}
+
+const props = defineProps<ArrowOptions>();
+const options = defineWidget(props);
+
+const current = computed(() => {
+  const dx = options.to[0] - options.from[0];
+  const dy = options.to[1] - options.from[1];
+  return {
+    x: options.from[0] + dx * (options.progress ?? 1),
+    y: options.from[1] + dy * (options.progress ?? 1),
+  };
+});
+
+const rotation = computed(() => {
+  const delta = [
+    options.to[0] - options.from[0],
+    options.to[1] - options.from[1],
+  ];
+  return Math.atan2(delta[1], delta[0]);
+});
+
+export type ArrowIns = ArrowOptions & WidgetIns;
+</script>
+
+<template>
+  <g v-bind="widget(options)">
+    <line
+      :x1="options.from[0]"
+      :y1="options.from[1]"
+      :x2="current.x"
+      :y2="current.y"
+    />
+    <g
+      :transform="`translate(${current.x}, ${current.y}) rotate(${(rotation * 180) / Math.PI})`"
+    >
+      <Polygon
+        :points="[
+          [0, -10],
+          [0, 10],
+          [Math.sqrt(300), 0],
+        ]"
+      />
+    </g>
+  </g>
+</template>

packages/lib/src/widgets/circle.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface CircleOptions extends FigureOptions {
   r: number;
   cx: number;
   cy: number;
 }
-export type CircleMixin = CircleOptions & FigureMixin;
+export type CircleIns = CircleOptions & FigureIns;
 
 const props = defineProps<CircleOptions>();
 const options = defineWidget(props);

packages/lib/src/widgets/ellipse.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface EllipseOptions extends FigureOptions {
@@ -13,7 +13,7 @@ export interface EllipseOptions extends FigureOptions {
   height?: number;
   radius?: number;
 }
-export type EllipseMixin = EllipseOptions & FigureMixin;
+export type EllipseIns = EllipseOptions & FigureIns;
 
 const props = defineProps<EllipseOptions>();
 const options = defineWidget(props);

packages/lib/src/widgets/figure.ts

@@ -1,4 +1,4 @@
-import type { WidgetMixin, WidgetOptions } from "./widget";
+import type { WidgetIns, WidgetOptions } from "./widget";
 import { widget } from "./widget";
 
 export interface FigureOptions extends WidgetOptions {
@@ -9,7 +9,7 @@ export interface FigureOptions extends WidgetOptions {
   borderInterval?: number[];
 }
 
-export type FigureMixin = FigureOptions & WidgetMixin;
+export type FigureIns = FigureOptions & WidgetIns;
 
 export function figure(options: FigureOptions) {
   const props = widget(options) as ReturnType<typeof widget> & {

packages/lib/src/widgets/image.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface ImageOptions extends FigureOptions {
@@ -10,7 +10,7 @@ export interface ImageOptions extends FigureOptions {
   height: number;
   preserveAspectRatio?: string;
 }
-export type ImageMixin = ImageOptions & FigureMixin;
+export type ImageIns = ImageOptions & FigureIns;
 
 const props = defineProps<ImageOptions>();
 const options = defineWidget(props);

packages/lib/src/widgets/index.ts

@@ -1,31 +1,33 @@
 export { widget } from "./widget";
-export type { WidgetOptions, WidgetMixin } from "./widget";
+export type { WidgetOptions, WidgetIns } from "./widget";
 export { figure } from "./figure";
-export type { FigureOptions, FigureMixin } from "./figure";
+export type { FigureOptions, FigureIns } from "./figure";
 export { default as Group } from "./group.vue";
 
 export { default as Arc } from "./arc.vue";
-export type { ArcOptions, ArcMixin } from "./arc.vue";
+export type { ArcOptions, ArcIns } from "./arc.vue";
 export { default as Line } from "./line.vue";
-export type { LineOptions, LineMixin } from "./line.vue";
+export type { LineOptions, LineIns } from "./line.vue";
 export { default as Polygon } from "./polygon.vue";
-export type { PolygonOptions, PolygonMixin } from "./polygon.vue";
+export type { PolygonOptions, PolygonIns } from "./polygon.vue";
 export { default as Rect } from "./rect.vue";
-export type { RectOptions, RectMixin } from "./rect.vue";
+export type { RectOptions, RectIns } from "./rect.vue";
 export { default as Ellipse } from "./ellipse.vue";
-export type { EllipseOptions, EllipseMixin } from "./ellipse.vue";
+export type { EllipseOptions, EllipseIns } from "./ellipse.vue";
 export { default as Circle } from "./circle.vue";
-export type { CircleOptions, CircleMixin } from "./circle.vue";
+export type { CircleOptions, CircleIns } from "./circle.vue";
 export { default as Text } from "./text.vue";
-export type { TextOptions, TextMixin } from "./text.vue";
+export type { TextOptions, TextIns } from "./text.vue";
 export { default as TextUnit } from "./text-unit.vue";
 export { default as Image } from "./image.vue";
 export type { ImageOptions } from "./image.vue";
 export { default as Mask } from "./mask.vue";
 export type { MaskOptions } from "./mask.vue";
 export { default as Path } from "./path.vue";
-export type { PathOptions, PathMixin } from "./path.vue";
+export type { PathOptions, PathIns } from "./path.vue";
 export { default as WebView } from "./webview.vue";
-export type { WebViewOptions, WebViewMixin } from "./webview.vue";
+export type { WebViewOptions, WebViewIns } from "./webview.vue";
 export { default as Video } from "./video.vue";
 export type { VideoOptions } from "./video.vue";
+export { default as Arrow } from "./arrow.vue";
+export type { ArrowOptions, ArrowIns } from "./arrow.vue";

packages/lib/src/widgets/line.vue

@@ -3,14 +3,14 @@ import { defineProps, computed } from "vue";
 import { defineWidget } from "@vue-motion/core";
 import type { Vector } from "../animations/typings";
 import type { Growable } from "../animations";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface LineOptions extends FigureOptions, Growable {
   from: Vector;
   to: Vector;
 }
-export type LineMixin = LineOptions & FigureMixin;
+export type LineIns = LineOptions & FigureIns;
 
 const props = defineProps<LineOptions>();
 const options = defineWidget(props);

packages/lib/src/widgets/path.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { defineWidget } from "@vue-motion/core";
-import type { FigureMixin, FigureOptions } from "./figure";
+import type { FigureIns, FigureOptions } from "./figure";
 import { figure } from "./figure";
 
 export interface PathOptions extends FigureOptions {
   d: string;
 }
-export type PathMixin = PathOptions & FigureMixin;
+export type PathIns = PathOptions & FigureIns;
 
 const props = defineProps<PathOptions>();
 const options = defineWidget(props);