Zustand: migrate source selector

app/components-react/editor/elements/DualOutputSourceSelector.tsx

@@ -1,16 +1,16 @@
 import React, { useMemo } from 'react';
 import { Services } from 'components-react/service-provider';
 import { useVuex } from 'components-react/hooks';
-import { useModule } from 'slap';
-import { SourceSelectorModule } from './SourceSelector';
+import { useController } from '../../hooks/zustand';
+import { SourceSelectorCtx } from './SourceSelector';
 
 interface IDualOutputSourceSelector {
   nodeId: string;
   sceneId?: string;
 }
 export function DualOutputSourceSelector(p: IDualOutputSourceSelector) {
-  const { toggleVisibility, makeActive, horizontalActive, verticalActive } = useModule(
-    SourceSelectorModule,
+  const { toggleVisibility, makeActive, horizontalActive, verticalActive } = useController(
+    SourceSelectorCtx,
   );
   const { DualOutputService } = Services;
 

app/components-react/editor/elements/SourceSelector.tsx

@@ -1,18 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Tooltip, Tree } from 'antd';
 import { DataNode } from 'rc-tree/lib/interface';
 import { TreeProps } from 'rc-tree/lib/Tree';
 import cx from 'classnames';
-import { inject, injectState, injectWatch, mutation, useModule } from 'slap';
-import { SourcesService } from 'services/sources';
-import { ScenesService, TSceneNode, isItem } from 'services/scenes';
-import { SelectionService } from 'services/selection';
+import { TSceneNode, isItem } from 'services/scenes';
 import { EditMenu } from 'util/menus/EditMenu';
 import { $t } from 'services/i18n';
-import { EditorCommandsService } from 'services/editor-commands';
 import { EPlaceType } from 'services/editor-commands/commands/reorder-nodes';
-import { AudioService } from 'services/audio';
-import { StreamingService } from 'services/streaming';
 import { EDismissable } from 'services/dismissables';
 import { assertIsDefined, getDefined } from 'util/properties-type-guards';
 import useBaseElement from './hooks';
@@ -21,9 +15,10 @@ import Scrollable from 'components-react/shared/Scrollable';
 import HelpTip from 'components-react/shared/HelpTip';
 import Translate from 'components-react/shared/Translate';
 import { DualOutputSourceSelector } from './DualOutputSourceSelector';
-import { WidgetsService } from '../../../app-services';
-import { GuestCamService } from 'app-services';
-import { DualOutputService } from 'services/dual-output';
+import { Services } from 'components-react/service-provider';
+import { initStore, useController } from '../../hooks/zustand';
+import { useVuex } from '../../hooks';
+
 interface ISourceMetadata {
   id: string;
   title: string;
@@ -41,23 +36,23 @@ interface ISourceMetadata {
   toggleAll?: boolean;
 }
 
-export class SourceSelectorModule {
-  private scenesService = inject(ScenesService);
-  private sourcesService = inject(SourcesService);
-  private widgetsService = inject(WidgetsService);
-  private selectionService = inject(SelectionService);
-  private editorCommandsService = inject(EditorCommandsService);
-  private streamingService = inject(StreamingService);
-  private audioService = inject(AudioService);
-  private guestCamService = inject(GuestCamService);
-  private dualOutputService = inject(DualOutputService);
+class SourceSelectorController {
+  private scenesService = Services.ScenesService;
+  private sourcesService = Services.SourcesService;
+  private widgetsService = Services.WidgetsService;
+  private selectionService = Services.SelectionService;
+  private editorCommandsService = Services.EditorCommandsService;
+  private streamingService = Services.StreamingService;
+  private audioService = Services.AudioService;
+  private guestCamService = Services.GuestCamService;
+  private dualOutputService = Services.DualOutputService;
 
   sourcesTooltip = $t('The building blocks of your scene. Also contains widgets.');
   addSourceTooltip = $t('Add a new Source to your Scene. Includes widgets.');
   openSourcePropertiesTooltip = $t('Open the Source Properties.');
   addGroupTooltip = $t('Add a Group so you can move multiple Sources at the same time.');
 
-  state = injectState({
+  store = initStore({
     expandedFoldersIds: [] as string[],
     showTreeMask: true,
   });
@@ -73,6 +68,13 @@ export class SourceSelectorModule {
    */
   callCameFromIcon = false;
 
+  constructor() {
+    this.selectionService.store.watch(
+      s => s.lastSelectedId,
+      () => this.expandSelectedFolders(),
+    );
+  }
+
   getTreeData(nodeData: ISourceMetadata[]) {
     // recursive function for transforming SceneNode[] to a Tree format of Antd.Tree
     const getTreeNodes = (sceneNodes: ISourceMetadata[]): DataNode[] => {
@@ -182,7 +184,7 @@ export class SourceSelectorModule {
 
   determineIcon(isLeaf: boolean, sourceId: string) {
     if (!isLeaf) {
-      return this.state.expandedFoldersIds.includes(sourceId)
+      return this.store.expandedFoldersIds.includes(sourceId)
         ? 'fas fa-folder-open'
         : 'fa fa-folder';
     }
@@ -395,13 +397,14 @@ export class SourceSelectorModule {
     this.callCameFromIcon = false;
   }
 
-  @mutation()
   toggleFolder(nodeId: string) {
-    if (this.state.expandedFoldersIds.includes(nodeId)) {
-      this.state.expandedFoldersIds.splice(this.state.expandedFoldersIds.indexOf(nodeId), 1);
-    } else {
-      this.state.expandedFoldersIds.push(nodeId);
-    }
+    this.store.setState(s => {
+      if (s.expandedFoldersIds.includes(nodeId)) {
+        s.expandedFoldersIds.splice(s.expandedFoldersIds.indexOf(nodeId), 1);
+      } else {
+        s.expandedFoldersIds.push(nodeId);
+      }
+    });
   }
 
   get lastSelectedId() {
@@ -443,18 +446,17 @@ export class SourceSelectorModule {
     return this.dualOutputService.views.activeDisplays.vertical;
   }
 
-  watchSelected = injectWatch(() => this.lastSelectedId, this.expandSelectedFolders);
-
   async expandSelectedFolders() {
     if (this.callCameFromInsideTheHouse) {
       this.callCameFromInsideTheHouse = false;
       return;
     }
     const node = this.scene.getNode(this.lastSelectedId);
     if (!node || this.selectionService.state.selectedIds.length > 1) return;
-    this.state.setExpandedFoldersIds(
-      this.state.expandedFoldersIds.concat(node.getPath().slice(0, -1)),
-    );
+
+    this.store.setState(s => {
+      s.expandedFoldersIds.concat(node.getPath().slice(0, -1));
+    });
 
     this.nodeRefs[this.lastSelectedId]?.current?.scrollIntoView({ behavior: 'smooth' });
   }
@@ -647,7 +649,7 @@ export class SourceSelectorModule {
 }
 
 function SourceSelector() {
-  const { nodeData } = useModule(SourceSelectorModule);
+  const { nodeData } = useController(SourceSelectorCtx);
   return (
     <>
       <StudioControls />
@@ -681,7 +683,7 @@ function StudioControls() {
     addSource,
     addFolder,
     toggleSelectiveRecording,
-  } = useModule(SourceSelectorModule);
+  } = useController(SourceSelectorCtx);
 
   return (
     <div className={styles.topContainer} data-name="sourcesControls">
@@ -711,19 +713,26 @@ function StudioControls() {
 }
 
 function ItemsTree() {
-  const {
-    nodeData,
-    getTreeData,
-    selectionItemIds,
-    expandedFoldersIds,
-    selectiveRecordingEnabled,
-    showContextMenu,
-    makeActive,
-    toggleFolder,
-    handleSort,
-    showTreeMask,
-    setShowTreeMask,
-  } = useModule(SourceSelectorModule);
+  const controller = useController(SourceSelectorCtx);
+  const { getTreeData, showContextMenu, makeActive, toggleFolder, handleSort, store } = controller;
+  const { showTreeMask, expandedFoldersIds } = store.useState(s => ({
+    showTreeMask: s.showTreeMask,
+    expandedFoldersIds: s.expandedFoldersIds,
+  }));
+  const { nodeData, activeItemIds, selectiveRecordingEnabled } = useVuex(() => {
+    return {
+      nodeData: controller.nodeData,
+      activeItemIds: controller.activeItemIds,
+      selectiveRecordingEnabled: controller.selectiveRecordingEnabled,
+    };
+  });
+  const setShowTreeMask = useCallback(
+    (isShown: boolean) =>
+      store.setState(s => {
+        s.showTreeMask = isShown;
+      }),
+    [],
+  );
 
   // Force a rerender when the state of selective recording changes
   const [selectiveRecordingToggled, setSelectiveRecordingToggled] = useState(false);
@@ -750,7 +759,7 @@ function ItemsTree() {
       >
         {showTreeMask && <div className={styles.treeMask} data-name="treeMask" />}
         <Tree
-          selectedKeys={selectionItemIds}
+          selectedKeys={activeItemIds}
           expandedKeys={expandedFoldersIds}
           onSelect={(selectedKeys, info) => makeActive(info)}
           onExpand={(selectedKeys, info) => toggleFolder(info.node.key as string)}
@@ -858,21 +867,26 @@ const TreeNode = React.forwardRef(
   },
 );
 
+export const SourceSelectorCtx = React.createContext<SourceSelectorController | null>(null);
+
 export default function SourceSelectorElement() {
   const containerRef = useRef<HTMLDivElement>(null);
+  const controller = useMemo(() => new SourceSelectorController(), []);
   const { renderElement } = useBaseElement(
     <SourceSelector />,
     { x: 200, y: 120 },
     containerRef.current,
   );
 
   return (
-    <div
-      ref={containerRef}
-      data-name="SourceSelector"
-      style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-    >
-      {renderElement()}
-    </div>
+    <SourceSelectorCtx.Provider value={controller}>
+      <div
+        ref={containerRef}
+        data-name="SourceSelector"
+        style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+      >
+        {renderElement()}
+      </div>
+    </SourceSelectorCtx.Provider>
   );
 }

app/components-react/windows/source-showcase/index.tsx

@@ -15,7 +15,6 @@ import {
 import styles from './SourceShowcase.m.less';
 import SourceGrid from './SourceGrid';
 import Scrollable from 'components-react/shared/Scrollable';
-import pick from 'lodash/pick';
 import * as remote from '@electron/remote';
 
 const { Content, Sider } = Layout;
@@ -32,8 +31,6 @@ export default function SourcesShowcase() {
 function SourcesShowcaseModal() {
   const { selectInspectedSource, availableAppSources, store } = useSourceShowcaseSettings();
 
-  const inspectedSource = store.useState(s => s.inspectedSource);
-
   const [activeTab, setActiveTab] = useState('all');
 
   return (