diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/PreviewTextCursor.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.scss | 21 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 44 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewBase.tsx | 5 |
4 files changed, 83 insertions, 2 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/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 4cf474f77..fa1372925 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -12,4 +12,25 @@ top: 0; left: 0; } +<<<<<<< HEAD +} + +.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; +======= +>>>>>>> 3f98d6ec6050e7faa15179871f0d9669c1188a78 }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 04373df12..af1889c3f 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -13,6 +13,7 @@ import { ListField } from "../../../fields/ListField"; import { NumberField } from "../../../fields/NumberField"; import { Documents } from "../../documents/Documents"; import { FieldWaiting } from "../../../fields/Field"; +import { Server } from "tls"; import { Transform } from "../../util/Transform"; @observer @@ -24,6 +25,8 @@ export class CollectionFreeFormView extends CollectionViewBase { private _lastY: number = 0; private _downX: number = 0; 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; constructor(props: CollectionViewProps) { super(props); @@ -81,10 +84,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, + }) } } @@ -94,10 +106,12 @@ 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) { + this._previewCursorVisible = true; if (!SelectionManager.IsSelected(this.props.ContainingDocumentView as CollectionFreeFormDocumentView)) { SelectionManager.SelectDoc(this.props.ContainingDocumentView as CollectionFreeFormDocumentView, false); } } + } @action @@ -110,6 +124,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0); this.SetPan(x + (e.pageX - this._lastX) / currScale, y + (e.pageY - this._lastY) / currScale); + console.log("SET PAN"); } this._lastX = e.pageX; this._lastY = e.pageY; @@ -180,6 +195,20 @@ 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 + 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" }); + this.addDocument(newBox); + } + } + } + + @action bringToFront(doc: CollectionFreeFormDocumentView) { const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; @@ -221,6 +250,16 @@ export class CollectionFreeFormView extends CollectionViewBase { const pany: number = Document.GetNumber(KeyStore.PanY, 0); var me = this; + 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); + cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", transform: `translate(${LocalX}px, ${LocalY}px)` }}>I</div> + } + + + return ( <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} @@ -237,6 +276,7 @@ export class CollectionFreeFormView extends CollectionViewBase { ref={this._canvasRef}> {this.props.BackgroundView} + {cursor} {value.map(doc => { return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc} AddDocument={this.addDocument} diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 1cf07ce05..2f304f666 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -19,7 +19,12 @@ 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; |