feat: support auto save to localStorage

packages/suika/package.json

@@ -24,6 +24,7 @@
     "classnames": "^2.3.2",
     "hotkeys-js": "^3.10.1",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "rbush": "^3.0.1",
@@ -33,7 +34,6 @@
     "react-intl": "^6.3.2",
     "react-scripts": "5.0.1",
     "sass": "^1.57.1",
-    "store2": "^2.14.2",
     "web-vitals": "^2.1.0"
   },
   "browserslist": {
@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "^4.5.7",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.throttle": "^4.1.7",
     "@types/rbush": "^3.0.0",

packages/suika/src/App.tsx

@@ -6,15 +6,14 @@ import { en } from './locale/en';
 import { useEffect, useState } from 'react';
 import { appEventEmitter } from './events';
 import { SupportedLocale } from './locale/types';
-import store from 'store2';
 
 const messageMap = {
   zh,
   en,
 };
 
 const getLocale = (): SupportedLocale => {
-  const locale = store.get('suika-locale') || navigator.language;
+  const locale = localStorage.getItem('suika-locale') || navigator.language;
   return locale.startsWith('zh') ? 'zh' : 'en';
 };
 

packages/suika/src/components/LocaleSelector/LocaleSelector.tsx

@@ -9,7 +9,6 @@ import {
 } from '@floating-ui/react';
 import classNames from 'classnames';
 import { useClickAway } from 'ahooks';
-import store from 'store2';
 import { appEventEmitter } from '../../events';
 import { I18nOutlined } from '@suika/icons';
 
@@ -58,7 +57,7 @@ export const LocaleSelector: FC = () => {
             className="locale-selector-popover-item"
             onClick={() => {
               const en = 'en';
-              store.set('suika-locale', en);
+              localStorage.setItem('suika-locale', en);
               appEventEmitter.emit('localeChange', en);
               setIsOpen(false);
             }}
@@ -69,7 +68,7 @@ export const LocaleSelector: FC = () => {
             className="locale-selector-popover-item"
             onClick={() => {
               const zh = 'zh';
-              store.set('suika-locale', zh);
+              localStorage.setItem('suika-locale', zh);
               appEventEmitter.emit('localeChange', zh);
               setIsOpen(false);
             }}

packages/suika/src/editor/editor.ts

@@ -1,5 +1,8 @@
 import { SceneGraph } from './scene/scene_graph';
-import { sceneCoordsToViewportUtil, viewportCoordsToSceneUtil } from '../utils/common';
+import {
+  sceneCoordsToViewportUtil,
+  viewportCoordsToSceneUtil,
+} from '../utils/common';
 import { CommandManager } from './commands/command_manager';
 import HostEventManager from './host_event_manager';
 import Ruler from './ruler';
@@ -8,6 +11,7 @@ import { Setting } from './setting';
 import { ToolManager } from './tools/tool_manager';
 import { ViewportManager } from './viewport_manager';
 import { ZoomManager } from './zoom_manager';
+import { AutoSaveGraphs } from './store/auto-save-graphs';
 
 interface IEditorOptions {
   canvasElement: HTMLCanvasElement;
@@ -35,6 +39,8 @@ export class Editor {
   selectedElements: SelectedElements;
   ruler: Ruler;
 
+  autoSaveGraphs: AutoSaveGraphs;
+
   constructor(options: IEditorOptions) {
     this.canvasElement = options.canvasElement;
     this.ctx = this.canvasElement.getContext('2d')!;
@@ -52,7 +58,6 @@ export class Editor {
     this.hostEventManager = new HostEventManager(this);
     this.hostEventManager.bindHotkeys();
 
-
     this.viewportManager = new ViewportManager(this);
 
     this.toolManager = new ToolManager(this);
@@ -62,13 +67,18 @@ export class Editor {
     this.selectedElements = new SelectedElements(this);
     this.ruler = new Ruler(this);
 
+    this.autoSaveGraphs = new AutoSaveGraphs(this);
+    this.autoSaveGraphs.load();
+    this.autoSaveGraphs.autoSave();
+
     // 设置初始视口
     this.viewportManager.setViewport({
       x: -options.width / 2,
       y: -options.height / 2,
       width: options.width,
       height: options.height,
     });
+
     /**
      * setViewport 其实会修改 canvas 的宽高，浏览器的 DOM 更新是异步的，
      * 所以下面的 render 要异步执行

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

@@ -1,11 +1,14 @@
-import { IBox } from '../../type.interface';
+import { IBox, GraphType } from '../../type.interface';
 import { Graph, IGraph } from './graph';
 
 export interface IEllipseGraph extends IGraph, IBox {}
 
 export class Ellipse extends Graph {
+  type = GraphType.Ellipse;
   constructor(options: IEllipseGraph) {
     super(options);
-    this.objectName = 'Ellipse ' + this.id;
+    if (!options.objectName) {
+      this.objectName = 'Ellipse ' + this.id;
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 import { SetElementsAttrs } from '../commands/set_elements_attrs';
 import { Editor } from '../editor';
-import { IBox, IBox2 } from '../../type.interface';
+import { IBox, IBox2, GraphType } from '../../type.interface';
 import { genId } from '../../utils/common';
 import {
   getAbsoluteCoords,
@@ -11,6 +11,9 @@ import { transformRotate } from '../../utils/transform';
 import { ITexture } from '../texture';
 
 export interface IGraph {
+  type?: GraphType;
+  id?: string;
+  objectName?: string;
   x: number;
   y: number;
   width: number;
@@ -24,6 +27,7 @@ export interface IGraph {
 }
 
 export class Graph {
+  type = GraphType.Graph;
   id: string;
   objectName: string;
   x: number;
@@ -139,7 +143,7 @@ export class Graph {
       rotatedY,
       -(this.rotation || 0),
       cx,
-      cy
+      cy,
     );
     this.x = x;
     this.y = y;
@@ -176,8 +180,8 @@ export const MutateElementsAndRecord = {
         'Update X of Elements',
         elements,
         elements.map((el) => ({ x: el.x })),
-        prevXs
-      )
+        prevXs,
+      ),
     );
   },
   setRotateY(editor: Editor, elements: Graph[], rotatedY: number) {
@@ -197,8 +201,8 @@ export const MutateElementsAndRecord = {
         'Update Y of Elements',
         elements,
         elements.map((el) => ({ y: el.y })),
-        prevXs
-      )
+        prevXs,
+      ),
     );
   },
   setWidth(editor: Editor, elements: Graph[], width: number) {
@@ -225,8 +229,8 @@ export const MutateElementsAndRecord = {
         'Update Width of Elements',
         elements,
         elements.map((el) => ({ width: el.width, x: el.x, y: el.y })),
-        prevAttrs
-      )
+        prevAttrs,
+      ),
     );
   },
   setHeight(editor: Editor, elements: Graph[], height: number) {
@@ -253,8 +257,8 @@ export const MutateElementsAndRecord = {
         'update Height of Elements',
         elements,
         elements.map((el) => ({ height: el.height, x: el.x, y: el.y })),
-        prevAttrs
-      )
+        prevAttrs,
+      ),
     );
   },
   setRotation(editor: Editor, elements: Graph[], rotation: number) {
@@ -267,7 +271,12 @@ export const MutateElementsAndRecord = {
       el.rotation = rotation;
     });
     editor.commandManager.pushCommand(
-      new SetElementsAttrs('update Rotation', elements, { rotation }, prevAttrs)
+      new SetElementsAttrs(
+        'update Rotation',
+        elements,
+        { rotation },
+        prevAttrs,
+      ),
     );
   },
 };

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

@@ -1,14 +1,17 @@
-import { IBox, IRect } from '../../type.interface';
+import { IBox, IRect, GraphType } from '../../type.interface';
 import { getAbsoluteCoords } from '../../utils/graphics';
 import { transformRotate } from '../../utils/transform';
 import { Graph, IGraph } from './graph';
 
 export interface RectGraph extends IGraph, IRect {}
 
 export class Rect extends Graph {
+  type = GraphType.Rect;
   constructor(options: RectGraph) {
     super(options);
-    this.objectName = 'Rectangle ' + this.id;
+    if (!options.objectName) {
+      this.objectName = 'Rectangle ' + this.id;
+    }
   }
   /**
    * 计算包围盒（不考虑 strokeWidth）

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

@@ -1,5 +1,5 @@
 import { Editor } from '../editor';
-import { IBox, IObject, IPoint, IRect } from '../../type.interface';
+import { GraphType, IBox, IObject, IPoint, IRect } from '../../type.interface';
 import { rotateInCanvas } from '../../utils/canvas';
 import EventEmitter from '../../utils/event_emitter';
 import {
@@ -13,7 +13,7 @@ import {
 import rafThrottle from '../../utils/raf_throttle';
 import { transformRotate } from '../../utils/transform';
 import { Ellipse } from './ellipse';
-import { Graph } from './graph';
+import { Graph, IGraph } from './graph';
 import { Rect } from './rect';
 import { TransformHandle } from './transform_handle';
 import { forEach } from '../../utils/array_util';
@@ -364,6 +364,31 @@ export class SceneGraph {
     return objects;
   }
 
+  toJSON() {
+    return JSON.stringify(this.children);
+  }
+
+  load(str: string) {
+    const ctorMap = {
+      [GraphType.Graph]: Graph,
+      [GraphType.Rect]: Rect,
+      [GraphType.Ellipse]: Ellipse,
+    };
+
+    const data: IGraph[] = JSON.parse(str);
+    // TODO: check valid
+    this.children = data.map((attrs) => {
+      const type = attrs.type;
+      const Ctor = ctorMap[type!];
+
+      if (!Ctor) {
+        throw new Error('found wrong type of graph');
+      }
+
+      return new Ctor(attrs);
+    });
+  }
+
   // TODO: update tree by patch obj and id
   updateElements() {
     /**

packages/suika/src/editor/store/auto-save-graphs.ts

@@ -0,0 +1,28 @@
+import debounce from 'lodash.debounce';
+import { Editor } from '../editor';
+
+const STORE_KEY = 'suika-scene-graphs';
+
+export class AutoSaveGraphs {
+  listener: () => void;
+  constructor(private editor: Editor) {
+    this.listener = debounce(() => {
+      this.save();
+    }, 300);
+  }
+
+  autoSave() {
+    this.editor.commandManager.on('change', this.listener);
+  }
+  stopAutoSave() {
+    this.editor.commandManager.off('change', this.listener);
+  }
+  save() {
+    console.log('save!!');
+    localStorage.setItem(STORE_KEY, this.editor.sceneGraph.toJSON());
+  }
+  load() {
+    const data = localStorage.getItem(STORE_KEY);
+    data && this.editor.sceneGraph.load(data);
+  }
+}

packages/suika/src/type.interface.ts

@@ -34,3 +34,9 @@ export interface IObject {
   id: string;
   name: string;
 }
+
+export enum GraphType {
+  Graph = 0,
+  Rect = 1,
+  Ellipse = 2,
+}