numerous changes to fix bugs and to fix/remove old or hacky code. fixed doc dec resizing. moving this.rootDoc => this.Document . fixing template artifacts.

1 files changed, 44 insertions, 77 deletions

diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index de5ad1631..ba5370360 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -26,7 +26,6 @@ export enum ButtonType {
     TextButton = 'textBtn',
     MenuButton = 'menuBtn',
     DropdownList = 'dropdownList',
-    DropdownButton = 'dropdownBtn',
     ClickButton = 'clickBtn',
     ToggleButton = 'toggleBtn',
     ColorButton = 'colorBtn',
@@ -78,7 +77,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
 
     // Determining UI Specs
     @computed get label() {
-        return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
+        return StrCast(this.dataDoc.icon_label, StrCast(this.Document.title));
     }
     Icon = (color: string, iconFalse?: boolean) => {
         let icon;
@@ -91,13 +90,13 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         return !icon ? null : icon === 'pres-trail' ? TrailsIcon(color) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
     };
     @computed get dropdown() {
-        return BoolCast(this.rootDoc.dropDownOpen);
+        return BoolCast(this.Document.dropDownOpen);
     }
     @computed get buttonList() {
-        return StrListCast(this.rootDoc.btnList);
+        return StrListCast(this.Document.btnList);
     }
     @computed get type() {
-        return StrCast(this.rootDoc.btnType);
+        return StrCast(this.Document.btnType);
     }
 
     /**
@@ -131,8 +130,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 type = 'slider';
                 break;
         }
-        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);
+        const numScript = (value?: number) => ScriptCast(this.Document.script).script.run({ this: this.Document, value, _readOnly_: value === undefined });
+        const color = this.props.styleProvider?.(this.layoutDoc, 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)));
 
@@ -144,52 +143,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 showPlusMinus={false}
                 tooltip={this.label}
                 type={Type.PRIM}
-                min={NumCast(this.rootDoc.numBtnMin, 0)}
-                max={NumCast(this.rootDoc.numBtnMax, 100)}
+                min={NumCast(this.dataDoc.numBtnMin, 0)}
+                max={NumCast(this.dataDoc.numBtnMax, 100)}
                 number={checkResult}
-                setNumber={undoable(value => numScript(value), `${this.rootDoc.title} button set from list`)}
+                setNumber={undoable(value => numScript(value), `${this.Document.title} button set from list`)}
                 fillWidth
             />
         );
     }
 
-    /**
-     * Dropdown button
-     */
-    @computed get dropdownButton() {
-        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);
-        return (
-            <div
-                className={`menuButton ${this.type} ${active}`}
-                style={{ color, backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
-                onClick={action(() => {
-                    this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
-                    this.noTooltip = this.rootDoc.dropDownOpen;
-                    Doc.UnBrushAllDocs();
-                })}>
-                {this.Icon(color)}
-                {!this.label || !FontIconBox.ShowIconLabels ? null : (
-                    <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
-                        {' '}
-                        {this.label}{' '}
-                    </div>
-                )}
-                <div className="menuButton-dropdown" style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
-                    <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
-                </div>
-                {this.rootDoc.dropDownOpen ? <div className="menuButton-dropdownBox">{/* DROPDOWN BOX CONTENTS */}</div> : null}
-            </div>
-        );
-    }
-
     dropdownItemDown = (e: React.PointerEvent, value: string | number) => {
         setupMoveUpEvents(
             this,
             e,
             (e: PointerEvent) => {
-                return ScriptCast(this.rootDoc.onDragScript)?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: { doc: value, e } }).result;
+                return ScriptCast(this.Document.onDragScript)?.script.run({ this: this.Document, value: { doc: value, e } }).result;
             },
             emptyFunction,
             emptyFunction
@@ -201,7 +169,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      * Dropdown list
      */
     @computed get dropdownListButton() {
-        const script = ScriptCast(this.rootDoc.script);
+        const script = ScriptCast(this.Document.script);
 
         let noviceList: string[] = [];
         let text: string | undefined;
@@ -237,7 +205,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             }
             noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Carousel3D, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
         } else {
-            text = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result;
+            text = script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result;
             // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
             getStyle = (val: string) => ({ fontFamily: val });
         }
@@ -255,7 +223,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         return (
             <Dropdown
                 selectedVal={text}
-                setSelectedVal={undoable(value => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value }), `dropdown select ${this.label}`)}
+                setSelectedVal={undoable(value => script.script.run({ this: this.Document, value }), `dropdown select ${this.label}`)}
                 color={SettingsManager.userColor}
                 background={SettingsManager.userVariantColor}
                 type={Type.TERT}
@@ -270,7 +238,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     }
 
     @computed get colorScript() {
-        return ScriptCast(this.rootDoc.script);
+        return ScriptCast(this.Document.script);
     }
 
     colorBatch: UndoManager.Batch | undefined;
@@ -278,18 +246,18 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      * Color button
      */
     @computed get colorButton() {
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        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);
+        const color = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color);
+        const curColor = this.colorScript?.script.run({ this: this.Document, value: undefined, _readOnly_: true }).result ?? 'transparent';
+        const tooltip: string = StrCast(this.Document.toolTip);
 
         return (
             <ColorPicker
                 setSelectedColor={value => {
                     if (!this.colorBatch) this.colorBatch = UndoManager.StartBatch(`Set ${tooltip} color`);
-                    this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false });
+                    this.colorScript?.script.run({ this: this.Document, value: value, _readOnly_: false });
                 }}
                 setFinalColor={value => {
-                    this.colorScript?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: value, _readOnly_: false });
+                    this.colorScript?.script.run({ this: this.Document, value: value, _readOnly_: false });
                     this.colorBatch?.end();
                     this.colorBatch = undefined;
                 }}
@@ -306,13 +274,13 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     }
     @computed get multiToggleButton() {
         // Determine the type of toggle button
-        const tooltip: string = StrCast(this.rootDoc.toolTip);
+        const tooltip: string = StrCast(this.Document.toolTip);
 
-        const script = ScriptCast(this.rootDoc.onClick);
-        const toggleStatus = script ? script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
+        const script = ScriptCast(this.Document.onClick);
+        const toggleStatus = script ? script.script.run({ this: this.Document, value: undefined, _readOnly_: true }).result : false;
         // Colors
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const items = DocListCast(this.rootDoc.data);
+        const color = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color);
+        const items = DocListCast(this.dataDoc.data);
         return (
             <MultiToggle
                 tooltip={`Toggle ${tooltip}`}
@@ -320,7 +288,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 color={color}
                 background={SettingsManager.userBackgroundColor}
                 label={this.label}
-                items={DocListCast(this.rootDoc.data).map(item => ({
+                items={DocListCast(this.dataDoc.data).map(item => ({
                     icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />,
                     tooltip: StrCast(item.toolTip),
                     val: StrCast(item.toolType),
@@ -336,14 +304,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
 
     @computed get toggleButton() {
         // Determine the type of toggle button
-        const buttonText: string = StrCast(this.rootDoc.buttonText);
-        const tooltip: string = StrCast(this.rootDoc.toolTip);
+        const buttonText = StrCast(this.dataDoc.buttonText);
+        const tooltip = StrCast(this.Document.toolTip);
 
-        const script = ScriptCast(this.rootDoc.onClick);
-        const toggleStatus = script ? script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: undefined, _readOnly_: true }).result : false;
+        const script = ScriptCast(this.Document.onClick);
+        const toggleStatus = script ? script.script.run({ this: this.Document, 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);
+        const color = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor);
 
         return (
             <Toggle
@@ -356,7 +324,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 //background={SettingsManager.userBackgroundColor}
                 icon={this.Icon(color)!}
                 label={this.label}
-                onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
+                onPointerDown={() => script.script.run({ this: this.Document, value: !toggleStatus, _readOnly_: false })}
             />
         );
     }
@@ -365,20 +333,20 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
      * Default
      */
     @computed get defaultButton() {
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const tooltip: string = StrCast(this.rootDoc.toolTip);
+        const color = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color);
+        const backgroundColor = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor);
+        const tooltip: string = StrCast(this.Document.toolTip);
 
         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);
+        const script = ScriptCast(this.Document.script);
         // Function to run the script
-        const checkResult = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result;
+        const checkResult = script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result;
 
-        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value, _readOnly_: false }).result;
+        const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ this: this.Document, value, _readOnly_: false }).result;
 
         return <EditableText editing={false} setEditing={(editing: boolean) => {}} />;
 
@@ -386,16 +354,16 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             <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({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
+                    <EditableView GetValue={() => script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result} SetValue={setValue} oneLine={true} contents={checkResult} />
                 </div>
             </div>
         );
     }
 
     render() {
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const tooltip = StrCast(this.rootDoc.toolTip);
-        const scriptFunc = () => ScriptCast(this.rootDoc.onClick)?.script.run({ this: this.layoutDoc, self: this.rootDoc, _readOnly_: false });
+        const color = this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color);
+        const tooltip = StrCast(this.Document.toolTip);
+        const scriptFunc = () => ScriptCast(this.Document.onClick)?.script.run({ this: this.Document, self: this.Document, _readOnly_: false });
         const btnProps = { tooltip, icon: this.Icon(color)!, label: this.label };
         // prettier-ignore
         switch (this.type) {
@@ -405,15 +373,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             case ButtonType.EditableText:       return this.editableText; 
             case ButtonType.DropdownList:       return this.dropdownListButton;
             case ButtonType.ColorButton:        return this.colorButton; 
-            case ButtonType.DropdownButton:     return this.dropdownButton;
             case ButtonType.MultiToggleButton:  return this.multiToggleButton;
             case ButtonType.ToggleButton:       return this.toggleButton;
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />;
             case ButtonType.TextButton: return <Button     {...btnProps} color={color} 
-            background={SettingsManager.userBackgroundColor} text={StrCast(this.rootDoc.buttonText)}/>;
+                        background={SettingsManager.userBackgroundColor} text={StrCast(this.dataDoc.buttonText)}/>;
             case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} 
-            background={SettingsManager.userBackgroundColor}  size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
+                        background={SettingsManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />; 
         }
         return this.defaultButton;
     }