fixed FontIconBox scripts to set 'this' to fix tool bars buttons not working. enabled access to contextMenu in treeView and topBar even when hideContextMenu is set

1 files changed, 74 insertions, 91 deletions

diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 3ec53beac..da1b89200 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -86,10 +86,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     }
     Icon = (color: string, iconFalse?: boolean) => {
         let icon;
-        if (iconFalse ) {
+        if (iconFalse) {
             icon = StrCast(this.dataDoc[this.fieldKey ?? 'iconFalse'] ?? this.dataDoc.icon, 'user') as any;
-            if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />
-            else return null
+            if (icon) return <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
+            else return null;
         }
         icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
         const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
@@ -124,36 +124,38 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      */
     @computed get numberDropdown() {
         let type: NumberDropdownType;
-        switch(this.type) {
-            case ButtonType.NumberDropdownButton: 
-                type = 'dropdown'
+        switch (this.type) {
+            case ButtonType.NumberDropdownButton:
+                type = 'dropdown';
                 break;
             case ButtonType.NumberInlineButton:
-                type = 'input'
+                type = 'input';
                 break;
             case ButtonType.NumberSliderButton:
             default:
-                type = 'slider'
+                type = 'slider';
                 break;
         }
-        const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ self: this.rootDoc, value, _readOnly_: value === undefined });
+        const numScript = (value?: number) => ScriptCast(this.rootDoc.script).script.run({ this: this.layoutDoc, self: this.rootDoc, value, _readOnly_: value === undefined });
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         // Script for checking the outcome of the toggle
         const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
         const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
 
-        return <NumberDropdown 
-            color={color} 
-            numberDropdownType={type} 
-            showPlusMinus={false} 
-            tooltip={this.label}
-            type={Type.PRIM}
-            min={NumCast(this.rootDoc.numBtnMin, 0)}
-            max={NumCast(this.rootDoc.numBtnMax, 100)}
-            number={checkResult} 
-            setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}
-            fillWidth
-        />
+        return (
+            <NumberDropdown
+                color={color}
+                numberDropdownType={type}
+                showPlusMinus={false}
+                tooltip={this.label}
+                type={Type.PRIM}
+                min={NumCast(this.rootDoc.numBtnMin, 0)}
+                max={NumCast(this.rootDoc.numBtnMax, 100)}
+                number={checkResult}
+                setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}
+                fillWidth
+            />
+        );
     }
 
     /**
@@ -202,84 +204,69 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         let dropdown = true;
         let getStyle: (val: string) => any = () => {};
         let icon: IconProp = 'caret-down';
-        let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView')
+        let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView');
         try {
             if (isViewDropdown) {
                 const selectedDocs: Doc[] = SelectionManager.Docs();
                 const selected = SelectionManager.Docs().lastElement();
-                console.log('selected')
+                console.log('selected');
                 if (selected) {
                     if (StrCast(selected.type) === DocumentType.COL) {
                         text = StrCast(selected._type_collection);
-                        console.log("collection selected", text)
+                        console.log('collection selected', text);
                     } else {
-                        console.log("doc selected", selected.title);
+                        console.log('doc selected', selected.title);
                         dropdown = false;
                         if (selectedDocs.length > 1) {
-                            text = selectedDocs.length + " selected"
+                            text = selectedDocs.length + ' selected';
                         } else {
                             text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
                             icon = Doc.toIcon(selected);
                         }
-                        return <Popup
-                            icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
-                            text={text}
-                            type={Type.TERT}
-                            color={color}
-                            popup={<SelectedDocView selectedDocs={selectedDocs}/>}
-                            fillWidth
-                        />
+                        return <Popup icon={<FontAwesomeIcon size={'1x'} icon={icon} />} text={text} type={Type.TERT} color={color} popup={<SelectedDocView selectedDocs={selectedDocs} />} fillWidth />;
                     }
                 } else {
                     dropdown = false;
-                    return <Button 
-                        text={`None Selected`} 
-                        type={Type.TERT}
-                        color={color}
-                        fillWidth
-                        inactive
-                    />
+                    return <Button text={`None Selected`} type={Type.TERT} color={color} fillWidth inactive />;
                 }
                 noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
-            } else { 
+            } else {
                 text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
-                getStyle = (val: string) => { return { fontFamily: val } }
+                getStyle = (val: string) => {
+                    return { fontFamily: val };
+                };
             }
         } catch (e) {
             console.log(e);
         }
 
-        console.log("current item: ", text);
+        console.log('current item: ', text);
 
         // Get items to place into the list
         const list: IListItemProps[] = this.buttonList
             .filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
-            .map(value => (
-                {
-                    text: value.charAt(0).toUpperCase() + value.slice(1),
-                    val: value,
-                    style: getStyle(value),
-                    onClick: undoable(() => script.script.run({ self: this.rootDoc, value }), value)
-                    // shortcut: '#',
-                }
-            ));
-
+            .map(value => ({
+                text: value.charAt(0).toUpperCase() + value.slice(1),
+                val: value,
+                style: getStyle(value),
+                onClick: undoable(() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value }), value),
+                // shortcut: '#',
+            }));
 
         return (
-            <Dropdown 
+            <Dropdown
                 selectedVal={text}
-                setSelectedVal={undoable((val) => script.script.run({ self: this.rootDoc, val }), `dropdown select ${this.label}`)}
-                color={color} 
-                type={isViewDropdown ? Type.TERT : Type.PRIM} 
-                dropdownType={DropdownType.SELECT} 
+                setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
+                color={color}
+                type={isViewDropdown ? Type.TERT : Type.PRIM}
+                dropdownType={DropdownType.SELECT}
                 items={list}
                 tooltip={this.label}
                 fillWidth
             />
-        )
+        );
     }
 
-
     @computed get colorScript() {
         return ScriptCast(this.rootDoc.script);
     }
@@ -290,14 +277,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     @computed get colorButton() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const curColor = this.colorScript?.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
+        const curColor = this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result ?? 'transparent';
         const tooltip: string = StrCast(this.rootDoc.toolTip);
 
         return (
-            <ColorPicker 
-                setSelectedColor={(value) => {
+            <ColorPicker
+                setSelectedColor={value => {
                     const s = this.colorScript;
-                    s && undoable(() => s.script.run({ self: this.rootDoc, value: value, _readOnly_: false }).result, `Set ${tooltip} to ${value}`)();
+                    s && undoable(() => s.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false }).result, `Set ${tooltip} to ${value}`)();
                 }}
                 selectedColor={curColor}
                 type={Type.PRIM}
@@ -306,7 +293,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 tooltip={tooltip}
                 label={this.label}
             />
-        )
+        );
     }
 
     @computed get toggleButton() {
@@ -315,25 +302,24 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const tooltip: string = StrCast(this.rootDoc.toolTip);
 
         const script = ScriptCast(this.rootDoc.onClick);
-        const toggleStatus = script ? script.script.run({ self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
+        const toggleStatus = script ? script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
         // Colors
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
 
-        console.log(tooltip, toggleStatus);
         return (
-            <Toggle 
-                tooltip={`Toggle ${tooltip}`} 
-                toggleType={ToggleType.BUTTON} 
-                type={Type.PRIM} 
-                toggleStatus={toggleStatus} 
-                text={buttonText} 
-                color={color} 
-                icon={this.Icon(color)!} 
+            <Toggle
+                tooltip={`Toggle ${tooltip}`}
+                toggleType={ToggleType.BUTTON}
+                type={Type.PRIM}
+                toggleStatus={toggleStatus}
+                text={buttonText}
+                color={color}
+                icon={this.Icon(color)!}
                 label={this.label}
-                onPointerDown={() => script.script.run({ self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
+                onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
             />
-        )
+        );
     }
 
     /**
@@ -344,28 +330,24 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
         const tooltip: string = StrCast(this.rootDoc.toolTip);
 
-        return (
-            <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label}/>
-        )
+        return <IconButton tooltip={tooltip} icon={this.Icon(color)!} label={this.label} />;
     }
 
     @computed get editableText() {
         // Script for running the toggle
         const script = ScriptCast(this.rootDoc.script);
         // Function to run the script
-        const checkResult = script?.script.run({ value: '', _readOnly_: true }).result;
+        const checkResult = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result;
+
+        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value, _readOnly_: false }).result;
+
+        return <EditableText editing={false} setEditing={(editing: boolean) => {}} />;
 
-        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result;
-        
-        return <EditableText 
-            editing={false} setEditing={(editing: boolean) => {}}            
-        />
-        
         return (
             <div className="menuButton editableText">
                 <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'lock'} />
                 <div style={{ width: 'calc(100% - .875em)', paddingLeft: '4px' }}>
-                    <EditableView GetValue={() => script?.script.run({ value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
+                    <EditableView GetValue={() => script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
                 </div>
             </div>
         );
@@ -403,7 +385,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: 
                 button = (
-                    <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ _readOnly_: false })} color={color} icon={this.Icon(color)!} label={this.label}/>
+                    <IconButton tooltip={tooltip} 
+                    color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
             case ButtonType.TextButton: 
@@ -412,7 +395,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 );
                 break;
             case ButtonType.MenuButton: button = (
-                    <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ self: this.rootDoc, _readOnly_: false })} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+                    <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, _readOnly_: false })} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
                 );
                 break;
         }