chore: app state with signals

apps/api/src/simulate-users.ts

@@ -195,7 +195,7 @@ function createClient(index: number) {
         }
       });
 
-      // some joins are lost withou setTimeout
+      // some joins are lost without setTimeout
       setTimeout(() => {
         ws.emit('board', [
           {

apps/web/src/app/modules/board/board/board.component.html

@@ -99,7 +99,9 @@
       <tapiz-demo-intro />
     }
 
-    <tapiz-context-menu />
+    @if (!isReadonlyUser()) {
+      <tapiz-context-menu />
+    }
     <tapiz-board-context-menu />
     <tapiz-node-toolbar />
     <tapiz-comments />

apps/web/src/app/modules/board/board/board.component.ts

@@ -65,7 +65,7 @@ import { appFeature } from '../../../+state/app.reducer';
 import { SubscriptionService } from '../../../services/subscription.service';
 import { DrawingStore } from '../components/drawing/drawing.store';
 import { DrawingOptionsComponent } from '../components/drawing-options';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommentsComponent } from '../components/comments/comments.component';
 import { NodesActions } from '../services/nodes-actions';
 import { ConfigService } from '../../../services/config.service';
@@ -154,7 +154,6 @@ export class BoardComponent implements AfterViewInit, OnDestroy {
   private fileUploadService = inject(FileUploadService);
   private destroyRef = inject(DestroyRef);
   public readonly boardId$ = this.store.select(boardPageFeature.selectBoardId);
-  public readonly nodes$ = this.boardFacade.getNodes();
 
   smallScale = computed(() => this.calcPatterns().smallCalc);
   bigScale = computed(() => this.calcPatterns().bigCalc);
@@ -191,13 +190,10 @@ export class BoardComponent implements AfterViewInit, OnDestroy {
   public readonly isAdmin = this.store.selectSignal(
     boardPageFeature.selectIsAdmin,
   );
-  public readonly readonly = toSignal(
-    this.boardFacade.getSettings().pipe(
-      map((it) => {
-        return it?.content.readOnly ?? false;
-      }),
-    ),
-  );
+  public readonly readonly = computed(() => {
+    return this.boardFacade.settings()?.content.readOnly ?? false;
+  });
+
   public readonly isReadonlyUser = computed(() => {
     return this.readonly() && !this.isAdmin();
   });
@@ -210,6 +206,10 @@ export class BoardComponent implements AfterViewInit, OnDestroy {
 
   @HostListener('dblclick', ['$event'])
   public dblclick(event: MouseEvent) {
+    if (this.readonly()) {
+      return;
+    }
+
     if (event.target !== this.el.nativeElement) {
       return;
     }

apps/web/src/app/modules/board/board/directives/board-resize.directive.ts

@@ -5,7 +5,7 @@ import { isResizable, StateActions } from '@tapiz/board-commons';
 import { NodesActions } from '../../services/nodes-actions';
 import { BoardActions } from '@tapiz/board-commons/actions/board.actions';
 import { ResizeService } from '@tapiz/ui/resize';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { Resizable, TuNode } from '@tapiz/board-commons';
 import { filter, map, share } from 'rxjs';
@@ -23,7 +23,7 @@ export class BoardResizeDirective {
   #boardFacade = inject(BoardFacade);
   #store = inject(Store);
   #nodesActions = inject(NodesActions);
-  #selectFocusNodes = toSignal(this.#boardFacade.selectFocusNodes$);
+  #selectFocusNodes = this.#boardFacade.focusNodes;
   #initialNodes: TuNode<Resizable>[] = [];
 
   constructor() {

apps/web/src/app/modules/board/components/board-context-menu/board-contextmenu.component.ts

@@ -27,7 +27,6 @@ import { CommentsStore } from '../comments/comments.store';
 import { NodesActions } from '../../services/nodes-actions';
 import Pickr from '@simonwep/pickr';
 import { colorPickerConfig } from '@tapiz/ui/color-picker/color-picker.config';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { defaultNoteColor } from '../note';
 
 @Component({
@@ -53,7 +52,7 @@ export class BoardContextMenuComponent implements OnInit {
   private showUserVotes = this.store.selectSignal(
     boardPageFeature.selectVoting,
   );
-  private selectFocusNodes = toSignal(this.boardFacade.selectFocusNodes$);
+  private selectFocusNodes = this.boardFacade.focusNodes;
   private activeToolbarOption = this.store.selectSignal(
     boardPageFeature.selectPopupOpen,
   );

apps/web/src/app/modules/board/components/board-header-options/board-header-options.component.ts

@@ -12,8 +12,6 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { ShareBoardComponent } from '../share-board/share-board.component';
 import { boardPageFeature } from '../../reducers/boardPage.reducer';
 import { BoardSettingsComponent } from '../board-settings/board-settings.component';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
 import { computed } from '@angular/core';
 import { ConfigService } from '../../../../services/config.service';
 import { MatButtonModule } from '@angular/material/button';
@@ -33,12 +31,8 @@ export class BoardHeaderOptionsComponent {
   #boardFacade = inject(BoardFacade);
   #boardUsers = this.#store.selectSignal(boardPageFeature.selectBoardUsers);
   #configService = inject(ConfigService);
-  #users = toSignal(
-    this.#boardFacade
-      .getUsers()
-      .pipe(map((users) => users.map((user) => user.content))),
-    { initialValue: [] },
-  );
+  #users = this.#boardFacade.users;
+
   userId = this.#store.selectSignal(boardPageFeature.selectUserId);
   users = computed(() => {
     const boardUsers = this.#boardUsers();
@@ -56,7 +50,7 @@ export class BoardHeaderOptionsComponent {
         };
       });
   });
-  #settings = toSignal(this.#boardFacade.getSettings(), { initialValue: null });
+  #settings = this.#boardFacade.settings;
 
   showUsers = computed(() => {
     return !this.#settings()?.content.anonymousMode;

apps/web/src/app/modules/board/components/board-nodes-align/board-nodes-align.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { boardPageFeature } from '../../reducers/boardPage.reducer';
 import { BoardFacade } from '../../../../services/board-facade.service';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { Point, StateActions, TuNode } from '@tapiz/board-commons';
@@ -70,7 +69,7 @@ export class BoardNodesAlignComponent {
   boardFacade = inject(BoardFacade);
   store = inject(Store);
   focusNodesIds = this.store.selectSignal(boardPageFeature.selectFocusId);
-  #focusNodes = toSignal(this.boardFacade.selectFocusNodes$);
+  #focusNodes = this.boardFacade.focusNodes;
   #nodesActions = inject(NodesActions);
 
   alignBottom() {

apps/web/src/app/modules/board/components/board-settings/board-settings.component.ts

@@ -1,6 +1,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   effect,
   inject,
 } from '@angular/core';
@@ -12,8 +13,6 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { Store } from '@ngrx/store';
 import { BoardActions } from '../../actions/board.actions';
 import { v4 } from 'uuid';
-import { map } from 'rxjs';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { BoardFacade } from '../../../../services/board-facade.service';
 
 @Component({
@@ -80,13 +79,9 @@ export class BoardSettingsComponent {
   #boardFacade = inject(BoardFacade);
   #dialogRef = inject(MatDialogRef);
 
-  #settings = toSignal(
-    this.#boardFacade.getNodes().pipe(
-      map((it) => {
-        return it.find((it) => it.type === 'settings');
-      }),
-    ),
-  );
+  #settings = computed(() => {
+    return this.#boardFacade.nodes().find((it) => it.type === 'settings');
+  });
 
   form = new FormGroup({
     readOnly: new FormControl(false),

apps/web/src/app/modules/board/components/cursors/cursors.component.ts

@@ -8,7 +8,6 @@ import {
 } from '@angular/core';
 
 import { BoardFacade } from '../../../../services/board-facade.service';
-import { toSignal } from '@angular/core/rxjs-interop';
 import { Store } from '@ngrx/store';
 import { boardPageFeature } from '../../reducers/boardPage.reducer';
 import { CommonModule } from '@angular/common';
@@ -48,11 +47,11 @@ export class CursorsComponent {
   #store = inject(Store);
   #boardFacade = inject(BoardFacade);
 
-  users = toSignal(this.#boardFacade.selectCursors());
+  users = this.#boardFacade.cursors;
   userZoom = this.#store.selectSignal(boardPageFeature.selectZoom);
 
   scale = signal(1);
-  #settings = toSignal(this.#boardFacade.getSettings());
+  #settings = this.#boardFacade.settings;
 
   showCursors = computed(() => {
     const settings = this.#settings();

apps/web/src/app/modules/board/components/drawing/drawing.store.ts

@@ -1,15 +1,13 @@
-import { Injectable, inject } from '@angular/core';
+import { Injectable, computed, inject } from '@angular/core';
 import { Drawing, TuNode } from '@tapiz/board-commons';
 import { rxState } from '@rx-angular/state';
-import { filter, map, skip, withLatestFrom } from 'rxjs';
+import { filter, map, skip } from 'rxjs';
 import { rxActions } from '@rx-angular/state/actions';
 import { Store } from '@ngrx/store';
 import { BoardActions } from '@tapiz/board-commons/actions/board.actions';
 import { Action } from '@ngrx/store';
-import { concatLatestFrom } from '@ngrx/operators';
 import { BoardFacade } from '../../../../services/board-facade.service';
 import { BoardPageActions } from '../../actions/board-page.actions';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 interface DrawingState {
   undoable: { action: Action; inverseAction: Action }[];
@@ -32,14 +30,13 @@ export class DrawingStore {
   #store = inject(Store);
   #boardFacade = inject(BoardFacade);
 
-  nodes$ = this.#boardFacade.getNodes().pipe(
-    takeUntilDestroyed(),
-    map((nodes) => {
-      return nodes.filter(
+  nodes = computed(() => {
+    return this.#boardFacade
+      .nodes()
+      .filter(
         (node) => node.type === 'note' || node.type === 'panel',
       ) as TuNode<{ drawing: Drawing[] }>[];
-    }),
-  );
+  });
 
   actions = rxActions<{
     undoDrawing: void;
@@ -88,20 +85,19 @@ export class DrawingStore {
       }
     });
 
-    this.actions.cleanDrawing$
-      .pipe(withLatestFrom(this.#boardFacade.selectFocusNodes$))
-      .subscribe(([, nodes]) => {
-        const node = nodes?.at(0);
-
-        if (node?.type === 'note' || node?.type === 'panel') {
-          this.actions.setDrawing({
-            id: node.id,
-            type: node.type,
-            drawing: [],
-            history: true,
-          });
-        }
-      });
+    this.actions.cleanDrawing$.subscribe(() => {
+      const nodes = this.#boardFacade.focusNodes();
+      const node = nodes?.at(0);
+
+      if (node?.type === 'note' || node?.type === 'panel') {
+        this.actions.setDrawing({
+          id: node.id,
+          type: node.type,
+          drawing: [],
+          history: true,
+        });
+      }
+    });
 
     this.actions.readyToDraw$.subscribe(() => {
       this.#state.set({ drawing: true });
@@ -118,8 +114,9 @@ export class DrawingStore {
     this.actions.setDrawing$
       .pipe(
         filter((action) => action.history),
-        concatLatestFrom(() => this.nodes$),
-        map(([action, nodes]) => {
+        map((action) => {
+          const nodes = this.nodes();
+
           return {
             id: action.id,
             drawing: action.drawing,
@@ -133,40 +130,38 @@ export class DrawingStore {
           return;
         }
 
-        if (node.type === 'note' || node.type === 'panel') {
-          this.#newUndoneAction(
-            BoardActions.batchNodeActions({
-              history: true,
-              actions: [
-                {
-                  data: {
-                    type,
-                    id,
-                    content: {
-                      drawing,
-                    },
+        this.#newUndoneAction(
+          BoardActions.batchNodeActions({
+            history: true,
+            actions: [
+              {
+                data: {
+                  type,
+                  id,
+                  content: {
+                    drawing,
                   },
-                  op: 'patch',
                 },
-              ],
-            }),
-            BoardActions.batchNodeActions({
-              history: false,
-              actions: [
-                {
-                  data: {
-                    type,
-                    id,
-                    content: {
-                      drawing: node.content.drawing,
-                    },
+                op: 'patch',
+              },
+            ],
+          }),
+          BoardActions.batchNodeActions({
+            history: false,
+            actions: [
+              {
+                data: {
+                  type,
+                  id,
+                  content: {
+                    drawing: node.content.drawing,
                   },
-                  op: 'patch',
                 },
-              ],
-            }),
-          );
-        }
+                op: 'patch',
+              },
+            ],
+          }),
+        );
       });
 
     this.actions.setDrawing$.subscribe(({ id, drawing, history }) => {