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.tsx216
1 files changed, 88 insertions, 128 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 9d1ef937f..511df8786 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -5,7 +5,7 @@ import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { ColorState, SketchPicker } from 'react-color';
-import { Doc, StrListCast } from '../../../../fields/Doc';
+import { Doc, StrListCast, WidthSym, HeightSym } from '../../../../fields/Doc';
import { InkTool } from '../../../../fields/InkField';
import { createSchema, makeInterface } from '../../../../fields/Schema';
import { ScriptField } from '../../../../fields/ScriptField';
@@ -14,7 +14,6 @@ import { WebField } from '../../../../fields/URLField';
import { DocumentType } from '../../../documents/DocumentTypes';
import { Scripting } from "../../../util/Scripting";
import { SelectionManager } from '../../../util/SelectionManager';
-import { ColorScheme } from '../../../util/SettingsManager';
import { UndoManager, undoBatch } from '../../../util/UndoManager';
import { CollectionViewType } from '../../collections/CollectionView';
import { ContextMenu } from '../../ContextMenu';
@@ -114,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) {
@@ -159,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
@@ -178,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>
@@ -262,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"];
}
@@ -319,29 +318,35 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
);
}
+ @observable colorPickerClosed: boolean = true;
+ @computed get colorScript() {
+ const script = StrCast(this.rootDoc.script);
+ return ScriptField.MakeScript(script + '(colValue, checkResult)', { colValue: "string", checkResult: "boolean" });
+ }
+
+ colorPicker = (curColor: string) => {
+ const change = (value: ColorState) => {
+ const s = this.colorScript;
+ s && undoBatch(() => s.script.run({ colValue: Utils.colorString(value), checkResult: 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} />
+ }
/**
* Color button
*/
@computed get colorButton() {
- 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 curColor = this.colorScript?.script.run({ colValue: undefined, checkResult: true }).result ?? "transparent";
- const script: string = StrCast(this.rootDoc.script);
- const scriptCheck: string = script + "(undefined, true)";
- const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result;
-
- const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505',
- '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B',
- '#FFFFFF', '#f1efeb', "transparent"];
-
- const colorBox = (func: (color: ColorState) => void) => <SketchPicker
- disableAlpha={false}
- 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" }}>
+ <div className="fontIconBox-label" style={{ color, backgroundColor, position: "absolute" }}>
{this.label}
</div>;
@@ -350,30 +355,27 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
<FontAwesomeIcon icon={'caret-down'} color={color} size="sm" />
</div>;
-
- const click = (value: ColorState) => {
- const s = ScriptField.MakeScript(script + '("' + Utils.colorString(value) + '", false)');
- s && undoBatch(() => s.script.run().result)();
- };
+ setTimeout(() => this.colorPicker(curColor)); // cause an update to the color picker rendered in MainView
return (
- <div className={`menuButton ${this.type} ${active}`}
+ <div className={`menuButton ${this.type} ${this.colorPickerClosed}`}
style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
- onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen}
+ 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: boolResult ? boolResult : "#FFFFFF" }} />
+ <div className="colorButton-color" style={{ backgroundColor: curColor }} />
{label}
{/* {dropdownCaret} */}
- {this.rootDoc.dropDownOpen ?
+ {this.colorPickerClosed ? (null) :
<div>
<div className="menuButton-dropdownBox"
onPointerDown={e => e.stopPropagation()}
onClick={e => e.stopPropagation()}>
- {colorBox(click)}
+ {this.colorPicker(curColor)}
</div>
- <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} />
- </div>
- : null}
+ <div className="dropbox-background" onClick={action((e) => {
+ e.stopPropagation(); this.colorPickerClosed = true;
+ })} />
+ </div>}
</div>
);
}
@@ -388,7 +390,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>;
@@ -407,7 +409,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>
@@ -463,7 +465,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
render() {
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
- const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark;
const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
@@ -573,15 +574,9 @@ 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?.type === DocumentType.INK) selected.fillColor = color;
if (selected) selected._backgroundColor = color;
- Doc.UserDoc()._fontColor = color;
});
// toggle: Set overlay status of selected document
@@ -599,7 +594,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");
});
@@ -620,16 +615,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];
@@ -646,7 +643,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) {
@@ -670,38 +667,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
@@ -710,11 +694,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;
@@ -725,62 +705,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";
+ return (editorView ? RichTextMenu.Instance.underline : Doc.UserDoc().textDecoration === "underline") ? Colors.MEDIUM_BLUE : "transparent";
}
- const editorView = RichTextMenu.Instance.TextView?.EditorView;
- if (editorView) {
- editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true);
- }
- 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";
+ return (editorView ? RichTextMenu.Instance.italics : Doc.UserDoc().fontStyle === "italics") ? Colors.MEDIUM_BLUE : "transparent";
}
- const editorView = RichTextMenu.Instance.TextView?.EditorView;
- if (editorView) {
- editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true);
- }
- 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";
});
@@ -794,24 +755,23 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolean) {
if (checkResult) {
- if (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool) return Colors.MEDIUM_BLUE;
- else return "transparent";
+ return (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance?.InkShape === "" || GestureOverlay.Instance?.InkShape === tool) ?
+ Colors.MEDIUM_BLUE : "transparent";
}
- 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 = "";
+ if (["circle", "square", "line"].includes(tool)) {
+ if (GestureOverlay.Instance.InkShape === tool) {
+ Doc.UserDoc().activeInkTool = InkTool.None;
+ GestureOverlay.Instance.InkShape = InkTool.None;
+ } else {
+ Doc.UserDoc().activeInkTool = InkTool.Pen;
+ GestureOverlay.Instance.InkShape = tool;
+ }
+ } else if (tool) { // pen
+ if (Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance.InkShape) {
Doc.UserDoc().activeInkTool = InkTool.None;
} else {
Doc.UserDoc().activeInkTool = tool;
+ GestureOverlay.Instance.InkShape = "";
}
} else {
Doc.UserDoc().activeInkTool = InkTool.None;
@@ -823,7 +783,7 @@ Scripting.addGlobal(function setFillColor(color?: string, checkResult?: boolean)
const selected = SelectionManager.Docs().lastElement();
if (checkResult) {
if (selected?.type === DocumentType.INK) {
- return StrCast(selected._backgroundColor);
+ return StrCast(selected.fillColor);
}
return ActiveFillColor();
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-14 14:55:18 +0000