fix(history): fixing SVG thumbnails in linear history

Author: arnobl

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

@@ -7,21 +7,21 @@ <h2>HISTORY</h2>
 
 <div class="buttons">
   <div #undoButtonContainer>
-    @for (undoable of undoHistory.getUndo(); track $index) {
-      <button #b class="history-button-active" [attr.data-index]="undoHistory.getUndo().length - $index">
-        {{undoButtonSnapshot(undoable, b)}}
+    @for (thumbnail of thumbnailsUndo(); track $index) {
+      <button class="history-button-active" [attr.data-index]="history.getUndo().length - $index"
+              [innerHTML]="getContent(thumbnail | async)">
       </button>
     }
     <br/>
   </div>
 
   <div #redoButtonContainer>
-    @if (undoHistory.getRedo().length > 0) {
+    @if (history.getRedo().length > 0) {
       <p>Redo:</p>
     }
-    @for (_ of undoHistory.getRedo(); track $index) {
-      <button #b class="history-button-inactive" [attr.data-index]="$index + 1">
-        {{undoButtonSnapshot(undoHistory.getRedo()[undoHistory.getRedo().length - $index - 1], b)}}
+    @for (thumbnail of thumbnailsRedo().slice().reverse(); track $index) {
+      <button class="history-button-inactive" [attr.data-index]="$index + 1"
+              [innerHTML]="getContent(thumbnail | async)">
       </button>
     }
     <br/>

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

@@ -1,8 +1,12 @@
+import {ClickBinderDirective} from "../../directives/click-binder.directive";
 import {RedoBinderDirective} from "../../directives/redo-binder.directive";
 import {UndoBinderDirective} from "../../directives/undo-binder.directive";
-import {NgFor, NgIf} from "@angular/common";
-import {Component, Input, Optional, ViewChild, AfterViewInit, ElementRef} from "@angular/core";
+import {AsyncPipe, NgFor, NgIf, NgStyle} from "@angular/common";
+import {Component, AfterViewInit, input, numberAttribute, untracked, inject, viewChild, Signal, computed} from "@angular/core";
+import {toSignal} from "@angular/core/rxjs-interop";
+import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
 import {RedoNTimes, UndoNTimes, Bindings, Undoable, UndoHistory, UndoHistoryBase} from "interacto";
+import {throttleTime} from "rxjs";
 
 @Component({
     selector: "io-linear-history",
@@ -13,73 +17,153 @@ import {RedoNTimes, UndoNTimes, Bindings, Undoable, UndoHistory, UndoHistoryBase
         NgFor,
         NgIf,
         UndoBinderDirective,
-        RedoBinderDirective
+        RedoBinderDirective,
+        AsyncPipe,
+        NgStyle,
+        ClickBinderDirective
     ]
 })
 export class LinearHistoryComponent implements AfterViewInit {
-    @ViewChild("undoButtonContainer")
-    protected undoButtonContainer: ElementRef<HTMLElement>;
+    public readonly svgViewportWidth = input(50, {transform: numberAttribute});
 
-    @ViewChild("redoButtonContainer")
-    protected redoButtonContainer: ElementRef<HTMLElement>;
+    public readonly svgViewportHeight = input(50, {transform: numberAttribute});
 
-    @Input()
-    @Optional()
-    public svgViewportWidth = 50;
+    public readonly svgIconSize = input(50, {transform: numberAttribute});
 
-    @Input()
-    @Optional()
-    public svgViewportHeight = 50;
+    public readonly cmdViewWidth = input(50, {transform: numberAttribute});
 
-    @Input()
-    @Optional()
-    public svgIconSize = 50;
+    public readonly cmdViewHeight = input(50, {transform: numberAttribute});
 
-    public constructor(protected undoHistory: UndoHistory, protected bindings: Bindings<UndoHistoryBase>) {
+    protected readonly undoButtonContainer: Signal<HTMLElement> = viewChild.required<HTMLElement>("undoButtonContainer");
+
+    protected readonly redoButtonContainer: Signal<HTMLElement> = viewChild.required<HTMLElement>("redoButtonContainer");
+
+    protected readonly history: UndoHistory = inject(UndoHistory);
+
+    protected readonly bindings: Bindings<UndoHistoryBase> = inject<Bindings<UndoHistoryBase>>(Bindings<UndoHistoryBase>);
+
+    protected readonly cmdViewWidthPx = computed(() => `${String(this.cmdViewWidth())}px`);
+
+    protected readonly cmdViewHeightPx = computed(() => `${String(this.cmdViewHeight())}px`);
+
+    protected readonly thumbnailsUndo: Signal<Array<Promise<unknown>>>;
+
+    protected readonly thumbnailsRedo: Signal<Array<Promise<unknown>>>;
+
+    private readonly sanitizer = inject(DomSanitizer);
+
+    private readonly undos: Signal<[number, number] | undefined>;
+
+    protected cache: Record<number, unknown> = {};
+
+    public constructor() {
+        this.undos = toSignal<[number, number] | undefined>(this.history.sizeObservable().pipe(throttleTime(200)));
+
+        this.thumbnailsUndo = computed(() => {
+            this.undos();
+            return this.history.getUndo().map(async (entry, index) =>
+                this.undoButtonSnapshot(entry, index));
+        });
+
+        this.thumbnailsRedo = computed(() => {
+            const sizes = this.undos();
+            return this.history.getRedo().map(async (entry, index) =>
+                this.undoButtonSnapshot(entry, index + (sizes?.[0] ?? 0)));
+        });
     }
 
     public ngAfterViewInit(): void {
         this.bindings.buttonBinder()
-            .onDynamic(this.undoButtonContainer)
+            .onDynamic(this.undoButtonContainer())
             .toProduce(i => new UndoNTimes(
-                this.undoHistory,
+                this.history,
                 parseInt(i.widget?.getAttribute("data-index") ?? "-1", 10)))
             .bind();
 
         this.bindings.buttonBinder()
-            .onDynamic(this.redoButtonContainer)
+            .onDynamic(this.redoButtonContainer())
             .toProduce(i => new RedoNTimes(
-                this.undoHistory,
+                this.history,
                 parseInt(i.widget?.getAttribute("data-index") ?? "-1", 10)))
             .bind();
     }
 
-    public undoButtonSnapshot(command: Undoable, button: HTMLButtonElement): unknown {
-        const snapshot = command.getVisualSnapshot();
+    protected async undoButtonSnapshot(command: Undoable, index: number): Promise<unknown> {
+        const snapshot = this.cache[index] ?? command.getVisualSnapshot();
+        const txt = command.getUndoName();
+
         if (snapshot === undefined) {
-            return command.getUndoName();
+            return new Promise<string>(resolve => {
+                resolve(txt);
+            });
         }
 
         if (typeof snapshot === "string") {
-            return `${command.getUndoName()}: ${snapshot}`;
+            return new Promise<string>(resolve => {
+                resolve(`${txt}: ${snapshot}`);
+            });
+        }
+
+        if (snapshot instanceof Promise) {
+            return snapshot
+                .then((res: unknown) => {
+                    this.cache[index] = res;
+                    return this.undoButtonSnapshot_(res, txt);
+                });
         }
 
         if (snapshot instanceof SVGElement) {
-            button.querySelectorAll("div")[0].remove();
-
-            const size = `${String(this.svgIconSize)}px`;
-            const div = document.createElement("div");
-            div.appendChild(snapshot);
-            div.style.width = size;
-            div.style.height = size;
-            snapshot.setAttribute("viewBox", `0 0 ${String(this.svgViewportWidth)} ${String(this.svgViewportHeight)}`);
-            snapshot.setAttribute("width", size);
-            snapshot.setAttribute("height", size);
-            button.querySelectorAll("div")[0].remove();
-            button.appendChild(div);
-            return command.getUndoName();
+            return new Promise<Element>(resolve => {
+                resolve(this.configureHtmlSvgTag(snapshot, true));
+            });
+        }
+
+        if (snapshot instanceof Element) {
+            return new Promise<Element>(resolve => {
+                resolve(this.configureHtmlSvgTag(snapshot, false));
+            });
+        }
+
+        return new Promise<string>(resolve => {
+            resolve(txt);
+        });
+    }
+
+    protected getContent(elt: unknown): string | SafeHtml {
+        if (typeof elt === "string") {
+            return elt;
+        }
+        if (elt instanceof Element) {
+            return this.sanitizer.bypassSecurityTrustHtml(elt.outerHTML);
+        }
+        return "";
+    }
+
+    private configureHtmlSvgTag(snapshot: Element | SVGElement, svg: boolean): Element {
+        if (svg) {
+            snapshot.setAttribute("viewBox", `0 0 ${String(untracked(this.svgViewportWidth))} ${String(untracked(this.svgViewportHeight))}`);
+        }
+
+        snapshot.setAttribute("pointer-events", "none");
+        snapshot.setAttribute("width", String(untracked(this.cmdViewWidthPx)));
+        snapshot.setAttribute("height", String(untracked(this.cmdViewHeightPx)));
+
+        return snapshot;
+    }
+
+    private undoButtonSnapshot_(snapshot: unknown, txt: string): string | Element {
+        if (typeof snapshot === "string") {
+            return `${txt}: ${snapshot}`;
+        }
+
+        if (snapshot instanceof SVGElement) {
+            return this.configureHtmlSvgTag(snapshot, true);
+        }
+
+        if (snapshot instanceof HTMLElement) {
+            return this.configureHtmlSvgTag(snapshot, false);
         }
 
-        return command.getUndoName();
+        return txt;
     }
 }