diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 160 |
1 files changed, 106 insertions, 54 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 53cd017b0..e09e15a60 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@material-ui/core'; import { action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; -import { StringifyOptions } from 'querystring'; import * as React from 'react'; import { ColorState, SketchPicker } from 'react-color'; import { Doc, StrListCast } from '../../../../fields/Doc'; @@ -11,6 +10,7 @@ import { InkTool } from '../../../../fields/InkField'; import { createSchema, makeInterface } from '../../../../fields/Schema'; import { ScriptField } from '../../../../fields/ScriptField'; import { BoolCast, Cast, NumCast, StrCast } from '../../../../fields/Types'; +import { WebField } from '../../../../fields/URLField'; import { DocumentType } from '../../../documents/DocumentTypes'; import { Scripting } from "../../../util/Scripting"; import { SelectionManager } from '../../../util/SelectionManager'; @@ -20,14 +20,13 @@ import { CollectionViewType } from '../../collections/CollectionView'; import { ContextMenu } from '../../ContextMenu'; import { DocComponent } from '../../DocComponent'; import { EditableView } from '../../EditableView'; +import { GestureOverlay } from '../../GestureOverlay'; import { Colors } from '../../global/globalEnums'; +import { SetActiveInkColor } from '../../InkingStroke'; import { StyleProp } from '../../StyleProvider'; import { FieldView, FieldViewProps } from '.././FieldView'; -import { RichTextMenu } from '../formattedText/RichTextMenu'; import './FontIconBox.scss'; -import { SetActiveInkWidth, SetActiveInkColor } from '../../InkingStroke'; -import { GestureOverlay } from '../../GestureOverlay'; -import { WebField } from '../../../../fields/URLField'; +import { RichTextMenu } from '../formattedText/RichTextMenu'; const FontIconSchema = createSchema({ icon: "string", }); @@ -241,7 +240,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon let text: string | undefined; let dropdown = true; let icon: IconProp = "caret-down"; - + let noneSelected:boolean = false; if (script === 'setView') { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; @@ -253,6 +252,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon icon = Doc.toIcon(selected.Document); } else { dropdown = false; + noneSelected = true; text = "None selected"; } noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking]; @@ -298,7 +298,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <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 className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />} + {dropdown || noneSelected ? (null) : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />} <div className="menuButton-dropdown-header"> {text && text[0].toUpperCase() + text.slice(1)} </div> @@ -395,22 +395,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon // Determine the type of toggle button const switchToggle: boolean = BoolCast(this.rootDoc.switchToggle); - // Script for running the toggle - const script: string = StrCast(this.rootDoc.script); - - // Script for checking the outcome of the toggle - let checkScript:string; - if (StrCast(this.rootDoc.script).includes("(")){ - checkScript = StrCast(this.rootDoc.script) - - } else { - checkScript = StrCast(this.rootDoc.script) + "(true)"; - } - - // Function to run the script - const runScript = () => ScriptField.MakeScript(script + "()")?.script.run(); - const checkResult = ScriptField.MakeScript(checkScript)?.script.run().result; - // Colors const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); @@ -423,13 +407,10 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon if (switchToggle) { return ( - <div className={`menuButton ${this.type} ${'switch'}`} - onClick={runScript} - > + <div className={`menuButton ${this.type} ${'switch'}`}> <label className="switch"> <input type="checkbox" - checked={checkResult} - onChange={runScript} + checked={backgroundColor === Colors.MEDIUM_BLUE} /> <span className="slider round"></span> </label> @@ -438,10 +419,8 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon } else { return ( <div className={`menuButton ${this.type}`} - style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }} - onClick={this.layoutDoc.ignoreClick ? runScript : undefined} - > - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} /> + style={{ opacity: 1, backgroundColor: backgroundColor, color: color }}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> {label} </div> ); @@ -595,7 +574,8 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; if (checkResult && selected) { - return NumCast(selected.Document.z) === 1; + if(NumCast(selected.Document.z) === 1) return Colors.MEDIUM_BLUE; + else return "transparent"; } selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed"); }); @@ -606,43 +586,109 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) { * toggleBold * toggleUnderline * toggleItalic + * setAlignment + * toggleBold + * toggleItalic + * toggleUnderline **/ +Scripting.addGlobal(function toggleBold(){ + const editorView = RichTextMenu.Instance.TextView?.EditorView; +}); + // toggle: Set overlay status of selected document -Scripting.addGlobal(function setFont(font: string) { +Scripting.addGlobal(function setFont(font: string, checkResult?: boolean) { SelectionManager.Views().map(dv => dv.props.Document._fontFamily = font); + const editorView = RichTextMenu.Instance.TextView?.EditorView; + editorView?.state && RichTextMenu.Instance.setFontFamily(font, editorView); Doc.UserDoc()._fontFamily = font; return Doc.UserDoc()._fontFamily; }); +Scripting.addGlobal(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?.activeColors[0]; + case "size": return style?.activeSizes[0]; + case "color": return style?.activeColors[0]; + case "highlight": return style?.activeHighlights[0]; + } +}) + +Scripting.addGlobal(function setAlignment(align: "left" | "right" | "center", checkResult?: boolean) { + const editorView = RichTextMenu.Instance?.TextView?.EditorView; + if (checkResult) { + let active:string; + if (editorView){ + active = editorView?.state && RichTextMenu.Instance.getActiveAlignment(); + } else { + active = StrCast(Doc.UserDoc().textAlign); + } + if (active === align) return Colors.MEDIUM_BLUE; + else return "transparent"; + } + SelectionManager.Views().map(dv => dv.props.Document.textAlign = align); + switch(align){ + case "left": + editorView?.state && RichTextMenu.Instance.alignLeft( editorView, editorView.dispatch); + break; + case "center": + editorView?.state && RichTextMenu.Instance.alignCenter(editorView, editorView.dispatch); + break; + case "right": + editorView?.state && RichTextMenu.Instance.alignRight(editorView, editorView.dispatch); + break; + default: + break; + } + Doc.UserDoc().textAlign = align; +}); + // toggle: Set overlay status of selected document Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) { - const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; + const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; + const editorView = RichTextMenu.Instance.TextView?.EditorView; + if (checkResult) { if (selected) { - console.log("[Font color] (selected): " + StrCast(selected._fontColor)); - return selected._fontColor; + console.log("[Font color] (selected): " + StrCast(selected.rootDoc._fontColor)); + return selected.rootDoc._fontColor; } else { console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor)); return Doc.UserDoc()._fontColor; } } - if (selected) selected._fontColor = color; + + if (selected) { + selected.rootDoc._fontColor = color; + if (color) { + editorView?.state && RichTextMenu.Instance.setColor(color, editorView, editorView?.dispatch); + } + } 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 setFontHighlight(color?: string, checkResult?: boolean) { + const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; + const editorView = RichTextMenu.Instance.TextView?.EditorView; + + if (checkResult) { + if (selected) { + return selected.Document._fontHighlight; + } else { + return Doc.UserDoc()._fontHighlight; + } + } + if (selected) { + selected.rootDoc._fontColor = color; + if (color) { + editorView?.state && RichTextMenu.Instance.setHighlight(color, editorView, editorView?.dispatch); + } + } + Doc.UserDoc()._fontHighlight = color; +}); @@ -652,12 +698,15 @@ Scripting.addGlobal(function setFontSize(size: string, checkResult?: boolean) { const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10); return size; } + const editorView = RichTextMenu.Instance.TextView?.EditorView; + editorView?.state && RichTextMenu.Instance.setFontSize(Number(size), editorView); Doc.UserDoc()._fontSize = size + "px"; }); Scripting.addGlobal(function toggleBold(checkResult?: boolean) { if (checkResult) { - return Doc.UserDoc().bold; + if (Doc.UserDoc().bold) return Colors.MEDIUM_BLUE; + else return "transparent"; } 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; @@ -666,7 +715,8 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) { Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) { if (checkResult) { - return Doc.UserDoc().underline; + if (Doc.UserDoc().underline) return Colors.MEDIUM_BLUE; + else return "transparent"; } 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; @@ -675,7 +725,8 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) { Scripting.addGlobal(function toggleItalic(checkResult?: boolean) { if (checkResult) { - return Doc.UserDoc().italic; + if (Doc.UserDoc().italic) return Colors.MEDIUM_BLUE; + else return "transparent"; } 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; @@ -693,7 +744,8 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) { Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolean) { if (checkResult) { - return Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool; + if (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool) return Colors.MEDIUM_BLUE; + else return "transparent"; } if (tool === "circle") { Doc.UserDoc().activeInkTool = "pen"; |