fix: types error in Base

dromara · Jun 4, 2024 · 4a85874 · 4a85874
1 parent 49cef35
commit 4a85874
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 59 deletions.
diff --git a/packages/basic/src/widgets/figure.ts b/packages/basic/src/widgets/figure.ts
@@ -1,9 +1,9 @@
 import type { Shader, StrokeCap, StrokeJoin } from '@newcar/utils'
 import { Color, deepMerge, str2StrokeCap, str2StrokeJoin } from '@newcar/utils'
-import type { WidgetOptions, WidgetStyle } from '@newcar/core'
+import type { BaseOptions, BaseStyle } from '@newcar/core'
 import { changed, createBase, def, defineWidgetBuilder } from '@newcar/core'
 
-export interface FigureStyle extends WidgetStyle {
+export interface FigureStyle extends BaseStyle {
   border?: boolean
   borderColor?: Color
   borderShader?: Shader
@@ -19,7 +19,7 @@ export interface FigureStyle extends WidgetStyle {
   interval?: number[]
 }
 
-export interface FigureOptions extends WidgetOptions {
+export interface FigureOptions extends BaseOptions {
   style?: FigureStyle
 }
 

diff --git a/packages/core/src/base.ts b/packages/core/src/base.ts
@@ -4,10 +4,11 @@ import type { Widget } from './widget'
 import { defineWidgetBuilder } from './widget'
 import type { Animate } from './animation'
 import { defineAnimationContext } from './animation'
+import type { ConvertToProp, Prop } from './prop'
 import { changed, def } from './prop'
 
-export interface WidgetOptions {
-  style?: WidgetStyle
+export interface BaseOptions {
+  style?: BaseStyle
   x?: number
   y?: number
   centerX?: number // The rotation center x of the widget.
@@ -16,7 +17,7 @@ export interface WidgetOptions {
   children?: Widget[]
 }
 
-export interface WidgetStyle {
+export interface BaseStyle {
   scaleX?: number
   scaleY?: number
   rotation?: number
@@ -25,8 +26,20 @@ export interface WidgetStyle {
   antiAlias?: boolean
 }
 
-export function createBase(options: WidgetOptions) {
-  return defineWidgetBuilder((ck) => {
+export interface Base extends Widget {
+  x: Prop<number>
+  y: Prop<number>
+  centerX: Prop<number>
+  centerY: Prop<number>
+  progress: Prop<number>
+  style: ConvertToProp<BaseStyle>
+  children: Widget[]
+  add: (...children: Widget[]) => Base
+  animate: <T extends Widget>(animate: Animate<T>) => Base
+}
+
+export function createBase(options: BaseOptions) {
+  return defineWidgetBuilder<Base>((ck) => {
     const animates: Animate<any>[] = []
     const children: Widget[] = []
     const x = def(options.x ?? 0)
@@ -45,7 +58,11 @@ export function createBase(options: WidgetOptions) {
 
     let current: Animate<any> | undefined
 
-    const base = {
+    function render(_canvas: Canvas) {
+      // ...
+    }
+
+    return {
       ...options,
       x,
       y,
@@ -54,59 +71,45 @@ export function createBase(options: WidgetOptions) {
       progress,
       style,
       children,
-      add,
-      animate,
       render,
-      update,
-    }
-
-    function add(...children: Widget[]) {
-      children.push(...children)
-      return this
-    }
-
-    function animate<T extends Widget>(animate: Animate<T>) {
-      animates.push(animate)
-      return this
-    }
-
-    function render(_canvas: Canvas) {
-      // ...
-    }
-
-    function update(canvas: Canvas, elapsed: number, renderFunction: (canvas: Canvas) => any) {
-      canvas.save()
-      const ctx = defineAnimationContext({
-        widget: base as any,
-        elapsed,
-        ck,
-      })
-      if (!current) {
-        current = animates.shift() as any
-        if (current && current.init) {
-          current.init(ctx)
+      add(...children: Widget[]) {
+        children.push(...children)
+        return this
+      },
+      animate<T extends Widget>(animate: Animate<T>) {
+        animates.push(animate)
+        return this
+      },
+      update(canvas: Canvas, elapsed: number, renderFunction: (canvas: Canvas) => any) {
+        canvas.save()
+        const ctx = defineAnimationContext({
+          widget: this,
+          elapsed,
+          ck,
+        })
+        if (!current) {
+          current = animates.shift() as any
+          if (current && current.init) {
+            current.init(ctx)
+          }
+        }
+        else {
+          const finished = current.animate(ctx)
+          if (finished) {
+            if (current.after)
+              current.after(ctx)
+            current = undefined
+          }
         }
-      }
-      else {
-        const finished = current.animate(ctx)
-        if (finished) {
-          if (current.after)
-            current.after(ctx)
-          current = undefined
+        for (const child of children) {
+          child.update(canvas, elapsed, child.render)
         }
-      }
-      for (const child of children) {
-        child.update(canvas, elapsed, child.render)
-      }
-      canvas.translate(x.value, y.value)
-      canvas.rotate(style.rotation.value, centerX.value, centerY.value)
-      canvas.scale(style.scaleX.value, style.scaleY.value)
-      renderFunction(canvas)
-      canvas.restore()
+        canvas.translate(x.value, y.value)
+        canvas.rotate(style.rotation.value, centerX.value, centerY.value)
+        canvas.scale(style.scaleX.value, style.scaleY.value)
+        renderFunction(canvas)
+        canvas.restore()
+      },
     }
-
-    return base
   })
 }
-
-export type Base = ReturnType<ReturnType<typeof createBase>>
diff --git a/packages/core/src/prop.ts b/packages/core/src/prop.ts
@@ -69,4 +69,8 @@ export function changed<T>(
   }
 }
 
+export type ConvertToProp<T> = {
+  [K in keyof T]: Prop<T[K]>
+}
+
 export { useProp as def }