selective store

concrete-utopia · Apr 30, 2024 · b968b0e · b968b0e
1 parent 78b8566
commit b968b0e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
   },