refactor(80%)(mod-geometry): refactoring to adapt the new core.

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)
   }
 }

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
+//   }
+// }

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
+    })
   }
 }

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')
   }
 }

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')
   }
 }

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'

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')
   }
 }

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')
+  }
+}

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(<ckPath> args[0], args[1], args[2]))
+          this.path.addPath(ck.Path.MakeFromOp(<ckPath> 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