computation of the width of the board

src/ActionMagnetChangeSizeRatio.ts

@@ -9,7 +9,12 @@ import { ActionSerialized } from './ActionSerialized';
  */
 export class ActionMagnetChangeSizeRatio extends Action {
 
-    get xMax(): number { return 0; }
+    get xMax(): number {
+        const magnet = document.getElementById(this.magnetid);
+        const w = magnet ? magnet.offsetWidth : 0;
+        const x = magnet ? magnet.offsetLeft : 0;
+        return x + w;
+    }
 
     serializeData(): ActionSerialized {
         return {

src/ActionMagnetMove.ts

@@ -9,8 +9,11 @@ export class ActionMagnetMove extends Action {
     readonly magnetid: string;
     readonly points: { x: number; y: number; }[] = [];
 
-
-    get xMax(): number { return 0; }
+    get xMax(): number {
+        const magnet = document.getElementById(this.magnetid);
+        const w = magnet ? magnet.offsetWidth : 0;
+        return Math.max(...this.points.map((p) => p.x)) + w;
+    }
 
     serializeData(): ActionSerialized {
         return {

src/ActionMagnetNew.ts

@@ -8,7 +8,7 @@ export class ActionMagnetNew extends Action {
     previousMagnet: HTMLElement; // the new magnet is maybe a replacement. We store here the previous magnet.
     magnet: HTMLElement;
 
-    get xMax(): number { return 0; }
+    get xMax(): number { return this.magnet.offsetLeft + this.magnet.offsetWidth; }
     get magnetid(): string { return this.magnet.id; }
 
     serializeData(): ActionSerialized {

src/Timeline.ts

@@ -493,8 +493,8 @@ export class Timeline {
 
 
     /**
- * go to the next frame
- */
+     * @description go to the next frame
+     */
     async nextFrame(): Promise<void> {
         if (this.isEnd())
             return;

src/boardManager.ts

@@ -214,7 +214,7 @@ export class BoardManager {
 
 
     /**
-     *
+     * @description cancel the previous operation on the cancel stack
      */
     static async cancel(userid: string): Promise<void> {
         if (!BoardManager.cancelStack.canUndo())
@@ -227,7 +227,7 @@ export class BoardManager {
 
 
     /**
-     *
+     * @description redo the next operation on the cancel stack
      */
     static async redo(userid: string): Promise<void> {
         if (!BoardManager.cancelStack.canRedo())
@@ -238,7 +238,9 @@ export class BoardManager {
     }
 
 
-
+    /**
+     * @description go to the previous slide
+     */
     static async previousPausedFrame(): Promise<void> {
         await AnimationManager.ensureEnd();
         await BoardManager.timeline.previousPausedFrame();
@@ -248,6 +250,8 @@ export class BoardManager {
 
     /**
      * @decription go the next slide by executing the animation
+     * if a slide is already running (i.e. if the animations are executed)
+     * then we go directly at the end of the slide
      */
     static async nextPausedFrame(): Promise<void> {
         if (AnimationManager.isRunning) {
@@ -262,7 +266,16 @@ export class BoardManager {
             AnimationToolBar.updateCurrentIndex();
             BoardManager.updateSlideNumber();
         }
+    }
+
 
+    /**
+     * @description go the next slide (instantly)
+     */
+    static async fastNextPausedFrame(): Promise<void> {
+        await AnimationManager.ensureEnd();
+        BoardManager.timeline.nextPausedFrame();
+        AnimationToolBar.updateCurrentIndex();
     }
 
 
@@ -281,39 +294,29 @@ export class BoardManager {
             slideNumberElement.hidden = true;
     }
 
-
+    /**
+     * @description go the previous frame, that is if we are at time t, we go at time t-1
+     * (just one action before)
+     */
     static async previousFrame(): Promise<void> {
         await AnimationManager.ensureEnd();
         await BoardManager.timeline.previousFrame();
         AnimationToolBar.updateCurrentIndex();
     }
 
-    static async nextFrame(): Promise<void> {
-        await AnimationManager.ensureEnd();
-        await BoardManager.timeline.nextFrame();
-        AnimationToolBar.updateCurrentIndex();
-    }
 
     /**
-     * @description go the next slide (instantly)
+     * @description go the next frame, that is if we are at time t, we go at time t+1
+     * (just one action after)
      */
-    static async fastNextPausedFrame(): Promise<void> {
+    static async nextFrame(): Promise<void> {
         await AnimationManager.ensureEnd();
-        BoardManager.timeline.nextPausedFrame();
+        await BoardManager.timeline.nextFrame();
         AnimationToolBar.updateCurrentIndex();
     }
 
 
 
-    private static get widthFromActions(): number { return Math.max(...this.timeline.actions.map((a) => a.xMax)); }
-    private static get widthFromMagnets(): number {
-        const magnets = MagnetManager.getMagnets();
-        let max = 0;
-        for (let i = 0; i < magnets.length; i++)
-            max = Math.max(max, magnets[i].offsetLeft + magnets[i].offsetWidth);
-        return max;
-    }
-
 
     /**
      * 
@@ -342,21 +345,21 @@ export class BoardManager {
     }
 
     /**
- * 
- * @param userid 
- * @description remove the next pause action for merging the current slide with the next one
- */
+     * 
+     * @param userid 
+     * @description remove the next pause action for merging the current slide with the next one
+     */
     static mergeSlide(userid: string): void {
         const nextNewSlideActionIndex = BoardManager.timeline.getNextNewSlideActionIndex();
-        console.log("merge: remove action of index " + nextNewSlideActionIndex);
         if (nextNewSlideActionIndex)
             BoardManager.executeOperation(new OperationDeleteSeveralActions([nextNewSlideActionIndex]));
     }
 
-    static get width(): number {
-        console.log(BoardManager.widthFromActions)
-        return Math.max(BoardManager.widthFromActions, BoardManager.widthFromMagnets);
-    }
+
+    /**
+     * @returns the width of the board
+     */
+    static get width(): number { return Math.max(...this.timeline.actions.map((a) => a.xMax)); }
 }
 
 

src/main.ts

@@ -140,6 +140,7 @@ function load() {
 			evt.stopPropagation();//prevent the menu to be hidden because of a click on the toolbar
 		}
 
+		// these button are hidden in the GUI
 		document.getElementById("previousFrame").onclick = () => Share.execute("timelinePreviousFrame", []);
 		document.getElementById("nextFrame").onclick = () => Share.execute("timelineNextFrame", []);