From 3a72135b70cf6c46cfa9233a3d7396a650d15ade Mon Sep 17 00:00:00 2001 From: Acbox <850625057@qq.com> Date: Tue, 4 Jun 2024 12:38:16 +0800 Subject: [PATCH] fix: the wrong finger to `Base` --- examples/main.ts | 7 +-- packages/basic/src/widgets/arc.ts | 13 +++-- packages/basic/src/widgets/circle.ts | 6 ++- packages/basic/src/widgets/figure.ts | 12 +++-- packages/basic/src/widgets/line.ts | 15 ++++-- packages/basic/src/widgets/path.ts | 17 +++++-- packages/basic/src/widgets/rect.ts | 9 +++- packages/core/src/base.ts | 71 +++++++++++++++------------- 8 files changed, 94 insertions(+), 56 deletions(-) diff --git a/examples/main.ts b/examples/main.ts index 915b0ed7f..bd41d58fa 100644 --- a/examples/main.ts +++ b/examples/main.ts @@ -82,9 +82,10 @@ const { const app = createApp(document.querySelector('#milestone')) const circle = use(nc.createCircle(100, { - x: 50, - y: 50, -})).animate(nc.move(100, 100)(120)) + x: 0, + y: 0, +})) +circle.animate(nc.move(100, 100)(120)) const scene = nc.createScene( circle diff --git a/packages/basic/src/widgets/arc.ts b/packages/basic/src/widgets/arc.ts index b1cbb1eaf..cd4f3f4af 100644 --- a/packages/basic/src/widgets/arc.ts +++ b/packages/basic/src/widgets/arc.ts @@ -1,7 +1,7 @@ -import type { Prop } from '@newcar/core' +import type { ConvertToProp, Prop } from '@newcar/core' import { changed, def, defineWidgetBuilder } from '@newcar/core' import { deepMerge } from '@newcar/utils' -import type { PathOptions, PathStyle } from './path' +import type { Path, PathOptions, PathStyle } from './path' import { createPath } from './path' export interface ArcOptions extends PathOptions { @@ -10,8 +10,15 @@ export interface ArcOptions extends PathOptions { export interface ArcStyle extends PathStyle { } +export interface Arc extends Path { + style: ConvertToProp + radius: Prop + from: Prop + to: Prop +} + export function createArc(radius: number, from: number, to: number, options: ArcOptions) { - return defineWidgetBuilder((ck) => { + return defineWidgetBuilder((ck) => { const path = createPath(options ?? {})(ck) const rect = ck.LTRBRect( -radius, diff --git a/packages/basic/src/widgets/circle.ts b/packages/basic/src/widgets/circle.ts index 29b94ab58..745f97d52 100644 --- a/packages/basic/src/widgets/circle.ts +++ b/packages/basic/src/widgets/circle.ts @@ -1,9 +1,11 @@ import { def, defineWidgetBuilder } from '@newcar/core' import { deepMerge } from '@newcar/utils' -import type { ArcOptions } from './arc' +import type { Arc, ArcOptions } from './arc' import { createArc } from './arc' -export function createCircle(radius: number, options: ArcOptions) { +export interface Circle extends Arc {} + +export function createCircle(radius: number, options?: ArcOptions) { return defineWidgetBuilder((ck) => { const arc = createArc(radius, 0, 360, options)(ck) const radiusProp = def(radius) diff --git a/packages/basic/src/widgets/figure.ts b/packages/basic/src/widgets/figure.ts index c4da55cd4..f1387c38e 100644 --- a/packages/basic/src/widgets/figure.ts +++ b/packages/basic/src/widgets/figure.ts @@ -1,7 +1,8 @@ import type { Shader, StrokeCap, StrokeJoin } from '@newcar/utils' import { Color, deepMerge, str2StrokeCap, str2StrokeJoin } from '@newcar/utils' -import type { BaseOptions, BaseStyle } from '@newcar/core' +import type { Base, BaseOptions, BaseStyle, ConvertToProp } from '@newcar/core' import { changed, createBase, def, defineWidgetBuilder } from '@newcar/core' +import type { Paint } from 'canvaskit-wasm' export interface FigureStyle extends BaseStyle { border?: boolean @@ -23,8 +24,14 @@ export interface FigureOptions extends BaseOptions { style?: FigureStyle } +export interface Figure extends Base { + style: ConvertToProp + fillPaint: Paint + strokePaint: Paint +} + export function createFigure(options?: FigureOptions) { - return defineWidgetBuilder((ck) => { + return defineWidgetBuilder
((ck) => { const base = createBase(options ?? {})(ck) options.style ??= {} const style = { @@ -46,7 +53,6 @@ export function createFigure(options?: FigureOptions) { const strokePaint = new ck.Paint() const fillPaint = new ck.Paint() - // console.log(style.borderColor.value) strokePaint.setColor(style.borderColor.value.toFloat4()) strokePaint.setStrokeWidth(style.borderWidth.value) if (style.shader.value || style.borderShader.value) diff --git a/packages/basic/src/widgets/line.ts b/packages/basic/src/widgets/line.ts index 9175d3fe6..647ce724a 100644 --- a/packages/basic/src/widgets/line.ts +++ b/packages/basic/src/widgets/line.ts @@ -1,9 +1,8 @@ -import type { Prop } from '@newcar/core' +import type { ConvertToProp, 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 type { Path, PathOptions, PathStyle } from './path' import { createPath } from './path' export interface LineOptions extends PathOptions { @@ -18,15 +17,21 @@ export interface LineStyle extends PathStyle { width?: number } +export interface Line extends Path { + style: ConvertToProp + from: Prop + to: Prop +} + export function createLine(from: Vector2, to: Vector2, options: LineOptions) { - return defineWidgetBuilder((ck) => { + 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, + width: def(options.style.width ?? 2), } path.path.moveTo(from[0], from[1]) diff --git a/packages/basic/src/widgets/path.ts b/packages/basic/src/widgets/path.ts index ac6fb8d31..966f9d417 100644 --- a/packages/basic/src/widgets/path.ts +++ b/packages/basic/src/widgets/path.ts @@ -1,7 +1,8 @@ import { deepMerge } from '@newcar/utils' -import type { Canvas, EmbindEnumEntity, InputCommands, Path } from 'canvaskit-wasm' +import type { Canvas, EmbindEnumEntity, InputCommands, Path as skPath } from 'canvaskit-wasm' +import type { ConvertToProp } from '@newcar/core' import { defineWidgetBuilder } from '../../../core/src/widget' -import type { FigureOptions, FigureStyle } from './figure' +import type { Figure, FigureOptions, FigureStyle } from './figure' import { createFigure } from './figure' export interface PathOptions extends FigureOptions { @@ -10,8 +11,16 @@ export interface PathOptions extends FigureOptions { export interface PathStyle extends FigureStyle {} +export interface Path extends Figure { + style: ConvertToProp + path: skPath + addPathFromPathString: (pathString: string) => void + addPathFromCmds: (cmds: InputCommands) => void + addPathFromOp: (one: skPath, two: skPath, op: EmbindEnumEntity) => void +} + export function createPath(options?: PathOptions) { - return defineWidgetBuilder((ck) => { + return defineWidgetBuilder((ck) => { const figure = createFigure(options ?? {})(ck) const path = new ck.Path() @@ -28,7 +37,7 @@ export function createPath(options?: PathOptions) { ) } - function addPathFromOp(one: Path, two: Path, op: EmbindEnumEntity) { + function addPathFromOp(one: skPath, two: skPath, op: EmbindEnumEntity) { path.addPath( ck.Path.MakeFromOp(one, two, op), ) diff --git a/packages/basic/src/widgets/rect.ts b/packages/basic/src/widgets/rect.ts index bf3ce18cb..6770d5028 100644 --- a/packages/basic/src/widgets/rect.ts +++ b/packages/basic/src/widgets/rect.ts @@ -1,6 +1,7 @@ +import type { ConvertToProp } from '@newcar/core' import { def, defineWidgetBuilder } from '@newcar/core' import { deepMerge } from '@newcar/utils' -import type { PathOptions, PathStyle } from './path' +import type { Path, PathOptions, PathStyle } from './path' import { createPath } from './path' export interface RectOptions extends PathOptions { @@ -23,8 +24,12 @@ export interface RectStyle extends PathStyle { | [number, number, number, number, number, number, number, number] } +export interface Rect extends Path { + style: ConvertToProp +} + export function createRect(width: number, length: number, options: RectOptions) { - return defineWidgetBuilder((ck) => { + return defineWidgetBuilder((ck) => { const path = createPath(options ?? {})(ck) const rect = ck.LTRBRect(0, 0, width, length) path.path.addRect(rect) diff --git a/packages/core/src/base.ts b/packages/core/src/base.ts index d62857a34..41bb6eca0 100644 --- a/packages/core/src/base.ts +++ b/packages/core/src/base.ts @@ -58,12 +58,7 @@ export function createBase(options: BaseOptions) { let current: Animate | undefined - function render(_canvas: Canvas) { - // ... - } - - return { - ...options, + const base = { x, y, centerX, @@ -80,36 +75,44 @@ export function createBase(options: BaseOptions) { animates.push(animate) return this }, - update(canvas: Canvas, elapsed: number, renderFunction: (canvas: Canvas) => any) { - canvas.save() - const ctx = defineAnimationContext({ - widget: this, - elapsed, - ck, - }) - if (!current) { - current = animates.shift() as any - if (current && current.init) { - current.init(ctx) - } - } - else { - const finished = current.animate(ctx) - if (finished) { - if (current.after) - current.after(ctx) - current = undefined - } + update, + } + + function render(_canvas: Canvas) { + // ... + } + + function update(canvas: Canvas, elapsed: number, renderFunction: (canvas: Canvas) => any) { + canvas.save() + const ctx = { + widget: base, + elapsed, + ck, + } + if (!current) { + current = animates.shift() as any + if (current && current.init) { + current.init(ctx) } - for (const child of children) { - child.update(canvas, elapsed, child.render) + } + else { + const finished = current.animate(ctx) + if (finished) { + if (current.after) + current.after(ctx) + current = undefined } - 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) - canvas.restore() - }, + } + for (const child of children) { + child.update(canvas, elapsed, child.render) + } + 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) + canvas.restore() } + + return base }) }