fix: the wrong finger to Base

examples/main.ts

@@ -82,9 +82,10 @@ const {
 const app = createApp(document.querySelector('#milestone'))
 
 const circle = use(nc.createCircle(100, {
-  x: 50,
-  y: 50,
-})).animate(nc.move(100, 100)(120))
+  x: 0,
+  y: 0,
+}))
+circle.animate(nc.move(100, 100)(120))
 
 const scene = nc.createScene(
   circle

packages/basic/src/widgets/arc.ts

@@ -1,7 +1,7 @@
-import type { Prop } from '@newcar/core'
+import type { ConvertToProp, Prop } from '@newcar/core'
 import { changed, def, defineWidgetBuilder } from '@newcar/core'
 import { deepMerge } from '@newcar/utils'
-import type { PathOptions, PathStyle } from './path'
+import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
 
 export interface ArcOptions extends PathOptions {
@@ -10,8 +10,15 @@ export interface ArcOptions extends PathOptions {
 
 export interface ArcStyle extends PathStyle { }
 
+export interface Arc extends Path {
+  style: ConvertToProp<ArcStyle>
+  radius: Prop<number>
+  from: Prop<number>
+  to: Prop<number>
+}
+
 export function createArc(radius: number, from: number, to: number, options: ArcOptions) {
-  return defineWidgetBuilder((ck) => {
+  return defineWidgetBuilder<Arc>((ck) => {
     const path = createPath(options ?? {})(ck)
     const rect = ck.LTRBRect(
       -radius,

packages/basic/src/widgets/circle.ts

@@ -1,9 +1,11 @@
 import { def, defineWidgetBuilder } from '@newcar/core'
 import { deepMerge } from '@newcar/utils'
-import type { ArcOptions } from './arc'
+import type { Arc, ArcOptions } from './arc'
 import { createArc } from './arc'
 
-export function createCircle(radius: number, options: ArcOptions) {
+export interface Circle extends Arc {}
+
+export function createCircle(radius: number, options?: ArcOptions) {
   return defineWidgetBuilder((ck) => {
     const arc = createArc(radius, 0, 360, options)(ck)
     const radiusProp = def(radius)

packages/basic/src/widgets/figure.ts

@@ -1,7 +1,8 @@
 import type { Shader, StrokeCap, StrokeJoin } from '@newcar/utils'
 import { Color, deepMerge, str2StrokeCap, str2StrokeJoin } from '@newcar/utils'
-import type { BaseOptions, BaseStyle } from '@newcar/core'
+import type { Base, BaseOptions, BaseStyle, ConvertToProp } from '@newcar/core'
 import { changed, createBase, def, defineWidgetBuilder } from '@newcar/core'
+import type { Paint } from 'canvaskit-wasm'
 
 export interface FigureStyle extends BaseStyle {
   border?: boolean
@@ -23,8 +24,14 @@ export interface FigureOptions extends BaseOptions {
   style?: FigureStyle
 }
 
+export interface Figure extends Base {
+  style: ConvertToProp<FigureStyle>
+  fillPaint: Paint
+  strokePaint: Paint
+}
+
 export function createFigure(options?: FigureOptions) {
-  return defineWidgetBuilder((ck) => {
+  return defineWidgetBuilder<Figure>((ck) => {
     const base = createBase(options ?? {})(ck)
     options.style ??= {}
     const style = {
@@ -46,7 +53,6 @@ export function createFigure(options?: FigureOptions) {
 
     const strokePaint = new ck.Paint()
     const fillPaint = new ck.Paint()
-    // console.log(style.borderColor.value)
     strokePaint.setColor(style.borderColor.value.toFloat4())
     strokePaint.setStrokeWidth(style.borderWidth.value)
     if (style.shader.value || style.borderShader.value)

packages/basic/src/widgets/line.ts

@@ -1,9 +1,8 @@
-import type { Prop } from '@newcar/core'
+import type { ConvertToProp, Prop } from '@newcar/core'
 import { changed, def, defineWidgetBuilder } from '@newcar/core'
-import { Canvas, CanvasKit } from 'canvaskit-wasm'
 import { deepMerge } from '@newcar/utils'
 import type { Vector2 } from '../utils/vector2'
-import type { PathOptions, PathStyle } from './path'
+import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
 
 export interface LineOptions extends PathOptions {
@@ -18,15 +17,21 @@ export interface LineStyle extends PathStyle {
   width?: number
 }
 
+export interface Line extends Path {
+  style: ConvertToProp<LineStyle>
+  from: Prop<Vector2>
+  to: Prop<Vector2>
+}
+
 export function createLine(from: Vector2, to: Vector2, options: LineOptions) {
-  return defineWidgetBuilder((ck) => {
+  return defineWidgetBuilder<Line>((ck) => {
     const path = createPath(options)(ck)
 
     const fromProp = def(from)
     const toProp = def(to)
     options.style ??= {}
     const style = {
-      width: options.style.width ?? 2,
+      width: def(options.style.width ?? 2),
     }
 
     path.path.moveTo(from[0], from[1])

packages/basic/src/widgets/path.ts

@@ -1,7 +1,8 @@
 import { deepMerge } from '@newcar/utils'
-import type { Canvas, EmbindEnumEntity, InputCommands, Path } from 'canvaskit-wasm'
+import type { Canvas, EmbindEnumEntity, InputCommands, Path as skPath } from 'canvaskit-wasm'
+import type { ConvertToProp } from '@newcar/core'
 import { defineWidgetBuilder } from '../../../core/src/widget'
-import type { FigureOptions, FigureStyle } from './figure'
+import type { Figure, FigureOptions, FigureStyle } from './figure'
 import { createFigure } from './figure'
 
 export interface PathOptions extends FigureOptions {
@@ -10,8 +11,16 @@ export interface PathOptions extends FigureOptions {
 
 export interface PathStyle extends FigureStyle {}
 
+export interface Path extends Figure {
+  style: ConvertToProp<PathStyle>
+  path: skPath
+  addPathFromPathString: (pathString: string) => void
+  addPathFromCmds: (cmds: InputCommands) => void
+  addPathFromOp: (one: skPath, two: skPath, op: EmbindEnumEntity) => void
+}
+
 export function createPath(options?: PathOptions) {
-  return defineWidgetBuilder((ck) => {
+  return defineWidgetBuilder<Path>((ck) => {
     const figure = createFigure(options ?? {})(ck)
 
     const path = new ck.Path()
@@ -28,7 +37,7 @@ export function createPath(options?: PathOptions) {
       )
     }
 
-    function addPathFromOp(one: Path, two: Path, op: EmbindEnumEntity) {
+    function addPathFromOp(one: skPath, two: skPath, op: EmbindEnumEntity) {
       path.addPath(
         ck.Path.MakeFromOp(one, two, op),
       )

packages/basic/src/widgets/rect.ts

@@ -1,6 +1,7 @@
+import type { ConvertToProp } from '@newcar/core'
 import { def, defineWidgetBuilder } from '@newcar/core'
 import { deepMerge } from '@newcar/utils'
-import type { PathOptions, PathStyle } from './path'
+import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
 
 export interface RectOptions extends PathOptions {
@@ -23,8 +24,12 @@ export interface RectStyle extends PathStyle {
   | [number, number, number, number, number, number, number, number]
 }
 
+export interface Rect extends Path {
+  style: ConvertToProp<RectStyle>
+}
+
 export function createRect(width: number, length: number, options: RectOptions) {
-  return defineWidgetBuilder((ck) => {
+  return defineWidgetBuilder<Rect>((ck) => {
     const path = createPath(options ?? {})(ck)
     const rect = ck.LTRBRect(0, 0, width, length)
     path.path.addRect(rect)

packages/core/src/base.ts

@@ -58,12 +58,7 @@ export function createBase(options: BaseOptions) {
 
     let current: Animate<any> | undefined
 
-    function render(_canvas: Canvas) {
-      // ...
-    }
-
-    return {
-      ...options,
+    const base = {
       x,
       y,
       centerX,
@@ -80,36 +75,44 @@ export function createBase(options: BaseOptions) {
         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
-          }
+      update,
+    }
+
+    function render(_canvas: Canvas) {
+      // ...
+    }
+
+    function update(canvas: Canvas, elapsed: number, renderFunction: (canvas: Canvas) => any) {
+      canvas.save()
+      const ctx = {
+        widget: base,
+        elapsed,
+        ck,
+      }
+      if (!current) {
+        current = animates.shift() as any
+        if (current && current.init) {
+          current.init(ctx)
         }
-        for (const child of children) {
-          child.update(canvas, elapsed, child.render)
+      }
+      else {
+        const finished = current.animate(ctx)
+        if (finished) {
+          if (current.after)
+            current.after(ctx)
+          current = undefined
         }
-        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()
-      },
+      }
+      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()
     }
+
+    return base
   })
 }