diff --git a/codeeditor-app/elements/code-editor/code-editor.ts b/codeeditor-app/elements/code-editor/code-editor.ts index 21dce17..120249f 100644 --- a/codeeditor-app/elements/code-editor/code-editor.ts +++ b/codeeditor-app/elements/code-editor/code-editor.ts @@ -2,9 +2,10 @@ import { BaseElement } from "../../../shared/_base"; import './code-editor.less'; import * as monaco from 'monaco-editor'; import { OutputFrame } from "../output-frame/output-frame"; -import initScript from './injects/editor-init.txt'; -import spiralBoxesSolutionScript from './injects/spiral-boxes-solution.txt'; +import initScript from '!!raw-loader!./injects/editor-init.js'; +import spiralBoxesSolutionScript from '!!raw-loader!./injects/spiral-boxes-solution.js'; import { debounceManager } from "../../../shared/ensure-debounce"; +import declarations from '!!raw-loader!./injects/declarations.d.ts'; export class CodeEditor extends BaseElement { @@ -12,7 +13,6 @@ export class CodeEditor extends BaseElement { onInit(): void { - this.initWorkers(); const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); @@ -26,9 +26,11 @@ export class CodeEditor extends BaseElement { enabled: false }, autoIndent: "full", - theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-white' + theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-light' }); + monaco.languages.typescript.javascriptDefaults.addExtraLib(declarations, 'ts:filename/declarations.d.ts'); + monaco.languages.registerCompletionItemProvider("javascript", { triggerCharacters: ["."], provideCompletionItems: (model, position, context, token) => ( @@ -48,58 +50,10 @@ export class CodeEditor extends BaseElement { range: null, insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet }, - { - label: 'rect', - detail: "details", - kind: monaco.languages.CompletionItemKind.Function, - insertText: 'rect(${1:x}, ${2:y}, ${3:width}, ${4:height})', - range: 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: null, - insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet - }, - { - label: 'width', - detail: "gets the width of the canvas", - kind: monaco.languages.CompletionItemKind.Function, - insertText: 'width()', - range: null, - insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace - }, - { - label: 'height', - detail: "gets the height of the canvas", - kind: monaco.languages.CompletionItemKind.Function, - insertText: 'height()', - range: null, - insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace - }, - { - label: 'center', - detail: "gets the center of the canvas", - kind: monaco.languages.CompletionItemKind.Function, - insertText: 'center()', - range: 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}, ${2:to})', - range: null, - insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet - }, { label: 'spiralBoxesSolutionSnippet', detail: "inserts solution of spiral boxes", - kind: monaco.languages.CompletionItemKind.Function, + kind: monaco.languages.CompletionItemKind.Snippet, insertText: spiralBoxesSolutionScript, range: null, insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet diff --git a/codeeditor-app/elements/code-editor/injects/declarations.d.ts b/codeeditor-app/elements/code-editor/injects/declarations.d.ts new file mode 100644 index 0000000..dfa3838 --- /dev/null +++ b/codeeditor-app/elements/code-editor/injects/declarations.d.ts @@ -0,0 +1,7 @@ +declare function box(x: number, y: number, width: number, height: number, color?: string): void; +declare function rect(x: number, y: number, width: number, height: number, color?: string): void; +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; \ No newline at end of file diff --git a/codeeditor-app/elements/code-editor/injects/editor-init.txt b/codeeditor-app/elements/code-editor/injects/editor-init.js similarity index 69% rename from codeeditor-app/elements/code-editor/injects/editor-init.txt rename to codeeditor-app/elements/code-editor/injects/editor-init.js index b2fb87d..2e07dda 100644 --- a/codeeditor-app/elements/code-editor/injects/editor-init.txt +++ b/codeeditor-app/elements/code-editor/injects/editor-init.js @@ -1,4 +1,4 @@ box(10, 10, 20, 20); box(50, rand(100, 200), 20, 20); -box(160, 50, 20, 20); +box(160, 50, 20, 20, randomColor()); box(center(), center(), 20, 20); \ No newline at end of file diff --git a/codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.txt b/codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.js similarity index 100% rename from codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.txt rename to codeeditor-app/elements/code-editor/injects/spiral-boxes-solution.js diff --git a/outputframe-app/boot.ts b/outputframe-app/boot.ts index 4f6b9f2..d5fc47a 100644 --- a/outputframe-app/boot.ts +++ b/outputframe-app/boot.ts @@ -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; \ No newline at end of file +window.rand = getRandom; +//@ts-ignore +window.randomColor = getRandomColor; \ No newline at end of file diff --git a/outputframe-app/elements/render-canvas/render-canvas.ts b/outputframe-app/elements/render-canvas/render-canvas.ts index 65dcb81..036c025 100644 --- a/outputframe-app/elements/render-canvas/render-canvas.ts +++ b/outputframe-app/elements/render-canvas/render-canvas.ts @@ -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) { diff --git a/outputframe-app/injects/dom-helpers.ts b/outputframe-app/injects/dom-helpers.ts index 3bf7494..a3cfc8d 100644 --- a/outputframe-app/injects/dom-helpers.ts +++ b/outputframe-app/injects/dom-helpers.ts @@ -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 = 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 = 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 = 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") + ")"; } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 47ec104..a1d1653 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,8 +10,9 @@ "strict": true, "lib": [ "es6", "dom" ], "baseUrl": "./node_modules", - "types": [ ], + "types": [], "allowJs": false, + "allowSyntheticDefaultImports": true, "typeRoots": ["node_modules/@types"] }, "exclude": [ diff --git a/typings.d.ts b/typings.d.ts index d4bb9ec..9a89f46 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -2,13 +2,9 @@ declare module '*.html' { const content: string; export default content; } -declare module '*.txt' { - const content: string; - export default content; -} -declare module '*inject.js' { - const content: string; - export default content; +declare module '!!raw-loader!*' { + const contents: string + export = contents } declare module '*.png';