diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 582 |
1 files changed, 307 insertions, 275 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 28874220a..539fb5c99 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -14,7 +14,7 @@ import { WebField } from '../../../../fields/URLField'; import { aggregateBounds, Utils } from '../../../../Utils'; import { DocumentType } from '../../../documents/DocumentTypes'; import { CurrentUserUtils } from '../../../util/CurrentUserUtils'; -import { ScriptingGlobals } from "../../../util/ScriptingGlobals"; +import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; import { SelectionManager } from '../../../util/SelectionManager'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; import { CollectionFreeFormView } from '../../collections/collectionFreeForm'; @@ -34,23 +34,23 @@ import { FontIconBadge } from './FontIconBadge'; import './FontIconBox.scss'; export enum ButtonType { - TextButton = "textBtn", - MenuButton = "menuBtn", - DropdownList = "drpdownList", - DropdownButton = "drpdownBtn", - ClickButton = "clickBtn", - DoubleButton = "dblBtn", - ToggleButton = "tglBtn", - ColorButton = "colorBtn", - ToolButton = "toolBtn", - NumberButton = "numBtn", - EditableText = "editableText" + TextButton = 'textBtn', + MenuButton = 'menuBtn', + DropdownList = 'drpdownList', + DropdownButton = 'drpdownBtn', + ClickButton = 'clickBtn', + DoubleButton = 'dblBtn', + ToggleButton = 'tglBtn', + ColorButton = 'colorBtn', + ToolButton = 'toolBtn', + NumberButton = 'numBtn', + EditableText = 'editableText', } export enum NumButtonType { - Slider = "slider", - DropdownOptions = "list", - Inline = "inline" + Slider = 'slider', + DropdownOptions = 'list', + Inline = 'inline', } export interface ButtonProps extends FieldViewProps { @@ -58,29 +58,39 @@ export interface ButtonProps extends FieldViewProps { } @observer export class FontIconBox extends DocComponent<ButtonProps>() { - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FontIconBox, fieldKey); } + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(FontIconBox, fieldKey); + } showTemplate = (): void => { const dragFactory = Cast(this.layoutDoc.dragFactory, Doc, null); - dragFactory && this.props.addDocTab(dragFactory, "add:right"); - } - dragAsTemplate = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)'); }; - useAsPrototype = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)'); }; + dragFactory && this.props.addDocTab(dragFactory, 'add:right'); + }; + dragAsTemplate = (): void => { + this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)'); + }; + useAsPrototype = (): void => { + this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)'); + }; specificContextMenu = (): void => { if (!Doc.noviceMode) { const cm = ContextMenu.Instance; - cm.addItem({ description: "Show Template", event: this.showTemplate, icon: "tag" }); - cm.addItem({ description: "Use as Render Template", event: this.dragAsTemplate, icon: "tag" }); - cm.addItem({ description: "Use as Prototype", event: this.useAsPrototype, icon: "tag" }); + cm.addItem({ description: 'Show Template', event: this.showTemplate, icon: 'tag' }); + cm.addItem({ description: 'Use as Render Template', event: this.dragAsTemplate, icon: 'tag' }); + cm.addItem({ description: 'Use as Prototype', event: this.useAsPrototype, icon: 'tag' }); } - } + }; - static GetShowLabels() { return BoolCast(Doc.UserDoc()._showLabel); } - static SetShowLabels(show:boolean) { Doc.UserDoc()._showLabel = show; } + static GetShowLabels() { + return BoolCast(Doc.UserDoc()._showLabel); + } + static SetShowLabels(show: boolean) { + Doc.UserDoc()._showLabel = show; + } // 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 icon = StrCast(this.dataDoc.icon, 'user') as any; @observable private dropdown: boolean = BoolCast(this.rootDoc.dropDownOpen); @observable private buttonList: string[] = StrListCast(this.rootDoc.btnList); @observable private type = StrCast(this.rootDoc.btnType); @@ -92,11 +102,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() { * - Expandable button (CollectionLinearView) * - Button inside of CollectionLinearView vs. outside of CollectionLinearView * - Action button - * - Dropdown button + * - Dropdown button * - Color button * - Dropdown list * - Number button - **/ + **/ _batch: UndoManager.Batch | undefined = undefined; /** @@ -110,25 +120,30 @@ export class FontIconBox extends DocComponent<ButtonProps>() { // Script for checking the outcome of the toggle const checkResult: number = numScript?.script.run({ value: 0, _readOnly_: true }).result || 0; - const label = !FontIconBox.GetShowLabels() ? (null) : - <div className="fontIconBox-label"> - {this.label} - </div>; + const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>; if (numBtnType === NumButtonType.Slider) { - const dropdown = <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} > - <input type="range" step="1" min={NumCast(this.rootDoc.numBtnMin, 0)} max={NumCast(this.rootDoc.numBtnMax, 100)} value={checkResult} - className={"menu-slider"} id="slider" - onPointerDown={() => this._batch = UndoManager.StartBatch("presDuration")} - onPointerUp={() => this._batch?.end()} - onChange={e => { e.stopPropagation(); setValue(Number(e.target.value)); }} - /> - </div>; + const dropdown = ( + <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()}> + <input + type="range" + step="1" + min={NumCast(this.rootDoc.numBtnMin, 0)} + max={NumCast(this.rootDoc.numBtnMax, 100)} + value={checkResult} + className={'menu-slider'} + id="slider" + onPointerDown={() => (this._batch = UndoManager.StartBatch('presDuration'))} + onPointerUp={() => this._batch?.end()} + onChange={e => { + e.stopPropagation(); + setValue(Number(e.target.value)); + }} + /> + </div> + ); return ( - <div - className={`menuButton ${this.type} ${numBtnType}`} - onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} - > + <div className={`menuButton ${this.type} ${numBtnType}`} onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}> {checkResult} {label} {this.rootDoc.dropDownOpen ? dropdown : null} @@ -141,62 +156,56 @@ export class FontIconBox extends DocComponent<ButtonProps>() { items.push(i); } } - const list = items.map((value) => { - return <div className="list-item" key={`${value}`} - style={{ - backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined - }} - onClick={() => setValue(value)}> - {value} - </div>; + const list = items.map(value => { + return ( + <div + className="list-item" + key={`${value}`} + style={{ + backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined, + }} + onClick={() => setValue(value)}> + {value} + </div> + ); }); return ( - <div - className={`menuButton ${this.type} ${numBtnType}`} - > - <div className={`button`} onClick={action((e) => setValue(Number(checkResult) - 1))}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"minus"} /> + <div className={`menuButton ${this.type} ${numBtnType}`}> + <div className={`button`} onClick={action(e => setValue(Number(checkResult) - 1))}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'minus'} /> </div> <div className={`button ${'number'}`} - onPointerDown={(e) => { + onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }} - onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} - > - <input - style={{ width: 30 }} - className="button-input" - type="number" - value={checkResult} - onChange={action((e) => setValue(Number(e.target.value)))} - /> + onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}> + <input style={{ width: 30 }} className="button-input" type="number" value={checkResult} onChange={action(e => setValue(Number(e.target.value)))} /> </div> - <div className={`button`} onClick={action((e) => setValue(Number(checkResult) + 1))}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} /> + <div className={`button`} onClick={action(e => setValue(Number(checkResult) + 1))}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={'plus'} /> </div> - {this.rootDoc.dropDownOpen ? + {this.rootDoc.dropDownOpen ? ( <div> - <div className="menuButton-dropdownList" - style={{ left: "25%" }}> + <div className="menuButton-dropdownList" style={{ left: '25%' }}> {list} </div> - <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> - </div> : null} - + <div + className="dropbox-background" + onClick={e => { + e.stopPropagation(); + this.rootDoc.dropDownOpen = false; + }} + /> + </div> + ) : null} </div> ); } else { - return ( - <div> - - </div> - ); + return <div></div>; } - - } /** @@ -207,20 +216,21 @@ export class FontIconBox extends DocComponent<ButtonProps>() { 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}`} + <div + className={`menuButton ${this.type} ${active}`} style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} - onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}> + onClick={action(() => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen))}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> - {!this.label || !FontIconBox.GetShowLabels() ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>} - <div - className="menuButton-dropdown" - style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}> + {!this.label || !FontIconBox.GetShowLabels() ? 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} + {this.rootDoc.dropDownOpen ? <div className="menuButton-dropdownBox">{/* DROPDOWN BOX CONTENTS */}</div> : null} </div> ); } @@ -234,12 +244,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() { const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); const script = ScriptCast(this.rootDoc.script); - if (!script) { return null; } + if (!script) { + return null; + } let noviceList: string[] = []; let text: string | undefined; let dropdown = true; - let icon: IconProp = "caret-down"; + let icon: IconProp = 'caret-down'; try { if (script.script.originalScript.startsWith('setView')) { const selected = SelectionManager.Docs().lastElement(); @@ -248,100 +260,110 @@ export class FontIconBox extends DocComponent<ButtonProps>() { text = StrCast(selected._viewType); } else { dropdown = false; - text = selected.type === DocumentType.RTF ? "Text" : StrCast(selected.type); + text = selected.type === DocumentType.RTF ? 'Text' : StrCast(selected.type); icon = Doc.toIcon(selected); } } else { dropdown = false; - icon = "globe-asia"; - text = "User Default"; + icon = 'globe-asia'; + text = 'User Default'; } noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking]; } else if (script.script.originalScript.startsWith('setFont')) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; text = StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); - noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia", - "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; + noviceList = ['Roboto', 'Times New Roman', 'Arial', 'Georgia', 'Comic Sans MS', 'Tahoma', 'Impact', 'Crimson Text']; } } catch (e) { console.log(e); } // Get items to place into the list - const list = this.buttonList.map((value) => { + const list = this.buttonList.map(value => { if (Doc.noviceMode && !noviceList.includes(value)) { return; } - return <div className="list-item" key={`${value}`} - style={{ - fontFamily: script.script.originalScript.startsWith('setFont') ? value : undefined, - backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined - }} - onClick={() => script.script.run({ value }).result}> - {value[0].toUpperCase() + value.slice(1)} - </div>; + return ( + <div + className="list-item" + key={`${value}`} + style={{ + fontFamily: script.script.originalScript.startsWith('setFont') ? value : undefined, + backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined, + }} + onClick={() => script.script.run({ value }).result}> + {value[0].toUpperCase() + value.slice(1)} + </div> + ); }); - const label = !this.label || !FontIconBox.GetShowLabels() ? (null) : - <div className="fontIconBox-label" style={{ bottom: 0, position: "absolute", color: color, backgroundColor: backgroundColor }}> - {this.label} - </div>; + const label = + !this.label || !FontIconBox.GetShowLabels() ? null : ( + <div className="fontIconBox-label" style={{ bottom: 0, position: 'absolute', color: color, backgroundColor: backgroundColor }}> + {this.label} + </div> + ); return ( - <div className={`menuButton ${this.type} ${active}`} - style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : "flex" }} - onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}> - {dropdown ? (null) : <FontAwesomeIcon style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />} - <div className="menuButton-dropdown-header"> - {text && text[0].toUpperCase() + text.slice(1)} - </div> + <div + className={`menuButton ${this.type} ${active}`} + style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : 'flex' }} + onClick={dropdown ? () => (this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen) : undefined}> + {dropdown ? null : <FontAwesomeIcon style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />} + <div className="menuButton-dropdown-header">{text && text[0].toUpperCase() + text.slice(1)}</div> {label} - {!dropdown ? (null) : <div className="menuButton-dropDown"> - <FontAwesomeIcon icon={icon} color={color} size="sm" /> - </div>} - {this.rootDoc.dropDownOpen ? + {!dropdown ? null : ( + <div className="menuButton-dropDown"> + <FontAwesomeIcon icon={icon} color={color} size="sm" /> + </div> + )} + {this.rootDoc.dropDownOpen ? ( <div> - <div className="menuButton-dropdownList" - style={{ left: 0 }}> + <div className="menuButton-dropdownList" style={{ left: 0 }}> {list} </div> - <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> + <div + className="dropbox-background" + onClick={e => { + e.stopPropagation(); + this.rootDoc.dropDownOpen = false; + }} + /> </div> - : null} + ) : null} </div> ); } @observable colorPickerClosed: boolean = true; - @computed get colorScript() { return ScriptCast(this.rootDoc.script); } + @computed get colorScript() { + return ScriptCast(this.rootDoc.script); + } colorPicker = (curColor: string) => { const change = (value: ColorState) => { const s = this.colorScript; s && undoBatch(() => s.script.run({ value: Utils.colorString(value), _readOnly_: false }).result)(); }; - const presets = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', - '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', - '#FFFFFF', '#f1efeb', "transparent"]; - return <SketchPicker - onChange={change} - color={curColor} - presetColors={presets} />; - } + const presets = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']; + return <SketchPicker onChange={change} color={curColor} presetColors={presets} />; + }; /** * Color button */ @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({ value: undefined, _readOnly_: true }).result ?? "transparent"; - - const label = !this.label || !FontIconBox.GetShowLabels() ? (null) : - <div className="fontIconBox-label" style={{ color, backgroundColor }}> - {this.label} - </div>; - - // dropdown caret seems superfluous since clicking the color button does the same thing + const curColor = this.colorScript?.script.run({ value: undefined, _readOnly_: true }).result ?? 'transparent'; + + const label = + !this.label || !FontIconBox.GetShowLabels() ? null : ( + <div className="fontIconBox-label" style={{ color, backgroundColor }}> + {this.label} + </div> + ); + + // dropdown caret seems superfluous since clicking the color button does the same thing // const dropdownCaret = <div // className="menuButton-dropDown" // style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}> @@ -349,26 +371,30 @@ export class FontIconBox extends DocComponent<ButtonProps>() { // </div>; setTimeout(() => this.colorPicker(curColor)); // cause an update to the color picker rendered in MainView return ( - <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")} ${this.colorPickerClosed}`} + <div + className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')} ${this.colorPickerClosed}`} style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} - onClick={action(() => this.colorPickerClosed = !this.colorPickerClosed)} + onClick={action(() => (this.colorPickerClosed = !this.colorPickerClosed))} onPointerDown={e => e.stopPropagation()}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> <div className="colorButton-color" style={{ backgroundColor: curColor }} /> {label} {/* {dropdownCaret} */} - {this.colorPickerClosed ? (null) : + {this.colorPickerClosed ? null : ( <div> - <div className="menuButton-dropdownBox" - onPointerDown={e => e.stopPropagation()} - onClick={e => e.stopPropagation()}> + <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} onClick={e => e.stopPropagation()}> {this.colorPicker(curColor)} </div> - <div className="dropbox-background" onPointerDown={action((e) => { - e.preventDefault(); - e.stopPropagation(); this.colorPickerClosed = true; - })} /> - </div>} + <div + className="dropbox-background" + onPointerDown={action(e => { + e.preventDefault(); + e.stopPropagation(); + this.colorPickerClosed = true; + })} + /> + </div> + )} </div> ); } @@ -382,27 +408,26 @@ export class FontIconBox extends DocComponent<ButtonProps>() { const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); // Button label - const label = !this.label || !FontIconBox.GetShowLabels() ? (null) : - <div className="fontIconBox-label" style={{ color, backgroundColor }}> - {this.label} - </div>; + const label = + !this.label || !FontIconBox.GetShowLabels() ? null : ( + <div className="fontIconBox-label" style={{ color, backgroundColor }}> + {this.label} + </div> + ); if (switchToggle) { return ( <div className={`menuButton ${this.type} ${'switch'}`}> {buttonText ? buttonText : null} <label className="switch"> - <input type="checkbox" - checked={backgroundColor === Colors.MEDIUM_BLUE} - /> + <input type="checkbox" checked={backgroundColor === Colors.MEDIUM_BLUE} /> <span className="slider round" /> </label> </div> ); } else { return ( - <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`} - style={{ opacity: 1, backgroundColor, color }}> + <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ opacity: 1, backgroundColor, color }}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> {label} </div> @@ -410,8 +435,6 @@ export class FontIconBox extends DocComponent<ButtonProps>() { } } - - /** * Default */ @@ -420,12 +443,15 @@ export class FontIconBox extends DocComponent<ButtonProps>() { const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); const active: string = StrCast(this.rootDoc.dropDownOpen); return ( - <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu} - style={{ backgroundColor: "transparent", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}> + <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu} style={{ backgroundColor: 'transparent', borderBottomLeftRadius: this.dropdown ? 0 : undefined }}> <div className="menuButton-wrap"> - <FontAwesomeIcon className={`menuButton-icon-${this.type}`} icon={this.icon} color={"black"} size={"sm"} /> - {!this.label || !FontIconBox.GetShowLabels() ? (null) : - <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>} + <FontAwesomeIcon className={`menuButton-icon-${this.type}`} icon={this.icon} color={'black'} size={'sm'} /> + {!this.label || !FontIconBox.GetShowLabels() ? null : ( + <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> + {' '} + {this.label}{' '} + </div> + )} </div> </div> ); @@ -435,14 +461,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() { // 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({ value: '', _readOnly_: true }).result; const setValue = (value: string, shiftDown?: boolean): boolean => script?.script.run({ value, _readOnly_: false }).result; 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} contents={checkResult} /> + <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} contents={checkResult} /> </div> </div> ); @@ -451,15 +477,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() { render() { const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); - const label = !this.label || !FontIconBox.GetShowLabels() ? (null) : - <div className="fontIconBox-label" style={{ color, backgroundColor }}> - {this.label} - </div>; + const label = + !this.label || !FontIconBox.GetShowLabels() ? null : ( + <div className="fontIconBox-label" style={{ color, backgroundColor }}> + {this.label} + </div> + ); - const menuLabel = !this.label || !FontIconBox.GetShowLabels() ? (null) : - <div className="fontIconBox-label" style={{ color, backgroundColor: "transparent" }}> - {this.label} - </div>; + const menuLabel = + !this.label || !FontIconBox.GetShowLabels() ? null : ( + <div className="fontIconBox-label" style={{ color, backgroundColor: 'transparent' }}> + {this.label} + </div> + ); const buttonText = StrCast(this.rootDoc.buttonText); @@ -471,11 +501,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { button = ( <div className={`menuButton ${this.type}`} style={{ color, backgroundColor, opacity: 1, gridAutoColumns: `${NumCast(this.rootDoc._height)} auto` }}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> - {buttonText ? - <div className="button-text"> - {buttonText} - </div> - : null} + {buttonText ? <div className="button-text">{buttonText}</div> : null} {label} </div> ); @@ -498,7 +524,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() { break; case ButtonType.ToolButton: button = ( - <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`} style={{ opacity: 1, backgroundColor, color }}> + <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ opacity: 1, backgroundColor, color }}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> {label} </div> @@ -510,48 +536,45 @@ export class FontIconBox extends DocComponent<ButtonProps>() { break; case ButtonType.ClickButton: button = ( - <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`} style={{ color, backgroundColor, opacity: 1 }}> + <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ color, backgroundColor, opacity: 1 }}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> {label} </div> ); break; case ButtonType.MenuButton: - const trailsIcon = <img src={`/assets/${"presTrails.png"}`} - style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? "0%" : "100%"})` }} />; + const trailsIcon = <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />; button = ( <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}> - {this.icon === "pres-trail" ? trailsIcon : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />} + {this.icon === 'pres-trail' ? trailsIcon : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />} {menuLabel} - <FontIconBadge value={Cast(this.Document.badgeValue,"string",null)} /> - </div > + <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} /> + </div> ); break; default: break; } - return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton || this.type === ButtonType.NumberButton || this.type === ButtonType.EditableText ? button : - button !== null ? - <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}> - {button} - </Tooltip > : null + return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton || this.type === ButtonType.NumberButton || this.type === ButtonType.EditableText ? ( + button + ) : button !== null ? ( + <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>{button}</Tooltip> + ) : null; } } - // toggle: Set overlay status of selected document ScriptingGlobals.add(function setView(view: string) { const selected = SelectionManager.Docs().lastElement(); - selected ? selected._viewType = view : console.log("[FontIconBox.tsx] changeView failed"); + selected ? (selected._viewType = view) : console.log('[FontIconBox.tsx] changeView failed'); }); - // toggle: Set overlay status of selected document ScriptingGlobals.add(function setBackgroundColor(color?: string, checkResult?: boolean) { const selected = SelectionManager.Docs().lastElement(); if (checkResult) { - return selected?._backgroundColor ?? "transparent"; + return selected?._backgroundColor ?? 'transparent'; } if (selected) selected._backgroundColor = color; }); @@ -563,7 +586,7 @@ ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boole } Doc.SharingDoc().userColor = undefined; Doc.GetProto(Doc.SharingDoc()).userColor = color; - Doc.UserDoc().showTitle = color === "transparent" ? undefined : StrCast(Doc.UserDoc().showTitle, "creationDate"); + Doc.UserDoc().showTitle = color === 'transparent' ? undefined : StrCast(Doc.UserDoc().showTitle, 'creationDate'); }); // toggle: Set overlay status of selected document @@ -571,9 +594,9 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; if (checkResult) { if (NumCast(selected?.Document.z) >= 1) return Colors.MEDIUM_BLUE; - return "transparent"; + return 'transparent'; } - selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed"); + selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed'); }); /** TEXT @@ -590,7 +613,7 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) { // toggle: Set overlay status of selected document ScriptingGlobals.add(function setFont(font: string, checkResult?: boolean) { - SelectionManager.Docs().map(doc => doc._fontFamily = font); + SelectionManager.Docs().map(doc => (doc._fontFamily = font)); const editorView = RichTextMenu.Instance.TextView?.EditorView; if (checkResult) { return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); @@ -599,32 +622,36 @@ ScriptingGlobals.add(function setFont(font: string, checkResult?: boolean) { else Doc.UserDoc().fontFamily = font; }); -ScriptingGlobals.add(function getActiveTextInfo(info: "family" | "size" | "color" | "highlight") { +ScriptingGlobals.add(function getActiveTextInfo(info: 'family' | 'size' | 'color' | 'highlight') { const editorView = RichTextMenu.Instance.TextView?.EditorView; const style = editorView?.state && RichTextMenu.Instance.getActiveFontStylesOnSelection(); switch (info) { - case "family": return style?.activeFamilies[0]; - case "size": return style?.activeSizes[0]; - case "color": return style?.activeColors[0]; - case "highlight": return style?.activeHighlights[0]; + case 'family': + return style?.activeFamilies[0]; + case 'size': + return style?.activeSizes[0]; + case 'color': + return style?.activeColors[0]; + case 'highlight': + return style?.activeHighlights[0]; } }); -ScriptingGlobals.add(function setAlignment(align: "left" | "right" | "center", checkResult?: boolean) { +ScriptingGlobals.add(function setAlignment(align: 'left' | 'right' | 'center', checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - return (editorView ? RichTextMenu.Instance.textAlign : Doc.UserDoc().textAlign) === align ? Colors.MEDIUM_BLUE : "transparent"; + return (editorView ? RichTextMenu.Instance.textAlign : Doc.UserDoc().textAlign) === align ? Colors.MEDIUM_BLUE : 'transparent'; } if (editorView?.state) RichTextMenu.Instance.align(editorView, editorView.dispatch, align); else Doc.UserDoc().textAlign = align; }); -ScriptingGlobals.add(function setBulletList(mapStyle: "bullet" | "decimal", checkResult?: boolean) { +ScriptingGlobals.add(function setBulletList(mapStyle: 'bullet' | 'decimal', checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle(); if (active === mapStyle) return Colors.MEDIUM_BLUE; - return "transparent"; + return 'transparent'; } editorView?.state && RichTextMenu.Instance.changeListType(mapStyle); }); @@ -662,17 +689,17 @@ ScriptingGlobals.add(function setFontHighlight(color?: string, checkResult?: boo ScriptingGlobals.add(function setFontSize(size: string | number, checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - return RichTextMenu.Instance.fontSize.replace("px", ""); + return RichTextMenu.Instance.fontSize.replace('px', ''); } - if (typeof size === "number") size = size.toString(); - if (size && Number(size).toString() === size) size += "px"; + if (typeof size === 'number') size = size.toString(); + if (size && Number(size).toString() === size) size += 'px'; if (editorView) RichTextMenu.Instance.setFontSize(size); else Doc.UserDoc()._fontSize = size; }); ScriptingGlobals.add(function toggleNoAutoLinkAnchor(checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - return (editorView ? RichTextMenu.Instance.noAutoLink : false) ? Colors.MEDIUM_BLUE : "transparent"; + return (editorView ? RichTextMenu.Instance.noAutoLink : false) ? Colors.MEDIUM_BLUE : 'transparent'; } if (editorView) RichTextMenu.Instance?.toggleNoAutoLinkAnchor(); }); @@ -680,31 +707,30 @@ ScriptingGlobals.add(function toggleNoAutoLinkAnchor(checkResult?: boolean) { ScriptingGlobals.add(function toggleBold(checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - return (editorView ? RichTextMenu.Instance.bold : Doc.UserDoc().fontWeight === "bold") ? Colors.MEDIUM_BLUE : "transparent"; + return (editorView ? RichTextMenu.Instance.bold : Doc.UserDoc().fontWeight === 'bold') ? Colors.MEDIUM_BLUE : 'transparent'; } if (editorView) RichTextMenu.Instance?.toggleBold(); - else Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === "bold" ? undefined : "bold"; + else Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === 'bold' ? undefined : 'bold'; }); ScriptingGlobals.add(function toggleUnderline(checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - return (editorView ? RichTextMenu.Instance.underline : Doc.UserDoc().textDecoration === "underline") ? Colors.MEDIUM_BLUE : "transparent"; + return (editorView ? RichTextMenu.Instance.underline : Doc.UserDoc().textDecoration === 'underline') ? Colors.MEDIUM_BLUE : 'transparent'; } if (editorView) RichTextMenu.Instance?.toggleUnderline(); - else Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === "underline" ? undefined : "underline"; + else Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === 'underline' ? undefined : 'underline'; }); ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - return (editorView ? RichTextMenu.Instance.italics : Doc.UserDoc().fontStyle === "italics") ? Colors.MEDIUM_BLUE : "transparent"; + return (editorView ? RichTextMenu.Instance.italics : Doc.UserDoc().fontStyle === 'italics') ? Colors.MEDIUM_BLUE : 'transparent'; } if (editorView) RichTextMenu.Instance?.toggleItalics(); - else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === "italics" ? undefined : "italics"; + else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === 'italics' ? undefined : 'italics'; }); - export function checkInksToGroup() { // console.log("getting here to inks group"); if (CurrentUserUtils.ActiveTool === InkTool.Write) { @@ -725,15 +751,17 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) { // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those const selected = ffView.unprocessedDocs; // loop through selected an get the bound - const bounds: { x: number, y: number, width?: number, height?: number }[] = [] - - selected.map(action(d => { - const x = NumCast(d.x); - const y = NumCast(d.y); - const width = d[WidthSym](); - const height = d[HeightSym](); - bounds.push({ x, y, width, height }); - })) + const bounds: { x: number; y: number; width?: number; height?: number }[] = []; + + selected.map( + action(d => { + const x = NumCast(d.x); + const y = NumCast(d.y); + const width = d[WidthSym](); + const height = d[HeightSym](); + bounds.push({ x, y, width, height }); + }) + ); const aggregBounds = aggregateBounds(bounds, 0, 0); const marqViewRef = ffView._marqueeViewRef.current; @@ -746,21 +774,23 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) { marqViewRef._lastY = aggregBounds.b; } - selected.map(action(d => { - const dx = NumCast(d.x); - const dy = NumCast(d.y); - delete d.x; - delete d.y; - delete d.activeFrame; - delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection - delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection - // calculate pos based on bounds - if (marqViewRef?.Bounds) { - d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2; - d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2; - } - return d; - })); + selected.map( + action(d => { + const dx = NumCast(d.x); + const dy = NumCast(d.y); + delete d.x; + delete d.y; + delete d.activeFrame; + delete d._timecodeToShow; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection + delete d._timecodeToHide; // bcz: this should be automatic somehow.. along with any other properties that were logically associated with the original collection + // calculate pos based on bounds + if (marqViewRef?.Bounds) { + d.x = dx - marqViewRef.Bounds.left - marqViewRef.Bounds.width / 2; + d.y = dy - marqViewRef.Bounds.top - marqViewRef.Bounds.height / 2; + } + return d; + }) + ); ffView.props.removeDocument?.(selected); // TODO: nda - this is the code to actually get a new grouped collection const newCollection = marqViewRef?.getCollection(selected, undefined, true); @@ -774,13 +804,12 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) { // TODO: nda - will probably need to go through and only remove the unprocessed selected docs ffView.unprocessedDocs = []; - InkTranscription.Instance.transcribeInk(newCollection, selected, false, ffView); + InkTranscription.Instance.transcribeInk(newCollection, selected, false); }); } CollectionFreeFormView.collectionsWithUnprocessedInk.clear(); } - /** INK * setActiveTool * setStrokeWidth @@ -790,10 +819,9 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) { ScriptingGlobals.add(function setActiveTool(tool: string, checkResult?: boolean) { InkTranscription.Instance?.createInkGroup(); if (checkResult) { - return ((CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ? - Colors.MEDIUM_BLUE : "transparent"; + return (CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool ? Colors.MEDIUM_BLUE : 'transparent'; } - if (["circle", "square", "line"].includes(tool)) { + if (['circle', 'square', 'line'].includes(tool)) { if (GestureOverlay.Instance.InkShape === tool) { CurrentUserUtils.ActiveTool = InkTool.None; GestureOverlay.Instance.InkShape = InkTool.None; @@ -801,16 +829,17 @@ ScriptingGlobals.add(function setActiveTool(tool: string, checkResult?: boolean) CurrentUserUtils.ActiveTool = InkTool.Pen; GestureOverlay.Instance.InkShape = tool; } - } else if (tool) { // pen or eraser + } else if (tool) { + // pen or eraser if (CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance.InkShape) { CurrentUserUtils.ActiveTool = InkTool.None; } else if (tool == InkTool.Write) { // console.log("write mode selected - create groupDoc here!", tool) CurrentUserUtils.ActiveTool = tool; - GestureOverlay.Instance.InkShape = ""; + GestureOverlay.Instance.InkShape = ''; } else { CurrentUserUtils.ActiveTool = tool as any; - GestureOverlay.Instance.InkShape = ""; + GestureOverlay.Instance.InkShape = ''; } } else { CurrentUserUtils.ActiveTool = InkTool.None; @@ -827,7 +856,9 @@ ScriptingGlobals.add(function setFillColor(color?: string, checkResult?: boolean return ActiveFillColor(); } SetActiveFillColor(StrCast(color)); - SelectionManager.Docs().filter(doc => doc.type === DocumentType.INK).map(doc => doc.fillColor = color); + SelectionManager.Docs() + .filter(doc => doc.type === DocumentType.INK) + .map(doc => (doc.fillColor = color)); }); ScriptingGlobals.add(function setStrokeWidth(width: number, checkResult?: boolean) { @@ -839,7 +870,9 @@ ScriptingGlobals.add(function setStrokeWidth(width: number, checkResult?: boolea return ActiveInkWidth(); } SetActiveInkWidth(width.toString()); - SelectionManager.Docs().filter(doc => doc.type === DocumentType.INK).map(doc => doc.strokeWidth = Number(width)); + SelectionManager.Docs() + .filter(doc => doc.type === DocumentType.INK) + .map(doc => (doc.strokeWidth = Number(width))); }); // toggle: Set overlay status of selected document @@ -852,10 +885,11 @@ ScriptingGlobals.add(function setStrokeColor(color?: string, checkResult?: boole return ActiveInkColor(); } SetActiveInkColor(StrCast(color)); - SelectionManager.Docs().filter(doc => doc.type === DocumentType.INK).map(doc => doc.color = String(color)); + SelectionManager.Docs() + .filter(doc => doc.type === DocumentType.INK) + .map(doc => (doc.color = String(color))); }); - /** WEB * webSetURL **/ @@ -870,21 +904,20 @@ ScriptingGlobals.add(function webSetURL(url: string, checkResult?: boolean) { } }); ScriptingGlobals.add(function webForward(checkResult?: boolean) { - const selected = (SelectionManager.Views().lastElement()?.ComponentView as WebBox); + const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox; if (checkResult) { - return selected?.forward(checkResult) ? undefined : "lightGray"; + return selected?.forward(checkResult) ? undefined : 'lightGray'; } selected?.forward(); }); ScriptingGlobals.add(function webBack(checkResult?: boolean) { - const selected = (SelectionManager.Views().lastElement()?.ComponentView as WebBox); + const selected = SelectionManager.Views().lastElement()?.ComponentView as WebBox; if (checkResult) { - return selected?.back(checkResult) ? undefined : "lightGray"; + return selected?.back(checkResult) ? undefined : 'lightGray'; } selected?.back(); }); - /** Schema * toggleSchemaPreview **/ @@ -893,9 +926,8 @@ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) { if (checkResult && selected) { const result: boolean = NumCast(selected.schemaPreviewWidth) > 0; if (result) return Colors.MEDIUM_BLUE; - else return "transparent"; - } - else if (selected) { + else return 'transparent'; + } else if (selected) { if (NumCast(selected.schemaPreviewWidth) > 0) { selected.schemaPreviewWidth = 0; } else { @@ -908,11 +940,11 @@ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) { * groupBy */ ScriptingGlobals.add(function setGroupBy(key: string, checkResult?: boolean) { - SelectionManager.Docs().map(doc => doc._fontFamily = key); + SelectionManager.Docs().map(doc => (doc._fontFamily = key)); const editorView = RichTextMenu.Instance.TextView?.EditorView; if (checkResult) { return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily); } if (editorView) RichTextMenu.Instance.setFontFamily(key); else Doc.UserDoc().fontFamily = key; -});
\ No newline at end of file +}); |