feat: support save user preference

packages/core/src/editor.ts

@@ -24,7 +24,7 @@ import Ruler from './ruler';
 import { SceneGraph } from './scene/scene_graph';
 import { SelectedBox } from './selected_box';
 import { SelectedElements } from './selected_elements';
-import { Setting } from './setting';
+import { Setting, type SettingValue } from './setting';
 import { TextEditor } from './text/text_editor';
 import { ToolManager } from './tools';
 import { type IChanges, type IEditorPaperData } from './type';
@@ -38,6 +38,7 @@ interface IEditorOptions {
   offsetX?: number;
   offsetY?: number;
   showPerfMonitor?: boolean;
+  userPreference?: Partial<SettingValue>;
 }
 
 interface Events {
@@ -89,7 +90,7 @@ export class SuikaEditor {
     this.containerElement.appendChild(this.canvasElement);
     this.ctx = this.canvasElement.getContext('2d')!;
 
-    this.setting = new Setting();
+    this.setting = new Setting(options.userPreference);
     if (options.offsetX) {
       this.setting.set('offsetX', options.offsetX);
     }

packages/core/src/scene/scene_graph.ts

@@ -297,10 +297,11 @@ export class SceneGraph {
     this.initGraphicsTree(graphicsArr);
   }
 
-  on(eventName: 'render', handler: () => void) {
+  on<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.on(eventName, handler);
   }
-  off(eventName: 'render', handler: () => void) {
+
+  off<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.off(eventName, handler);
   }
 }

packages/core/src/setting.ts

@@ -1,10 +1,10 @@
-import { EventEmitter } from '@suika/common';
+import { EventEmitter, pick } from '@suika/common';
 
 import { type IPaint, PaintType } from './paint';
 import { type BooleanKeys } from './type';
 
 interface Events {
-  update(attrs: SettingValue): void;
+  update(attrs: SettingValue, changedKey: keyof SettingValue): void;
 }
 
 export class Setting {
@@ -149,6 +149,15 @@ export class Setting {
     textEditorCursorLineStroke: '#000',
     textEditorSelectionFill: '#0069c433',
   };
+
+  constructor(partialVal?: Partial<SettingValue>) {
+    partialVal = pick(partialVal, Object.keys(this.value));
+    this.value = {
+      ...this.value,
+      ...partialVal,
+    };
+  }
+
   toggle<K extends BooleanKeys<SettingValue>>(key: K) {
     const value = this.value[key];
     if (typeof value === 'boolean') {
@@ -159,7 +168,7 @@ export class Setting {
   }
   set<K extends keyof SettingValue>(key: K, value: SettingValue[K]) {
     this.value[key] = value;
-    this.eventEmitter.emit('update', this.getAttrs());
+    this.eventEmitter.emit('update', this.getAttrs(), key);
   }
   get<K extends keyof SettingValue>(key: K) {
     return this.value[key];
@@ -168,10 +177,10 @@ export class Setting {
     return { ...this.value };
   }
 
-  on(eventName: 'update', handler: (value: SettingValue) => void) {
+  on<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.on(eventName, handler);
   }
-  off(eventName: 'update', handler: (value: SettingValue) => void) {
+  off<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.off(eventName, handler);
   }
 }

packages/core/src/viewport_manager.ts

@@ -68,10 +68,11 @@ export class ViewportManager {
       maxY: y + height / zoom,
     };
   }
-  on(eventName: 'xOrYChange', handler: (x: number, y: number) => void) {
+
+  on<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.on(eventName, handler);
   }
-  off(eventName: 'xOrYChange', handler: (x: number, y: number) => void) {
+  off<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.off(eventName, handler);
   }
 }

packages/core/src/zoom_manager.ts

@@ -216,16 +216,12 @@ export class ZoomManager {
       y: newScrollY,
     });
   }
-  on(
-    eventName: 'zoomChange',
-    handler: (zoom: number, prevZoom: number) => void,
-  ) {
+
+  on<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.on(eventName, handler);
   }
-  off(
-    eventName: 'zoomChange',
-    handler: (zoom: number, prevZoom: number) => void,
-  ) {
+
+  off<K extends keyof Events>(eventName: K, handler: Events[K]) {
     this.eventEmitter.off(eventName, handler);
   }
 }

packages/suika/src/components/Editor.tsx

@@ -1,7 +1,7 @@
 import './Editor.scss';
 
-import { throttle } from '@suika/common';
-import { SuikaEditor } from '@suika/core';
+import { pick, throttle } from '@suika/common';
+import { type SettingValue, SuikaEditor } from '@suika/core';
 import { type FC, useEffect, useRef, useState } from 'react';
 
 import { EditorContext } from '../context';
@@ -14,21 +14,52 @@ import { LayerPanel } from './LayerPanel';
 const topMargin = 48;
 const leftRightMargin = 240 * 2;
 
+const USER_PREFERENCE_KEY = 'suika-user-preference';
+const storeKeys: Partial<keyof SettingValue>[] = [
+  'enablePixelGrid',
+  'snapToGrid',
+  'enableRuler',
+
+  'keepToolSelectedAfterUse',
+  'invertZoomDirection',
+  'highlightLayersOnHover',
+  'flipObjectsWhileResizing',
+];
+
 const Editor: FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   const [editor, setEditor] = useState<SuikaEditor | null>(null);
 
   useEffect(() => {
     if (containerRef.current) {
+      const userPreferenceEncoded = localStorage.getItem(USER_PREFERENCE_KEY);
+      const userPreference = userPreferenceEncoded
+        ? (JSON.parse(userPreferenceEncoded) as Partial<SettingValue>)
+        : undefined;
+
       const editor = new SuikaEditor({
         containerElement: containerRef.current,
         width: document.body.clientWidth - leftRightMargin,
         height: document.body.clientHeight - topMargin,
         offsetY: 48,
         offsetX: 240,
         showPerfMonitor: false,
+        userPreference: userPreference,
       });
+
+      editor.setting.on(
+        'update',
+        (value: SettingValue, changedKey: keyof SettingValue) => {
+          if (!storeKeys.includes(changedKey)) return;
+
+          localStorage.setItem(
+            USER_PREFERENCE_KEY,
+            JSON.stringify(pick(value, storeKeys)),
+          );
+        },
+      );
+
       (window as any).editor = editor;
 
       new AutoSaveGraphics(editor);