Merge branch 'restoringEslint' into sarah-ai-visualization

1 files changed, 100 insertions, 99 deletions

diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index acf0ecff4..1a2eb460f 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -1,17 +1,50 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { DocumentManager } from '../util/DocumentManager';
 import { CompileScript, Transformer, ts } from '../util/Scripting';
 import { ScriptingGlobals } from '../util/ScriptingGlobals';
-import { SettingsManager } from '../util/SettingsManager';
+import { SnappingManager } from '../util/SnappingManager';
 import { undoable } from '../util/UndoManager';
 import { ObservableReactComponent } from './ObservableReactComponent';
 import { OverlayView } from './OverlayView';
 import './ScriptingRepl.scss';
 import { DocumentIconContainer } from './nodes/DocumentIcon';
+import { DocumentView } from './nodes/DocumentView';
 
+interface replValueProps {
+    scrollToBottom: () => void;
+    value: any;
+    name?: string;
+}
+@observer
+export class ScriptingValueDisplay extends ObservableReactComponent<replValueProps> {
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
+    render() {
+        const val = this._props.name ? this._props.value[this._props.name] : this._props.value;
+        const title = (name: string) => (
+            <>
+                {this._props.name ? <b>{this._props.name} : </b> : <> </>}
+                {name}
+            </>
+        );
+        if (typeof val === 'object') {
+            // eslint-disable-next-line no-use-before-define
+            return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />;
+        }
+        if (typeof val === 'function') {
+            return <div className="scriptingObject-leaf">{title('[Function]')}</div>;
+        }
+        return <div className="scriptingObject-leaf">{title(String(val))}</div>;
+    }
+}
 interface ReplProps {
     scrollToBottom: () => void;
     value: { [key: string]: any };
@@ -37,7 +70,7 @@ export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps>
         const name = (proto && proto.constructor && proto.constructor.name) || String(val);
         const title = (
             <>
-                {this.props.name ? <b>{this._props.name} : </b> : <></>}
+                {this.props.name ? <b>{this._props.name} : </b> : null}
                 {name}
             </>
         );
@@ -50,53 +83,23 @@ export class ScriptingObjectDisplay extends ObservableReactComponent<ReplProps>
                     {title} (+{Object.keys(val).length})
                 </div>
             );
-        } else {
-            return (
-                <div className="scriptingObject-open">
-                    <div>
-                        <span onClick={this.toggle} className="scriptingObject-icon">
-                            <FontAwesomeIcon icon="caret-down" size="sm" />
-                        </span>
-                        {title}
-                    </div>
-                    <div className="scriptingObject-fields">
-                        {Object.keys(val).map(key => (
-                            <ScriptingValueDisplay {...this._props} name={key} />
-                        ))}
-                    </div>
-                </div>
-            );
         }
-    }
-}
-
-interface replValueProps {
-    scrollToBottom: () => void;
-    value: any;
-    name?: string;
-}
-@observer
-export class ScriptingValueDisplay extends ObservableReactComponent<replValueProps> {
-    constructor(props: any) {
-        super(props);
-        makeObservable(this);
-    }
-
-    render() {
-        const val = this._props.name ? this._props.value[this._props.name] : this._props.value;
-        const title = (name: string) => (
-            <>
-                {this._props.name ? <b>{this._props.name} : </b> : <> </>}
-                {name}
-            </>
+        return (
+            <div className="scriptingObject-open">
+                <div>
+                    <span onClick={this.toggle} className="scriptingObject-icon">
+                        <FontAwesomeIcon icon="caret-down" size="sm" />
+                    </span>
+                    {title}
+                </div>
+                <div className="scriptingObject-fields">
+                    {Object.keys(val).map(key => (
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        <ScriptingValueDisplay {...this._props} name={key} />
+                    ))}
+                </div>
+            </div>
         );
-        if (typeof val === 'object') {
-            return <ScriptingObjectDisplay scrollToBottom={this._props.scrollToBottom} value={val} name={this._props.name} />;
-        } else if (typeof val === 'function') {
-            const name = '[Function]';
-            return <div className="scriptingObject-leaf">{title('[Function]')}</div>;
-        }
-        return <div className="scriptingObject-leaf">{title(String(val))}</div>;
     }
 }
 
@@ -119,47 +122,45 @@ export class ScriptingRepl extends ObservableReactComponent<{}> {
 
     private args: any = {};
 
-    getTransformer = (): Transformer => {
-        return {
-            transformer: context => {
-                const knownVars: { [name: string]: number } = {};
-                const usedDocuments: number[] = [];
-                ScriptingGlobals.getGlobals().forEach((global: any) => (knownVars[global] = 1));
-                return root => {
-                    function visit(node: ts.Node) {
-                        let skip = false;
-                        if (ts.isIdentifier(node)) {
-                            if (ts.isParameter(node.parent)) {
-                                skip = true;
-                                knownVars[node.text] = 1;
-                            }
+    getTransformer = (): Transformer => ({
+        transformer: context => {
+            const knownVars: { [name: string]: number } = {};
+            const usedDocuments: number[] = [];
+            ScriptingGlobals.getGlobals().forEach((global: any) => {
+                knownVars[global] = 1;
+            });
+            return root => {
+                function visit(nodeIn: ts.Node) {
+                    if (ts.isIdentifier(nodeIn)) {
+                        if (ts.isParameter(nodeIn.parent)) {
+                            knownVars[nodeIn.text] = 1;
                         }
-                        node = ts.visitEachChild(node, visit, context);
+                    }
+                    const node = ts.visitEachChild(nodeIn, visit, context);
 
-                        if (ts.isIdentifier(node)) {
-                            const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
-                            const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
-                            if (ts.isParameter(node.parent)) {
-                                // delete knownVars[node.text];
-                            } else if (isntPropAccess && isntPropAssign && !(node.text in knownVars) && !(node.text in globalThis)) {
-                                const match = node.text.match(/d([0-9]+)/);
-                                if (match) {
-                                    const m = parseInt(match[1]);
-                                    usedDocuments.push(m);
-                                } else {
-                                    return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('args'), node);
-                                    //  ts.createPropertyAccess(ts.createIdentifier('args'), node);
-                                }
+                    if (ts.isIdentifier(node)) {
+                        const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
+                        const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
+                        if (ts.isParameter(node.parent)) {
+                            // delete knownVars[node.text];
+                        } else if (isntPropAccess && isntPropAssign && !(node.text in knownVars) && !(node.text in globalThis)) {
+                            const match = node.text.match(/d([0-9]+)/);
+                            if (match) {
+                                const m = parseInt(match[1]);
+                                usedDocuments.push(m);
+                            } else {
+                                return ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier('args'), node);
+                                //  ts.createPropertyAccess(ts.createIdentifier('args'), node);
                             }
                         }
-
-                        return node;
                     }
-                    return ts.visitNode(root, visit);
-                };
-            },
-        };
-    };
+
+                    return node;
+                }
+                return ts.visitNode(root, visit);
+            };
+        },
+    });
 
     @action
     onKeyDown = (e: React.KeyboardEvent) => {
@@ -168,14 +169,16 @@ export class ScriptingRepl extends ObservableReactComponent<{}> {
             case 'Enter': {
                 e.stopPropagation();
                 const docGlobals: { [name: string]: any } = {};
-                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.Document));
+                DocumentView.allViews().forEach((dv, i) => {
+                    docGlobals[`d${i}`] = dv.Document;
+                });
                 const globals = ScriptingGlobals.makeMutableGlobalsCopy(docGlobals);
                 const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: 'any' }, transformer: this.getTransformer(), globals });
                 if (!script.compiled) {
                     this.commands.push({ command: this.commandString, result: script.errors });
                     return;
                 }
-                const result = undoable(() => script.run({ args: this.args }, e => this.commands.push({ command: this.commandString, result: e.toString() })), 'run:' + this.commandString)();
+                const result = undoable(() => script.run({ args: this.args }, () => this.commands.push({ command: this.commandString, result: e.toString() })), 'run:' + this.commandString)();
                 if (result.success) {
                     this.commands.push({ command: this.commandString, result: result.result });
                     this.commandsHistory.push(this.commandString);
@@ -259,23 +262,21 @@ export class ScriptingRepl extends ObservableReactComponent<{}> {
     render() {
         return (
             <div className="scriptingRepl-outerContainer">
-                <div className="scriptingRepl-commandsContainer" style={{ background: SettingsManager.userBackgroundColor }} ref={this.commandsRef}>
-                    {this.commands.map(({ command, result }, i) => {
-                        return (
-                            <div className="scriptingRepl-resultContainer" style={{ background: SettingsManager.userBackgroundColor }} key={i}>
-                                <div className="scriptingRepl-commandString" style={{ background: SettingsManager.userBackgroundColor }}>
-                                    {command || <br />}
-                                </div>
-                                <div className="scriptingRepl-commandResult" style={{ background: SettingsManager.userBackgroundColor }}>
-                                    {<ScriptingValueDisplay scrollToBottom={this.maybeScrollToBottom} value={result} />}
-                                </div>
+                <div className="scriptingRepl-commandsContainer" style={{ background: SnappingManager.userBackgroundColor }} ref={this.commandsRef}>
+                    {this.commands.map(({ command, result }, i) => (
+                        <div className="scriptingRepl-resultContainer" style={{ background: SnappingManager.userBackgroundColor }} key={i}>
+                            <div className="scriptingRepl-commandString" style={{ background: SnappingManager.userBackgroundColor }}>
+                                {command || <br />}
+                            </div>
+                            <div className="scriptingRepl-commandResult" style={{ background: SnappingManager.userBackgroundColor }}>
+                                <ScriptingValueDisplay scrollToBottom={this.maybeScrollToBottom} value={result} />
                             </div>
-                        );
-                    })}
+                        </div>
+                    ))}
                 </div>
                 <input
                     className="scriptingRepl-commandInput"
-                    style={{ background: SettingsManager.userBackgroundColor }} //
+                    style={{ background: SnappingManager.userBackgroundColor }} //
                     onFocus={this.onFocus}
                     onBlur={this.onBlur}
                     value={this.commandString}