mirror of
https://github.com/leporello-js/leporello-js
synced 2026-01-13 13:04:30 -08:00
342 lines
10 KiB
JavaScript
342 lines
10 KiB
JavaScript
import {exec, get_state, open_app_window, exec_and_reload_app_window} from '../index.js'
|
|
import {Editor} from './editor.js'
|
|
import {Files} from './files.js'
|
|
import {CallTree} from './calltree.js'
|
|
import {Logs} from './logs.js'
|
|
import {IO_Trace} from './io_trace.js'
|
|
import {ShareDialog} from './share_dialog.js'
|
|
import {el} from './domutils.js'
|
|
|
|
export class UI {
|
|
constructor(container, state){
|
|
this.open_app_window = this.open_app_window.bind(this)
|
|
|
|
this.files = new Files(this)
|
|
|
|
this.tabs = {}
|
|
this.debugger = {}
|
|
|
|
container.appendChild(
|
|
(this.root = el('div', 'root',
|
|
this.editor_container = el('div', 'editor_container'),
|
|
el('div', 'bottom',
|
|
this.debugger_container = el('div', 'debugger',
|
|
this.debugger_loaded = el('div', 'debugger_wrapper',
|
|
el('div', 'tabs',
|
|
this.tabs.calltree = el('div', 'tab',
|
|
el('a', {
|
|
click: () => this.set_active_tab('calltree'),
|
|
href: 'javascript: void(0)',
|
|
}, 'Call tree (F2)')
|
|
),
|
|
this.tabs.logs = el('div', 'tab',
|
|
el('a', {
|
|
click: () => this.set_active_tab('logs'),
|
|
href: 'javascript: void(0)',
|
|
}, 'Logs (F3)')
|
|
),
|
|
this.tabs.io_trace = el('div', 'tab',
|
|
el('a', {
|
|
click: () => this.set_active_tab('io_trace'),
|
|
href: 'javascript: void(0)',
|
|
}, 'IO trace (F4)')
|
|
),
|
|
),
|
|
this.debugger.calltree = el('div', {
|
|
'class': 'tab_content',
|
|
tabindex: 0,
|
|
}),
|
|
this.debugger.logs = el('div', {
|
|
'class': 'tab_content logs',
|
|
tabindex: 0,
|
|
}),
|
|
this.debugger.io_trace = el('div', {
|
|
'class': 'tab_content io_trace',
|
|
tabindex: 0,
|
|
}),
|
|
),
|
|
this.debugger_loading = el('div', 'debugger_wrapper',
|
|
this.debugger_loading_message = el('div'),
|
|
),
|
|
),
|
|
this.problems_container = el('div', {"class": 'problems_container', tabindex: 0},
|
|
this.problems = el('div'),
|
|
)
|
|
),
|
|
|
|
this.files.el,
|
|
|
|
this.statusbar = el('div', 'statusbar',
|
|
this.status = el('div', 'status'),
|
|
this.current_module = el('div', 'current_module'),
|
|
|
|
el('a', {
|
|
'class': 'statusbar_action first',
|
|
href: 'javascript: void(0)',
|
|
click: () => this.clear_io_trace(),
|
|
},
|
|
'Clear IO trace (F6)'
|
|
),
|
|
|
|
el('a', {
|
|
'class': 'statusbar_action open_app_window_button',
|
|
href: 'javascript: void(0)',
|
|
click: this.open_app_window,
|
|
},
|
|
'(Re)open app window (F7)',
|
|
this.open_app_window_tooltip = el('div', {
|
|
'class': 'open_app_window_tooltip',
|
|
},
|
|
'Click here to open app window'
|
|
)
|
|
),
|
|
|
|
this.options = el('div', 'options',
|
|
el('label', {'for': 'standard'},
|
|
el('input', {
|
|
id: 'standard',
|
|
type: 'radio',
|
|
name: 'keyboard',
|
|
checked: localStorage.keyboard == 'standard'
|
|
|| localStorage.keyboard == null,
|
|
change: () => {
|
|
this.editor.set_keyboard_handler('standard')
|
|
}
|
|
}),
|
|
'Standard'
|
|
),
|
|
el('label', {'for': 'vim'},
|
|
el('input', {
|
|
id: 'vim',
|
|
type: 'radio',
|
|
name: 'keyboard',
|
|
checked: localStorage.keyboard == 'vim',
|
|
change: () => {
|
|
this.editor.set_keyboard_handler('vim')
|
|
}
|
|
}),
|
|
'VIM'
|
|
)
|
|
),
|
|
el('a', {
|
|
'class': 'show_help',
|
|
href: 'javascript: void(0)',
|
|
click: () => this.help_dialog.showModal(),
|
|
},
|
|
'Help',
|
|
),
|
|
el('a', {
|
|
'class': 'github',
|
|
href: 'https://github.com/leporello-js/leporello-js',
|
|
target: '__blank',
|
|
}, 'Github'),
|
|
el('button', {
|
|
'class': 'share_button',
|
|
'click': () => this.share_dialog.showModal(),
|
|
}, 'Share'),
|
|
this.help_dialog = this.render_help(),
|
|
this.share_dialog = new ShareDialog().el,
|
|
)
|
|
))
|
|
)
|
|
|
|
window.addEventListener('keydown', () => this.clear_status(), true)
|
|
window.addEventListener('click', () => this.clear_status(), true)
|
|
|
|
window.addEventListener('keydown', e => {
|
|
if(e.key == 'F2') {
|
|
this.set_active_tab('calltree')
|
|
}
|
|
|
|
if(e.key == 'F3'){
|
|
this.set_active_tab('logs')
|
|
}
|
|
|
|
if(e.key == 'F4'){
|
|
this.set_active_tab('io_trace')
|
|
}
|
|
|
|
if(e.key == 'F6'){
|
|
exec('clear_io_trace')
|
|
}
|
|
|
|
if(e.key == 'F7'){
|
|
this.open_app_window()
|
|
}
|
|
})
|
|
|
|
this.editor = new Editor(this, this.editor_container)
|
|
|
|
this.calltree = new CallTree(this, this.debugger.calltree)
|
|
this.logs = new Logs(this, this.debugger.logs)
|
|
this.io_trace = new IO_Trace(this, this.debugger.io_trace)
|
|
|
|
this.render_current_module(state.current_module)
|
|
|
|
this.set_active_tab('calltree', true)
|
|
}
|
|
|
|
set_active_tab(tab_id, skip_focus = false) {
|
|
this.active_tab = tab_id
|
|
Object.values(this.tabs).forEach(el => el.classList.remove('active'))
|
|
this.tabs[tab_id].classList.add('active')
|
|
Object.values(this.debugger).forEach(el => el.style.display = 'none')
|
|
this.debugger[tab_id].style.display = 'block'
|
|
|
|
if(tab_id == 'io_trace') {
|
|
this.io_trace.render_io_trace(get_state(), false)
|
|
}
|
|
|
|
if(!skip_focus) {
|
|
this.debugger[tab_id].focus()
|
|
}
|
|
|
|
if(tab_id == 'calltree' && !skip_focus) {
|
|
exec('calltree.show_value_explorer')
|
|
}
|
|
}
|
|
|
|
clear_io_trace() {
|
|
exec_and_reload_app_window('clear_io_trace')
|
|
}
|
|
|
|
open_app_window() {
|
|
this.toggle_open_app_window_tooltip(false)
|
|
localStorage.onboarding_open_app_window = true
|
|
open_app_window(get_state())
|
|
}
|
|
|
|
render_debugger_loading(state) {
|
|
this.debugger_container.style = ''
|
|
this.problems_container.style = 'display: none'
|
|
|
|
this.debugger_loaded.style = 'display: none'
|
|
this.debugger_loading.style = ''
|
|
|
|
this.debugger_loading_message.innerText =
|
|
state.loading_external_imports_state != null
|
|
? 'Loading external modules...'
|
|
: 'Executing code...'
|
|
}
|
|
|
|
render_debugger(state) {
|
|
this.debugger_container.style = ''
|
|
this.problems_container.style = 'display: none'
|
|
|
|
this.debugger_loading.style = 'display: none'
|
|
this.debugger_loaded.style = ''
|
|
|
|
this.calltree.render_calltree(state)
|
|
this.logs.render_logs(state, null, state.logs)
|
|
}
|
|
|
|
render_io_trace(state) {
|
|
// render lazily, only if selected
|
|
if(this.active_tab == 'io_trace') {
|
|
this.io_trace.render_io_trace(state, true)
|
|
} else {
|
|
// Do not render until user switch to the tab
|
|
this.io_trace.clear()
|
|
}
|
|
}
|
|
|
|
render_problems(problems) {
|
|
this.debugger_container.style = 'display: none'
|
|
this.problems_container.style = ''
|
|
this.problems.innerHTML = ''
|
|
problems.forEach(p => {
|
|
const s = this.editor.get_session(p.module)
|
|
const pos = s.doc.indexToPosition(p.index)
|
|
const module = p.module == '' ? "*scratch*" : p.module
|
|
this.problems.appendChild(
|
|
el('div', 'problem',
|
|
el('a', {
|
|
href: 'javascript:void(0)',
|
|
click: () => exec('goto_problem', p)
|
|
},
|
|
`${module}:${pos.row + 1}:${pos.column} - ${p.message}`
|
|
)
|
|
)
|
|
)
|
|
})
|
|
}
|
|
|
|
set_status(text){
|
|
this.current_module.style = 'display: none'
|
|
this.status.style = ''
|
|
this.status.innerText = text
|
|
}
|
|
|
|
clear_status(){
|
|
this.render_current_module(get_state().current_module)
|
|
}
|
|
|
|
render_current_module(current_module) {
|
|
this.status.style = 'display: none'
|
|
this.current_module.innerText =
|
|
current_module == ''
|
|
? '*scratch*'
|
|
: current_module
|
|
this.current_module.style = ''
|
|
}
|
|
|
|
render_help() {
|
|
const options = [
|
|
['Focus value explorer', 'F1'],
|
|
['Navigate value explorer', '← → ↑ ↓ or hjkl'],
|
|
['Leave value explorer', 'F1 or Esc'],
|
|
['Focus call tree view', 'F2'],
|
|
['Navigate call tree view', '← → ↑ ↓ or hjkl'],
|
|
['Leave call tree view', 'F2 or Esc'],
|
|
['Focus console logs', 'F3'],
|
|
['Navigate console logs', '↑ ↓ or jk'],
|
|
['Leave console logs', 'F3 or Esc'],
|
|
['Focus IO trace', 'F4'],
|
|
['Leave IO trace', 'F4 or Esc'],
|
|
['Jump to definition', 'F5', 'gd'],
|
|
['Expand selection to eval expression', 'Ctrl-↓ or Ctrl-j'],
|
|
['Collapse selection', 'Ctrl-↑ or Ctrl-k'],
|
|
['Step into call', 'Ctrl-i', '\\i'],
|
|
['Step out of call', 'Ctrl-o', '\\o'],
|
|
['When in call tree view, jump to return statement', 'Enter'],
|
|
['When in call tree view, jump to function arguments', 'a'],
|
|
['When in call tree view, jump to error origin', 'e'],
|
|
['Clear IO trace', 'F6'],
|
|
['(Re)open run window (F7)', 'F7'],
|
|
]
|
|
return el('dialog', 'help_dialog',
|
|
el('table', 'help',
|
|
el('thead', '',
|
|
el('th', '', 'Action'),
|
|
el('th', 'key', 'Standard'),
|
|
el('th', 'key', 'VIM'),
|
|
),
|
|
el('tbody', '',
|
|
options.map(([text, standard, vim]) =>
|
|
el('tr', '',
|
|
el('td', '', text),
|
|
el('td',
|
|
vim == null
|
|
? {'class': 'key spanned', colspan: 2}
|
|
: {'class': 'key'},
|
|
standard
|
|
),
|
|
vim == null
|
|
? null
|
|
: el('td', 'key', vim),
|
|
)
|
|
)
|
|
)
|
|
),
|
|
el('form', {method: 'dialog'},
|
|
el('button', null, 'Close'),
|
|
),
|
|
)
|
|
}
|
|
|
|
toggle_open_app_window_tooltip(on) {
|
|
this.open_app_window_tooltip.classList.toggle('on', on)
|
|
}
|
|
|
|
}
|