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
 */
 classReactWebView{
 //@ts-ignore
 publicloaded:boolean
 privatepanel:vscode.WebviewPanel
 privateextensionPath:string
 privatedisposables: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
 constonReceive=(action:string|CR.Action)=>vscode.commands.executeCommand('coderoad.receive_action',action)
 constonReceive=(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
 }

 publiccreateOrShow(column:number):void{
 publiccreateOrShow(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
 letwebPanelListener=setInterval(()=>{
 if(this.loaded){
 setTimeout(callback)
 clearInterval(webPanelListener)
 }
 },200)
 }
 }

 privatecreateWebviewPanel(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
 exportconstcreateCommands=({ 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)
 constcallback=()=>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

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

 interfaceReceivedEvent{
 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
 consthandleEvent=(event:ReceivedEvent):void=>{
 constmessage=event.data
 console.log('RECEIVED')
 }
 })

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

 constvalue={
    state,
 position:data.position,
 return(
 <DataContext.Providervalue={value}>
 <div>
 <Debuggervalue={value}/>
 {/*<Debugger value={value} /> */}
 <Routesstate={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'
		*/
		classReactWebView{
		//@ts-ignore
		publicloaded:boolean
		privatepanel:vscode.WebviewPanel
		privateextensionPath:string
		privatedisposables: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
		constonReceive=(action:string\|CR.Action)=>vscode.commands.executeCommand('coderoad.receive_action',action)
		constonReceive=(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
		}

		publiccreateOrShow(column:number):void{
		publiccreateOrShow(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
		letwebPanelListener=setInterval(()=>{
		if(this.loaded){
		setTimeout(callback)
		clearInterval(webPanelListener)
		}
		},200)
		}
		}

		privatecreateWebviewPanel(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
		exportconstcreateCommands=({ 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)
		constcallback=()=>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'

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

		interfaceReceivedEvent{
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
		consthandleEvent=(event:ReceivedEvent):void=>{
		constmessage=event.data
		console.log('RECEIVED')
Expand All		@@ -35,6 +37,11 @@ const App = () => {
		}
		})

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

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