feat: use, createApp

examples/main.ts

@@ -73,12 +73,20 @@
 
 import * as nc from 'newcar'
 
-const ck = await nc.loadSkia('./node_modules/canvaskit-wasm/bin/canvaskit.wasm')
+const {
+  createApp,
+  ck,
+  use,
+} = await nc.initEngine('./node_modules/canvaskit-wasm/bin/canvaskit.wasm')
 
-const app = nc.createApp(document.querySelector('#milestone'))
+const app = createApp(document.querySelector('#milestone'))
 
 const scene = nc.createScene(
-  nc.createArc(100, 0, 360, {})
+  use(nc.createCircle(100, {
+    x: 50,
+    y: 50,
+  }))
+  .animate(nc.move(100, 100)(100))
 )
 
 app.checkout(scene)

packages/basic/src/animations/move.ts

@@ -1,6 +1,9 @@
 import type { Base } from '@newcar/core'
 import { withProcess } from '@newcar/core'
 
-withProcess<Base>((ctx, process) => {
-  ctx.widget.x.value = ctx.widget.x.value * process
-})
+export function move(x: number, y: number) {
+  return withProcess<Base>((ctx, process) => {
+    ctx.widget.x.value = process * x
+    ctx.widget.y.value = process * y
+  })
+}

packages/basic/src/widgets/arc.ts

@@ -38,9 +38,9 @@ export function createArc(radius: number, from: number, to: number, options: Arc
     })
 
     return deepMerge(path, {
-      from,
-      to,
-      radius,
+      from: fromProp,
+      to: toProp,
+      radius: radiusProp,
     })
   })
 }

packages/basic/src/widgets/figure.ts

@@ -1,8 +1,7 @@
 import type { Shader, StrokeCap, StrokeJoin } from '@newcar/utils'
 import { Color, deepMerge, str2StrokeCap, str2StrokeJoin } from '@newcar/utils'
-import type { WidgetOptions, WidgetStyle } from '../../../core/src/base'
-import { createBase } from '../../../core/src/base'
-import { changed, def, defineWidgetBuilder } from '../../../core/src/widget'
+import type { WidgetOptions, WidgetStyle } from '@newcar/core'
+import { changed, createBase, def, defineWidgetBuilder } from '@newcar/core'
 
 export interface FigureStyle extends WidgetStyle {
   border?: boolean

packages/basic/src/widgets/index.ts

@@ -1,4 +1,5 @@
 export * from './arc'
+export * from './circle'
 export * from './figure'
 export * from './path'
 export * from './rect'

packages/basic/src/widgets/path.ts

@@ -35,6 +35,7 @@ export function createPath(options?: PathOptions) {
     }
 
     function render(canvas: Canvas) {
+      figure.render(canvas)
       if (figure.style.fill.value)
         canvas.drawPath(path, figure.fillPaint)
       if (figure.style.border.value)

packages/core/src/base.ts

@@ -44,13 +44,6 @@ export function createBase(options: WidgetOptions) {
 
     let current: Animate<any> | undefined
 
-    function add(...children: Widget[]) {
-      children.push(...children)
-    }
-
-    function animate<T extends Widget>(animate: Animate<T>) {
-      animates.push(animate)
-    }
     const base = {
       ...options,
       x,
@@ -63,9 +56,24 @@ export function createBase(options: WidgetOptions) {
       add,
       animate,
       render,
+      update,
+    }
+
+    function add(...children: Widget[]) {
+      children.push(...children)
+      return base
+    }
+
+    function animate<T extends Widget>(animate: Animate<T>) {
+      animates.push(animate)
+      return base
+    }
+
+    function render(_canvas: Canvas) {
+      // ...
     }
 
-    function render(canvas: Canvas, elapsed: number) {
+    function update(canvas: Canvas, elapsed: number, renderFunction: (canvas: Canvas) => any) {
       const ctx = defineAnimationContext({
         widget: base as any,
         elapsed,
@@ -89,8 +97,9 @@ export function createBase(options: WidgetOptions) {
       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)
       for (const child of children) {
-        child.render(canvas, elapsed)
+        child.update(canvas, elapsed, child.render)
       }
       canvas.restore()
     }

packages/core/src/engine.ts

@@ -1,18 +1,21 @@
-/* eslint-disable import/no-mutable-exports */
 import CanvasKitInit from 'canvaskit-wasm'
-import { error } from '@newcar/utils'
 import { defineCreateAppApi } from './app'
+import type { Widget, WidgetBuilder } from './widget'
 
-export let createApp: ReturnType<typeof defineCreateAppApi> = (() => {
-  error('Please preload Skia before you use this API!')
-}) as any
-
-export async function loadSkia(wasm: string) {
+export async function initEngine(wasm: string) {
   const ck = await CanvasKitInit({
     locateFile: (_file: string) => wasm,
   })
 
-  createApp = defineCreateAppApi(ck) as ReturnType<typeof defineCreateAppApi>
+  const createApp = defineCreateAppApi(ck) as ReturnType<typeof defineCreateAppApi>
+
+  function use<T extends Widget>(builder: WidgetBuilder<T>) {
+    return builder(ck)
+  }
 
-  return ck
+  return {
+    createApp,
+    ck,
+    use,
+  }
 }

packages/core/src/scene.ts

@@ -4,16 +4,15 @@ import type { Base } from './base'
 
 export interface SceneOptions {}
 
-export function createScene(builder: WidgetBuilder<Base>, options?: SceneOptions) {
+export function createScene(root: Widget, options?: SceneOptions) {
   return (ck: CanvasKit) => {
     const player = {
       paused: false,
       elapsed: 0,
     }
-    const root = builder(ck)
 
     function tick(canvas: Canvas, surface: Surface) {
-      root.render(canvas, player.elapsed)
+      root.update(canvas, player.elapsed, root.render)
       player.elapsed++
       surface.requestAnimationFrame((canvas) => {
         tick(canvas, surface)
@@ -23,9 +22,9 @@ export function createScene(builder: WidgetBuilder<Base>, options?: SceneOptions
     return {
       player,
       tick,
-      ...options,
       ck,
       root,
+      ...options,
     }
   }
 }

packages/core/src/widget.ts

@@ -1,7 +1,8 @@
 import type { Canvas, CanvasKit } from 'canvaskit-wasm'
 
 export interface Widget {
-  render: (canvas: Canvas, elapsed: number) => void
+  update: (canvas: Canvas, elapsed: number, renderFunction: (canvas: Canvas) => any) => void
+  render: (canvas: Canvas) => void
 }
 
 export type WidgetBuilder<T extends Widget> = (ck: CanvasKit) => T