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
|
import { action, observable, computed } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { documentSchema } from "../../../new_fields/documentSchemas";
import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
import { ScriptField } from "../../../new_fields/ScriptField";
import { StrCast, ScriptCast, Cast } from "../../../new_fields/Types";
import { InteractionUtils } from "../../util/InteractionUtils";
import { CompileScript, isCompileError, ScriptParam } from "../../util/Scripting";
import { ViewBoxAnnotatableComponent } from "../DocComponent";
import { EditableView } from "../EditableView";
import { FieldView, FieldViewProps } from "../nodes/FieldView";
import "./ScriptingBox.scss";
import { OverlayView } from "../OverlayView";
import { DocumentIconContainer } from "./DocumentIcon";
import { List } from "../../../new_fields/List";
const ScriptingSchema = createSchema({});
type ScriptingDocument = makeInterface<[typeof ScriptingSchema, typeof documentSchema]>;
const ScriptingDocument = makeInterface(ScriptingSchema, documentSchema);
@observer
export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, ScriptingDocument>(ScriptingDocument) {
protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer | undefined;
public static LayoutString(fieldStr: string) { return FieldView.LayoutString(ScriptingBox, fieldStr); }
_overlayDisposer?: () => void;
@observable private _errorMessage: string = "";
@computed get rawScript() { return StrCast(this.dataDoc[this.props.fieldKey + "-rawScript"]); }
@computed get compileParams() { return Cast(this.dataDoc[this.props.fieldKey + "-params"], listSpec("string"), []); }
set rawScript(value) { this.dataDoc[this.props.fieldKey + "-rawScript"] = value; }
set compileParams(value) { this.dataDoc[this.props.fieldKey + "-params"] = value; }
@action
componentDidMount() {
this.rawScript = ScriptCast(this.dataDoc[this.props.fieldKey])?.script?.originalScript || this.rawScript;
}
componentWillUnmount() { this._overlayDisposer?.(); }
@action
onCompile = () => {
const params = this.compileParams.reduce((o: ScriptParam, p: string) => { o[p] = "any"; return o; }, {} as ScriptParam);
const result = CompileScript(this.rawScript, {
editable: true,
transformer: DocumentIconContainer.getTransformer(),
params,
typecheck: false
});
this._errorMessage = isCompileError(result) ? result.errors.map(e => e.messageText).join("\n") : "";
return this.dataDoc[this.props.fieldKey] = result.compiled ? new ScriptField(result) : undefined;
}
@action
onRun = () => {
this.onCompile()?.script.run({}, err => this._errorMessage = err.map((e: any) => e.messageText).join("\n"));
}
onFocus = () => {
this._overlayDisposer?.();
this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
}
render() {
const params = <EditableView
contents={this.compileParams.join(" ")}
display={"block"}
maxHeight={72}
height={35}
fontSize={28}
GetValue={() => ""}
SetValue={value => { this.compileParams = new List<string>(value.split(" ").filter(s => s !== " ")); return true; }}
/>;
return (
<div className="scriptingBox-outerDiv"
onWheel={e => this.props.isSelected(true) && e.stopPropagation()}>
<div className="scriptingBox-inputDiv"
onPointerDown={e => this.props.isSelected(true) && e.stopPropagation()} >
<textarea className="scriptingBox-textarea"
placeholder="write your script here"
onChange={e => this.rawScript = e.target.value}
value={this.rawScript}
onFocus={this.onFocus}
onBlur={e => this._overlayDisposer?.()} />
<div className="scriptingBox-errorMessage" style={{ background: this._errorMessage ? "red" : "" }}>{this._errorMessage}</div>
<div className="scriptingBox-params" >{params}</div>
</div>
{this.rootDoc.layout === "layout" ? <div></div> : (null)}
<div className="scriptingBox-toolbar">
<button className="scriptingBox-button" onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button>
<button className="scriptingBox-button" onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button>
</div>
</div>
);
}
}
|
