added function UI

4 files changed, 126 insertions, 11 deletions

diff --git a/src/client/util/ScriptManager.ts b/src/client/util/ScriptManager.ts
index 5bddb44ca..c87fdf5fd 100644
--- a/src/client/util/ScriptManager.ts
+++ b/src/client/util/ScriptManager.ts
@@ -2,7 +2,8 @@ import { Doc, DocListCast } from "../../fields/Doc";
 import { List } from "../../fields/List";
 import { Docs } from "../documents/Documents";
 import { Scripting, ScriptParam } from "./Scripting";
-import { StrCast } from "../../fields/Types";
+import { StrCast, Cast } from "../../fields/Types";
+import { listSpec } from "../../fields/Schema";
 
 
 export class ScriptManager {
@@ -38,6 +39,10 @@ export class ScriptManager {
     }
 
     public deleteScript(scriptDoc: Doc): boolean {
+
+        if (scriptDoc.funcName) {
+            Scripting.removeGlobal(StrCast(scriptDoc.funcName));
+        }
         const scriptList = ScriptManager.Instance.getAllScripts();
         const index = ScriptManager.Instance.getAllScripts().indexOf(scriptDoc);
         if (index > -1) {
@@ -55,9 +60,23 @@ const scriptList = ScriptManager.Instance.getAllScripts();
 
 scriptList.forEach((scriptDoc: Doc) => {
 
-    const p = scriptDoc.compileParams?.reduce((o: ScriptParam, p: string) => { o[p] = "any"; return o; }, {} as ScriptParam);
+    const params = Cast(scriptDoc.compileParams, listSpec("string"), []);
+    const p = params.reduce((o: ScriptParam, p: string) => { o[p] = "any"; return o; }, {} as ScriptParam);
     const f = new Function(...Array.from(Object.keys(p)), StrCast(scriptDoc.rawScript));
 
-    Scripting.addGlobal(f, StrCast(scriptDoc.description), StrCast(p), StrCast(scriptDoc.name));
+    let parameters = "(";
+    params.forEach((element: string, i: number) => {
+        if (i === params.length - 1) {
+            parameters = parameters + element + ")";
+        } else {
+            parameters = parameters + element + ", ";
+        }
+    });
+
+    if (parameters === "(") {
+        Scripting.addGlobal(f, StrCast(scriptDoc.description), StrCast(scriptDoc.funcName));
+    } else {
+        Scripting.addGlobal(f, StrCast(scriptDoc.description), parameters, StrCast(scriptDoc.funcName));
+    }
 
 });
\ No newline at end of file
diff --git a/src/client/util/Scripting.ts b/src/client/util/Scripting.ts
index 5619b22b0..16012eb5a 100644
--- a/src/client/util/Scripting.ts
+++ b/src/client/util/Scripting.ts
@@ -65,7 +65,11 @@ export namespace Scripting {
                 obj = [nameOrGlobal];
                 obj.push(global);
                 if (params) {
-                    obj.push(params);
+                    if (params.indexOf("(") > 0) {
+                        obj.push(params);
+                    } else {
+                        n = params;
+                    }
                 }
                 if (name) {
                     n = name;
@@ -93,6 +97,14 @@ export namespace Scripting {
         scriptingGlobals = globals;
     }
 
+    export function removeGlobal(name: string) {
+        if (_scriptingGlobals.hasKey(name)) {
+            delete _scriptingGlobals.container[name];
+            return true;
+        }
+        return false;
+    }
+
     export function resetScriptingGlobals() {
         scriptingGlobals = _scriptingGlobals;
     }
diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index f28a2fcef..1e4dc4868 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -35,6 +35,8 @@
             flex-direction: row;
             justify-content: center;
 
+
+
             .scriptingBox-textArea {
                 flex: 70;
                 height: 100%;
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index 6f94ae8f9..2e7b544d2 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -39,6 +39,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
 
     @observable private _errorMessage: string = "";
     @observable private _applied: boolean = false;
+    @observable private _function: boolean = false;
     @observable private _hovered: boolean = false;
     @observable private _spaced: boolean = false;
     @observable private _scriptKeys: any = Scripting.getGlobals();
@@ -60,6 +61,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     @observable private _scriptSuggestedParams: any = "";
     @observable private _scriptParamsText: any = "";
 
+    @observable private _functionName: any = "";
+    @observable private _functionDescription: any = "";
+
     // vars included in fields that store parameters types and names and the script itself
     @computed({ keepAlive: true }) get paramsNames() { return this.compileParams.map(p => p.split(":")[0].trim()); }
     @computed({ keepAlive: true }) get paramsTypes() { return this.compileParams.map(p => p.split(":")[1].trim()); }
@@ -213,20 +217,46 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
 
     @action
     onEdit = () => {
+        this._errorMessage = "";
         this._applied = false;
+        this._function = false;
     }
 
     @action
     onSave = () => {
         if (this.onCompile()) {
-            this.dataDoc.funcName = "testingTitle";
-            this.dataDoc.descripition = "description test";
-            ScriptManager.Instance.addScript(this.dataDoc);
+            this._function = true;
         } else {
             this._errorMessage = "Can not save script, does not compile";
         }
     }
 
+    @action
+    onCreate = () => {
+
+        if (this._functionName.length === 0) {
+            this._errorMessage = "Must enter a function name";
+            return false;
+        }
+
+        if (this._functionName.indexOf(" ") > 0) {
+            this._errorMessage = "Name can not include spaces";
+            return false;
+        }
+
+        this.dataDoc.funcName = this._functionName;
+        this.dataDoc.descripition = this._functionDescription;
+
+        ScriptManager.Instance.deleteScript(this.dataDoc);
+
+        this.dataDoc.funcName = "testingTitle";
+        this.dataDoc.descripition = "description test";
+
+        ScriptManager.Instance.addScript(this.dataDoc);
+
+        console.log("created");
+    }
+
     // overlays document numbers (ex. d32) over all documents when clicked on
     onFocus = () => {
         this._overlayDisposer?.();
@@ -270,6 +300,40 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         !existingOptions && ContextMenu.Instance.addItem({ description: "Options...", subitems: options, icon: "hand-point-right" });
     }
 
+    @action
+    renderFunctionInputs() {
+
+        const descriptionInput =
+            <textarea
+                onChange={e => this._functionDescription = e.target.value}
+                placeholder="enter description here"
+                value={this._functionDescription}
+                style={{ height: "40%", width: "100%" }}
+            />;
+
+        const nameInput =
+            <textarea
+                onChange={e => this._functionName = e.target.value}
+                placeholder="enter name here"
+                value={this._functionName}
+                style={{ height: "40%", width: "100%" }}
+            />;
+
+        return <div className="scriptingBox-inputDiv" onPointerDown={e => this.props.isSelected() && e.stopPropagation()} >
+            <div className="scriptingBox-wrapper">
+                <div className="container">
+                    <div className="child" style={{ textAlign: "center", display: "inline-block" }}> Enter a name for this function: </div>
+                    <div className="child">{nameInput}</div>
+                    <div className="child" style={{ textAlign: "center", display: "inline-block" }}> Enter a description of this function: </div>
+                    <div className="child">{descriptionInput}</div>
+                </div>
+            </div>
+            {this.renderErrorMessage()}
+        </div>;
+    }
+
+
+
     renderErrorMessage() {
         return !this._errorMessage ? (null) : <div className="scriptingBox-errorMessage"> {this._errorMessage} </div>;
     }
@@ -485,12 +549,14 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     suggestionPos() {
         const getCaretCoordinates = require('textarea-caret');
         const This = this;
+        //if (!This._applied && !This._function) {
         document.querySelector('textarea')?.addEventListener("input", function () {
             const caret = getCaretCoordinates(this, this.selectionEnd);
             This._selection = this;
             This._selectionEnd = this.selectionEnd;
             This.resetSuggestionPos(caret);
         });
+        //}
     }
 
     @action
@@ -698,6 +764,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
                             </div>
                         </div>)}
                 </div>}
+            {this.renderErrorMessage()}
         </div>;
     }
 
@@ -705,7 +772,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     renderParamsTools() {
         const buttonStyle = "scriptingBox-button" + (this.rootDoc.layoutKey === "layout_onClick" ? "third" : "");
         return <div className="scriptingBox-toolbar">
-            {this.renderErrorMessage()}
             <button className={buttonStyle} onPointerDown={e => { this.onEdit(); e.stopPropagation(); }}>Edit</button>
             <button className={buttonStyle} onPointerDown={e => { this.onRun(); e.stopPropagation(); }}>Run</button>
             {this.rootDoc.layoutKey !== "layout_onClick" ? (null) :
@@ -713,16 +779,32 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         </div>;
     }
 
+    // toolbar (with edit and run buttons and error message) for params UI
+    renderFunctionTools() {
+        const buttonStyle = "scriptingBox-button" + (this.rootDoc.layoutKey === "layout_onClick" ? "third" : "");
+        return <div className="scriptingBox-toolbar">
+            <button className={buttonStyle} onPointerDown={e => { this.onEdit(); e.stopPropagation(); }}>Edit</button>
+            <button className={buttonStyle} onPointerDown={e => { this.onCreate(); e.stopPropagation(); }}>Create Function</button>
+            {this.rootDoc.layoutKey !== "layout_onClick" ? (null) :
+                <button className={buttonStyle} onPointerDown={e => { this.onFinish(); e.stopPropagation(); }}>Finish</button>}
+        </div>;
+    }
+
     // renders script UI if _applied = false and params UI if _applied = true
     render() {
         return (
             <div className={`scriptingBox`} onContextMenu={this.specificContextMenu}
-                onPointerUp={this.suggestionPos}>
+                onPointerUp={!this._function ? this.suggestionPos : undefined}>
                 <div className="scriptingBox-outerDiv"
                     onWheel={e => this.props.isSelected(true) && e.stopPropagation()}>
                     {this._paramSuggestion ? <div className="boxed" ref={this._suggestionRef} style={{ left: this._suggestionBoxX + 20, top: this._suggestionBoxY - 15, display: "inline" }}> {this._scriptSuggestedParams} </div> : null}
-                    {!this._applied ? this.renderScriptingInputs : this.renderParamsInputs()}
-                    {!this._applied ? this.renderScriptingTools() : this.renderParamsTools()}
+                    {!this._applied && !this._function ? this.renderScriptingInputs : null}
+                    {this._applied && !this._function ? this.renderParamsInputs() : null}
+                    {!this._applied && this._function ? this.renderFunctionInputs() : null}
+
+                    {!this._applied && !this._function ? this.renderScriptingTools() : null}
+                    {this._applied && !this._function ? this.renderParamsTools() : null}
+                    {!this._applied && this._function ? this.renderFunctionTools() : null}
                 </div>
             </div>
         );