added canvas renderer

codeeditor-app/elements/app-root/app-root.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from "../_base";
+import { BaseElement } from "../../../shared/_base";
 import './app-root.less';
 
 export class AppRoot extends BaseElement {

codeeditor-app/elements/code-editor/code-editor.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from "../_base";
+import { BaseElement } from "../../../shared/_base";
 import './code-editor.less';
 import * as monaco from 'monaco-editor';
 import { OutputFrame } from "../output-frame/output-frame";
@@ -32,15 +32,63 @@ export class CodeEditor extends BaseElement {
                     suggestions: [
                         {
                             label: 'for',
-                            kind: monaco.languages.CompletionItemKind.Function,
+                            kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: 'for (let i = 0; i < array.length; i++) {\n\n}',
+                            insertText: 'for (let i = 0; i < ${1:array}.length; i++) {\n\t$0\n}',
                             range: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                         },
                         {
                             label: 'forr',
+                            kind: monaco.languages.CompletionItemKind.Snippet,
+                            insertText: 'for (var i = ${1:array}.length - 1; i >= 0; i--) {\n\t$0\n}',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        },
+                        {
+                            label: 'rect',
+                            detail: "details",
                             kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'for (var i = array.length - 1; i >= 0; i--) {\n\n}',
+                            insertText: 'rect(${1:x}, ${2:y}, ${3:width}, ${4:height})',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        },
+                        {
+                            label: 'box',
+                            detail: "details",
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: 'box(${1:x}, ${2:y}, ${3:width}, ${4:height})',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        },
+                        {
+                            label: 'width',
+                            detail: "gets the width of the canvas",
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: 'width()',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
+                        },
+                        {
+                            label: 'height',
+                            detail: "gets the height of the canvas",
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: 'height()',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
+                        },
+                        {
+                            label: 'center',
+                            detail: "gets the center of the canvas",
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: 'center()',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
+                        },
+                        {
+                            label: 'rand',
+                            detail: "gets a random number between two numbers",
+                            kind: monaco.languages.CompletionItemKind.Function,
+                            insertText: 'rand(${1:from}, ${1:to})',
                             range: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
                         }

codeeditor-app/elements/code-editor/injects/editor-init.txt

@@ -14,3 +14,7 @@ while (i < 10) {
 var obj = { hello: true, moto: "enabled" };
 
 console.log(obj);
+
+rect(10, 10, 100, 100);
+rect(rand(10, 30), rand(10, 30), 100, 100);
+rect(30, 30, 100, 100);

codeeditor-app/elements/notification-bubbles/notification-bubble.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from "../_base";
+import { BaseElement } from "../../../shared/_base";
 import './notification-bubble.less';
 
 export class NotificationBubble extends BaseElement {

codeeditor-app/elements/notification-bubbles/notification-bubbles.ts

@@ -1,5 +1,5 @@
 import { messageListener } from "../../../shared/message-listener";
-import { BaseElement } from "../_base";
+import { BaseElement } from "../../../shared/_base";
 import { NotificationBubble } from "./notification-bubble";
 import './notification-bubbles.less';
 

codeeditor-app/elements/output-frame/output-frame.ts

@@ -1,4 +1,4 @@
-import { BaseElement } from "../_base";
+import { BaseElement } from "../../../shared/_base";
 import './output-frame.less';
 import { NotificationBubbles } from "../notification-bubbles/notification-bubbles";
 import { GetOutputFrameUrl } from "../../../shared/url-helpers";

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);
 });
@@ -20,3 +25,16 @@ 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);
+}