diff options
-rw-r--r-- | package-lock.json | 44 | ||||
-rw-r--r-- | src/.DS_Store | bin | 6148 -> 8196 bytes | |||
-rw-r--r-- | src/client/documents/Documents.ts | 5 | ||||
-rw-r--r-- | src/client/views/nodes/ScriptingBox.scss | 47 | ||||
-rw-r--r-- | src/client/views/nodes/ScriptingBox.tsx | 143 |
5 files changed, 199 insertions, 40 deletions
diff --git a/package-lock.json b/package-lock.json index 176d1f27e..ea60d2876 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5551,7 +5551,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5569,7 +5570,8 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "bindings": { "version": "1.5.0", @@ -5583,6 +5585,7 @@ "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5595,15 +5598,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5706,7 +5712,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5716,6 +5723,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5728,17 +5736,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5755,6 +5766,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -5810,7 +5822,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -5835,7 +5848,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5845,6 +5859,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5913,7 +5928,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5943,6 +5959,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5960,6 +5977,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5998,11 +6016,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } }, diff --git a/src/.DS_Store b/src/.DS_Store Binary files differindex 5b35884bd..942a5672b 100644 --- a/src/.DS_Store +++ b/src/.DS_Store diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 578d337d6..7b058d7e2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -653,6 +653,11 @@ export namespace Docs { } export function ButtonDocument(options?: DocumentOptions) { + // const btn = InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" }); + // btn.layoutKey = "layout_onClick"; + // btn.height = 250; + // btn.width = 200; + // btn.layout_onClick = ScriptingBox.LayoutString("onClick"); return InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" }); } diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss index 43695f00d..761a54e42 100644 --- a/src/client/views/nodes/ScriptingBox.scss +++ b/src/client/views/nodes/ScriptingBox.scss @@ -5,31 +5,58 @@ flex-direction: column; background-color: rgb(241, 239, 235); padding: 10px; + .scriptingBox-inputDiv { display: flex; flex-direction: column; height: calc(100% - 30px); + + .scriptingBox-wrapper { + height: 100%; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + + + .scriptingBox-textArea { + flex: 70; + width: 70%; + height: 100%; + box-sizing: border-box; + resize: none; + padding: 7px; + flex-grow: 100%; + } + + .scriptingBox-plist { + flex: 30; + width: 30%; + height: 100%; + box-sizing: border-box; + resize: none; + padding: 7px; + flex-grow: 100%; + } + } + .scriptingBox-errorMessage { overflow: auto; } + .scripting-params { background: "beige"; } - .scriptingBox-textArea { - width: 100%; - height: 100%; - box-sizing: border-box; - resize: none; - padding: 7px; - } } .scriptingBox-toolbar { width: 100%; height: 30px; + .scriptingBox-button { - width: 50% + width: 50%; + resize: auto; + } } -} - +}
\ No newline at end of file diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index c607d6614..0d6f688c8 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -19,18 +19,23 @@ 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; + rowProps: any; public static LayoutString(fieldStr: string) { return FieldView.LayoutString(ScriptingBox, fieldStr); } _overlayDisposer?: () => void; @observable private _errorMessage: string = ""; + @observable private paramNum: number = -1; @computed get rawScript() { return StrCast(this.dataDoc[this.props.fieldKey + "-rawScript"], StrCast(this.layoutDoc[this.props.fieldKey + "-rawScript"])); } @computed get compileParams() { return Cast(this.dataDoc[this.props.fieldKey + "-params"], listSpec("string"), Cast(this.layoutDoc[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 @@ -41,21 +46,73 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc componentWillUnmount() { this._overlayDisposer?.(); } @action + onFinish = () => { + const result = CompileScript(this.rawScript, {}); + this.rootDoc.layoutKey = "layout"; + this.rootDoc.height = 50; + this.rootDoc.width = 100; + this.props.Document.documentText = this.rawScript; + } + + @action + onError = (error: any) => { + for (const entry of error) { + this._errorMessage = this._errorMessage + " " + entry.messageText; + } + } + + @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; 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(), + editable: false, + transformer: undefined, params, - typecheck: false + typecheck: true }); - this._errorMessage = isCompileError(result) ? result.errors.map(e => e.messageText).join("\n") : ""; - return this.dataDoc[this.props.fieldKey] = result.compiled ? new ScriptField(result) : undefined; + this._errorMessage = ""; + if (result.compiled) { + this._errorMessage = ""; + this.props.Document.data = new ScriptField(result); + } + else { + this.onError(result.errors); + } + this.props.Document.documentText = this.rawScript; } @action onRun = () => { - this.onCompile()?.script.run({}, err => this._errorMessage = err.map((e: any) => e.messageText).join("\n")); + const params = this.compileParams.reduce((o: ScriptParam, p: string) => { o[p] = "any"; return o; }, {} as ScriptParam); + const result = CompileScript(this.rawScript, { + editable: false, + transformer: undefined, + params, + typecheck: true + }); + this._errorMessage = ""; + if (result.compiled) { + // this automatically saves + result.run({}, (err: any) => { + this._errorMessage = ""; + this.onError(err); + }); + this.props.Document.data = new ScriptField(result); + } + else { + this.onError(result.errors); + } + this.props.Document.documentText = this.rawScript; + //this.onCompile()?.script.run({}, err => this._errorMessage = err.map((e: any) => e.messageText).join("\n")); } onFocus = () => { @@ -63,36 +120,86 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 }); } + keyPressed(event: { key: string; }) { + if (event.key === "Enter") { + + } + } + render() { + //this.compileParams = new List<string>(); + const params = <EditableView - contents={this.compileParams.join(" ")} + contents={""} display={"block"} maxHeight={72} height={35} - fontSize={28} + fontSize={22} GetValue={() => ""} - SetValue={value => { this.compileParams = new List<string>(value.split(" ").filter(s => s !== " ")); return true; }} + SetValue={value => { + if (value !== "" && value !== " ") { + this.paramNum++; + const par = this.compileParams; + this.compileParams = new List<string>(value.split(";").filter(s => s !== " ")); + this.compileParams.push.apply(this.compileParams, par); + return true; + } + return false; + }} />; + + const listParams = this.compileParams.map((parameter) => + <EditableView + contents={parameter} + display={"block"} + maxHeight={72} + height={35} + fontSize={12} + GetValue={() => parameter} + SetValue={value => { + if (value !== "" && value !== " ") { + parameter = value; + } return false; + }} + /> + ); + 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-wrapper"> + + <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?.()} + style={{ width: this.compileParams.length > 0 ? "70%" : "100%" }} /> + + {this.compileParams.length > 0 ? <div className="scriptingBox-plist" style={{ width: "30%" }}> + {listParams} + </div> : null} + </div> + <div className="scriptingBox-params" onKeyPress={this.keyPressed}>{params}</div> <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> + <button className="scriptingBox-button" style={{ width: this.rootDoc.layoutKey === "layout_onClick" ? "33%" : "50%" }} + onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button> + <button className="scriptingBox-button" style={{ width: this.rootDoc.layoutKey === "layout_onClick" ? "33%" : "50%" }} + onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button> + {this.rootDoc.layoutKey === "layout_onClick" ? <button className="scriptingBox-button" + style={{ width: this.rootDoc.layoutKey === "layout_onClick" ? "33%" : "50%" }} + onPointerDown={e => { this.onFinish(); e.stopPropagation(); }}>Finish</button> : null} </div> </div> ); } + } |