From 65ff6d515cd8102c3a4284244f8a84d356ba0c05 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 3 Jun 2020 15:58:12 -0500
Subject: fixed wrapped params except onResize

---
 src/client/views/nodes/ScriptingBox.scss |  7 ++--
 src/client/views/nodes/ScriptingBox.tsx  | 56 ++++++++++++++++++++++----------
 2 files changed, 42 insertions(+), 21 deletions(-)

(limited to 'src/client/views')

diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index ae2569704..32021e637 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -15,6 +15,8 @@
         position: absolute;
         z-index: 100;
         padding: 5px;
+        white-space: nowrap;
+        overflow: hidden;
     }
 
     .scriptingBox-inputDiv {
@@ -51,12 +53,11 @@
 
                 .rta {
                     position: relative;
-                    font-size: 12px;
                     width: 100%;
                     height: 100%;
                     margin-bottom: 60px !important;
                     overflow-y: scroll;
-                    font-size: 9px;
+                    overflow-x: hidden;
                 }
 
                 .rta__textarea {
@@ -75,7 +76,6 @@
                     margin-top: 0;
                     margin-bottom: 1em;
                     max-height: 100px;
-                    overflow-y: auto;
                 }
 
                 .rta__list {
@@ -87,6 +87,7 @@
                     box-shadow: 0 0 5px rgba(27, 31, 35, 0.1);
                     list-style: none;
                     overflow-y: scroll;
+                    overflow-x: hidden;
                 }
 
                 .rta__entity {
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index f6e7e375b..3c268b5cd 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -44,11 +44,14 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     @observable private _currWord: string = "";
     @observable private _suggestions: string[] = [];
     @observable private _paramSuggestion: boolean = false;
-    @observable private _scriptSuggestedParams: string = "";
+    @observable private _scriptSuggestedParams: any = "";
 
     @observable private _suggestionBoxX: number = 0;
     @observable private _suggestionBoxY: number = 0;
 
+    @observable private _suggestionRef: any = React.createRef();
+    @observable private _scriptTextRef: any = React.createRef();
+
     // 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()); }
@@ -469,27 +472,42 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         return this._scriptParams[indexF];
     }
 
+    @action
+    suggestionPos() {
+        const getCaretCoordinates = require('textarea-caret');
+        const This = this;
+        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);
+            let top = caret.top;
+            let left = caret.left;
+
+            const x = This.dataDoc.x;
+            const suggestionWidth = This._suggestionRef.current.offsetWidth;
+            const scriptWidth = This._scriptTextRef.current.offsetWidth;
+            if ((left + suggestionWidth) > (x + scriptWidth)) {
+                const diff = (left + suggestionWidth) - (x + scriptWidth);
+                left = left - diff;
+            }
+
+            runInAction(() => {
+                This._suggestionBoxX = left;
+                This._suggestionBoxY = top;
+            });
+        });
+    }
+
     @action
     keyHandler(e: any, pos: number) {
         console.log(e.key);
         if (e.key === "(") {
             console.log("hello");
-            const getCaretCoordinates = require('textarea-caret');
-
-            const This = this;
-            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);
-                let top = caret.top;
-                let left = caret.left;
-                runInAction(() => {
-                    This._suggestionBoxX = left;
-                    This._suggestionBoxY = top;
-                });
-            });
+            this.suggestionPos();
 
             this._scriptSuggestedParams = this.getSuggestedParams(pos);
 
+            //this._scriptSuggestedParams = <div> </div>;
+
             if (this._scriptSuggestedParams !== undefined && this._scriptSuggestedParams.length > 0) {
                 if (this.rawScript[pos - 2] !== "(") {
                     console.log("suggestion params");
@@ -536,7 +554,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     @computed({ keepAlive: true }) get renderScriptingBox() {
 
         trace();
-        return <div style={{ width: this.compileParams.length > 0 ? "70%" : "100%" }}>
+        return <div style={{ width: this.compileParams.length > 0 ? "70%" : "100%" }} ref={this._scriptTextRef}>
             <ReactTextareaAutocomplete className="ScriptingBox-textarea" style={{ resize: "none", height: "100%" }}
                 minChar={1}
                 placeholder="write your script here"
@@ -691,9 +709,11 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     // renders script UI if _applied = false and params UI if _applied = true
     render() {
         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}
+            <div className={`scriptingBox`} onContextMenu={this.specificContextMenu}
+                onPointerUp={this.suggestionPos}>
+                <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()}
                 </div>
-- 
cgit v1.2.3-70-g09d2