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

added theme and gradients and stuff

Browse Source
This commit is contained in:
David Meincke
2022-03-24 23:00:10 +01:00
parent 5fb596daae
commit cda1b5c972
17 changed files with 225 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
codeeditor-app/app.html
+3
View File
@@ -4,8 +4,11 @@
</div>
<div class="flex-horiz">
<code-editor style="min-width: 50%; max-width: 50%;"></code-editor>
<div>
<resize-handle></resize-handle>
<output-frame></output-frame>
</div>
</div>
<div class="flex-shrink section bottom">methods: rect, box, center, width, height, rand</div>
</div>
<notification-bubbles></notification-bubbles>
codeeditor-app/app.less
+15 -12
View File
@@ -1,8 +1,11 @@
@import url('../shared/theme.less');
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: @median-bg-white;
}
.flex-horiz {
@@ -46,41 +49,41 @@ html, body {
}
body {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-family: @primary-font-family;
}
.section {
background: #e3e3e3;
padding: 20px;
font-size: 22px;
background: @primary-bg-color-white;
padding: 10px;
font-size: 18px;
}
.section.top {
border-bottom: 1px solid #c2c2c2;
border-bottom: 1px solid @primary-border-color-white;
}
.section.bottom {
padding: 10px;
border-top: 1px solid #c2c2c2;
font-size: 14px;
border-top: 1px solid @primary-border-color-white;
font-size: 10px;
text-align: right;
}
@media (prefers-color-scheme: dark) {
body {
background: #1e1e1e;
background: @median-bg-dark;
}
.section {
color: white;
background: #2e2e2e;
color: @primary-text-color-dark;
background: @primary-bg-color-dark;
}
.section.top {
border-color: #292929;
border-color: @primary-border-color-dark;
}
.section.bottom {
border-color: #292929;
border-color: @primary-bg-color-dark;
}
}
codeeditor-app/boot.ts
+2
View File
@@ -5,12 +5,14 @@ import { CodeEditor } from './elements/code-editor/code-editor';
import { OutputFrame } from './elements/output-frame/output-frame';
import { NotificationBubbles } from './elements/notification-bubbles/notification-bubbles';
import { NotificationBubble } from './elements/notification-bubbles/notification-bubble';
import { ResizeHandle } from './elements/resize-handle/resize-handle';
window.customElements.define('app-root', AppRoot);
window.customElements.define('code-editor', CodeEditor);
window.customElements.define('output-frame', OutputFrame);
window.customElements.define('notification-bubbles', NotificationBubbles);
window.customElements.define('notification-bubble', NotificationBubble);
window.customElements.define('resize-handle', ResizeHandle);
document.body.innerHTML += bootHtml;
codeeditor-app/elements/code-editor/code-editor.less
+12 -1
View File
@@ -1,5 +1,16 @@
monaco-editor {
@import url('../../../shared/theme.less');
code-editor {
width: 100%;
height: 100%;
display: block;
background: @editor-bg-white;
color: @primary-text-color-white;
}
@media (prefers-color-scheme: dark) {
code-editor {
background: @editor-bg-dark;
color: @primary-text-color-dark;
}
}
codeeditor-app/elements/code-editor/code-editor.ts
+1 -6
View File
@@ -73,7 +73,6 @@ export class CodeEditor extends BaseElement {
});
this.waitFor(this.outputFrame, () => {
console.log("setting script");
this.outputFrame.setScript(this.input);
});
@@ -100,11 +99,7 @@ export class CodeEditor extends BaseElement {
};
}
onUpdate(): void {
console.log("APP ROOT UPDATE");
}
get outputFrame(): OutputFrame {
return <OutputFrame>this.findSibling("output-frame");
return <OutputFrame>this.find("output-frame");
}
}
codeeditor-app/elements/code-editor/injects/declarations.d.ts
Vendored
+1 -1
View File
@@ -4,4 +4,4 @@ declare function rand(from: number, to: number): number;
declare function center(): number;
declare function width(): number;
declare function height(): number;
declare function randomColor(randomOpacity: boolean = true): string;
declare function randomColor(): string;
codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.js
+3 -3
View File
@@ -1,5 +1,5 @@
const boxSize = 40;
const stepSize = boxSize + boxSize / 4;
const boxSize = 30;
const stepSize = boxSize + boxSize / 1.8;
let x = center() - boxSize / 2;
let y = center() - boxSize / 2;
let turns = 0;
@@ -8,7 +8,7 @@ let currentStep = 1;
let stepsInCurrentDirection = 1;
while (!isOutsizeCanvas()) {
box(x, y, boxSize, boxSize);
box(x, y, boxSize, boxSize, randomColor());
moveAccordingToDirection();
setNextStepAndDirection();
}
codeeditor-app/elements/notification-bubbles/notification-bubble.less
+3 -1
View File
@@ -1,3 +1,5 @@
@import url('../../../shared/theme.less');
notification-bubble {
margin: 10px;
padding: 10px;
@@ -39,7 +41,7 @@ notification-bubble.syntax-error {
@media (prefers-color-scheme: dark) {
notification-bubble {
color: white;
color: @primary-text-color-dark;
}
notification-bubble.log {
codeeditor-app/elements/output-frame/output-frame.less
+2 -5
View File
@@ -1,8 +1,9 @@
@import url('../../../shared/theme.less');
output-frame {
width: 100%;
height: 100%;
display: block;
background-color: #f0f0f0;
}
output-frame > iframe {
@@ -13,9 +14,5 @@ output-frame > iframe {
}
@media (prefers-color-scheme: dark) {
output-frame {
background-color: #272727;
}
}
codeeditor-app/elements/resize-handle/resize-handle.less
+24
View File
@@ -0,0 +1,24 @@
@import url('../../../shared/theme.less');
resize-handle {
background: transparent;
position: absolute;
top: 0;
bottom: 0;
width: 8px;
z-index: 9;
cursor: ew-resize;
transition: 1s ease-in;
}
resize-handle:hover {
background: @primary-interaction-highlight-white;
transition: none;
}
@media (prefers-color-scheme: dark) {
resize-handle:hover {
background: @primary-interaction-highlight-dark;
}
}
codeeditor-app/elements/resize-handle/resize-handle.ts
+65
View File
@@ -0,0 +1,65 @@
import { BaseElement } from "../../../shared/_base";
import { CodeEditor } from "../code-editor/code-editor";
import './resize-handle.less';
export class ResizeHandle extends BaseElement {
public isDowned = false;
onInit(): void {
this.setDragEvents();
}
setDragEvents() {
this.addEventListener("mousedown", (evt: MouseEvent) => {
this.isDowned = true;
this.getIframe().style.display = "none";
});
window.addEventListener("mousemove", (evt: MouseEvent) => {
if (this.isDowned) {
this.setPosition(evt.pageX);
}
});
window.addEventListener("mouseup", (evt: MouseEvent) => {
if (this.isDowned) {
this.getIframe().style.display = "block";
this.isDowned = false;
}
});
this.addEventListener("touchstart", (evt: TouchEvent) => {
this.isDowned = true;
this.getIframe().style.display = "none";
});
window.addEventListener("touchmove", (evt: TouchEvent) => {
if (this.isDowned) {
this.setPosition(evt.touches[0].pageX);
}
});
window.addEventListener("touchend", (evt: TouchEvent) => {
if (this.isDowned) {
this.getIframe().style.display = "block";
this.isDowned = false;
}
});
}
setPosition(x: number) {
var t = this.getTarget();
t.style.minWidth = x + "px";
t.style.maxWidth = x + "px";
}
getTarget() {
return <CodeEditor>this.find("code-editor");
}
getIframe() {
return <HTMLIFrameElement>this.find("iframe");
}
}
outputframe-app/app.less
+6 -5
View File
@@ -1,8 +1,11 @@
@import url('../shared/theme.less');
html, body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
color: @draw-color-white;
}
*, *::before, *::after {
@@ -10,14 +13,12 @@ html, body {
}
body {
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
margin: 10px;
background-color: #f0f0f0;
font-family: @primary-font-family;
padding: 10px;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #272727;
color: white;
color: @draw-color-dark;
}
}
outputframe-app/elements/render-canvas/render-canvas.less
+6 -3
View File
@@ -1,3 +1,5 @@
@import url('../../../shared/theme.less');
render-canvas {
width: 100%;
height: 100%;
@@ -16,13 +18,14 @@ render-canvas canvas {
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #c2c2c2;
background-color: white;
background-color: @median-bg-white;
border-color: @draw-color-white;
}
@media (prefers-color-scheme: dark) {
render-canvas canvas {
background-color: #2c2c2c;
border-color: #3a3a3a;
background-color: @median-bg-dark;
border-color: @draw-color-dark;
}
}
outputframe-app/elements/render-canvas/render-canvas.ts
+40 -11
View File
@@ -1,3 +1,4 @@
import { getLessThemeObj } from '../../../shared/less-theme-to-obj';
import { BaseElement } from '../../../shared/_base';
import './render-canvas.less';
@@ -15,6 +16,8 @@ export class RenderCanvas extends BaseElement {
public prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
private theme: any;
onInit(): void {
this.canvas = document.createElement("canvas");
this.ctx = <CanvasRenderingContext2D>this.canvas.getContext("2d");
@@ -25,6 +28,8 @@ export class RenderCanvas extends BaseElement {
this.handleCanvasResize();
});
this.theme = getLessThemeObj();
this.handleCanvasResize();
}
@@ -42,11 +47,17 @@ export class RenderCanvas extends BaseElement {
}
}
drawPoly(points: { x: number, y: number }[], color?: string) {
drawPoly(points: { x: number, y: number }[], color?: string | CanvasGradient) {
if (this.ctx && this.canvas) {
this.canvas.style.display = "block";
this.ctx.fillStyle = this.getColor(true);
this.ctx.strokeStyle = this.getColor(false, color);
if (color instanceof CanvasGradient) {
//this.ctx.fillStyle = color;
this.ctx.strokeStyle = color;
}
else {
this.ctx.strokeStyle = this.getColor(color);
this.ctx.fillStyle = this.getBackgroundColor();
}
this.ctx.beginPath();
for (var i = 0; i < points.length; i++) {
@@ -106,12 +117,20 @@ 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
return Math.atan2(point2.y - point1.y, point2.x - point1.x) * 180 / Math.PI;
}
executeDrawQueue() {
let prevShape: any | null = null;
for (let i = 0; i < this.drawQueue.length; i++) {
const shape = this.drawQueue[i];
if (prevShape != null) {
if (prevShape != null && this.ctx) {
var prevCenter = this.centerOf(prevShape.points);
var thisCenter = this.centerOf(shape.points);
@@ -120,8 +139,14 @@ export class RenderCanvas extends BaseElement {
y: (prevCenter.y + thisCenter.y) / 2
};
this.drawPoly([prevCenter, middle], prevShape.color);
this.drawPoly([middle, thisCenter], shape.color);
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(1, shape?.color ?? this.getColor());
this.drawPoly([prevCenter, thisCenter], grd);
//this.drawPoly([prevCenter, middle], prevShape.color);
//this.drawPoly([middle, thisCenter], shape.color);
}
prevShape = shape;
@@ -131,14 +156,14 @@ export class RenderCanvas extends BaseElement {
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);
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) {
if (this.ctx && this.canvas) {
this.ctx.moveTo(x, y);
this.ctx.fillStyle = this.getColor(false, color);
this.ctx.fillStyle = this.getColor(color);
this.ctx.textAlign = 'center';
this.ctx.textBaseline = 'middle';
this.ctx.font = "200 " + size + "px Segoe UI";
@@ -146,8 +171,12 @@ export class RenderCanvas extends BaseElement {
}
}
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)');
getColor(color?: string) {
return color ? color : (this.prefersDarkScheme.matches ? this.theme["@draw-color-dark"] : this.theme["@draw-color-white"]);
}
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) {
@@ -164,6 +193,6 @@ export class RenderCanvas extends BaseElement {
unitsToPx(unitNumber: number) {
var newPPU = Math.min(this.width, this.height) / this.units.width;
return unitNumber * newPPU;
return Math.floor(unitNumber * newPPU);
}
}
outputframe-app/injects/dom-helpers.ts
+7 -2
View File
@@ -38,6 +38,11 @@ export function executeDrawQueue(): void {
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") + ")";
export function getRandomColor(): string {
var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
var from = prefersDarkScheme.matches ? 127 : 0;
var to = prefersDarkScheme.matches ? 255 : 127;
return "rgba(" + getRandom(from,to) + ", " + getRandom(from,to) + ", " + getRandom(from,to) + ", " + ("1") + ")";
}
shared/less-theme-to-obj.ts
+17
View File
@@ -0,0 +1,17 @@
import themeLess from '!!raw-loader!./theme.less';
export function getLessThemeObj(): any {
var result: any = {};
var lines = themeLess.split(";");
for (let i = 0; i < lines.length; i++) {
const line = lines[i].trim();
var keyValPair = line.split(':');
if (keyValPair[0] && keyValPair[1])
result[keyValPair[0].trim()] = keyValPair[1].trim();
}
return result;
}
shared/theme.less
+17
View File
@@ -0,0 +1,17 @@
@primary-bg-color-dark: #2e2e2e;
@primary-border-color-dark: #292929;
@primary-text-color-dark: white;
@primary-interaction-highlight-dark: #385e8f;
@editor-bg-dark: #1e1e1e;
@median-bg-dark: #262626;
@draw-color-dark: #dbdbdb;
@primary-bg-color-white: #e3e3e3;
@primary-border-color-white: #c2c2c2;
@primary-text-color-white: black;
@primary-interaction-highlight-white: #7274b6;
@editor-bg-white: #fffffe;
@median-bg-white: #f0f0f0;
@draw-color-white: #474747;
@primary-font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;