From 60494ca49c38727f6029732f59546b9c0bb73c36 Mon Sep 17 00:00:00 2001 From: Acbox <850625057@qq.com> Date: Mon, 17 Jun 2024 16:49:49 +0800 Subject: [PATCH] refactor(80%)(mod-geometry): refactoring to adapt the new core. --- mods/mod-geometry/src/widgets/axisymmetric.ts | 14 +- mods/mod-geometry/src/widgets/brace.ts | 122 +++++++++--------- .../src/widgets/centrallySymmetric.ts | 30 ++++- mods/mod-geometry/src/widgets/difference.ts | 18 +-- mods/mod-geometry/src/widgets/exclusion.ts | 18 +-- mods/mod-geometry/src/widgets/index.ts | 5 +- mods/mod-geometry/src/widgets/intersection.ts | 18 +-- mods/mod-geometry/src/widgets/union.ts | 9 ++ packages/basic/src/widgets/path.ts | 5 +- 9 files changed, 123 insertions(+), 116 deletions(-) create mode 100644 mods/mod-geometry/src/widgets/union.ts diff --git a/mods/mod-geometry/src/widgets/axisymmetric.ts b/mods/mod-geometry/src/widgets/axisymmetric.ts index c609358ea..e7ad5b801 100644 --- a/mods/mod-geometry/src/widgets/axisymmetric.ts +++ b/mods/mod-geometry/src/widgets/axisymmetric.ts @@ -1,12 +1,14 @@ import { Widget, type WidgetOptions } from '@newcar/core' export class Axisymmetric extends Widget { - mirror: Widget - constructor(origin: Widget, options?: WidgetOptions) { - options ??= {} + constructor( + private originalWidget: Widget, + /** + * [x1, y1, x2, y2] + */ + private axis: [number, number, number, number], + options: WidgetOptions, + ) { super(options) - this.mirror = origin.copy() - this.mirror.style.scaleX = -1 - this.add(this.mirror) } } diff --git a/mods/mod-geometry/src/widgets/brace.ts b/mods/mod-geometry/src/widgets/brace.ts index 3feea86b5..1e381a637 100644 --- a/mods/mod-geometry/src/widgets/brace.ts +++ b/mods/mod-geometry/src/widgets/brace.ts @@ -1,71 +1,71 @@ -import type { Vector2 } from '@newcar/basic' -import type { WidgetOptions, WidgetRange, WidgetStyle } from '@newcar/core' -import { Widget } from '@newcar/core' -import type { Shader } from '@newcar/utils' -import { Color } from '@newcar/utils' -import type { Canvas, CanvasKit, Paint, Path } from 'canvaskit-wasm' +// import type { Vector2 } from '@newcar/basic' +// import type { WidgetOptions, WidgetRange, WidgetStyle } from '@newcar/core' +// import { Widget } from '@newcar/core' +// import type { Shader } from '@newcar/utils' +// import { Color } from '@newcar/utils' +// import type { Canvas, CanvasKit, Paint, Path } from 'canvaskit-wasm' -export interface BraceOptions extends WidgetOptions { - style?: BraceStyle -} +// export interface BraceOptions extends WidgetOptions { +// style?: BraceStyle +// } -export interface BraceStyle extends WidgetStyle { - color?: Color - shader?: Shader -} +// export interface BraceStyle extends WidgetStyle { +// color?: Color +// shader?: Shader +// } -export class Brace extends Widget { - declare style: BraceStyle - path: Path - paint: Paint - parts: Widget +// export class Brace extends Widget { +// declare style: BraceStyle +// path: Path +// paint: Paint +// parts: Widget - constructor( - public from: Vector2, - public to: Vector2, - options?: BraceOptions, - ) { - options ??= {} - super(options) - options.style ??= {} - this.style.color = options.style.color ?? Color.WHITE - } +// constructor( +// public from: Vector2, +// public to: Vector2, +// options?: BraceOptions, +// ) { +// options ??= {} +// super(options) +// options.style ??= {} +// this.style.color = options.style.color ?? Color.WHITE +// } - init(ck: CanvasKit): void { - this.paint = new ck.Paint() - this.path = new ck.Path() - this.paint.setStyle(ck.PaintStyle.Stroke) - this.paint.setColor(this.style.color.toFloat4()) - this.paint.setShader(this.style.shader?.toCanvasKitShader(ck) ?? null) - this.paint.setAlphaf(this.style.transparency * this.style.color.alpha) - this.paint.setStrokeWidth(3) - const length = Math.sqrt((this.to[0] - this.from[0]) ** 2 + (this.to[1] - this.from[1])) +// init(ck: CanvasKit): void { +// this.paint = new ck.Paint() +// this.path = new ck.Path() +// this.paint.setStyle(ck.PaintStyle.Stroke) +// this.paint.setColor(this.style.color.toFloat4()) +// this.paint.setShader(this.style.shader?.toCanvasKitShader(ck) ?? null) +// this.paint.setAlphaf(this.style.transparency * this.style.color.alpha) +// this.paint.setStrokeWidth(3) +// const length = Math.sqrt((this.to[0] - this.from[0]) ** 2 + (this.to[1] - this.from[1])) - this.path.moveTo(...this.from) - this.path.lineTo(this.from[0] + 10, this.from[1] - 10) - this.path.lineTo(this.from[0] + 10 + (length - 20) / 2, this.from[1] - 10) - this.path.lineTo(this.from[0] + 20 + (length - 20) / 2, this.from[1] - 20) - this.path.lineTo(this.from[0] + 30 + (length - 20) / 2, this.from[1] - 10) - this.path.lineTo(this.from[0] + 30 + length - 20, this.from[1] - 10) - this.path.lineTo(this.from[0] + 40 + length - 20, this.from[1]) - } +// this.path.moveTo(...this.from) +// this.path.lineTo(this.from[0] + 10, this.from[1] - 10) +// this.path.lineTo(this.from[0] + 10 + (length - 20) / 2, this.from[1] - 10) +// this.path.lineTo(this.from[0] + 20 + (length - 20) / 2, this.from[1] - 20) +// this.path.lineTo(this.from[0] + 30 + (length - 20) / 2, this.from[1] - 10) +// this.path.lineTo(this.from[0] + 30 + length - 20, this.from[1] - 10) +// this.path.lineTo(this.from[0] + 40 + length - 20, this.from[1]) +// } - predraw(ck: CanvasKit, propertyChanged: string): void { - // eslint-disable-next-line no-empty - if (propertyChanged === 'length') { - } - } +// predraw(ck: CanvasKit, propertyChanged: string): void { +// // eslint-disable-next-line no-empty +// if (propertyChanged === 'length') { +// } +// } - draw(canvas: Canvas): void { - canvas.drawPath(this.path, this.paint) - } +// draw(canvas: Canvas): void { +// canvas.drawPath(this.path, this.paint) +// } - calculateIn(x: number, y: number): boolean { - return this.path.contains(x, y) - } +// calculateIn(x: number, y: number): boolean { +// return this.path.contains(x, y) +// } - calculateRange(): WidgetRange { - const bounds = this.path.computeTightBounds() - return [...bounds] as WidgetRange - } -} +// calculateRange(): WidgetRange { +// const bounds = this.path.computeTightBounds() +// return [...bounds] as WidgetRange +// } +// } diff --git a/mods/mod-geometry/src/widgets/centrallySymmetric.ts b/mods/mod-geometry/src/widgets/centrallySymmetric.ts index a1bfb991c..41f9931d3 100644 --- a/mods/mod-geometry/src/widgets/centrallySymmetric.ts +++ b/mods/mod-geometry/src/widgets/centrallySymmetric.ts @@ -1,12 +1,28 @@ -import { Widget, type WidgetOptions } from '@newcar/core' +import type { Ref, WidgetOptions } from '@newcar/core' +import { Widget, changed, reactive, ref } from '@newcar/core' +import { deepClone } from '@newcar/utils' export class centrallySymmetric extends Widget { - mirror: Widget - constructor(origin: Widget, options?: WidgetOptions) { - options ??= {} + private clone: Widget + center: Ref<[number, number]> + + constructor( + private originalWidget: Widget, + center: [number, number], + options: WidgetOptions, + ) { super(options) - this.mirror = origin.copy() - this.mirror.style.rotation! += 180 - this.add(this.mirror) + this.center = ref(center) + + this.clone = reactive(deepClone(originalWidget)) + this.clone.centerX.value = center[0] + this.clone.centerY.value = center[1] + this.clone.style.rotation.value = 180 + + this.add(this.clone) + + changed(this.clone, (v) => { + this.clone = v + }) } } diff --git a/mods/mod-geometry/src/widgets/difference.ts b/mods/mod-geometry/src/widgets/difference.ts index d4d0949dd..274de656b 100644 --- a/mods/mod-geometry/src/widgets/difference.ts +++ b/mods/mod-geometry/src/widgets/difference.ts @@ -1,17 +1,9 @@ -import type { WidgetOptions } from '@newcar/core' -import { Widget } from '@newcar/core' +import { Path } from '@newcar/basic' +import type { PathOptions } from '@newcar/basic' -export class Difference extends Widget { - clones: Widget[] = [] - - constructor(public widgets: Widget[], options?: WidgetOptions) { - options ??= {} +export class Difference extends Path { + constructor(private figure1: Path, private figure2: Path, options?: PathOptions) { super(options) - for (const widget of this.widgets) { - const clone = widget.copy() - clone.style.blendMode = 'dstOut' - this.clones.push(clone) - } - this.add(...this.clones) + this.addPathFromOptions(this.figure1.path, this.figure2.path, 'difference') } } diff --git a/mods/mod-geometry/src/widgets/exclusion.ts b/mods/mod-geometry/src/widgets/exclusion.ts index 8bb24e39f..61845d3c9 100644 --- a/mods/mod-geometry/src/widgets/exclusion.ts +++ b/mods/mod-geometry/src/widgets/exclusion.ts @@ -1,17 +1,9 @@ -import type { WidgetOptions } from '@newcar/core' -import { Widget } from '@newcar/core' +import { Path } from '@newcar/basic' +import type { PathOptions } from '@newcar/basic' -export class Exclusion extends Widget { - clones: Widget[] = [] - - constructor(public widgets: Widget[], options?: WidgetOptions) { - options ??= {} +export class Exclusion extends Path { + constructor(private figure1: Path, private figure2: Path, options?: PathOptions) { super(options) - for (const widget of this.widgets) { - const clone = widget.copy() - clone.style.blendMode = 'xor' - this.clones.push(clone) - } - this.add(...this.clones) + this.addPathFromOptions(this.figure1.path, this.figure2.path, 'xor') } } diff --git a/mods/mod-geometry/src/widgets/index.ts b/mods/mod-geometry/src/widgets/index.ts index 080fd4cb3..47f2209c2 100644 --- a/mods/mod-geometry/src/widgets/index.ts +++ b/mods/mod-geometry/src/widgets/index.ts @@ -2,4 +2,7 @@ export * from './dot' export * from './angle' export * from './axisymmetric' export * from './centrallySymmetric' -export * from './brace' +export * from './difference' +export * from './exclusion' +export * from './intersection' +export * from './union' diff --git a/mods/mod-geometry/src/widgets/intersection.ts b/mods/mod-geometry/src/widgets/intersection.ts index ef0c07a75..9b5e3b9a7 100644 --- a/mods/mod-geometry/src/widgets/intersection.ts +++ b/mods/mod-geometry/src/widgets/intersection.ts @@ -1,17 +1,9 @@ -import type { WidgetOptions } from '@newcar/core' -import { Widget } from '@newcar/core' +import { Path } from '@newcar/basic' +import type { PathOptions } from '@newcar/basic' -export class Intersection extends Widget { - clones: Widget[] = [] - - constructor(public widgets: Widget[], options?: WidgetOptions) { - options ??= {} +export class Intersection extends Path { + constructor(private figure1: Path, private figure2: Path, options?: PathOptions) { super(options) - for (const widget of this.widgets) { - const clone = widget.copy() - clone.style.blendMode = 'srcIn' - this.clones.push(clone) - } - this.add(...this.clones) + this.addPathFromOptions(this.figure1.path, this.figure2.path, 'intersect') } } diff --git a/mods/mod-geometry/src/widgets/union.ts b/mods/mod-geometry/src/widgets/union.ts new file mode 100644 index 000000000..f151031b7 --- /dev/null +++ b/mods/mod-geometry/src/widgets/union.ts @@ -0,0 +1,9 @@ +import { Path } from '@newcar/basic' +import type { PathOptions } from '@newcar/basic' + +export class Union extends Path { + constructor(private figure1: Path, private figure2: Path, options?: PathOptions) { + super(options) + this.addPathFromOptions(this.figure1.path, this.figure2.path, 'union') + } +} diff --git a/packages/basic/src/widgets/path.ts b/packages/basic/src/widgets/path.ts index 5da6e5e37..ecd6ad2ea 100644 --- a/packages/basic/src/widgets/path.ts +++ b/packages/basic/src/widgets/path.ts @@ -1,5 +1,6 @@ import type { Canvas, CanvasKit, Path as ckPath } from 'canvaskit-wasm' import type { WidgetRange } from '@newcar/core' +import { type PathOp, str2PathOp } from '@newcar/utils' import type { FigureOptions, FigureStyle } from './figure' import { Figure } from './figure' @@ -33,7 +34,7 @@ export class Path extends Figure { break } case 1: { - this.path.addPath(ck.Path.MakeFromOp( args[0], args[1], args[2])) + this.path.addPath(ck.Path.MakeFromOp( args[0], args[1], str2PathOp(ck, args[2]))) break } case 2: { @@ -50,7 +51,7 @@ export class Path extends Figure { return this } - addPathFromOptions(one: ckPath, two: ckPath, options: any) { + addPathFromOptions(one: ckPath, two: ckPath, options: PathOp) { this.pathData.push([1, one, two, options]) return this