Merge branch 'script_documents' of https://github.com/browngraphicslab/Dash-Web into script_documents

2 files changed, 46 insertions, 65 deletions

diff --git a/src/client/views/nodes/ScriptingBox.scss b/src/client/views/nodes/ScriptingBox.scss
index 6113efbb5..14106dce2 100644
--- a/src/client/views/nodes/ScriptingBox.scss
+++ b/src/client/views/nodes/ScriptingBox.scss
@@ -26,7 +26,6 @@
 
             .scriptingBox-textArea {
                 flex: 70;
-                width: 70%;
                 height: 100%;
                 box-sizing: border-box;
                 resize: none;
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index e45a3a38b..245081c47 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Doc } from "../../../fields/Doc";
@@ -32,7 +32,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
 
     private dropDisposer?: DragManager.DragDropDisposer;
     protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer | undefined;
-    rta: any;
     public static LayoutString(fieldStr: string) { return FieldView.LayoutString(ScriptingBox, fieldStr); }
     private _overlayDisposer?: () => void;
 
@@ -94,6 +93,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         return params;
     }
 
+
     @action
     componentDidMount() {
         this.rawScript = ScriptCast(this.dataDoc[this.props.fieldKey])?.script?.originalScript ?? this.rawScript;
@@ -164,8 +164,8 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
 
     // overlays document numbers (ex. d32) over all documents when clicked on
     onFocus = () => {
-        this._overlayDisposer?.();
-        this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
+        // this._overlayDisposer?.();
+        // this._overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
     }
 
     // sets field of the corresponding field key (param name) to be dropped document
@@ -387,7 +387,7 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
 
     @action
     handleFunc(pos: number) {
-        const scriptString = this.rawScript.slice(0, pos - 1);
+        const scriptString = this.rawScript.slice(0, pos - 2);
         this._currWord = scriptString.split(" ")[scriptString.split(" ").length - 1];
         this._suggestions = [];
 
@@ -445,68 +445,50 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<FieldViewProps, Sc
         return value;
     }
 
+    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%" }}
+                minChar={0}
+                placeholder="write your script here"
+                onFocus={this.onFocus}
+                onBlur={() => this._overlayDisposer?.()}
+                onChange={e => this.rawScript = e.target.value}
+                value={this.rawScript}
+                movePopupAsYouType={true}
+                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 }) =>
+                            <div>
+                                <div style={{ fontSize: "14px" }}
+                                    onMouseEnter={() => this.setHovered(true)}
+                                    onMouseLeave={() => this.setHovered(false)}>
+                                    {value}
+                                </div>
+                                {!this._hovered ? (null) :
+                                    <>
+                                        <div key="desc" style={{ fontSize: "10px" }}>{this.getDescription(value)}</div>
+                                        <div key="params" style={{ fontSize: "10px" }}>{this.getParams(value)}</div>
+                                    </>
+                                }
+                            </div>,
+                        output: (item: any, trigger) => trigger + item.trim(),
+                    }
+                }}
 
-        return <ReactTextareaAutocomplete
-            onFocus={this.onFocus}
-            onBlur={() => this._overlayDisposer?.()}
-            onChange={e => this.rawScript = e.target.value}
-            value={this.rawScript}
-            placeholder="write your script here"
-            className="ScriptingBox-textarea"
-            style={{ width: this.compileParams.length > 0 ? "70%" : "100%", resize: "none", height: "100%" }}
-            movePopupAsYouType={true}
-            loadingComponent={() => <span>Loading</span>}
-
-            ref={(rta) => { this.rta = rta; }}
-            //innerRef={textarea => { this.rawScript = textarea.value; }}
-
-            minChar={0}
-
-            trigger={{
-                " ": {
-                    dataProvider: (token: any) => this.handleToken(token),
-                    component: ({ entity: value }) =>
-                        <div><div
-                            style={{ fontSize: "14px" }}
-                            onMouseEnter={() => this.setHovered(true)}
-                            onMouseLeave={() => this.setHovered(false)}>
-                            {value}
-                        </div>
-                            {this._hovered ? <div style={{ fontSize: "10px" }}>{this.getDescription(value)}</div> : (null)}
-                            {this._hovered ? <div style={{ fontSize: "10px" }}>{this.getParams(value)}</div> : (null)}
-                        </div>
-                    ,
-                    output: (item: any, trigger) => trigger + item.trim(),
-                },
-
-                "(": {
-                    dataProvider: (token: any) => this.handleFunc(this.rta.getCaretPosition()),
-                    component: ({ entity: value }) => <div>{value}</div>,
-                    output: (item: any) => "(" + this.returnParam(item) + ")",
-                },
-
-                ".": {
-                    dataProvider: (token: any) => this.handleToken(token),
-                    component: ({ entity: value }) =>
-                        <div><div
-                            style={{ fontSize: "14px" }}
-                            onMouseEnter={() => this.setHovered(true)}
-                            onMouseLeave={() => this.setHovered(false)}>
-                            {value}
-                        </div>
-                            {this._hovered ? <div style={{ fontSize: "10px" }}>{this.getDescription(value)}</div> : (null)}
-                            {this._hovered ? <div style={{ fontSize: "10px" }}>{this.getParams(value)}</div> : (null)}
-                        </div>
-                    ,
-                    output: (item: any, trigger) => trigger + item.trim(),
-                }
-
-            }}
-
-            onCaretPositionChange={(number: any) => null} //this.handleKeyPress(number)}
-        />;
+                onCaretPositionChange={(number: any) => this.caretPos = number}
+            />
+        </div>;
     }
 
     // inputs for scripting div (script box, params box, and params column)