menu getting closer :cry:

1 files changed, 82 insertions, 52 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 2903b84e3..c7aa57ff0 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -38,7 +38,20 @@ import { SharingManager } from "./SharingManager";
 import { SnappingManager } from "./SnappingManager";
 import { UndoManager } from "./UndoManager";
 import { ButtonType } from "../views/nodes/button/FontIconBox";
-
+import { IconName } from "@fortawesome/fontawesome-svg-core";
+
+interface Button {
+    title?: string; 
+    toolTip?: string; 
+    icon?: string; 
+    btnType?: ButtonType; 
+    click?: string; 
+    switchToggle?: boolean;
+    script?: string; 
+    width?: number; 
+    list?: string[]; 
+    ignoreClick?: boolean;
+}
 
 export let resolvedPorts: { server: number, socket: number };
 const headerViewVersion = "0.1";
@@ -918,46 +931,71 @@ export class CurrentUserUtils {
     }
 
     static textTools(doc: Doc) {
-        return [
+        const tools:Button[] = 
+        [
             {
                 title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, ignoreClick: true,
                 list: ["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia",
                     "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"],
                 script: 'changeFont'
             },
+            { title: "Font size", toolTip: "Font size", btnType: ButtonType.NumberButton, script: 'changeFontSize'},
             { title: "Bold", toolTip: "Bold (Ctrl+B)", btnType: ButtonType.ToggleButton, icon: "bold", click: 'toggleBold()', script: 'toggleBold' },
             { title: "Italic", toolTip: "Italic (Ctrl+I)", btnType: ButtonType.ToggleButton, icon: "italic", click: 'toggleItalic()', script: 'toggleItalic' },
             { title: "Underline", toolTip: "Underline (Ctrl+U)", btnType: ButtonType.ToggleButton, icon: "underline", click: 'toggleUnderline()', script: 'toggleUnderline' },
             // { title: "Strikethrough", tooltip: "Strikethrough", btnType: ButtonType.ToggleButton, icon: "strikethrough", click: 'toggleStrikethrough()'},
             // { title: "Superscript", tooltip: "Superscript", btnType: ButtonType.ToggleButton, icon: "superscript", click: 'toggleSuperscript()'},
             // { title: "Subscript", tooltip: "Subscript", btnType: ButtonType.ToggleButton, icon: "subscript", click: 'toggleSubscript()'},
-            { title: "Highlight", toolTip: "Highlight", btnType: ButtonType.ColorButton, icon: "highlighter", ignoreClick: true, script:'changeFontColor' },
+            { title: "Left align", toolTip: "Left align", btnType: ButtonType.ToggleButton, icon: "align-left", ignoreClick: true, script:'changeAlignment("left")' },
+            { title: "Center align", toolTip: "Center align", btnType: ButtonType.ToggleButton, icon: "align-center", ignoreClick: true, script:'changeAlignment("center")' },
+            { title: "Right align", toolTip: "Right align", btnType: ButtonType.ToggleButton, icon: "align-right", ignoreClick: true, script:'changeAlignment("right")' },
+
+            { title: "Highlight", toolTip: "Highlight", btnType: ButtonType.ColorButton, icon: "font", ignoreClick: true, script:'changeFontColor' },
             { title: "Text color", toolTip: "Text color", btnType: ButtonType.ColorButton, icon: "highlighter", ignoreClick: true, script:'changeHighlightColor' },
         ];
+        return tools;
     }
 
     static inkTools(doc: Doc) {
-        return [
+        const tools:Button[] = [
             { title: "Pen", toolTip: "Pen (Ctrl+P)", btnType: ButtonType.ToggleButton, icon: "pen", click: 'togglePen()', script: 'togglePen' },
-            { title: "Highlighter", toolTip: "Highlighter (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", click: 'toggleHighlighter()', script: 'toggleHighlighter' },
+            { title: "Highlighter", toolTip: "Highlighter (Ctrl+H)", btnType: ButtonType.ToggleButton, icon: "highlighter", click: 'setHighlighter()', script: 'toggleHighlighter' },
             { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'toggleCircle()', script: 'toggleCircle' },
             { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'toggleSquare()', script: 'toggleSquare' },
             { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "fill-drip", click: 'toggleLine()', script: 'toggleLine' },
         ];
+        return tools;
     }
 
-    static webTools(doc: Doc) {
-        return [
-            {
-                title: "Font", toolTip: "Font", width: 100, btnType: ButtonType.DropdownList, ignoreClick: true,
-                list: ["Roboto", "Roboto Mono", "Nunito", "Times New Roman", "Arial", "Georgia",
-                    "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"],
-                script: 'changeFont'
+    static schemaTools(doc: Doc) {
+        const tools:Button[] = 
+        [
+            { 
+                title: "Show preview", 
+                toolTip: "Show preview of selected document", 
+                btnType: ButtonType.ToggleButton, 
+                switchToggle: true, 
+                icon: "eye", 
+                click: 'toggleSchemaShow()', 
+                script: 'toggleSchemaShow' 
             },
         ];
+        return tools;
+    }
+
+    static webTools(doc: Doc) {
+        const tools:Button[] = 
+        [
+            { title: "Back", toolTip: "Go back", btnType: ButtonType.ClickButton, icon: "arrow-left", click: 'webBack()' },
+            { title: "Forward", toolTip: "Go forward", btnType: ButtonType.ClickButton, icon: "arrow-right", click: 'webForward()' },
+            { title: "Reload", toolTip: "Reload webpage", btnType: ButtonType.ClickButton, icon: "redo-alt", click: 'webReload()' },
+            { title: "URL", toolTip: "URL", width: 150, btnType: ButtonType.EditableText, icon: "lock", script: 'webSetURL' },
+        ];
+
+        return tools;
     }
 
-    static async contextMenuBtnDescriptions(doc: Doc) {
+    static async contextMenuTools(doc: Doc) {
         return [
             {
                 title: "Perspective", toolTip: "View", width: 100, btnType: ButtonType.DropdownList, ignoreClick: true,
@@ -973,50 +1011,41 @@ export class CurrentUserUtils {
                 script: "changeBackgroundColor"
             },
             { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', script:'toggleOverlay'},
-            { title: "Text", type: "TextMenu" },
-            { title: "Ink & GFX", type: "InkMenu" },
-            // { title: "Ink Tools", type: "LinearMenu", icon: "pen-nib" },
-            // { title: "GFX Tools", type: "LinearMenu", icon: "shapes" },
-            // { title: "Alias", btnType: ButtonType.ClickButton, icon: "copy" },
+            { title: "Alias", btnType: ButtonType.ClickButton, icon: "copy" },
+            { title: "Text", type: "textTools", subMenu: true },
+            { title: "Ink & GFX", type: "inkTools", subMenu: true },
+            { title: "Web", type: "webTools", subMenu: true },
+            { title: "Schema", type: "schemaTools", subMenu: true }
         ];
     }
 
-    // Default context menu buttons
+    // Sets up the default context menu buttons
     static async setupContextMenuButtons(doc: Doc) {
         const docList: Doc[] = [];
 
-        const contextMenuBtns = (await CurrentUserUtils.contextMenuBtnDescriptions(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, type, btnType, click, script }) => {
-            const textDocList: Doc[] = [];
-            if (type === "TextMenu") {
-                const textBtns = (CurrentUserUtils.textTools(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, btnType, click, script, userColorBtn }) => {
-                    textDocList.push(Docs.Create.FontIconDocument({
-                        _nativeWidth: width ? width : 25,
-                        _nativeHeight: 25,
-                        _width: width ? width : 25,
-                        _height: 25,
-                        icon,
-                        toolTip,
-                        userColorBtn,
-                        script,
-                        btnType: btnType,
-                        btnList: new List<string>(list),
-                        ignoreClick: ignoreClick,
-                        _stayInCollection: true,
-                        _hideContextMenu: true,
-                        system: true,
-                        dontUndo: true,
-                        title,
-                        color: Colors.WHITE,
-                        backgroundColor: "transparent",
-                        _dropAction: "alias",
-                        _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
-                        onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
-                    }));
-                });
-                docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
-            } else if (type === "InkMenu") {
-                const inkBtns = (CurrentUserUtils.inkTools(doc)).map(({ title, toolTip, icon, btnType, click }) => {
-                    textDocList.push(Docs.Create.FontIconDocument({
+        (await CurrentUserUtils.contextMenuTools(doc)).map(({ title, width, list, toolTip, ignoreClick, icon, type, btnType, click, script, subMenu }) => {
+            const menuDocList: Doc[] = [];
+            if (subMenu) {
+                // default is textTools
+                let tools: Button[];
+                switch(type){
+                    case "inkTools":
+                        tools = CurrentUserUtils.inkTools(doc);
+                        break;
+                    case "schemaTools":
+                        tools = CurrentUserUtils.schemaTools(doc);
+                        break;
+                    case "webTools":
+                        tools = CurrentUserUtils.webTools(doc);
+                        break;
+                    case "textTools":
+                        tools = CurrentUserUtils.textTools(doc);
+                        break;
+                    default:
+                        break;
+                }
+                tools.map(({ title, toolTip, icon, btnType, click, script, width, list, ignoreClick }) => {
+                    menuDocList.push(Docs.Create.FontIconDocument({
                         _nativeWidth: width ? width : 25,
                         _nativeHeight: 25,
                         _width: width ? width : 25,
@@ -1039,7 +1068,7 @@ export class CurrentUserUtils {
                         onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined
                     }));
                 });
-                docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, textDocList));
+                docList.push(CurrentUserUtils.linearButtonList({ linearViewSubMenu: true, flexGap: 5, ignoreClick: true, linearViewExpandable: true, icon:title, _height: 30, backgroundColor: "transparent" }, menuDocList));
             } else {
                 docList.push(Docs.Create.FontIconDocument({
                     _nativeWidth: width ? width : 25,
@@ -1070,6 +1099,7 @@ export class CurrentUserUtils {
             doc.contextMenuBtns = CurrentUserUtils.linearButtonList({ title: "menu buttons", flexGap: 0, ignoreClick: true, linearViewExpandable: false, _height: 35 }, docList);
         }
     }
+
     // sets up the default set of documents to be shown in the Overlay layer
     static setupOverlays(doc: Doc) {
         if (doc.myOverlayDocs === undefined) {