added canvas renderer

codeeditor-app/elements/_base.ts

@@ -1,103 +0,0 @@
-export class BaseElement extends HTMLElement {
-    private _hasConnectedCallback: boolean = false;
-    connectedCallback() {
-
-        if (!this._hasConnectedCallback) {
-            this.onInit();
-        }
-        else {
-            this.onUpdate();
-        }
-
-        this._hasConnectedCallback = true;
-
-    }
-
-    onInit() { }
-    onUpdate() { }
-
-    find(tagName: string): HTMLElement | null {
-        
-        var found = document.getElementsByTagName(tagName);
-        if (found[0]) {
-            return <HTMLElement>found[0];
-        }
-        else {
-            return null;
-        }
-    }
-
-    findAncestor(tagName: string, startsWidth: boolean = false): Element | null {
-        var element = <any>this;
-
-        while (element.parentElement !== null) {
-            var parentEle = element.parentElement;
-
-            if (tagName.toUpperCase() === parentEle.tagName.toUpperCase()) {
-                return parentEle;
-            }
-            else if (startsWidth && parentEle.tagName.toUpperCase().indexOf(tagName.toUpperCase()) === 0) {
-                return parentEle;
-            }
-
-            element = parentEle;
-        }
-
-        return null;
-    }
-
-    findSibling(tagName: string, startsWidth: boolean = false): Element | null {
-        var parentEle = this.parentElement;
-
-        if (parentEle != null) {
-
-            for (let i = 0; i < parentEle.children.length; i++) {
-                const child = parentEle.children[i];
-
-                if (child != this) {
-                    if (tagName.toUpperCase() === child.tagName.toUpperCase()) {
-                        return child;
-                    }
-                    else if (startsWidth && child.tagName.toUpperCase().indexOf(tagName.toUpperCase()) === 0) {
-                        return child;
-                    }
-                }
-            }
-        }
-
-        return null;
-    }
-
-    hasChild(element: Element, startsWidth: boolean = false): boolean {
-        var ele = this;
-
-        if (ele != null) {
-            for (let i = 0; i < ele.children.length; i++) {
-                const child = ele.children[i];
-
-                if (child == element) {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
-    map(tagName: string): any {
-        return this.getElementsByTagName(tagName)[0];
-    }
-
-    mapGlobal(tagName: string): any {
-        return document.getElementsByTagName(tagName)[0];
-    }
-
-    waitFor(value: any, fn: Function) {
-        var interv = setInterval(() => {
-            if (value) {
-                clearInterval(interv);
-                fn();
-            }
-        }, 100);
-    }
-}

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";
@@ -10,7 +10,7 @@ export class CodeEditor extends BaseElement {
 
     onInit(): void {
 
-        
+
         this.initWorkers();
 
 
@@ -32,24 +32,72 @@ export class CodeEditor extends BaseElement {
                     suggestions: [
                         {
                             label: 'for',
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'for (let i = 0; i < array.length; i++) {\n\n}',
+                            kind: monaco.languages.CompletionItemKind.Snippet,
+                            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
                         }
                     ]
                 }
             )
-          });
+        });
+
 
-          
         editor.onDidChangeModelContent((e) => {
             this.input = editor.getValue();
             this.outputFrame.setScript(this.input);

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

@@ -13,4 +13,8 @@ while (i < 10) {
 
 var obj = { hello: true, moto: "enabled" };
 
-console.log(obj);
+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";