add save/load canvas states - selections & transform

Author: softmarshmallow

editor-packages/editor-canvas/canvas-event-target/canvas-event-target.tsx

@@ -137,7 +137,12 @@ export function CanvasEventTarget({
       onMoveStart: onPointerMoveStart,
       onMoveEnd: onPointerMoveEnd,
     },
-    { target: interactionEventTargetRef }
+    {
+      target: interactionEventTargetRef,
+      eventOptions: {
+        passive: false,
+      },
+    }
   );
 
   return (

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState, useMemo } from "react";
 import { ReflectSceneNode } from "@design-sdk/figma-node";
-import styled from "@emotion/styled";
+import { CanvasStateStore } from "../stores";
 import {
   CanvasEventTarget,
   OnPanningHandler,
@@ -22,6 +22,7 @@ const LAYER_HOVER_HIT_MARGIN = 3.5;
 const MIN_ZOOM = 0.02;
 
 interface CanvasState {
+  pageid: string;
   filekey: string;
   nodes: ReflectSceneNode[];
   highlightedLayer?: string;
@@ -56,11 +57,9 @@ export function Canvas({
   onSelectNode,
   onClearSelection,
   filekey,
+  pageid,
   nodes,
-  initialTransform = {
-    xy: INITIAL_XY,
-    scale: INITIAL_SCALE,
-  },
+  initialTransform,
   highlightedLayer,
   selectedNodes,
   readonly = true,
@@ -73,11 +72,23 @@ export function Canvas({
   CanvasState & {
     config?: CanvsPreferences;
   }) {
+  const _canvas_state_store = new CanvasStateStore(filekey, pageid);
+
+  initialTransform = initialTransform ??
+    _canvas_state_store.getLastTransform() ?? {
+      scale: INITIAL_SCALE,
+      xy: INITIAL_XY,
+    };
+
   const [zoom, setZoom] = useState(initialTransform.scale);
   const [isZooming, setIsZooming] = useState(false);
   const [offset, setOffset] = useState<[number, number]>(initialTransform.xy);
   const nonscaled_offset: XY = [offset[0] / zoom, offset[1] / zoom]; // offset;
   const [isPanning, setIsPanning] = useState(false);
+  const cvtransform: CanvasTransform = {
+    scale: zoom,
+    xy: offset,
+  };
 
   const node = (id) => designq.find_node_by_id_under_inpage_nodes(id, nodes);
 
@@ -173,13 +184,15 @@ export function Canvas({
           setIsPanning(true);
         }}
         onPanningEnd={() => {
+          _canvas_state_store.saveLastTransform(cvtransform);
           setIsPanning(false);
         }}
         onZooming={onZooming}
         onZoomingStart={() => {
           setIsZooming(true);
         }}
         onZoomingEnd={() => {
+          _canvas_state_store.saveLastTransform(cvtransform);
           setIsZooming(false);
         }}
         onPointerMove={onPointerMove}

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

@@ -0,0 +1 @@
+export { CanvasStateStore } from "./page-state-store";

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

@@ -7,20 +7,22 @@ import type { CanvasTransform } from "../types";
  *
  * (uses session storage)
  */
-export class PageStateStore {
+export class CanvasStateStore {
   constructor(readonly filekey: string, readonly pageid: string) {}
 
-  saveLastSelection(nodeid: string) {
+  saveLastSelection(...nodes: string[]) {
     sessionStorage.setItem(
       `canvas-page-state-store/${this.filekey}/${this.pageid}/last-selection`,
-      nodeid
+      nodes ? JSON.stringify(nodes) : null
     );
   }
 
-  getLastSelection(): string | null {
-    return sessionStorage.getItem(
+  getLastSelection(): string[] | null {
+    const pl = sessionStorage.getItem(
       `canvas-page-state-store/${this.filekey}/${this.pageid}/last-selection`
     );
+    if (!pl) return null;
+    return JSON.parse(pl);
   }
 
   saveLastTransform(transform: CanvasTransform) {

editor/core/reducers/editor-reducer.ts

@@ -2,9 +2,11 @@ import produce from "immer";
 import { Action, SelectNodeAction, SelectPageAction } from "core/actions";
 import { EditorState } from "core/states";
 import { useRouter } from "next/router";
+import { CanvasStateStore } from "@code-editor/canvas/stores";
 
 export function editorReducer(state: EditorState, action: Action): EditorState {
   const router = useRouter();
+  const filekey = state.design.key;
 
   // TODO: handle actions here.
   switch (action.type) {
@@ -18,7 +20,14 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       router.push(router);
 
       return produce(state, (draft) => {
-        draft.selectedNodes = [node].filter(Boolean);
+        const _canvas_state_store = new CanvasStateStore(
+          filekey,
+          state.selectedPage
+        );
+
+        const new_selections = [node].filter(Boolean);
+        _canvas_state_store.saveLastSelection(...new_selections);
+        draft.selectedNodes = new_selections;
       });
     }
     case "select-page": {
@@ -32,8 +41,16 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       router.push(router);
 
       return produce(state, (draft) => {
+        const _canvas_state_store = new CanvasStateStore(filekey, page);
+
+        const last_known_selections_of_this_page =
+          _canvas_state_store.getLastSelection() ?? [];
+        console.log(
+          "last_known_selections_of_this_page",
+          last_known_selections_of_this_page
+        );
         draft.selectedPage = page;
-        draft.selectedNodes = [];
+        draft.selectedNodes = last_known_selections_of_this_page;
       });
     }
     default:

editor/pages/_development/editor-canvas/index.tsx

@@ -11,6 +11,7 @@ export default function EditorCanvasDevPage() {
     >
       <Canvas
         filekey="unknown"
+        pageid="1"
         selectedNodes={[]}
         nodes={[]}
         renderItem={function (node): React.ReactNode {

editor/scaffolds/canvas/canvas.tsx

@@ -51,6 +51,7 @@ export function VisualContentArea({ fileid }: { fileid: string }) {
             <Canvas
               key={selectedPage}
               filekey={state.design.key}
+              pageid={selectedPage}
               selectedNodes={selectedNodes.filter(Boolean)}
               highlightedLayer={highlightedLayer}
               onSelectNode={(node) => {

editor/scaffolds/editor/editor.tsx

@@ -64,6 +64,9 @@ export function Editor({
       3 +
     0.2;
 
+  // this key is used for force re-rendering canvas after the whole file is fetched.
+  const _refreshkey = loading || !_initially_loaded ? "1" : "0";
+
   return (
     <>
       {(loading || !_initially_loaded) && (
@@ -75,7 +78,7 @@ export function Editor({
       >
         <WorkspaceContentPanelGridLayout>
           <WorkspaceContentPanel flex={6}>
-            <Canvas fileid={state?.design?.key} />
+            <Canvas key={_refreshkey} fileid={state?.design?.key} />
           </WorkspaceContentPanel>
           <WorkspaceContentPanel
             hidden={state.selectedNodes.length === 0}