fixed wrapped params except onResize

5 files changed, 50 insertions, 25 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 4c30b4c03..3dcb484be 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -736,7 +736,9 @@ export class CurrentUserUtils {
     }
 }
 
-Scripting.addGlobal("setupMobileInkingDoc", function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); });
+Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); },
+    "initializes the Mobile inking document", "{ userDoc: Doc }");
 Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); },
     "initializes the Mobile upload document", "{ userDoc: Doc }");
-Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); });
\ No newline at end of file
+Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); },
+    "creates a new workspace when called");
\ No newline at end of file
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts
index 752c1cfc5..785e087f9 100644
--- a/src/client/util/DropConverter.ts
+++ b/src/client/util/DropConverter.ts
@@ -76,4 +76,5 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) {
         data.droppedDocuments[i] = dbox;
     });
 }
-Scripting.addGlobal(function convertToButtons(dragData: any) { convertDropDataToButtons(dragData as DragManager.DocumentDragData); });
\ No newline at end of file
+Scripting.addGlobal(function convertToButtons(dragData: any) { convertDropDataToButtons(dragData as DragManager.DocumentDragData); },
+    "converts the dropped data to buttons", "{ dragData: any }");
\ No newline at end of file
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 8e6ccf098..9b20af4cb 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -211,4 +211,5 @@ export class LinkManager {
     }
 }
 
-Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); });
\ No newline at end of file
+Scripting.addGlobal(function links(doc: any) { return new List(LinkManager.Instance.getAllRelatedLinks(doc)); },
+    "creates a link to inputted document", "{ doc: any }");
\ No newline at end of file
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()); }
@@ -470,26 +473,41 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
     }
 
     @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>