improved layout and fixed bugs introduced new ones

codeeditor-app/elements/code-editor-container/code-editor-container.less

@@ -1,12 +1,28 @@
 @import url('../../../shared/theme.less');
 
-div > code-editor-container.active:last-child {
+code-editor-container {
+    min-height: 100%; 
+    max-height: 100%;
+}
+
+code-editor-container.first-visible .code-editor-header {
+    border-top-color: transparent;
+}
+
+
+code-editor-container.last-visible {
     min-height: auto !important;
     max-height: none !important;
     min-width: auto !important;
     max-width: none !important;
 }
 
+code-editor-container.last-visible > resize-handle {
+    display: none !important;
+}
+
+
+
 .code-editor-header {
     padding: 10px 18px;
     background: lighten(@editor-bg-white, 1%);
@@ -17,6 +33,10 @@ div > code-editor-container.active:last-child {
     border-width: 1px;
 }
 
+.code-editor-content {
+
+}
+
 @media (prefers-color-scheme: dark) {
     .code-editor-header {
         background: lighten(@editor-bg-dark, 1%);

codeeditor-app/elements/code-editor-container/code-editor-container.ts

@@ -23,12 +23,15 @@ export class CodeEditorContainer extends BaseElement {
     }
 
     createCodeEditor(language: string, expandDir: 'vertical' | 'horizontal') {
-        var codeEditor = <CodeEditor>document.createElement("code-editor");
-        codeEditor.setAttribute("language", language);
+        var codeEditorContent = document.createElement("div");
+        codeEditorContent.classList.add("code-editor-content");
+        var codeEditor = <CodeEditor>document.createElement(language + "-code-editor");
+        codeEditorContent.appendChild(codeEditor);
+
         var resizeHandle = <ResizeHandle>document.createElement("resize-handle");
         resizeHandle.setAttribute("dir", expandDir);
 
-        this.appendChild(codeEditor);
+        this.appendChild(codeEditorContent);
         this.appendChild(resizeHandle);
     }
 }

codeeditor-app/elements/code-editor/code-editor.less

@@ -1,15 +1,15 @@
 @import url('../../../shared/theme.less');
 
-code-editor {
+code-editor, css-code-editor, html-code-editor, javascript-code-editor {
     width: 100%;
     height: 100%;
-    display: block;
+    position: absolute;
     background: @editor-bg-white;
     color: @primary-text-color-white;
 }
 
 @media (prefers-color-scheme: dark) {
-    code-editor {
+    code-editor, css-code-editor, html-code-editor, javascript-code-editor {
         background: @editor-bg-dark;
         color: @primary-text-color-dark;
     }

codeeditor-app/elements/code-editor/code-editor.ts

@@ -2,12 +2,7 @@ import { BaseElement } from "../../../shared/_base";
 import './code-editor.less';
 import * as monaco from 'monaco-editor';
 import { OutputFrame } from "../output-frame/output-frame";
-import initJs from '!!raw-loader!./injects/editor-init.js';
-import initHtml from '!!raw-loader!./injects/editor-init.html';
-import initCss from '!!raw-loader!./injects/editor-init.css';
-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 {
 
@@ -17,8 +12,10 @@ export class CodeEditor extends BaseElement {
     onInit(): void {
 
         this.initWorkers();
-        this.language = this.getAttribute("language")?.toLocaleLowerCase() ?? "javascript";
-        this.input = this.setInitInput(this.language);
+        this.input = this.setInitInput();
+        this.language = this.tagName.substring(0, this.tagName.indexOf("-")).toLocaleLowerCase();
+
+        console.log(this.language);
 
         const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
 
@@ -34,72 +31,26 @@ export class CodeEditor extends BaseElement {
             theme: prefersDarkScheme.matches ? 'vs-dark' : 'vs-light'
         });
 
-
-
-
         var debounce = debounceManager(1000);
         editor.onDidChangeModelContent((e) => {
             this.input = editor.getValue();
             debounce.ensureDebounce(() => {
-                this.outputFrame.setScript(this.language, this.input);
+                this.outputFrame.setContent(this.language, this.input);
             });
         });
 
         this.waitFor(this.outputFrame, () => {
-            this.outputFrame.setScript(this.language, this.input);
+            this.outputFrame.setContent(this.language, this.input);
         });
 
     }
 
-    setInitInput(language: string | null) {
-        if (language) {
-            if (language.toLowerCase() === "javascript") {
-                this.initJs();
-                return initJs;
-            }
-            else if (language.toLowerCase() === 'html') {
-                return initHtml;
-            }
-            else if (language.toLowerCase() === 'css') {
-                return initCss;
-            }
-        }
+    setInitInput(): string {
         return "";
     }
 
-    initJs() {
-        monaco.languages.typescript.javascriptDefaults.addExtraLib(declarations, 'ts:filename/declarations.d.ts');
+    setInitSettings(): void {
 
-        monaco.languages.registerCompletionItemProvider("javascript", {
-            provideCompletionItems: (model, position, context, token) => {
-                return {
-                    suggestions: [
-                        {
-                            label: 'for',
-                            kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: 'for (let i = 0; i < ${1:array}.length; i++) {\n\t$0\n}',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
-                        {
-                            label: 'forr',
-                            kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: 'for (var i = ${1:array}.length - 1; i >= 0; i--) {\n\t$0\n}',
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        },
-                        {
-                            label: 'spiralBoxesSolutionSnippet',
-                            detail: "inserts solution of spiral boxes",
-                            kind: monaco.languages.CompletionItemKind.Snippet,
-                            insertText: spiralBoxesSolutionScript,
-                            range: <any>null,
-                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
-                        }
-                    ]
-                }
-            }
-        });
     }
 
 

codeeditor-app/elements/code-editor/css-code-editor.ts

@@ -0,0 +1,28 @@
+import { CodeEditor } from "./code-editor";
+import * as monaco from 'monaco-editor';
+import initCss from '!!raw-loader!./injects/editor-init.css';
+import { createScript } from "../../../shared/create-script";
+
+export class CssCodeEditor extends CodeEditor {
+    setInitInput(): string {
+        return initCss;
+    }
+
+    setInitSettings(): void {
+        monaco.languages.registerCompletionItemProvider("css", {
+            provideCompletionItems: (model, position, context, token) => {
+                return {
+                    suggestions: [
+                        {
+                            label: 'insert-flex',
+                            kind: monaco.languages.CompletionItemKind.Snippet,
+                            insertText: createScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', false).toString(),
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        }
+                    ]
+                }
+            }
+        });
+    }
+}

codeeditor-app/elements/code-editor/html-code-editor.ts

@@ -0,0 +1,28 @@
+import { CodeEditor } from "./code-editor";
+import * as monaco from 'monaco-editor';
+import initHtml from '!!raw-loader!./injects/editor-init.html';
+import { createScript } from "../../../shared/create-script";
+
+export class HtmlCodeEditor extends CodeEditor {
+    setInitInput(): string {
+        return initHtml;
+    }
+
+    setInitSettings(): void {
+        monaco.languages.registerCompletionItemProvider("html", {
+            provideCompletionItems: (model, position, context, token) => {
+                return {
+                    suggestions: [
+                        {
+                            label: 'jqueryCDN',
+                            kind: monaco.languages.CompletionItemKind.Snippet,
+                            insertText: createScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', false).toString(),
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        }
+                    ]
+                }
+            }
+        });
+    }
+}

codeeditor-app/elements/code-editor/injects/editor-init.js

@@ -1,4 +1,4 @@
-//create a box
+//create a box:
 box(10, 10, 20, 20);
 
 //use random:

codeeditor-app/elements/code-editor/javascript-code-editor.ts

@@ -0,0 +1,46 @@
+import { CodeEditor } from "./code-editor";
+import * as monaco from 'monaco-editor';
+import initScript from '!!raw-loader!./injects/editor-init.js';
+import spiralBoxesSolutionScript from '!!raw-loader!./injects/spiral-boxes-solution.js';
+import declarations from '!!raw-loader!./injects/declarations.d.ts';
+
+export class JavascriptCodeEditor extends CodeEditor {
+    setInitInput(): string {
+        return initScript;
+    }
+
+    setInitSettings(): void {
+        monaco.languages.typescript.javascriptDefaults.addExtraLib(declarations, 'ts:filename/declarations.d.ts');
+
+        monaco.languages.registerCompletionItemProvider("javascript", {
+            provideCompletionItems: (model, position, context, token) => {
+                return {
+                    suggestions: [
+                        {
+                            label: 'for',
+                            kind: monaco.languages.CompletionItemKind.Snippet,
+                            insertText: 'for (let i = 0; i < ${1:array}.length; i++) {\n\t$0\n}',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        },
+                        {
+                            label: 'forr',
+                            kind: monaco.languages.CompletionItemKind.Snippet,
+                            insertText: 'for (var i = ${1:array}.length - 1; i >= 0; i--) {\n\t$0\n}',
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        },
+                        {
+                            label: 'spiralBoxesSolutionSnippet',
+                            detail: "inserts solution of spiral boxes",
+                            kind: monaco.languages.CompletionItemKind.Snippet,
+                            insertText: spiralBoxesSolutionScript,
+                            range: <any>null,
+                            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
+                        }
+                    ]
+                }
+            }
+        });
+    }
+}

codeeditor-app/elements/output-frame/output-frame.ts

@@ -12,7 +12,7 @@ export class OutputFrame extends BaseElement {
         super();
     }
 
-    private scripts: any = {};
+    private contents: any = {};
 
     onInit(): void {
         this.reset();
@@ -58,21 +58,21 @@ export class OutputFrame extends BaseElement {
         });
     }
 
-    setScript(language: string, value: string) {
-        this.scripts[language] = value;
+    setContent(language: string, value: string) {
+        this.contents[language] = value;
         this.reset(() => {
-            for (const lang in this.scripts) {
+            for (const lang in this.contents) {
                 if (lang != "javascript")
-                    this.doPostMessage(lang, this.scripts[lang]);
+                    this.doPostMessage(lang, this.contents[lang]);
             }
 
-            if (this.scripts["javascript"])
-                this.doPostMessage("javascript", this.scripts["javascript"]);
+            if (this.contents["javascript"])
+                this.doPostMessage("javascript", this.contents["javascript"]);
         });
     }
 
     doPostMessage(language: string, value: string) {
-        this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, language, this.scripts[language], language == 'javascript' ? (executeTimeInMs, exceedTimeInMs) => {
+        this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, language, this.contents[language], language == 'javascript' ? (executeTimeInMs, exceedTimeInMs) => {
             if (executeTimeInMs === -1) {
                 this.setError();
             }

codeeditor-app/elements/resize-handle/resize-handle.less

@@ -29,6 +29,11 @@ resize-handle:hover, resize-handle.active {
     transition: none;
 }
 
+resize-handle[dir="vertical"][place='top'] {
+    top: 0;
+    bottom: auto;
+}
+
 #fixed-resize-overlay {
     position: fixed;
     left: 0;

codeeditor-app/elements/resize-handle/resize-handle.ts

@@ -105,7 +105,7 @@ export class ResizeHandle extends BaseElement {
         overlay.addEventListener("touchmove", (evt: TouchEvent) => {
             this.getIframe().style.pointerEvents = "none";
             this.classList.add("active");
-            this.setSize(targetStartSize.width + (start.x - evt.touches[0].pageX), targetStartSize.height + (start.y - evt.touches[0].pageY));
+            this.setSize(targetStartSize.width + (evt.touches[0].pageX - start.x), targetStartSize.height + (evt.touches[0].pageY - start.y));
         });
 
         overlay.addEventListener("touchend", (evt: TouchEvent) => {

codeeditor-app/elements/window-control/window-control connector.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../../shared/_base";
 import { CodeEditorContainer } from "../code-editor-container/code-editor-container";
+import { WindowControl } from "./window-control";
 import './window-control-connector.less';
 
 export class WindowControlConnector extends BaseElement {
@@ -25,7 +26,7 @@ export class WindowControlConnector extends BaseElement {
 
         if (target) {
             target.classList.add("active");
-            target.style.display = "block";
+            target.style.display = "";
         }
 
         this.distributeEvenly();
@@ -44,20 +45,40 @@ export class WindowControlConnector extends BaseElement {
     }
 
     private distributeEvenly() {
-        var elements = <CodeEditorContainer[]>this.findVisible("code-editor-container");
-        var containers = document.getElementsByClassName("code-editor-containers")[0];
 
-        if (elements.length === 0) {
-            containers.classList.add("force-close");
-        }
-        else {
-            containers.classList.remove("force-close");
-            var size = (100 / elements.length) + "%";
-            for (let i = 0; i < elements.length; i++) {
-                const element = elements[i];
+        var windowControl = <WindowControl>this.parentElement;
+        var distTarget = windowControl.getDistibuteTarget();
 
-                element.style.minHeight = size;
-                element.style.maxHeight = size;
+        if (distTarget) {
+            var visibleTargetChildren = this.visibleChildren(distTarget);
+            console.log(visibleTargetChildren);
+
+            if (visibleTargetChildren.length === 0) {
+                distTarget.classList.add("force-close");
+            }
+            else {
+                distTarget.classList.remove("force-close");
+                var size = (100 / visibleTargetChildren.length) + "%";
+                for (let i = 0; i < visibleTargetChildren.length; i++) {
+                    const element = visibleTargetChildren[i];
+
+                    element.style.minHeight = size;
+                    element.style.maxHeight = size;
+
+                    if (i === 0) {
+                        element.classList.add("first-visible");
+                    }
+                    else {
+                        element.classList.remove("first-visible");
+                    }
+                    
+                    if (i + 1 === visibleTargetChildren.length) {
+                        element.classList.add("last-visible");
+                    }
+                    else {
+                        element.classList.remove("last-visible");
+                    }
+                }
             }
         }
     }

codeeditor-app/elements/window-control/window-control.ts

@@ -15,4 +15,13 @@ export class WindowControl extends BaseElement {
             }
         }
     }
+
+    getDistibuteTarget() {
+        var attr = this.getAttribute("distribute");
+        if (attr) {
+            return <HTMLElement>document.querySelector(attr);
+        }
+
+        return null;
+    }
 }