fix: text and textGroup

examples/main.ts

@@ -4,6 +4,8 @@ const engine = (await new nc.CarEngine().init(
   './node_modules/canvaskit-wasm/bin/canvaskit.wasm',
 ))
 
+const font = await nc.useFont('https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf')
+
 const milestoneElem = document.querySelector('#milestone') as HTMLCanvasElement
 window.addEventListener('resize', () => {
   milestoneElem.width = window.innerWidth
@@ -48,7 +50,10 @@ export class Milestone {
 
 
 export const defaultScene = new nc.Scene(
-  new nc.Circle(20)
+  new nc.Text('Hello world!', {
+    x: 100,
+    y: 100
+  })
 )
 
 const left = document.querySelector('.left') as HTMLDivElement

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

@@ -1,5 +1,5 @@
 import { Arrow, Line, Text } from '@newcar/basic'
-import type { ConvertToProp, Ref, WidgetOptions, WidgetStyle } from '@newcar/core'
+import type { ConvertToProp, Reactive, Ref, WidgetOptions, WidgetStyle } from '@newcar/core'
 import { Widget, changed, reactive, ref } from '@newcar/core'
 import { Color } from '@newcar/utils'
 import type { CanvasKit } from 'canvaskit-wasm'
@@ -48,15 +48,15 @@ export class NumberAxis extends Widget {
   ticks: Line[]
   texts: Text[]
   main: Arrow
-  length: Ref<[number, number]>
+  length: Reactive<[number, number]>
 
   constructor(
     length: [number, number],
     options?: NumberAxisOptions,
   ) {
     options ??= {}
     super(options)
-    this.length = ref(length)
+    this.length = reactive(length)
     this.division = options.division ?? 50
     this.trend = options.trend ?? (x => x / 50)
     this.style ??= {}
@@ -66,15 +66,15 @@ export class NumberAxis extends Widget {
     this.style.textSize = ref(options.style.textSize ?? 20)
     this.style.textColor = reactive(options.style.textColor ?? Color.WHITE)
     this.style.color = reactive(options.style.color ?? Color.WHITE)
-    this.main = new Arrow([this.length.value[0], 0], [this.length.value[1], 0], {
+    this.main = new Arrow([this.length[0], 0], [this.length[1], 0], {
       style: {
         color: this.style.color,
       },
       progress: this.progress.value,
     })
     this.ticks = []
     this.texts = []
-    for (let x = this.length.value[0] + (this.length.value[1] - this.length.value[0]) % this.division; x <= this.length.value[1]; x += this.division) {
+    for (let x = this.length[0] + (this.length[1] - this.length[0]) % this.division; x <= this.length[1]; x += this.division) {
       if (this.style.ticks) {
         this.ticks.push(
           new Line([x, -5], [x, 5], {
@@ -148,7 +148,7 @@ export class NumberAxis extends Widget {
     function reset(this: NumberAxis) {
       this.texts = []
       this.ticks = []
-      for (let x = this.length.value[0] + (this.length.value[1] - this.length.value[0]) % this.division; x <= this.length.value[1]; x += this.division) {
+      for (let x = this.length[0] + (this.length[1] - this.length[0]) % this.division; x <= this.length[1]; x += this.division) {
         if (this.style.texts) {
           this.texts.push(new Text(this.trend(x).toString(), {
             x: x - (this.style.textSize.value / 2),
@@ -173,7 +173,7 @@ export class NumberAxis extends Widget {
         }
       }
     }
-    changed(this.length.value, reset.bind(this))
+    changed(this.length, reset.bind(this))
     changed(this.division, reset.bind(this))
     changed(this.trend, reset.bind(this))
   }

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

@@ -1,5 +1,5 @@
 import { Arrow, Line, Text } from '@newcar/basic'
-import type { ConvertToProp, Ref, WidgetOptions, WidgetStyle } from '@newcar/core'
+import type { ConvertToProp, Reactive, Ref, WidgetOptions, WidgetStyle } from '@newcar/core'
 import { Widget, changed, reactive, ref } from '@newcar/core'
 import { Color } from '@newcar/utils'
 import type { CanvasKit } from 'canvaskit-wasm'
@@ -45,12 +45,16 @@ export class NumberPlane extends Widget {
   trendX: Ref<Trend>
   trendY: Ref<Trend>
   originText: Text
+  lengthX: Reactive<[number, number]>
+  lengthY: Reactive<[number, number]>
 
-  constructor(public lengthX: [number, number], public lengthY: [number, number], options?: NumberPlaneOptions) {
+  constructor(lengthX: [number, number], lengthY: [number, number], options?: NumberPlaneOptions) {
     options ??= {}
     options.style ??= {}
     super(options)
 
+    this.lengthX = reactive(lengthX)
+    this.lengthY = reactive(lengthY)
     this.divisionX = ref(options.divisionX ?? 50)
     this.divisionY = ref(options.divisionY ?? 50)
     this.trendX = ref(options.trendsX ?? (x => x / 50))
@@ -170,5 +174,7 @@ export class NumberPlane extends Widget {
     changed(this.divisionY, this.createTicksAndTexts.bind(this))
     changed(this.trendX, this.createTicksAndTexts.bind(this))
     changed(this.trendY, this.createTicksAndTexts.bind(this))
+    changed(this.lengthX, length => [this.axisX.from[0], this.axisX.to[1]] = length)
+    changed(this.lengthY, length => [this.axisY.from[0], this.axisY.to[1]] = length)
   }
 }

packages/basic/src/animations/color/discolorate.ts

@@ -1,5 +1,5 @@
 import { bind, changeProperty } from '@newcar/core'
-import type { Figure } from '../../widgets/figures/figure'
+import type { Figure } from '../../widgets/figure'
 
 /**
  * Change the color.

packages/basic/src/widgets/figures/arrow.ts → packages/basic/src/widgets/arrow.ts

@@ -1,7 +1,7 @@
 import type { CanvasKit } from 'canvaskit-wasm'
 import type { Reactive, Ref } from '@newcar/core'
 import { changed, reactive, ref } from '@newcar/core'
-import type { Vector2 } from '../../utils/vector2'
+import type { Vector2 } from '../utils/vector2'
 import type { FigureOptions, FigureStyle } from './figure'
 import { Figure } from './figure'
 import { Polygon } from './polygon'

packages/basic/src/widgets/figures/path.ts → packages/basic/src/widgets/figure.ts

@@ -1,31 +1,57 @@
-import type { Canvas, CanvasKit, Path as ckPath } from 'canvaskit-wasm'
-import type { WidgetRange } from '@newcar/core'
-import { str2BlendMode, str2StrokeCap, str2StrokeJoin } from '@newcar/utils'
-import { changed } from '@newcar/core'
-import type { FigureOptions, FigureStyle } from './figure'
-import { Figure } from './figure'
-
-export interface PathOptions extends FigureOptions {
-  style?: PathStyle
+import type { ConvertToProp, WidgetOptions, WidgetStyle } from '@newcar/core'
+import { Widget, changed, reactive, ref } from '@newcar/core'
+import { Color, str2BlendMode, str2StrokeCap, str2StrokeJoin } from '@newcar/utils'
+import type { CanvasKit, Paint } from 'canvaskit-wasm'
+import type { Shader, StrokeCap, StrokeJoin } from '@newcar/utils'
+
+export interface FigureStyle extends WidgetStyle {
+  border?: boolean
+  borderColor?: Color
+  borderShader?: Shader
+  borderWidth?: number
+  fill?: boolean
+  fillColor?: Color
+  fillShader?: Shader
+  color?: Color
+  shader?: Shader
+  join?: StrokeJoin
+  cap?: StrokeCap
+  offset?: number
+  interval?: number[]
 }
 
-export interface PathStyle extends FigureStyle {}
+export interface FigureOptions extends WidgetOptions {
+  style?: FigureStyle
+}
 
-export class Path extends Figure {
-  path: ckPath
-  pathData: Array<
-    [0, string] // SVG
-    | [1, ckPath, ckPath, any] // PathOp
-    | [2, ckPath, ckPath, number] // PathInterpolation
-  > = []
+export class Figure extends Widget {
+  declare style: ConvertToProp<FigureStyle>
+  strokePaint: Paint
+  fillPaint: Paint
 
-  constructor(options?: PathOptions) {
+  constructor(options?: FigureOptions) {
     options ??= {}
     super(options)
+    options.style ??= {}
+    this.style.color = reactive(options.style.color ?? Color.WHITE)
+    this.style.borderColor = reactive(options.style.borderColor ?? options.style.color ?? Color.WHITE)
+    this.style.borderShader = reactive(options.style.borderShader ?? options.style.shader)
+    this.style.borderWidth = ref(options.style.borderWidth ?? 2)
+    this.style.fillColor = reactive(options.style.fillColor ?? options.style.color ?? Color.WHITE)
+    this.style.fillShader = reactive(options.style.fillShader ?? options.style.shader)
+    this.style.shader = reactive(options.style.shader)
+    this.style.fill = ref(options.style.fill ?? true)
+    this.style.border = ref(options.style.border ?? false)
+    this.style.join = ref(options.style.join ?? 'miter')
+    this.style.cap = ref(options.style.cap ?? 'square')
+    this.style.offset = ref(options.style.offset ?? 0)
+    this.style.interval = reactive(options.style.interval ?? [1, 0])
   }
 
   init(ck: CanvasKit): void {
     super.init(ck)
+    this.strokePaint = new ck.Paint()
+    this.fillPaint = new ck.Paint()
     this.strokePaint.setStyle(ck.PaintStyle.Stroke)
     this.strokePaint.setColor(this.style.borderColor.toFloat4())
     this.strokePaint.setShader(this.style.borderShader?.toCanvasKitShader(ck) ?? null)
@@ -52,23 +78,26 @@ export class Path extends Figure {
     this.strokePaint.setBlendMode(str2BlendMode(ck, this.style.blendMode.value))
     this.fillPaint.setBlendMode(str2BlendMode(ck, this.style.blendMode.value))
 
-    this.path = new ck.Path()
-
-    this.pathData.forEach(([type, ...args]) => {
-      switch (type) {
-        case 0: {
-          this.path.addPath(ck.Path.MakeFromSVGString(<string> args[0]))
-          break
-        }
-        case 1: {
-          this.path.addPath(ck.Path.MakeFromOp(<ckPath> args[0], args[1], args[2]))
-          break
-        }
-        case 2: {
-          this.path.addPath(ck.Path.MakeFromPathInterpolation(<ckPath> args[0], args[1], args[2]))
-          break
-        }
-      }
+    changed(this.style.color, (color) => {
+      this.style.borderColor ??= color
+      this.style.fillColor ??= color
+      this.strokePaint.setColor(this.style.borderColor.toFloat4())
+      this.fillPaint.setColor(this.style.fillColor.toFloat4())
+    })
+
+    changed(this.style.shader, (shader) => {
+      this.style.borderShader ??= shader
+      this.style.fillShader ??= shader
+      this.strokePaint.setShader(this.style.borderShader.toCanvasKitShader(ck))
+      this.fillPaint.setShader(this.style.fillShader.toCanvasKitShader(ck))
+    })
+
+    changed(this.style.borderColor, (borderColor) => {
+      this.strokePaint.setColor(borderColor.toFloat4())
+    })
+
+    changed(this.style.fillColor, (fillColor) => {
+      this.fillPaint.setColor(fillColor.toFloat4())
     })
 
     changed(this.style.borderShader, (borderShader) => {
@@ -109,39 +138,4 @@ export class Path extends Figure {
       this.fillPaint.setAlphaf(transparency.value * this.style.fillColor.alpha)
     })
   }
-
-  addPathFromSVGString(svg: string) {
-    this.pathData.push([0, svg])
-
-    return this
-  }
-
-  addPathFromOptions(one: ckPath, two: ckPath, options: any) {
-    this.pathData.push([1, one, two, options])
-
-    return this
-  }
-
-  addFromPathInterpolation(start: ckPath, end: ckPath, weight: number) {
-    this.pathData.push([2, start, end, weight])
-
-    return this
-  }
-
-  draw(canvas: Canvas): void {
-    if (this.style.border)
-      canvas.drawPath(this.path, this.strokePaint)
-
-    if (this.style.fill)
-      canvas.drawPath(this.path, this.fillPaint)
-  }
-
-  calculateIn(x: number, y: number): boolean {
-    return this.path.contains(x, y)
-  }
-
-  calculateRange(): WidgetRange {
-    const bounds = this.path.computeTightBounds()
-    return [...bounds] as WidgetRange
-  }
 }

packages/basic/src/widgets/index.ts

@@ -1,12 +1,12 @@
 // Figures
-export * from './figures/arc'
-export * from './figures/circle'
-export * from './figures/figure'
-export * from './figures/rect'
-export * from './figures/arrow'
-export * from './figures/polygon'
-export * from './figures/line'
-export * from './figures/path'
+export * from './arc'
+export * from './circle'
+export * from './figure'
+export * from './rect'
+export * from './arrow'
+export * from './polygon'
+export * from './line'
+export * from './path'
 
 // Others
 export * from './text'

packages/basic/src/widgets/figures/line.ts → packages/basic/src/widgets/line.ts

@@ -1,7 +1,7 @@
 import type { Canvas, CanvasKit } from 'canvaskit-wasm'
 import type { ConvertToProp } from '@newcar/core'
 import { changed } from '@newcar/core'
-import type { Vector2 } from '../../utils/vector2'
+import type { Vector2 } from '../utils/vector2.ts'
 import type { PathOptions, PathStyle } from './path.ts'
 import { Path } from './path.ts'