Add rudimentary and inefficient tooltip

webgl-renderer
cpsdqs 7 years ago
parent 6d7bd89f0b
commit e81b2d409c
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
  1. 70
      js/term/debug.js
  2. 26
      sass/pages/_term.scss

@ -1,3 +1,5 @@
const { getColor } = require('./themes')
module.exports = function attachDebugger (screen, connection) { module.exports = function attachDebugger (screen, connection) {
const debugCanvas = document.createElement('canvas') const debugCanvas = document.createElement('canvas')
debugCanvas.classList.add('debug-canvas') debugCanvas.classList.add('debug-canvas')
@ -6,9 +8,21 @@ module.exports = function attachDebugger (screen, connection) {
const toolbar = document.createElement('div') const toolbar = document.createElement('div')
toolbar.classList.add('debug-toolbar') toolbar.classList.add('debug-toolbar')
const tooltip = document.createElement('div')
tooltip.classList.add('debug-tooltip')
let updateTooltip
let selectedCell = null let selectedCell = null
let mousePosition = null
const onMouseMove = (e) => { const onMouseMove = (e) => {
if (e.target !== screen.layout.canvas) {
selectedCell = null
return
}
selectedCell = screen.layout.screenToGrid(e.offsetX, e.offsetY) selectedCell = screen.layout.screenToGrid(e.offsetX, e.offsetY)
mousePosition = [e.offsetX, e.offsetY]
updateTooltip()
} }
const onMouseOut = (e) => { const onMouseOut = (e) => {
selectedCell = null selectedCell = null
@ -49,8 +63,10 @@ module.exports = function attachDebugger (screen, connection) {
const setToolbarAttached = function (attached) { const setToolbarAttached = function (attached) {
if (attached && !toolbar.parentNode) { if (attached && !toolbar.parentNode) {
screen.layout.canvas.parentNode.appendChild(toolbar) screen.layout.canvas.parentNode.appendChild(toolbar)
screen.layout.canvas.parentNode.appendChild(tooltip)
} else if (!attached && toolbar.parentNode) { } else if (!attached && toolbar.parentNode) {
screen.layout.canvas.parentNode.removeChild(toolbar) screen.layout.canvas.parentNode.removeChild(toolbar)
screen.layout.canvas.parentNode.removeChild(tooltip)
} }
} }
@ -205,4 +221,58 @@ module.exports = function attachDebugger (screen, connection) {
isDrawing = true isDrawing = true
drawLoop() drawLoop()
} }
// tooltip
updateTooltip = function () {
tooltip.innerHTML = ''
let cell = selectedCell[1] * screen.window.width + selectedCell[0]
if (!screen.screen[cell]) return
let foreground = document.createElement('span')
foreground.textContent = 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 = 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 data = {
Foreground: foreground,
Background: background,
Character: `U+${formattedCodePoint}`
}
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)
tooltip.style.transform = `translate(${mousePosition.map(x => x + 'px').join(',')})`
}
} }

@ -111,6 +111,32 @@ body.term {
pointer-events: none; pointer-events: none;
} }
.debug-tooltip {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
background: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 6px;
padding: 10px 15px;
line-height: 1;
table {
tr {
.label {
font-weight: bold;
text-align: right;
opacity: 0.5;
}
.value {
text-align: left;
}
}
}
}
.debug-toolbar { .debug-toolbar {
line-height: 1.5; line-height: 1.5;
text-align: left; text-align: left;

Loading…
Cancel
Save