added canvas renderer
This commit is contained in:
David Meincke
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { BaseElement } from "../_base";
|
||||
import { BaseElement } from "../../../shared/_base";
|
||||
import './app-root.less';
|
||||
|
||||
export class AppRoot extends BaseElement {
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
@@ -1,4 +1,4 @@
|
||||
import { BaseElement } from "../_base";
|
||||
import { BaseElement } from "../../../shared/_base";
|
||||
import './notification-bubble.less';
|
||||
|
||||
export class NotificationBubble extends BaseElement {
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user