diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 238 |
1 files changed, 156 insertions, 82 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 744064b9f..53cd017b0 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -25,7 +25,9 @@ import { StyleProp } from '../../StyleProvider'; import { FieldView, FieldViewProps } from '.././FieldView'; import { RichTextMenu } from '../formattedText/RichTextMenu'; import './FontIconBox.scss'; -import { SetActiveInkWidth } from '../../InkingStroke'; +import { SetActiveInkWidth, SetActiveInkColor } from '../../InkingStroke'; +import { GestureOverlay } from '../../GestureOverlay'; +import { WebField } from '../../../../fields/URLField'; const FontIconSchema = createSchema({ icon: "string", }); @@ -40,7 +42,7 @@ export enum ButtonType { ColorButton = "colorBtn", ToolButton = "toolBtn", NumberButton = "numBtn", - EditableText = "editableTxt" + EditableText = "editableText" } export enum NumButtonType { @@ -115,6 +117,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const dropdown = <div className="menuButton-dropdownBox" + onPointerDown={e => e.stopPropagation()} style={{ left: 0 }} > <input type="range" step="1" min="0" max="100" value={checkResult} @@ -240,7 +243,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon let icon: IconProp = "caret-down"; - if (script === 'changeView') { + if (script === 'setView') { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; if (selected && StrCast(selected.Document.type) === DocumentType.COL) { text = StrCast(selected.Document._viewType); @@ -249,23 +252,24 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon text = StrCast(selected.Document.type); icon = Doc.toIcon(selected.Document); } else { + dropdown = false; text = "None selected"; } noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking]; - } else if (script === 'changeFont') { + } else if (script === 'setFont') { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; if (selected && StrCast(selected.Document.type) === DocumentType.RTF) { text = StrCast(selected.Document._fontFamily); } else { const fontFamily = StrCast(Doc.UserDoc()._fontFamily); - console.log(fontFamily); text = fontFamily; } noviceList = ["Roboto", "Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; } - const items = this.buttonList.map((value) => { + // Get items to place into the list + const list = this.buttonList.map((value) => { if (Doc.UserDoc().noviceMode && !noviceList.includes(value)) { return; } @@ -277,7 +281,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon }; return <div className="list-item" key={`${value}`} style={{ - fontFamily: script === 'changeFont' ? value : undefined, + fontFamily: script === 'setFont' ? value : undefined, backgroundColor: value === text ? Colors.LIGHT_BLUE : undefined }} onClick={click}> @@ -292,22 +296,21 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon return ( <div className={`menuButton ${this.type} ${active}`} - style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} + 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 className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />} <div className="menuButton-dropdown-header"> {text && text[0].toUpperCase() + text.slice(1)} </div> {label} - <div - className="menuButton-dropDown" - style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}> + {!dropdown ? (null) : <div className="menuButton-dropDown"> <FontAwesomeIcon icon={icon} color={color} size="sm" /> - </div> + </div>} {this.rootDoc.dropDownOpen ? <div> <div className="menuButton-dropdownList" style={{ left: 0 }}> - {items} + {list} </div> <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> </div> @@ -323,29 +326,38 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const active: string = StrCast(this.rootDoc.dropDownOpen); const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); - const numSelected = SelectionManager.Views().length; - const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined; const script: string = StrCast(this.rootDoc.script); const scriptCheck: string = script + "(undefined, true)"; const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result; - console.log("[boolResul]: ", boolResult); + + let stroke: boolean = false; + let strokeIcon: any; + if (script === "setStrokeColor"){ + stroke = true; + const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result; + strokeIcon = (<div style={{borderRadius: "100%", width: Number(checkWidth)+'%', height: Number(checkWidth)+'%', backgroundColor: boolResult }}/>) + } const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', - '#FFFFFF', '#f1efeb', 'transparent']; + '#FFFFFF', '#f1efeb']; - const colorBox = (func: (color: ColorState) => void) => <SketchPicker onChange={func} color={selectedDoc ? selectedDoc._backgroundColor : backgroundColor} + const colorBox = (func: (color: ColorState) => void) => <SketchPicker + disableAlpha={!stroke} + onChange={func} color={boolResult ? boolResult : "#FFFFFF"} presetColors={colorOptions} />; const label = !this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}> {this.label} </div>; + const dropdownCaret = <div className="menuButton-dropDown" style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}> <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" /> </div>; + const click = (value: ColorState) => { const hex: string = value.hex; const s = ScriptField.MakeScript(script + '("' + hex + '", false)'); @@ -358,10 +370,10 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }} onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen} onPointerDown={e => e.stopPropagation()}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> + {stroke ? strokeIcon : <><FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> <div className="colorButton-color" - style={{ backgroundColor: selectedDoc ? selectedDoc._backgroundColor : backgroundColor }} - ></div> + style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }} + ></div></>} {label} {/* {dropdownCaret} */} {this.rootDoc.dropDownOpen ? @@ -408,7 +420,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}> {this.label} </div>; - console.log("switchToggle", switchToggle); + if (switchToggle) { return ( <div className={`menuButton ${this.type} ${'switch'}`} @@ -457,17 +469,24 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon } @computed get editableText() { + // Script for running the toggle + const script: string = StrCast(this.rootDoc.script); + + // Script for checking the outcome of the toggle + let checkScript:string = StrCast(this.rootDoc.script) + "('', true)"; + + // Function to run the script + const checkResult = ScriptField.MakeScript(checkScript)?.script.run().result; + const setValue = (value: string, shiftDown?: boolean): boolean => { - console.log("setValue"); + ScriptField.MakeScript(script + "('"+value+"')")?.script.run(); return true; }; - return ( - <div className={`menuButton ${this.type}`}> - HELLO - {/* <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"lock"} /> - <EditableView GetValue={() => ""} SetValue={setValue} contents="..."> - </EditableView> */} + <div className="menuButton editableText"> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"lock"} /> + <EditableView GetValue={() => checkResult} SetValue={setValue} contents="..."> + </EditableView> </div> ); } @@ -477,12 +496,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); // Variables called through eval (from button) - const canUndo: boolean = UndoManager.CanUndo(); - const canRedo: boolean = UndoManager.CanRedo(); const numSelected = SelectionManager.Views().length; - const selectedDoc = numSelected > 0 ? SelectionManager.Views()[0].Document : undefined; - const userDoc = Doc.UserDoc(); - const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark; @@ -503,6 +517,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon case ButtonType.EditableText: console.log("Editable text"); button = this.editableText; + break; case ButtonType.NumberButton: button = this.numberButton; break; @@ -534,14 +549,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon </div> ); break; - case ButtonType.DoubleButton: - button = ( - <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> - {label} - </div> - ); - break; case ButtonType.MenuButton: button = ( <div className={`menuButton ${this.type}`} style={{ color: color, backgroundColor: backgroundColor }}> @@ -554,7 +561,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon break; } - return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton ? button : + return !this.layoutDoc.toolTip || this.type === ButtonType.DropdownList || this.type === ButtonType.ColorButton || this.type === ButtonType.NumberButton || this.type === ButtonType.EditableText ? button : <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}> {button} </Tooltip>; @@ -563,18 +570,25 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon // toggle: Set overlay status of selected document -Scripting.addGlobal(function changeView(view: string) { +Scripting.addGlobal(function setView(view: string) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; selected ? selected.Document._viewType = view : console.log("[FontIconBox.tsx] changeView failed"); }); // toggle: Set overlay status of selected document -Scripting.addGlobal(function changeBackgroundColor(color?: string, checkResult?: boolean) { - const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; +Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: boolean) { + const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; if (checkResult) { - return selected && selected.Document._backgroundColor; + if (selected) { + console.log("[Background] (selected): " + StrCast(selected._backgroundColor)); + return selected._backgroundColor; + } else { + return "#FFFFFF"; + } } - selected ? selected.Document._backgroundColor = color : console.log("[FontIconBox.tsx] changeBackgroundColor failed"); + if (selected && selected.type === DocumentType.INK) selected.fillColor = color; + if (selected) selected._backgroundColor = color; + Doc.UserDoc()._fontColor = color; }); // toggle: Set overlay status of selected document @@ -586,52 +600,58 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) { selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed"); }); +/** TEXT + * setFont + * setFontSize + * toggleBold + * toggleUnderline + * toggleItalic + **/ + // toggle: Set overlay status of selected document -Scripting.addGlobal(function changeFont(font: string) { +Scripting.addGlobal(function setFont(font: string) { SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font); Doc.UserDoc()._fontFamily = font; - console.log(Doc.UserDoc()._fontFamily); return Doc.UserDoc()._fontFamily; }); // toggle: Set overlay status of selected document -Scripting.addGlobal(function changeFontColor(color?: string, checkResult?: boolean) { - const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; +Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) { + const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; if (checkResult) { if (selected) { - console.log("[Font color] (selected): " + StrCast(selected.Document._fontColor)); - return selected.Document._fontColor; + console.log("[Font color] (selected): " + StrCast(selected._fontColor)); + return selected._fontColor; } else { console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor)); return Doc.UserDoc()._fontColor; } } + if (selected) selected._fontColor = color; Doc.UserDoc()._fontColor = color; }); -// toggle: Set overlay status of selected document -Scripting.addGlobal(function changeFontHighlight(color?: string, checkResult?: boolean) { - const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; - if (checkResult) { - if (selected) { - console.log("[Font color] (selected): " + StrCast(selected.Document._fontColor)); - return selected.Document._fontColor; - } else { - console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor)); - return Doc.UserDoc()._fontColor; - } - } - Doc.UserDoc()._fontColor = color; -}); +// // toggle: Set overlay status of selected document +// Scripting.addGlobal(function setFontHighlight(color?: string, checkResult?: boolean) { +// const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; +// if (checkResult) { +// if (selected) { +// return selected.Document._fontColor; +// } else { +// return Doc.UserDoc()._fontColor; +// } +// } +// Doc.UserDoc()._fontColor = color; +// }); + // toggle: Set overlay status of selected document -Scripting.addGlobal(function changeFontSize(size: string, checkResult?: boolean) { +Scripting.addGlobal(function setFontSize(size: string, checkResult?: boolean) { if (checkResult) { const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10); return size; } - console.log(size); Doc.UserDoc()._fontSize = size + "px"; }); @@ -639,7 +659,7 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) { if (checkResult) { return Doc.UserDoc().bold; } - SelectionManager.Views().map(dv => dv.props.Document.bold = !dv.props.Document.bold); + SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.italic = !dv.props.Document.italic); Doc.UserDoc().bold = !Doc.UserDoc().bold; return Doc.UserDoc().bold; }); @@ -648,8 +668,8 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) { if (checkResult) { return Doc.UserDoc().underline; } - SelectionManager.Views().map(dv => dv.props.Document.underline = !dv.props.Document.underline); - Doc.UserDoc().bold = !Doc.UserDoc().underline; + SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.italic = !dv.props.Document.italic); + Doc.UserDoc().underline = !Doc.UserDoc().underline; return Doc.UserDoc().underline; }); @@ -657,17 +677,36 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) { if (checkResult) { return Doc.UserDoc().italic; } - SelectionManager.Views().map(dv => dv.props.Document.italic = !dv.props.Document.italic); - Doc.UserDoc().bold = !Doc.UserDoc().italic; + SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.RTF).map(dv => dv.props.Document.italic = !dv.props.Document.italic); + Doc.UserDoc().italic = !Doc.UserDoc().italic; return Doc.UserDoc().italic; }); -Scripting.addGlobal(function setActiveInkTool(tool: InkTool, checkResult?: boolean) { + + + +/** INK + * setActiveInkTool + * setStrokeWidth + * setStrokeColor + **/ + +Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolean) { if (checkResult) { - return Doc.UserDoc().activeInkTool === tool; + return Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool; } - if (tool) { - if (Doc.UserDoc().activeInkTool === tool){ + if (tool === "circle") { + Doc.UserDoc().activeInkTool = "pen"; + GestureOverlay.Instance.InkShape = tool; + } else if (tool === "square") { + Doc.UserDoc().activeInkTool = "pen"; + GestureOverlay.Instance.InkShape = tool; + } else if (tool === "line") { + Doc.UserDoc().activeInkTool = "pen"; + GestureOverlay.Instance.InkShape = tool; + } else if (tool) { + if (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool){ + GestureOverlay.Instance.InkShape = ""; Doc.UserDoc().activeInkTool = InkTool.None; } else { Doc.UserDoc().activeInkTool = tool; @@ -679,9 +718,44 @@ Scripting.addGlobal(function setActiveInkTool(tool: InkTool, checkResult?: boole Scripting.addGlobal(function setStrokeWidth(width: number, checkResult?: boolean) { if (checkResult) { - const width: number = NumCast(Doc.UserDoc().activeInkWidth); - return width; + const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; + if (selected && selected.type === DocumentType.INK){ + return Number(selected.strokeWidth); + } else { + const width: number = NumCast(Doc.UserDoc().activeInkWidth); + return width; + } } - SetActiveInkWidth(StrCast(width)); + Doc.UserDoc().activeInkWidth = width; SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(width)); +}); + +// toggle: Set overlay status of selected document +Scripting.addGlobal(function setStrokeColor(color?: string, checkResult?: boolean) { + if (checkResult) { + const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; + if (selected && selected.type === DocumentType.INK){ + return selected.color; + } else { + const color: string = StrCast(Doc.UserDoc().activeInkColor); + return color; + } + } + SetActiveInkColor(StrCast(color)); + SelectionManager.Views().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.color = String(color)); +}); + + +/** WEB + * webSetURL + **/ +Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) { + const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; + console.log("URL: ", url); + if (checkResult && selected && selected.type === DocumentType.WEB){ + return Cast(selected.data, WebField, null).url; + } + else if (selected && selected.type === DocumentType.WEB){ + selected.data = url; + } });
\ No newline at end of file |