Refactored plan-display a bit..

src/app/plan-display/plan-display.component.html

@@ -1,14 +1,11 @@
-<div class="target" [style.background-color]="backgroundColor ? backgroundColor.rgbaString : 'rgba(0, 0, 0, 0.1)'" #targetRef>
-    <ng-container *ngIf="plan">
-        Has Plan!
-    </ng-container>    
-</div>
-<ngx-moveable 
-    [target]="targetRef" 
-    [draggable]="draggable" 
-    [resizable]="true" 
-    (drag)="onDrag($event)" 
-    (resize)="onResize($event)" 
-    (dragEnd)="onDragEnd($event)"
-    (resizeEnd)="onResizeEnd($event)"
-    #moveableRef></ngx-moveable>
+<ng-container *ngIf="rect">
+    <div class="target" [style.background-color]="backgroundColor ? backgroundColor.rgbaString : 'rgba(0, 0, 0, 0.1)'"
+        [style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'" #targetRef>
+        <ng-container *ngIf="plan">
+            Has Plan!
+        </ng-container>
+    </div>
+
+    <ngx-moveable [target]="targetRef" [draggable]="draggable" [resizable]="true" (drag)="onDrag($event)"
+        (resize)="onResize($event)" (dragEnd)="onDragEnd($event)" (resizeEnd)="onResizeEnd($event)"></ngx-moveable>
+</ng-container>

src/app/plan-display/plan-display.component.ts

@@ -1,87 +1,61 @@
-import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { NgxMoveableComponent, OnDragEnd, OnResize, OnResizeEnd } from 'ngx-moveable';
 import { OnDrag } from 'ngx-moveable';
 import { ConfigService } from '../services/config.service';
 import { Rect } from '../models/generated/Rect';
 import { Plan } from '../models/plan';
 import { Color } from '../color-picker/color-picker.component';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'plan-display',
   templateUrl: './plan-display.component.html',
   styleUrls: ['./plan-display.component.scss']
 })
-export class PlanDisplayComponent implements OnInit, AfterViewInit {
+export class PlanDisplayComponent implements AfterViewInit {
+  @ViewChild('targetRef') targetRef: any;
+  @Input() plan: boolean = false;
+  @Input() backgroundColor?: Color;
   draggable: boolean = true;
-  initialized: boolean = false;
+  rect?: Rect;
 
-  @Input()
-  plan: boolean = false;
-
-  @Input()
-  backgroundColor?: Color;
-
-  @ViewChild("moveableRef")
-  moveableRef!: NgxMoveableComponent;
-
-  constructor(private configService: ConfigService) {}
-
-  ngOnInit(): void {
+  constructor(private configService: ConfigService, private cdr: ChangeDetectorRef) { }
 
+  transform() {
+    return `translate(${this.rect!.x}px, ${this.rect!.y}px)`;
   }
 
-  ngAfterViewInit(): void {
-    let init = this.configService.config.initialPlanWindowPosition;
-    this.setPosition(init.x, init.y);
-    this.setArea(init.width, init.height);
-    this.initialized = true;
-    console.log("init: ", init);
-    console.log("cfg at init: ", this.configService.config);
+  width() {
+    return `${this.rect!.width}px`;
   }
 
-  setPosition(x: number, y: number) {
-    this.moveableRef.request("draggable", {
-      x,
-      y,
-    }, true);
+  height() {
+    return `${this.rect!.height}px`;
   }
 
-  setArea(width: number, height: number) {
-    this.moveableRef.request("resizable", {
-      offsetWidth: width,
-      offsetHeight: height,
-    }, true);
-  }
-
-  toRect(): Rect {
-    let rectInfo = this.moveableRef.getRect();
-    return {
-      x: rectInfo.left,
-      y: rectInfo.top,
-      width: rectInfo.width,
-      height: rectInfo.height
-    };
+  ngAfterViewInit(): void {
+    this.rect = this.configService.config.initialPlanWindowPosition;
+    this.cdr.detectChanges();
   }
 
   onDrag(e: OnDrag) {
-    e.target.style.transform = e.transform;
+    this.rect!.x = e.translate[0];
+    this.rect!.y = e.translate[1];
   }
 
   onDragEnd(e: OnDragEnd) {
-    if (this.initialized) {
-      this.configService.config.initialPlanWindowPosition = this.toRect();
-    }
+    this.configService.config.initialPlanWindowPosition = this.rect!;
   }
 
   onResize(e: OnResize) {
-    e.target.style.width = `${e.width}px`;
-    e.target.style.height = `${e.height}px`;
-    e.target.style.transform = e.drag.transform;
+    this.rect!.width = e.width;
+    this.rect!.height = e.height;
+    this.onDrag(e.drag);
+
+    console.log(e.style);
   }
 
   onResizeEnd(e: OnResizeEnd) {
-    if (this.initialized) {
-      this.configService.config.initialPlanWindowPosition = this.toRect();
-    }
+    this.configService.config.initialPlanWindowPosition = this.rect!;
   }
 }

src/app/services/config.service.ts

@@ -19,8 +19,6 @@ export class ConfigService {
   init() {
     return invoke<Config>('load_config').then(cfg => {
       const _this = this;
-      
-
       // Mostly to wrap setters so we can run the (debounced) sync function on any config changes!
       this.config = new Proxy(cfg, {
         get(target: any, property) {
@@ -34,9 +32,6 @@ export class ConfigService {
         }
       });
 
-      console.log("Loaded cfg:", this.config);
-      console.log("Loaded x:", this.config.initialPlanWindowPosition.x);
-
     });
   }
 
@@ -45,7 +40,6 @@ export class ConfigService {
   }
 
   private underlyingSync() {
-    console.log("saving config");
     invoke('set_config', { config: this.config });
   }
 }

src/app/services/overlay.service.ts

@@ -20,7 +20,6 @@ export class OverlayService {
 
 
   constructor(private shortcuts: ShortcutService, private events: EventsService, private configService: ConfigService) {
-    console.log("cfg", configService);
     this.shortcuts.register(this.configService.config.toggleOverlay, this.onToggleOverlay);
     this.events.listen<StateEvent>("OverlayStateChange").subscribe(this.onOverlayStateChange);
   }
@@ -46,7 +45,6 @@ export class OverlayService {
 
       return acc.concat('+').concat(curr);
     }, '');
-    console.log(chord);
 
     this.shortcuts.rebind(chord, this.onToggleOverlay);
   }