Version 2.2.0 / Upgrade to XTerm version 5.1.0

.gitignore

@@ -10,6 +10,7 @@ package.json
 webpack.config.js
 /error-screenshots
 drivers
+tsconfig.json
 .idea
 types.d.ts
 /frontend/generated

pom.xml

@@ -4,7 +4,7 @@
 
     <groupId>com.flowingcode.addons</groupId>
     <artifactId>xterm-console</artifactId>
-    <version>2.1.2-SNAPSHOT</version>
+    <version>2.2.0-SNAPSHOT</version>
     <name>XTerm Console Addon</name>
     <description>Integration of xterm.js for Vaadin Flow</description>
 

src/main/java/com/flowingcode/vaadin/addons/xterm/ITerminalFit.java

@@ -22,7 +22,7 @@
 import com.vaadin.flow.component.HasElement;
 import com.vaadin.flow.component.dependency.NpmPackage;
 
-@NpmPackage(value = "xterm-addon-fit", version = "0.5.0")
+@NpmPackage(value = "xterm-addon-fit", version = "0.7.0")
 public interface ITerminalFit extends HasElement {
 
   default void fit() {

src/main/java/com/flowingcode/vaadin/addons/xterm/XTermBase.java

@@ -57,7 +57,7 @@
 
 /** Server-side component for the XTerm component. */
 @SuppressWarnings("serial")
-@NpmPackage(value = "xterm", version = "4.19.0")
+@NpmPackage(value = "xterm", version = "5.1.0")
 @JsModule("./fc-xterm/xterm-element.ts")
 @CssImport("xterm/css/xterm.css")
 public abstract class XTermBase extends Component
@@ -124,7 +124,11 @@ private CompletableFuture<JsonValue> invoke(boolean hasResult, String name, Obje
         } else {
           arg = (Serializable) args[0];
         }
-        return executeJs(false, "this.terminal.options[$0]=$1", name, arg);
+        if (name.equals("bellStyle") || name.equals("bellSound")) {
+          return executeJs(false, "this[$0]=$1", name, arg);
+        } else {
+          return executeJs(false, "this.terminal.options[$0]=$1", name, arg);
+        }
       } else if (args == null || args.length == 0) {
         return executeJs(hasResult, "return this.terminal[$0]()", name);
       } else if (args.length == 1) {

src/main/resources/META-INF/frontend/fc-xterm/xterm-element.ts

@@ -136,7 +136,10 @@ export class XTermElement extends LitElement implements TerminalMixin {
   terminal: Terminal;
   disabled: boolean = false;
   node: XTermElement;
-
+
+  bellSound: string;
+  bellStyle: 'none' | 'sound'
+
   customKeyEventHandlers: CustomKeyEventHandlerRegistry;
 
   render(): TemplateResult {
@@ -150,6 +153,12 @@ export class XTermElement extends LitElement implements TerminalMixin {
     this.customKeyEventHandlers = new CustomKeyEventHandlerRegistry();
     this.terminal = new Terminal();	
 	this.node = this;
+
+    //https://gist.github.com/literallylara/7ece1983fab47365108c47119afb51c7
+    //(C) Lara Sophie Schütt 2016, CC0 
+    for(var i=44100*0.1,d="";i--;)d+=String.fromCharCode(~~((Math.sin(i/44100*2*Math.PI*800)+1)*128)); 
+    this.bellSound = "data:Audio/WAV;base64,"+btoa("RIFFdataWAVEfmt "+atob("EAAAAAEAAQBErAAARKwAAAEACABkYXRh/////w==")+d);
+    this.bellStyle = 'none';
   }
 
   connectedCallback() {
@@ -163,11 +172,12 @@ export class XTermElement extends LitElement implements TerminalMixin {
     term.onData(e => {
         term.write(e.replace(/\r/g,'\x1b[<N\n'));
     });
-
-    //https://gist.github.com/literallylara/7ece1983fab47365108c47119afb51c7
-    //(C) Lara Sophie Schütt 2016, CC0 
-    for(var i=44100*0.1,d="";i--;)d+=String.fromCharCode(~~((Math.sin(i/44100*2*Math.PI*800)+1)*128)); 
-    term.options.bellSound = "data:Audio/WAV;base64,"+btoa("RIFFdataWAVEfmt "+atob("EAAAAAEAAQBErAAARKwAAAEACABkYXRh/////w==")+d);
+
+    term.onBell(() => {
+      if (this.bellStyle == 'sound') {
+        new Audio(this.bellSound).play();
+      }
+    });
 
     term.attachCustomKeyEventHandler(ev => {
       if (ev.type!=='keydown') return false;

src/main/resources/META-INF/frontend/fc-xterm/xterm-insertfix-mixin.ts

@@ -43,6 +43,7 @@ class InsertFixAddon extends TerminalAddon<TerminalMixin> {
 			const printedLength = end-start;
 			let  trimmedLength = bufferRow.getTrimmedLength();
 
+			//If the inserted characters would overflow the current liner
 			if (buffer.x!=trimmedLength && trimmedLength+printedLength > bufferRow.length) {
 				let range = buffer.getWrappedRangeForLine(buffer.y + buffer.ybase)
 				range.first = buffer.y + buffer.ybase;
@@ -54,22 +55,27 @@ class InsertFixAddon extends TerminalAddon<TerminalMixin> {
 					src = buffer.lines.get(range.last);
 					trimmedLength = src.getTrimmedLength();
 				}
+
+				//If the inserted characters would overflow the last line in wrapped range
 				if (trimmedLength+printedLength > src.length) {
+					//Then wrap the next row
 					if (range.last == buffer._rows - 1) {
 						inputHandler._bufferService.scroll(inputHandler._eraseAttrData(), true);
 					}
 					const dst = buffer.lines.get(range.last+1);
 					dst.isWrapped = true;
 					dst.copyCellsFrom(src, trimmedLength-printedLength, 0, printedLength);
-					inputHandler._dirtyRowService.markDirty(buffer.y+1);
+					inputHandler._dirtyRowTracker.markDirty(buffer.y+1);
 				}
 
+				//Allocate space for the characters to be inserted
+				//Wrap-move characters in page memory to the next line
 				for (let y=range.last;y>range.first;y--) {
 					let dst = src;
 					src= buffer.lines.get(y-1);
 					dst.insertCells(0, printedLength, buffer.getNullCell(inputHandler._eraseAttrData()));
 					dst.copyCellsFrom(src, buffer._cols-printedLength, 0, printedLength);
-					inputHandler._dirtyRowService.markDirty(y);
+					inputHandler._dirtyRowTracker.markDirty(y);
 				}				
 			}
 		}

src/main/resources/META-INF/frontend/fc-xterm/xterm-selection-mixin.ts

@@ -97,12 +97,12 @@ class SelectionAddon extends TerminalAddon<ISelectionMixin> {
 			let buffer = (terminal.buffer.active as any)._buffer;
 			let range = buffer.getWrappedRangeForLine(buffer.ybase+buffer.y);
 
-			let pos = terminal.getSelectionPosition() || {startRow: buffer.ybase+buffer.y, startColumn: buffer.x};
+			let pos = terminal.getSelectionPosition() || {start: {y: buffer.ybase+buffer.y, x: buffer.x}};
 
 			resetSelection();
 			ensureSelection();
 			let dx = range.first * terminal.cols - this.__selectionAnchor!;
-			if (pos.startRow != range.first || pos.startColumn != promptLength()) {
+			if (pos.start.y != range.first || pos.start.x != promptLength()) {
 				dx+= promptLength();
 			}
 
@@ -126,8 +126,7 @@ class SelectionAddon extends TerminalAddon<ISelectionMixin> {
 				let buffer = (terminal.buffer.active as any)._buffer;
 				let range = buffer.getWrappedRangeForLine(buffer.ybase+buffer.y);				
 				let pos = terminal.getSelectionPosition();					
-				if (pos && pos.startRow>=range.first && pos.endRow<=range.last) {
-					//let selectionStart = pos.startRow * terminal.cols + pos.startColumn;
+				if (pos && pos.start.y>=range.first && pos.end.y<=range.last) {
 					if (!this.__selectionRight) {
 						//cursor backward wrapped
 						terminal.write("\x1b[<" + this.__selectionLength + "L");