Add dumb approach to syncing view state operations

mgmeyers · Apr 30, 2024 · eae26af · eae26af
1 parent 662775d
commit eae26af
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 51 deletions.
diff --git a/src/DragDropApp.tsx b/src/DragDropApp.tsx
@@ -110,12 +110,17 @@ export function DragDropApp({ win, plugin }: { win: Window; plugin: KanbanPlugin
 
             if (from < to) to -= 1;
 
-            const collapsedState = [...(view.getViewState('list-collapse') || [])];
-            collapsedState.splice(to, 0, collapsedState.splice(from, 1)[0]);
-            view.setViewState('list-collapse', collapsedState);
+            const collapsedState = view.getViewState('list-collapse');
+            const op = (collapsedState: boolean[]) => {
+              const newState = [...collapsedState];
+              newState.splice(to, 0, newState.splice(from, 1)[0]);
+              return newState;
+            };
+
+            view.setViewState('list-collapse', undefined, op);
 
             return update<Board>(newBoard, {
-              data: { settings: { 'list-collapse': { $set: collapsedState } } },
+              data: { settings: { 'list-collapse': { $set: op(collapsedState) } } },
             });
           }
 
@@ -160,28 +165,35 @@ export function DragDropApp({ win, plugin }: { win: Window; plugin: KanbanPlugin
               : [entity];
 
           if (entity.type === DataTypes.Lane) {
-            const collapsedState = [...(destinationView.getViewState('list-collapse') || [])];
-            collapsedState.splice(
-              dropPath.last(),
-              0,
-              (sourceView.getViewState('list-collapse') || [])[dragPath.last()]
-            );
-            destinationView.setViewState('list-collapse', collapsedState);
+            const collapsedState = destinationView.getViewState('list-collapse');
+            const val = sourceView.getViewState('list-collapse')[dragPath.last()];
+            const op = (collapsedState: boolean[]) => {
+              const newState = [...collapsedState];
+              newState.splice(dropPath.last(), 0, val);
+              return newState;
+            };
+
+            destinationView.setViewState('list-collapse', undefined, op);
+
             return update<Board>(insertEntity(destinationBoard, dropPath, toInsert), {
-              data: { settings: { 'list-collapse': { $set: collapsedState } } },
+              data: { settings: { 'list-collapse': { $set: op(collapsedState) } } },
             });
           } else {
             return insertEntity(destinationBoard, dropPath, toInsert);
           }
         });
 
         if (entity.type === DataTypes.Lane) {
-          const collapsedState = [...(sourceView.getViewState('list-collapse') || [])];
-          collapsedState.splice(dragPath.last(), 1);
-          sourceView.setViewState('list-collapse', collapsedState);
+          const collapsedState = sourceView.getViewState('list-collapse');
+          const op = (collapsedState: boolean[]) => {
+            const newState = [...collapsedState];
+            newState.splice(dragPath.last(), 1);
+            return newState;
+          };
+          sourceView.setViewState('list-collapse', undefined, op);
 
           return update<Board>(removeEntity(sourceBoard, dragPath), {
-            data: { settings: { 'list-collapse': { $set: collapsedState } } },
+            data: { settings: { 'list-collapse': { $set: op(collapsedState) } } },
           });
         } else {
           return removeEntity(sourceBoard, dragPath);

diff --git a/src/KanbanView.tsx b/src/KanbanView.tsx
@@ -229,14 +229,26 @@ export class KanbanView extends TextFileView implements HoverParent {
     return state;
   }
 
-  setViewState<K extends keyof KanbanViewSettings>(key: K, val: KanbanViewSettings[K]) {
-    this.viewSettings[key] = val;
+  setViewState<K extends keyof KanbanViewSettings>(
+    key: K,
+    val?: KanbanViewSettings[K],
+    globalUpdater?: (old: KanbanViewSettings[K]) => KanbanViewSettings[K]
+  ) {
+    if (globalUpdater) {
+      const stateManager = this.plugin.getStateManager(this.file);
+      stateManager.viewSet.forEach((view) => {
+        view.viewSettings[key] = globalUpdater(view.viewSettings[key]);
+      });
+    } else if (val) {
+      this.viewSettings[key] = val;
+    }
+
     this.app.workspace.requestSaveLayout();
   }
 
   populateViewState(settings: KanbanSettings) {
-    this.viewSettings['kanban-plugin'] ??= settings['kanban-plugin'];
-    this.viewSettings['list-collapse'] ??= settings['list-collapse'];
+    this.viewSettings['kanban-plugin'] ??= settings['kanban-plugin'] || 'board';
+    this.viewSettings['list-collapse'] ??= settings['list-collapse'] || [];
   }
 
   getViewState<K extends keyof KanbanViewSettings>(key: K) {

diff --git a/src/StateManager.ts b/src/StateManager.ts
@@ -11,20 +11,20 @@ import { BaseFormat, frontmatterKey, shouldRefreshBoard } from './parsers/common
 import { defaultDateTrigger, defaultTimeTrigger } from './settingHelpers';
 
 export class StateManager {
-  private onEmpty: () => void;
-  private getGlobalSettings: () => KanbanSettings;
+  onEmpty: () => void;
+  getGlobalSettings: () => KanbanSettings;
 
-  private stateReceivers: Array<(state: Board) => void> = [];
-  private settingsNotifiers: Map<keyof KanbanSettings, Array<() => void>> = new Map();
+  stateReceivers: Array<(state: Board) => void> = [];
+  settingsNotifiers: Map<keyof KanbanSettings, Array<() => void>> = new Map();
 
-  private viewSet: Set<KanbanView> = new Set();
-  private compiledSettings: KanbanSettings = {};
+  viewSet: Set<KanbanView> = new Set();
+  compiledSettings: KanbanSettings = {};
 
-  public app: App;
-  public state: Board;
-  public file: TFile;
+  app: App;
+  state: Board;
+  file: TFile;
 
-  private parser: BaseFormat;
+  parser: BaseFormat;
 
   constructor(
     app: App,

diff --git a/src/components/Lane/Lane.tsx b/src/components/Lane/Lane.tsx
@@ -66,7 +66,7 @@ function DraggableLaneRaw({
 
   const toggleIsCollapsed = useCallback(() => {
     stateManager.setState((board) => {
-      const collapseState = [...(view.getViewState('list-collapse') || [])];
+      const collapseState = [...view.getViewState('list-collapse')];
       collapseState[laneIndex] = !collapseState[laneIndex];
       view.setViewState('list-collapse', collapseState);
       return update(board, {

diff --git a/src/helpers/boardModifiers.ts b/src/helpers/boardModifiers.ts
@@ -93,23 +93,33 @@ export function getBoardModifiers(view: KanbanView, stateManager: StateManager):
 
     addLane: (lane: Lane) => {
       stateManager.setState((boardData) => {
-        const collapseState = [...(view.getViewState('list-collapse') || [])];
-        collapseState.push(false);
-        view.setViewState('list-collapse', collapseState);
+        const collapseState = view.getViewState('list-collapse');
+        const op = (collapseState: boolean[]) => {
+          const newState = [...collapseState];
+          newState.push(false);
+          return newState;
+        };
+
+        view.setViewState('list-collapse', undefined, op);
         return update<Board>(appendEntities(boardData, [], [lane]), {
-          data: { settings: { 'list-collapse': { $set: collapseState } } },
+          data: { settings: { 'list-collapse': { $set: op(collapseState) } } },
         });
       });
     },
 
     insertLane: (path: Path, lane: Lane) => {
       stateManager.setState((boardData) => {
-        const collapseState = [...(view.getViewState('list-collapse') || [])];
-        collapseState.splice(path.last(), 0, false);
-        view.setViewState('list-collapse', collapseState);
+        const collapseState = view.getViewState('list-collapse');
+        const op = (collapseState: boolean[]) => {
+          const newState = [...collapseState];
+          newState.splice(path.last(), 0, false);
+          return newState;
+        };
+
+        view.setViewState('list-collapse', undefined, op);
 
         return update<Board>(insertEntity(boardData, path, [lane]), {
-          data: { settings: { 'list-collapse': { $set: collapseState } } },
+          data: { settings: { 'list-collapse': { $set: op(collapseState) } } },
         });
       });
     },
@@ -132,13 +142,17 @@ export function getBoardModifiers(view: KanbanView, stateManager: StateManager):
         const items = lane.children;
 
         try {
-          const collapseState = [...(view.getViewState('list-collapse') || [])];
-          collapseState.splice(path.last(), 1);
-          view.setViewState('list-collapse', collapseState);
+          const collapseState = view.getViewState('list-collapse');
+          const op = (collapseState: boolean[]) => {
+            const newState = [...collapseState];
+            newState.splice(path.last(), 1);
+            return newState;
+          };
+          view.setViewState('list-collapse', undefined, op);
 
           return update<Board>(removeEntity(boardData, path), {
             data: {
-              settings: { 'list-collapse': { $set: collapseState } },
+              settings: { 'list-collapse': { $set: op(collapseState) } },
               archive: {
                 $unshift: stateManager.getSetting('archive-with-date')
                   ? items.map(appendArchiveDate)
@@ -187,12 +201,16 @@ export function getBoardModifiers(view: KanbanView, stateManager: StateManager):
         const entity = getEntityFromPath(boardData, path);
 
         if (entity.type === DataTypes.Lane) {
-          const collapseState = [...(view.getViewState('list-collapse') || [])];
-          collapseState.splice(path.last(), 1);
-          view.setViewState('list-collapse', collapseState);
+          const collapseState = view.getViewState('list-collapse');
+          const op = (collapseState: boolean[]) => {
+            const newState = [...collapseState];
+            newState.splice(path.last(), 1);
+            return newState;
+          };
+          view.setViewState('list-collapse', undefined, op);
 
           return update<Board>(removeEntity(boardData, path), {
-            data: { settings: { 'list-collapse': { $set: collapseState } } },
+            data: { settings: { 'list-collapse': { $set: op(collapseState) } } },
           });
         }
 
@@ -242,12 +260,16 @@ export function getBoardModifiers(view: KanbanView, stateManager: StateManager):
         });
 
         if (entity.type === DataTypes.Lane) {
-          const collapseState = [...(view.getViewState('list-collapse') || [])];
-          collapseState.splice(path.last(), 0, collapseState[path.last()]);
-          view.setViewState('list-collapse', collapseState);
+          const collapseState = view.getViewState('list-collapse');
+          const op = (collapseState: boolean[]) => {
+            const newState = [...collapseState];
+            newState.splice(path.last(), 0, collapseState[path.last()]);
+            return newState;
+          };
+          view.setViewState('list-collapse', undefined, op);
 
           return update<Board>(insertEntity(boardData, path, [entityWithNewID]), {
-            data: { settings: { 'list-collapse': { $set: collapseState } } },
+            data: { settings: { 'list-collapse': { $set: op(collapseState) } } },
           });
         }