1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
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 { DocStaticComponent } from "../DocComponent";
import { documentSchema } from "./DocumentView";
import { makeInterface } from "../../../new_fields/Schema";
import { trace, 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 { Doc } from "../../../new_fields/Doc";
type ColorDocument = makeInterface<[typeof documentSchema]>;
const ColorDocument = makeInterface(documentSchema);
@observer
export class ColorBox extends DocStaticComponent<FieldViewProps, ColorDocument>(ColorDocument) {
public static LayoutString(fieldKey?: string) { return FieldView.LayoutString(ColorBox, fieldKey); }
_selectedDisposer: IReactionDisposer | undefined;
_penDisposer: IReactionDisposer | undefined;
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 });
// compare to this reaction that used to be in Selection Manager
// reaction(() => manager.SelectedDocuments, sel => {
// let targetColor = "#FFFFFF";
// if (sel.length > 0) {
// let firstView = sel[0];
// let doc = firstView.props.Document;
// let targetDoc = doc.isTemplateField ? doc : Doc.GetProto(doc);
// let stored = StrCast(targetDoc.backgroundColor);
// stored.length > 0 && (targetColor = stored);
// }
// InkingControl.Instance.updateSelectedColor(targetColor);
// }, { fireImmediately: true });
}
componentWillUnmount() {
this._penDisposer && this._penDisposer();
this._selectedDisposer && this._selectedDisposer();
}
@observable _startupColor = "black";
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>;
}
}
|
