declarations support, color support, better inject

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 initScript from '!!raw-loader!./injects/editor-init.js';
-import spiralBoxesSolutionScript from './injects/spiral-boxes-solution.txt';
+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: <any>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: <any>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: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
-                        {
-                            label: 'width',
-                            detail: "gets the width of the canvas",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'width()',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
-                        },
-                        {
-                            label: 'height',
-                            detail: "gets the height of the canvas",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'height()',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.KeepWhitespace
-                        },
-                        {
-                            label: 'center',
-                            detail: "gets the center of the canvas",
-                            kind: monaco.languages.CompletionItemKind.Function,
-                            insertText: 'center()',
-                            range: <any>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: <any>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: <any>null,
                             insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet

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;

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);

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;
+window.rand = getRandom;
+//@ts-ignore
+window.randomColor = getRandomColor;

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) {
+            if (prevShape != null) {
-                var thisCenter = this.centerOf(points);
+                var prevCenter = this.centerOf(prevShape.points);
-                this.drawPoly([prevCenter, thisCenter]);
+                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];
+            const shape = this.drawQueue[i];
-            this.drawPoly(points);
+            this.drawPoly(shape.points, shape.color);
-            var thisCenter = this.centerOf(points);
+            var thisCenter = this.centerOf(shape.points);
-            this.drawText(thisCenter.x, thisCenter.y, (i + 1).toString(), points[1].x - points[0].x);
+            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) {
+    getColor(invert: boolean = false, color?: string) {
-        return (invert ? !this.prefersDarkScheme.matches : this.prefersDarkScheme.matches) ? 'rgba(255,255,255,1)' : 'rgba(44,44,44,1)';
+        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) {
+    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 }]);
+        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 }[]) {
+    queuePoly(points: { x: number, y: number }[], color?: string) {
-        this.drawQueue.push(points);
+        this.drawQueue.push({ points: points, color: color });
     }
 
-    queueRect(x: number, y: number, width: number, height: number) {
+    queueRect(x: number, y: number, width: number, height: number, color?: string) {
-        this.drawQueue.push([{ x: x, y: y }, { x: x + width, y: y }, { x: x + width, y: y + height }, { x: x, y: y + height }]);
+        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

@@ -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") + ")";
 }

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": [ 

typings.d.ts

@@ -2,13 +2,9 @@ declare module '*.html' {
     const content: string;
     export default content;
 }
-declare module '*.txt' {
+declare module '!!raw-loader!*' {
-    const content: string;
+    const contents: string
-    export default content;
+    export = contents
-}
-declare module '*inject.js' {
-    const content: string;
-    export default content;
 }
 
 declare module '*.png';