diff options
Diffstat (limited to 'src/client/views/nodes/ColorBox.tsx')
-rw-r--r-- | src/client/views/nodes/ColorBox.tsx | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx new file mode 100644 index 000000000..fda6d64f4 --- /dev/null +++ b/src/client/views/nodes/ColorBox.tsx @@ -0,0 +1,45 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import { SketchPicker } from 'react-color'; +import { FieldView, FieldViewProps } from './FieldView'; +import "./ColorBox.scss"; +import { InkingControl } from "../InkingControl"; +import { DocExtendableComponent } from "../DocComponent"; +import { makeInterface } from "../../../new_fields/Schema"; +import { reaction, observable, action, IReactionDisposer } from "mobx"; +import { SelectionManager } from "../../util/SelectionManager"; +import { StrCast } from "../../../new_fields/Types"; +import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils"; +import { documentSchema } from "../../../new_fields/documentSchemas"; + +type ColorDocument = makeInterface<[typeof documentSchema]>; +const ColorDocument = makeInterface(documentSchema); + +@observer +export class ColorBox extends DocExtendableComponent<FieldViewProps, ColorDocument>(ColorDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ColorBox, fieldKey); } + + _selectedDisposer: IReactionDisposer | undefined; + _penDisposer: IReactionDisposer | undefined; + @observable _startupColor = "black"; + + componentDidMount() { + this._selectedDisposer = reaction(() => SelectionManager.SelectedDocuments(), + action(() => this._startupColor = SelectionManager.SelectedDocuments().length ? StrCast(SelectionManager.SelectedDocuments()[0].Document.backgroundColor, "black") : "black"), + { fireImmediately: true }); + this._penDisposer = reaction(() => CurrentUserUtils.ActivePen, + action(() => this._startupColor = CurrentUserUtils.ActivePen ? StrCast(CurrentUserUtils.ActivePen.backgroundColor, "black") : "black"), + { fireImmediately: true }); + } + componentWillUnmount() { + this._penDisposer && this._penDisposer(); + this._selectedDisposer && this._selectedDisposer(); + } + + render() { + return <div className={`colorBox-container${this.active() ? "-interactive" : ""}`} + onPointerDown={e => e.button === 0 && !e.ctrlKey && e.stopPropagation()}> + <SketchPicker color={this._startupColor} onChange={InkingControl.Instance.switchColor} /> + </div>; + } +}
\ No newline at end of file |