From c41696a3169dc765512d64972ba4503cea8393e0 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 1 Mar 2021 17:05:45 -0500 Subject: added basic math typeset equation input --- src/client/documents/DocumentTypes.ts | 1 + src/client/documents/Documents.ts | 23 ++++++++ src/client/views/DocumentDecorations.tsx | 4 +- src/client/views/StyleProvider.tsx | 1 + src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/EquationBox.scss | 0 src/client/views/nodes/EquationBox.tsx | 66 ++++++++++++++++++++++ .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- .../formattedText/ProsemirrorExampleTransfer.ts | 4 ++ 9 files changed, 100 insertions(+), 4 deletions(-) create mode 100644 src/client/views/nodes/EquationBox.scss create mode 100644 src/client/views/nodes/EquationBox.tsx (limited to 'src') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 080657fd8..20dbc6f25 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -21,6 +21,7 @@ export enum DocumentType { PDFANNO = "pdfanno", // pdf text selection (could be just a collection?) DATE = "date", // calendar view of a date SCRIPTING = "script", // script editor + EQUATION = "equation", // equation edtior // special purpose wrappers that either take no data or are compositions of lower level types LINK = "link", // link (view of a document that acts as a link) diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 3f03d39da..e270d2ac8 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -57,6 +57,7 @@ import { PresElementBox } from "../views/presentationview/PresElementBox"; import { SearchBox } from "../views/search/SearchBox"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; import { DocumentType } from "./DocumentTypes"; +import { EquationBox } from "../views/nodes/EquationBox"; const path = require('path'); const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", "")); @@ -241,6 +242,7 @@ export class DocumentOptions { sidebarColor?: string; // background color of text sidebar sidebarViewType?: string; // collection type of text sidebar docMaxAutoHeight?: number; // maximum height for newly created (eg, from pasting) text documents + text?: string; textTransform?: string; // is linear view expanded letterSpacing?: string; // is linear view expanded flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse"; @@ -374,6 +376,9 @@ export namespace Docs { [DocumentType.LABEL, { layout: { view: LabelBox, dataField: defaultDataKey }, }], + [DocumentType.EQUATION, { + layout: { view: EquationBox, dataField: defaultDataKey }, + }], [DocumentType.BUTTON, { layout: { view: LabelBox, dataField: "onClick" }, }], @@ -890,6 +895,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.LABEL), undefined, { ...(options || {}) }); } + export function EquationDocument(options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.EQUATION), undefined, { ...(options || {}) }); + } + export function ButtonDocument(options?: DocumentOptions) { // const btn = InstanceFromProto(Prototypes.get(DocumentType.BUTTON), undefined, { ...(options || {}), "onClick-rawScript": "-script-" }); // btn.layoutKey = "layout_onClick"; @@ -1219,6 +1228,20 @@ export namespace DocUtils { })) as ContextMenuProps[], icon: "eye" }); + ContextMenu.Instance.addItem({ + description: ":math", event: () => { + const created = Docs.Create.EquationDocument(); + if (created) { + created.author = Doc.CurrentUserEmail; + created.x = x; + created.y = y; + created.width = 300; + created.height = 35; + EquationBox.SelectOnLoad = created[Id]; + docAdder?.(created); + } + }, icon: "compress-arrows-alt" + }); ContextMenu.Instance.addItem({ description: "Add Template Doc ...", subitems: DocListCast(Cast(Doc.UserDoc().myItemCreators, Doc, null)?.data).filter(btnDoc => !btnDoc.hidden).map(btnDoc => Cast(btnDoc?.dragFactory, Doc, null)).filter(doc => doc && doc !== Doc.UserDoc().emptyPresentation).map((dragDoc, i) => ({ diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 357bff36d..5b7394c42 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -611,8 +611,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b top: bounds.y - this._resizeBorderWidth / 2 - this._titleHeight, }}> {closeIcon} - {titleArea} - {seldoc.props.hideResizeHandles ? (null) : + {seldoc.props.Document.type === DocumentType.EQUATION ? (null) : titleArea} + {seldoc.props.hideResizeHandles || seldoc.props.Document.type === DocumentType.EQUATION ? (null) : <> {SelectionManager.Views().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : {`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}} placement="top"> diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 5a2fb285b..2352aa22a 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -110,6 +110,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt; +const EquationDocument = makeInterface(EquationSchema, documentSchema); + +@observer +export class EquationBox extends ViewBoxBaseComponent(EquationDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(EquationBox, fieldKey); } + public static SelectOnLoad: string = ""; + _ref: React.RefObject = React.createRef(); + componentDidMount() { + if (EquationBox.SelectOnLoad === this.rootDoc[Id]) { + this.props.select(false); + + this._ref.current!.mathField.focus(); + this._ref.current!.mathField.select(); + } + reaction(() => this.props.isSelected(), + selected => { + if (this._ref.current) { + if (selected) this._ref.current.element.current.children[0].addEventListener("keydown", this.keyPressed, true); + else this._ref.current.element.current.children[0].removeEventListener("keydown", this.keyPressed); + } + }, { fireImmediately: true }); + } + @action + keyPressed = (e: KeyboardEvent) => { + if (e.key === "Enter") { + const _height = Number(getComputedStyle(this._ref.current!.element.current).height.replace("px", "")); + const _width = Number(getComputedStyle(this._ref.current!.element.current).width.replace("px", "")); + this.layoutDoc._width = _width; + this.layoutDoc._height = _height; + const nextEq = Docs.Create.EquationDocument({ title: "# math", text: StrCast(this.dataDoc.text), x: NumCast(this.layoutDoc.x), y: NumCast(this.layoutDoc.y) + _height + 10, _width, _height: 35 }); + EquationBox.SelectOnLoad = nextEq[Id]; + this.props.addDocument?.(nextEq); + e.stopPropagation(); + } + if (e.key === "Backspace" && !this.dataDoc.text) this.props.removeDocument?.(this.rootDoc); + } + onChange = (str: string) => this.dataDoc.text = str; + render() { + TraceMobx(); + return (
this.props.isSelected() && !e.ctrlKey && e.stopPropagation()}> +
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 288cd14c9..5066578aa 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1541,7 +1541,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp /> {this.props.noSidebar || !this.layoutDoc._showSidebar || this.sidebarWidthPercent === "0%" ? (null) : this.sidebarCollection} - {this.sidebarHandle} + {this.Document._singleLine ? (null) : this.sidebarHandle} {!this.layoutDoc._showAudio ? (null) : this.audioHandle} diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts index a1a404e10..eae4c0179 100644 --- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts +++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts @@ -144,6 +144,10 @@ export function buildKeymap>(schema: S, props: any, mapKey bind("Alt-\\", setBlockType(schema.nodes.paragraph)); bind("Shift-Ctrl-\\", setBlockType(schema.nodes.code_block)); + bind("Ctrl-m", (state: EditorState, dispatch: (tx: Transaction) => void) => { + dispatch(state.tr.replaceSelectionWith(schema.nodes.dashField.create({ fieldKey: "math" + Utils.GenerateGuid() }))); + }) + for (let i = 1; i <= 6; i++) { bind("Shift-Ctrl-" + i, setBlockType(schema.nodes.heading, { level: i })); } -- cgit v1.2.3-70-g09d2