feat(50%): move the basic lib of v1.0.0 into next version

packages/basic/src/animations/index.ts

@@ -0,0 +1 @@
+export * from './move'

packages/basic/src/animations/move.ts

@@ -0,0 +1,6 @@
+import type { Base } from '@newcar/core'
+import { withProcess } from '@newcar/core'
+
+withProcess<Base>((ctx, process) => {
+  ctx.widget.x.value = ctx.widget.x.value * process
+})

packages/basic/src/index.ts

@@ -1 +1,2 @@
+export * from './animations'
 export * from './widgets'

packages/basic/src/utils/vector2.ts

@@ -0,0 +1 @@
+export type Vector2 = [number, number]

packages/basic/src/widgets/arc.ts

@@ -1,4 +1,5 @@
-import { defineWidgetBuilder } from '@newcar/core'
+import type { Prop } from '@newcar/core'
+import { changed, def, defineWidgetBuilder } from '@newcar/core'
 import { deepMerge } from '@newcar/utils'
 import type { PathOptions, PathStyle } from './path'
 import { createPath } from './path'
@@ -20,6 +21,22 @@ export function createArc(radius: number, from: number, to: number, options: Arc
     )
     path.path.addArc(rect, from, to)
 
+    const radiusProp = def(radius)
+    const fromProp = def(from)
+    const toProp = def(to)
+
+    changed(radiusProp, (v: Prop<number>) => {
+      rect.set([-v.value, -v.value, v.value, v.value])
+    })
+    changed(fromProp, (v: Prop<number>) => {
+      path.path.reset()
+      path.path.addArc(rect, v.value, toProp.value)
+    })
+    changed(toProp, (v: Prop<number>) => {
+      path.path.reset()
+      path.path.addArc(rect, fromProp.value, v.value)
+    })
+
     return deepMerge(path, {
       from,
       to,

packages/basic/src/widgets/circle.ts

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

packages/basic/src/widgets/line.ts

@@ -0,0 +1,50 @@
+import type { 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 { createPath } from './path'
+
+export interface LineOptions extends PathOptions {
+  style?: LineStyle
+}
+
+export interface LineStyle extends PathStyle {
+
+  /**
+   * The line width of this line.
+   */
+  width?: number
+}
+
+export function createLine(from: Vector2, to: Vector2, options: LineOptions) {
+  return defineWidgetBuilder((ck) => {
+    const path = createPath(options)(ck)
+
+    const fromProp = def(from)
+    const toProp = def(to)
+    options.style ??= {}
+    const style = {
+      width: options.style.width ?? 2,
+    }
+
+    path.path.moveTo(from[0], from[1])
+    path.path.lineTo(to[0], to[1])
+
+    function reset(v: Prop<Vector2>) {
+      path.path.reset()
+      path.path.moveTo(v.value[0], v.value[1])
+      path.path.lineTo(v.value[0], v.value[1])
+    }
+
+    changed(fromProp, reset)
+    changed(toProp, reset)
+
+    return deepMerge(path, {
+      style,
+      from: fromProp,
+      to: toProp,
+    })
+  })
+}

packages/core/src/scene.ts

@@ -1,9 +1,10 @@
 import type { Canvas, CanvasKit, Surface } from 'canvaskit-wasm'
 import type { Widget, WidgetBuilder } from './widget'
+import type { Base } from './base'
 
 export interface SceneOptions {}
 
-export function createScene(builder: WidgetBuilder<Widget>, options?: SceneOptions) {
+export function createScene(builder: WidgetBuilder<Base>, options?: SceneOptions) {
   return (ck: CanvasKit) => {
     const player = {
       paused: false,
@@ -20,11 +21,11 @@ export function createScene(builder: WidgetBuilder<Widget>, options?: SceneOptio
     }
 
     return {
-      root,
       player,
       tick,
       ...options,
       ck,
+      root,
     }
   }
 }