added canvas renderer

outputframe-app/app.html

@@ -0,0 +1 @@
+<render-canvas></render-canvas>

outputframe-app/app.less

@@ -5,7 +5,12 @@ html, body {
     overflow: hidden;
 }
 
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
 body {
     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
-    padding: 10px;
+    
+    background-color: #e3e3e3;
 }

outputframe-app/boot.ts

@@ -5,9 +5,14 @@ import { setOnErrorListener } from './injects/on-error';
 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';
 
 
+window.customElements.define('render-canvas', RenderCanvas);
+
 document.body.innerHTML += bootHtml;
+
 watchConsole((type, value) => {
     postMessage(parent, type, value);
 });
@@ -19,4 +24,17 @@ messageListener((type, value, id) => {
 });
 setOnErrorListener((type, value) => {
     postMessage(parent, type, value);
-});
+});
+
+//@ts-ignore
+window.rect = rect;
+//@ts-ignore
+window.box = rect;
+//@ts-ignore
+window.width = getWidth;
+//@ts-ignore
+window.height = getHeight;
+//@ts-ignore
+window.center = getCenter;
+//@ts-ignore
+window.rand = getRandom;

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

@@ -0,0 +1,20 @@
+render-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+}
+
+render-canvas canvas {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border: 1px solid #c2c2c2;
+    background-color: white;
+}

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

@@ -0,0 +1,73 @@
+import { BaseElement } from '../../../shared/_base';
+import './render-canvas.less';
+
+export class RenderCanvas extends BaseElement {
+    public canvas: HTMLCanvasElement | null = null;
+    public ctx: CanvasRenderingContext2D | null = null;
+    public width: number = 0;
+    public height: number = 0;
+    public units = {
+        width: 400,
+        heigt: 400
+    }
+
+    onInit(): void {
+        this.canvas = document.createElement("canvas");
+        this.ctx = <CanvasRenderingContext2D>this.canvas.getContext("2d");
+        this.appendChild(this.canvas);
+
+        window.addEventListener("resize", () => {
+            this.handleCanvasResize();
+        });
+
+        this.handleCanvasResize();
+    }
+
+    private handleCanvasResize() {
+        if (this.parentElement && this.canvas) {
+            this.width = this.parentElement.clientWidth;
+            this.height = this.parentElement.clientHeight;
+
+            this.canvas.style.width = this.width + "px";
+            this.canvas.style.height = this.width + "px";
+            this.canvas.setAttribute("width", this.width.toString());
+            this.canvas.setAttribute("height", this.width.toString());
+        }
+    }
+
+    drawPoly(points: { x: number, y: number }[]) {
+        if (this.ctx) {
+            this.ctx.fillStyle = "rgba(0,0,0,0)";
+            this.ctx.strokeStyle = "rgba(0,0,0,1)";
+            this.ctx.beginPath();
+
+            for (var i = 0; i < points.length; i++) {
+                var point = points[i];
+
+                if (i === 0) {
+                    this.ctx.moveTo(this.unitsToPx(point.x), this.unitsToPx(point.y));
+                }
+                else {
+                    this.ctx.lineTo(this.unitsToPx(point.x), this.unitsToPx(point.y));
+                }
+            }
+
+            this.ctx.closePath();
+            this.ctx.fill();
+            this.ctx.stroke();
+        }
+    }
+
+    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 }]);
+    }
+
+    unitsToPx(unitNumber: number) {
+        var newPPU = (this.width / this.units.width);
+        return unitNumber * newPPU;
+    }
+
+    onUpdate(): void {
+        console.log("APP ROOT UPDATE");
+    }
+}

outputframe-app/injects/dom-helpers.ts

@@ -0,0 +1,29 @@
+import { RenderCanvas } from "../elements/render-canvas/render-canvas";
+
+export function clear() {
+
+}
+
+export function rect(x: number, y: number, width: number, height: number): void {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    renderCanvas.drawRect(x, y, width, height);
+}
+
+export function getWidth(): number {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    return renderCanvas.units.width;
+}
+
+export function getHeight(): number {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    return renderCanvas.units.heigt;
+}
+
+export function getCenter(): number {
+    var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
+    return renderCanvas.units.heigt / 2;
+}
+
+export function getRandom(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}