add page state store

Author: softmarshmallow

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -12,7 +12,7 @@ import { get_hovering_target } from "../math";
 import { utils } from "@design-sdk/core";
 import { LazyFrame } from "@code-editor/canvas/lazy-frame";
 import { HudCustomRenderers, HudSurface } from "./hud-surface";
-import type { XY, XYWH } from "../types";
+import type { XY, XYWH, CanvasTransform } from "../types";
 import type { FrameOptimizationFactors } from "../frame";
 const designq = utils.query;
 
@@ -21,11 +21,6 @@ const INITIAL_XY: XY = [0, 0];
 const LAYER_HOVER_HIT_MARGIN = 3.5;
 const MIN_ZOOM = 0.02;
 
-type CanvasTransform = {
-  scale: number;
-  xy: XY;
-};
-
 interface CanvasState {
   filekey: string;
   nodes: ReflectSceneNode[];

editor-packages/editor-canvas/stores/page-state-store.ts

@@ -0,0 +1,40 @@
+import type { CanvasTransform } from "../types";
+
+/**
+ * page state store
+ * - last selected node on this page
+ * - last transform of canvas for this page
+ *
+ * (uses session storage)
+ */
+export class PageStateStore {
+  constructor(readonly filekey: string, readonly pageid: string) {}
+
+  saveLastSelection(nodeid: string) {
+    sessionStorage.setItem(
+      `canvas-page-state-store/${this.filekey}/${this.pageid}/last-selection`,
+      nodeid
+    );
+  }
+
+  getLastSelection(): string | null {
+    return sessionStorage.getItem(
+      `canvas-page-state-store/${this.filekey}/${this.pageid}/last-selection`
+    );
+  }
+
+  saveLastTransform(transform: CanvasTransform) {
+    sessionStorage.setItem(
+      `canvas-page-state-store/${this.filekey}/${this.pageid}/last-transform`,
+      JSON.stringify(transform)
+    );
+  }
+
+  getLastTransform(): CanvasTransform | null {
+    const str = sessionStorage.getItem(
+      `canvas-page-state-store/${this.filekey}/${this.pageid}/last-transform`
+    );
+    if (!str) return null;
+    return JSON.parse(str);
+  }
+}

editor-packages/editor-canvas/types/index.ts

@@ -1,2 +1,6 @@
 export type XY = [number, number];
 export type XYWH = [number, number, number, number];
+export type CanvasTransform = {
+  scale: number;
+  xy: XY;
+};