feat: add dotted grid

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

@@ -1,3 +1,14 @@
+<svg class="dotBG" opacity="1" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none;">
+  <defs>
+    <pattern x="-13483.370630948139" y="8887.615020145555" [attr.width]="smallScale()" [attr.height]="smallScale()" patternUnits="userSpaceOnUse"><g transform="translate(16.600000000000364, 16.600000000000364)"><circle cx="0.5" cy="0.5" r="1" fill="#c8ccce"></circle></g></pattern><pattern id="lg" x="-14130.770630948138" y="8240.215020145555" [attr.width]="bigScale()" [attr.height]="bigScale()"patternUnits="userSpaceOnUse"><line x1="0" y1="664" x2="1328" y2="664" stroke="#c8ccce" stroke-width="1"></line><line x1="664" y1="0" x2="664" y2="1328" stroke="#c8ccce" stroke-width="1"></line></pattern>
+  </defs>
+  <g transform="translate(0, 0)">
+    <rect width="100%" height="100%" fill="#F6FAFD"></rect>
+    <rect width="100%" height="100%" fill="url(#sm)"></rect>
+  </g>
+</svg>
+
+
 <tapiz-title [title]="boardTitle()"></tapiz-title>
 <div
   [class.participate-mode]="boardMode() === 0"

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

@@ -10,6 +10,8 @@ import {
   inject,
   DestroyRef,
   computed,
+  effect,
+  signal,
 } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { rxEffect } from 'ngxtension/rx-effect';
@@ -159,6 +161,10 @@ export class BoardComponent implements AfterViewInit, OnDestroy {
   public readonly boardId$ = this.store.select(selectBoardId);
   public readonly nodes$ = this.boardFacade.getNodes();
 
+  smallScale = signal(0);
+  bigScale = signal(0);
+
+  public readonly userZoom = this.store.selectSignal(pageFeature.selectZoom);
   public readonly historyService = inject(HistoryService);
   public readonly newNote$ = new Subject<MouseEvent>();
   public readonly drawing = this.drawingStore.drawing;
@@ -204,12 +210,42 @@ export class BoardComponent implements AfterViewInit, OnDestroy {
     this.newNote$.next(event);
   }
 
+  calcPatterns = computed(() => {
+    let smallCalc = 0;
+    let bigCalc = 0;
+    const zoom = Math.max(this.userZoom(), 0.1);
+    const constant = 0.3;
+    const baseSize = 0.8;
+    const total = baseSize + (constant / zoom);
+
+    smallCalc = Math.min(total, 2.5);
+    const zoomFactor = Math.max(this.userZoom(), 0.1);
+
+    const smallMinSize = 18;
+    const smallMaxSize = 40;
+    smallCalc = smallMinSize + (smallMaxSize - smallMinSize) * (zoomFactor - 0.1) / (1 - 0.1);
+    smallCalc = Math.min(smallCalc, smallMaxSize);
+
+    const bigMinSize = 200;
+    const bigMaxSize = 1600;
+    bigCalc = bigMinSize + (bigMaxSize - bigMinSize) * (zoomFactor - 0.1) / (1 - 0.1);
+    bigCalc = Math.max(bigCalc, bigMinSize);
+
+    return { 'smallCalc': smallCalc, 'bigCalc': bigCalc };
+  });
+
   constructor() {
     if (sessionStorage.getItem('new-board')) {
       sessionStorage.removeItem('new-board');
       this.store.dispatch(PageActions.changeBoardMode({ boardMode: 1 }));
     }
 
+    effect(() => {
+      const sizePatterns = this.calcPatterns();
+      this.smallScale.set(sizePatterns.smallCalc);
+      this.bigScale.set(sizePatterns.bigCalc);
+    });
+
     this.wsService.reconnect$.pipe(takeUntilDestroyed()).subscribe(() => {
       const boardId = this.route.snapshot.paramMap.get('id');