Unify soft keyboard input and regular input

cpsdqs/unified-input
cpsdqs 7 years ago
parent a54343ec23
commit 5cd58507a9
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
  1. 6
      js/lib/keymaster.js
  2. 36
      js/soft_keyboard.js
  3. 1
      js/term_input.js
  4. 32
      js/term_screen.js
  5. 8
      sass/pages/_term.scss

@ -277,7 +277,8 @@
}; };
// set the handlers globally on document // set the handlers globally on document
addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48 // Disabled for ESPTerm:
// addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48
addEvent(document, 'keyup', clearModifier); addEvent(document, 'keyup', clearModifier);
// reset modifiers to false whenever the window is (re)focused. // reset modifiers to false whenever the window is (re)focused.
@ -305,6 +306,9 @@
global.key.noConflict = noConflict; global.key.noConflict = noConflict;
global.key.unbind = unbindKey; global.key.unbind = unbindKey;
// Added for ESPTerm:
global.key.dispatch = dispatch;
if(typeof module !== 'undefined') module.exports = assignKey; if(typeof module !== 'undefined') module.exports = assignKey;
})(window); })(window);

@ -2,6 +2,15 @@ window.initSoftKeyboard = function (screen, input) {
const keyInput = qs('#softkb-input') const keyInput = qs('#softkb-input')
if (!keyInput) return // abort, we're not on the terminal page if (!keyInput) return // abort, we're not on the terminal page
document.addEventListener('paste', e => {
e.preventDefault()
console.log('document paste', e)
})
keyInput.addEventListener('paste', e => {
e.preventDefault()
console.log('keyInput paste', e)
})
let keyboardOpen = false let keyboardOpen = false
// moves the input to where the cursor is on the canvas. // moves the input to where the cursor is on the canvas.
@ -59,18 +68,19 @@ window.initSoftKeyboard = function (screen, input) {
lastCompositionString = newValue lastCompositionString = newValue
} }
// override keymaster filter to include keyInput
let originalFilter = key.filter
key.filter = function (event) {
if (event.target === keyInput) return true
return originalFilter(event)
}
keyInput.addEventListener('keydown', e => { keyInput.addEventListener('keydown', e => {
if (e.key === 'Unidentified') return if (e.key === 'Unidentified') return
keyInput.value = '' keyInput.value = ''
if (e.key === 'Backspace') { key.dispatch(e)
e.preventDefault()
input.sendString('\b')
} else if (e.key === 'Enter') {
e.preventDefault()
input.sendString('\x0d')
}
}) })
keyInput.addEventListener('keypress', e => { keyInput.addEventListener('keypress', e => {
@ -106,4 +116,16 @@ window.initSoftKeyboard = function (screen, input) {
}) })
screen.on('open-soft-keyboard', () => keyInput.focus()) screen.on('open-soft-keyboard', () => keyInput.focus())
screen.canvas.addEventListener('mouseup', e => {
if (document.activeElement !== keyInput) keyInput.focus()
})
keyInput.addEventListener('focus', () => {
qs('#screen').classList.add('focused')
screen.window.focused = true
})
keyInput.addEventListener('blur', () => {
qs('#screen').classList.remove('focused')
screen.window.focused = false
})
} }

@ -144,6 +144,7 @@ window.Input = function (conn) {
function initKeys ({ allFn }) { function initKeys ({ allFn }) {
// This takes care of text characters typed // This takes care of text characters typed
window.addEventListener('keypress', function (evt) { window.addEventListener('keypress', function (evt) {
return
if (cfg.no_keys) return if (cfg.no_keys) return
let str = '' let str = ''
if (evt.key) str = evt.key if (evt.key) str = evt.key

@ -117,13 +117,14 @@ window.TermScreen = class TermScreen extends EventEmitter {
fitIntoHeight: 0, fitIntoHeight: 0,
debug: false, debug: false,
graphics: 0, graphics: 0,
statusScreen: null statusScreen: null,
focused: false
} }
// scaling caused by fitIntoWidth/fitIntoHeight // scaling caused by fitIntoWidth/fitIntoHeight
this._windowScale = 1 this._windowScale = 1
// properties of this.window that require updating size and redrawing // properties of this.window that change the size (used for diffing)
this.windowState = { this.windowState = {
width: 0, width: 0,
height: 0, height: 0,
@ -907,7 +908,8 @@ window.TermScreen = class TermScreen extends EventEmitter {
devicePixelRatio, devicePixelRatio,
gridScaleX, gridScaleX,
gridScaleY, gridScaleY,
statusScreen statusScreen,
focused
} = this.window } = this.window
if (statusScreen) { if (statusScreen) {
@ -946,7 +948,7 @@ window.TermScreen = class TermScreen extends EventEmitter {
let isCursor = !this.cursor.hanging && let isCursor = !this.cursor.hanging &&
this.cursor.x === x && this.cursor.x === x &&
this.cursor.y === y && this.cursor.y === y &&
this.cursor.blinkOn && (this.cursor.blinkOn || !focused) &&
this.cursor.visible this.cursor.visible
let wasCursor = x === this.drawnCursor[0] && y === this.drawnCursor[1] let wasCursor = x === this.drawnCursor[0] && y === this.drawnCursor[1]
@ -974,7 +976,8 @@ window.TermScreen = class TermScreen extends EventEmitter {
bg !== this.drawnScreenBG[cell] || bg !== this.drawnScreenBG[cell] ||
attrs !== this.drawnScreenAttrs[cell] || attrs !== this.drawnScreenAttrs[cell] ||
isCursor !== wasCursor || isCursor !== wasCursor ||
(isCursor && this.cursor.style !== this.drawnCursor[2]) (isCursor && this.cursor.style !== this.drawnCursor[2]) ||
(isCursor && !focused) // hack to ensure cursor is redrawn when blurred. Side effect: will always redraw when blurred
let font = attrs & FONT_MASK let font = attrs & FONT_MASK
if (!fontGroups.has(font)) fontGroups.set(font, []) if (!fontGroups.has(font)) fontGroups.set(font, [])
@ -1086,7 +1089,24 @@ window.TermScreen = class TermScreen extends EventEmitter {
if (isCursor && !inSelection) { if (isCursor && !inSelection) {
ctx.save() ctx.save()
ctx.beginPath() ctx.beginPath()
if (this.cursor.style === 'block') { if (!focused) {
let left = x * cellWidth
let top = y * cellHeight
let right = (x + 1) * cellWidth
let bottom = (y + 1) * cellHeight
// draw a rect clockwise
ctx.moveTo(left, top)
ctx.lineTo(right, top)
ctx.lineTo(right, bottom)
ctx.lineTo(left, bottom)
ctx.lineTo(left, top)
// draw another smaller rect counter-clockwise to subtract
ctx.moveTo(left + 2, top + 2)
ctx.lineTo(left + 2, bottom - 2)
ctx.lineTo(right - 2, bottom - 2)
ctx.lineTo(right - 2, top + 2)
ctx.lineTo(left + 2, top + 2)
} else if (this.cursor.style === 'block') {
// block // block
ctx.rect(x * cellWidth, y * cellHeight, cellWidth, cellHeight) ctx.rect(x * cellWidth, y * cellHeight, cellWidth, cellHeight)
} else if (this.cursor.style === 'bar') { } else if (this.cursor.style === 'bar') {

@ -20,17 +20,21 @@ body.term {
background: #111213; background: #111213;
padding: 6px; padding: 6px;
display: inline-block; display: inline-block;
border: 2px solid #3983CD; border: 2px solid #224364;
position: relative; position: relative;
line-height: 0; line-height: 0;
@include noselect();
cursor: default; cursor: default;
canvas.selectable { canvas.selectable {
cursor: text; cursor: text;
} }
@include noselect(); &.focused {
border-color: #3983CD;
}
// Dummy input field used to open soft keyboard // Dummy input field used to open soft keyboard
#softkb-input { #softkb-input {

Loading…
Cancel
Save