Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019 · Jul 14, 2019
diff --git a/src/editor/ReactWebView.ts b/src/editor/ReactWebView.ts
 */
 class ReactWebView {
  // @ts-ignore
  public loaded: boolean
  private panel: vscode.WebviewPanel
  private extensionPath: string
  private disposables: vscode.Disposable[] = []

    // 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)
    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
      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) {
    // 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) {
      this.panel.reveal(column)
    } 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 {
                    <link rel="stylesheet" type="text/css" href="${styleUri}">
                    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
                    <base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({
 scheme: 'vscode-resource',
 })}/">
      scheme: 'vscode-resource',
    })}/">
                    <style></style>
                </head>

diff --git a/src/editor/commands/index.ts b/src/editor/commands/index.ts
 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)

      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

 import Debugger from './components/Debugger'
 import Routes from './Routes'
 import { send } from './utils/vscode'
 import DataContext, { initialState, initialData } from './utils/DataContext'

 interface ReceivedEvent {
  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')
    }
  })

  // trigger progress when webview loaded
  React.useEffect(() => {
    send('WEBVIEW_LOADED')
  })

  const value = {
    state,
    position: data.position,
  return (
    <DataContext.Provider value={value}>
      <div>
        <Debugger value={value} />
 {/*<Debugger value={value} /> */}
        <Routes state={state} />
      </div>
    </DataContext.Provider>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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[] = []
Expand All		@@ -23,10 +24,17 @@ 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)
		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
Expand All		@@ -38,15 +46,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) {
Expand All		@@ -61,14 +60,24 @@ 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) {
		this.panel.reveal(column)
		} 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 {
Expand DownExpand Up		@@ -145,8 +154,8 @@ class ReactWebView {
		<link rel="stylesheet" type="text/css" href="${styleUri}">
		<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${n1}' 'nonce-${n2}' 'nonce-${n3}'; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
		<base href="${vscode.Uri.file(path.join(this.extensionPath, 'build')).with({
		scheme: 'vscode-resource',
		})}/">
		scheme: 'vscode-resource',
		})}/">
		<style></style>
		</head>

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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)

Expand All		@@ -50,12 +54,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
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 {
Expand All		@@ -13,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')
Expand All		@@ -35,6 +37,11 @@ const App = () => {
		}
		})

		// trigger progress when webview loaded
		React.useEffect(() => {
		send('WEBVIEW_LOADED')
		})

		const value = {
		state,
		position: data.position,
Expand All		@@ -46,7 +53,7 @@ const App = () => {
		return (
		<DataContext.Provider value={value}>
		<div>
		<Debugger value={value} />
		{/<Debugger value={value} /> /}
		<Routes state={state} />
		</div>
		</DataContext.Provider>
Expand Down