Merge branch 'next' of https://github.com/dromara/newcar into next

examples/main.ts

@@ -81,14 +81,14 @@ const {
 
 const app = createApp(document.querySelector('#milestone'))
 
-const circle = use(nc.createCircle(100, {
-  x: 0,
-  y: 0,
-}))
+// const circle = 
 // circle.animate(nc.move(100, 100)(120))
 
 const scene = nc.createScene(
-  circle
+  use(nc.createCircle(100, {
+    x: 0,
+    y: 0,
+  })).animate(nc.fadeIn()(1))
 )
 
 app.checkout(scene)

packages/basic/src/widgets/arc.ts

@@ -1,6 +1,5 @@
 import type { ConvertToProp, Prop } from '@newcar/core'
 import { changed, def, defineWidgetBuilder } from '@newcar/core'
-import { deepMerge } from '@newcar/utils'
 import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
 
@@ -46,10 +45,11 @@ export function createArc(radius: number, from: number, to: number, options?: Ar
       path.path.addArc(rect, fromProp.value, v.value * path.progress.value)
     })
 
-    return deepMerge(path, {
+    return {
+      ...path,
       from: fromProp,
       to: toProp,
       radius: radiusProp,
-    })
+    }
   })
 }

packages/basic/src/widgets/arrow.ts

@@ -1,5 +1,4 @@
 import { changed, def, defineWidgetBuilder } from '@newcar/core'
-import { deepMerge } from '@newcar/utils'
 import type { Vector2 } from '../utils/vector2'
 import { type FigureOptions, type FigureStyle, createFigure } from './figure'
 import { createPolygon } from './polygon'
@@ -52,10 +51,10 @@ export function createArrow(from: Vector2, to: Vector2, options?: ArrowOptions)
   return defineWidgetBuilder((ck) => {
     options ??= {}
     options.style ??= {}
-    const figure = createFigure(options)(ck)
     const fromProp = def(from)
     const toProp = def(to)
 
+    const figure = createFigure(options)(ck)
     const tip = createPolygon([
       [0, 10],
       [22, 0],
@@ -80,8 +79,7 @@ export function createArrow(from: Vector2, to: Vector2, options?: ArrowOptions)
     })(ck)
 
     function reset() {
-      const radian = calculateArrowRotationAngle(fromProp.value, toProp.value)
-      tip.style.rotation.value = radian
+      tip.style.rotation.value = calculateArrowRotationAngle(fromProp.value, toProp.value)
     }
 
     changed(fromProp, reset)
@@ -93,9 +91,10 @@ export function createArrow(from: Vector2, to: Vector2, options?: ArrowOptions)
 
     figure.add(stem, tip)
 
-    return deepMerge(figure, {
+    return {
+      ...figure,
       from: fromProp,
       to: toProp,
-    })
+    }
   })
 }

packages/basic/src/widgets/circle.ts

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

packages/basic/src/widgets/figure.ts

@@ -1,5 +1,5 @@
 import type { Shader, StrokeCap, StrokeJoin } from '@newcar/utils'
-import { Color, deepMerge, str2StrokeCap, str2StrokeJoin } from '@newcar/utils'
+import { Color, str2StrokeCap, str2StrokeJoin } from '@newcar/utils'
 import type { Base, BaseOptions, BaseStyle, ConvertToProp } from '@newcar/core'
 import { changed, createBase, def, defineWidgetBuilder } from '@newcar/core'
 import type { Paint } from 'canvaskit-wasm'
@@ -33,11 +33,12 @@ export interface Figure extends Base {
 export function createFigure(options?: FigureOptions) {
   return defineWidgetBuilder<Figure>((ck) => {
     options ??= {}
-    const base = createBase(options ?? {})(ck)
     options.style ??= {}
+    const base = createBase(options)(ck)
     const style = {
+      ...base.style,
       color: def(options.style.color ?? Color.WHITE),
-      shader: def(options.style.shader ?? options.style.shader),
+      shader: def(options.style.shader ?? null),
       border: def(options.style.border ?? false),
       borderColor: def(options.style.borderColor ?? options.style.color ?? Color.WHITE),
       borderShader: def(options.style.borderShader ?? options.style.shader),
@@ -49,16 +50,14 @@ export function createFigure(options?: FigureOptions) {
       cap: def(options.style.cap ?? 'butt'),
       offset: def(options.style.offset ?? 0),
       interval: def(options.style.interval ?? [1, 0]),
-      ...base.style,
     }
 
     const strokePaint = new ck.Paint()
     const fillPaint = new ck.Paint()
+    strokePaint.setStyle(ck.PaintStyle.Stroke)
     strokePaint.setColor(style.borderColor.value.toFloat4())
+    strokePaint.setShader(style.borderShader.value?.toCanvasKitShader(ck) ?? null)
     strokePaint.setStrokeWidth(style.borderWidth.value)
-    if (style.shader.value || style.borderShader.value)
-      strokePaint.setShader(style.borderShader.value.toCanvasKitShader(ck))
-    strokePaint.setStyle(ck.PaintStyle.Stroke)
     strokePaint.setStrokeCap(str2StrokeCap(ck, style.cap.value))
     strokePaint.setStrokeJoin(str2StrokeJoin(ck, style.join.value))
     strokePaint.setPathEffect(ck.PathEffect.MakeDash(
@@ -68,10 +67,9 @@ export function createFigure(options?: FigureOptions) {
     strokePaint.setAntiAlias(style.antiAlias.value)
     strokePaint.setAlphaf(style.transparency.value * style.borderColor.value.alpha)
 
-    fillPaint.setColor(style.fillColor.value.toFloat4())
-    if (style.shader.value || style.fillShader.value)
-      fillPaint.setShader(style.fillShader.value.toCanvasKitShader(ck))
     fillPaint.setStyle(ck.PaintStyle.Fill)
+    fillPaint.setColor(style.fillColor.value.toFloat4())
+    fillPaint.setShader(style.fillShader.value?.toCanvasKitShader(ck) ?? null)
     fillPaint.setAntiAlias(style.antiAlias.value)
     fillPaint.setAlphaf(style.transparency.value * style.fillColor.value.alpha)
 
@@ -82,34 +80,38 @@ export function createFigure(options?: FigureOptions) {
     changed(style.borderWidth, (v) => {
       strokePaint.setStrokeWidth(v.value)
     })
-    changed(style.borderColor, (v) => {
-      strokePaint.setColor(v.value.toFloat4())
-    })
-    changed(style.borderShader, (v) => {
-      strokePaint.setShader(v.value!.toCanvasKitShader(ck))
+    changed(style.cap, (v) => {
+      strokePaint.setStrokeCap(str2StrokeCap(ck, v.value))
     })
     changed(style.join, (v) => {
       strokePaint.setStrokeJoin(str2StrokeJoin(ck, v.value))
     })
-    changed(style.cap, (v) => {
-      strokePaint.setStrokeCap(str2StrokeCap(ck, v.value))
-    })
-    changed(style.color, (v) => {
+    changed(style.borderColor, (v) => {
       strokePaint.setColor(v.value.toFloat4())
+    })
+    changed(style.fillColor, (v) => {
       fillPaint.setColor(v.value.toFloat4())
     })
+    changed(style.color, (v) => {
+      strokePaint.setColor(style.borderColor.value?.toFloat4() ?? v.value.toFloat4())
+      fillPaint.setColor(style.fillColor.value?.toFloat4() ?? v.value.toFloat4())
+    })
+    changed(style.borderShader, (v) => {
+      strokePaint.setShader(v.value?.toCanvasKitShader(ck) ?? null)
+    })
+    changed(style.fillShader, (v) => {
+      fillPaint.setShader(v.value?.toCanvasKitShader(ck) ?? null)
+    })
+    changed(style.shader, (v) => {
+      strokePaint.setShader(style.borderShader.value?.toCanvasKitShader(ck) ?? v.value?.toCanvasKitShader(ck) ?? null)
+      fillPaint.setShader(style.fillShader.value?.toCanvasKitShader(ck) ?? v.value?.toCanvasKitShader(ck) ?? null)
+    })
     changed(style.interval, (v) => {
       strokePaint.setPathEffect(ck.PathEffect.MakeDash(
         v.value,
         style.offset.value,
       ))
     })
-    changed(style.fillColor, (v) => {
-      fillPaint.setColor(v.value.toFloat4())
-    })
-    changed(style.fillShader, (v) => {
-      fillPaint.setShader(v.value!.toCanvasKitShader(ck))
-    })
     changed(style.offset, (v) => {
       strokePaint.setPathEffect(ck.PathEffect.MakeDash(
         style.interval.value,
@@ -125,6 +127,11 @@ export function createFigure(options?: FigureOptions) {
       fillPaint.setAntiAlias(v.value)
     })
 
-    return deepMerge(base, { style, strokePaint, fillPaint })
+    return {
+      ...base,
+      style,
+      strokePaint,
+      fillPaint,
+    }
   })
 }

packages/basic/src/widgets/line.ts

@@ -1,6 +1,5 @@
 import type { ConvertToProp, Prop } from '@newcar/core'
 import { changed, def, defineWidgetBuilder } from '@newcar/core'
-import { deepMerge } from '@newcar/utils'
 import type { Vector2 } from '../utils/vector2'
 import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
@@ -27,26 +26,30 @@ export function createLine(from: Vector2, to: Vector2, options?: LineOptions) {
   return defineWidgetBuilder<Line>((ck) => {
     options ??= {}
     options.style ??= {}
-    const path = createPath(deepMerge(options, {
+    const fromProp = def(from)
+    const toProp = def(to)
+
+    const path = createPath({
+      ...options,
       style: {
         border: true,
         borderWidth: options.style.width,
         fill: false,
+        ...options.style,
       },
-    }))(ck)
+    })(ck)
 
-    const fromProp = def(from)
-    const toProp = def(to)
     options.style ??= {}
     const style = {
+      ...path.style,
       width: def(options.style.width ?? 2),
     }
 
     path.path.moveTo(...from)
     path.path.lineTo(...to.map(i => i * path.progress.value) as Vector2)
 
     function reset(_v: Prop<Vector2>) {
-      path.path.reset()
+      path.path.rewind()
       path.path.moveTo(...fromProp.value)
       path.path.lineTo(...toProp.value.map(i => i * path.progress.value) as Vector2)
     }
@@ -57,10 +60,11 @@ export function createLine(from: Vector2, to: Vector2, options?: LineOptions) {
       path.style.borderWidth.value = v.value
     })
 
-    return deepMerge(path, {
+    return {
+      ...path,
       style,
       from: fromProp,
       to: toProp,
-    })
+    }
   })
 }

packages/basic/src/widgets/path.ts

@@ -1,7 +1,6 @@
-import { deepMerge } from '@newcar/utils'
 import type { Canvas, EmbindEnumEntity, InputCommands, Path as skPath } from 'canvaskit-wasm'
 import type { ConvertToProp } from '@newcar/core'
-import { defineWidgetBuilder } from '../../../core/src/widget'
+import { defineWidgetBuilder } from '@newcar/core'
 import type { Figure, FigureOptions, FigureStyle } from './figure'
 import { createFigure } from './figure'
 
@@ -23,7 +22,7 @@ export function createPath(options?: PathOptions) {
   return defineWidgetBuilder<Path>((ck) => {
     options ??= {}
     options.style ??= {}
-    const figure = createFigure(options ?? {})(ck)
+    const figure = createFigure(options)(ck)
 
     const path = new ck.Path()
 
@@ -53,12 +52,13 @@ export function createPath(options?: PathOptions) {
         canvas.drawPath(path, figure.strokePaint)
     }
 
-    return deepMerge(figure, {
+    return {
+      ...figure,
       path,
       addPathFromPathString,
       addPathFromCmds,
       addPathFromOp,
       render,
-    })
+    }
   })
 }

packages/basic/src/widgets/polygon.ts

@@ -1,6 +1,5 @@
 import type { ConvertToProp, Prop } from '@newcar/core'
 import { changed, def, defineWidgetBuilder } from '@newcar/core'
-import { deepMerge } from '@newcar/utils'
 import type { Vector2 } from '../utils/vector2'
 import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
@@ -20,12 +19,13 @@ export function createPolygon(points: Vector2[], options?: PolygonOptions) {
   return defineWidgetBuilder<Polygon>((ck) => {
     options ??= {}
     options.style ??= {}
-    const path = createPath(options)(ck)
     const pointsProp = points.map(point => def(point))
+
+    const path = createPath(options)(ck)
     let index = 0
 
     function reset(points: Vector2[]) {
-      path.path.reset()
+      path.path.rewind()
       for (const point of points) {
         if (index === 0)
           path.path.moveTo(...point)
@@ -41,8 +41,9 @@ export function createPolygon(points: Vector2[], options?: PolygonOptions) {
 
     reset(pointsProp.map(p => p.value))
 
-    return deepMerge(path, {
+    return {
+      ...path,
       points: pointsProp,
-    })
+    }
   })
 }

packages/basic/src/widgets/rect.ts

@@ -1,6 +1,5 @@
 import type { ConvertToProp } from '@newcar/core'
 import { changed, def, defineWidgetBuilder } from '@newcar/core'
-import { deepMerge } from '@newcar/utils'
 import type { Path, PathOptions, PathStyle } from './path'
 import { createPath } from './path'
 
@@ -35,12 +34,13 @@ export function createRect(width: number, length: number, options: RectOptions)
     const widthProp = def(width)
     const lengthProp = def(length)
 
-    const path = createPath(options ?? {})(ck)
+    const path = createPath(options)(ck)
+
     const rect = ck.LTRBRect(0, 0, widthProp.value * path.progress.value, lengthProp.value * path.progress.value)
     path.path.addRect(rect)
 
     function reset() {
-      path.path.reset()
+      path.path.rewind()
       rect.set([0, 0, widthProp.value * path.progress.value, lengthProp.value * path.progress.value])
       path.path.addRect(rect)
     }
@@ -49,9 +49,13 @@ export function createRect(width: number, length: number, options: RectOptions)
     changed(lengthProp, reset)
 
     const style = {
+      ...path.style,
       radius: def(options.style.radius ?? 0),
     }
 
-    return deepMerge(path, { style })
+    return {
+      ...path,
+      style,
+    }
   })
 }