aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/PreviewTextCursor.tsx15
-rw-r--r--src/client/util/SelectionManager.ts7
-rw-r--r--src/client/views/collections/CollectionFreeFormView.scss18
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx74
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss5
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx37
-rw-r--r--src/fields/Key.ts1
-rw-r--r--src/fields/KeyStore.ts6
9 files changed, 161 insertions, 6 deletions
diff --git a/src/PreviewTextCursor.tsx b/src/PreviewTextCursor.tsx
new file mode 100644
index 000000000..6818bf28c
--- /dev/null
+++ b/src/PreviewTextCursor.tsx
@@ -0,0 +1,15 @@
+import React = require("react");
+import { observer } from "mobx-react";
+
+@observer
+export class PreviewTextCursor extends React.Component {
+
+ render() {
+ return (
+ <div>
+
+ </div>
+ )
+ };
+
+} \ No newline at end of file
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 1a711ae64..82767bdcd 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,4 +1,5 @@
import { observable, action } from "mobx";
+import { CollectionFreeFormView } from "../views/collections/CollectionFreeFormView";
import { DocumentView } from "../views/nodes/DocumentView";
export namespace SelectionManager {
@@ -8,6 +9,12 @@ export namespace SelectionManager {
@action
SelectDoc(doc: DocumentView, ctrlPressed: boolean): void {
+
+ //remove preview cursor from collection
+ if (doc.props.ContainingCollectionView != undefined && doc.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+ doc.props.ContainingCollectionView.hidePreviewCursor();
+ }
+
// if doc is not in SelectedDocuments, add it
if (!ctrlPressed) {
manager.SelectedDocuments = [];
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index e682b9815..49953a123 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -23,4 +23,22 @@
width:100%;
height: 100%
}
+}
+
+.border {
+ border-style: solid;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+}
+
+//this is an animation for the blinking cursor!
+@keyframes blink {
+ 0% {opacity: 0}
+ 49%{opacity: 0}
+ 50% {opacity: 1}
+}
+
+#prevCursor {
+ animation: blink 1s infinite;
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index cb6668634..348a11992 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,7 +1,9 @@
-import { action, computed } from "mobx";
+import { observable, action, computed } from "mobx";
import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
import { FieldWaiting } from "../../../fields/Field";
+import { Server } from "tls";
+import { RichTextField } from "../../../fields/RichTextField";
import { KeyStore } from "../../../fields/KeyStore";
import { ListField } from "../../../fields/ListField";
import { TextField } from "../../../fields/TextField";
@@ -28,9 +30,15 @@ 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
+ @observable
+ private _previewCursorVisible: boolean = false;
@computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
@computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
@@ -63,10 +71,19 @@ export class CollectionFreeFormView extends CollectionViewBase {
!e.defaultPrevented) {
document.removeEventListener("pointermove", this.onPointerMove);
document.addEventListener("pointermove", this.onPointerMove);
+ //document.removeEventListener("keypress", this.onKeyDown);
+ //document.addEventListener("keydown", this.onKeyDown);
document.removeEventListener("pointerup", this.onPointerUp);
document.addEventListener("pointerup", this.onPointerUp);
- this._downX = this._lastX = e.pageX;
- this._downY = this._lastY = e.pageY;
+ this._lastX = e.pageX;
+ this._lastY = e.pageY;
+ 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,
+ })
}
}
@@ -76,10 +93,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
document.removeEventListener("pointerup", this.onPointerUp);
e.stopPropagation();
if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+ //show preview text cursor on tap
+ this._previewCursorVisible = true;
+ //select is not already selected
if (!this.props.isSelected()) {
this.props.select(false);
}
}
+
}
@action
@@ -90,7 +111,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-
+ this._previewCursorVisible = false;
this.SetPan(x + dx, y + dy);
}
this._lastX = e.pageX;
@@ -138,6 +159,29 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
@action
+ onKeyDown = (e: React.KeyboardEvent<Element>) => {
+ console.log("KEY PRESSED");
+ //if not these keys, make a textbox if preview cursor is active!
+ if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
+ if (this._previewCursorVisible) {
+ //make textbox and add it to this collection
+ //let { LocalX, LocalY } = this.props.TransformToLocalPoint(this._downX, this._downY);
+ let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY);
+ let LocalX = tr.TranslateX;
+ let LocalY = tr.TranslateY;
+ 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
+ this.props.CollectionView.addDocument(newBox);
+ newBox.SetText(KeyStore.Text, e.key);
+ newBox.SetNumber(KeyStore.SelectOnLoaded, 1);
+
+ //remove cursor from screen
+ this._previewCursorVisible = false;
+ }
+ }
+ }
+
+ @action
bringToFront(doc: DocumentView) {
const { fieldKey: fieldKey, Document: Document } = this.props;
@@ -214,7 +258,26 @@ export class CollectionFreeFormView extends CollectionViewBase {
getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
noScaling = () => 1;
+ //hides the preview cursor for generating new text boxes - called when other docs are selected/dragged
+ @action
+ hidePreviewCursor() {
+ this._previewCursorVisible = false;
+ }
+
render() {
+
+ let cursor = null;
+ //toggle for preview cursor -> will be on when user taps freeform
+ if (this._previewCursorVisible) {
+ //get local position and place cursor there!
+ //let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+ let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY);
+ let LocalX = tr.TranslateX;
+ let LocalY = tr.TranslateY;
+ //let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+ cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", transform: `translate(${LocalX}px, ${LocalY}px)` }}>I</div>
+ }
+
const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
var overlay = this.overlayView ?
@@ -226,16 +289,19 @@ 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.bind(this)}
onDragOver={this.onDragOver}
style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
+ tabIndex={0}
ref={this.createDropTarget}>
<div className="collectionfreeformview"
style={{ transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
ref={this._canvasRef}>
{this.backgroundView}
+ {cursor}
{this.views}
</div>
{this.overlayView}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ad1328e5d..914182efa 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -119,6 +119,10 @@ export class DocumentView extends React.Component<DocumentViewProps> {
return;
}
if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
+ //remove preview cursor from collection
+ if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView instanceof CollectionFreeFormView) {
+ this.props.ContainingCollectionView.hidePreviewCursor();
+ }
this._contextMenuCanOpen = false;
if (this._mainCont.current != null && !this.topMost) {
this._contextMenuCanOpen = false;
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 226456fab..12604f843 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -9,6 +9,11 @@
}
.formattedTextBox-cont {
+<<<<<<< HEAD
+ background: white;
+ padding: 1vw;
+=======
background: beige;
padding: 0;
+>>>>>>> d9d55e422826da1fe87aa7973c92e54bc0c99f02
} \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index c0969a8c3..194d5636c 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -3,13 +3,24 @@ 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 "./FormattedTextBox.scss";
+import { KeyStore } from "../../../fields/Key";
import React = require("react")
import { RichTextField } from "../../../fields/RichTextField";
import { FieldViewProps, FieldView } from "./FieldView";
+<<<<<<< HEAD
+import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
+import { observer } from "mobx-react";
+import { Schema, DOMParser } from "prosemirror-model"
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+=======
+>>>>>>> d9d55e422826da1fe87aa7973c92e54bc0c99f02
// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -34,6 +45,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
private _ref: React.RefObject<HTMLDivElement>;
private _editorView: Opt<EditorView>;
private _reactionDisposer: Opt<IReactionDisposer>;
+ private _lastTextState = "";
constructor(props: FieldViewProps) {
super(props);
@@ -49,9 +61,24 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
this._editorView.updateState(state);
const { doc, fieldKey } = this.props;
doc.SetData(fieldKey, JSON.stringify(state.toJSON()), RichTextField);
+ this._lastTextState = JSON.stringify(state.toJSON);
}
}
+ //enables textboxes to be created with preexisting text or placeholder text
+ //this method is passed in as part of the config the editor state in componentDidMount()
+ placeholderPlugin(text: string) {
+ return new Plugin({
+ props: {
+ decorations(state) {
+ let doc = state.doc
+ if (doc.childCount == 1 && doc.firstChild && doc.firstChild.isTextblock && doc.firstChild.content.size == 0)
+ return DecorationSet.create(doc, [Decoration.widget(1, document.createTextNode(text))])
+ }
+ }
+ })
+ }
+
componentDidMount() {
let state: EditorState;
const { doc, fieldKey } = this.props;
@@ -60,7 +87,11 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
plugins: [
history(),
keymap({ "Mod-z": undo, "Mod-y": redo }),
- keymap(baseKeymap)
+ keymap(baseKeymap),
+ //sets the placeholder text!
+ this.placeholderPlugin(
+ this.props.doc.GetText(KeyStore.Text, "")
+ )
]
};
@@ -103,6 +134,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
@action
onChange(e: React.ChangeEvent<HTMLInputElement>) {
const { fieldKey, doc } = this.props;
+ this._lastTextState = e.target.value;
doc.SetData(fieldKey, e.target.value, RichTextField);
}
onPointerDown = (e: React.PointerEvent): void => {
@@ -112,6 +144,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
}
render() {
+ //if (this.props.doc.GetText(KeyStore.Text, "") !== ;
+
+
return (<div className="formattedTextBox-cont"
style={{
color: "initial",
diff --git a/src/fields/Key.ts b/src/fields/Key.ts
index c16a00878..00d78d516 100644
--- a/src/fields/Key.ts
+++ b/src/fields/Key.ts
@@ -2,7 +2,6 @@ import { Field, FieldId } from "./Field"
import { Utils } from "../Utils";
import { observable } from "mobx";
import { Types } from "../server/Message";
-import { ObjectID } from "bson";
import { Server } from "../client/Server";
export class Key extends Field {
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index a3b39735d..6b5fafe05 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -26,4 +26,10 @@ export namespace KeyStore {
export const Caption = new Key("Caption");
export const ActiveFrame = new Key("ActiveFrame");
export const DocumentText = new Key("DocumentText");
+ //used for setting the text of a text document
+ export const Text = new Key("Text");
+ //determines whether doc views will be selected when they are first loaded
+ //should be NumberField where 0 = false and 1 = true
+ //currently only implemented for FormattedTextView
+ export const SelectOnLoaded = new Key("SelectOnLoaded");
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 18:23:18 +0000