fix: wrong object name in layout panel

packages/suika/package.json

@@ -34,6 +34,7 @@
     "react-intl": "^6.3.2",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
+    "uuid": "^9.0.0",
     "web-vitals": "^2.1.0"
   },
   "browserslist": {
@@ -54,6 +55,7 @@
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.throttle": "^4.1.7",
     "@types/rbush": "^3.0.0",
-    "@types/react-color": "^3.0.6"
+    "@types/react-color": "^3.0.6",
+    "@types/uuid": "^9.0.2"
   }
 }

packages/suika/src/components/ContextMenu/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import { FC, useContext, useEffect, useState } from 'react';
 import { EditorContext } from '../../context';
 import { ArrangeType } from '../../editor/commands/arrange';
-import { IPoint } from '../../type.interface';
+import { IPoint } from '../../type';
 import ContextMenuItem from './components/ContextMenuItem';
 import ContextMenuSep from './components/ContextMenuSep';
 import './ContextMenu.scss';

packages/suika/src/components/LayerPanel/LayerPanel.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext, useEffect, useState } from 'react';
 import { EditorContext } from '../../context';
-import { IObject } from '../../type.interface';
+import { IObject } from '../../type';
 import LayerItem from './LayerItem/LayerItem';
 import './LayerPanel.scss';
 

packages/suika/src/editor/host_event_manager.ts

@@ -3,7 +3,7 @@
  */
 
 import hotkeys from 'hotkeys-js';
-import { IBox, IPoint } from '../type.interface';
+import { IBox, IPoint } from '../type';
 import EventEmitter from '../utils/event_emitter';
 import { Editor } from './editor';
 import { arrMap } from '../utils/array_util';

packages/suika/src/editor/scene/ellipse.ts

@@ -1,5 +1,5 @@
 import { DOUBLE_PI } from '../../constant';
-import { IBox, GraphType } from '../../type.interface';
+import { IBox, GraphType } from '../../type';
 import { rotateInCanvas } from '../../utils/canvas';
 import { parseRGBAStr } from '../../utils/color';
 import { TextureType } from '../texture';
@@ -8,12 +8,8 @@ import { Graph, GraphAttrs } from './graph';
 export interface EllipseAttrs extends GraphAttrs, IBox {}
 
 export class Ellipse extends Graph {
-  type = GraphType.Ellipse;
   constructor(options: EllipseAttrs) {
-    super(options);
-    if (!options.objectName) {
-      this.objectName = 'Ellipse ' + this.id;
-    }
+    super({ ...options, type: GraphType.Ellipse });
   }
   fillTexture(ctx: CanvasRenderingContext2D): void {
     const cx = this.x + this.width / 2;

packages/suika/src/editor/scene/graph.ts

@@ -1,7 +1,7 @@
 import { SetElementsAttrs } from '../commands/set_elements_attrs';
 import { Editor } from '../editor';
-import { IBox, IBox2, GraphType } from '../../type.interface';
-import { calcCoverScale, genId } from '../../utils/common';
+import { IBox, IBox2, GraphType } from '../../type';
+import { calcCoverScale, genId, objectNameGenerator } from '../../utils/common';
 import {
   getAbsoluteCoords,
   getElementRotatedXY,
@@ -41,8 +41,16 @@ export class Graph {
   // transform
   rotation?: number;
   constructor(options: GraphAttrs) {
-    this.id = genId();
-    this.objectName = 'Graph ' + this.id;
+    this.type = options.type ?? this.type;
+    this.id = options.id ?? genId();
+
+    if (options.objectName) {
+      this.objectName = options.objectName;
+      objectNameGenerator.setMaxIdx(options.objectName);
+    } else {
+      this.objectName = objectNameGenerator.gen(options.type ?? this.type);
+    }
+
     this.x = options.x;
     this.y = options.y;
     this.width = options.width;

packages/suika/src/editor/scene/rect.ts

@@ -1,4 +1,4 @@
-import { IBox, IRect, GraphType } from '../../type.interface';
+import { IBox, IRect, GraphType } from '../../type';
 import { rotateInCanvas } from '../../utils/canvas';
 import { parseRGBAStr } from '../../utils/color';
 import { getAbsoluteCoords } from '../../utils/graphics';
@@ -9,12 +9,8 @@ import { Graph, GraphAttrs } from './graph';
 export interface RectAttrs extends GraphAttrs, IRect {}
 
 export class Rect extends Graph {
-  type = GraphType.Rect;
   constructor(options: RectAttrs) {
-    super(options);
-    if (!options.objectName) {
-      this.objectName = 'Rectangle ' + this.id;
-    }
+    super({ ...options, type: GraphType.Rect });
   }
   /**
    * 计算包围盒（不考虑 strokeWidth）

packages/suika/src/editor/scene/scene_graph.ts

@@ -1,5 +1,5 @@
 import { Editor } from '../editor';
-import { GraphType, IBox, IObject, IPoint, IRect } from '../../type.interface';
+import { GraphType, IBox, IObject, IPoint, IRect } from '../../type';
 import { rotateInCanvas } from '../../utils/canvas';
 import EventEmitter from '../../utils/event_emitter';
 import {

packages/suika/src/editor/scene/text.ts

@@ -1,7 +1,7 @@
 import { Graph, GraphAttrs } from './graph';
 import { Optional } from '../../type';
 import { rotateInCanvas } from '../../utils/canvas';
-import { GraphType } from '../../type.interface';
+import { GraphType } from '../../type';
 import { TextureType } from '../texture';
 import { parseRGBAStr } from '../../utils/color';
 
@@ -17,13 +17,13 @@ const DEFAULT_TEXT_WEIGHT = 30;
 const tmpCtx = document.createElement('canvas').getContext('2d')!;
 
 export class TextGraph extends Graph {
-  type = GraphType.Text;
   content: string;
   fontSize: number;
   autoFit?: boolean;
   constructor(options: Optional<TextAttrs, 'width' | 'height'>) {
     super({
       ...options,
+      type: GraphType.Text,
       width: options.width ?? DEFAULT_TEXT_WIDTH,
       height: options.height ?? DEFAULT_TEXT_WEIGHT,
     });
@@ -38,10 +38,6 @@ export class TextGraph extends Graph {
     this.autoFit = options.autoFit;
     this.content = options.content;
     this.fontSize = options.fontSize;
-
-    if (!options.objectName) {
-      this.objectName = 'Text ' + this.id;
-    }
   }
   fillTexture(ctx: CanvasRenderingContext2D) {
     if (this.rotation) {

packages/suika/src/editor/scene/transform_handle.ts

@@ -1,5 +1,5 @@
 import { Editor } from '../editor';
-import { IBox, IPoint, IRect } from '../../type.interface';
+import { IBox, IPoint, IRect } from '../../type';
 import {
   drawCircle,
   drawSquareWithCenter,

packages/suika/src/editor/selected_elements.ts

@@ -1,5 +1,5 @@
 import { Graph } from './scene/graph';
-import { IBox } from '../type.interface';
+import { IBox } from '../type';
 import { isSameArray } from '../utils/common';
 import EventEmitter from '../utils/event_emitter';
 import { getRectCenterPoint, getRectsBBox } from '../utils/graphics';

packages/suika/src/editor/tools/tool_drag_canvas.ts

@@ -1,4 +1,4 @@
-import { IBox, IPoint } from '../../type.interface';
+import { IBox, IPoint } from '../../type';
 import { Editor } from '../editor';
 import { ITool } from './type';
 

packages/suika/src/editor/tools/tool_draw_shape.ts

@@ -1,5 +1,5 @@
 import { Graph } from '../scene/graph';
-import { IPoint } from '../../type.interface';
+import { IPoint } from '../../type';
 import { noop } from '../../utils/common';
 import { normalizeRect } from '../../utils/graphics';
 import { AddShapeCommand } from '../commands/add_shape';

packages/suika/src/editor/tools/tool_select/tool_select.ts

@@ -1,7 +1,7 @@
 import throttle from 'lodash.throttle';
 import { Graph } from '../../scene/graph';
 import { Rect } from '../../scene/rect';
-import { IPoint } from '../../../type.interface';
+import { IPoint } from '../../../type';
 import { Editor } from '../../editor';
 import { IBaseTool, ITool } from '../type';
 import { DrawSelectionBox } from './tool_select_selection';

packages/suika/src/editor/tools/tool_select/tool_select_move.ts

@@ -1,4 +1,4 @@
-import { IPoint } from '../../../type.interface';
+import { IPoint } from '../../../type';
 import { noop } from '../../../utils/common';
 import { MoveElementsCommand } from '../../commands/move_elements';
 import { Editor } from '../../editor';

packages/suika/src/editor/tools/tool_select/tool_select_rotation.ts

@@ -1,5 +1,5 @@
 import hotkeys from 'hotkeys-js';
-import { IPoint } from '../../../type.interface';
+import { IPoint } from '../../../type';
 import { getClosestVal } from '../../../utils/common';
 import {
   calcVectorRadian,

packages/suika/src/editor/tools/tool_select/tool_select_scale.ts

@@ -1,4 +1,4 @@
-import { IPoint } from '../../../type.interface';
+import { IPoint } from '../../../type';
 import { arrMap } from '../../../utils/array_util';
 import { remainDecimal } from '../../../utils/common';
 import { transformRotate } from '../../../utils/transform';

packages/suika/src/editor/tools/tool_select/tool_select_selection.ts

@@ -1,4 +1,4 @@
-import { IPoint } from '../../../type.interface';
+import { IPoint } from '../../../type';
 import { getRectByTwoCoord } from '../../../utils/graphics';
 import { Editor } from '../../editor';
 import { IBaseTool } from '../type';

packages/suika/src/editor/viewport_manager.ts

@@ -1,13 +1,12 @@
-import { IBox } from '../type.interface';
+import { IBox } from '../type';
 import { getDevicePixelRatio } from '../utils/common';
 import EventEmitter from '../utils/event_emitter';
 import { Editor } from './editor';
 
 interface Events {
-  xOrYChange(x: number | undefined, y: number): void
+  xOrYChange(x: number | undefined, y: number): void;
 }
 
-
 export class ViewportManager {
   private scrollX = 0;
   private scrollY = 0;

packages/suika/src/type.interface.ts → packages/suika/src/type/index.ts

@@ -36,8 +36,18 @@ export interface IObject {
 }
 
 export enum GraphType {
-  Graph = 0,
-  Rect = 1,
-  Ellipse = 2,
-  Text = 3,
+  Graph = 'Graph',
+  Rect = 'Rect',
+  Ellipse = 'Ellipse',
+  Text = 'Text',
 }
+
+/**
+ * set some optional property
+ *
+ * @example
+ * type Foo = { a: string; b: number; c: boolean };
+ * type FooWithOptionalB = Optional<Foo, 'b'>;
+ * // { a: string; b?: number; c: boolean }
+ */
+export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

packages/suika/src/utils/common.ts

@@ -1,16 +1,33 @@
+import { v4 as uuidv4 } from 'uuid';
+
 export const noop = () => {
   // do nothing
 };
 
 /**
  * 生成唯一 ID
  */
-export const genId = (() => {
-  let id = 0;
-  return () => {
-    return String(id++);
-  };
-})();
+export const genId = () => {
+  return uuidv4();
+};
+
+export const objectNameGenerator = {
+  maxIdxMap: new Map<string, number>(),
+  gen(type: string) {
+    let idx = this.maxIdxMap.get(type) ?? 0;
+    idx++;
+    this.maxIdxMap.set(type, idx);
+    return `${type} ${idx}`;
+  },
+  setMaxIdx(objectName: string) {
+    const match = objectName.match(/^(.*)\s+(\d+)$/);
+    if (match) {
+      const [, type, idxStr] = match;
+      const idx = Number(idxStr);
+      this.maxIdxMap.set(type, Math.max(this.maxIdxMap.get(type) ?? 0, idx));
+    }
+  },
+};
 
 /**
  * 浅比较

packages/suika/src/utils/graphics.ts

@@ -1,4 +1,4 @@
-import { IBox, ICircle, IPoint, IRect } from '../type.interface';
+import { IBox, ICircle, IPoint, IRect } from '../type';
 import { transformRotate } from './transform';
 
 /**
@@ -166,7 +166,7 @@ export function degree2Radian(degree: number) {
  * 计算绝对坐标
  */
 export function getAbsoluteCoords(
-  rect: IRect
+  rect: IRect,
 ): [x: number, y: number, x2: number, y2: number, cx: number, cy: number] {
   return [
     rect.x,