diff options
| -rw-r--r-- | build/index.html | 1 | ||||
| -rw-r--r-- | package-lock.json | 13 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/PreviewTextCursor.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.scss | 11 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 57 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewBase.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 3 |
8 files changed, 98 insertions, 6 deletions
diff --git a/build/index.html b/build/index.html index 4027667cd..5ce31e1ce 100644 --- a/build/index.html +++ b/build/index.html @@ -3,6 +3,7 @@ <head> <title>Dash Web</title> <link href="https://fonts.googleapis.com/css?family=Fjalla+One|Hind+Siliguri:300" rel="stylesheet"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> </head> <body> diff --git a/package-lock.json b/package-lock.json index 535c348d5..9ae2c25e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2611,6 +2611,11 @@ } } }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -8750,6 +8755,14 @@ "scheduler": "^0.12.0" } }, + "react-fontawesome": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/react-fontawesome/-/react-fontawesome-1.6.1.tgz", + "integrity": "sha1-7dzhfn3HMaoJ/UoYZoimF5OhbFw=", + "requires": { + "prop-types": "^15.5.6" + } + }, "react-golden-layout": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-golden-layout/-/react-golden-layout-1.0.6.tgz", diff --git a/package.json b/package.json index 6697b5f47..f94a8712d 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "@types/webpack": "^4.4.24", "express": "^4.16.4", "flexlayout-react": "^0.3.3", + "font-awesome": "^4.7.0", "golden-layout": "^1.5.9", "mobx": "^5.9.0", "mobx-react": "^5.3.5", @@ -67,6 +68,7 @@ "prosemirror-view": "^1.7.1", "react": "^16.5.2", "react-dom": "^16.7.0", + "react-fontawesome": "^1.6.1", "react-golden-layout": "^1.0.6", "react-image-lightbox": "^5.1.0", "react-jsx-parser": "^1.13.0", 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 e9d134e7b..78d332322 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -17,4 +17,15 @@ 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 9cf8f2e35..1393557cd 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -13,6 +13,8 @@ import { ListField } from "../../../fields/ListField"; import { NumberField } from "../../../fields/NumberField"; import { Documents } from "../../documents/Documents"; import { FieldWaiting } from "../../../fields/Field"; +import { Server } from "tls"; +var FontAwesomeIcon = require('react-fontawesome'); @observer export class CollectionFreeFormView extends CollectionViewBase { @@ -24,6 +26,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 +85,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 +107,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 +125,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; @@ -174,6 +190,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, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = 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; @@ -197,21 +227,36 @@ export class CollectionFreeFormView extends CollectionViewBase { const panx: number = Document.GetNumber(KeyStore.PanX, 0); const pany: number = Document.GetNumber(KeyStore.PanY, 0); + 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, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = 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="border" style={{ - borderWidth: `${COLLECTION_BORDER_WIDTH}px`, + borderWidth: `${COLLECTION_BORDER_WIDTH} px`, }}> - <div className="collectionfreeformview-container" + <div + className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()} onDrop={this.onDrop} onDragOver={this.onDragOver} + onKeyPress={this.onKeyDown} ref={this._containerRef}> <div className="collectionfreeformview" style={{ transform: `translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})`, transformOrigin: `left, top` }} ref={this._canvasRef}> + {this.props.BackgroundView} + <div className="node-container" ref={this._nodeContainerRef} onKeyPress={this.onKeyDown}> + + + {cursor} - <div className="node-container" ref={this._nodeContainerRef}> - {this.props.BackgroundView} {value.map(doc => { return (<CollectionFreeFormDocumentView Scaling={this.resizeScaling} key={doc.Id} ContainingCollectionView={this} Document={doc} DocumentView={undefined} />); })} diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index e854d3077..274f26ecc 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -17,6 +17,8 @@ export interface CollectionViewProps { DocumentForCollection: Document; ContainingDocumentView: Opt<DocumentView>; BackgroundView: Opt<DocumentView>; + DownX: number; + DownY: number; } export const COLLECTION_BORDER_WIDTH = 2; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a183db828..bb8dea53b 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -10,6 +10,7 @@ import { ContextMenu } from "../ContextMenu"; import "./NodeView.scss"; import React = require("react"); import { DocumentView, DocumentViewProps } from "./DocumentView"; +var FontAwesomeIcon = require('react-fontawesome'); @observer @@ -17,6 +18,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { private _contextMenuCanOpen = false; 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 constructor(props: DocumentViewProps) { super(props); @@ -205,6 +207,7 @@ export class CollectionFreeFormDocumentView extends DocumentView { render() { var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView; + return ( <div className="node" ref={this._mainCont} style={{ transformOrigin: "left top", |