feat: add "attrs" attribute to Graph class

packages/core/src/commands/align.ts

@@ -45,7 +45,7 @@ export class AlignCmd implements ICommand {
         for (let i = 0; i < elements.length; i++) {
           const el = elements[i];
           this.dx[i] = mixedBBox.minX - bBoxes[i].minX;
-          el.updateAttrs({ x: el.x + this.dx[i] });
+          el.updateAttrs({ x: el.attrs.x + this.dx[i] });
         }
         break;
       }
@@ -54,23 +54,23 @@ export class AlignCmd implements ICommand {
         for (let i = 0; i < elements.length; i++) {
           const el = elements[i];
           this.dx[i] = centerX - (bBoxes[i].minX / 2 + bBoxes[i].maxX / 2);
-          el.updateAttrs({ x: el.x + this.dx[i] });
+          el.updateAttrs({ x: el.attrs.x + this.dx[i] });
         }
         break;
       }
       case AlignType.Right: {
         for (let i = 0; i < elements.length; i++) {
           const el = elements[i];
           this.dx[i] = mixedBBox.maxX - bBoxes[i].maxX;
-          el.updateAttrs({ x: el.x + this.dx[i] });
+          el.updateAttrs({ x: el.attrs.x + this.dx[i] });
         }
         break;
       }
       case AlignType.Top: {
         for (let i = 0; i < elements.length; i++) {
           const el = elements[i];
           this.dy[i] = mixedBBox.minY - bBoxes[i].minY;
-          el.updateAttrs({ y: el.y + this.dy[i] });
+          el.updateAttrs({ y: el.attrs.y + this.dy[i] });
         }
         break;
       }
@@ -79,15 +79,15 @@ export class AlignCmd implements ICommand {
         for (let i = 0; i < elements.length; i++) {
           const el = elements[i];
           this.dy[i] = centerY - (bBoxes[i].minY / 2 + bBoxes[i].maxY / 2);
-          el.updateAttrs({ y: el.y + this.dy[i] });
+          el.updateAttrs({ y: el.attrs.y + this.dy[i] });
         }
         break;
       }
       case AlignType.Bottom: {
         for (let i = 0; i < elements.length; i++) {
           const el = elements[i];
           this.dy[i] = mixedBBox.maxY - bBoxes[i].maxY;
-          el.updateAttrs({ y: el.y + this.dy[i] });
+          el.updateAttrs({ y: el.attrs.y + this.dy[i] });
         }
         break;
       }
@@ -100,17 +100,17 @@ export class AlignCmd implements ICommand {
     for (let i = 0; i < this.elements.length; i++) {
       const el = this.elements[i];
       el.updateAttrs({
-        x: el.x + (this.dx[i] ?? 0),
-        y: el.y + (this.dy[i] ?? 0),
+        x: el.attrs.x + (this.dx[i] ?? 0),
+        y: el.attrs.y + (this.dy[i] ?? 0),
       });
     }
   }
   undo() {
     for (let i = 0; i < this.elements.length; i++) {
       const el = this.elements[i];
       el.updateAttrs({
-        x: el.x - (this.dx[i] ?? 0),
-        y: el.y - (this.dy[i] ?? 0),
+        x: el.attrs.x - (this.dx[i] ?? 0),
+        y: el.attrs.y - (this.dy[i] ?? 0),
       });
     }
   }

packages/core/src/commands/group.ts

@@ -34,23 +34,25 @@ export class GroupCmd implements ICommand {
     const groupedGraphs: Graph[] = [];
 
     for (let i = 0; i < graphs.length; i++) {
-      const prevGraphId = i <= 0 ? '' : graphs[i - 1].id;
+      const prevGraphId = i <= 0 ? '' : graphs[i - 1].attrs.id;
       const graph = graphs[i];
       if (groupedSet.has(graph)) {
         groupedSet.delete(graph);
         groupedGraphs.push(graph);
 
         this.prevGroupedElInfoMap.set(prevGraphId, {
           graph,
-          groupIds: this.editor.groupManager.getGraphGroupIds(graph.id),
+          groupIds: this.editor.groupManager.getGraphGroupIds(graph.attrs.id),
         });
 
         if (groupedSet.size === 0) {
           newGraphs.push(...groupedGraphs);
-          const groupIds = this.editor.groupManager.getGraphGroupIds(graph.id);
+          const groupIds = this.editor.groupManager.getGraphGroupIds(
+            graph.attrs.id,
+          );
           for (const groupedGraph of groupedGraphs) {
             this.editor.groupManager.setGraphGroupIds(
-              groupedGraph.id,
+              groupedGraph.attrs.id,
               new Set([...groupIds, this.group.id]),
             );
           }
@@ -85,15 +87,18 @@ export class GroupCmd implements ICommand {
         newGraphs.push(graph);
       }
 
-      let graphId = graph ? graph.id : '';
+      let graphId = graph ? graph.attrs.id : '';
       // eslint-disable-next-line no-constant-condition
       while (true) {
         if (prevGroupedElInfoMap.has(graphId)) {
           const { graph: groupedGraph, groupIds } =
             prevGroupedElInfoMap.get(graphId)!;
-          this.editor.groupManager.setGraphGroupIds(groupedGraph.id, groupIds);
+          this.editor.groupManager.setGraphGroupIds(
+            groupedGraph.attrs.id,
+            groupIds,
+          );
           newGraphs.push(groupedGraph);
-          graphId = groupedGraph.id;
+          graphId = groupedGraph.attrs.id;
         } else {
           break;
         }

packages/core/src/commands/move_graphs.ts

@@ -12,14 +12,14 @@ export class MoveGraphsCommand implements ICommand {
     const { dx, dy } = this;
     for (let i = 0, len = this.graphs.length; i < len; i++) {
       const element = this.graphs[i];
-      element.updateAttrs({ x: element.x + dx, y: element.y + dy });
+      element.updateAttrs({ x: element.attrs.x + dx, y: element.attrs.y + dy });
     }
   }
   undo() {
     const { dx, dy } = this;
     for (let i = 0, len = this.graphs.length; i < len; i++) {
       const element = this.graphs[i];
-      element.updateAttrs({ x: element.x - dx, y: element.y - dy });
+      element.updateAttrs({ x: element.attrs.x - dx, y: element.attrs.y - dy });
     }
   }
 }

packages/core/src/control_handle_manager/control_handle_manager.ts

@@ -142,14 +142,14 @@ export class ControlHandleManager {
     const s = this.transformHandles.get('s')!;
     const w = this.transformHandles.get('w')!;
     const e = this.transformHandles.get('e')!;
-    n.graph.width = s.graph.width =
+    n.graph.attrs.width = s.graph.attrs.width =
       rect.width * zoom - handleSize - handleStrokeWidth;
-    w.graph.height = e.graph.height =
+    w.graph.attrs.height = e.graph.attrs.height =
       rect.height * zoom - handleSize - handleStrokeWidth;
-    n.graph.height =
-      s.graph.height =
-      w.graph.width =
-      e.graph.width =
+    n.graph.attrs.height =
+      s.graph.attrs.height =
+      w.graph.attrs.width =
+      e.graph.attrs.width =
         neswHandleWidth;
   }
 
@@ -173,13 +173,16 @@ export class ControlHandleManager {
           handle.cx,
           handle.cy,
         );
-        graph.updateAttrs({ x: x - graph.width / 2, y: y - graph.height / 2 });
+        graph.updateAttrs({
+          x: x - graph.attrs.width / 2,
+          y: y - graph.attrs.height / 2,
+        });
       }
       if (rect) {
-        graph.rotation = rect.rotation;
+        graph.attrs.rotation = rect.rotation;
       }
       if (handle.rotation !== undefined) {
-        graph.rotation = handle.rotation;
+        graph.attrs.rotation = handle.rotation;
       }
 
       if (!graph.getVisible()) {

packages/core/src/editor.ts

@@ -9,7 +9,7 @@ import { ClipboardManager } from './clipboard';
 import { CommandManager } from './commands/command_manager';
 import { ControlHandleManager } from './control_handle_manager';
 import { CursorManger, ICursor } from './cursor_manager';
-import { GraphAttrs } from './graphs';
+import { Graph } from './graphs';
 import { GroupManager } from './group_manager';
 import { HostEventManager } from './host_event_manager';
 import { ImgManager } from './Img_manager';
@@ -219,10 +219,10 @@ export class Editor {
     const { x, y } = this.getCursorXY(event);
     return this.viewportCoordsToScene(x, y, round);
   }
-  moveElements(elements: GraphAttrs[], dx: number, dy: number) {
+  moveElements(elements: Graph[], dx: number, dy: number) {
     for (const element of elements) {
-      element.x += dx;
-      element.y += dy;
+      element.attrs.x += dx;
+      element.attrs.y += dy;
     }
   }
   render() {

packages/core/src/graphs/ellipse.ts

@@ -10,21 +10,24 @@ import { Graph, GraphAttrs } from './graph';
 
 export type EllipseAttrs = GraphAttrs;
 
-export class Ellipse extends Graph {
-  constructor(options: EllipseAttrs) {
+export class Ellipse extends Graph<EllipseAttrs> {
+  override type = GraphType.Ellipse;
+
+  constructor(options: Omit<EllipseAttrs, 'id'>) {
     super({ ...options, type: GraphType.Ellipse });
   }
 
   override hitTest(x: number, y: number, padding = 0) {
-    const cx = this.x + this.width / 2;
-    const cy = this.y + this.height / 2;
-    const strokeWidth = (this.strokeWidth || 0) / 2;
+    const attrs = this.attrs;
+    const cx = attrs.x + attrs.width / 2;
+    const cy = attrs.y + attrs.height / 2;
+    const strokeWidth = (attrs.strokeWidth || 0) / 2;
     padding = padding + strokeWidth;
-    const w = this.width / 2 + padding;
-    const h = this.height / 2 + padding;
+    const w = attrs.width / 2 + padding;
+    const h = attrs.height / 2 + padding;
 
-    const rotatedHitPoint = this.rotation
-      ? transformRotate(x, y, -this.rotation, cx, cy)
+    const rotatedHitPoint = attrs.rotation
+      ? transformRotate(x, y, -attrs.rotation, cx, cy)
       : { x, y };
 
     return (
@@ -39,16 +42,17 @@ export class Ellipse extends Graph {
     imgManager?: ImgManager,
     smooth?: boolean,
   ): void {
-    const cx = this.x + this.width / 2;
-    const cy = this.y + this.height / 2;
+    const attrs = this.attrs;
+    const cx = attrs.x + attrs.width / 2;
+    const cy = attrs.y + attrs.height / 2;
 
-    if (this.rotation) {
-      rotateInCanvas(ctx, this.rotation, cx, cy);
+    if (attrs.rotation) {
+      rotateInCanvas(ctx, attrs.rotation, cx, cy);
     }
 
     ctx.beginPath();
-    ctx.ellipse(cx, cy, this.width / 2, this.height / 2, 0, 0, DOUBLE_PI);
-    for (const texture of this.fill) {
+    ctx.ellipse(cx, cy, attrs.width / 2, attrs.height / 2, 0, 0, DOUBLE_PI);
+    for (const texture of attrs.fill ?? []) {
       if (texture.type === TextureType.Solid) {
         ctx.fillStyle = parseRGBAStr(texture.attrs);
         ctx.fill();
@@ -62,9 +66,9 @@ export class Ellipse extends Graph {
       }
     }
 
-    if (this.strokeWidth) {
-      ctx.lineWidth = this.strokeWidth;
-      for (const texture of this.stroke) {
+    if (attrs.strokeWidth) {
+      ctx.lineWidth = attrs.strokeWidth;
+      for (const texture of attrs.stroke ?? []) {
         if (texture.type === TextureType.Solid) {
           ctx.strokeStyle = parseRGBAStr(texture.attrs);
           ctx.stroke();
@@ -82,17 +86,18 @@ export class Ellipse extends Graph {
     stroke: string,
     strokeWidth: number,
   ) {
-    const cx = this.x + this.width / 2;
-    const cy = this.y + this.height / 2;
+    const { x, y, width, height, rotation } = this.attrs;
+    const cx = x + width / 2;
+    const cy = y + height / 2;
 
-    if (this.rotation) {
-      rotateInCanvas(ctx, this.rotation, cx, cy);
+    if (rotation) {
+      rotateInCanvas(ctx, rotation, cx, cy);
     }
 
     ctx.strokeStyle = stroke;
     ctx.lineWidth = strokeWidth;
     ctx.beginPath();
-    ctx.ellipse(cx, cy, this.width / 2, this.height / 2, 0, 0, DOUBLE_PI);
+    ctx.ellipse(cx, cy, width / 2, height / 2, 0, 0, DOUBLE_PI);
     ctx.stroke();
     ctx.closePath();
   }