From c41696a3169dc765512d64972ba4503cea8393e0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 1 Mar 2021 17:05:45 -0500
Subject: added basic math typeset equation input

---
 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 ++
 7 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src/client/views/nodes/EquationBox.scss
 create mode 100644 src/client/views/nodes/EquationBox.tsx

(limited to 'src/client/views')

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) :
                                 <Tooltip key="i" title={<div className="dash-tooltip">{`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}</div>} 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<Doc>, props: Opt<FieldViewProps |
                 case DocumentType.FILTER: docColor = docColor || (darkScheme() ? "#2d2d2d" : "rgba(105, 105, 105, 0.432)"); break;
                 case DocumentType.INK: docColor = doc?.isInkMask ? "rgba(0,0,0,0.7)" : undefined; break;
                 case DocumentType.SLIDER: break;
+                case DocumentType.EQUATION: docColor = docColor || "transparent"; break;
                 case DocumentType.LABEL: docColor = docColor || (doc.annotationOn !== undefined ? "rgba(128, 128, 128, 0.18)" : undefined); break;
                 case DocumentType.BUTTON: docColor = docColor || (darkScheme() ? "#2d2d2d" : "lightgray"); break;
                 case DocumentType.LINK: return "transparent";
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index c0af1e08a..02c112745 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -11,6 +11,7 @@ import { CollectionView } from "../collections/CollectionView";
 import { YoutubeBox } from "./../../apis/youtube/YoutubeBox";
 import { AudioBox } from "./AudioBox";
 import { LabelBox } from "./LabelBox";
+import { EquationBox } from "./EquationBox";
 import { SliderBox } from "./SliderBox";
 import { LinkBox } from "./LinkBox";
 import { ScriptingBox } from "./ScriptingBox";
@@ -220,7 +221,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
                 blacklistedAttrs={emptyPath}
                 renderInWrapper={false}
                 components={{
-                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
+                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, EquationBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, SearchBox, FilterBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/EquationBox.scss b/src/client/views/nodes/EquationBox.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
new file mode 100644
index 000000000..8ded4111c
--- /dev/null
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -0,0 +1,66 @@
+import EquationEditor from 'equation-editor-react';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { documentSchema } from '../../../fields/documentSchemas';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { StrCast, NumCast } from '../../../fields/Types';
+import { ViewBoxBaseComponent } from '../DocComponent';
+import { FieldView, FieldViewProps } from './FieldView';
+import './LabelBox.scss';
+import { Id } from '../../../fields/FieldSymbols';
+import { simulateMouseClick } from '../../../Utils';
+import { TraceMobx } from '../../../fields/util';
+import { reaction, action } from 'mobx';
+import { Docs } from '../../documents/Documents';
+
+const EquationSchema = createSchema({});
+
+type EquationDocument = makeInterface<[typeof EquationSchema, typeof documentSchema]>;
+const EquationDocument = makeInterface(EquationSchema, documentSchema);
+
+@observer
+export class EquationBox extends ViewBoxBaseComponent<FieldViewProps, EquationDocument>(EquationDocument) {
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(EquationBox, fieldKey); }
+    public static SelectOnLoad: string = "";
+    _ref: React.RefObject<EquationEditor> = 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 (<div onPointerDown={e => this.props.isSelected() && !e.ctrlKey && e.stopPropagation()}>
+            <EquationEditor ref={this._ref}
+                value={this.dataDoc.text || "y"}
+                onChange={this.onChange}
+                autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
+                autoOperatorNames="sin cos tan" /></div>
+        );
+    }
+}
\ 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
                         />
                     </div>
                     {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}
                 </div>
             </div>
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<S extends Schema<any>>(schema: S, props: any, mapKey
     bind("Alt-\\", setBlockType(schema.nodes.paragraph));
     bind("Shift-Ctrl-\\", setBlockType(schema.nodes.code_block));
 
+    bind("Ctrl-m", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => 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