From dca61505ba138eef3819b16b760ec81becf9329e Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 13 May 2023 09:55:48 -0400 Subject: 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. --- src/client/views/ScriptingRepl.tsx | 113 ++++++++++++++++++++++--------------- 1 file changed, 66 insertions(+), 47 deletions(-) (limited to 'src/client/views/ScriptingRepl.tsx') 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 ? <>{this.props.name} : {name} : name; + const title = this.props.name ? ( + <> + {this.props.name} : + {name} + + ) : ( + name + ); if (this.collapsed) { return (
- {title} (+{Object.keys(val).length}) + + + + {title} (+{Object.keys(val).length})
); } else { return (
- {title} + + + + {title}
- {Object.keys(val).map(key => )} + {Object.keys(val).map(key => ( + + ))}
); @@ -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 ; - } else if (typeof val === "function") { - const name = "[Function]"; - const title = this.props.name ? <>{this.props.name} : {name} : name; + } else if (typeof val === 'function') { + const name = '[Function]'; + const title = this.props.name ? ( + <> + {this.props.name} : + {name} + + ) : ( + name + ); return
{title}
; } else { const name = String(val); - const title = this.props.name ? <>{this.props.name} : {name} : name; + const title = this.props.name ? ( + <> + {this.props.name} : + {name} + + ) : ( + name + ); return
{title}
; } } @@ -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) => { 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(, { x: 0, y: 0 }); - } + }; - onBlur = () => { - this.overlayDisposer?.(); - } + onBlur = () => this.overlayDisposer?.(); render() { return ( @@ -229,14 +254,8 @@ export class ScriptingRepl extends React.Component { ); })} - + ); } -} \ No newline at end of file +} -- cgit v1.2.3-70-g09d2