From 7f88031669446dd09ad5d149d91d8d6d01940560 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 2 Jun 2020 16:43:36 -0500
Subject: hovering params and little restructuring

---
 src/client/views/nodes/ScriptingBox.scss |  13 +++-
 src/client/views/nodes/ScriptingBox.tsx  | 101 +++++++++++++++++++++++--------
 2 files changed, 89 insertions(+), 25 deletions(-)

(limited to 'src/client')

diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index 14106dce2..edf79b38e 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -6,6 +6,17 @@
     background-color: rgb(241, 239, 235);
     padding: 10px;
 
+    .boxed {
+        border: 1px solid black;
+        background-color: rgb(212, 198, 179);
+        width: auto;
+        height: auto;
+        font-size: 12px;
+        position: absolute;
+        z-index: 100;
+        padding: 5px;
+    }
+
     .scriptingBox-inputDiv {
         display: flex;
         flex-direction: column;
@@ -88,7 +99,7 @@
                 .rta__entity:hover {
                     cursor: pointer;
                 }
-                
+
                 .rta__entity>* {
                     padding-left: 4px;
                     padding-right: 4px;
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index 10f414821..18a9df9b4 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -43,6 +43,11 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     @observable private _scriptGlobals: any = Scripting.getGlobalObj();
     @observable private _currWord: string = "";
     @observable private _suggestions: string[] = [];
+    @observable private _paramSuggestion: boolean = false;
+    @observable private _scriptSuggestedParams: string = "";
+
+    @observable private _suggestionBoxX: number = 0;
+    @observable private _suggestionBoxY: number = 0;
 
     // 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()); }
@@ -446,9 +451,74 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         return value;
     }
 
+    getSuggestedParams(pos: number) {
+        const firstScript = this.rawScript.slice(0, pos);
+        const indexP = firstScript.lastIndexOf(".");
+        const indexS = firstScript.lastIndexOf(" ");
+        let func = "";
+        if (indexP > indexS) {
+            func = firstScript.slice(indexP + 1, firstScript.length + 1);
+        } else {
+            func = firstScript.slice(indexS + 1, firstScript.length + 1);
+        }
+
+        console.log(func);
+
+        const indexF = this._scriptKeys.indexOf(func);
+
+        return this._scriptParams[indexF];
+    }
+
+    @action
+    keyHandler(e: any, pos: number) {
+        console.log(e.key);
+        if (e.key === "(") {
+            console.log("hello");
+            const getCaretCoordinates = require('textarea-caret');
+
+            let top = 0;
+            let left = 0;
+            document.querySelector('textarea')?.addEventListener('input', function () {
+                const caret = getCaretCoordinates(this, this.selectionEnd);
+                console.log('(top, left, height) = (%s, %s, %s)', caret.top, caret.left, caret.height);
+                top = caret.top;
+                left = caret.left;
+            });
+            this._suggestionBoxX = left;
+            this._suggestionBoxY = top;
+
+            this._scriptSuggestedParams = this.getSuggestedParams(pos);
+
+            if (this._scriptSuggestedParams !== undefined && this._scriptSuggestedParams.length > 0) {
+                this._paramSuggestion = true;
+            }
+        } else if (e.key === ")") {
+            this._paramSuggestion = false;
+        }
+    }
+
+    @action
+    handlePosChange(number: any) {
+        this.caretPos = number;
+        if (this.caretPos === 0) {
+            this.rawScript = " " + this.rawScript;
+        } else if (this._spaced) {
+            this._spaced = false;
+            if (this.rawScript[this.caretPos - 1] === " ") {
+                this.rawScript = this.rawScript.slice(0, this.caretPos - 1) +
+                    this.rawScript.slice(this.caretPos, this.rawScript.length);
+            }
+        }
+
+        // if (this.rawScript[this.rawScript.length - 1] !== "(") {
+        //     this._paramSuggestion = false;
+        // }
+    }
+
     caretPos = 0;
     textarea: any;
     @computed({ keepAlive: true }) get renderScriptingBox() {
+
         trace();
         return <div style={{ width: this.compileParams.length > 0 ? "70%" : "100%" }}>
             <ReactTextareaAutocomplete className="ScriptingBox-textarea" style={{ resize: "none", height: "100%" }}
@@ -462,11 +532,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
                 loadingComponent={() => <span>Loading</span>}
 
                 trigger={{
-                    "(": {
-                        dataProvider: (token: any) => this.handleFunc(this.caretPos),
-                        component: ({ entity: value }) => <div>{value}</div>,
-                        output: (item: any) => "(" + this.returnParam(item) + ")",
-                    },
                     " ": {
                         dataProvider: (token: any) => this.handleToken(token),
                         component: ({ entity: value }) =>
@@ -483,7 +548,10 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
                                     </>
                                 }
                             </div>,
-                        output: (item: any, trigger) => trigger + item.trim(),
+                        output: (item: any, trigger) => {
+                            this._spaced = true;
+                            return trigger + item.trim();
+                        },
                     },
                     ".": {
                         dataProvider: (token: any) => this.handleToken(token),
@@ -508,25 +576,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
                     }
                 }}
 
-                onCaretPositionChange={(number: any) => {
-                    this.caretPos = number;
-                    if (this.caretPos === 0) {
-                        this.rawScript = " " + this.rawScript;
-                    } else if (this._spaced) {
-                        this._spaced = false;
-                        if (this.rawScript[this.rawScript.length - 1] === " ") {
-                            this.rawScript = this.rawScript.slice(0, this.rawScript.length - 1);
-                        }
-                    }
-                }}
-
-            // onClick={() => this.rawScript = this.rawScript[this.rawScript.length - 1]}
+                onKeyPress={(e) => this.keyHandler(e, this.caretPos)}
 
-            // onKeyPress={e => {
-            //     if (e.key === "Enter" || e.key === "Tab") {
-            //         this.rawScript = this.rawScript[this.rawScript.length - 1];
-            //     }
-            // }}
+                onCaretPositionChange={(number: any) => this.handlePosChange(number)}
             />
         </div>;
     }
@@ -625,6 +677,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         return (
             <div className={`scriptingBox`} onContextMenu={this.specificContextMenu}>
                 <div className="scriptingBox-outerDiv" onWheel={e => this.props.isSelected(true) && e.stopPropagation()}>
+                    {this._paramSuggestion ? <div className="boxed" style={{ left: this._suggestionBoxX + 20, top: this._suggestionBoxY - 15 }}> {this._scriptSuggestedParams} </div> : null}
                     {!this._applied ? this.renderScriptingInputs : this.renderParamsInputs()}
                     {!this._applied ? this.renderScriptingTools() : this.renderParamsTools()}
                 </div>
-- 
cgit v1.2.3-70-g09d2