Focus feature works (when there is a sequence set. STill has bugs

browser/index.ts

@@ -13,6 +13,7 @@ class Display {
   private img : HTMLImageElement;
   private screen : any;
   private sequence : boolean = false;
+  private focus : boolean = false;
 
   private offsetX : number = 0;
   private offsetY : number = 0;
@@ -89,7 +90,7 @@ class Display {
   }
 
   public updateDisplay () {
-    if (!this.sequence) {
+    if (!this.sequence && !this.focus) {
       return;
     }
     //console.log(this.sequence);
@@ -120,6 +121,7 @@ class Display {
 
   public set (state : State) {
     this.sequence = true;
+    this.focus = false;
     this.offsetX = state.offset.x;
     this.offsetY = state.offset.y;
     this.width = state.display.width;
@@ -127,6 +129,14 @@ class Display {
     this.updateDisplay();
   }
 
+  public setFocus () {
+    this.focus = true;
+  }
+
+  public unsetFocus () {
+    this.focus = false;
+  }
+
   private onResize (event : any) {
     this.updateSize();
     this.clear();
@@ -325,6 +335,8 @@ class Client {
       case 'focus' :
         this.receiveFocus(msg);
         break;
+      case 'unfocus' :
+        this.receiveUnfocus(msg);
       case 'display' :
         this.receiveDisplay(msg);
         break;
@@ -460,6 +472,12 @@ class Client {
   }
 
   private receiveFocus (msg : Message) {
+    this.display.setFocus();
+    this.display.updateImage();
+  }
+
+  private receiveUnfocus (msg : Message) {
+    this.display.unsetFocus();
     this.display.updateImage();
   }
 

dist/index.js

@@ -288,6 +288,9 @@ async function select(id) {
     return true;
 }
 function start() {
+    if (focus !== null) {
+        stopFocus();
+    }
     sequence.start();
 }
 function stop() {
@@ -307,6 +310,10 @@ async function focus() {
     let dims;
     let state;
     let filePath;
+    if (focusImage !== null) {
+        await stopFocus();
+        return;
+    }
     if (sequence.isLoaded()) {
         state = sequence.getState();
         pos = {
@@ -326,8 +333,15 @@ async function focus() {
         };
     }
     focusImage = await testimage_1.TestImage.Focus(pos.w, pos.h);
+    await fd.load(focusImage, pos.x, pos.y, pos.w, pos.h);
+    await fd.display(focusImage);
     send({ cmd: 'focus' });
 }
+async function stopFocus() {
+    focusImage = null;
+    await fd.stop(focusImage);
+    send({ cmd: 'unfocus' });
+}
 function offset(msg) {
     let current = sequence.getCurrent();
     if (current !== null) {

src/index.ts

@@ -284,6 +284,9 @@ async function select (id : string) : Promise<boolean> {
 }
 
 function start () {
+	if (focus !== null) {
+		stopFocus();
+	}
 	sequence.start();
 }
 
@@ -307,6 +310,10 @@ async function focus () {
 	let dims : Dimensions;
 	let state : State;
 	let filePath : string;
+	if (focusImage !== null) {
+		await stopFocus();
+		return;
+	}
 	if (sequence.isLoaded()) {
 		state = sequence.getState();
 		pos = {
@@ -325,9 +332,17 @@ async function focus () {
 		}
 	}
 	focusImage = await TestImage.Focus(pos.w, pos.h);
+	await fd.load (focusImage, pos.x, pos.y, pos.w, pos.h);
+	await fd.display(focusImage);
 	send({ cmd : 'focus' });
 }
 
+async function stopFocus () {
+	focusImage = null;
+	await fd.stop(focusImage);
+	send({ cmd : 'unfocus' });
+}
+
 function offset (msg : Message) {
 	let current : ImageObject = sequence.getCurrent();
 	if (current !== null) {

static/js/index.d.ts

@@ -11,6 +11,7 @@ declare class Display {
     private img;
     private screen;
     private sequence;
+    private focus;
     private offsetX;
     private offsetY;
     private width;
@@ -37,6 +38,8 @@ declare class Display {
     updateImage(): void;
     update(msg: Message): void;
     set(state: State): void;
+    setFocus(): void;
+    unsetFocus(): void;
     private onResize;
 }
 declare class Client {
@@ -83,6 +86,7 @@ declare class Client {
     private receiveDisplay;
     sendFocus(): void;
     private receiveFocus;
+    private receiveUnfocus;
     sendOffset(x: number, y: number): void;
     sendSize(width: number, height: number): void;
     sendScale(scale: number): void;

static/js/index.js

@@ -8,6 +8,7 @@ var SequenceStatus;
 class Display {
     constructor() {
         this.sequence = false;
+        this.focus = false;
         this.offsetX = 0;
         this.offsetY = 0;
         this.width = 0;
@@ -72,7 +73,7 @@ class Display {
         this.ctx.stroke();
     }
     updateDisplay() {
-        if (!this.sequence) {
+        if (!this.sequence && !this.focus) {
             return;
         }
         const screenScaleX = this.screenWidth / this.screen.width;
@@ -96,12 +97,19 @@ class Display {
     }
     set(state) {
         this.sequence = true;
+        this.focus = false;
         this.offsetX = state.offset.x;
         this.offsetY = state.offset.y;
         this.width = state.display.width;
         this.height = state.display.height;
         this.updateDisplay();
     }
+    setFocus() {
+        this.focus = true;
+    }
+    unsetFocus() {
+        this.focus = false;
+    }
     onResize(event) {
         this.updateSize();
         this.clear();
@@ -265,6 +273,8 @@ class Client {
             case 'focus':
                 this.receiveFocus(msg);
                 break;
+            case 'unfocus':
+                this.receiveUnfocus(msg);
             case 'display':
                 this.receiveDisplay(msg);
                 break;
@@ -378,6 +388,11 @@ class Client {
         this.client.send(JSON.stringify({ cmd: 'focus' }));
     }
     receiveFocus(msg) {
+        this.display.setFocus();
+        this.display.updateImage();
+    }
+    receiveUnfocus(msg) {
+        this.display.unsetFocus();
         this.display.updateImage();
     }
     sendOffset(x, y) {