const { getColor } = require('./themes') const { ATTR_FG, ATTR_BG, ATTR_BOLD, ATTR_UNDERLINE, ATTR_BLINK, ATTR_ITALIC, ATTR_STRIKE, ATTR_OVERLINE, ATTR_FAINT, ATTR_FRAKTUR } = require('./screen_attr_bits') // debug toolbar, tooltip and screen module.exports = function attachDebugger (screen, connection) { // debug screen overlay const debugCanvas = document.createElement('canvas') debugCanvas.classList.add('debug-canvas') const ctx = debugCanvas.getContext('2d') // debug toolbar const toolbar = document.createElement('div') toolbar.classList.add('debug-toolbar') // debug tooltip const tooltip = document.createElement('div') tooltip.classList.add('debug-tooltip') tooltip.classList.add('hidden') // update functions, defined somewhere below let updateTooltip let updateToolbar // tooltip cell let selectedCell = null // update tooltip cell when mouse moves const onMouseMove = (e) => { if (e.target !== screen.layout.canvas) { selectedCell = null return } selectedCell = screen.layout.screenToGrid(e.offsetX, e.offsetY) updateTooltip() } // hide tooltip when mouse leaves const onMouseOut = (e) => { selectedCell = null tooltip.classList.add('hidden') } // updates debug canvas size const updateCanvasSize = function () { let { width, height, devicePixelRatio } = screen.layout.window let cellSize = screen.layout.getCellSize() let padding = Math.round(screen.layout._padding) debugCanvas.width = (width * cellSize.width + 2 * padding) * devicePixelRatio debugCanvas.height = (height * cellSize.height + 2 * padding) * devicePixelRatio debugCanvas.style.width = `${width * cellSize.width + 2 * screen.layout._padding}px` debugCanvas.style.height = `${height * cellSize.height + 2 * screen.layout._padding}px` } // defined somewhere below let startDrawLoop let screenAttached = false // node to which events were bound (kept here for when they need to be removed) let eventNode // attaches/detaches debug screen overlay to/from DOM const setScreenAttached = function (attached) { if (attached && !debugCanvas.parentNode) { screen.layout.canvas.parentNode.appendChild(debugCanvas) eventNode = debugCanvas.parentNode eventNode.addEventListener('mousemove', onMouseMove) eventNode.addEventListener('mouseout', onMouseOut) screen.layout.on('size-update', updateCanvasSize) updateCanvasSize() screenAttached = true startDrawLoop() } else if (!attached && debugCanvas.parentNode) { debugCanvas.parentNode.removeChild(debugCanvas) eventNode.removeEventListener('mousemove', onMouseMove) eventNode.removeEventListener('mouseout', onMouseOut) screen.layout.removeListener('size-update', updateCanvasSize) screenAttached = false } } // attaches/detaches toolbar and tooltip to/from DOM const setToolbarAttached = function (attached) { if (attached && !toolbar.parentNode) { screen.layout.canvas.parentNode.appendChild(toolbar) screen.layout.canvas.parentNode.appendChild(tooltip) updateToolbar() } else if (!attached && toolbar.parentNode) { screen.layout.canvas.parentNode.removeChild(toolbar) screen.layout.canvas.parentNode.removeChild(tooltip) } } // attach/detach toolbar when debug mode is enabled/disabled screen.on('update-window:debug', enabled => { setToolbarAttached(enabled) }) // ditto ^ screen.layout.on('update-window:debug', enabled => { setScreenAttached(enabled) }) let drawData = { // last draw reason reason: '', // when true, will show colored cell update overlays showUpdates: false, // draw start time in milliseconds startTime: 0, // end time endTime: 0, // partial update frames frames: [], // cell data cells: new Map(), // scroll region scrollRegion: null } // debug interface screen._debug = screen.layout.renderer._debug = { drawStart (reason) { drawData.reason = reason drawData.startTime = window.performance.now() }, drawEnd () { drawData.endTime = window.performance.now() }, setCell (cell, flags) { drawData.cells.set(cell, [flags, window.performance.now()]) }, pushFrame (frame) { drawData.frames.push([...frame, window.performance.now()]) } } let isDrawing = false let drawLoop = function () { // draw while the screen is attached if (screenAttached) window.requestAnimationFrame(drawLoop) else isDrawing = false let now = window.performance.now() let { width, height, devicePixelRatio } = screen.layout.window let padding = Math.round(screen.layout._padding) let cellSize = screen.layout.getCellSize() ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0) ctx.clearRect(0, 0, width * cellSize.width + 2 * padding, height * cellSize.height + 2 * padding) ctx.translate(padding, padding) ctx.lineWidth = 2 ctx.lineJoin = 'round' if (drawData.showUpdates) { const cells = drawData.cells for (let cell = 0; cell < width * height; cell++) { // cell does not exist or has no flags set if (!cells.has(cell) || cells.get(cell)[0] === 0) continue const [flags, timestamp] = cells.get(cell) let elapsedTime = (now - timestamp) / 1000 if (elapsedTime > 1) { cells.delete(cell) continue } ctx.globalAlpha = 0.5 * Math.max(0, 1 - elapsedTime) let x = cell % width let y = Math.floor(cell / width) if (flags & 2) { // updated ctx.fillStyle = '#0f0' } else if (flags & 1) { // redrawn ctx.fillStyle = '#f0f' } if (!(flags & 4)) { // outside a clipped region ctx.fillStyle = '#0ff' } ctx.fillRect(x * cellSize.width, y * cellSize.height, cellSize.width, cellSize.height) if (flags & 8) { // wide cell ctx.strokeStyle = '#f00' ctx.beginPath() ctx.moveTo(x * cellSize.width, (y + 1) * cellSize.height) ctx.lineTo((x + 1) * cellSize.width, (y + 1) * cellSize.height) ctx.stroke() } } let framesToDelete = [] for (let frame of drawData.frames) { let timestamp = frame[4] let elapsedTime = (now - timestamp) / 1000 if (elapsedTime > 1) framesToDelete.push(frame) else { ctx.globalAlpha = 1 - elapsedTime ctx.strokeStyle = '#ff0' ctx.strokeRect(frame[0] * cellSize.width, frame[1] * cellSize.height, frame[2] * cellSize.width, frame[3] * cellSize.height) } } for (let frame of framesToDelete) { drawData.frames.splice(drawData.frames.indexOf(frame), 1) } } if (selectedCell !== null) { // draw a dashed outline around the selected cell let [x, y] = selectedCell ctx.save() ctx.globalAlpha = 0.5 ctx.lineWidth = 1 // draw X line ctx.beginPath() ctx.moveTo(0, y * cellSize.height) ctx.lineTo(x * cellSize.width, y * cellSize.height) ctx.strokeStyle = '#f00' ctx.setLineDash([cellSize.width]) ctx.stroke() // draw Y line ctx.beginPath() ctx.moveTo(x * cellSize.width, 0) ctx.lineTo(x * cellSize.width, y * cellSize.height) ctx.strokeStyle = '#0f0' ctx.setLineDash([cellSize.height]) ctx.stroke() ctx.globalAlpha = 1 ctx.lineWidth = 1 + 0.5 * Math.sin((now / 1000) * 10) ctx.strokeStyle = '#fff' ctx.lineJoin = 'round' ctx.setLineDash([2, 2]) ctx.lineDashOffset = (now / 1000) * 10 ctx.strokeRect(x * cellSize.width, y * cellSize.height, cellSize.width, cellSize.height) ctx.lineDashOffset += 2 ctx.strokeStyle = '#000' ctx.strokeRect(x * cellSize.width, y * cellSize.height, cellSize.width, cellSize.height) ctx.restore() } if (drawData.scrollRegion !== null) { // draw two lines marking the scroll region bounds let [start, end] = drawData.scrollRegion ctx.save() ctx.globalAlpha = 1 ctx.strokeStyle = '#00f' ctx.lineWidth = 2 ctx.setLineDash([2, 2]) ctx.beginPath() ctx.moveTo(0, start * cellSize.height) ctx.lineTo(width * cellSize.width, start * cellSize.height) ctx.stroke() ctx.beginPath() ctx.moveTo(0, (end + 1) * cellSize.height) ctx.lineTo(width * cellSize.width, (end + 1) * cellSize.height) ctx.stroke() ctx.restore() } } startDrawLoop = function () { if (isDrawing) return isDrawing = true drawLoop() } let pad2 = i => ('00' + i.toString()).substr(-2) let formatColor = color => color < 256 ? color.toString() : '#' + pad2(color >> 16) + pad2((color >> 8) & 0xFF) + pad2(color & 0xFF) let makeSpan = (text, styles) => { let span = document.createElement('span') span.textContent = text Object.assign(span.style, styles || {}) return span } let formatAttributes = (target, attrs) => { if (attrs & ATTR_FG) target.appendChild(makeSpan('HasFG')) if (attrs & ATTR_BG) target.appendChild(makeSpan('HasBG')) if (attrs & ATTR_BOLD) target.appendChild(makeSpan('Bold', { fontWeight: 'bold' })) if (attrs & ATTR_UNDERLINE) target.appendChild(makeSpan('Uline', { textDecoration: 'underline' })) if (attrs & ATTR_BLINK) target.appendChild(makeSpan('Blink')) if (attrs & ATTR_ITALIC) target.appendChild(makeSpan('Italic', { fontStyle: 'italic' })) if (attrs & ATTR_STRIKE) target.appendChild(makeSpan('Strike', { textDecoration: 'line-through' })) if (attrs & ATTR_OVERLINE) target.appendChild(makeSpan('Oline', { textDecoration: 'overline' })) if (attrs & ATTR_FAINT) target.appendChild(makeSpan('Faint', { opacity: 0.5 })) if (attrs & ATTR_FRAKTUR) target.appendChild(makeSpan('Fraktur')) } updateTooltip = function () { // TODO: make this not destroy and recreate the same nodes every time tooltip.classList.remove('hidden') tooltip.innerHTML = '' let cell = selectedCell[1] * screen.window.width + selectedCell[0] if (!screen.screen[cell]) return let foreground = document.createElement('span') foreground.textContent = formatColor(screen.screenFG[cell]) let preview = document.createElement('span') preview.textContent = ' ●' preview.style.color = getColor(screen.screenFG[cell], screen.layout.renderer.palette) foreground.appendChild(preview) let background = document.createElement('span') background.textContent = formatColor(screen.screenBG[cell]) let bgPreview = document.createElement('span') bgPreview.textContent = ' ●' bgPreview.style.color = getColor(screen.screenBG[cell], screen.layout.renderer.palette) background.appendChild(bgPreview) let character = screen.screen[cell] let codePoint = character.codePointAt(0) let formattedCodePoint = codePoint.toString(16).length <= 4 ? `0000${codePoint.toString(16)}`.substr(-4) : codePoint.toString(16) let attributes = document.createElement('span') attributes.classList.add('attributes') formatAttributes(attributes, screen.screenAttrs[cell]) let data = { Cell: `col ${selectedCell[0] + 1}, ln ${selectedCell[1] + 1} (${cell})`, Foreground: foreground, Background: background, Character: `U+${formattedCodePoint}`, Attributes: attributes } let table = document.createElement('table') for (let name in data) { let row = document.createElement('tr') let label = document.createElement('td') label.appendChild(new window.Text(name)) label.classList.add('label') let value = document.createElement('td') value.appendChild(typeof data[name] === 'string' ? new window.Text(data[name]) : data[name]) value.classList.add('value') row.appendChild(label) row.appendChild(value) table.appendChild(row) } tooltip.appendChild(table) let cellSize = screen.layout.getCellSize() // add 3 to the position because for some reason the corner is off let posX = (selectedCell[0] + 1) * cellSize.width + 3 let posY = (selectedCell[1] + 1) * cellSize.height + 3 tooltip.style.transform = `translate(${posX}px, ${posY}px)` } let toolbarData = null let toolbarNodes = {} // construct the toolbar if it wasn't already const initToolbar = function () { if (toolbarData) return let showUpdates = document.createElement('input') showUpdates.type = 'checkbox' showUpdates.addEventListener('change', e => { drawData.showUpdates = showUpdates.checked }) let fancyGraphics = document.createElement('input') fancyGraphics.type = 'checkbox' fancyGraphics.value = !!screen.layout.renderer.graphics fancyGraphics.addEventListener('change', e => { screen.layout.renderer.graphics = +fancyGraphics.checked }) toolbarData = { cursor: { title: 'Cursor', Position: '', Style: '', Visible: true, Hanging: false }, internal: { Flags: '', 'Cursor Attributes': '', 'Code Page': '', Heap: 0, Clients: 0 }, drawing: { title: 'Drawing', 'Last Update': '', 'Show Updates': showUpdates, 'Fancy Graphics': fancyGraphics, 'Redraw Screen': () => { screen.layout.renderer.resetDrawn() screen.layout.renderer.draw('debug-redraw') } } } for (let i in toolbarData) { let group = toolbarData[i] let table = document.createElement('table') table.classList.add('toolbar-group') toolbarNodes[i] = {} for (let key in group) { let item = document.createElement('tr') let name = document.createElement('td') name.classList.add('name') let value = document.createElement('td') value.classList.add('value') toolbarNodes[i][key] = { name, value } if (key === 'title') { name.textContent = group[key] name.classList.add('title') } else { name.textContent = key if (group[key] instanceof Function) { name.textContent = '' let button = document.createElement('button') name.classList.add('has-button') name.appendChild(button) button.textContent = key button.addEventListener('click', e => group[key](e)) } else if (group[key] instanceof window.Node) value.appendChild(group[key]) else value.textContent = group[key] } item.appendChild(name) item.appendChild(value) table.appendChild(item) } toolbar.appendChild(table) } let heartbeat = toolbarNodes.heartbeat = document.createElement('div') heartbeat.classList.add('heartbeat') heartbeat.textContent = '❤' toolbar.appendChild(heartbeat) } connection.on('heartbeat', () => { if (screenAttached && toolbarNodes.heartbeat) { toolbarNodes.heartbeat.classList.remove('beat') window.requestAnimationFrame(() => { toolbarNodes.heartbeat.classList.add('beat') }) } }) updateToolbar = function () { initToolbar() Object.assign(toolbarData.cursor, { Position: `col ${screen.cursor.x + 1}, ln ${screen.cursor.y + 1}`, Style: screen.cursor.style + (screen.cursor.blinking ? ', blink' : ''), Visible: screen.cursor.visible, Hanging: screen.cursor.hanging }) let drawTime = Math.round((drawData.endTime - drawData.startTime) * 100) / 100 toolbarData.drawing['Last Update'] = `${drawData.reason} (${drawTime}ms)` toolbarData.drawing['Fancy Graphics'].checked = !!screen.layout.renderer.graphics for (let i in toolbarData) { let group = toolbarData[i] let nodes = toolbarNodes[i] for (let key in group) { if (key === 'title') continue let value = nodes[key].value if (!(group[key] instanceof window.Node) && !(group[key] instanceof Function)) { value.textContent = group[key] } } } } screen.on('update', updateToolbar) screen.on('internal', data => { if (screenAttached && toolbarData) { Object.assign(toolbarData.internal, { Flags: data.flags.toString(2), 'Cursor Attributes': data.cursorAttrs.toString(2), 'Code Page': `${data.charsetGx} (${data.charsetG0}, ${data.charsetG1})`, Heap: data.freeHeap, Clients: data.clientCount }) drawData.scrollRegion = [data.regionStart, data.regionEnd] updateToolbar() } }) }