david/code-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added canvas renderer

Browse Source
This commit is contained in:
David Meincke
2022-03-22 21:13:56 +01:00
parent b4762ccfed
commit 4e9d0393ec
13 changed files with 212 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
codeeditor-app/elements/app-root/app-root.ts
+1 -1
View File
@@ -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
+55 -7
View File
@@ -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
+5 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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
+1
View File
@@ -0,0 +1 @@
<render-canvas></render-canvas>
outputframe-app/app.less
+6 -1
View File
@@ -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
+19 -1
View File
@@ -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
+20
View File
@@ -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
+73
View File
@@ -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
+29
View File
@@ -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);
}
codeeditor-app/elements/_base.ts → shared/_base.ts
View File