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
|
import EquationEditor from 'equation-editor-react';
import functionPlot from "function-plot";
import { observer } from 'mobx-react';
import * as React from 'react';
import { documentSchema } from '../../../fields/documentSchemas';
import { createSchema, makeInterface } from '../../../fields/Schema';
import { StrCast } from '../../../fields/Types';
import { TraceMobx } from '../../../fields/util';
import { ViewBoxBaseComponent } from '../DocComponent';
import { FieldView, FieldViewProps } from './FieldView';
import './LabelBox.scss';
import { DocListCast } from '../../../fields/Doc';
import { computed } from 'mobx';
const EquationSchema = createSchema({});
type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>;
const EquationDocument = makeInterface(EquationSchema, documentSchema);
@observer
export class FunctionPlotBox extends ViewBoxBaseComponent<FieldViewProps, EquationDocument>(EquationDocument) {
public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FunctionPlotBox, fieldKey); }
public static GraphCount = 0;
_ref: React.RefObject<EquationEditor> = React.createRef();
_plot: any;
_plotId = "";
constructor(props: any) {
super(props);
this._plotId = "graph" + FunctionPlotBox.GraphCount++;
}
createGraph = (ele: HTMLDivElement) => {
let width = this.props.PanelWidth();
let height = this.props.PanelHeight();
const fn = StrCast(DocListCast(this.dataDoc.data).lastElement()?.text, "x^2").replace(/\\frac\{(.*)\}\{(.*)\}/, "($1/$2)");
console.log("Graphing:" + fn);
try {
this._plot = functionPlot({
target: "#" + ele.id,
width,
height,
yAxis: { domain: [-1, 9] },
grid: true,
data: [
{
fn,
// derivative: { fn: "2 * x", updateOnMouseMove: true }
}
]
});
} catch (e) {
console.log(e);
}
}
@computed get theGraph() {
const fn = StrCast(DocListCast(this.dataDoc.data).lastElement()?.text, "x^2");
return <div id={`${this._plotId}`} ref={r => r && this.createGraph(r)} style={{ position: "absolute", width: "100%", height: "100%" }}
onPointerDown={e => e.stopPropagation()} />;
}
render() {
TraceMobx();
return (<div
style={{
pointerEvents: !this.active() ? "all" : undefined,
width: this.props.PanelWidth(),
height: this.props.PanelHeight()
}}
>
{this.theGraph}
<div style={{
display: this.props.isSelected() ? "none" : undefined, position: "absolute", width: "100%", height: "100%",
pointerEvents: "all"
}} />
</div>);
}
}
|
