Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web

4 files changed, 52 insertions, 12 deletions

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 3bc71ad42..3c396362e 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,8 +1,9 @@
 import { observable, action, runInAction, IReactionDisposer, reaction, autorun } from "mobx";
-import { Doc } from "../../new_fields/Doc";
+import { Doc, Opt } from "../../new_fields/Doc";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
-import { NumCast } from "../../new_fields/Types";
+import { NumCast, StrCast } from "../../new_fields/Types";
+import { InkingControl } from "../views/InkingControl";
 
 export namespace SelectionManager {
 
@@ -11,6 +12,7 @@ export namespace SelectionManager {
         @observable IsDragging: boolean = false;
         @observable SelectedDocuments: Array<DocumentView> = [];
 
+
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
             // if doc is not in SelectedDocuments, add it
@@ -41,6 +43,17 @@ export namespace SelectionManager {
     }
 
     const manager = new Manager();
+    reaction(() => manager.SelectedDocuments, sel => {
+        let targetColor = "#FFFFFF";
+        if (sel.length > 0) {
+            let firstView = sel[0];
+            let doc = firstView.props.Document;
+            let targetDoc = doc.isTemplate ? doc : Doc.GetProto(doc);
+            let stored = StrCast(targetDoc.backgroundColor);
+            stored.length > 0 && (targetColor = stored);
+        }
+        InkingControl.Instance.updateSelectedColor(targetColor);
+    });
 
     export function DeselectDoc(docView: DocumentView): void {
         manager.DeselectDoc(docView);
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 574e43ba3..fb4a107ad 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -65,6 +65,7 @@ export default class KeyManager {
                         SelectionManager.DeselectAll();
                     }
                 }
+                MainView.Instance.toggleColorPicker(true);
                 break;
         }
 
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index ec228ce98..0461d7299 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -1,4 +1,4 @@
-import { observable, action, computed } from "mobx";
+import { observable, action, computed, runInAction } from "mobx";
 import { ColorResult } from 'react-color';
 import React = require("react");
 import { observer } from "mobx-react";
@@ -8,6 +8,8 @@ import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-s
 import { SelectionManager } from "../util/SelectionManager";
 import { InkTool } from "../../new_fields/InkField";
 import { Doc } from "../../new_fields/Doc";
+import { undoBatch, UndoManager } from "../util/UndoManager";
+import { StrCast } from "../../new_fields/Types";
 
 library.add(faPen, faHighlighter, faEraser, faBan);
 
@@ -36,11 +38,27 @@ export class InkingControl extends React.Component {
         return number.toString(16).toUpperCase();
     }
 
-    @action
-    switchColor = (color: ColorResult): void => {
+    @undoBatch
+    switchColor = action((color: ColorResult): void => {
         this._selectedColor = color.hex + (color.rgb.a !== undefined ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff");
-        if (InkingControl.Instance.selectedTool === InkTool.None) SelectionManager.SelectedDocuments().forEach(doc => (doc.props.Document.isTemplate ? doc.props.Document : Doc.GetProto(doc.props.Document)).backgroundColor = this._selectedColor);
-    }
+        if (InkingControl.Instance.selectedTool === InkTool.None) {
+            let selected = SelectionManager.SelectedDocuments();
+            let oldColors = selected.map(view => {
+                let targetDoc = view.props.Document.isTemplate ? view.props.Document : Doc.GetProto(view.props.Document);
+                let oldColor = StrCast(targetDoc.backgroundColor);
+                targetDoc.backgroundColor = this._selectedColor;
+                return {
+                    target: targetDoc,
+                    previous: oldColor
+                };
+            });
+            let captured = this._selectedColor;
+            UndoManager.AddEvent({
+                undo: () => oldColors.forEach(pair => pair.target.backgroundColor = pair.previous),
+                redo: () => oldColors.forEach(pair => pair.target.backgroundColor = captured)
+            });
+        }
+    });
 
     @action
     switchWidth = (width: string): void => {
@@ -57,6 +75,11 @@ export class InkingControl extends React.Component {
         return this._selectedColor;
     }
 
+    @action
+    updateSelectedColor(value: string) {
+        this._selectedColor = value;
+    }
+
     @computed
     get selectedWidth() {
         return this._selectedWidth;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index cc39dc04c..19a04595a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -285,7 +285,7 @@ export class MainView extends React.Component {
         document.removeEventListener("pointerup", this.onPointerUp);
     }
     @computed
-    get mainContent() {
+    get flyout() {
         let addDocTab = (doc: Doc, dataDoc: Doc | undefined, location: string) => {
             if (doc.dockingConfig) {
                 this.openWorkspace(doc);
@@ -293,7 +293,7 @@ export class MainView extends React.Component {
                 CollectionDockingView.Instance.AddRightSplit(doc, dataDoc);
             }
         };
-        let flyout = <DocumentView
+        return <DocumentView
             Document={CurrentUserUtils.UserDocument}
             DataDoc={undefined}
             addDocument={undefined}
@@ -313,6 +313,9 @@ export class MainView extends React.Component {
             zoomToScale={emptyFunction}
             getScale={returnOne}>
         </DocumentView>;
+    }
+    @computed
+    get mainContent() {
         return <div>
             <div className="mainView-libraryHandle"
                 style={{ left: `${this.flyoutWidth - 10}px` }}
@@ -320,7 +323,7 @@ export class MainView extends React.Component {
                 <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
             </div>
             <div className="mainView-libraryFlyout" style={{ width: `${this.flyoutWidth}px` }}>
-                {flyout}
+                {this.flyout}
             </div>
             {this.dockingContent}
         </div>;
@@ -393,8 +396,8 @@ export class MainView extends React.Component {
 
 
     @action
-    toggleColorPicker = () => {
-        this._colorPickerDisplay = !this._colorPickerDisplay;
+    toggleColorPicker = (close = false) => {
+        this._colorPickerDisplay = close ? false : !this._colorPickerDisplay;
     }
 
     /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */