From 5b5e50dc739d032bebb7b02b945034d25513a7f0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 5 Jun 2020 12:33:07 -0500 Subject: minor cleanup --- src/client/views/nodes/ScriptingBox.tsx | 226 ++++++++------------------------ 1 file changed, 58 insertions(+), 168 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx index 00bbafeb7..00c4759f7 100644 --- a/src/client/views/nodes/ScriptingBox.tsx +++ b/src/client/views/nodes/ScriptingBox.tsx @@ -54,9 +54,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent { const result = this._scriptGlobals[element]; - if (typeof result === "object") { - const d = result[1]; - if (d !== undefined) { - value = d; - } else { - value = ""; - } - } else { - value = ""; - } - descrip.push(value); + descrip.push(this.getValue(result, true)); }); return descrip; } @computed get _scriptParams() { const params: string[] = []; - let value = ""; this._scriptKeys.forEach((element: any) => { const result = this._scriptGlobals[element]; - if (typeof result === "object") { - const p = result[2]; - if (p !== undefined) { - value = StrCast(p); - } else { - value = ""; - } + params.push(this.getValue(result, false)); + }); + return params; + } + + getValue(result: any, descrip: boolean) { + let value = ""; + if (typeof result === "object") { + let text = ""; + if (descrip) { + text = result[1]; + } else { + text = result[2]; + } + if (text !== undefined) { + value = text; } else { value = ""; } - params.push(value); - }); - return params; + } else { + value = ""; + } + return value; } @@ -116,33 +111,36 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent { - for (const entry of entries) { - this._panelWidth = entry.contentRect.width; - this._panelHeight = entry.contentRect.height; + for (const { } of entries) { const getCaretCoordinates = require('textarea-caret'); const caret = getCaretCoordinates(this._selection, 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; - }); + this.resetSuggestionPos(caret); } })); observer.observe(document.getElementsByClassName("scriptingBox")[0]); } + @action + resetSuggestionPos(caret: any) { + 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; + }); + } + componentWillUnmount() { this._overlayDisposer?.(); } @@ -381,53 +379,15 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent) { - - // this.rawScript = e.target.value; - // this._currWord = e.target.value.split(" ")[e.target.value.split(" ").length - 1]; - // this._suggestions = []; - - // this._scriptKeys.forEach((element: string | string[]) => { - // if (element.indexOf(this._currWord) >= 0) { - // this._suggestions.push(element); - // } - // }); - // console.log(this._suggestions); - // } - - // @action - // handleKeyPress(num: number) { - - // const scriptString = this.rawScript.slice(0, num); - - // this._currWord = scriptString.split(" ")[scriptString.split(" ").length - 1]; - // this._suggestions = []; - - // this._scriptKeys.forEach((element: string) => { - // if (element.indexOf(this._currWord) >= 0) { - // this._suggestions.push(StrCast(element)); - // } - // }); - - // console.log(this._suggestions); - // return (this._suggestions); - // } - @action handleToken(str: string) { - this._currWord = str; this._suggestions = []; - this._scriptKeys.forEach((element: string) => { if (element.toLowerCase().indexOf(this._currWord.toLowerCase()) >= 0) { this._suggestions.push(StrCast(element)); } }); - - console.log(this._suggestions); return (this._suggestions); } @@ -436,14 +396,9 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent (x + scriptWidth)) { - const diff = (left + suggestionWidth) - (x + scriptWidth); - left = left - diff; - } - - runInAction(() => { - This._suggestionBoxX = left; - This._suggestionBoxY = top; - }); + This.resetSuggestionPos(caret); }); } @@ -547,43 +479,31 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent ; - if (this._scriptSuggestedParams !== undefined && this._scriptSuggestedParams.length > 0) { if (this.rawScript[pos - 2] !== "(") { - console.log("suggestion params"); this._paramSuggestion = true; } } } else if (e.key === ")") { this._paramSuggestion = false; } else { - console.log(this.rawScript.split("(").length - 1); - console.log(this.rawScript.split(")").length - 1); if (e.key === "Backspace") { if (this._lastChar === "(") { - console.log("removed params"); this._paramSuggestion = false; } else if (this._lastChar === ")") { if (this.rawScript.slice(0, this.rawScript.length - 1).split("(").length - 1 > this.rawScript.slice(0, this.rawScript.length - 1).split(")").length - 1) { if (this._scriptSuggestedParams.length > 0) { - console.log("suggestion params"); this._paramSuggestion = true; } } } } else { if (this.rawScript.split("(").length - 1 <= this.rawScript.split(")").length - 1) { - console.log("removed params"); this._paramSuggestion = false; } } - } if (e.key === "Backspace") { this._lastChar = this.rawScript[this.rawScript.length - 2]; @@ -605,10 +525,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent this.handleToken(token), - component: ({ entity: value }) => -
-
this.setHovered(true)} - onMouseLeave={() => this.setHovered(false)}> - {value} -
- {/* {!this._hovered ? (null) : - <> */} -
{this.getDescription(value)}
-
{this.getParams(value)}
- {/* - } */} -
, + component: ({ entity: value }) => this.renderFuncListElement(value), output: (item: any, trigger) => { this._spaced = true; return trigger + item.trim(); @@ -651,34 +554,31 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent this.handleToken(token), - component: ({ entity: value }) => -
-
this.setHovered(true)} - onMouseLeave={() => this.setHovered(false)}> - {value} -
- {/* {!this._hovered ? (null) : - <> */} -
{this.getDescription(value)}
-
{this.getParams(value)}
- {/* - } */} -
, + component: ({ entity: value }) => this.renderFuncListElement(value), output: (item: any, trigger) => { this._spaced = true; return trigger + item.trim(); }, } }} - onKeyDown={(e) => this.keyHandler(e, this.caretPos)} - onCaretPositionChange={(number: any) => this.handlePosChange(number)} /> ; } + renderFuncListElement(value: string) { + return
+
this.setHovered(true)} + onMouseLeave={() => this.setHovered(false)}> + {value} +
+
{this.getDescription(value)}
+
{this.getParams(value)}
+
; + } + // inputs for scripting div (script box, params box, and params column) @computed({ keepAlive: true }) get renderScriptingInputs() { @@ -691,16 +591,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent ; - // const scriptText = - //