feat: The updates of some widgets

examples/main.ts

@@ -81,7 +81,11 @@ const {
 
 const app = createApp(document.querySelector('#milestone'))
 
-const circle = use(nc.createCircle(100, {
+const circle = use(nc.createPolygon([
+  [0, 0],
+  [100, 100],
+  [200, 300]
+], {
   x: 0,
   y: 0,
 }))

packages/basic/src/widgets/arc.ts

@@ -17,7 +17,7 @@ export interface Arc extends Path {
   to: Prop<number>
 }
 
-export function createArc(radius: number, from: number, to: number, options: ArcOptions) {
+export function createArc(radius: number, from: number, to: number, options?: ArcOptions) {
   return defineWidgetBuilder<Arc>((ck) => {
     const path = createPath(options ?? {})(ck)
     const rect = ck.LTRBRect(

packages/basic/src/widgets/index.ts

@@ -3,3 +3,5 @@ export * from './circle'
 export * from './figure'
 export * from './path'
 export * from './rect'
+export * from './line'
+export * from './polygon'

packages/basic/src/widgets/line.ts

@@ -23,7 +23,7 @@ export interface Line extends Path {
   to: Prop<Vector2>
 }
 
-export function createLine(from: Vector2, to: Vector2, options: LineOptions) {
+export function createLine(from: Vector2, to: Vector2, options?: LineOptions) {
   return defineWidgetBuilder<Line>((ck) => {
     const path = createPath(options)(ck)
 

packages/basic/src/widgets/polygon.ts

@@ -0,0 +1,39 @@
+import { changed, def, defineWidgetBuilder } from '@newcar/core'
+import { deepMerge } from '@newcar/utils'
+import type { Vector2 } from '../utils/vector2'
+import { type PathOptions, type PathStyle, createPath } from './path'
+
+export interface PolygonOptions extends PathOptions {
+  style?: PolygonStyle
+}
+
+export interface PolygonStyle extends PathStyle {}
+
+export function createPolygon(points: Vector2[], options?: PolygonOptions) {
+  return defineWidgetBuilder((ck) => {
+    const path = createPath(options)(ck)
+    const pointsProp = points.map(point => def(point))
+    let index = 0
+
+    function reset(points: Vector2[]) {
+      path.path.reset()
+      for (const point of points) {
+        if (index === 0)
+          path.path.moveTo(...point)
+        else
+          path.path.lineTo(...point)
+        index += 1
+      }
+    }
+
+    for (const point of pointsProp) {
+      changed(point, _v => reset(pointsProp.map(p => p.value)))
+    }
+
+    reset(pointsProp.map(p => p.value))
+
+    return deepMerge(path, {
+      points: pointsProp,
+    })
+  })
+}

packages/basic/src/widgets/rect.ts

@@ -1,5 +1,5 @@
 import type { ConvertToProp } from '@newcar/core'
-import { def, defineWidgetBuilder } 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'
@@ -30,10 +30,22 @@ export interface Rect extends Path {
 
 export function createRect(width: number, length: number, options: RectOptions) {
   return defineWidgetBuilder<Rect>((ck) => {
+    const widthProp = def(width)
+    const lengthProp = def(length)
+
     const path = createPath(options ?? {})(ck)
-    const rect = ck.LTRBRect(0, 0, width, length)
+    const rect = ck.LTRBRect(0, 0, widthProp.value, lengthProp.value)
     path.path.addRect(rect)
 
+    function reset() {
+      path.path.reset()
+      rect.set([0, 0, widthProp.value, lengthProp.value])
+      path.path.addRect(rect)
+    }
+
+    changed(widthProp, reset)
+    changed(lengthProp, reset)
+
     const style = {
       radius: def(options.style.radius ?? 0),
     }