diff options
Diffstat (limited to 'src')
5 files changed, 36 insertions, 14 deletions
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index fa1372925..55f5c2684 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -12,7 +12,6 @@ top: 0; left: 0; } -<<<<<<< HEAD } .border { @@ -31,6 +30,4 @@ #prevCursor { animation: blink 1s infinite; -======= ->>>>>>> 3f98d6ec6050e7faa15179871f0d9669c1188a78 }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index af1889c3f..8facc8f3c 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -15,6 +15,9 @@ import { Documents } from "../../documents/Documents"; import { FieldWaiting } from "../../../fields/Field"; import { Server } from "tls"; import { Transform } from "../../util/Transform"; +import { FormattedTextBox } from "../../views/nodes/FormattedTextBox"; +import { TextField } from "../../../fields/TextField"; +import { RichTextField } from "../../../fields/RichTextField"; @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -23,8 +26,12 @@ export class CollectionFreeFormView extends CollectionViewBase { private _canvasRef = React.createRef<HTMLDivElement>(); private _lastX: number = 0; private _lastY: number = 0; + + @observable private _downX: number = 0; + @observable private _downY: number = 0; + //determines whether the blinking cursor for indicating whether a text will be made on key down is visible private _previewCursorVisible: boolean = false; @@ -93,10 +100,10 @@ export class CollectionFreeFormView extends CollectionViewBase { this._downX = e.pageX; this._downY = e.pageY; //update downX/downY to update UI (used for preview text cursor) - this.setState({ - DownX: e.pageX, - DownY: e.pageY, - }) + //this.setState({ + // DownX: e.pageX, + // DownY: e.pageY, + //}) } } @@ -200,10 +207,18 @@ export class CollectionFreeFormView extends CollectionViewBase { //if not these keys, make a textbox if preview cursor is active! if (!e.ctrlKey && !e.altKey && !e.shiftKey) { if (this._previewCursorVisible) { - //make textbox + //make textbox and add it to this collection let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY); let newBox = Documents.TextDocument({ width: 200, height: 100, x: LocalX, y: LocalY, title: "new" }); + //set text to be the typed key and get focus on text box + //newBox.SetText(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString())); + newBox.SetText(KeyStore.Data, e.key, true); + //newBox.SetData(KeyStore.Data, e.key, RichTextField); + //SelectionManager.SelectDoc(newBox, false); this.addDocument(newBox); + + //remove cursor from screen + this._previewCursorVisible = false; } } } @@ -263,10 +278,12 @@ export class CollectionFreeFormView extends CollectionViewBase { return ( <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} + onKeyPress={this.onKeyDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()} onDrop={this.onDrop} onDragOver={this.onDragOver} + tabIndex={0} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 2f304f666..1cf07ce05 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -19,12 +19,7 @@ export interface CollectionViewProps { ContainingDocumentView: Opt<DocumentView>; GetTransform: () => Transform; BackgroundView: Opt<DocumentView>; -<<<<<<< HEAD - DownX: number; - DownY: number; -======= ParentScaling: number; ->>>>>>> 3f98d6ec6050e7faa15179871f0d9669c1188a78 } export const COLLECTION_BORDER_WIDTH = 2; diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index 5139d5d6b..492367fce 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -9,6 +9,6 @@ } .formattedTextBox-cont { - background: beige; + background: white; padding: 1vw; }
\ No newline at end of file diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index f6bd0c0f8..4bec129e5 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -3,8 +3,10 @@ import { baseKeymap } from "prosemirror-commands"; import { history, redo, undo } from "prosemirror-history"; import { keymap } from "prosemirror-keymap"; import { schema } from "prosemirror-schema-basic"; +import { Transform } from "prosemirror-transform"; import { EditorState, Transaction } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; +import { Node } from "prosemirror-model"; import { Opt, FieldWaiting, FieldValue } from "../../../fields/Field"; import { SelectionManager } from "../../util/SelectionManager"; import "./FormattedTextBox.scss"; @@ -13,6 +15,7 @@ import { RichTextField } from "../../../fields/RichTextField"; import { FieldViewProps, FieldView } from "./FieldView"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { observer } from "mobx-react"; +import { Schema, DOMParser } from "prosemirror-model" // FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document @@ -55,10 +58,20 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { } } + setText(txt: string) { + let tr = new Transaction(new Node()); + let node = new Node(); + node.text = txt; + tr.insert(0, node); + + this.dispatchTransaction(tr); + } + componentDidMount() { let state: EditorState; const { doc, fieldKey } = this.props; const config = { + doc: new Node(), schema, plugins: [ history(), |