aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--build/index.html1
-rw-r--r--package-lock.json13
-rw-r--r--package.json2
-rw-r--r--src/PreviewTextCursor.tsx15
-rw-r--r--src/client/views/collections/CollectionFreeFormView.scss21
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx44
-rw-r--r--src/client/views/collections/CollectionViewBase.tsx5
7 files changed, 99 insertions, 2 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 12997997b..dbc7223ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2721,6 +2721,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",
@@ -8941,6 +8946,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 ce8f2077d..4d283676e 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,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",
"jsx-to-string": "^1.4.0",
"mobx": "^5.9.0",
@@ -70,6 +71,7 @@
"react": "^16.5.2",
"react-dimensions": "^1.3.1",
"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 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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 12:04:20 +0000