From b1194340528f6b1e68f111f6826dcf5bc91cee90 Mon Sep 17 00:00:00 2001 From: shmck Date: Sun, 14 Jul 2019 10:45:01 -0700 Subject: [PATCH 1/5] remove attempts to review webview --- src/editor/ReactWebView.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/src/editor/ReactWebView.ts b/src/editor/ReactWebView.ts index 2863eccb..361ee1e3 100644 --- a/src/editor/ReactWebView.ts +++ b/src/editor/ReactWebView.ts @@ -23,7 +23,7 @@ class ReactWebView { // Listen for when the panel is disposed // This happens when the user closes the panel or when the panel is closed programatically - // this.panel.onDidDispose(() => this.dispose(), null, this.disposables) + this.panel.onDidDispose(() => this.dispose(), null, this.disposables) // Handle messages from the webview const onReceive = (action: string | CR.Action) => vscode.commands.executeCommand('coderoad.receive_action', action) @@ -38,15 +38,6 @@ class ReactWebView { this.panel.reveal(vscode.ViewColumn.Two) } - this.panel.onDidDispose(() => { - updateWindows() - }) - - // this.panel.onDidChangeViewState(() => { - // console.log('onDidChangeViewState') - // updateWindows() - // }) - // prevents new panels from going ontop of coderoad panel vscode.window.onDidChangeActiveTextEditor(param => { if (!param || param.viewColumn !== vscode.ViewColumn.Two) { @@ -145,8 +136,8 @@ class ReactWebView { + scheme: 'vscode-resource', + })}/"> From 68e9e75ffc1d46b623e0f0f802424ff1c9fce756 Mon Sep 17 00:00:00 2001 From: shmck Date: Sun, 14 Jul 2019 10:49:36 -0700 Subject: [PATCH 2/5] disable debugger --- web-app/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index c0e40849..5c2429a6 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -46,7 +46,7 @@ const App = () => { return (
- + {/* */}
From 9a452d6e982c1553652a889e7bc41c7918cb523d Mon Sep 17 00:00:00 2001 From: shmck Date: Sun, 14 Jul 2019 11:18:40 -0700 Subject: [PATCH 3/5] detect when react webview is loaded --- src/editor/ReactWebView.ts | 22 ++++++++++++++++++++-- src/editor/commands/index.ts | 8 ++------ web-app/src/App.tsx | 8 +++++++- 3 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/editor/ReactWebView.ts b/src/editor/ReactWebView.ts index 361ee1e3..f8e06f73 100644 --- a/src/editor/ReactWebView.ts +++ b/src/editor/ReactWebView.ts @@ -7,6 +7,7 @@ import * as path from 'path' */ class ReactWebView { // @ts-ignore + public loaded: boolean private panel: vscode.WebviewPanel private extensionPath: string private disposables: vscode.Disposable[] = [] @@ -26,7 +27,14 @@ class ReactWebView { this.panel.onDidDispose(() => this.dispose(), null, this.disposables) // Handle messages from the webview - const onReceive = (action: string | CR.Action) => vscode.commands.executeCommand('coderoad.receive_action', action) + const onReceive = (action: string | CR.Action) => { + // await loading of webview in React before proceeding with loaded state + if (action === 'WEBVIEW_LOADED') { + this.loaded = true + } else { + vscode.commands.executeCommand('coderoad.receive_action', action) + } + } this.panel.webview.onDidReceiveMessage(onReceive, null, this.disposables) // update panel on changes @@ -52,7 +60,7 @@ class ReactWebView { // TODO: prevent window from moving to the left when no windows remain on rights } - public createOrShow(column: number): void { + public createOrShow(column: number, callback?: () => void): void { // If we already have a panel, show it. // Otherwise, create a new panel. if (this.panel && this.panel.webview) { @@ -60,6 +68,16 @@ class ReactWebView { } else { this.panel = this.createWebviewPanel(column) } + if (callback) { + // listen for when webview is loaded + // unfortunately there is no easy way of doing this + let webPanelListener = setInterval(() => { + if (this.loaded) { + setTimeout(callback) + clearInterval(webPanelListener) + } + }, 200) + } } private createWebviewPanel(column: number): vscode.WebviewPanel { diff --git a/src/editor/commands/index.ts b/src/editor/commands/index.ts index ef028773..3e82c1ef 100644 --- a/src/editor/commands/index.ts +++ b/src/editor/commands/index.ts @@ -50,12 +50,8 @@ export const createCommands = ({ context, machine, storage, git, position }: Cre orientation: 0, groups: [{ groups: [{}], size: 0.6 }, { groups: [{}], size: 0.4 }], }) - webview.createOrShow(column) - // NOTE: createOrShow and layout command cannot be async - // this creates an async issue where the webview cannot detect when it has been initialized - setTimeout(() => { - machine.send('WEBVIEW_INITIALIZED') - }, 2000) + const callback = () => machine.send('WEBVIEW_INITIALIZED') + webview.createOrShow(column, callback) }, // launch a new tutorial // NOTE: may be better to move into action as logic is primarily non-vscode diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index 5c2429a6..f4f00d7b 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -3,6 +3,7 @@ import * as CR from 'typings' import Debugger from './components/Debugger' import Routes from './Routes' +import { send } from './utils/vscode' import DataContext, { initialState, initialData } from './utils/DataContext' interface ReceivedEvent { @@ -35,6 +36,11 @@ const App = () => { } }) + // trigger progress when webview loaded + React.useEffect(() => { + send('WEBVIEW_LOADED') + }) + const value = { state, position: data.position, @@ -46,7 +52,7 @@ const App = () => { return (
- {/* */} +
From 0d5f47b4646aa7570a9588feb3a49ff395fef3b9 Mon Sep 17 00:00:00 2001 From: shmck Date: Sun, 14 Jul 2019 11:22:22 -0700 Subject: [PATCH 4/5] prevent loading multiple CR instances --- src/editor/commands/index.ts | 4 ++++ web-app/src/App.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/src/editor/commands/index.ts b/src/editor/commands/index.ts index 3e82c1ef..268a910b 100644 --- a/src/editor/commands/index.ts +++ b/src/editor/commands/index.ts @@ -35,6 +35,10 @@ let webview: any export const createCommands = ({ context, machine, storage, git, position }: CreateCommandProps) => ({ // initialize [COMMANDS.START]: () => { + if (webview) { + console.log('CodeRoad already loaded') + return + } // set local storage workspace setStorage(context.workspaceState) diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index f4f00d7b..15e0934f 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -14,6 +14,7 @@ const App = () => { const [state, setState] = React.useState(initialState) const [data, setData]: [CR.MachineContext, (data: CR.MachineContext) => void] = React.useState(initialData) + // update state based on response from editor const handleEvent = (event: ReceivedEvent): void => { const message = event.data console.log('RECEIVED') From 42d6f5929b3173c24974b0935ba7ea29ac4607a6 Mon Sep 17 00:00:00 2001 From: shmck Date: Sun, 14 Jul 2019 11:23:53 -0700 Subject: [PATCH 5/5] turn off debugger (again) --- web-app/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index 15e0934f..ce9e2c4d 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -53,7 +53,7 @@ const App = () => { return (
- + {/* */}