introduce debounce on output updates + linked box

outputframe-app/app.less

@@ -15,7 +15,6 @@ body {
     background-color: #f0f0f0;
 }
 
-
 @media (prefers-color-scheme: dark) {
     body {
         background-color: #272727;

outputframe-app/boot.ts

@@ -6,7 +6,7 @@ import { createScript } from '../shared/create-script';
 import { messageListener } from '../shared/message-listener';
 import { postMessage, postResponseMessage } from '../shared/post-message';
 import { RenderCanvas } from './elements/render-canvas/render-canvas';
-import { getCenter, getHeight, getRandom, getWidth, rect } from './injects/dom-helpers';
+import { getCenter, getHeight, getRandom, getWidth, rect, box } from './injects/dom-helpers';
 
 
 window.customElements.define('render-canvas', RenderCanvas);
@@ -29,7 +29,7 @@ setOnErrorListener((type, value) => {
 //@ts-ignore
 window.rect = rect;
 //@ts-ignore
-window.box = rect;
+window.box = box;
 //@ts-ignore
 window.width = getWidth;
 //@ts-ignore

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");
-    }
 }

outputframe-app/injects/dom-helpers.ts

@@ -9,6 +9,11 @@ export function rect(x: number, y: number, width: number, height: number): void
     renderCanvas.drawRect(x, y, width, height);
 }
 
+export function box(x: number, y: number, width: number, height: number): void {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    renderCanvas.queueRect(x, y, width, height);
+}
+
 export function getWidth(): number {
     var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
     return renderCanvas.units.width;
@@ -16,14 +21,19 @@ export function getWidth(): number {
 
 export function getHeight(): number {
     var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
-    return renderCanvas.units.heigt;
+    return renderCanvas.units.height;
 }
 
 export function getCenter(): number {
     var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
-    return renderCanvas.units.heigt / 2;
+    return renderCanvas.units.height / 2;
 }
 
 export function getRandom(min: number, max: number): number {
     return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+export function executeDrawQueue() {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    renderCanvas.executeDrawQueue();
 }

outputframe-app/static/execution-time-error.html

@@ -23,6 +23,13 @@
         small {
             font-size: 0.6em;
         }
+
+
+        @media (prefers-color-scheme: dark) {
+            .center {
+                color: white;
+            }
+        }
     </style>
 </head>
 

outputframe-app/static/index.html

@@ -6,7 +6,6 @@
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>output</title>
     <base href="/" />
-    
 </head>
 
 <body>