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

added html and css editors

Browse Source
This commit is contained in:
David Meincke
2022-03-26 20:44:52 +01:00
parent cda1b5c972
commit 6ed4b80c64
23 changed files with 548 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
outputframe-app/elements/render-canvas/render-canvas.ts
+27 -37
View File
@@ -11,10 +11,10 @@ export class RenderCanvas extends BaseElement {
width: 400,
height: 400
}
public drawCount: number = 0;
public drawQueue: { points: { x: number, y: number }[], color?: string }[] = [];
private drawCount: number = 0;
private drawQueue: { points: { x: number, y: number }[], color?: string, connected?: boolean }[] = [];
public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
private prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
private theme: any;
@@ -44,10 +44,12 @@ export class RenderCanvas extends BaseElement {
this.canvas.style.height = smallest + "px";
this.canvas.setAttribute("width", smallest.toString());
this.canvas.setAttribute("height", smallest.toString());
this.draw();
}
}
drawPoly(points: { x: number, y: number }[], color?: string | CanvasGradient) {
private drawPoly(points: { x: number, y: number }[], color?: string | CanvasGradient) {
if (this.ctx && this.canvas) {
this.canvas.style.display = "block";
if (color instanceof CanvasGradient) {
@@ -77,7 +79,7 @@ export class RenderCanvas extends BaseElement {
}
}
centerOf(points: { x: number, y: number }[]) {
private centerOf(points: { x: number, y: number }[]) {
var x = 0,
y = 0,
i,
@@ -99,7 +101,7 @@ export class RenderCanvas extends BaseElement {
return { x: x / f, y: y / f };
};
areaOf(points: { x: number, y: number }[]) {
private areaOf(points: { x: number, y: number }[]) {
var area = 0,
i,
j,
@@ -117,50 +119,42 @@ export class RenderCanvas extends BaseElement {
return area;
};
angleBetweenPoints(point1: { x: number, y: number }, point2: { x: number, y: number }) {
// angle in radians
var angleRadians = Math.atan2(point2.y - point1.y, point2.x - point1.x);
// angle in degrees
private angleBetweenPoints(point1: { x: number, y: number }, point2: { x: number, y: number }) {
return Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180 / Math.PI;
}
executeDrawQueue() {
let prevShape: any | null = null;
draw() {
let prevConnectedShape: any | null = null;
for (let i = 0; i < this.drawQueue.length; i++) {
const shape = this.drawQueue[i];
if (prevShape != null && this.ctx) {
var prevCenter = this.centerOf(prevShape.points);
if (shape.connected && prevConnectedShape != null && this.ctx) {
var prevCenter = this.centerOf(prevConnectedShape.points);
var thisCenter = this.centerOf(shape.points);
var middle = {
x: (prevCenter.x + thisCenter.x) / 2,
y: (prevCenter.y + thisCenter.y) / 2
};
var grd = this.ctx.createLinearGradient(this.unitsToPx(prevCenter.x), this.unitsToPx(prevCenter.y), this.unitsToPx(thisCenter.x), this.unitsToPx(thisCenter.y));
grd.addColorStop(0, prevShape?.color ?? this.getColor());
grd.addColorStop(0, prevConnectedShape?.color ?? this.getColor());
grd.addColorStop(1, shape?.color ?? this.getColor());
this.drawPoly([prevCenter, thisCenter], grd);
//this.drawPoly([prevCenter, middle], prevShape.color);
//this.drawPoly([middle, thisCenter], shape.color);
}
prevShape = shape;
if (shape.connected) {
prevConnectedShape = shape;
}
}
for (let i = 0; i < this.drawQueue.length; i++) {
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(), this.unitsToPx((shape.points[1].x - shape.points[0].x) * 0.6), shape.color);
if (shape.connected) {
this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), this.unitsToPx((shape.points[1].x - shape.points[0].x) * 0.6), shape.color);
}
}
}
drawText(x: number, y: number, text: string, size: number = 20, color?: string) {
private 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(color);
@@ -171,27 +165,23 @@ export class RenderCanvas extends BaseElement {
}
}
getColor(color?: string) {
private getColor(color?: string) {
return color ? color : (this.prefersDarkScheme.matches ? this.theme["@draw-color-dark"] : this.theme["@draw-color-white"]);
}
getBackgroundColor() {
private getBackgroundColor() {
return this.prefersDarkScheme.matches ? this.theme["@median-bg-dark"] : this.theme["@median-bg-white"];
}
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 }[], color?: string) {
poly(points: { x: number, y: number }[], color?: string) {
this.drawQueue.push({ points: points, color: color });
}
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 });
rect(x: number, y: number, width: number, height: number, color?: string, connected?: boolean) {
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, connected: connected });
}
unitsToPx(unitNumber: number) {
private unitsToPx(unitNumber: number) {
var newPPU = Math.min(this.width, this.height) / this.units.width;
return Math.floor(unitNumber * newPPU);
}