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

3 files changed, 120 insertions, 145 deletions

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 9eb716763..5135cfb57 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -33,7 +33,7 @@ import { LightboxView } from '../LightboxView';
 import { MainView } from '../MainView';
 import { DefaultStyleProvider } from '../StyleProvider';
 import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
-import { DocumentView, OpenWhereMod } from '../nodes/DocumentView';
+import { DocumentView, DocumentViewInternal, OpenWhereMod } from '../nodes/DocumentView';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
 import { CollectionDockingView } from './CollectionDockingView';
 import './CollectionMenu.scss';
@@ -129,7 +129,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
                     docViewPath={returnEmptyDoclist}
                     moveDocument={returnFalse}
                     addDocument={returnFalse}
-                    addDocTab={returnFalse}
+                    addDocTab={DocumentViewInternal.addDocTabFunc}
                     pinToPres={emptyFunction}
                     removeDocument={returnFalse}
                     ScreenToLocalTransform={this.buttonBarXf}
@@ -154,21 +154,21 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
 
         const hardCodedButtons = (
             <div className={`hardCodedButtons`}>
-                <Toggle 
-                    toggleType={ToggleType.BUTTON} 
-                    type={Type.PRIM} 
-                    color={StrCast(Doc.UserDoc().userColor)} 
-                    onClick={this.toggleTopBar} 
-                    toggleStatus={SettingsManager.headerBarHeight > 0} 
+                <Toggle
+                    toggleType={ToggleType.BUTTON}
+                    type={Type.PRIM}
+                    color={StrCast(Doc.UserDoc().userColor)}
+                    onClick={this.toggleTopBar}
+                    toggleStatus={SettingsManager.headerBarHeight > 0}
                     icon={<FontAwesomeIcon icon={headerIcon} size="lg" />}
                     tooltip={headerTitle}
                 />
-                <Toggle 
-                    toggleType={ToggleType.BUTTON} 
+                <Toggle
+                    toggleType={ToggleType.BUTTON}
                     type={Type.PRIM}
-                    color={StrCast(Doc.UserDoc().userColor)} 
-                    onClick={this.toggleProperties} 
-                    toggleStatus={SettingsManager.propertiesWidth > 0} 
+                    color={StrCast(Doc.UserDoc().userColor)}
+                    onClick={this.toggleProperties}
+                    toggleStatus={SettingsManager.propertiesWidth > 0}
                     icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
                     tooltip={propTitle}
                 />
@@ -178,11 +178,12 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
         // NEW BUTTONS
         //dash col linear view buttons
         const contMenuButtons = (
-            <div className="collectionMenu-container" 
-            style={{
-                background: StrCast(Doc.UserDoc().userBackgroundColor),
-                // borderColor: StrCast(Doc.UserDoc().userColor)
-            }} >
+            <div
+                className="collectionMenu-container"
+                style={{
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    // borderColor: StrCast(Doc.UserDoc().userColor)
+                }}>
                 {this.contMenuButtons}
                 {hardCodedButtons}
             </div>
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index d904749b1..51c70633c 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -222,10 +222,8 @@ export class TreeView extends React.Component<TreeViewProps> {
             this.treeViewOpen = !this.treeViewOpen;
         } else {
             // choose an appropriate embedding or make one. --- choose the first embedding that (1) user owns,  (2) has no context field ... otherwise make a new embedding
-            const bestEmbedding =  docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document)
-                    ? docView.rootDoc
-                    : Doc.BestEmbedding(docView.rootDoc);
-              this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
+            const bestEmbedding = docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document) ? docView.rootDoc : Doc.BestEmbedding(docView.rootDoc);
+            this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
         }
     };
 
@@ -540,8 +538,8 @@ export class TreeView extends React.Component<TreeViewProps> {
         TraceMobx();
         const expandKey = this.treeViewExpandedView;
         const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {};
-        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color)
-        console.log("tree view", color, this.doc.title, Doc.IsSystem(this.doc))
+        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color);
+        console.log('tree view', color, this.doc.title, Doc.IsSystem(this.doc));
         if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) {
             const sorting = StrCast(this.doc.treeViewSortCriterion, TreeSort.None);
             const sortKeys = Object.keys(sortings);
@@ -581,9 +579,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                 );
             }
             return (
-                <div style={{ 
-                    color: color
-                 }}>
+                <div
+                    style={{
+                        color: color,
+                    }}>
                     {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
                         <div className={'treeView-sorting'}>
                             <IconButton
@@ -725,26 +724,19 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }>
                 {this.props.treeView.outlineMode ? (
                     !(this.doc.text as RichTextField)?.Text ? null : (
-                        <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon 
-                            icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
-                            size={Size.XSMALL}
-                        />
+                        <IconButton color={color} icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} size={Size.XSMALL} />
                     )
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
-                        {this.onCheckedClick ? <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
-                            size={Size.XSMALL}
-                        /> : 
+                        {this.onCheckedClick ? (
                             <IconButton
-                                color={color} 
-                                icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+                                color={color}
+                                icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
                                 size={Size.XSMALL}
                             />
-                        }
+                        ) : (
+                            <IconButton color={color} icon={<FontAwesomeIcon icon={iconType as IconProp} />} size={Size.XSMALL} />
+                        )}
                     </div>
                 )}
             </div>
@@ -776,17 +768,15 @@ export class TreeView extends React.Component<TreeViewProps> {
         return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
             <>
                 {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
-                {this.doc._layout_hideContextMenu ? null : (
-                    <IconButton
-                        color={color} 
-                        icon={<FontAwesomeIcon icon="bars" />}
-                        size={Size.XSMALL}
-                        onClick={e => {
-                            this.showContextMenu(e);
-                            e.stopPropagation();
-                        }}
-                    />
-                )}
+                <IconButton
+                    color={color}
+                    icon={<FontAwesomeIcon icon="bars" />}
+                    size={Size.XSMALL}
+                    onClick={e => {
+                        this.showContextMenu(e);
+                        e.stopPropagation();
+                    }}
+                />
                 {Doc.noviceMode ? null : this.doc.treeViewExpandedViewLock || Doc.IsSystem(this.doc) ? null : (
                     <span className="collectionTreeView-keyHeader" title="type of expanded data" key={this.treeViewExpandedView} onPointerDown={this.expandNextviewType}>
                         {this.treeViewExpandedView}
@@ -1015,9 +1005,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                     onPointerEnter={this.onPointerEnter}
                     onPointerLeave={this.onPointerLeave}>
                     {contents}
-                    <div className={`treeView-background`}
+                    <div
+                        className={`treeView-background`}
                         style={{
-                            background: StrCast(Doc.UserDoc().userColor)
+                            background: StrCast(Doc.UserDoc().userColor),
                         }}
                     />
                 </div>
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;
         }