introduce debounce on output updates + linked box

outputframe-app/elements/render-canvas/render-canvas.ts

@@ -8,9 +8,11 @@ export class RenderCanvas extends BaseElement {
     public height: number = 0;
     public units = {
         width: 400,
-        heigt: 400
+        height: 400
     }
-    
+    public drawCount: number = 0;
+    public drawQueue: { x: number, y: number }[][] = [];
+
     public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
     onInit(): void {
@@ -28,8 +30,8 @@ export class RenderCanvas extends BaseElement {
 
     private handleCanvasResize() {
         if (this.parentElement && this.canvas) {
-            this.width = this.parentElement.clientWidth - 20;
-            this.height = this.parentElement.clientHeight - 20;
+            this.width = Math.floor(this.parentElement.clientWidth - 20);
+            this.height = Math.floor(this.parentElement.clientHeight - 20);
 
             var smallest = Math.min(this.width, this.height);
 
@@ -43,7 +45,7 @@ export class RenderCanvas extends BaseElement {
     drawPoly(points: { x: number, y: number }[]) {
         if (this.ctx && this.canvas) {
             this.canvas.style.display = "block";
-            this.ctx.fillStyle = "rgba(0,0,0,0)";
+            this.ctx.fillStyle = this.getColor(true);
             this.ctx.strokeStyle = this.getColor();
             this.ctx.beginPath();
 
@@ -64,20 +66,96 @@ export class RenderCanvas extends BaseElement {
         }
     }
 
-    getColor() {
-        return this.prefersDarkScheme.matches ? 'rgba(255,255,255,1)' : 'rgba(0,0,0,1)';
+    centerOf(points: { x: number, y: number }[]) {
+        var x = 0,
+            y = 0,
+            i,
+            j,
+            f,
+            point1,
+            point2;
+
+        for (i = 0, j = points.length - 1; i < points.length; j = i, i++) {
+            point1 = points[i];
+            point2 = points[j];
+            f = point1.x * point2.y - point2.x * point1.y;
+            x += (point1.x + point2.x) * f;
+            y += (point1.y + point2.y) * f;
+        }
+
+        f = this.areaOf(points) * 6;
+
+        return { x: x / f, y: y / f };
+    };
+
+    areaOf(points: { x: number, y: number }[]) {
+        var area = 0,
+            i,
+            j,
+            point1,
+            point2;
+
+        for (i = 0, j = points.length - 1; i < points.length; j = i, i++) {
+            point1 = points[i];
+            point2 = points[j];
+            area += point1.x * point2.y;
+            area -= point1.y * point2.x;
+        }
+        area /= 2;
+
+        return area;
+    };
+
+    executeDrawQueue() {
+        let prevCenter: { x: number, y: number } | null = null;
+        for (let i = 0; i < this.drawQueue.length; i++) {
+            const points = this.drawQueue[i];
+
+            if (prevCenter != null) {
+                var thisCenter = this.centerOf(points);
+                this.drawPoly([prevCenter, thisCenter]);
+            }
+
+            prevCenter = this.centerOf(points);
+        }
+
+        for (let i = 0; i < this.drawQueue.length; i++) {
+            const points = this.drawQueue[i];
+            this.drawPoly(points);
+            var thisCenter = this.centerOf(points);
+            this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), points[1].x - points[0].x);
+        }
+    }
+
+    drawText(x: number, y: number, text: string, size: number = 20) {
+        if (this.ctx && this.canvas) {
+            this.ctx.moveTo(x, y);
+            this.ctx.fillStyle = this.getColor();
+            this.ctx.textAlign = 'center';
+            this.ctx.textBaseline = 'middle';
+            this.ctx.font = "200 " + size + "px Segoe UI";
+            this.ctx.fillText(text, this.unitsToPx(x), this.unitsToPx(y));
+        }
+    }
+
+    getColor(invert: boolean = false) {
+        return (invert ? !this.prefersDarkScheme.matches : this.prefersDarkScheme.matches) ? 'rgba(255,255,255,1)' : 'rgba(44,44,44,1)';
     }
 
     drawRect(x: number, y: number, width: number, height: number) {
         this.drawPoly([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }]);
     }
 
+    queuePoly(points: { x: number, y: number }[]) {
+        this.drawQueue.push(points);
+    }
+
+    queueRect(x: number, y: number, width: number, height: number) {
+        this.drawQueue.push([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }]);
+    }
+
     unitsToPx(unitNumber: number) {
         var newPPU = Math.min(this.width, this.height) / this.units.width;
         return unitNumber * newPPU;
     }
-
-    onUpdate(): void {
-        console.log("APP ROOT UPDATE");
-    }
 }