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

declarations support, color support, better inject

Browse Source
This commit is contained in:
David Meincke
2022-03-24 00:04:15 +01:00
parent ad53ae9695
commit c81b04cde3
9 changed files with 64 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
outputframe-app/boot.ts
+4 -2
View File
@@ -6,7 +6,7 @@ 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, box } from './injects/dom-helpers';
import { getCenter, getHeight, getRandom, getWidth, rect, box, getRandomColor } from './injects/dom-helpers';
window.customElements.define('render-canvas', RenderCanvas);
@@ -37,4 +37,6 @@ window.height = getHeight;
//@ts-ignore
window.center = getCenter;
//@ts-ignore
window.rand = getRandom;
window.rand = getRandom;
//@ts-ignore
window.randomColor = getRandomColor;
outputframe-app/elements/render-canvas/render-canvas.ts
+31 -23
View File
@@ -11,7 +11,7 @@ export class RenderCanvas extends BaseElement {
height: 400
}
public drawCount: number = 0;
public drawQueue: { x: number, y: number }[][] = [];
public drawQueue: { points: { x: number, y: number }[], color?: string }[] = [];
public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
@@ -42,11 +42,11 @@ export class RenderCanvas extends BaseElement {
}
}
drawPoly(points: { x: number, y: number }[]) {
drawPoly(points: { x: number, y: number }[], color?: string) {
if (this.ctx && this.canvas) {
this.canvas.style.display = "block";
this.ctx.fillStyle = this.getColor(true);
this.ctx.strokeStyle = this.getColor();
this.ctx.strokeStyle = this.getColor(false, color);
this.ctx.beginPath();
for (var i = 0; i < points.length; i++) {
@@ -107,30 +107,38 @@ export class RenderCanvas extends BaseElement {
};
executeDrawQueue() {
let prevCenter: { x: number, y: number } | null = null;
let prevShape: any | null = null;
for (let i = 0; i < this.drawQueue.length; i++) {
const points = this.drawQueue[i];
const shape = this.drawQueue[i];
if (prevCenter != null) {
var thisCenter = this.centerOf(points);
this.drawPoly([prevCenter, thisCenter]);
if (prevShape != null) {
var prevCenter = this.centerOf(prevShape.points);
var thisCenter = this.centerOf(shape.points);
var middle = {
x: (prevCenter.x + thisCenter.x) / 2,
y: (prevCenter.y + thisCenter.y) / 2
};
this.drawPoly([prevCenter, middle], prevShape.color);
this.drawPoly([middle, thisCenter], shape.color);
}
prevCenter = this.centerOf(points);
prevShape = shape;
}
for (let i = 0; i < this.drawQueue.length; i++) {
const points = this.drawQueue[i];
this.drawPoly(points);
var thisCenter = this.centerOf(points);
this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), points[1].x - points[0].x);
const shape = this.drawQueue[i];
this.drawPoly(shape.points, shape.color);
var thisCenter = this.centerOf(shape.points);
this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), shape.points[1].x - shape.points[0].x, shape.color);
}
}
drawText(x: number, y: number, text: string, size: number = 20) {
drawText(x: number, y: number, text: string, size: number = 20, color?: string) {
if (this.ctx && this.canvas) {
this.ctx.moveTo(x, y);
this.ctx.fillStyle = this.getColor();
this.ctx.fillStyle = this.getColor(false, color);
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.font = "200 " + size + "px Segoe UI";
@@ -138,20 +146,20 @@ export class RenderCanvas extends BaseElement {
}
}
getColor(invert: boolean = false) {
return (invert ? !this.prefersDarkScheme.matches : this.prefersDarkScheme.matches) ? 'rgba(255,255,255,1)' : 'rgba(44,44,44,1)';
getColor(invert: boolean = false, color?: string) {
return color ? color : ((invert ? !this.prefersDarkScheme.matches : this.prefersDarkScheme.matches) ? 'rgba(255,255,255,1)' : 'rgba(44,44,44,1)');
}
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 }]);
drawRect(x: number, y: number, width: number, height: number, color?: string) {
this.drawPoly([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }], color);
}
queuePoly(points: { x: number, y: number }[]) {
this.drawQueue.push(points);
queuePoly(points: { x: number, y: number }[], color?: string) {
this.drawQueue.push({ points: points, color: color });
}
queueRect(x: number, y: number, width: number, height: number) {
this.drawQueue.push([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }]);
queueRect(x: number, y: number, width: number, height: number, color?: string) {
this.drawQueue.push({ points: [{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }], color: color });
}
unitsToPx(unitNumber: number) {
outputframe-app/injects/dom-helpers.ts
+9 -5
View File
@@ -4,14 +4,14 @@ export function clear() {
}
export function rect(x: number, y: number, width: number, height: number): void {
export function rect(x: number, y: number, width: number, height: number, color?: string): void {
var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
renderCanvas.drawRect(x, y, width, height);
renderCanvas.drawRect(x, y, width, height, color);
}
export function box(x: number, y: number, width: number, height: number): void {
export function box(x: number, y: number, width: number, height: number, color?: string): void {
var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
renderCanvas.queueRect(x, y, width, height);
renderCanvas.queueRect(x, y, width, height, color);
}
export function getWidth(): number {
@@ -33,7 +33,11 @@ export function getRandom(min: number, max: number): number {
return Math.floor(Math.random() * (max - min + 1) + min);
}
export function executeDrawQueue() {
export function executeDrawQueue(): void {
var renderCanvas = <RenderCanvas>document.getElementsByTagName("render-canvas")[0];
renderCanvas.executeDrawQueue();
}
export function getRandomColor(randomOpacity: boolean = true): string {
return "rgba(" + getRandom(0,255) + ", " + getRandom(0,255) + ", " + getRandom(0,255) + ", " + (randomOpacity ? Math.random() + 0.1 : "1") + ")";
}