aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/button/FontIconBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
-rw-r--r--src/client/views/nodes/button/FontIconBox.tsx126
1 files changed, 44 insertions, 82 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 520034c3c..6a782b105 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -113,7 +113,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
// Script for checking the outcome of the toggle
const checkScript: string = StrCast(this.rootDoc.script) + "(0, true)";
- const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result;
+ const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result || 0;
if (numBtnType === NumButtonType.Slider) {
@@ -158,7 +158,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
<div
className={`menuButton ${this.type} ${numBtnType}`}
>
- <div className={`button`} onClick={action((e) => setValue(checkResult - 1))}>
+ <div className={`button`} onClick={action((e) => setValue(Number(checkResult) - 1))}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"minus"} />
</div>
<div
@@ -177,7 +177,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
onChange={action((e) => setValue(Number(e.target.value)))}
/>
</div>
- <div className={`button`} onClick={action((e) => setValue(checkResult + 1))}>
+ <div className={`button`} onClick={action((e) => setValue(Number(checkResult) + 1))}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} />
</div>
@@ -261,8 +261,8 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
}
noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking];
} else if (script === 'setFont') {
- const selected = SelectionManager.Docs().lastElement();
- text = StrCast((selected?.type === DocumentType.RTF ? selected : Doc.UserDoc())._fontFamily);
+ 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"];
}
@@ -337,7 +337,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
const colorBox = (func: (color: ColorState) => void) => <SketchPicker
disableAlpha={false}
onChange={func}
- color={boolResult ? boolResult : "#FFFFFF"}
+ color={boolResult ?? "transparent"}
presetColors={colorOptions} />;
const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
@@ -360,7 +360,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}
onPointerDown={e => e.stopPropagation()}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
- <div className="colorButton-color" style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />
+ <div className="colorButton-color" style={{ backgroundColor: boolResult ?? "transparent" }} />
{label}
{/* {dropdownCaret} */}
{this.rootDoc.dropDownOpen ?
@@ -387,7 +387,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
// Button label
const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
- <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
+ <div className="fontIconBox-label" style={{ color, backgroundColor, position: "absolute" }}>
{this.label}
</div>;
@@ -406,7 +406,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
} else {
return (
<div className={`menuButton ${this.type}`}
- style={{ opacity: 1, backgroundColor: backgroundColor, color: color }}>
+ style={{ opacity: 1, backgroundColor, color }}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
{label}
</div>
@@ -571,11 +571,7 @@ Scripting.addGlobal(function setView(view: string) {
Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: boolean) {
const selected = SelectionManager.Docs().lastElement();
if (checkResult) {
- if (selected) {
- return selected._backgroundColor;
- } else {
- return "#FFFFFF";
- }
+ return selected?._backgroundColor ?? "transparent";
}
if (selected) selected._backgroundColor = color;
Doc.UserDoc()._fontColor = color;
@@ -596,7 +592,7 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined;
if (checkResult && selected) {
if (NumCast(selected.Document.z) >= 1) return Colors.MEDIUM_BLUE;
- else return "transparent";
+ return "transparent";
}
selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
});
@@ -617,16 +613,18 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) {
Scripting.addGlobal(function setFont(font: string, checkResult?: boolean) {
SelectionManager.Docs().map(doc => doc._fontFamily = font);
const editorView = RichTextMenu.Instance.TextView?.EditorView;
- editorView?.state && RichTextMenu.Instance.setFontFamily(font, editorView);
- Doc.UserDoc()._fontFamily = font;
- return Doc.UserDoc()._fontFamily;
+ if (checkResult) {
+ return StrCast((editorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+ }
+ if (editorView) RichTextMenu.Instance.setFontFamily(font);
+ else Doc.UserDoc().fontFamily = font;
});
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 "family": return style?.activeFamilies[0];
case "size": return style?.activeSizes[0];
case "color": return style?.activeColors[0];
case "highlight": return style?.activeHighlights[0];
@@ -643,7 +641,7 @@ Scripting.addGlobal(function setAlignment(align: "left" | "right" | "center", ch
active = StrCast(Doc.UserDoc().textAlign);
}
if (active === align) return Colors.MEDIUM_BLUE;
- else return "transparent";
+ return "transparent";
}
SelectionManager.Docs().map(doc => doc.textAlign = align);
switch (align) {
@@ -667,38 +665,25 @@ Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", check
if (checkResult) {
const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
if (active === mapStyle) return Colors.MEDIUM_BLUE;
- else return "transparent";
+ return "transparent";
}
if (editorView) {
const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
- if (active === mapStyle) {
- editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: "" }));
- } else {
- editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: mapStyle }));
- }
+ editorView?.state && RichTextMenu.Instance.changeListType(
+ editorView.state.schema.nodes.ordered_list.create({ mapStyle: active === mapStyle ? "" : mapStyle }));
}
});
// toggle: Set overlay status of selected document
Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean) {
- const selected = SelectionManager.Docs().lastElement();
const editorView = RichTextMenu.Instance.TextView?.EditorView;
if (checkResult) {
- if (selected) {
- return selected._fontColor;
- } else {
- return Doc.UserDoc()._fontColor;
- }
+ return editorView ? RichTextMenu.Instance.fontColor : Doc.UserDoc().fontColor;
}
- if (selected) {
- selected._fontColor = color;
- if (color) {
- editorView?.state && RichTextMenu.Instance.setColor(color, editorView, editorView?.dispatch);
- }
- }
- Doc.UserDoc()._fontColor = color;
+ if (editorView) color && RichTextMenu.Instance.setColor(color, editorView, editorView?.dispatch);
+ else Doc.UserDoc()._fontColor = color;
});
// toggle: Set overlay status of selected document
@@ -707,11 +692,7 @@ Scripting.addGlobal(function setFontHighlight(color?: string, checkResult?: bool
const editorView = RichTextMenu.Instance.TextView?.EditorView;
if (checkResult) {
- if (selected) {
- return selected._fontHighlight;
- } else {
- return Doc.UserDoc()._fontHighlight;
- }
+ return (selected ?? Doc.UserDoc())._fontHighlight;
}
if (selected) {
selected._fontColor = color;
@@ -722,62 +703,43 @@ Scripting.addGlobal(function setFontHighlight(color?: string, checkResult?: bool
Doc.UserDoc()._fontHighlight = color;
});
-
-
// toggle: Set overlay status of selected document
-Scripting.addGlobal(function setFontSize(size: string, checkResult?: boolean) {
+Scripting.addGlobal(function setFontSize(size: string | number, checkResult?: boolean) {
+ if (typeof size === "number") size = size.toString();
+ if (size && Number(size).toString() === size) size += "px";
+ const editorView = RichTextMenu.Instance.TextView?.EditorView;
if (checkResult) {
- const size: number = parseInt(StrCast(Doc.UserDoc()._fontSize), 10);
- return size;
+ return (editorView ? RichTextMenu.Instance.fontSize : StrCast(Doc.UserDoc().fontSize, "10px")).replace("px", "");
}
- const editorView = RichTextMenu.Instance.TextView?.EditorView;
- editorView?.state && RichTextMenu.Instance.setFontSize(Number(size), editorView);
- Doc.UserDoc()._fontSize = size + "px";
+ if (editorView) RichTextMenu.Instance.setFontSize(size);
+ else Doc.UserDoc()._fontSize = size;
});
Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
+ const editorView = RichTextMenu.Instance?.TextView?.EditorView;
if (checkResult) {
- const editorView = RichTextMenu.Instance.TextView?.EditorView;
- if (editorView) {
- const bold: boolean = editorView?.state && RichTextMenu.Instance.getBoldStatus();
- if (bold) return Colors.MEDIUM_BLUE;
- else return "transparent";
- }
- else return "transparent";
+ return (editorView ? RichTextMenu.Instance.bold : Doc.UserDoc().fontWeight === "bold") ? Colors.MEDIUM_BLUE : "transparent";
}
- const editorView = RichTextMenu.Instance.TextView?.EditorView;
- if (editorView) {
- editorView?.state && RichTextMenu.Instance.toggleBold(editorView, true);
- }
- SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.bold = !doc.bold);
- Doc.UserDoc().bold = !Doc.UserDoc().bold;
- return Doc.UserDoc().bold;
+ if (editorView) RichTextMenu.Instance?.toggleBold();
+ else Doc.UserDoc().fontWeight = Doc.UserDoc().fontWeight === "bold" ? undefined : "bold";
});
Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
+ const editorView = RichTextMenu.Instance?.TextView?.EditorView;
if (checkResult) {
- return "transparent";
- }
- const editorView = RichTextMenu.Instance.TextView?.EditorView;
- if (editorView) {
- editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true);
+ return (editorView ? RichTextMenu.Instance.underline : Doc.UserDoc().textDecoration === "underline") ? Colors.MEDIUM_BLUE : "transparent";
}
- SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.underline = !doc.underline);
- Doc.UserDoc().underline = !Doc.UserDoc().underline;
- return Doc.UserDoc().underline;
+ if (editorView) RichTextMenu.Instance?.toggleUnderline();
+ else Doc.UserDoc().textDecoration = Doc.UserDoc().textDecoration === "underline" ? undefined : "underline";
});
Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
+ const editorView = RichTextMenu.Instance?.TextView?.EditorView;
if (checkResult) {
- return "transparent";
- }
- const editorView = RichTextMenu.Instance.TextView?.EditorView;
- if (editorView) {
- editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true);
+ return (editorView ? RichTextMenu.Instance.italics : Doc.UserDoc().fontStyle === "italics") ? Colors.MEDIUM_BLUE : "transparent";
}
- SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.italic = !doc.italic);
- Doc.UserDoc().italic = !Doc.UserDoc().italic;
- return Doc.UserDoc().italic;
+ if (editorView) RichTextMenu.Instance?.toggleItalics();
+ else Doc.UserDoc().fontStyle = Doc.UserDoc().fontStyle === "italics" ? undefined : "italics";
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 10:25:42 +0000