feat(components): graphical components default values

packages/nf-drawable-circle-2d.component/index.ts

@@ -6,66 +6,211 @@ export class DrawableCircle2D {
   shape: Circle;
 
   constructor(
-    public radius: number,
-    public width?: number,
-    public height?: number,
-    public visible?: boolean,
-    public id?: string,
-    public opacity?: number,
-    public scaleX?: number,
-    public scaleY?: number,
-    public skewX?: number,
-    public skewY?: number,
-    public rotation?: number,
-    public offsetX?: number,
-    public offsetY?: number,
-    public fillColor?: string,
-    public fillPatternImage?: string,
-    public fillPatternX?: number,
-    public fillPatternY?: number,
-    public fillPatternOffsetX?: number,
-    public fillPatternOffsetY?: number,
-    public fillPatternScaleX?: number,
-    public fillPatternScaleY?: number,
-    public fillPatternRotation?: number,
-    public fillPatternRepeat?: string,
+    radius?: number,
+    visible?: boolean,
+    id?: string,
+    opacity?: number,
+    scaleX?: number,
+    scaleY?: number,
+    skewX?: number,
+    skewY?: number,
+    rotation?: number,
+    offsetX?: number,
+    offsetY?: number,
+    fillColor?: string,
+    private _fillPatternImage?: string,
+    fillPatternX?: number,
+    fillPatternY?: number,
+    fillPatternOffsetX?: number,
+    fillPatternOffsetY?: number,
+    fillPatternScaleX?: number,
+    fillPatternScaleY?: number,
+    fillPatternRotation?: number,
+    fillPatternRepeat?: string,
   ) {
-    this.shape = new Circle();
-    if (radius !== undefined) this.shape.radius(radius);
-    if (width !== undefined) this.shape.width(width);
-    if (height !== undefined) this.shape.height(height);
-    if (visible !== undefined) this.shape.visible(visible);
-    if (id !== undefined) this.shape.id(id);
-    if (opacity !== undefined) this.shape.opacity(opacity);
-    if (scaleX !== undefined) this.shape.scaleX(scaleX);
-    if (scaleY !== undefined) this.shape.scaleY(scaleY);
-    if (skewX !== undefined) this.shape.skewX(skewX);
-    if (skewY !== undefined) this.shape.skewY(skewY);
-    if (rotation !== undefined) this.shape.rotation(rotation);
-    if (offsetX !== undefined) this.shape.offsetX(offsetX);
-    if (offsetY !== undefined) this.shape.offsetY(offsetY);
-    if (fillColor !== undefined) this.shape.fill(fillColor);
-    if (fillPatternX !== undefined) this.shape.fillPatternX(fillPatternX);
-    if (fillPatternY !== undefined) this.shape.fillPatternY(fillPatternY);
-    if (fillPatternOffsetX !== undefined) this.shape.fillPatternOffsetX(fillPatternOffsetX);
-    if (fillPatternOffsetY !== undefined) this.shape.fillPatternOffsetY(fillPatternOffsetY);
-    if (fillPatternScaleX !== undefined) this.shape.fillPatternScaleX(fillPatternScaleX);
-    if (fillPatternScaleY !== undefined) this.shape.fillPatternScaleY(fillPatternScaleY);
-    if (fillPatternRotation !== undefined) this.shape.fillPatternRotation(fillPatternRotation);
-    if (fillPatternRepeat !== undefined) this.shape.fillPatternRepeat(fillPatternRepeat);
-    if (fillPatternImage !== undefined)
-      this.shape.fillPatternImage(
-        this.fillPatternImage
-          ? Object.assign(new Image(), { src: this.fillPatternImage })
-          : undefined,
-      );
+    this.shape = new Circle({
+      radius,
+      visible,
+      id,
+      opacity,
+      scaleX,
+      scaleY,
+      skewX,
+      skewY,
+      rotation,
+      offsetX,
+      offsetY,
+      fill: fillColor,
+      fillPatternImage: _fillPatternImage
+        ? Object.assign(new Image(), { src: _fillPatternImage })
+        : undefined,
+      fillPatternX,
+      fillPatternY,
+      fillPatternOffsetX,
+      fillPatternOffsetY,
+      fillPatternScaleX,
+      fillPatternScaleY,
+      fillPatternRotation,
+      fillPatternRepeat,
+    });
+  }
+
+  get radius() {
+    return this.shape.radius();
+  }
+  set radius(v: number) {
+    this.shape.radius(v);
+    this.redraw();
+  }
+  get visible() {
+    return this.shape.visible();
+  }
+  set visible(v: boolean) {
+    this.shape.visible(v);
+    this.redraw();
+  }
+  get id() {
+    return this.shape.id();
+  }
+  set id(v: string) {
+    this.shape.id(v);
+    this.redraw();
+  }
+  get opacity() {
+    return this.shape.opacity();
+  }
+  set opacity(v: number) {
+    this.shape.opacity(v);
+    this.redraw();
+  }
+  get scaleX() {
+    return this.shape.scaleX();
+  }
+  set scaleX(v: number) {
+    this.shape.scaleX(v);
+    this.redraw();
+  }
+  get scaleY() {
+    return this.shape.scaleY();
+  }
+  set scaleY(v: number) {
+    this.shape.scaleY(v);
+    this.redraw();
+  }
+  get skewX() {
+    return this.shape.skewX();
+  }
+  set skewX(v: number) {
+    this.shape.skewX(v);
+    this.redraw();
+  }
+  get skewY() {
+    return this.shape.skewY();
+  }
+  set skewY(v: number) {
+    this.shape.skewY(v);
+    this.redraw();
+  }
+  get rotation() {
+    return this.shape.rotation();
+  }
+  set rotation(v: number) {
+    this.shape.rotation(v);
+    this.redraw();
+  }
+  get offsetX() {
+    return this.shape.offsetX();
+  }
+  set offsetX(v: number) {
+    this.shape.offsetX(v);
+    this.redraw();
+  }
+  get offsetY() {
+    return this.shape.offsetY();
+  }
+  set offsetY(v: number) {
+    this.shape.offsetY(v);
+    this.redraw();
+  }
+  get fillColor() {
+    return this.shape.fill().toString();
+  }
+  set fillColor(v: string) {
+    this.shape.fill(v);
+    this.redraw();
+  }
+  get fillPatternImage(): string {
+    return this._fillPatternImage || "";
+  }
+  set fillPatternImage(v: string) {
+    this.shape.fillPatternImage(v ? Object.assign(new Image(), { src: v }) : undefined);
+    this.redraw();
+  }
+  get fillPatternX() {
+    return this.shape.fillPatternX();
+  }
+  set fillPatternX(v: number) {
+    this.shape.fillPatternX(v);
+    this.redraw();
+  }
+  get fillPatternY() {
+    return this.shape.fillPatternY();
+  }
+  set fillPatternY(v: number) {
+    this.shape.fillPatternY(v);
+    this.redraw();
+  }
+  get fillPatternOffsetX() {
+    return this.shape.fillPatternOffsetX();
+  }
+  set fillPatternOffsetX(v: number) {
+    this.shape.fillPatternOffsetX(v);
+    this.redraw();
+  }
+  get fillPatternOffsetY() {
+    return this.shape.fillPatternOffsetY();
+  }
+  set fillPatternOffsetY(v: number) {
+    this.shape.fillPatternOffsetY(v);
+    this.redraw();
+  }
+  get fillPatternScaleX() {
+    return this.shape.fillPatternScaleX();
+  }
+  set fillPatternScaleX(v: number) {
+    this.shape.fillPatternScaleX(v);
+    this.redraw();
+  }
+  get fillPatternScaleY() {
+    return this.shape.fillPatternScaleY();
+  }
+  set fillPatternScaleY(v: number) {
+    this.shape.fillPatternScaleY(v);
+    this.redraw();
+  }
+  get fillPatternRotation() {
+    return this.shape.fillPatternRotation();
+  }
+  set fillPatternRotation(v: number) {
+    this.shape.fillPatternRotation(v);
+    this.redraw();
+  }
+  get fillPatternRepeat() {
+    return this.shape.fillPatternRepeat();
+  }
+  set fillPatternRepeat(v: string) {
+    this.shape.fillPatternRepeat(v);
+    this.redraw();
   }
 
   public addToLayer(layer: Layer): void {
     if (this.shape.getParent() !== layer) layer.add(this.shape);
   }
-}
 
+  private redraw() {
+    this.shape.getLayer()?.batchDraw();
+  }
+}
 // * Required to generate code
 export default DrawableCircle2D.name;
 
@@ -78,25 +223,15 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "radius",
       type: "number",
       description: "Radius of the circle in pixels",
-      optional: true,
-    },
-    {
-      name: "width",
-      type: "number",
-      description: "Width of the node in pixels",
-      optional: true,
-    },
-    {
-      name: "height",
-      type: "number",
-      description: "Height of the node in pixels",
-      optional: true,
+      default: 10,
+      optional: false,
     },
     {
       name: "visible",
       type: "boolean",
       description: "Controls whether the node is rendered",
-      optional: true,
+      default: true,
+      optional: false,
     },
     {
       name: "id",
@@ -108,29 +243,34 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       name: "opacity",
       type: "number",
       description: "Opacity from 0 (transparent) to 1 (fully opaque)",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleX",
       type: "number",
       description: "Horizontal scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "scaleY",
       type: "number",
       description: "Vertical scale factor",
+      default: 1,
       optional: true,
     },
     {
       name: "skewX",
       type: "number",
+      default: 0,
       description: "Horizontal skew in radians, shears along the X axis",
       optional: true,
     },
     {
       name: "skewY",
       type: "number",
+      default: 0,
       description: "Vertical skew in radians, shears along the Y axis",
       optional: true,
     },
@@ -139,25 +279,30 @@ export const EDITOR_COMPONENT_MANIFEST: EditorComponentManifest = {
       type: "number",
       description:
         "Rotation angle in degrees applied around the offset point (positive values rotate clockwise)",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetX",
       type: "number",
       description: "Horizontal offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
       name: "offsetY",
       type: "number",
       description: "Vertical offset for the transform origin",
+      default: 0,
       optional: true,
     },
     {
       name: "fillColor",
       type: "string",
       description:
         'Solid fill color as a CSS color string (e.g. "red", "#ff0000", "rgba(255,0,0,0.5)"), or a pre-built CanvasGradient object',
+      default: "red",
+      example: "rgb(255,255,255)",
       optional: true,
     },
     {