From 1e8240e9ca1c2e2ff0e02ffb8b43be8dcbba9d14 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Wed, 13 Feb 2019 20:57:12 -0500 Subject: nav working --- src/client/views/collections/CollectionFreeFormView.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 7947b1c51..d60b98edd 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -25,6 +25,7 @@ export class CollectionFreeFormView extends CollectionViewBase { private _lastY: number = 0; private _downX: number = 0; private _downY: number = 0; + private _borderColor: string = "red" constructor(props: CollectionViewProps) { super(props); -- cgit v1.2.3-70-g09d2 From c835f47a32336c12e6ad7497b72694bb06dc2487 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Sat, 16 Feb 2019 15:34:20 -0500 Subject: added blinking preview text cursor on click --- build/index.html | 1 + package-lock.json | 13 +++++ package.json | 2 + src/PreviewTextCursor.tsx | 15 ++++++ .../views/collections/CollectionFreeFormView.scss | 11 +++++ .../views/collections/CollectionFreeFormView.tsx | 57 +++++++++++++++++++--- .../views/collections/CollectionViewBase.tsx | 2 + .../views/nodes/CollectionFreeFormDocumentView.tsx | 3 ++ 8 files changed, 98 insertions(+), 6 deletions(-) create mode 100644 src/PreviewTextCursor.tsx (limited to 'src/client/views/collections') 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 @@ Dash Web + 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 ( +
+ +
+ ) + }; + +} \ 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; @@ -173,6 +189,20 @@ export class CollectionFreeFormView extends CollectionViewBase { onDragOver = (e: React.DragEvent): void => { } + @action + onKeyDown = (e: React.KeyboardEvent) => { + 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 =
I
+ } + + + return (
-
e.preventDefault()} onDrop={this.onDrop} onDragOver={this.onDragOver} + onKeyPress={this.onKeyDown} ref={this._containerRef}>
+ {this.props.BackgroundView} +
+ + + {cursor} -
- {this.props.BackgroundView} {value.map(doc => { return (); })} 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; BackgroundView: Opt; + 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 (
Date: Mon, 18 Feb 2019 18:52:30 -0500 Subject: transforms --- src/client/views/DocumentManager.tsx | 40 +++++++++++++++------- src/client/views/Main.tsx | 8 ++--- src/client/views/TempTreeView.tsx | 5 +-- .../views/collections/CollectionDockingView.tsx | 1 + 4 files changed, 35 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index 904ac0cce..4d8756107 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -93,11 +93,10 @@ export class DocumentManager { //if the view exists in a freeform collection if (docView != null) { //view.props.GetTransform().TranslateX - width = docView.props.Document.GetNumber(KeyStore.NativeWidth, 0) - height = docView.props.Document.GetNumber(KeyStore.NativeHeight, 0) + width = docView.props.Document.GetNumber(KeyStore.Width, 0) + height = docView.props.Document.GetNumber(KeyStore.Height, 0) - - //base case: parent does not exist (aka is parent) + //base case: parent of parent does not exist if (docView.props.ContainingCollectionView == null) { // scale = RootStore.Instance.MainNodeCollection.Scale; // XView = (-node.X * scale) + (window.innerWidth / 2) - (node.Width * scale / 2); @@ -106,22 +105,37 @@ export class DocumentManager { scale = docView.props.GetTransform().Scale XView = (-docView.props.GetTransform().TranslateX * scale) + (window.innerWidth / 2) - (width * scale / 2) YView = (-docView.props.GetTransform().TranslateY * scale) + (window.innerHeight / 2) - (height * scale / 2) + //set x and y view of parent } //parent is not main, parent is centered and calls itself else { + console.log("------------------------------------------") + console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.Title) + console.log("------------------------------------------") console.log("parent does exist") - if (docView.props.ContainingCollectionView.props.BackgroundView != null) { + if (docView.props.ContainingCollectionView.props.DocumentForCollection != null) { console.log("view of parent exists") - let parentWidth = docView.props.ContainingCollectionView.props.BackgroundView.props.Document.GetNumber(KeyStore.NativeWidth, 0) - let parentHeight = docView.props.ContainingCollectionView.props.BackgroundView.props.Document.GetNumber(KeyStore.NativeHeight, 0) - scale = docView.props.ContainingCollectionView.props.BackgroundView.props.GetTransform().Scale - XView = (-docView.props.GetTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2); - YView = (-docView.props.GetTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2); - //node.Parent.setViewportXY(XView, YView); - this.setViewportXY(docView.props.ContainingCollectionView, XView, YView) + let tempView = this.getDocumentView(docView.props.ContainingCollectionView.props.DocumentForCollection) + + console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0)) + + let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) + let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0) + + console.log("parent width: " + parentWidth + ", parent height: " + parentHeight) + + + if (tempView != null) { + console.log("View is NOT null") + scale = tempView.props.GetTransform().Scale + XView = (-docView.props.GetTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2); + YView = (-docView.props.GetTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2); + //node.Parent.setViewportXY(XView, YView); + this.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return this.centerNode(docView.props.ContainingCollectionView.props.BackgroundView.props.Document); + return this.centerNode(docView.props.ContainingCollectionView.props.DocumentForCollection); + } } } } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 5d23f5439..38e353055 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -64,9 +64,9 @@ let doc4 = Documents.CollectionDocument(docset, { // x: 650, y: 500, width: 600, height: 600, title: "cat 2" // }); let docset2 = [doc3, doc1, doc2]; -let doc6 = Documents.CollectionDocument(docset2, { - x: 350, y: 100, width: 600, height: 600, title: "docking collection" -}); +// let doc6 = Documents.CollectionDocument(docset2, { +// x: 350, y: 100, width: 600, height: 600, title: "docking collection" +// }); let mainNodes = mainContainer.GetOrCreate>(KeyStore.Data, ListField); // mainNodes.Data.push(doc6); // mainNodes.Data.push(doc2); @@ -75,7 +75,7 @@ mainNodes.Data.push(doc3); // mainNodes.Data.push(doc5); // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); -mainNodes.Data.push(doc6); +//mainNodes.Data.push(doc6); //} //); diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index 5bb44fde2..2d02f3fde 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -16,8 +16,9 @@ export class TempTreeView extends React.Component{ onClick(doc: Document) { let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { - console.log(view.Id) - console.log(view.props.GetTransform().TranslateX) + //console.log(view.Id) + //console.log(view.props.GetTransform().TranslateX) + DocumentManager.Instance.centerNode(view); console.log(view.props.Document.Title) if (view.props.ContainingCollectionView != undefined) { diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c870a9cf0..310933275 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -229,6 +229,7 @@ export class CollectionDockingView extends CollectionViewBase { .off('click') //unbind the current click handler .click(function () { //if (confirm('really close this?')) { + console.log("closing!") stack.remove(); //} }); -- cgit v1.2.3-70-g09d2 From 953a11d8f5c46d8900032f16867660401673cc73 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Mon, 18 Feb 2019 19:04:08 -0500 Subject: transforms update 2 --- .../views/collections/CollectionDockingView.tsx | 117 ++++++++++----------- 1 file changed, 58 insertions(+), 59 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 472f8a4d2..c870a9cf0 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -4,17 +4,18 @@ import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import { action, computed, reaction, observable } from "mobx"; import { observer } from "mobx-react"; +import * as ReactDOM from 'react-dom'; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/Key"; import { ListField } from "../../../fields/ListField"; +import { NumberField } from "../../../fields/NumberField"; import { DragManager } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase"; import React = require("react"); -import * as ReactDOM from 'react-dom'; -import Measure from "react-measure"; +import { changeDependenciesStateTo0 } from "mobx/lib/internal"; import { Utils } from "../../../Utils"; @observer @@ -67,6 +68,7 @@ export class CollectionDockingView extends CollectionViewBase { } private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })(); + @action onResize = (event: any) => { var cur = this.props.ContainingDocumentView!.MainContent.current; @@ -98,7 +100,7 @@ export class CollectionDockingView extends CollectionViewBase { if (value[i].Id === component) { return ( Transform.Identity} + GetTransform={() => Transform.Identity} isTopMost={true} Scaling={1} ContainingCollectionView={this} DocumentView={undefined} />); @@ -111,6 +113,7 @@ export class CollectionDockingView extends CollectionViewBase { public static myLayout: any = null; + public rcs: Array = new Array(); private static _dragDiv: any = null; private static _dragParent: HTMLElement | null = null; private static _dragElement: HTMLDivElement; @@ -226,7 +229,6 @@ export class CollectionDockingView extends CollectionViewBase { .off('click') //unbind the current click handler .click(function () { //if (confirm('really close this?')) { - console.log("closing!") stack.remove(); //} }); @@ -241,19 +243,10 @@ export class CollectionDockingView extends CollectionViewBase { var containingDiv = "component_" + me.nextId(); container.getElement().html("
"); setTimeout(function () { - let divContainer = document.getElementById(containingDiv) as HTMLDivElement; - if (divContainer) { - let props: DockingProps = { - ContainingDiv: containingDiv, - Document: state.doc, - Container: container, - CollectionDockingView: me, - HtmlElement: divContainer, - } - ReactDOM.render((), divContainer); - if (CollectionDockingView.myLayout._maxstack) { - CollectionDockingView.myLayout._maxstack.click(); - } + state.rc = new RenderClass(containingDiv, state.doc, me, container); + me.rcs.push(state.rc); + if (CollectionDockingView.myLayout._maxstack != null) { + CollectionDockingView.myLayout._maxstack.click(); } }, 0); }); @@ -267,8 +260,8 @@ export class CollectionDockingView extends CollectionViewBase { const value: Document[] = Document.GetData(fieldKey, ListField, []); // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes. var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1; - var w = Document.GetNumber(KeyStore.Width, 0) / s; - var h = Document.GetNumber(KeyStore.Height, 0) / s; + var w = Document.GetData(KeyStore.Width, NumberField, Number(0)) / s; + var h = Document.GetData(KeyStore.Height, NumberField, Number(0)) / s; var chooseLayout = () => { if (!CollectionDockingView.UseGoldenLayout) @@ -276,54 +269,60 @@ export class CollectionDockingView extends CollectionViewBase { } return ( -