feat: plugin system

examples/main.ts

@@ -2,7 +2,7 @@ import { CarEngine, Color, Scene } from 'newcar'
 import { Angle, Brace } from '@newcar/mod-geometry'
 import { BarChart } from '@newcar/mod-chart'
 import { Markdown } from '@newcar/mod-markdown'
-import { Tex } from '@newcar/mod-math'
+// import { Tex } from '@newcar/mod-math'
 
 import * as nc from 'newcar'
 
@@ -56,14 +56,14 @@ export const scene4 = new nc.Scene(
  .animate(nc.stroke, 0, 90),
 )
 
-const scene5 = new nc.Scene(
- new Tex(`dy/dx, \\mathrm{d}y/\\mathrm{d}x, \\frac{dy}{dx}, \\frac{\mathrm{d}y}{\\mathrm{d}x}, \\frac{\\partial^2}{\\partial x_1\\partial x_2}y`, {
- style: {
- scaleX: 0.1,
- scaleY: 0.1,
- },
- }),
-)
+// const scene5 = new nc.Scene(
+//  new Tex(`dy/dx, \\mathrm{d}y/\\mathrm{d}x, \\frac{dy}{dx}, \\frac{\mathrm{d}y}{\\mathrm{d}x}, \\frac{\\partial^2}{\\partial x_1\\partial x_2}y`, {
+//  style: {
+//  scaleX: 0.1,
+//  scaleY: 0.1,
+//  },
+//  }),
+// )
 
 const scene6 = new nc.Scene(
  new Angle(new nc.Line([100, 100], [200, 100]), 45, 100),
@@ -144,9 +144,9 @@ const app4 = engine.createApp(document.querySelector('#a4'))
 app4.checkout(scene4)
 app4.play()
 
-const app5 = engine.createApp(document.querySelector('#a5'))
-app5.checkout(scene5)
-app5.play()
+// const app5 = engine.createApp(document.querySelector('#a5'))
+// app5.checkout(scene5)
+// app5.play()
 
 const app6 = engine.createApp(document.querySelector('#b1'))
 app6.checkout(scene6)

mods/mod-math/src/widgets/index.ts

@@ -1,4 +1,4 @@
-export * from './tex'
+// export * from './tex'
 export * from './mathFunction'
 export * from './numberAxis'
 export * from './numberPlane'

packages/core/src/app.ts

@@ -5,7 +5,7 @@ import { initial } from './initial'
 import { deepClone } from './utils/deepClone'
 import { patch } from './patch'
 import type { Widget } from './widget'
-import type { CarPlugin } from './plugin'
+import type { GlobalPlugin } from './plugin'
 
 export class App {
  scene: Scene
@@ -17,7 +17,7 @@ export class App {
  constructor(
  public element: HTMLCanvasElement,
  private ck: CanvasKit,
- private plugins: CarPlugin[],
+ private plugins: GlobalPlugin[],
  ) {
  this.setBackgroundColor(Color.BLACK)
  if (element === void 0) {
@@ -65,17 +65,21 @@ export class App {
 
  patch(app.last, app.scene.root, app.ck, canvas)
  for (const plugin of app.plugins)
- plugin.afterPatch(app, app.scene.elapsed, app.last, app.scene.root)
+ plugin.onPatch(app, app.scene.elapsed, app.last, app.scene.root)
 
  app.last = deepClone(app.scene.root)
 
  // Animating.
+ for (const plugin of app.plugins)
+ plugin.beforeAnimate(app, app.scene.elapsed, app.scene.root)
  app.scene.root.runAnimation(app.scene.elapsed)
+ for (const plugin of app.plugins)
+ plugin.onAnimate(app, app.scene.elapsed, app.scene.root)
 
  // // Process setup generation function
  // app.scene.root.runSetup(app.scene.elapsed)
 
- for (const plugin of app.plugins) plugin.afterUpdate(app, app.scene.elapsed)
+ for (const plugin of app.plugins) plugin.onUpdate(app, app.scene.elapsed)
 
  if (app.playing) {
  app.scene.elapsed += 1
@@ -115,7 +119,7 @@ export class App {
  this.updates.push(updateFunc)
  }
 
- use(plugin: CarPlugin) {
+ use(plugin: GlobalPlugin) {
  this.plugins.push(plugin)
  }
 

packages/core/src/engine.ts

@@ -2,14 +2,14 @@ import type { CanvasKit } from 'canvaskit-wasm'
 import CanvasKitInit from 'canvaskit-wasm'
 import { App } from './app'
 import { LocalApp } from './localApp'
-import type { CarPlugin } from './plugin'
+import type { GlobalPlugin } from './plugin'
 
 // eslint-disable-next-line import/no-mutable-exports
 export let $ck: CanvasKit
 export class CarEngine {
  ck: CanvasKit
  readonly apps: (App | LocalApp)[] = []
- readonly plugins: CarPlugin[] = []
+ readonly plugins: GlobalPlugin[] = []
 
  async init(canvasKitWasmFile: string) {
  for (const plugin of this.plugins) plugin.beforeCanvasKitLoaded(this)
@@ -25,7 +25,7 @@ export class CarEngine {
  return this
  }
 
- use(plugin: CarPlugin): this {
+ use(plugin: GlobalPlugin): this {
  this.plugins.push(plugin)
 
  return this

packages/core/src/initial.ts

@@ -8,7 +8,11 @@ export async function initial(
  canvas: Canvas,
 ) {
  !widget._isAsyncWidget()
- ? widget.init(ck)
+ ? (() => {
+ widget.plugins.forEach(plugin => plugin.beforeInitializing(widget, ck))
+ widget.init(ck)
+ widget.plugins.forEach(plugin => plugin.onInitializing(widget, ck))
+ })()
  : await (async () => {
  const res = await widget.init(ck)
  if ((res as AsyncWidgetResponse).status === 'error') {

packages/core/src/plugin.ts

@@ -1,12 +1,14 @@
-import type { Surface } from 'canvaskit-wasm'
+import type { Canvas, CanvasKit, Surface } from 'canvaskit-wasm'
 import type { Scene } from './scene'
 import type { App } from './app'
 import type { LocalApp } from './localApp'
 import type { CarEngine } from './engine'
 import type { Widget } from './widget'
 
-export interface CarPlugin {
+export interface GlobalPlugin {
  name: string
+ key: string
+ version: string
 
  // On engine level
  beforeCanvasKitLoaded?: (engine: CarEngine) => void
@@ -24,16 +26,27 @@ export interface CarPlugin {
  old: Widget,
  now: Widget,
  ) => void
- afterPatch?: (
+ onPatch?: (
  app: App | LocalApp,
  elapsed: number,
  old: Widget,
  now: Widget,
  ) => void
- // beforeAnimate?: (app: App | LocalApp, elapsed: number) => void
- // onAnimate?: (app: App | LocalApp, elapsed: number, widget: Widget) => void
- // afterAnimate?: (app: App | LocalApp, elapsed: number, widget: Widget) => void
- afterUpdate?: (app: App | LocalApp, elapsed: number) => void
+ beforeAnimate?: (app: App | LocalApp, elapsed: number, widget: Widget) => void
+ onAnimate?: (app: App | LocalApp, elapsed: number, widget: Widget) => void
+ onUpdate?: (app: App | LocalApp, elapsed: number) => void
 }
 
-export const defineCarPlugin = (plugin: CarPlugin): CarPlugin => plugin
+export const defineGlobalPlugin = (plugin: GlobalPlugin): GlobalPlugin => plugin
+
+export interface WidgetPlugin {
+ beforeInitializing: (widget: Widget, ck: CanvasKit) => void
+ onInitializing: (widget: Widget, ck: CanvasKit) => void
+ pre: (widget: Widget, ck: CanvasKit, PropertyChanged: string) => void
+ beforeDraw: (widget: Widget, canvas: Canvas) => void
+ onDraw: (widget: Widget, canvas: Canvas) => void
+ // TODO: `beforeAnimate` and `onAnimate`
+ addition: Record<string, (...params: any[] | undefined[]) => any>
+}
+
+export const defineWidgetPlugin = (plugin: WidgetPlugin): WidgetPlugin => plugin

packages/core/src/widget.ts

@@ -6,6 +6,7 @@ import { analyseAnimationTree } from './animationTree'
 import type { Event, EventInstance } from './event'
 import type { BlendMode } from './utils/types'
 import type { wait } from './apiWait'
+import type { WidgetPlugin } from './plugin'
 
 export type WidgetInstance<T extends Widget> = T
 
@@ -28,6 +29,7 @@ export interface WidgetStyle {
 }
 
 export class Widget {
+ plugins: WidgetPlugin[] = []
  x: number // The vector x of the widget.
  y: number // The vector y of the widget.
  centerX: number // The center vector x of the widget.
@@ -80,7 +82,7 @@ export class Widget {
  * Called when the widget is registered.
  * @param _ck The CanvasKit namespace
  */
- init(_ck: CanvasKit) {}
+ init(_ck: CanvasKit) { }
 
  /**
  * Preload the necessary items during drawing.
@@ -90,14 +92,14 @@ export class Widget {
  * @param propertyChanged The changed property of this widget
  */
 
- predraw(_ck: CanvasKit, _propertyChanged: string) {}
+ predraw(_ck: CanvasKit, _propertyChanged: string) { }
 
  /**
  * Draw the object according to the parameters of the widget.
  * Called when the parameters is changed.
  * @param _canvas The canvas object of CanvasKit-WASM.
  */
- draw(_canvas: Canvas) {}
+ draw(_canvas: Canvas) { }
 
  /**
  * Called when the parameters is changed.
@@ -116,8 +118,13 @@ export class Widget {
  canvas.translate(this.x, this.y)
  canvas.rotate(this.style.rotation, this.centerX, this.centerY)
  canvas.scale(this.style.scaleX, this.style.scaleY)
- if (this.display)
+ if (this.display) {
+ for (const plugin of this.plugins)
+ plugin.beforeDraw(this, canvas)
  this.draw(canvas)
+ for (const plugin of this.plugins)
+ plugin.onDraw(this, canvas)
+ }
  }
 
  /**
@@ -215,6 +222,10 @@ export class Widget {
  return this
  }
 
+ use(...plugins: WidgetPlugin[]) {
+ this.plugins.push(...plugins)
+ }
+
  _isAsyncWidget() {
  return false
  }