From 9b6a8b6685e1bb98960f650997663e5bb8501c4a Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Tue, 2 Jul 2019 15:17:52 -0400 Subject: made color selection undoable and display color updates based on first item in selected documents --- src/client/views/GlobalKeyHandler.ts | 1 + src/client/views/InkingControl.tsx | 33 ++++++++++++++++++++++++++++----- src/client/views/MainView.tsx | 6 +++--- 3 files changed, 32 insertions(+), 8 deletions(-) (limited to 'src/client/views') 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 787e240b9..62377a3b0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -291,7 +291,7 @@ export class MainView extends React.Component { } else { CollectionDockingView.Instance.AddRightSplit(doc, dataDoc); } - } + }; let flyout = { - 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 */ -- cgit v1.2.3-70-g09d2 From ee7572ae3d5715ddbce57db3940204a3d0a3d826 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 2 Jul 2019 19:03:01 -0400 Subject: fixed collapsing of tree view items on resize. --- src/client/views/MainView.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index ab9fe0118..9dccb883e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -284,7 +284,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); @@ -292,7 +292,7 @@ export class MainView extends React.Component { CollectionDockingView.Instance.AddRightSplit(doc, dataDoc); } }; - let flyout = ; + } + @computed + get mainContent() { return
- {flyout} + {this.flyout}
{this.dockingContent}
; -- cgit v1.2.3-70-g09d2