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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
import React = require('react');
import { action } from 'mobx';
import { observer } from 'mobx-react';
import { ColorState, SketchPicker } from 'react-color';
import { Doc, HeightSym, WidthSym } from '../../../fields/Doc';
import { InkTool } from '../../../fields/InkField';
import { StrCast } from '../../../fields/Types';
import { DocumentType } from '../../documents/DocumentTypes';
import { SelectionManager } from '../../util/SelectionManager';
import { undoBatch } from '../../util/UndoManager';
import { ViewBoxBaseComponent } from '../DocComponent';
import { ActiveInkColor, ActiveInkWidth, SetActiveInkColor, SetActiveInkWidth } from '../InkingStroke';
import './ColorBox.scss';
import { FieldView, FieldViewProps } from './FieldView';
import { RichTextMenu } from './formattedText/RichTextMenu';
@observer
export class ColorBox extends ViewBoxBaseComponent<FieldViewProps>() {
public static LayoutString(fieldKey: string) {
return FieldView.LayoutString(ColorBox, fieldKey);
}
@undoBatch
@action
static switchColor(color: ColorState) {
SetActiveInkColor(color.hex);
SelectionManager.Views().map(view => {
const targetDoc =
view.props.Document.dragFactory instanceof Doc
? view.props.Document.dragFactory
: view.props.Document.layout instanceof Doc
? view.props.Document.layout
: view.props.Document.isTemplateForField
? view.props.Document
: Doc.GetProto(view.props.Document);
if (targetDoc) {
if (view.props.LayoutTemplate?.() || view.props.LayoutTemplateString) {
// this situation typically occurs when you have a link dot
targetDoc.backgroundColor = color.hex; // bcz: don't know how to change the color of an inline template...
} else if (RichTextMenu.Instance?.TextViewFieldKey && window.getSelection()?.toString() !== '') {
Doc.Layout(view.props.Document)[RichTextMenu.Instance.TextViewFieldKey + '-color'] = color.hex;
} else {
Doc.Layout(view.props.Document)._backgroundColor = color.hex + (color.rgb.a ? Math.round(color.rgb.a * 255).toString(16) : ''); // '_backgroundColor' is template specific. 'backgroundColor' would apply to all templates, but has no UI at the moment
}
}
});
}
render() {
const scaling = Math.min(this.layoutDoc.fitWidth ? 10000 : this.props.PanelHeight() / this.rootDoc[HeightSym](), this.props.PanelWidth() / this.rootDoc[WidthSym]());
return (
<div
className={`colorBox-container${this.isContentActive() ? '-interactive' : ''}`}
onPointerDown={e => e.button === 0 && !e.ctrlKey && e.stopPropagation()}
onClick={e => e.stopPropagation()}
style={{ transform: `scale(${scaling})`, width: `${100 * scaling}%`, height: `${100 * scaling}%` }}>
<SketchPicker
onChange={c => Doc.ActiveTool === InkTool.None && ColorBox.switchColor(c)}
color={StrCast(SelectionManager.Views()?.[0]?.rootDoc?._backgroundColor, ActiveInkColor())}
presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']}
/>
<div style={{ width: this.props.PanelWidth() / scaling, display: 'flex', paddingTop: '10px' }}>
<div> {ActiveInkWidth()}</div>
<input
type="range"
defaultValue={ActiveInkWidth()}
min={1}
max={100}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
SetActiveInkWidth(e.target.value);
SelectionManager.Views()
.filter(i => StrCast(i.rootDoc.type) === DocumentType.INK)
.map(i => (i.rootDoc.strokeWidth = Number(e.target.value)));
}}
/>
</div>
</div>
);
}
}
|
