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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import EquationEditor from 'equation-editor-react';
import { action, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { WidthSym } from '../../../fields/Doc';
import { documentSchema } from '../../../fields/documentSchemas';
import { Id } from '../../../fields/FieldSymbols';
import { createSchema, makeInterface } from '../../../fields/Schema';
import { NumCast, StrCast } from '../../../fields/Types';
import { TraceMobx } from '../../../fields/util';
import { Docs } from '../../documents/Documents';
import { ViewBoxBaseComponent } from '../DocComponent';
import { LightboxView } from '../LightboxView';
import { FieldView, FieldViewProps } from './FieldView';
import './EquationBox.scss';
const EquationSchema = createSchema({});
type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>;
const EquationDocument = makeInterface(EquationSchema, documentSchema);
@observer
export class EquationBox extends ViewBoxBaseComponent<FieldViewProps, EquationDocument>(EquationDocument) {
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(EquationBox, fieldKey); }
public static SelectOnLoad: string = "";
_ref: React.RefObject<EquationEditor> = React.createRef();
componentDidMount() {
if (EquationBox.SelectOnLoad === this.rootDoc[Id] && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath()))) {
this.props.select(false);
this._ref.current!.mathField.focus();
this._ref.current!.mathField.select();
}
reaction(() => StrCast(this.dataDoc.text),
text => {
if (text && text !== this._ref.current!.mathField.latex()) {
this._ref.current!.mathField.latex(text);
}
});
reaction(() => this.props.isSelected(),
selected => {
if (this._ref.current) {
if (selected) this._ref.current.element.current.children[0].addEventListener("keydown", this.keyPressed, true);
else this._ref.current.element.current.children[0].removeEventListener("keydown", this.keyPressed);
}
}, { fireImmediately: true });
}
plot: any;
@action
keyPressed = (e: KeyboardEvent) => {
const _height = Number(getComputedStyle(this._ref.current!.element.current).height.replace("px", ""));
const _width = Number(getComputedStyle(this._ref.current!.element.current).width.replace("px", ""));
if (e.key === "Enter") {
const nextEq = Docs.Create.EquationDocument({
title: "# math", text: StrCast(this.dataDoc.text), _width, _height: 25,
x: NumCast(this.layoutDoc.x), y: NumCast(this.layoutDoc.y) + _height + 10
});
EquationBox.SelectOnLoad = nextEq[Id];
this.props.addDocument?.(nextEq);
e.stopPropagation();
}
if (e.key === "Tab") {
const graph = Docs.Create.FunctionPlotDocument([this.rootDoc], {
x: NumCast(this.layoutDoc.x) + this.layoutDoc[WidthSym](),
y: NumCast(this.layoutDoc.y),
_width: 400, _height: 300, backgroundColor: "white"
});
this.props.addDocument?.(graph);
e.stopPropagation();
}
if (e.key === "Backspace" && !this.dataDoc.text) this.props.removeDocument?.(this.rootDoc);
}
onChange = (str: string) => {
this.dataDoc.text = str;
const style = this._ref.current && getComputedStyle(this._ref.current.element.current);
if (style) {
const _height = Number(style.height.replace("px", ""));
const _width = Number(style.width.replace("px", ""));
this.layoutDoc._width = Math.max(35, _width);
this.layoutDoc._height = Math.max(25, _height);
}
}
render() {
TraceMobx();
const scale = (this.props.scaling?.() || 1) * NumCast(this.layoutDoc._viewScale, 1);
return (<div className="equationBox-cont"
onPointerDown={e => !e.ctrlKey && e.stopPropagation()}
style={{
transform: `scale(${scale})`,
width: `${100 / scale}%`,
height: `${100 / scale}%`,
pointerEvents: !this.props.isSelected() ? "none" : undefined,
}}
onKeyDown={e => e.stopPropagation()}
>
<EquationEditor ref={this._ref}
value={this.dataDoc.text || "x"}
spaceBehavesLikeTab={true}
onChange={this.onChange}
autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
autoOperatorNames="sin cos tan" />
</div>);
}
}
|
