changed EditableViews to support oneline and multiline. Also added transformer UI to allow documents to be entered. changed transformer to write doc id's, not variables.. made schema view support oneline and fixed bug with docdecoration hader occluding things invisibly. updated web pages to be zoomable and for its anchors to update web page and scroll location properly. made autolinkanchor directly go to target on click.

1 files changed, 66 insertions, 47 deletions

diff --git a/src/client/views/ScriptingRepl.tsx b/src/client/views/ScriptingRepl.tsx
index 4fecfa4d9..5dfe10def 100644
--- a/src/client/views/ScriptingRepl.tsx
+++ b/src/client/views/ScriptingRepl.tsx
@@ -10,34 +10,49 @@ import { OverlayView } from './OverlayView';
 import './ScriptingRepl.scss';
 
 @observer
-export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () => void, value: { [key: string]: any }, name?: string }> {
+export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: () => void; value: { [key: string]: any }; name?: string }> {
     @observable collapsed = true;
 
     @action
     toggle = () => {
         this.collapsed = !this.collapsed;
         this.props.scrollToBottom();
-    }
+    };
 
     render() {
         const val = this.props.value;
         const proto = Object.getPrototypeOf(val);
         const name = (proto && proto.constructor && proto.constructor.name) || String(val);
-        const title = this.props.name ? <><b>{this.props.name} : </b>{name}</> : name;
+        const title = this.props.name ? (
+            <>
+                <b>{this.props.name} : </b>
+                {name}
+            </>
+        ) : (
+            name
+        );
         if (this.collapsed) {
             return (
                 <div className="scriptingObject-collapsed">
-                    <span onClick={this.toggle} className="scriptingObject-icon scriptingObject-iconCollapsed"><FontAwesomeIcon icon="caret-right" size="sm" /></span>{title} (+{Object.keys(val).length})
+                    <span onClick={this.toggle} className="scriptingObject-icon scriptingObject-iconCollapsed">
+                        <FontAwesomeIcon icon="caret-right" size="sm" />
+                    </span>
+                    {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}
+                        <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} />)}
+                        {Object.keys(val).map(key => (
+                            <ScriptingValueDisplay {...this.props} name={key} />
+                        ))}
                     </div>
                 </div>
             );
@@ -46,18 +61,32 @@ export class ScriptingObjectDisplay extends React.Component<{ scrollToBottom: ()
 }
 
 @observer
-export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: () => void, value: any, name?: string }> {
+export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: () => void; value: any; name?: string }> {
     render() {
         const val = this.props.name ? this.props.value[this.props.name] : this.props.value;
-        if (typeof val === "object") {
+        if (typeof val === 'object') {
             return <ScriptingObjectDisplay scrollToBottom={this.props.scrollToBottom} value={val} name={this.props.name} />;
-        } else if (typeof val === "function") {
-            const name = "[Function]";
-            const title = this.props.name ? <><b>{this.props.name} : </b>{name}</> : name;
+        } else if (typeof val === 'function') {
+            const name = '[Function]';
+            const title = this.props.name ? (
+                <>
+                    <b>{this.props.name} : </b>
+                    {name}
+                </>
+            ) : (
+                name
+            );
             return <div className="scriptingObject-leaf">{title}</div>;
         } else {
             const name = String(val);
-            const title = this.props.name ? <><b>{this.props.name} : </b>{name}</> : name;
+            const title = this.props.name ? (
+                <>
+                    <b>{this.props.name} : </b>
+                    {name}
+                </>
+            ) : (
+                name
+            );
             return <div className="scriptingObject-leaf">{title}</div>;
         }
     }
@@ -65,11 +94,11 @@ export class ScriptingValueDisplay extends React.Component<{ scrollToBottom: ()
 
 @observer
 export class ScriptingRepl extends React.Component {
-    @observable private commands: { command: string, result: any }[] = [];
+    @observable private commands: { command: string; result: any }[] = [];
     private commandsHistory: string[] = [];
 
-    @observable private commandString: string = "";
-    private commandBuffer: string = "";
+    @observable private commandString: string = '';
+    private commandBuffer: string = '';
 
     @observable private historyIndex: number = -1;
 
@@ -82,7 +111,7 @@ export class ScriptingRepl extends React.Component {
             transformer: context => {
                 const knownVars: { [name: string]: number } = {};
                 const usedDocuments: number[] = [];
-                ScriptingGlobals.getGlobals().forEach((global: any) => knownVars[global] = 1);
+                ScriptingGlobals.getGlobals().forEach((global: any) => (knownVars[global] = 1));
                 return root => {
                     function visit(node: ts.Node) {
                         let skip = false;
@@ -105,7 +134,7 @@ export class ScriptingRepl extends React.Component {
                                     const m = parseInt(match[1]);
                                     usedDocuments.push(m);
                                 } else {
-                                    return ts.createPropertyAccess(ts.createIdentifier("args"), node);
+                                    return ts.createPropertyAccess(ts.createIdentifier('args'), node);
                                 }
                             }
                         }
@@ -114,20 +143,20 @@ export class ScriptingRepl extends React.Component {
                     }
                     return ts.visitNode(root, visit);
                 };
-            }
+            },
         };
-    }
+    };
 
     @action
     onKeyDown = (e: React.KeyboardEvent) => {
         let stopProp = true;
         switch (e.key) {
-            case "Enter": {
+            case 'Enter': {
                 e.stopPropagation();
                 const docGlobals: { [name: string]: any } = {};
-                Array.from(DocumentManager.Instance.DocumentViews).forEach((dv, i) => docGlobals[`d${i}`] = dv.props.Document);
+                DocumentManager.Instance.DocumentViews.forEach((dv, i) => (docGlobals[`d${i}`] = dv.props.Document));
                 const globals = ScriptingGlobals.makeMutableGlobalsCopy(docGlobals);
-                const script = CompileScript(this.commandString, { typecheck: false, addReturn: true, editable: true, params: { args: "any" }, transformer: this.getTransformer(), globals });
+                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;
@@ -139,13 +168,13 @@ export class ScriptingRepl extends React.Component {
 
                     this.maybeScrollToBottom();
 
-                    this.commandString = "";
-                    this.commandBuffer = "";
+                    this.commandString = '';
+                    this.commandBuffer = '';
                     this.historyIndex = -1;
                 }
                 break;
             }
-            case "ArrowUp": {
+            case 'ArrowUp': {
                 if (this.historyIndex < this.commands.length - 1) {
                     this.historyIndex++;
                     if (this.historyIndex === 0) {
@@ -155,12 +184,12 @@ export class ScriptingRepl extends React.Component {
                 }
                 break;
             }
-            case "ArrowDown": {
+            case 'ArrowDown': {
                 if (this.historyIndex >= 0) {
                     this.historyIndex--;
                     if (this.historyIndex === -1) {
                         this.commandString = this.commandBuffer;
-                        this.commandBuffer = "";
+                        this.commandBuffer = '';
                     } else {
                         this.commandString = this.commandsHistory[this.commands.length - 1 - this.historyIndex];
                     }
@@ -176,25 +205,25 @@ export class ScriptingRepl extends React.Component {
             e.stopPropagation();
             e.preventDefault();
         }
-    }
+    };
 
     @action
     onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.commandString = e.target.value;
-    }
+    };
 
     private shouldScroll: boolean = false;
     private maybeScrollToBottom = () => {
         const ele = this.commandsRef.current;
-        if (ele && ele.scrollTop === (ele.scrollHeight - ele.offsetHeight)) {
+        if (ele && ele.scrollTop === ele.scrollHeight - ele.offsetHeight) {
             this.shouldScroll = true;
             this.forceUpdate();
         }
-    }
+    };
 
     private scrollToBottom() {
         const ele = this.commandsRef.current;
-        ele && ele.scroll({ behavior: "auto", top: ele.scrollHeight });
+        ele && ele.scroll({ behavior: 'auto', top: ele.scrollHeight });
     }
 
     componentDidUpdate() {
@@ -206,15 +235,11 @@ export class ScriptingRepl extends React.Component {
 
     overlayDisposer?: () => void;
     onFocus = () => {
-        if (this.overlayDisposer) {
-            this.overlayDisposer();
-        }
+        this.overlayDisposer?.();
         this.overlayDisposer = OverlayView.Instance.addElement(<DocumentIconContainer />, { x: 0, y: 0 });
-    }
+    };
 
-    onBlur = () => {
-        this.overlayDisposer?.();
-    }
+    onBlur = () => this.overlayDisposer?.();
 
     render() {
         return (
@@ -229,14 +254,8 @@ export class ScriptingRepl extends React.Component {
                         );
                     })}
                 </div>
-                <input
-                    className="scriptingRepl-commandInput"
-                    onFocus={this.onFocus}
-                    onBlur={this.onBlur}
-                    value={this.commandString}
-                    onChange={this.onChange}
-                    onKeyDown={this.onKeyDown}></input>
+                <input className="scriptingRepl-commandInput" onFocus={this.onFocus} onBlur={this.onBlur} value={this.commandString} onChange={this.onChange} onKeyDown={this.onKeyDown}></input>
             </div>
         );
     }
-}
\ No newline at end of file
+}