fix(regression): fix incorrect use of ng for on a map

Author: arnobl

projects/interacto-angular/src/lib/components/tree-history/tree-history.component.html

@@ -5,14 +5,14 @@ <h2>HISTORY</h2>
 </div>
 
 <div class="tree" oncontextmenu="return false;">
-  @for (position of history.getPositions() ; track position) {
+  @for (position of history.getPositions() | keyvalue ; track position.key) {
     <div #d class="tree-node-history"
-         [ngStyle]="{left: getLeft(position[1]) + 'px', top: getTop(position[0]) + 'px'}"
-         [ngClass]="history.currentNode.id === position[0] ? 'current-node' : ''"
-         [ioClick] (clickBinder)="clickBinders($event, position[0])"
-         [ioTaps] (tapsBinder)="tapsBinder($event, position[0])" [nbTaps]="1"
-         [ioLongTouch] (longTouchBinder)="longTouchBinder($event, position[0])">
-      {{undoButtonSnapshot(history.undoableNodes[position[0]], d)}}
+         [ngStyle]="{left: getLeft(position.value) + 'px', top: getTop(position.key) + 'px'}"
+         [ngClass]="history.currentNode.id === position.key ? 'current-node' : ''"
+         [ioClick] (clickBinder)="clickBinders($event, position.key)"
+         [ioTaps] (tapsBinder)="tapsBinder($event, position.key)" [nbTaps]="1"
+         [ioLongTouch] (longTouchBinder)="longTouchBinder($event, position.key)">
+      {{undoButtonSnapshot(history.undoableNodes[position.key], d)}}
     </div>
   }
 </div>

projects/interacto-angular/src/lib/components/tree-history/tree-history.component.ts

@@ -1,4 +1,4 @@
-import {NgClass, NgFor, NgStyle} from '@angular/common';
+import {KeyValuePipe, NgClass, NgFor, NgStyle} from '@angular/common';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -28,6 +28,7 @@ import {LongTouchBinderDirective} from '../../directives/long-touch-binder.direc
     NgClass,
     NgStyle,
     NgFor,
+    KeyValuePipe,
     UndoBinderDirective,
     RedoBinderDirective,
     ClickBinderDirective,
@@ -159,14 +160,21 @@ export class TreeHistoryComponent implements OnDestroy, AfterViewInit {
       }
     }
 
+    console.log("snap")
+    console.log(node?.id);
+
+
     const snapshot = node === undefined ? this.cacheRoot : this.cache[node.id];
     const txt = node === undefined ? "Root" : node.undoable.getUndoName();
 
+    console.log(snapshot);
+
     if (snapshot === undefined) {
       return txt;
     }
 
     if (snapshot instanceof Promise) {
+      console.log("promise")
       void snapshot.then((res: unknown) => {
         if (node !== undefined) {
           this.cache[node.id] = res;