From b968b0e86316ce9fb5412c4a2b0a387576b24237 Mon Sep 17 00:00:00 2001
From: Liad Yosef <liad.yosef@gmail.com>
Date: Tue, 30 Apr 2024 13:41:09 +0300
Subject: [PATCH] selective store

---
 .../canvas/controls/new-canvas-controls.tsx   |  2 +-
 .../editor/store/store-hook-substore-types.ts | 20 +++++++++++++++++++
 .../src/components/editor/store/store-hook.ts | 11 ++++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/editor/src/components/canvas/controls/new-canvas-controls.tsx b/editor/src/components/canvas/controls/new-canvas-controls.tsx
index eca9069eef56..d14c941926d2 100644
--- a/editor/src/components/canvas/controls/new-canvas-controls.tsx
+++ b/editor/src/components/canvas/controls/new-canvas-controls.tsx
@@ -136,7 +136,7 @@ interface NewCanvasControlsProps {
 
 export const NewCanvasControls = React.memo((props: NewCanvasControlsProps) => {
   const canvasControlProps = useEditorState(
-    Substores.fullStore,
+    Substores.canvasControlsSubstate,
     (store) => ({
       keysPressed: store.editor.keysPressed,
       editorMode: store.editor.mode,
diff --git a/editor/src/components/editor/store/store-hook-substore-types.ts b/editor/src/components/editor/store/store-hook-substore-types.ts
index bacef5a7e074..033b7fb2d5a7 100644
--- a/editor/src/components/editor/store/store-hook-substore-types.ts
+++ b/editor/src/components/editor/store/store-hook-substore-types.ts
@@ -1,3 +1,4 @@
+import type { HigherOrderControl } from '../../../components/canvas/canvas-types'
 import { uniq } from '../../../core/shared/array-utils'
 import { omit, pick } from '../../../core/shared/object-utils'
 import type { EditorDispatch } from '../action-types'
@@ -30,6 +31,7 @@ export type Substates = {
   projectServerState: ProjectServerStateSubstate
   variablesInScope: VariablesInScopeSubstate
   propertyControlsInfo: PropertyControlsInfoSubstate
+  canvasControlsSubstate: CanvasControlsSubstate
 }
 
 export type StoreKey = keyof Substates
@@ -125,6 +127,24 @@ const emptyVariablesInScopeSubstate = {
 } as const
 export type VariablesInScopeSubstate = typeof emptyVariablesInScopeSubstate
 
+export const canvasControlsEditorSubstateKeys = [
+  'keysPressed',
+  'mode',
+  'focusedPanel',
+  'selectedViews',
+  'highlightedViews',
+] as const
+export const canvasControlsCanvasSubstateKeys = ['scale', 'scrollAnimation'] as const
+export const canvasControlsDerivedSubstateKeys = ['controls'] as const
+const emptyCanvasControlsSubstate = {
+  editor: {
+    ...pick(canvasControlsEditorSubstateKeys, EmptyEditorStateForKeysOnly),
+    canvas: pick(canvasControlsCanvasSubstateKeys, EmptyEditorStateForKeysOnly.canvas),
+  },
+  derived: { controls: [] } as { controls: Array<HigherOrderControl> },
+} as const
+export type CanvasControlsSubstate = typeof emptyCanvasControlsSubstate
+
 // MultiplayerSubstate
 export const multiplayerSubstateKeys = ['collaborators'] as const
 const emptyMultiplayerSubstate = {
diff --git a/editor/src/components/editor/store/store-hook.ts b/editor/src/components/editor/store/store-hook.ts
index e39b2a360412..81bd243b0435 100644
--- a/editor/src/components/editor/store/store-hook.ts
+++ b/editor/src/components/editor/store/store-hook.ts
@@ -20,6 +20,7 @@ import {
 import type {
   BuiltInDependenciesSubstate,
   CanvasAndMetadataSubstate,
+  CanvasControlsSubstate,
   CanvasOffsetSubstate,
   CanvasSubstate,
   FocusedElementPathSubstate,
@@ -43,6 +44,9 @@ import type {
   VariablesInScopeSubstate,
 } from './store-hook-substore-types'
 import {
+  canvasControlsCanvasSubstateKeys,
+  canvasControlsDerivedSubstateKeys,
+  canvasControlsEditorSubstateKeys,
   canvasOffsetSubstateKeys,
   canvasSubstateKeys,
   focusedElementPathSubstateKeys,
@@ -316,6 +320,13 @@ export const Substores = {
   variablesInScope: (a: VariablesInScopeSubstate, b: VariablesInScopeSubstate) => {
     return keysEquality(variablesInScopeSubstateKeys, a.editor, b.editor)
   },
+  canvasControlsSubstate: (a: CanvasControlsSubstate, b: CanvasControlsSubstate) => {
+    return (
+      keysEquality(canvasControlsEditorSubstateKeys, a.editor, b.editor) &&
+      keysEquality(canvasControlsCanvasSubstateKeys, a.editor.canvas, b.editor.canvas) &&
+      keysEquality(canvasControlsDerivedSubstateKeys, a.derived, b.derived)
+    )
+  },
   multiplayer: (a: MultiplayerSubstate, b: MultiplayerSubstate) => {
     return MultiplayerSubstateKeepDeepEquality(a, b).areEqual
   },