#183 new feature: colorize existing actions

src/Action.ts

@@ -3,7 +3,15 @@ import { ActionSerialized } from './ActionSerialized';
 import { OptionManager } from './OptionManager';
 
 
-
+/**
+ * An Action is something done on the board, and it appears in the timeline. It could be:
+ * - draw a line (ActionFreeDraw)
+ * - erase a portion of the board (ActionErase)
+ * - add a magnet (ActionMagnetNew)
+ * 
+ * /!\ Do not confuse with an Operation (which is something done by the user, like "adding an action")
+ * 
+ */
 export abstract class Action {
 
     /**

src/ActionFreeDraw.ts

@@ -228,18 +228,24 @@ export class ActionFreeDraw extends Action {
             this.points[this.points.length - 1].pressure = this.points[this.points.length - 2].pressure;
     }
 
-    
+
     public postTreatement(): void {
-       // console.log("Original: " + this.points.length);
-      //  this.smoothifyOnePass();
-       // console.log("After smoothing: " + this.points.length);
+        // console.log("Original: " + this.points.length);
+        //  this.smoothifyOnePass();
+        // console.log("After smoothing: " + this.points.length);
         this.simplify();
-      //  console.log("After simplifying: " + this.points.length);
+        //  console.log("After simplifying: " + this.points.length);
     }
 
 
     getMainColor(): string { return this.points[0].color; }
 
+    setColor(color: string) {
+        for (const point of this.points)
+            point.color = color;
+        this._overviewImage = undefined; //so that the small overview image is recomputed
+    }
+
 
     async undo(): Promise<void> {
         if (this.isInteractive())

src/GUIActions.ts

@@ -14,6 +14,7 @@ import { BoardManager } from './boardManager';
 import { ActionFreeDraw } from './ActionFreeDraw';
 import { ActionRectangle } from './ActionRectangle';
 import { ActionEllipse } from './ActionEllipse';
+import { OperationColorizeSeveralActions } from './OperationColorizeSeveralActions';
 
 export class GUIActions {
 
@@ -75,6 +76,8 @@ export class GUIActions {
     static init(): void {
         GUIActions.palette.onchange = () => {
             if (AnimationToolBar.isActionSelected) {
+                BoardManager.executeOperation(new OperationColorizeSeveralActions(
+                    Array.from(AnimationToolBar.selection.selection), GUIActions.palette.getCurrentColor()));
                 //TODO: recolorize the actions that are selected in the timeline :)
             }
 

src/Operation.ts

@@ -1,11 +1,16 @@
 /**
  * An operation is performed by the user and can be undone/redone.
  * 
+ * 
  * Examples of instantiation:
  * 1. draw a line will correspond to an operation of "adding an action that draws a line, at a particular timestep in the timeline"
  * 2. remove an action in the timeline
+ * 
+ * /!\ do not confuse with an Action
+ * 
  */
 export abstract class Operation {
     abstract undo(): void;
     abstract redo(): void;
-}
+}
+

src/OperationColorizeSeveralActions.ts

@@ -0,0 +1,65 @@
+import { BoardManager } from "./boardManager";
+import { Action } from "./Action";
+import { Operation } from "./Operation";
+import { ActionFreeDraw } from "./ActionFreeDraw";
+import { AnimationToolBar } from "./AnimationToolBar";
+
+
+
+/**
+ * @description recolorize actions, i.e. change the color of the selected actions. If some actions have no color (like ActionErase)
+ * this operation does nothing (technically it assigns a fake non-used property "color")
+ */
+export class OperationColorizeSeveralActions extends Operation {
+    private previousColors: string[];
+
+    /**
+     * 
+     * @param indices the indices of the actions to be recolorized
+     * @param newColor new color to assign to the actions
+     */
+    constructor(private indices: number[], private newColor: string) {
+        super();
+        this.previousColors = this.indices.map(index => this.getColor(BoardManager.timeline.actions[index]));
+    }
+
+    /**
+     * 
+     * @param action 
+     * @param color 
+     * @returns set the color of the action
+     */
+    private setColor(action: Action, color: string) {
+        if (action instanceof ActionFreeDraw)
+            action.setColor(color);
+        else
+            (<any>action).color = color;
+    }
+
+    /**
+     * 
+     * @param action 
+     * @returns the color of the action
+     * 
+     */
+    private getColor(action: Action) {
+        if (action instanceof ActionFreeDraw)
+            return action.getMainColor();
+        else return (<any>action).color;
+    }
+
+    undo(): void {
+        for (const i in this.indices)
+            this.setColor(BoardManager.timeline.actions[this.indices[i]], this.previousColors[i]);
+        BoardManager.timeline.resetAndUpdate();
+        AnimationToolBar.update();
+    }
+
+
+    async redo(): Promise<void> {
+        for (const i in this.indices)
+            this.setColor(BoardManager.timeline.actions[this.indices[i]], this.newColor);
+        BoardManager.timeline.resetAndUpdate();
+        AnimationToolBar.update();
+    }
+}

src/OperationTranslate.ts

@@ -6,7 +6,7 @@ import { ActionErase } from "./ActionErase";
 
 
 /**
- * Translate some drawings
+ * Translate some drawings (does not work in sharing mode)
  */
 export class OperationTranslate extends Operation {