Settings

src/css/console.css

@@ -59,6 +59,12 @@
     border: solid #4f4f4f 0.5px;
 }
 
+.settings-btn{
+    box-shadow: none;
+    background-color: #69a;
+    color: #fff !important;
+}
+
 .console-button {
     color: #000;
     cursor: pointer;

src/css/index.css

@@ -12,6 +12,7 @@
 @import url("notification.css");
 @import url("tooltip.css");
 @import url("accordion.css");
+@import url("settings.css");
 
 @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&display=swap");
 
@@ -33,7 +34,7 @@ body {
 }
 
 .button {
-    color: white;
+    color: #0d0c22;
     cursor: pointer;
     border-radius: 4px;
     display: flex;

src/css/settings.css

@@ -0,0 +1,111 @@
+.settingsModal {
+    display: block;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(102, 153, 170);
+    background-color: rgba(102, 153, 170, 0.4);
+}
+
+.settingsContainer{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    position: fixed;
+    left: 50%;
+    top: 25%;
+    transform: translate(-50%, -50%);
+    width: 300px;
+    height: 300px;
+    border: 1px solid black;
+    background-color: #fff;
+    padding: 10px;
+    font-family: Consolas, "Courier New", monospace;
+    border-radius: 10px;
+}
+
+.settingsHeader{
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: 500;
+    border-bottom: 1px solid black;
+}
+
+.settingsFooter{
+    margin-top: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.exitBtn{
+    padding: 8px 10px;
+    color: #fff;
+    background-color: rgb(225, 100, 116);
+    border-radius: 4px;
+    cursor: pointer;
+    box-shadow: rgb(0 0 0 / 20%) 0px 3px 1px -2px, rgb(0 0 0 / 14%) 0px 2px 2px 0px, rgb(0 0 0 / 12%) 0px 1px 5px 0px;
+}
+
+.setting{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.toggleBtn{
+    position:relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.toggleBtn input{
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggleBtnSlider{
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+}
+
+.toggleBtnSlider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+input:checked + .toggleBtnSlider {
+    background-color: #69a;
+}
+
+input:focus + .toggleBtnSlider {
+    box-shadow: 0 0 1px #69a;
+}
+
+input:checked + .toggleBtnSlider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}

src/css/suggestion-menu.css

@@ -120,3 +120,40 @@
 .categoryOption {
     padding-left: 10px;
 }
+
+.spotlightModal{
+    display: block;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+}
+
+.spotlight{
+    font-family: Consolas, "Courier New", monospace;
+    padding: 7px;
+    box-shadow: 0px 0px 6px 1px #ccc inset;
+    border: 1px solid #ccc;
+
+    transition: box-shadow 0.15s ease-in-out;
+    -webkit-transition: box-shadow 0.15s ease-in-out;
+    -moz-transition: box-shadow 0.15s ease-in-out;
+    -o-transition: box-shadow 0.15s ease-in-out;
+    -ms-transition: box-shadow 0.15s ease-in-out;
+}
+
+.spotlight:focus{
+    box-shadow: 0px 0px 6px 1px #aaa inset;
+    font-weight: bold;
+}
+
+.spotlight:focus-visible {
+    border: 1px solid #bbb;
+    outline: none;
+    font-weight: bold;
+}

src/editor/action-executor.ts

@@ -54,6 +54,7 @@ import {
 import { Module } from "../syntax-tree/module";
 import { Reference } from "../syntax-tree/scope";
 import { TypeChecker } from "../syntax-tree/type-checker";
+import { SettingsController } from "../utilities/settings";
 import { getUserFriendlyType, isImportable } from "../utilities/util";
 import { LogEvent, Logger, LogType } from "./../logger/analytics";
 import { BinaryOperator, DataType, InsertionType } from "./../syntax-tree/consts";
@@ -272,7 +273,15 @@ export class ActionExecutor {
                 if (flashGreen) this.flashGreen(action.data?.statement);
 
                 if (statement.hasBody()) {
-                    let scopeHighlight = new ScopeHighlight(this.module.editor, statement, statement.color);
+                    if (SettingsController.getInstance().config.enabledColoredBlocks) {
+                        let scopeHighlight = new ScopeHighlight(this.module.editor, statement, statement.color);
+                    } else {
+                        let scopeHighlight = new ScopeHighlight(
+                            this.module.editor,
+                            statement,
+                            "rgba(75, 200, 255, 0.125)"
+                        );
+                    }
                 } else {
                     this.setTokenColor(action.data?.statement, statement.color);
                 }
@@ -1432,9 +1441,10 @@ export class ActionExecutor {
                 this.openAutocompleteMenu(
                     this.module.actionFilter
                         .getProcessedInsertionsList()
-                        .filter((item) => item.insertionResult.insertionType != InsertionType.Invalid)
+                        .filter((item) => item.insertionResult.insertionType != InsertionType.Invalid),
+                    true
                 );
-                this.styleAutocompleteMenu(context.position);
+                this.styleAutocompleteMenu(context.position, true);
 
                 break;
 
@@ -1735,6 +1745,9 @@ export class ActionExecutor {
     }
 
     private setTokenColor(code: CodeConstruct, color: string) {
+        if (!SettingsController.getInstance().config.enabledColoredBlocks) {
+            return;
+        }
         const aRgbHex = color.substring(1).match(/.{1,2}/g);
         const aRgb = [parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16)];
 
@@ -1886,10 +1899,10 @@ export class ActionExecutor {
         }
     }
 
-    private openAutocompleteMenu(inserts: EditCodeAction[]) {
+    private openAutocompleteMenu(inserts: EditCodeAction[], isSpotlightSearch = false) {
         if (!this.module.menuController.isMenuOpen()) {
             inserts = inserts.filter((insert) => insert.insertionResult.insertionType !== InsertionType.Invalid);
-            this.module.menuController.buildSingleLevelMenu(inserts);
+            this.module.menuController.buildSingleLevelMenu(inserts, { left: 0, top: 0 }, isSpotlightSearch);
         } else this.module.menuController.removeMenus();
     }
 
@@ -2225,8 +2238,11 @@ export class ActionExecutor {
         );
     }
 
-    private styleAutocompleteMenu(pos: Position) {
+    private styleAutocompleteMenu(pos: Position, isSpotlightSearch: boolean = false) {
         this.module.menuController.styleMenuOptions();
-        this.module.menuController.updatePosition(this.module.menuController.getNewMenuPositionFromPosition(pos));
+        this.module.menuController.updatePosition(
+            this.module.menuController.getNewMenuPositionFromPosition(pos),
+            isSpotlightSearch
+        );
     }
 }

src/editor/consts.ts

@@ -287,6 +287,12 @@ export enum InsertActionType {
     InsertOperatorTkn,
 }
 
+export enum settingsConfigCategories {
+    enabledColoredBlocks = "enabledColoredBlocks",
+    enabledSpotlightSearch = "enabledSpotlightSearch",
+    enabledTyping = "enabledTyping",
+}
+
 export const Docs: any = {
     AddVarDocs,
     AddDocs,

src/editor/cursor.ts

@@ -1,4 +1,5 @@
 import { CodeConstruct, EmptyLineStmt, TypedEmptyExpr } from "../syntax-tree/ast";
+import { SettingsController } from "../utilities/settings";
 import { Editor } from "./editor";
 
 export class Cursor {
@@ -17,7 +18,11 @@ export class Cursor {
         const cursor = this;
 
         function loop() {
-            cursor.setTransform(cursor.code);
+            if (SettingsController.getInstance().config.enabledColoredBlocks) {
+                cursor.setTransformColor(cursor.code);
+            } else {
+                cursor.setTransform(cursor.code);
+            }
 
             requestAnimationFrame(loop);
         }
@@ -39,6 +44,27 @@ export class Cursor {
 
         const transform = this.editor.computeBoundingBox(selection);
 
+        this.element.style.top = `${transform.y + 5}px`;
+        this.element.style.left = `${transform.x - leftPadding}px`;
+
+        this.element.style.width = `${transform.width + rightPadding}px`;
+        this.element.style.height = `${transform.height - 5 * 2}px`;
+    }
+
+    setTransformColor(code: CodeConstruct) {
+        let leftPadding = 0;
+        let rightPadding = 0;
+
+        const selection = code != null ? code.getSelection() : this.editor.monaco.getSelection();
+
+        if (code instanceof TypedEmptyExpr) this.element.style.borderRadius = "15px";
+        else this.element.style.borderRadius = "0";
+
+        this.element.style.visibility = "visible";
+        if (!code || code instanceof EmptyLineStmt) this.element.style.visibility = "hidden";
+
+        const transform = this.editor.computeBoundingBox(selection);
+
         this.element.style.top = `${transform.y + 5 + 4}px`;
         this.element.style.left = `${transform.x - leftPadding}px`;
 

src/editor/event-router.ts

@@ -2,6 +2,7 @@ import { editor, IKeyboardEvent, IScrollEvent, Position } from "monaco-editor";
 
 import * as ast from "../syntax-tree/ast";
 import { Module } from "../syntax-tree/module";
+import { SettingsController } from "../utilities/settings";
 import { AutoCompleteType, DataType, IdentifierRegex, InsertionType } from "./../syntax-tree/consts";
 import { EditCodeAction } from "./action-filter";
 import { Actions, Docs, EditActionType, InsertActionType, KeyPress } from "./consts";
@@ -271,15 +272,20 @@ export class EventRouter {
 
             case KeyPress.Space: {
                 if (inTextEditMode) return new EditAction(EditActionType.InsertChar);
-                if (!inTextEditMode && e.ctrlKey && e.key.length == 1) {
+                if (
+                    !inTextEditMode &&
+                    e.ctrlKey &&
+                    e.key.length == 1 &&
+                    SettingsController.getInstance().config.enabledSpotlightSearch
+                ) {
                     return new EditAction(EditActionType.OpenValidInsertMenu);
                 }
 
                 break;
             }
 
             default: {
-                if (e.key.length == 1) {
+                if (e.key.length == 1 && SettingsController.getInstance().config.enabledTyping) {
                     if (inTextEditMode) {
                         switch (e.key) {
                             case KeyPress.C: