cleaned up some scriptingBox code -- added parameters

4 files changed, 52 insertions, 44 deletions

diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index f97d91d10..57d22eaf8 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -24,6 +24,8 @@ export interface ScriptError {
 
 export type ScriptResult = ScriptSucccess | ScriptError;
 
+export type ScriptParam = { [name: string]: string };
+
 export interface CompiledScript {
     readonly compiled: true;
     readonly originalScript: string;
@@ -37,6 +39,12 @@ export interface CompileError {
 }
 
 export type CompileResult = CompiledScript | CompileError;
+export function isCompileError(toBeDetermined: CompileResult): toBeDetermined is CompileError {
+    if ((toBeDetermined as CompileError).errors) {
+        return true
+    }
+    return false
+}
 
 export namespace Scripting {
     export function addGlobal(global: { name: string }): void;
diff --git a/src/client/views/ScriptBox.tsx b/src/client/views/ScriptBox.tsx
index 0352ddaca..6735a8b54 100644
--- a/src/client/views/ScriptBox.tsx
+++ b/src/client/views/ScriptBox.tsx
@@ -43,9 +43,7 @@ export class ScriptBox extends React.Component<ScriptBoxProps> {
 
     overlayDisposer?: () => void;
     onFocus = () => {
-        if (this.overlayDisposer) {
-            this.overlayDisposer();
-        }
+        this.overlayDisposer?.();
         this.overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
     }
 
diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index f31c72bb2..678a1a22d 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -13,6 +13,9 @@
         .scriptingBox-errorMessage {
             overflow: auto;
         }
+        .scripting-params {
+            background: "beige";
+        }
         .scriptingBox-textArea {
             width: 100%;
             height: 100%;
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index 74d9c2e94..93956592f 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -1,22 +1,21 @@
 import { action, observable, computed } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Opt } from "../../../new_fields/Doc";
 import { documentSchema } from "../../../new_fields/documentSchemas";
-import { createSchema, makeInterface } from "../../../new_fields/Schema";
+import { createSchema, makeInterface, listSpec } from "../../../new_fields/Schema";
 import { ScriptField } from "../../../new_fields/ScriptField";
-import { StrCast, ScriptCast } from "../../../new_fields/Types";
-import { returnTrue } from "../../../Utils";
+import { StrCast, ScriptCast, Cast } from "../../../new_fields/Types";
 import { InteractionUtils } from "../../util/InteractionUtils";
-import { CompileScript } from "../../util/Scripting";
+import { CompileScript, isCompileError, ScriptParam } from "../../util/Scripting";
 import { DocAnnotatableComponent } 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({
-});
-
+const ScriptingSchema = createSchema({});
 type ScriptingDocument = makeInterface<[typeof ScriptingSchema, typeof documentSchema]>;
 const ScriptingDocument = makeInterface(ScriptingSchema, documentSchema);
 
@@ -25,9 +24,14 @@ export class ScriptingBox extends DocAnnotatableComponent<FieldViewProps, Script
     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 + "-raw"]); }
+    @computed get compileParams() { return Cast(this.dataDoc[this.props.fieldKey + "-params"], listSpec("string"), []); }
     set rawScript(value) { this.dataDoc[this.props.fieldKey + "-raw"] = value; }
+    set compileParams(value) { this.dataDoc[this.props.fieldKey + "-params"] = value; }
 
     @action
     componentDidMount() {
@@ -35,56 +39,51 @@ export class ScriptingBox extends DocAnnotatableComponent<FieldViewProps, Script
     }
 
     @action
-    onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        this.rawScript = e.target.value;
-    }
-
-    @action
-    onError = (error: any) => {
-        this._errorMessage = (error as any).map((e: any) => e.messageText).join(" ");
-    }
-
-    @action
     onCompile = () => {
-        const result = CompileScript(this.rawScript, {});
-        this._errorMessage = "";
-        if (result.compiled) {
-            this._errorMessage = "";
-            this.dataDoc[this.props.fieldKey] = new ScriptField(result);
-        }
-        else {
-            this.dataDoc[this.props.fieldKey] = undefined;
-            this.onError(result.errors);
-        }
+        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
+        });
+        this.dataDoc[this.props.fieldKey] = result.compiled ? new ScriptField(result) : undefined;
+        this._errorMessage = isCompileError(result) ? result.errors.map(e => e.messageText).join("\n") : "";
+        return ScriptCast(this.dataDoc[this.props.fieldKey]);
     }
 
     @action
     onRun = () => {
-        this.onCompile();
-        ScriptCast(this.dataDoc[this.props.fieldKey])?.script.run({},
-            (err: any) => {
-                this._errorMessage = "";
-                this.onError(err);
-            });
+        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() {
-        let onFocus: Opt<() => void> = undefined, onBlur: Opt<() => void> = undefined;
         const params = <EditableView
-            contents={""}
+            contents={this.compileParams.join(" ")}
             display={"block"}
             maxHeight={72}
             height={35}
             fontSize={28}
             GetValue={() => ""}
-            SetValue={returnTrue}
+            SetValue={value => { this.compileParams = new List<string>(value.split(" ").filter(s => s !== " ")); return true; }}
         />;
         return (
-            <div className="scriptingBox-outerDiv" onPointerDown={(e) => this.props.isSelected() && e.stopPropagation()} onWheel={(e) => this.props.isSelected() && e.stopPropagation()}>
+            <div className="scriptingBox-outerDiv"
+                onPointerDown={e => this.props.isSelected(true) && e.stopPropagation()}
+                onWheel={e => this.props.isSelected(true) && e.stopPropagation()}>
                 <div className="scriptingBox-inputDiv" >
-                    <textarea className="scriptingBox-textarea" placeholder="write your script here" onChange={this.onChange} value={this.rawScript} onFocus={onFocus} onBlur={onBlur} />
-                    <div className="scriptingBox-errorMessage">{this._errorMessage}</div>
-                    <div style={{ background: "beige" }} >{params}</div>
+                    <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>
                 <div className="scriptingBox-toolbar">
                     <button className="scriptingBox-button" onPointerDown={e => { this.onCompile(); e.stopPropagation(); }}>Compile</button>