menu nearing final updates

1 files changed, 269 insertions, 106 deletions

diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 9e7608dc3..9a54579dc 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -56,15 +56,12 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         }
     }
 
-
-
     // Determining UI Specs
     @observable private label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
     @observable private icon = StrCast(this.dataDoc.icon, "user") as any;
     @observable private dropdown: boolean = BoolCast(this.rootDoc.dropDownOpen);
     @observable private dropdownDirection: string = StrCast(this.rootDoc.dropDownDirection);
     @observable private buttonList: string[] = StrListCast(this.rootDoc.btnList);
-    @observable private activeFont: string = StrCast(Doc.UserDoc()._fontFamily);
     @observable private type = StrCast(this.rootDoc.btnType);
 
     /**
@@ -106,18 +103,185 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         );
     }
 
-    @undoBatch setColor = action((color: ColorState, docColor?: string, userColor?: string) => {
-        console.log(docColor, userColor);
-        if (docColor) {
-            const numSelected = SelectionManager.Views().length;
-            const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
-            eval(docColor);
+    /**
+     * Dropdown button
+     */
+     @computed get dropdownListButton() {
+        const active: string = StrCast(this.rootDoc.dropDownOpen);
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+
+        const script: string = StrCast(this.rootDoc.script);
+
+        let noviceList: string[] = [];
+        let text:string | undefined;
+        let dropdown = true;
+        let show = true;
+        let icon: IconProp = "caret-down";
+
+
+        if (script == 'changeView'){
+            const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+            if (selected && StrCast(selected.Document.type) == DocumentType.COL){
+                text = StrCast(selected.Document._viewType);
+            } else if (selected) {
+                dropdown = false;
+                text = StrCast(selected.Document.type);
+                icon = Doc.toIcon(selected.Document);
+            }
+            noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
+        } else if (script == 'changeFont') {
+            const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+            if (selected && StrCast(selected.Document.type) == DocumentType.RTF){
+                text = StrCast(selected.Document._fontFamily);
+            } else {
+                text = StrCast(Doc.UserDoc()._fontFamily);
+            }
+            noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia",
+            "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"];
+        } else {
+            show = false;
         }
-        else if (userColor) {
-            const userDoc = Doc.UserDoc();
-            eval(userColor);
+
+        const items = this.buttonList.map((value) => {
+            // console.log(value);
+            if (Doc.UserDoc().noviceMode && !noviceList.includes(value)){
+                return;
+            }
+            const click = () => {
+                const s =  ScriptField.MakeScript(script+'("'+value+'")');
+                if (s){
+                    // console.log(s.script);
+                    s.script.run().result;
+                }
+            }
+            return <div className="list-item" key={`${value}`} 
+                style={{ fontFamily: script == 'changeFont' ? value : undefined }}
+                onClick={click}>
+                {value[0].toUpperCase() + value.slice(1)}
+            </div>;
+        });
+        
+        const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
+        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+            {this.label}
+        </div>;
+        
+        return (
+            <div className={`menuButton ${this.type} ${active}`}
+                style={{ display: show ? undefined : "none", backgroundColor: this.rootDoc.dropDownOpen ? Colors.LIGHT_BLUE : backgroundColor, color: this.rootDoc.dropDownOpen ? Colors.BLACK : color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}>
+                <div className="menuButton-dropdown-header">
+                    {text && text[0].toUpperCase() + text.slice(1)}
+                </div>
+                {label}
+                <div
+                className="menuButton-dropDown"
+                    style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
+                    <FontAwesomeIcon icon={icon} color={color} size="sm" />
+                </div>
+                {this.rootDoc.dropDownOpen ?
+                    <div>
+                        <div className="menuButton-dropdownList"
+                            style={{ left: 0 }}>
+                            {items}
+                        </div>
+                        <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
+                    </div>
+                    : null}
+            </div>
+        );
+    }
+
+
+    @computed get rangeButton() {
+        return (
+            <div>
+
+            </div>
+        )
+    }
+
+    /**
+     * Colour button
+     */
+    @computed get colorButton() {
+        const active: string = StrCast(this.rootDoc.dropDownOpen);
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        const numSelected = SelectionManager.Views().length;
+        const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
+        const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={selectedDoc ? selectedDoc._backgroundColor : backgroundColor}
+        presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
+            '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
+            '#FFFFFF', '#f1efeb', 'transparent']} />;
+        const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
+        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+            {this.label}
+        </div>;
+        const dropdownCaret = <div
+            className="menuButton-dropDown"
+            style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
+            <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
+        </div>;
+        const script: string = StrCast(this.rootDoc.script);
+        const click = (value: ColorState) => {
+            const hex: string = value.hex;
+            const s =  ScriptField.MakeScript(script+'("'+hex+'")');
+            if (s){
+                // console.log(s.script);
+                s.script.run().result;
+            }
         }
-    });
+        return (
+            <div className={`menuButton ${this.type} ${active}`}
+                style={{ display: selectedDoc ? undefined : "none", color: color, backgroundColor: selectedDoc ? selectedDoc._backgroundColor : backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+                onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}
+                onPointerDown={e => e.stopPropagation()}>
+                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+                {label}
+                {dropdownCaret}
+                {this.rootDoc.dropDownOpen ?
+                    <div>
+                        <div className="menuButton-dropdownBox"
+                            onPointerDown={e => e.stopPropagation()}
+                            onClick={e => e.stopPropagation()}
+                            style={{ left: 0 }}>
+                            {colorBox((color) => click(color))}
+                        </div>
+                        <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
+                    </div>
+                    : null}
+            </div>
+        );
+    }
+
+    @computed get toggleButton() {
+        const numSelected = SelectionManager.Views().length;
+        const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
+
+        const script: string = StrCast(this.rootDoc.script)+"(true)";
+        let toggleTrue: boolean | undefined = false;
+        if (script == 'toggleOverlay'){
+            toggleTrue = selectedDoc && BoolCast(selectedDoc.z);
+            console.log('toggleOverlay');
+        }
+        const boolResult = ScriptField.MakeScript(script)?.script.run().result;
+        // console.log(this.rootDoc.title, script, boolResult);
+        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+        // const canClick: boolean = this.rootDoc.canClick ? eval(StrCast(this.rootDoc.canClick)) : false;
+        const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
+        <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+            {this.label}
+        </div>;
+        return (
+            <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: toggleTrue ? Colors.MEDIUM_BLUE : "transparent" }}>
+                <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={toggleTrue ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} />
+                {label}
+            </div>
+        )
+    }
 
 
 
@@ -151,13 +315,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
         const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined;
         const userDoc = Doc.UserDoc();
 
-        // Toggle and canClick properties as determined from the variable passed into the button doc
-        const toggle = this.rootDoc.toggle ? ScriptCast(this.rootDoc.toggle) : undefined;
-        const canClick: boolean = this.rootDoc.canClick ? eval(StrCast(this.rootDoc.canClick)) : false;
-        // if (toggle) {
-        //     console.log(StrCast(this.rootDoc.title), toggle);
-        //     toggle.script.run();
-        // }
+        
         const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark;
 
         const active: string = StrCast(this.rootDoc.dropDownOpen);
@@ -169,111 +327,34 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
             <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                 {this.label}
             </div>;
-        const dropdownCaret = <div
-            className="menuButton-dropDown"
-            style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
-            <FontAwesomeIcon icon={'caret-down'} color={"black"} size="sm" />
-        </div>;
-        const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={StrCast(backgroundColor)}
-            presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
-                '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
-                '#FFFFFF', '#f1efeb', 'transparent']} />;
-        const items = this.buttonList.map((value) => {
-            return <div className="list-item"
-                style={{ fontFamily: value }}
-                onClick={() => Doc.UserDoc()._fontFamily = value}>
-                {value}
-            </div>;
-        });
-
-        /**
-         * Menu Panel Button: menuBtn
-         * Dropdown Button: dropDownBtn
-         * doubleBtn
-        **/
-
-        // CODEDUMP: glr
-        // const presSize = type === ButtonType.MenuButton ? 30 : 25;
-        // const presTrailsIcon = <img src={`/assets/${"presTrails.png"}`}
-        //     style={{ width: presSize, height: presSize, filter: `invert(${this.color === "white" ? "100%" : "0%"})`, marginBottom: "5px" }} />;
-
+       
         // TODO:glr Add label of button type
-        let button = (
-            <>
-                {this.defaultButton}
-            </>
-        );
+        let button = this.defaultButton;
 
         switch (this.type) {
             case ButtonType.DropdownButton:
-                button = (
-                    <>
-                        {this.dropdownButton}
-                    </>
-                );
+                button = this.dropdownButton;
                 break;
             case ButtonType.DropdownList:
-                button = (
-                    <div className={`menuButton ${this.type} ${active}`}
-                        style={{ backgroundColor: this.rootDoc.dropDownOpen ? "#aeddf880" : backgroundColor, color: this.rootDoc.dropDownOpen ? "#1c5c96" : color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
-                        onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}>
-                        {toggle}
-                        {label}
-                        {dropdownCaret}
-                        {this.rootDoc.dropDownOpen ?
-                            <>
-                                <div className="menuButton-dropdownList"
-                                    style={{ left: 0 }}>
-                                    {items}
-                                </div>
-                                <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
-                            </>
-                            : null}
-                    </div>
-                );
+                button = this.dropdownListButton;
                 break;
             case ButtonType.ColorButton:
-                button = (
-                    <div className={`menuButton ${this.type} ${active}`}
-                        style={{ opacity: selectedDoc ? 1 : 0.5, color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
-                        onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}
-                        onPointerDown={e => e.stopPropagation()}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
-                        {label}
-                        {dropdownCaret}
-                        {this.rootDoc.dropDownOpen ?
-                            <>
-                                <div className="menuButton-dropdownBox"
-                                    onPointerDown={e => e.stopPropagation()}
-                                    onClick={e => e.stopPropagation()}
-                                    style={{ left: 0 }}>
-                                    {colorBox((color) => this.setColor(color, StrCast(this.rootDoc.docColor), StrCast(this.rootDoc.userColor)))}
-                                </div>
-                                <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
-                            </>
-                            : null}
-                    </div>
-                );
+                button = this.colorButton;
                 break;
             case ButtonType.ToolButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ opacity: canClick ? 1 : 0.4, backgroundColor: backgroundColor, color: color }}>
+                    <div className={`menuButton ${this.type}`} style={{ opacity: 1, backgroundColor: backgroundColor, color: color }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
                 );
                 break;
             case ButtonType.ToggleButton:
-                button = (
-                    <div className={`menuButton ${this.type}`} style={{ opacity: canClick ? 1 : 0.4, backgroundColor: toggle ? backgroundColor : undefined }}>
-                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={toggle ? color : backgroundColor} />
-                        {label}
-                    </div>
-                );
+                button = this.toggleButton;
                 break;
             case ButtonType.ClickButton:
                 button = (
-                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: canClick ? 1 : 0.4 }}>
+                    <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor, opacity: 1 }}>
                         <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
                         {label}
                     </div>
@@ -299,9 +380,91 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                 break;
         }
 
-        return !this.layoutDoc.toolTip ? button :
+        return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton ? button :
             <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
                 {button}
             </Tooltip>;
     }
 }
+
+// SCRIPTING BUTTONS
+
+import { Scripting } from "../../../util/Scripting";
+import { CollectionViewType } from '../../collections/CollectionView';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { Colors } from '../../global/globalEnums';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function changeView(view: string) {
+    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+    selected ? selected.Document._viewType = view : console.log("[FontIconBox.tsx] changeView failed");
+});
+
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function changeBackgroundColor(color?: string, checkResult?: boolean) {
+    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+    if (checkResult){
+        return selected && selected.Document._backgroundColor;
+    }
+    selected ? selected.Document._backgroundColor = color : console.log("[FontIconBox.tsx] changeBackgroundColor failed");
+});
+
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function toggleOverlay(checkResult?:boolean) {
+    const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
+    if (checkResult){
+        return selected && selected.Document.z == 1;
+    }
+    selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
+});
+
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function changeFont(font: string) {
+    // TODO: glr check if font selected and change selected font
+    SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font);
+    console.log(font);
+    Doc.UserDoc()._fontFamily = font;
+    return Doc.UserDoc()._fontFamily;
+});
+
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function changeFontColor(color: string) {
+    // TODO: glr check if font selected and change selected font
+    console.log(color);
+    Doc.UserDoc()._fontColor = color;
+});
+
+// toggle: Set overlay status of selected document
+Scripting.addGlobal(function changeFontSize(size: string) {
+    // TODO: glr check if font selected and change selected font
+    console.log(size);
+    Doc.UserDoc()._fontSize = size;
+});
+
+Scripting.addGlobal(function toggleBold(checkResult?:boolean) {
+    if(checkResult) {
+        console.log("got here");
+        return Doc.UserDoc().bold;
+    }
+    // TODO: glr check if font selected and change selected font
+    SelectionManager.Views().map(dv => dv.props.Document.bold = !dv.props.Document.bold);
+    Doc.UserDoc().bold = !Doc.UserDoc().bold;
+    return Doc.UserDoc().bold;
+});
+
+Scripting.addGlobal(function toggleUnderline(checkResult?:boolean) {
+    if(checkResult) return Doc.UserDoc().underline;
+    // TODO: glr check if font selected and change selected font
+    SelectionManager.Views().map(dv => dv.props.Document.underline = !dv.props.Document.underline);
+    Doc.UserDoc().bold = !Doc.UserDoc().underline;
+    return Doc.UserDoc().underline;
+});
+
+Scripting.addGlobal(function toggleItalic(checkResult?:boolean) {
+    if(checkResult) return Doc.UserDoc().italic;
+    // TODO: glr check if font selected and change selected font
+    SelectionManager.Views().map(dv => dv.props.Document.italic = !dv.props.Document.italic);
+    Doc.UserDoc().bold = !Doc.UserDoc().italic;
+    return Doc.UserDoc().italic;
+});
\ No newline at end of file