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/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) {