Unify soft keyboard input and regular input

js/lib/keymaster.js

@@ -277,7 +277,8 @@
   };
 
   // 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);
 
   // reset modifiers to false whenever the window is (re)focused.
@@ -305,6 +306,9 @@
   global.key.noConflict = noConflict;
   global.key.unbind = unbindKey;
 
+  // Added for ESPTerm:
+  global.key.dispatch = dispatch;
+
   if(typeof module !== 'undefined') module.exports = assignKey;
 
 })(window);

js/soft_keyboard.js

@@ -2,6 +2,15 @@ window.initSoftKeyboard = function (screen, input) {
   const keyInput = qs('#softkb-input')
   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
 
   // moves the input to where the cursor is on the canvas.
@@ -59,18 +68,19 @@ window.initSoftKeyboard = function (screen, input) {
     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 => {
     if (e.key === 'Unidentified') return
 
     keyInput.value = ''
 
-    if (e.key === 'Backspace') {
-      e.preventDefault()
-      input.sendString('\b')
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      input.sendString('\x0d')
-    }
+    key.dispatch(e)
   })
 
   keyInput.addEventListener('keypress', e => {
@@ -106,4 +116,16 @@ window.initSoftKeyboard = function (screen, input) {
   })
 
   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
+  })
 }

js/term_input.js

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

js/term_screen.js

@@ -117,13 +117,14 @@ window.TermScreen = class TermScreen extends EventEmitter {
       fitIntoHeight: 0,
       debug: false,
       graphics: 0,
-      statusScreen: null
+      statusScreen: null,
+      focused: false
     }
 
     // scaling caused by fitIntoWidth/fitIntoHeight
     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 = {
       width: 0,
       height: 0,
@@ -907,7 +908,8 @@ window.TermScreen = class TermScreen extends EventEmitter {
       devicePixelRatio,
       gridScaleX,
       gridScaleY,
-      statusScreen
+      statusScreen,
+      focused
     } = this.window
 
     if (statusScreen) {
@@ -946,7 +948,7 @@ window.TermScreen = class TermScreen extends EventEmitter {
       let isCursor = !this.cursor.hanging &&
         this.cursor.x === x &&
         this.cursor.y === y &&
-        this.cursor.blinkOn &&
+        (this.cursor.blinkOn || !focused) &&
         this.cursor.visible
 
       let wasCursor = x === this.drawnCursor[0] && y === this.drawnCursor[1]
@@ -974,7 +976,8 @@ window.TermScreen = class TermScreen extends EventEmitter {
         bg !== this.drawnScreenBG[cell] ||
         attrs !== this.drawnScreenAttrs[cell] ||
         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
       if (!fontGroups.has(font)) fontGroups.set(font, [])
@@ -1086,7 +1089,24 @@ window.TermScreen = class TermScreen extends EventEmitter {
         if (isCursor && !inSelection) {
           ctx.save()
           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
             ctx.rect(x * cellWidth, y * cellHeight, cellWidth, cellHeight)
           } else if (this.cursor.style === 'bar') {

sass/pages/_term.scss

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