Merge pull request #47 from Bludwarf/Amélioration-des-perfs-#44

Amélioration des perfs #44

angular.json

@@ -105,6 +105,11 @@
   "schematics": {
     "@schematics/angular:component": {
       "style": "scss"
+    },
+    "@schematics/angular": {
+      "component": {
+        "changeDetection": "OnPush"
+      }
     }
   },
   "cli": {

src/app/fretboard/fretboard.component.ts

@@ -1,5 +1,5 @@
 import {CommonModule} from '@angular/common';
-import {Component, Input, OnChanges, OnInit, SimpleChanges,} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges,} from '@angular/core';
 import {Key, Mode, Note} from '../notes';
 import {Fretboard} from './fretboard';
 
@@ -12,6 +12,7 @@ const DEFAULT_FRETS_COUNT = 5;
   imports: [CommonModule],
   templateUrl: './fretboard.component.html',
   styleUrl: './fretboard.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FretboardComponent implements OnInit, OnChanges {
   @Input()

src/app/rehearsal/mobile/mobile-rehearsal-b/mobile-rehearsal-b.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule, JsonPipe } from "@angular/common";
-import { ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from "@angular/forms";
 import { Title } from "@angular/platform-browser";
 import { ActivatedRoute } from "@angular/router";
@@ -21,7 +21,8 @@ import { StructureMapComponent } from "../structure-map/structure-map.component"
     RythmBarComponent, JsonPipe, CommonModule, FormsModule, FretboardComponent, PatternComponent, SectionComponent, StructureMapComponent, PartTabsComponent, PartLineComponent, SampleMapComponent, ChordsGridComponent,
   ],
   templateUrl: './mobile-rehearsal-b.component.html',
-  styleUrl: './mobile-rehearsal-b.component.scss'
+  styleUrl: './mobile-rehearsal-b.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MobileRehearsalBComponent extends MobileRehearsal implements OnInit {
 

src/app/rehearsal/mobile/mobile-rehearsal.ts

@@ -177,7 +177,7 @@ export abstract class MobileRehearsal {
         this.transportPosition = Tone.Transport.position
         this.timecode = warpTime.toAbletonLiveBarsBeatsSixteenths()
         this.currentBar = warpTime.toBars() // TODO faire un utilitaire qui détecte la mesure en fonction d'une structure et de changements de signature
-        this.transportBeatTime = +warpTime.toBeatTime().toFixed(0)
+        this.transportBeatTime = +warpTime.toBeatTime()
 
         const changePatternFasterDelay = Time.fromValue(0) // Time.fromValue('4n') // TODO trop bizarre à l'affichage de la section courante, mais ok pour affichage partoche
         const delayedWrappedTime = warpTime.add(changePatternFasterDelay);

src/app/rehearsal/mobile/part-line/part-line.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
 import {PartInStructure} from "../../../structure/part/part-in-structure";
 import {NgForOf} from "@angular/common";
 import {PatternInStructure} from "../../../structure/pattern/pattern-in-structure";
@@ -11,7 +11,8 @@ import {SectionInStructure} from "../../../structure/section/section-in-structur
     NgForOf
   ],
   templateUrl: './part-line.component.html',
-  styleUrl: './part-line.component.scss'
+  styleUrl: './part-line.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PartLineComponent {
   @Input() partInStructure!: PartInStructure;

src/app/rehearsal/mobile/part-tab/part-tab.component.ts

@@ -1,12 +1,13 @@
-import {Component, HostBinding, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostBinding, Input} from '@angular/core';
 import {PartInStructure} from "../../../structure/part/part-in-structure";
 
 @Component({
   selector: 'app-part-tab',
   standalone: true,
   imports: [],
   templateUrl: './part-tab.component.html',
-  styleUrl: './part-tab.component.scss'
+  styleUrl: './part-tab.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PartTabComponent {
   @Input() partInStructure!: PartInStructure;

src/app/rehearsal/mobile/part-tabs/part-tabs.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output} from '@angular/core';
 import {Structure} from "../../../structure/structure";
 import {PartInStructure} from "../../../structure/part/part-in-structure";
 import {SectionComponent} from "../../../structure/section/section.component";
@@ -14,7 +14,8 @@ import {PartTabComponent} from "../part-tab/part-tab.component";
     PartTabComponent
   ],
   templateUrl: './part-tabs.component.html',
-  styleUrl: './part-tabs.component.scss'
+  styleUrl: './part-tabs.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PartTabsComponent {
   @Input() structure!: Structure;

src/app/rehearsal/mobile/sample-map/sample-map.component.ts

@@ -1,11 +1,12 @@
-import {Component, Input} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
 
 @Component({
   selector: 'app-sample-map',
   standalone: true,
   imports: [],
   templateUrl: './sample-map.component.html',
-  styleUrl: './sample-map.component.scss'
+  styleUrl: './sample-map.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SampleMapComponent {
   @Input() transportSeconds?: number

src/app/rehearsal/mobile/structure-map/structure-map.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
 import {Structure} from "../../../structure/structure";
 import {NgForOf} from "@angular/common";
 import {PatternInStructure} from "../../../structure/pattern/pattern-in-structure";
@@ -10,7 +10,8 @@ import {PatternInStructure} from "../../../structure/pattern/pattern-in-structur
     NgForOf
   ],
   templateUrl: './structure-map.component.html',
-  styleUrl: './structure-map.component.scss'
+  styleUrl: './structure-map.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StructureMapComponent {
   @Input() structure!: Structure;

src/app/rythm-bar/beat/division/line/rythm-bar-beat-division-line.component.ts

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, ElementRef, HostBinding, HostListener, Input, Output } from '@angular/core';
+import { Component, EventEmitter, ElementRef, HostBinding, HostListener, Input, Output, ChangeDetectionStrategy } from '@angular/core';
 import { RythmBarEvent, abletonLiveTimeCode } from '../../../event';
 
 @Component({
   selector: 'app-rythm-bar-beat-division-line',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './rythm-bar-beat-division-line.component.html',
-  styleUrl: './rythm-bar-beat-division-line.component.scss'
+  styleUrl: './rythm-bar-beat-division-line.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RythmBarBeatDivisionLineComponent {
 

src/app/rythm-bar/beat/division/note/note.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-note',
   standalone: true,
   imports: [],
   templateUrl: './note.component.html',
-  styleUrl: './note.component.scss'
+  styleUrl: './note.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NoteComponent {
 

src/app/rythm-bar/beat/division/rythm-bar-beat-division.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -23,6 +24,7 @@ import { RythmBarBeatDivisionLineComponent } from './line/rythm-bar-beat-divisio
   imports: [CommonModule, RythmBarBeatDivisionLineComponent, NoteComponent],
   templateUrl: './rythm-bar-beat-division.component.html',
   styleUrl: './rythm-bar-beat-division.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RythmBarBeatDivisionComponent implements AfterViewInit {
   @Input()

src/app/rythm-bar/beat/rythm-bar-beat.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { sequence } from '../../utils';
 import { CommonModule } from '@angular/common';
 import { RythmBarBeatDivisionComponent } from './division/rythm-bar-beat-division.component';
@@ -12,7 +12,8 @@ import { RythmBarEvent } from '../event';
     RythmBarBeatDivisionComponent,
   ],
   templateUrl: './rythm-bar-beat.component.html',
-  styleUrl: './rythm-bar-beat.component.scss'
+  styleUrl: './rythm-bar-beat.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RythmBarBeatComponent {
 

src/app/rythm-bar/rythm-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { RythmBarBeatComponent } from './beat/rythm-bar-beat.component';
 import { CommonModule } from '@angular/common';
 import { sequence } from '../utils';
@@ -12,7 +12,8 @@ import { RythmBarEvent } from './event';
     RythmBarBeatComponent,
   ],
   templateUrl: './rythm-bar.component.html',
-  styleUrl: './rythm-bar.component.scss'
+  styleUrl: './rythm-bar.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RythmBarComponent {