From 30986620c34c93e12509b2875e90cf5876838403 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Mon, 18 Feb 2019 18:52:30 -0500 Subject: transforms --- src/client/views/collections/CollectionDockingView.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/collections/CollectionDockingView.tsx') 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/CollectionDockingView.tsx') 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 ( - return { this._panelWidth = r.entry.width; this._panelHeight = r.entry.height; })}> diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index ac14811a5..fe2fc42ad 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -21,6 +21,7 @@ import "./CollectionFreeFormView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import React = require("react"); +import { DocumentManager } from "../DocumentManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -191,7 +192,14 @@ export class CollectionFreeFormView extends CollectionViewBase { ContentScaling={this.noScaling} PanelWidth={doc.Width} PanelHeight={doc.Height} - ContainingCollectionView={this.props.CollectionView} />); + ContainingCollectionView={this.props.CollectionView} + focus={(doc: Document, x: number, y: number) => { + //set pan of colleciton freeform and then call parent + console.log("calling...") + DocumentManager.Instance.centerNode(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) + this.props.focus(this.props.Document, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) + }} + />); }) } return null; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 38217d7c4..4eaf585ce 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -211,7 +211,9 @@ export class CollectionSchemaView extends CollectionViewBase { ContentScaling={this.getContentScaling} PanelWidth={this.getPanelWidth} PanelHeight={this.getPanelHeight} - ContainingCollectionView={this.props.CollectionView} /> + ContainingCollectionView={this.props.CollectionView} + focus={(doc, x, y) => this.props.focus(this.props.Document, x, y)} + /> } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 03e1f1fa4..e6a8d2448 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -30,7 +30,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { return ``; + isTopMost={isTopMost} BackgroundView={BackgroundView} focus={focus}/>`; } public active = () => { var isSelected = this.props.isSelected(); diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index e38258e0b..d9e43c0dc 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -23,6 +23,7 @@ export interface CollectionViewProps { bindings: any; panelWidth: () => number; panelHeight: () => number; + focus: (doc: Document, x: number, y: number) => void; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 21f64ef35..90699cd2e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -36,6 +36,7 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; + focus: (doc: Document, x: number, y: number) => void; } export interface JsxArgs extends DocumentViewProps { Keys: { [name: string]: Key } @@ -184,7 +185,7 @@ export class DocumentView extends React.Component { //TODO Monika @action Center = (e: React.MouseEvent): void => { - DocumentManager.Instance.centerNode(this) + this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0)) } @action @@ -265,7 +266,8 @@ export class DocumentView extends React.Component { ...this.props, isSelected: this.isSelected, select: this.select, - documentSize: this.size + documentSize: this.size, + focus: this.props.focus }; for (const key of this.layoutKeys) { this._documentBindings[key.Name + "Key"] = key; // this maps string values of the form Key to an actual key Kestore.keyname e.g, "DataKey" => KeyStore.Data -- cgit v1.2.3-70-g09d2 From e058c3261b63530f30998ad61e6fb023fcc480af Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Sat, 2 Mar 2019 17:15:10 -0500 Subject: focus --- src/client/views/DocumentManager.tsx | 283 --------------------- src/client/views/Main.tsx | 2 - src/client/views/TempTreeView.scss | 13 - src/client/views/TempTreeView.tsx | 41 --- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 8 +- .../views/collections/CollectionSchemaView.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 37 +-- 8 files changed, 8 insertions(+), 382 deletions(-) delete mode 100644 src/client/views/DocumentManager.tsx delete mode 100644 src/client/views/TempTreeView.scss delete mode 100644 src/client/views/TempTreeView.tsx (limited to 'src/client/views/collections/CollectionDockingView.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx deleted file mode 100644 index a53ed4a91..000000000 --- a/src/client/views/DocumentManager.tsx +++ /dev/null @@ -1,283 +0,0 @@ -import React = require('react') -import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; -import { DocumentView } from './nodes/DocumentView'; -import { Document } from "../../fields/Document" -import { CollectionFreeFormView } from './collections/CollectionFreeFormView'; -import { KeyStore } from '../../fields/KeyStore'; -import { CollectionViewBase } from './collections/CollectionViewBase'; -import { CollectionViewType, CollectionView } from './collections/CollectionView'; - - -export class DocumentManager { - - //global holds all of the nodes (regardless of which collection they're in) - @observable - public DocumentViews: DocumentView[] = []; - - // singleton instance - private static _instance: DocumentManager; - - // create one and only one instance of NodeManager - public static get Instance(): DocumentManager { - return this._instance || (this._instance = new this()); - } - - //private constructor so no other class can create a nodemanager - private constructor() { - // this.DocumentViews = new Array(); - } - - public getDocumentView(toFind: Document): DocumentView | null { - - let toReturn: DocumentView | null; - toReturn = null; - - //gets document view that is in a freeform canvas collection - DocumentManager.Instance.DocumentViews.map(view => { - let doc = view.props.Document; - // if (view.props.ContainingCollectionView instanceof CollectionFreeFormView) { - // if (Object.is(doc, toFind)) { - // toReturn = view; - // return; - // } - // } - - if (Object.is(doc, toFind)) { - toReturn = view; - return; - } - - }) - - return (toReturn); - } - - // public getDocumentViewFreeform2(toFind: Document): DocumentView | null { - - // let toReturn: DocumentView | null; - // toReturn = null; - - // //gets document view that is in a freeform canvas collection - // DocumentManager.Instance.DocumentViews.map(view => { - // let doc = view.props.Document; - // if (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // if (Object.is(doc, toFind)) { - // console.log("finding view") - // toReturn = view; - // return; - // } - // } - // }) - - // return (toReturn); - // } - - public getCollectionView(toFind: Document): DocumentView | null { - - let toReturn: DocumentView | null; - toReturn = null; - - //gets document view that is in a freeform canvas collection - DocumentManager.Instance.DocumentViews.map(view => { - let doc = view.props.Document; - if (view instanceof CollectionView) { - console.log("finding view") - if (Object.is(doc, toFind)) { - toReturn = view; - return; - } - } - }) - - return (toReturn); - } - - // @action - // public centerNode2(doc: Document | DocumentView): any { - // //console.log(doc.Title) - // //gets document view that is in freeform collection - - // let docView: DocumentView | null; - - // if (doc instanceof Document) { - // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - // } - // else { - // docView = doc - // } - - // let scale: number; - // let XView: number; - // let YView: number; - - // //if the view exists in a freeform collection - // if (docView) { - // let { width, height } = docView.size(); - - // //base case: parent of parent does not exist - // if (!docView.props.ContainingCollectionView) { - // scale = docView.props.ScreenToLocalTransform().Scale - // let doc = docView.props.Document; - // console.log("hello") - // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2) - // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2) - // //set x and y view of parent - // if (docView instanceof CollectionView) { - // console.log("here") - // DocumentManager.Instance.setViewportXY(docView, XView, YView) - // } - // } - // //parent is not main, parent is centered and calls itself - // else { - // if (true) { - // //view of parent - // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - // let doc = docView.props.Document - - // //TODO: make sure to test if the parent view is a freeform view. if not, just skip to the next level - // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // //scale of parent - // console.log("scale: " + scale) - // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - // // //node.Parent.setViewportXY(XView, YView); - // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - // } - // else { return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) } - // } - // else { - // // return DocumentManager.Instance.centerNode2(docView.props.ContainingCollectionView.props.Document) - // } - // } - // } - // } - - // @action - // public centerNode4(doc: Document | DocumentView): any { - // //console.log(doc.Title) - // //gets document view that is in freeform collection - - // console.log("things are happening") - - // let docView: DocumentView | null; - - // if (doc instanceof Document) { - // console.log(doc.Title) - // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - // } - // else { - // docView = doc - // console.log(docView.props.Document.Title) - // } - - // let scale: number; - // let XView: number; - // let YView: number; - - // //if the view exists in a freeform collection - // if (docView) { - // let { width, height } = docView.size(); - - // if (docView.props.ContainingCollectionView) { - // //view of parent - // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - // let doc = docView.props.Document - - // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // //scale of parent - // XView = (-doc.GetNumber(KeyStore.X, 0) * scale) - (width * scale / 2); - // YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) - (height * scale / 2); - // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - // return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) - // } - // else { return DocumentManager.Instance.centerNode4(docView.props.ContainingCollectionView.props.Document) } - // } - // } - // } - - @action - public centerNode(doc: Document | DocumentView, collection: Document): void { - //console.log(doc.Title) - //gets document view that is in freeform collection - let docView: DocumentView | null; - - if (doc instanceof Document) { - console.log(doc.Title) - docView = DocumentManager.Instance.getDocumentView(doc) - } - else { - docView = doc - console.log(docView.props.Document.Title) - } - - let scale: number; - let XView: number; - let YView: number; - - if (docView) { - let { width, height } = docView.size(); - let scale = docView.props.Document.GetNumber(KeyStore.Scale, 1); - let doc = docView.props.Document; - let x = doc.GetNumber(KeyStore.X, 0); - let y = doc.GetNumber(KeyStore.X, 0); - - if (x && y) { - XView = (-x * scale) - (width * scale / 2); - YView = (-y * scale) - (height * scale / 2); - DocumentManager.Instance.setViewportXY(collection, XView, YView) - } - - } - } - - // @action - // public centerNode3(doc: Document | DocumentView): any { - // //console.log(doc.Title) - // //gets document view that is in freeform collection - - // let docView: DocumentView | null; - - // if (doc instanceof Document) { - // docView = DocumentManager.Instance.getDocumentViewFreeform(doc) - // } - // else { - // docView = doc - // } - - // let scale: number; - // let XView: number; - // let YView: number; - - // //if the view exists in a freeform collection - // if (docView) { - // let { width, height } = docView.size(); - - // //parent is not main, parent is centered and calls itself - // if (docView.props.ContainingCollectionView) { - // //view of parent - // let scale = docView.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1) - // let doc = docView.props.Document - - // if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { - // //scale of parent - // XView = doc.GetNumber(KeyStore.X, 0) - width / 2 - // YView = doc.GetNumber(KeyStore.Y, 0) - height / 2 - // // console.log("X location: " + XView) - // // console.log("Y location: " + YView) - // DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - // return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) - // } - // else { return DocumentManager.Instance.centerNode3(docView.props.ContainingCollectionView.props.Document) } - // } - // } - // } - - - @action - private setViewportXY(collection: Document, x: number, y: number) { - collection.SetNumber(KeyStore.PanX, x); - collection.SetNumber(KeyStore.PanY, y); - } -} \ No newline at end of file diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 2e1deebd1..ce23d9ffb 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -5,7 +5,6 @@ import * as ReactDOM from 'react-dom'; import { Document } from '../../fields/Document'; import { KeyStore } from '../../fields/KeyStore'; import "./Main.scss"; -import { TempTreeView } from './../views/TempTreeView'; import { MessageStore } from '../../server/Message'; import { Utils } from '../../Utils'; import { Documents } from '../documents/Documents'; @@ -81,7 +80,6 @@ Documents.initProtos(mainDocId, (res?: Document) => { focus={() => { }} ContainingCollectionView={undefined} /> -
diff --git a/src/client/views/TempTreeView.scss b/src/client/views/TempTreeView.scss deleted file mode 100644 index 0a6342ca6..000000000 --- a/src/client/views/TempTreeView.scss +++ /dev/null @@ -1,13 +0,0 @@ -.temptree { - background: #ADD8E6; - width: 300px; - height: 200px; - z-index: 100; - position: fixed; - bottom: 0px; - right: 0px; - .list { - padding: 5px; - color: #1e5162; - } -} \ No newline at end of file diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx deleted file mode 100644 index bd73ef887..000000000 --- a/src/client/views/TempTreeView.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { action, observable, computed } from "mobx"; -import React = require("react"); -import { observer } from "mobx-react"; -import { Document } from "../../fields/Document"; -import { ListField } from "../../fields/ListField"; -import "./TempTreeView.scss" -import { DocumentManager } from "./DocumentManager"; -import { KeyStore } from "../../fields/KeyStore"; - - -@observer -export class TempTreeView extends React.Component { - - @action - onClick(doc: Document) { - - let view = DocumentManager.Instance.getDocumentView(doc); - if (view != null) { - // DocumentManager.Instance.centerNode(view); - doc = view.props.Document - view.props.focus(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) - } - } - - render() { - return ( -
-
- {DocumentManager.Instance.DocumentViews.map(doc => { - return ( -
{ this.onClick(doc.props.Document) }}> - {doc.props.Document.Title} -
- ) - } - )} -
-
- ); - } -} \ No newline at end of file diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index d5b888e28..6b7c2a191 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -272,7 +272,7 @@ export class DockedFrameRenderer extends React.Component { ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} SelectOnLoad={false} - focus={(doc: Document, x: number, y: number) => { }} + focus={(doc: Document) => { }} ContainingCollectionView={undefined} /> diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index fc6021a6e..1b39dcae5 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -22,7 +22,6 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { Documents } from "../../documents/Documents"; import React = require("react"); -import { DocumentManager } from "../DocumentManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? @observer @@ -224,7 +223,7 @@ export class CollectionFreeFormView extends CollectionViewBase { const lvalue = this.props.Document.GetT>(this.props.fieldKey, ListField); if (lvalue && lvalue != FieldWaiting) { return lvalue.Data.map(doc => { - return (): void => { + onBlur = (e: React.FocusEvent): void => { this._previewCursorVisible = false; } @@ -288,9 +287,6 @@ export class CollectionFreeFormView extends CollectionViewBase { const panx: number = -this.props.Document.GetNumber(KeyStore.PanX, 0); const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0); - // const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0) + this.centeringShiftX; - // const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0) + this.centeringShiftY; - console.log("center:", this.getLocalTransform().transformPoint(this.centeringShiftX, this.centeringShiftY)); return (
{ } + render() { const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) const children = this.props.Document.GetList(this.props.fieldKey, []); @@ -192,7 +194,7 @@ export class CollectionSchemaView extends CollectionViewBase { PanelWidth={this.getPanelWidth} PanelHeight={this.getPanelHeight} ContainingCollectionView={this.props.CollectionView} - focus={(doc) => this.props.focus(this.props.Document)} + focus={this.focusDocument} />
} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index a624c1d7f..9244ca08d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -21,7 +21,6 @@ import { KeyValueBox } from "./KeyValueBox" import { WebBox } from "../nodes/WebBox"; import "./DocumentView.scss"; import React = require("react"); -import { DocumentManager } from "../DocumentManager"; import { TextField } from "../../../fields/TextField"; import { Utils } from "../../../Utils"; import { CollectionViewProps } from "../collections/CollectionViewBase"; @@ -40,7 +39,7 @@ export interface DocumentViewProps { ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; - focus: (doc: Document, x: number, y: number) => void; + focus: (doc: Document) => void; SelectOnLoad: boolean; } export interface JsxArgs extends DocumentViewProps { @@ -191,12 +190,6 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } - //TODO Monika - @action - Center = (e: React.MouseEvent): void => { - this.props.focus(this.props.Document, this.props.Document.GetNumber(KeyStore.X, 0), this.props.Document.GetNumber(KeyStore.Y, 0)) - } - @action onContextMenu = (e: React.MouseEvent): void => { e.stopPropagation(); @@ -209,20 +202,11 @@ export class DocumentView extends React.Component { ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.addItem({ description: "Fields", event: this.fieldsClicked }) - ContextMenu.Instance.addItem({ description: "Center", event: this.Center }) + ContextMenu.Instance.addItem({ description: "Center", event: () => this.props.focus(this.props.Document) }) ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }) ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) - ContextMenu.Instance.addItem({ - description: "center", event: () => { - if (this.props.ContainingCollectionView) { - let doc = this.props.ContainingCollectionView.props.Document; - doc.SetNumber(KeyStore.PanX, this.props.Document.GetNumber(KeyStore.X, 0) + (this.props.Document.GetNumber(KeyStore.Width, 0) / 2)) - doc.SetNumber(KeyStore.PanY, this.props.Document.GetNumber(KeyStore.Y, 0) + (this.props.Document.GetNumber(KeyStore.Height, 0) / 2)) - } - } - }) //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) if (!this.topMost) { @@ -245,23 +229,6 @@ export class DocumentView extends React.Component { /> } - //adds doc to global list - componentDidMount: () => void = () => { - runInAction(() => { - DocumentManager.Instance.DocumentViews.push(this); - }) - } - - //removes doc from global list - componentWillUnmount: () => void = () => { - runInAction(() => { - for (let node of DocumentManager.Instance.DocumentViews) { - if (Object.is(node, this)) { - DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); - } - } - }) - } isSelected = () => { return SelectionManager.IsSelected(this); } -- cgit v1.2.3-70-g09d2 From 60f2458ca0faaa8bc5f5d333034cea5fdd513bf6 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Sat, 2 Mar 2019 17:30:01 -0500 Subject: cleaning pt2 --- src/client/views/ContextMenuItem.tsx | 1 - src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/collections/CollectionDockingView.tsx | 5 +---- src/client/views/collections/CollectionSchemaView.tsx | 4 ++-- src/client/views/collections/CollectionView.tsx | 2 +- src/client/views/collections/CollectionViewBase.tsx | 6 +++--- src/client/views/nodes/DocumentView.tsx | 6 +----- src/client/views/nodes/FieldView.tsx | 2 +- 8 files changed, 10 insertions(+), 18 deletions(-) (limited to 'src/client/views/collections/CollectionDockingView.tsx') diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 8f00f8b3d..91fc96c19 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -1,5 +1,4 @@ import React = require("react"); -import { ContextMenu } from "./ContextMenu"; export interface ContextMenuProps { description: string; diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 975a125f7..9fd73a33b 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -1,4 +1,4 @@ -import { observable, computed, action } from "mobx"; +import { observable, computed } from "mobx"; import React = require("react"); import { SelectionManager } from "../util/SelectionManager"; import { observer } from "mobx-react"; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6b7c2a191..c51fba908 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,13 +1,11 @@ import * as GoldenLayout from "golden-layout"; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; -import { action, computed, observable, reaction } from "mobx"; +import { action, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import * as ReactDOM from 'react-dom'; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; -import { ListField } from "../../../fields/ListField"; -import { NumberField } from "../../../fields/NumberField"; import Measure from "react-measure"; import { FieldId, Opt, Field } from "../../../fields/Field"; import { Utils } from "../../../Utils"; @@ -17,7 +15,6 @@ import { DocumentView } from "../nodes/DocumentView"; import "./CollectionDockingView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import React = require("react"); -import { changeDependenciesStateTo0 } from "mobx/lib/internal"; import { SubCollectionViewProps } from "./CollectionViewBase"; @observer diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index bf06dd5e9..8c4a1bf2e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,11 +1,11 @@ import React = require("react") -import { action, observable, trace } from "mobx"; +import { action, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; -import { Field, FieldWaiting } from "../../../fields/Field"; +import { Field } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 948f97889..eb502f611 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,4 +1,4 @@ -import { action, computed, observable } from "mobx"; +import { action } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 51dd50d39..73d7acefb 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -1,12 +1,12 @@ -import { action, computed } from "mobx"; +import { action } from "mobx"; import { Document } from "../../../fields/Document"; import { ListField } from "../../../fields/ListField"; import React = require("react"); import { KeyStore } from "../../../fields/KeyStore"; -import { Opt, FieldWaiting } from "../../../fields/Field"; +import { FieldWaiting } from "../../../fields/Field"; import { undoBatch } from "../../util/UndoManager"; import { DragManager } from "../../util/DragManager"; -import { DocumentView, JsxArgs } from "../nodes/DocumentView"; +import { DocumentView } from "../nodes/DocumentView"; import { Documents, DocumentOptions } from "../../documents/Documents"; import { Key } from "../../../fields/Key"; import { Transform } from "../../util/Transform"; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 6ee313522..2fc00f15d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,6 +1,5 @@ -import { action, computed, runInAction } from "mobx"; +import { action, computed } from "mobx"; import { observer } from "mobx-react"; -import { observable } from "mobx"; import { Document } from "../../../fields/Document"; import { Field, FieldWaiting, Opt } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; @@ -21,9 +20,6 @@ import { KeyValueBox } from "./KeyValueBox" import { WebBox } from "../nodes/WebBox"; import "./DocumentView.scss"; import React = require("react"); -import { TextField } from "../../../fields/TextField"; -import { Utils } from "../../../Utils"; -import { CollectionViewProps } from "../collections/CollectionViewBase"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index f372258f8..9e63006d1 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -1,7 +1,7 @@ import React = require("react") import { observer } from "mobx-react"; import { computed } from "mobx"; -import { Field, Opt, FieldWaiting, FieldValue } from "../../../fields/Field"; +import { Field, FieldWaiting, FieldValue } from "../../../fields/Field"; import { Document } from "../../../fields/Document"; import { TextField } from "../../../fields/TextField"; import { NumberField } from "../../../fields/NumberField"; -- cgit v1.2.3-70-g09d2 From 22d7f22a60a17373a6e453e09cc616f651c11a9e Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 7 Mar 2019 14:37:25 -0500 Subject: fixed flicker when activating a PDF --- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionFreeFormView.scss | 1 + src/client/views/nodes/KeyValueBox.tsx | 23 +--- src/client/views/nodes/PDFNode.scss | 10 +- src/client/views/nodes/PDFNode.tsx | 151 +++++++++++---------- src/fields/ListField.ts | 1 + 6 files changed, 91 insertions(+), 97 deletions(-) (limited to 'src/client/views/collections/CollectionDockingView.tsx') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c51fba908..f01c538e6 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -35,6 +35,7 @@ export class CollectionDockingView extends React.Component(); private _fullScreen: any = null; + private _flush: boolean = false; constructor(props: SubCollectionViewProps) { super(props); @@ -164,7 +165,6 @@ export class CollectionDockingView extends React.Component { if (this._flush) { diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index fb9394d59..f496517f5 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -3,6 +3,7 @@ .collectionfreeformview > .jsx-parser{ position:absolute; height: 100%; + width: 100%; } border-style: solid; diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx index e8ebd50be..ac8c949a9 100644 --- a/src/client/views/nodes/KeyValueBox.tsx +++ b/src/client/views/nodes/KeyValueBox.tsx @@ -1,37 +1,18 @@ -import { IReactionDisposer } from 'mobx'; import { observer } from "mobx-react"; -import { EditorView } from 'prosemirror-view'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app import { Document } from '../../../fields/Document'; -import { Opt, FieldWaiting } from '../../../fields/Field'; +import { FieldWaiting } from '../../../fields/Field'; import { KeyStore } from '../../../fields/KeyStore'; import { FieldView, FieldViewProps } from './FieldView'; -import { KeyValuePair } from "./KeyValuePair"; import "./KeyValueBox.scss"; +import { KeyValuePair } from "./KeyValuePair"; import React = require("react") @observer export class KeyValueBox extends React.Component { public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) } - private _ref: React.RefObject; - private _editorView: Opt; - private _reactionDisposer: Opt; - - - constructor(props: FieldViewProps) { - super(props); - - this._ref = React.createRef(); - } - - - - shouldComponentUpdate() { - return false; - } - onPointerDown = (e: React.PointerEvent): void => { if (e.buttons === 1 && this.props.isSelected()) { diff --git a/src/client/views/nodes/PDFNode.scss b/src/client/views/nodes/PDFNode.scss index f4935cba9..18ebca952 100644 --- a/src/client/views/nodes/PDFNode.scss +++ b/src/client/views/nodes/PDFNode.scss @@ -1,9 +1,15 @@ .react-pdf__Page { transform-origin: left top; - //transform: scale(0.2, 0.2); position: absolute; } -.pdfButton-Tray { +.react-pdf__Document { + position: absolute; +} +.pdfNode-buttonTray { position:absolute; z-index: 25; +} +.pdfNode-contentContainer { + position: absolute; + transform-origin: "left top"; } \ No newline at end of file diff --git a/src/client/views/nodes/PDFNode.tsx b/src/client/views/nodes/PDFNode.tsx index b6829f086..648bd3e62 100644 --- a/src/client/views/nodes/PDFNode.tsx +++ b/src/client/views/nodes/PDFNode.tsx @@ -1,4 +1,4 @@ -import { action, observable, _interceptReads } from 'mobx'; +import { action, observable, _interceptReads, computed } from 'mobx'; import { observer } from "mobx-react"; import Measure from "react-measure"; import 'react-image-lightbox/style.css'; @@ -76,26 +76,29 @@ export class PDFNode extends React.Component { private _highlightTool = React.createRef(); //highlighter button reference private _highlightToolOn: boolean = false; + private _pdfCanvas: any; - @observable perPage: Object[] = []; //stores pageInfo - @observable pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno + @observable private _perPageInfo: Object[] = []; //stores pageInfo + @observable private _pageInfo: any = { area: [], divs: [], anno: [] }; //divs is array of objects linked to anno - @observable private page: number = 1; //default is the first page. - @observable private numPage: number = 1; //default number of pages - private _pdfCanvas: any; + @observable private _currAnno: any = [] + @observable private _page: number = 1; //default is the first page. + @observable private _numPages: number = 1; //default number of pages + @observable private _interactive: boolean = false; + @observable private _loaded: boolean = false; /** * for pagination backwards */ @action onPageBack = () => { - if (this.page > 1) { - this.page -= 1; - this.currAnno = []; - this.perPage[this.page] = this.pageInfo - this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this.perPage[this.page - 1]) { - this.pageInfo = this.perPage[this.page - 1]; + if (this._page > 1) { + this._page -= 1; + this._currAnno = []; + this._perPageInfo[this._page] = this._pageInfo + this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default + if (this._perPageInfo[this._page - 1]) { + this._pageInfo = this._perPageInfo[this._page - 1]; } this.saveThumbnail(); } @@ -106,13 +109,13 @@ export class PDFNode extends React.Component { */ @action onPageForward = () => { - if (this.page < this.numPage) { - this.page += 1; - this.currAnno = []; - this.perPage[this.page - 2] = this.pageInfo; - this.pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default - if (this.perPage[this.page - 1]) { - this.pageInfo = this.perPage[this.page - 1]; + if (this._page < this._numPages) { + this._page += 1; + this._currAnno = []; + this._perPageInfo[this._page - 2] = this._pageInfo; + this._pageInfo = { area: [], divs: [], anno: [] }; //resets the object to default + if (this._perPageInfo[this._page - 1]) { + this._pageInfo = this._perPageInfo[this._page - 1]; } this.saveThumbnail(); } @@ -196,7 +199,7 @@ export class PDFNode extends React.Component { } } } - this.pageInfo.divs.push(obj); + this._pageInfo.divs.push(obj); } document.designMode = "off"; @@ -224,27 +227,26 @@ export class PDFNode extends React.Component { /** * when the cursor enters the highlight, it pops out annotation. ONLY WORKS FOR SINGLE DIV LINES */ - @observable private currAnno: any = [] @action onEnter = (e: any) => { let span: HTMLSpanElement = e.toElement; let index: any; - this.pageInfo.divs.forEach((obj: any) => { + this._pageInfo.divs.forEach((obj: any) => { obj.spans.forEach((element: any) => { if (element == span) { if (!index) { - index = this.pageInfo.divs.indexOf(obj); + index = this._pageInfo.divs.indexOf(obj); } } }) }) - if (this.pageInfo.anno.length >= index + 1) { - if (this.currAnno.length == 0) { - this.currAnno.push(this.pageInfo.anno[index]); + if (this._pageInfo.anno.length >= index + 1) { + if (this._currAnno.length == 0) { + this._currAnno.push(this._pageInfo.anno[index]); } } else { - if (this.currAnno.length == 0) { //if there are no current annotation + if (this._currAnno.length == 0) { //if there are no current annotation let div = span.offsetParent; //@ts-ignore let divX = div.style.left @@ -253,9 +255,9 @@ export class PDFNode extends React.Component { //slicing "px" from the end divX = divX.slice(0, divX.length - 2); //gets X of the DIV element (parent of Span) divY = divY.slice(0, divY.length - 2); //gets Y of the DIV element (parent of Span) - let annotation = - this.pageInfo.anno.push(annotation); - this.currAnno.push(annotation); + let annotation = + this._pageInfo.anno.push(annotation); + this._currAnno.push(annotation); } } @@ -314,7 +316,7 @@ export class PDFNode extends React.Component { if (this._mainDiv.current) { let sticky = - this.pageInfo.area.push(sticky); + this._pageInfo.area.push(sticky); } this._toolOn = false; } @@ -384,19 +386,7 @@ export class PDFNode extends React.Component { } - /** - * renders whole lot of shets, including pdf, stickies, and annotations. - */ - - reHighlight = () => { - let div = document.getElementsByClassName("react-pdf__Page__textContent"); - if (div) { - - } - - } - @observable _interactive: boolean = false; @action saveThumbnail = () => { @@ -413,6 +403,7 @@ export class PDFNode extends React.Component { }, 1000); } + @action onLoaded = (page: any) => { if (this._mainDiv.current) { this._mainDiv.current.childNodes.forEach((element) => { @@ -429,10 +420,11 @@ export class PDFNode extends React.Component { } }) } - this.numPage = page.transport.numPages - if (this.perPage.length == 0) { //Makes sure it only runs once - this.perPage = [...Array(this.numPage)] + this._numPages = page.transport.numPages + if (this._perPageInfo.length == 0) { //Makes sure it only runs once + this._perPageInfo = [...Array(this._numPages)] } + this._loaded = true; } @action @@ -448,9 +440,11 @@ export class PDFNode extends React.Component { this.saveThumbnail(); } } - makeUIButtons() { + + @computed + get uIButtons() { return ( -
+
@@ -462,32 +456,45 @@ export class PDFNode extends React.Component {
); } - makePdfRenderer() { - let proxy = this.makeImageProxyRenderer(); + + @computed + get pdfContent() { + const renderHeight = 2400; + let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); + let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; + return
+ + + {({ measureRef }) => +
+ +
+ } + + +
; + } + + @computed + get pdfRenderer() { + let proxy = this._loaded ? (null) : this.imageProxyRenderer; let pdfUrl = this.props.doc.GetT(this.props.fieldKey, PDFField); if ((!this._interactive && proxy) || !pdfUrl || pdfUrl == FieldWaiting) { return proxy; } - const renderHeight = 2400; - let xf = this.props.doc.GetNumber(KeyStore.NativeHeight, 0) / renderHeight; return [ - this.pageInfo.area.filter(() => this.pageInfo.area).map((element: any) => element), - this.currAnno.map((element: any) => element), - this.makeUIButtons(), -
- - - {({ measureRef }) => -
- -
- } - - -
+ this._pageInfo.area.filter(() => this._pageInfo.area).map((element: any) => element), + this._currAnno.map((element: any) => element), + this.uIButtons, +
+ {this.pdfContent} + {proxy} +
]; } - makeImageProxyRenderer() { + + @computed + get imageProxyRenderer() { let field = this.props.doc.Get(KeyStore.Thumbnail); if (field) { let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" : @@ -496,13 +503,11 @@ export class PDFNode extends React.Component { } return (null); } + render() { return ( -
- {this.makePdfRenderer()} +
+ {this.pdfRenderer}
); } diff --git a/src/fields/ListField.ts b/src/fields/ListField.ts index 700600804..a71325a65 100644 --- a/src/fields/ListField.ts +++ b/src/fields/ListField.ts @@ -40,6 +40,7 @@ export class ListField extends BasicField { this.observeDisposer() } this.data = observable(value); + this.updateProxies(); this.observeList(); } -- cgit v1.2.3-70-g09d2