From e8bd54161e55b8ed429a3c99e05be8ea89653194 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Wed, 13 Feb 2019 15:31:29 -0500 Subject: nav beginning --- src/client/views/nodes/DocumentView.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d7ecc6d9d..3be8afda3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -16,6 +16,7 @@ import { ImageBox } from "../nodes/ImageBox"; import "./NodeView.scss"; import React = require("react"); import { Transform } from "../../util/Transform"; +import { DocumentManager } from "../DocumentManager"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? export interface DocumentViewProps { @@ -32,6 +33,9 @@ export interface DocumentViewProps { @observer export class DocumentView extends React.Component { + public Id: string = Utils.GenerateGuid(); + public tempTitle: string = "hello there" + protected _mainCont = React.createRef(); get MainContent() { return this._mainCont; @@ -69,6 +73,20 @@ export class DocumentView extends React.Component { return 1; } + //adds doc to global list + componentDidMount: () => void = () => { + DocumentManager.Instance.DocumentViews.push(this); + } + + //removes doc from global list + componentWillUnmount: () => void = () => { + for (let node of DocumentManager.Instance.DocumentViews) { + if (Object.is(node, this)) { + DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); + } + } + } + render() { let bindings = { ...this.props } as any; -- cgit v1.2.3-70-g09d2 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/util/Transform.ts | 7 ++ src/client/views/DocumentManager.tsx | 81 +++++++++++++++++++++- src/client/views/TempTreeView.tsx | 5 ++ .../views/collections/CollectionFreeFormView.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 19 ++++- src/client/views/nodes/NodeView.scss | 2 + src/temp.txt | 6 ++ 7 files changed, 118 insertions(+), 3 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/util/Transform.ts b/src/client/util/Transform.ts index 8ae3f837f..aa922f358 100644 --- a/src/client/util/Transform.ts +++ b/src/client/util/Transform.ts @@ -55,6 +55,13 @@ export class Transform { return this; } + //MONIKA + center = (x: number, y: number): Transform => { + this._translateX = x + this._translateY = y + return this; + } + preTransform = (transform: Transform): Transform => { this._translateX = transform._translateX + this._translateX * transform._scale; this._translateY = transform._translateY + this._translateY * transform._scale; diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index b69d40148..2ab643657 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -3,6 +3,9 @@ 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/Key'; +import { CollectionViewBase } from './collections/CollectionViewBase'; export class DocumentManager { @@ -29,19 +32,95 @@ export class DocumentManager { 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 getDocumentViewFreeform(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; + } + } }) return (toReturn); } - public centerNode(doc: DocumentView) { + public centerNode(doc: Document): any { + + //gets document view that is in freeform collection + let docView: DocumentView | null = this.getDocumentViewFreeform(doc) + + let scale: number; + let XView: number; + let YView: number; + let width: number; + let height: number; + + //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) + + //base case: parent does not exist (aka is parent) + if (docView.props.ContainingCollectionView == null) { + // scale = RootStore.Instance.MainNodeCollection.Scale; + // XView = (-node.X * scale) + (window.innerWidth / 2) - (node.Width * scale / 2); + // YView = (-node.Y * scale) + (window.innerHeight / 2) - (node.Height * scale / 2); + // RootStore.Instance.MainNodeCollection.SetViewportXY(XView, YView); + 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) + } + //parent is not main, parent is centered and calls itself + else { + if (docView.props.ContainingCollectionView.props.ContainingDocumentView != null) { + + let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeWidth, 0) + let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeHeight, 0) + + scale = docView.props.ContainingCollectionView.props.ContainingDocumentView.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.ContainingDocumentView.props.Document); + } + } + } + } + private setViewportXY(collection: CollectionViewBase, x: number, y: number) { + if (collection.props.ContainingDocumentView != null) { + collection.props.ContainingDocumentView.props.GetTransform().center(x, y) + } } public setPosition(doc: DocumentView) { diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index 8dd256c8a..5bb44fde2 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -17,13 +17,18 @@ export class TempTreeView extends React.Component{ let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { console.log(view.Id) + console.log(view.props.GetTransform().TranslateX) + console.log(view.props.Document.Title) if (view.props.ContainingCollectionView != undefined) { //console.log(view.props.ContainingCollectionView.Id) + // view.props.ContainingCollectionView } else { console.log("containing collection is undefined") } + + view.switchColor(); } } 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); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index bc27c424c..f653919cf 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,5 +1,6 @@ import { action, computed } from "mobx"; import { observer } from "mobx-react"; +import { observable } from "mobx"; import { Document } from "../../../fields/Document"; import { Opt, FieldWaiting } from "../../../fields/Field"; import { Key, KeyStore } from "../../../fields/Key"; @@ -38,7 +39,14 @@ export interface DocumentViewProps { export class DocumentView extends React.Component { public Id: string = Utils.GenerateGuid(); - public tempTitle: string = "hello there" + + @observable + public Border: string = "white" + + @action + public switchColor() { + this.Border = "red" + } private _mainCont = React.createRef(); get MainContent() { @@ -172,6 +180,12 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } + @action + Center = (e: React.MouseEvent): void => { + //DocumentManager.Instance.centerNode() + console.log("centering...") + } + @action onContextMenu = (e: React.MouseEvent): void => { if (!SelectionManager.IsSelected(this)) { @@ -193,6 +207,7 @@ export class DocumentView extends React.Component { e.stopPropagation(); ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ description: "Center", event: this.Center }) ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.addItem({ description: "Open Right", event: this.openRight }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) @@ -268,7 +283,7 @@ export class DocumentView extends React.Component { var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); var strheight = height > 0 ? height.toString() + "px" : "100%"; return ( -
Date: Wed, 13 Feb 2019 21:21:03 -0500 Subject: translate - need docview of collection? --- src/client/views/DocumentManager.tsx | 32 +++++++++++++++++++++----------- src/client/views/Main.tsx | 2 ++ src/client/views/nodes/DocumentView.tsx | 5 +++-- 3 files changed, 26 insertions(+), 13 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index 2ab643657..904ac0cce 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -71,10 +71,18 @@ export class DocumentManager { return (toReturn); } - public centerNode(doc: Document): any { - + public centerNode(doc: Document | DocumentView): any { + //console.log(doc.Title) //gets document view that is in freeform collection - let docView: DocumentView | null = this.getDocumentViewFreeform(doc) + + let docView: DocumentView | null; + + if (doc instanceof Document) { + docView = this.getDocumentViewFreeform(doc) + } + else { + docView = doc + } let scale: number; let XView: number; @@ -88,6 +96,7 @@ export class DocumentManager { width = docView.props.Document.GetNumber(KeyStore.NativeWidth, 0) height = docView.props.Document.GetNumber(KeyStore.NativeHeight, 0) + //base case: parent does not exist (aka is parent) if (docView.props.ContainingCollectionView == null) { // scale = RootStore.Instance.MainNodeCollection.Scale; @@ -100,26 +109,27 @@ export class DocumentManager { } //parent is not main, parent is centered and calls itself else { - if (docView.props.ContainingCollectionView.props.ContainingDocumentView != null) { - - let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeWidth, 0) - let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document.GetNumber(KeyStore.NativeHeight, 0) + console.log("parent does exist") + if (docView.props.ContainingCollectionView.props.BackgroundView != 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.ContainingDocumentView.props.GetTransform().Scale + 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) - return this.centerNode(docView.props.ContainingCollectionView.props.ContainingDocumentView.props.Document); + return this.centerNode(docView.props.ContainingCollectionView.props.BackgroundView.props.Document); } } } } private setViewportXY(collection: CollectionViewBase, x: number, y: number) { - if (collection.props.ContainingDocumentView != null) { - collection.props.ContainingDocumentView.props.GetTransform().center(x, y) + if (collection.props.BackgroundView != null) { + collection.props.BackgroundView.props.GetTransform().center(x, y) } } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 17abceedf..5d23f5439 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -15,6 +15,7 @@ import { DocumentView } from './../views/nodes/DocumentView'; import { CompileScript } from './../util/Scripting'; import { TempTreeView } from './../views/TempTreeView'; import { Transform } from '../util/Transform'; +import { DocumentManager } from './DocumentManager'; configure({ @@ -78,6 +79,7 @@ mainNodes.Data.push(doc6); //} //); + ReactDOM.render((
{ @action Center = (e: React.MouseEvent): void => { - //DocumentManager.Instance.centerNode() - console.log("centering...") + DocumentManager.Instance.centerNode(this.props.Document) + DocumentManager.Instance.centerNode(this) + //console.log(this.props.ContainingCollectionView.props.) } @action -- cgit v1.2.3-70-g09d2 From f2bdae28c9fcd5306b0d14e1bbfafc2bb232aed8 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Tue, 19 Feb 2019 19:01:28 -0500 Subject: got width and height!!! --- src/client/views/DocumentManager.tsx | 57 +++++++--------------- src/client/views/Main.tsx | 4 +- src/client/views/TempTreeView.scss | 2 +- src/client/views/TempTreeView.tsx | 26 ++++------ .../views/collections/CollectionViewBase.tsx | 1 - src/client/views/nodes/DocumentView.tsx | 22 ++++++--- 6 files changed, 45 insertions(+), 67 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index 81231bf13..3aa185dd3 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -12,7 +12,7 @@ export class DocumentManager { //global holds all of the nodes (regardless of which collection they're in) @observable - public DocumentViews: DocumentView[]; + public DocumentViews: DocumentView[] = []; // singleton instance private static _instance: DocumentManager; @@ -24,7 +24,7 @@ export class DocumentManager { //private constructor so no other class can create a nodemanager private constructor() { - this.DocumentViews = new Array(); + // this.DocumentViews = new Array(); } public getDocumentView(toFind: Document): DocumentView | null { @@ -91,17 +91,12 @@ export class DocumentManager { let height: number; //if the view exists in a freeform collection - if (docView != null) { - //view.props.GetTransform().TranslateX - width = docView.props.Document.GetNumber(KeyStore.Width, 0) - height = docView.props.Document.GetNumber(KeyStore.Height, 0) + if (docView && docView.MainContent.current) { + width = docView.MainContent.current.clientWidth + height = docView.MainContent.current.clientHeight //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); - // YView = (-node.Y * scale) + (window.innerHeight / 2) - (node.Height * scale / 2); - // RootStore.Instance.MainNodeCollection.SetViewportXY(XView, YView); scale = docView.props.ScreenToLocalTransform().Scale XView = (-docView.props.ScreenToLocalTransform().TranslateX * scale) + (window.innerWidth / 2) - (width * scale / 2) YView = (-docView.props.ScreenToLocalTransform().TranslateY * scale) + (window.innerHeight / 2) - (height * scale / 2) @@ -109,37 +104,17 @@ export class DocumentManager { } //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.DocumentForCollection != null) { - console.log("view of parent exists") + if (docView.props.ContainingCollectionView.props.ContainingDocumentView && docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current) { + //view of parent + let tempCollectionView = docView.props.ContainingCollectionView.props.ContainingDocumentView - let tempView = this.getDocumentView(docView.props.ContainingCollectionView.props.DocumentForCollection) + let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientWidth + let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientHeight - //console.log(docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0)) - - // let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) - // let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0) - - let parentWidth = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) - let parentHeight = docView.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Height, 0) - //_htmlElement!.clientWidth - - // console.log("window width: " + window.innerWidth + ", window height: " + window.innerHeight) - // console.log("parent width: " + parentWidth + ", parent height: " + parentHeight) - - - if (tempView != null) { - console.log("View is NOT null") - scale = tempView.props.ScreenToLocalTransform().Scale - - parentWidth *= scale - parentHeight *= scale - - console.log("window width: " + window.innerWidth + ", window height: " + window.innerHeight) - console.log("parent width: " + parentWidth + ", parent height: " + parentHeight) + //make sure to test if the parent view is a freeform view + if (tempCollectionView) { + //scale of parent + scale = tempCollectionView.props.ScreenToLocalTransform().Scale XView = (-docView.props.ScreenToLocalTransform().TranslateX * scale) + (parentWidth / 2) - (width * scale / 2); YView = (-docView.props.ScreenToLocalTransform().TranslateY * scale) + (parentHeight / 2) - (height * scale / 2); @@ -153,6 +128,10 @@ export class DocumentManager { } } + parentIsFreeform(node: any): boolean { + return node.props.ContainingCollectionView instanceof CollectionFreeFormView + } + private setViewportXY(collection: CollectionViewBase, x: number, y: number) { if (collection.props.BackgroundView != null) { collection.props.ScreenToLocalTransform().center(x, y) diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 0532cbc1f..5f7590f8d 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -72,11 +72,11 @@ let mainNodes = mainContainer.GetOrCreate>(KeyStore.Data, Li // mainNodes.Data.push(doc6); // mainNodes.Data.push(doc2); mainNodes.Data.push(doc4); -mainNodes.Data.push(doc3); +// 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.scss b/src/client/views/TempTreeView.scss index c50b5be2c..fe8cf4da8 100644 --- a/src/client/views/TempTreeView.scss +++ b/src/client/views/TempTreeView.scss @@ -1,7 +1,7 @@ .temptree { background: #ADD8E6; width: 300px; - height: 100px; + height: 200px; z-index: 100; position: fixed; bottom: 0px; diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index 2d02f3fde..4b1650ac5 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -1,4 +1,4 @@ -import { observable, computed } from "mobx"; +import { action, observable, computed } from "mobx"; import React = require("react"); import { observer } from "mobx-react"; import { Document } from "../../fields/Document"; @@ -13,23 +13,16 @@ export interface IProps { @observer export class TempTreeView extends React.Component{ + @action onClick(doc: Document) { + let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { - //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) { - //console.log(view.props.ContainingCollectionView.Id) - // view.props.ContainingCollectionView - } - else { - console.log("containing collection is undefined") + if (DocumentManager.Instance.parentIsFreeform(view)) { + view.switchColor() } - - view.switchColor(); + DocumentManager.Instance.centerNode(view); } } @@ -37,10 +30,10 @@ export class TempTreeView extends React.Component{ return (
- {this.props.mainCollection.map(doc => { + {DocumentManager.Instance.DocumentViews.map(doc => { return ( -
{ this.onClick(doc) }}> - {doc.Title} +
{ this.onClick(doc.props.Document) }}> + {doc.props.Document.Title}
) } @@ -49,5 +42,4 @@ export class TempTreeView extends React.Component{
); } - } \ No newline at end of file diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 4cbafe950..35ba227e9 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -12,7 +12,6 @@ import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { Transform } from "../../util/Transform"; - export interface CollectionViewProps { CollectionFieldKey: Key; DocumentForCollection: Document; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9bd8c0288..8e2f1afe7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, runInAction } from "mobx"; import { observer } from "mobx-react"; import { observable } from "mobx"; import { Document } from "../../../fields/Document"; @@ -179,11 +179,11 @@ export class DocumentView extends React.Component { ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } + //TODO Monika @action Center = (e: React.MouseEvent): void => { DocumentManager.Instance.centerNode(this.props.Document) DocumentManager.Instance.centerNode(this) - //console.log(this.props.ContainingCollectionView.props.) } @action @@ -230,17 +230,23 @@ export class DocumentView extends React.Component { } //adds doc to global list + @action componentDidMount: () => void = () => { - DocumentManager.Instance.DocumentViews.push(this); + runInAction(() => { + DocumentManager.Instance.DocumentViews.push(this); + }) } //removes doc from global list + @action componentWillUnmount: () => void = () => { - for (let node of DocumentManager.Instance.DocumentViews) { - if (Object.is(node, this)) { - DocumentManager.Instance.DocumentViews.splice(DocumentManager.Instance.DocumentViews.indexOf(this), 1); + 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); @@ -278,6 +284,8 @@ export class DocumentView extends React.Component { bindings.BackgroundView = backgroundView; } + bindings.DocumentView = this; + var width = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var strwidth = width > 0 ? width.toString() + "px" : "100%"; var height = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); -- cgit v1.2.3-70-g09d2 From 93c5e7c323113bf8beeb6207ba22fbbb4ab71796 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Sun, 24 Feb 2019 17:03:19 -0500 Subject: Fixed stuff from the merge --- src/client/views/DocumentManager.tsx | 37 +++++++++++----------- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 6 ++-- src/client/views/nodes/DocumentView.tsx | 6 ++-- 4 files changed, 27 insertions(+), 24 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index ab54a7955..35064d830 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -4,8 +4,9 @@ import { observable, action } from 'mobx'; import { DocumentView } from './nodes/DocumentView'; import { Document } from "../../fields/Document" import { CollectionFreeFormView } from './collections/CollectionFreeFormView'; -import { KeyStore } from '../../fields/Key'; +import { KeyStore } from '../../fields/KeyStore'; import { CollectionViewBase } from './collections/CollectionViewBase'; +import { CollectionViewType, CollectionView } from './collections/CollectionView'; export class DocumentManager { @@ -60,7 +61,7 @@ export class DocumentManager { //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 (view.props.ContainingCollectionView && view.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { if (Object.is(doc, toFind)) { toReturn = view; return; @@ -88,16 +89,13 @@ export class DocumentManager { let scale: number; let XView: number; let YView: number; - let width: number; - let height: number; //if the view exists in a freeform collection - if (docView && docView.MainContent.current) { - width = docView.MainContent.current.clientWidth - height = docView.MainContent.current.clientHeight + if (docView) { + let { width, height } = docView.size(); //base case: parent of parent does not exist - if (docView.props.ContainingCollectionView == null) { + if (!docView.props.ContainingCollectionView) { scale = docView.props.ScreenToLocalTransform().Scale let doc = docView.props.Document; @@ -105,34 +103,32 @@ export class DocumentManager { XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (window.innerWidth / 2) - (width * scale / 2) YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (window.innerHeight / 2) - (height * scale / 2) //set x and y view of parent - if (docView instanceof CollectionFreeFormView) { + if (docView instanceof CollectionView) { DocumentManager.Instance.setViewportXY(docView, XView, YView) } } //parent is not main, parent is centered and calls itself else { - if (docView.props.ContainingCollectionView.props.ContainingDocumentView && docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current) { + if (true) { //view of parent - let tempCollectionView = docView.props.ContainingCollectionView.props.ContainingDocumentView + let { width: parentWidth, height: parentHeight } = docView.props.ContainingCollectionView.props.documentSize(); + let scale = docView.props.ContainingCollectionView.props.ScreenToLocalTransform().Scale; let doc = docView.props.Document - let parentWidth = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientWidth - let parentHeight = docView.props.ContainingCollectionView.props.ContainingDocumentView.MainContent.current.clientHeight //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 instanceof CollectionFreeFormView) { + if (docView.props.ContainingCollectionView.collectionViewType == CollectionViewType.Freeform) { //scale of parent - scale = tempCollectionView.props.ScreenToLocalTransform().Scale XView = (-doc.GetNumber(KeyStore.X, 0) * scale) + (parentWidth / 2) - (width * scale / 2); YView = (-doc.GetNumber(KeyStore.Y, 0) * scale) + (parentHeight / 2) - (height * scale / 2); // //node.Parent.setViewportXY(XView, YView); DocumentManager.Instance.setViewportXY(docView.props.ContainingCollectionView, XView, YView) - return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.DocumentForCollection); + return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document); } } else { - return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.DocumentForCollection) + // return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) } } } @@ -143,9 +139,12 @@ export class DocumentManager { } @action - private setViewportXY(collection: CollectionFreeFormView, x: number, y: number) { + private setViewportXY(collection: CollectionView, x: number, y: number) { + if (collection.collectionViewType !== CollectionViewType.Freeform) { + return; + } console.log("viewport is setting") - let doc = collection.props.DocumentForCollection; + let doc = collection.props.Document; doc.SetNumber(KeyStore.PanX, x); doc.SetNumber(KeyStore.PanY, y); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 90080ab43..7f1390ae2 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -28,7 +28,7 @@ export class CollectionView extends React.Component { public static LayoutString(fieldKey: string = "DataKey") { return ``; } public active = () => { diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 0658c8af0..948472275 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -6,10 +6,11 @@ import { KeyStore } from "../../../fields/KeyStore"; import { Opt, FieldWaiting } from "../../../fields/Field"; import { undoBatch } from "../../util/UndoManager"; import { DragManager } from "../../util/DragManager"; -import { DocumentView } from "../nodes/DocumentView"; +import { DocumentView, JsxArgs } from "../nodes/DocumentView"; import { Documents, DocumentOptions } from "../../documents/Documents"; import { Key } from "../../../fields/Key"; import { Transform } from "../../util/Transform"; +import { CollectionView } from "./CollectionView"; export interface CollectionViewProps { fieldKey: Key; @@ -18,13 +19,14 @@ export interface CollectionViewProps { isSelected: () => boolean; isTopMost: boolean; select: (ctrlPressed: boolean) => void; + documentSize: () => { width: number, height: number }; bindings: any; } export interface SubCollectionViewProps extends CollectionViewProps { active: () => boolean; addDocument: (doc: Document) => void; removeDocument: (doc: Document) => boolean; - CollectionView: any; + CollectionView: CollectionView; } export class CollectionViewBase extends React.Component { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d8e2f3401..40cf8d9e2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -21,6 +21,7 @@ import "./DocumentView.scss"; import React = require("react"); import { DocumentManager } from "../DocumentManager"; import { TextField } from "../../../fields/TextField"; +import { Utils } from "../../../Utils"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? export interface DocumentViewProps { @@ -104,6 +105,7 @@ export class DocumentView extends React.Component { @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); + size = (): { width: number, height: number } => this._mainCont.current ? { width: this._mainCont.current.clientWidth, height: this._mainCont.current.clientHeight } : { width: 0, height: 0 }; onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -182,7 +184,6 @@ export class DocumentView extends React.Component { //TODO Monika @action Center = (e: React.MouseEvent): void => { - DocumentManager.Instance.centerNode(this.props.Document) DocumentManager.Instance.centerNode(this) } @@ -261,7 +262,8 @@ export class DocumentView extends React.Component { this._documentBindings = { ...this.props, isSelected: this.isSelected, - select: this.select + select: this.select, + documentSize: this.size }; 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 98ade639c6ffa6cc704cc310af506973d83e494b Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Tue, 26 Feb 2019 20:44:32 -0500 Subject: what is going ON --- src/client/views/DocumentManager.tsx | 267 ++++++++++++++------- src/client/views/Main.tsx | 4 +- src/client/views/TempTreeView.tsx | 5 +- .../views/collections/CollectionDockingView.tsx | 4 +- .../views/collections/CollectionFreeFormView.tsx | 10 +- .../views/collections/CollectionSchemaView.tsx | 4 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewBase.tsx | 1 + src/client/views/nodes/DocumentView.tsx | 6 +- 9 files changed, 210 insertions(+), 93 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/DocumentManager.tsx b/src/client/views/DocumentManager.tsx index bd3c4abfd..750b7aecf 100644 --- a/src/client/views/DocumentManager.tsx +++ b/src/client/views/DocumentManager.tsx @@ -53,7 +53,27 @@ export class DocumentManager { return (toReturn); } - public getDocumentViewFreeform(toFind: Document): DocumentView | null { + // 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; @@ -61,7 +81,8 @@ export class DocumentManager { //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 (view instanceof CollectionView) { + console.log("finding view") if (Object.is(doc, toFind)) { toReturn = view; return; @@ -72,113 +93,189 @@ export class DocumentManager { 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 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): any { + public centerNode(doc: Document | DocumentView, x: number, y: number): any { //console.log(doc.Title) - //gets document view that is in freeform collection - + //gets document view that is in freeform collection let docView: DocumentView | null; if (doc instanceof Document) { - docView = DocumentManager.Instance.getDocumentViewFreeform(doc) + 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 the view exists in a freeform collection if (docView) { let { width, height } = docView.size(); + let scale = docView.props.Document.GetNumber(KeyStore.Scale, 1) + let doc = docView.props.Document - //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) * 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.centerNode(docView.props.ContainingCollectionView.props.Document) - } - else { return DocumentManager.Instance.centerNode(docView.props.ContainingCollectionView.props.Document) } + if (x && y) { + XView = (-x * scale) - (width * scale / 2); + YView = (-y * scale) - (height * scale / 2); + DocumentManager.Instance.setViewportXY(docView, 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: CollectionView, x: number, y: number) { - if (collection.collectionViewType !== CollectionViewType.Freeform) { - return - } + private setViewportXY(collection: DocumentView, x: number, y: number) { + console.log("setting") let doc = collection.props.Document; doc.SetNumber(KeyStore.PanX, x); doc.SetNumber(KeyStore.PanY, y); diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 64bcbc24f..da78dcfba 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -131,7 +131,9 @@ Documents.initProtos(() => { PanelWidth={() => 0} PanelHeight={() => 0} isTopMost={true} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} + focus={(doc, x, y) => { }} + /> diff --git a/src/client/views/TempTreeView.tsx b/src/client/views/TempTreeView.tsx index f852224e9..bd73ef887 100644 --- a/src/client/views/TempTreeView.tsx +++ b/src/client/views/TempTreeView.tsx @@ -5,6 +5,7 @@ import { Document } from "../../fields/Document"; import { ListField } from "../../fields/ListField"; import "./TempTreeView.scss" import { DocumentManager } from "./DocumentManager"; +import { KeyStore } from "../../fields/KeyStore"; @observer @@ -15,7 +16,9 @@ export class TempTreeView extends React.Component { let view = DocumentManager.Instance.getDocumentView(doc); if (view != null) { - DocumentManager.Instance.centerNode(view); + // DocumentManager.Instance.centerNode(view); + doc = view.props.Document + view.props.focus(doc, doc.GetNumber(KeyStore.X, 0), doc.GetNumber(KeyStore.Y, 0)) } } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 5393ac06e..9c1f1a56d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -298,7 +298,9 @@ export class DockedFrameRenderer extends React.Component { PanelHeight={this._nativeHeight} ScreenToLocalTransform={this.ScreenToLocalTransform} isTopMost={true} - ContainingCollectionView={undefined} /> + ContainingCollectionView={undefined} + focus={(doc: Document, x: number, y: number) => { }} + />
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 b792c59240c61326c4eec0eb0e3bc34efd792861 Mon Sep 17 00:00:00 2001 From: Eleanor Eng Date: Thu, 28 Feb 2019 00:53:30 -0500 Subject: functional context menu --- package-lock.json | 309 +++++++++++++++++++++----------- package.json | 7 +- src/client/views/ContextMenu.tsx | 3 + src/client/views/nodes/DocumentView.tsx | 8 +- 4 files changed, 214 insertions(+), 113 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/package-lock.json b/package-lock.json index 7b173a75f..d94777075 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,16 +20,33 @@ } }, "@fortawesome/fontawesome-common-types": { - "version": "0.2.14", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.14.tgz", - "integrity": "sha512-LOcvERCI96KioXSIfOYN4IATv2ROJOyf72dYnpoWfOIkuyLp45oMej1kL03kYdzvktLCzYhykgHwiu6nkg9Xbw==" + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz", + "integrity": "sha512-ATBRyKJw1d2ko+0DWN9+BXau0EK3I/Q6pPzPv3LhJD7r052YFAkAdfb1Bd7ZqhBsJrdse/S7jKxWUOZ61qBD4g==" }, "@fortawesome/fontawesome-svg-core": { - "version": "1.2.14", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.14.tgz", - "integrity": "sha512-T1qCqkwm9PuvK53J64D1ovfrOTa1kG+SrHNj5cFst/rrskhCnbxpRdbqFIdc/thmXC0ebBX8nOUyja2/mrxe4g==", + "version": "1.2.15", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.15.tgz", + "integrity": "sha512-M/sHyl4g2VBtKYkay1Z+XImMyTVcaBPmehYtPw4HKD9zg2E7eovB7Yx98aUfZjPbroGqa+IL4/+KhWBMOGlHIQ==", "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.14" + "@fortawesome/fontawesome-common-types": "^0.2.15" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.2.tgz", + "integrity": "sha512-iujcXMyAvIbWM8W3jkOLpvJbR+rPpdN1QyqhZeJaLRdHPH4JmuovIAYP4vx5Sa1csZVXfRD1eDWqVZ/jGM620A==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.15" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz", + "integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==", + "requires": { + "humps": "^2.0.1", + "prop-types": "^15.5.10" } }, "@types/anymatch": { @@ -3366,21 +3383,25 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "optional": true }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "resolved": false, + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "aproba": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "optional": true, "requires": { "delegates": "^1.0.0", @@ -3389,11 +3410,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "resolved": false, + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", - "bundled": true, + "resolved": false, + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3401,29 +3424,35 @@ }, "chownr": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==", "optional": true }, "code-point-at": { "version": "1.1.0", - "bundled": true + "resolved": false, + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "concat-map": { "version": "0.0.1", - "bundled": true + "resolved": false, + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "resolved": false, + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" }, "core-util-is": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "optional": true }, "debug": { "version": "2.6.9", - "bundled": true, + "resolved": false, + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", "optional": true, "requires": { "ms": "2.0.0" @@ -3431,22 +3460,26 @@ }, "deep-extend": { "version": "0.6.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "optional": true }, "delegates": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "optional": true }, "detect-libc": { "version": "1.0.3", - "bundled": true, + "resolved": false, + "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "optional": true }, "fs-minipass": { "version": "1.2.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==", "optional": true, "requires": { "minipass": "^2.2.1" @@ -3454,12 +3487,14 @@ }, "fs.realpath": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", "optional": true }, "gauge": { "version": "2.7.4", - "bundled": true, + "resolved": false, + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "optional": true, "requires": { "aproba": "^1.0.3", @@ -3474,7 +3509,8 @@ }, "glob": { "version": "7.1.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "optional": true, "requires": { "fs.realpath": "^1.0.0", @@ -3487,12 +3523,14 @@ }, "has-unicode": { "version": "2.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "optional": true }, "iconv-lite": { "version": "0.4.24", - "bundled": true, + "resolved": false, + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "optional": true, "requires": { "safer-buffer": ">= 2.1.2 < 3" @@ -3500,7 +3538,8 @@ }, "ignore-walk": { "version": "3.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "optional": true, "requires": { "minimatch": "^3.0.4" @@ -3508,7 +3547,8 @@ }, "inflight": { "version": "1.0.6", - "bundled": true, + "resolved": false, + "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "optional": true, "requires": { "once": "^1.3.0", @@ -3517,39 +3557,46 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "resolved": false, + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "requires": { "number-is-nan": "^1.0.0" } }, "isarray": { "version": "1.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "optional": true }, "minimatch": { "version": "3.0.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "resolved": false, + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "minipass": { "version": "2.3.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3557,7 +3604,8 @@ }, "minizlib": { "version": "1.2.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==", "optional": true, "requires": { "minipass": "^2.2.1" @@ -3565,19 +3613,22 @@ }, "mkdirp": { "version": "0.5.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "requires": { "minimist": "0.0.8" } }, "ms": { "version": "2.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", "optional": true }, "needle": { "version": "2.2.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-HyoqEb4wr/rsoaIDfTH2aVL9nWtQqba2/HvMv+++m8u0dz808MaagKILxtfeSN7QU7nvbQ79zk3vYOJp9zsNEA==", "optional": true, "requires": { "debug": "^2.1.2", @@ -3587,7 +3638,8 @@ }, "node-pre-gyp": { "version": "0.10.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==", "optional": true, "requires": { "detect-libc": "^1.0.2", @@ -3604,7 +3656,8 @@ }, "nopt": { "version": "4.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "optional": true, "requires": { "abbrev": "1", @@ -3613,12 +3666,14 @@ }, "npm-bundled": { "version": "1.0.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==", "optional": true }, "npm-packlist": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-7Mni4Z8Xkx0/oegoqlcao/JpPCPEMtUvsmB0q7mgvlMinykJLSRTYuFqoQLYgGY8biuxIeiHO+QNJKbCfljewQ==", "optional": true, "requires": { "ignore-walk": "^3.0.1", @@ -3627,7 +3682,8 @@ }, "npmlog": { "version": "4.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "optional": true, "requires": { "are-we-there-yet": "~1.1.2", @@ -3638,33 +3694,39 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "resolved": false, + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "object-assign": { "version": "4.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "optional": true }, "once": { "version": "1.4.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "requires": { "wrappy": "1" } }, "os-homedir": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "optional": true }, "os-tmpdir": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "optional": true }, "osenv": { "version": "0.1.5", - "bundled": true, + "resolved": false, + "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "optional": true, "requires": { "os-homedir": "^1.0.0", @@ -3673,17 +3735,20 @@ }, "path-is-absolute": { "version": "1.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "optional": true }, "process-nextick-args": { "version": "2.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "optional": true }, "rc": { "version": "1.2.8", - "bundled": true, + "resolved": false, + "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "optional": true, "requires": { "deep-extend": "^0.6.0", @@ -3694,14 +3759,16 @@ "dependencies": { "minimist": { "version": "1.2.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "optional": true } } }, "readable-stream": { "version": "2.3.6", - "bundled": true, + "resolved": false, + "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "optional": true, "requires": { "core-util-is": "~1.0.0", @@ -3715,7 +3782,8 @@ }, "rimraf": { "version": "2.6.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "optional": true, "requires": { "glob": "^7.1.3" @@ -3723,36 +3791,43 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "resolved": false, + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safer-buffer": { "version": "2.1.2", - "bundled": true, + "resolved": false, + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "optional": true }, "sax": { "version": "1.2.4", - "bundled": true, + "resolved": false, + "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "optional": true }, "semver": { "version": "5.6.0", - "bundled": true, + "resolved": false, + "integrity": "sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==", "optional": true }, "set-blocking": { "version": "2.0.0", - "bundled": true, + "resolved": false, + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "optional": true }, "signal-exit": { "version": "3.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "optional": true }, "string-width": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3761,7 +3836,8 @@ }, "string_decoder": { "version": "1.1.1", - "bundled": true, + "resolved": false, + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "optional": true, "requires": { "safe-buffer": "~5.1.0" @@ -3769,19 +3845,22 @@ }, "strip-ansi": { "version": "3.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { "ansi-regex": "^2.0.0" } }, "strip-json-comments": { "version": "2.0.1", - "bundled": true, + "resolved": false, + "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "optional": true }, "tar": { "version": "4.4.8", - "bundled": true, + "resolved": false, + "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==", "optional": true, "requires": { "chownr": "^1.1.1", @@ -3795,12 +3874,14 @@ }, "util-deprecate": { "version": "1.0.2", - "bundled": true, + "resolved": false, + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "optional": true }, "wide-align": { "version": "1.1.3", - "bundled": true, + "resolved": false, + "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "optional": true, "requires": { "string-width": "^1.0.2 || 2" @@ -3808,11 +3889,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "resolved": false, + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "yallist": { "version": "3.0.3", - "bundled": true + "resolved": false, + "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" } } }, @@ -4304,6 +4387,16 @@ "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=", "dev": true }, + "humps": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz", + "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=" + }, + "i": { + "version": "0.3.6", + "resolved": "https://registry.npmjs.org/i/-/i-0.3.6.tgz", + "integrity": "sha1-2WyScyB28HJxG2sQ/X1PZa2O4j0=" + }, "iconv-lite": { "version": "0.4.23", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", @@ -5915,9 +6008,9 @@ "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" }, "npm": { - "version": "6.7.0", - "resolved": "https://registry.npmjs.org/npm/-/npm-6.7.0.tgz", - "integrity": "sha512-OtxCLzx+pcsjMGrjZpBp214ZjxzHcAe3zLYIlaVpRYqFHff6bgggyTLf2OZPO8lfxN0RHLJnFFUU016JCzM/Ww==", + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/npm/-/npm-6.8.0.tgz", + "integrity": "sha512-xMH6V0OCSJ5ZET6yWPI3BmJSqMMCuVJSIcLx3LSH/SrratFSt6EDuCuGRFMQYty98Q1l6x/7vKmfURosoyWgrA==", "requires": { "JSONStream": "^1.3.5", "abbrev": "~1.1.1", @@ -5988,22 +6081,22 @@ "move-concurrently": "^1.0.1", "node-gyp": "^3.8.0", "nopt": "~4.0.1", - "normalize-package-data": "~2.4.0", + "normalize-package-data": "^2.5.0", "npm-audit-report": "^1.3.2", "npm-cache-filename": "~1.0.2", "npm-install-checks": "~3.0.0", "npm-lifecycle": "^2.1.0", "npm-package-arg": "^6.1.0", - "npm-packlist": "^1.2.0", + "npm-packlist": "^1.3.0", "npm-pick-manifest": "^2.2.3", "npm-profile": "*", - "npm-registry-fetch": "^3.8.0", + "npm-registry-fetch": "^3.9.0", "npm-user-validate": "~1.0.0", "npmlog": "~4.1.2", "once": "~1.4.0", "opener": "^1.5.1", "osenv": "^0.1.5", - "pacote": "^9.4.0", + "pacote": "^9.4.1", "path-is-inside": "~1.0.2", "promise-inflight": "~1.0.1", "qrcode-terminal": "^0.12.0", @@ -6013,7 +6106,7 @@ "read-cmd-shim": "~1.0.1", "read-installed": "~4.0.3", "read-package-json": "^2.0.13", - "read-package-tree": "^5.2.1", + "read-package-tree": "^5.2.2", "readable-stream": "^3.1.1", "readdir-scoped-modules": "*", "request": "^2.88.0", @@ -6258,11 +6351,6 @@ "resolved": false, "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==" }, - "builtin-modules": { - "version": "1.1.1", - "resolved": false, - "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=" - }, "builtins": { "version": "1.0.3", "resolved": false, @@ -7304,14 +7392,6 @@ "resolved": false, "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=" }, - "is-builtin-module": { - "version": "1.0.0", - "resolved": false, - "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", - "requires": { - "builtin-modules": "^1.0.0" - } - }, "is-ci": { "version": "1.1.0", "resolved": false, @@ -7998,14 +8078,24 @@ } }, "normalize-package-data": { - "version": "2.4.0", + "version": "2.5.0", "resolved": false, - "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", + "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", "requires": { "hosted-git-info": "^2.1.4", - "is-builtin-module": "^1.0.0", + "resolve": "^1.10.0", "semver": "2 || 3 || 4 || 5", "validate-npm-package-license": "^3.0.1" + }, + "dependencies": { + "resolve": { + "version": "1.10.0", + "resolved": false, + "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==", + "requires": { + "path-parse": "^1.0.6" + } + } } }, "npm-audit-report": { @@ -8018,9 +8108,9 @@ } }, "npm-bundled": { - "version": "1.0.5", + "version": "1.0.6", "resolved": false, - "integrity": "sha512-m/e6jgWu8/v5niCUKQi9qQl8QdeEduFA96xHDDzFGqly0OOjI7c+60KM/2sppfnUU9JJagf+zs+yGhqSOFj71g==" + "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==" }, "npm-cache-filename": { "version": "1.0.2", @@ -8067,9 +8157,9 @@ } }, "npm-packlist": { - "version": "1.2.0", + "version": "1.3.0", "resolved": false, - "integrity": "sha512-7Mni4Z8Xkx0/oegoqlcao/JpPCPEMtUvsmB0q7mgvlMinykJLSRTYuFqoQLYgGY8biuxIeiHO+QNJKbCfljewQ==", + "integrity": "sha512-qPBc6CnxEzpOcc4bjoIBJbYdy0D/LFFPUdxvfwor4/w3vxeE0h6TiOVurCEPpQ6trjN77u/ShyfeJGsbAfB3dA==", "requires": { "ignore-walk": "^3.0.1", "npm-bundled": "^1.0.1" @@ -8096,9 +8186,9 @@ } }, "npm-registry-fetch": { - "version": "3.8.0", + "version": "3.9.0", "resolved": false, - "integrity": "sha512-hrw8UMD+Nob3Kl3h8Z/YjmKamb1gf7D1ZZch2otrIXM3uFLB5vjEY6DhMlq80z/zZet6eETLbOXcuQudCB3Zpw==", + "integrity": "sha512-srwmt8YhNajAoSAaDWndmZgx89lJwIZ1GWxOuckH4Coek4uHv5S+o/l9FLQe/awA+JwTnj4FJHldxhlXdZEBmw==", "requires": { "JSONStream": "^1.3.4", "bluebird": "^3.5.1", @@ -8227,9 +8317,9 @@ } }, "pacote": { - "version": "9.4.0", + "version": "9.4.1", "resolved": false, - "integrity": "sha512-WQ1KL/phGMkedYEQx9ODsjj7xvwLSpdFJJdEXrLyw5SILMxcTNt5DTxT2Z93fXuLFYJBlZJdnwdalrQdB/rX5w==", + "integrity": "sha512-YKSRsQqmeHxgra0KCdWA2FtVxDPUlBiCdmew+mSe44pzlx5t1ViRMWiQg18T+DREA+vSqYfKzynaToFR4hcKHw==", "requires": { "bluebird": "^3.5.3", "cacache": "^11.3.2", @@ -8338,6 +8428,11 @@ "resolved": false, "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=" }, + "path-parse": { + "version": "1.0.6", + "resolved": false, + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" + }, "performance-now": { "version": "2.1.0", "resolved": false, @@ -8535,9 +8630,9 @@ } }, "read-package-tree": { - "version": "5.2.1", + "version": "5.2.2", "resolved": false, - "integrity": "sha512-2CNoRoh95LxY47LvqrehIAfUVda2JbuFE/HaGYs42bNrGG+ojbw1h3zOcPcQ+1GQ3+rkzNndZn85u1XyZ3UsIA==", + "integrity": "sha512-rW3XWUUkhdKmN2JKB4FL563YAgtINifso5KShykufR03nJ5loGFlkUMe1g/yxmqX073SoYYTsgXu7XdDinKZuA==", "requires": { "debuglog": "^1.0.1", "dezalgo": "^1.0.0", diff --git a/package.json b/package.json index 16174268e..53df10934 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,9 @@ "webpack-hot-middleware": "^2.24.3" }, "dependencies": { - "@fortawesome/fontawesome-svg-core": "^1.2.14", + "@fortawesome/fontawesome-svg-core": "^1.2.15", + "@fortawesome/free-solid-svg-icons": "^5.7.2", + "@fortawesome/react-fontawesome": "^0.1.4", "@types/bcrypt-nodejs": "0.0.30", "@types/bluebird": "^3.5.25", "@types/body-parser": "^1.17.0", @@ -76,6 +78,7 @@ "expressjs": "^1.0.1", "flexlayout-react": "^0.3.3", "golden-layout": "^1.5.9", + "i": "^0.3.6", "jsonwebtoken": "^8.4.0", "jsx-to-string": "^1.4.0", "lodash": "^4.17.11", @@ -87,7 +90,7 @@ "node-sass": "^4.11.0", "nodemon": "^1.18.10", "normalize.css": "^8.0.1", - "npm": "^6.7.0", + "npm": "^6.8.0", "passport": "^0.4.0", "passport-local": "^1.0.0", "prosemirror-commands": "^1.0.7", diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index fcb934860..ed35021d3 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -3,6 +3,9 @@ import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem"; import { observable, action } from "mobx"; import { observer } from "mobx-react"; import "./ContextMenu.scss" +// import { library } from '@fortawesome/fontawesome-svg-core' +// import { faIgloo } from '@fortawesome/free-solid-svg-icons' +// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' @observer export class ContextMenu extends React.Component { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 87f2e205b..4c302ed87 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -187,10 +187,10 @@ export class DocumentView extends React.Component { ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }) ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) - 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: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) + // 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: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) SelectionManager.SelectDoc(this, e.ctrlKey); } -- 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/nodes/DocumentView.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 ea688991fea204d7b97c6c4f23b4ecd81189f2b0 Mon Sep 17 00:00:00 2001 From: Monika Hedman Date: Sat, 2 Mar 2019 17:23:37 -0500 Subject: nav cleaning --- .../views/collections/CollectionFreeFormView.tsx | 1 - src/client/views/nodes/DocumentView.tsx | 12 --- src/temp.txt | 109 --------------------- 3 files changed, 122 deletions(-) delete mode 100644 src/temp.txt (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 1b39dcae5..c81da5a57 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -35,7 +35,6 @@ export class CollectionFreeFormView extends CollectionViewBase { private _downX: number = 0; @observable private _downY: number = 0; - private _borderColor: string = "red" //determines whether the blinking cursor for indicating whether a text will be made on key down is visible @observable diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9244ca08d..6ee313522 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -87,16 +87,6 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { @observer export class DocumentView extends React.Component { - public Id: string = Utils.GenerateGuid(); - - @observable - public Border: string = "white" - - @action - public switchColor() { - this.Border = "red" - } - private _mainCont = React.createRef(); private _documentBindings: any = null; private _downX: number = 0; @@ -109,7 +99,6 @@ export class DocumentView extends React.Component { @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); - size = (): { width: number, height: number } => this._mainCont.current ? { width: this._mainCont.current.clientWidth, height: this._mainCont.current.clientHeight } : { width: 0, height: 0 }; onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -248,7 +237,6 @@ export class DocumentView extends React.Component { ...this.props, isSelected: this.isSelected, select: this.select, - documentSize: this.size, focus: this.props.focus }; for (const key of this.layoutKeys) { diff --git a/src/temp.txt b/src/temp.txt deleted file mode 100644 index 481424859..000000000 --- a/src/temp.txt +++ /dev/null @@ -1,109 +0,0 @@ -= - //NAV - /** - * This method takes the node passed in as a parameter and centers it in the view. It is recursive - * so if the node is nested in collections, its parents will be centered too. - */ - public CenterNode(node: NodeStore) { - - let scale: number; - let XView: number; - let YView: number; - - //base case: parent is main - if(node.Parent == RootStore.Instance.MainNodeCollection){ - scale = RootStore.Instance.MainNodeCollection.Scale; - XView =(-node.X * scale) + (window.innerWidth / 2) - (node.Width * scale / 2 ) ; - YView = (-node.Y * scale) +(window.innerHeight / 2) - (node.Height * scale / 2) ; - RootStore.Instance.MainNodeCollection.SetViewportXY(XView, YView); - } - //parent is not main, parent is centered and calls itself - else{ - scale = node.Parent.Scale; - XView = (-node.X * scale) + (node.Parent.Width / 2) - (node.Width * scale / 2 ); - YView = (-node.Y * scale) +(node.Parent.Height / 2) - (node.Height * scale / 2); - node.Parent.SetViewportXY(XView, YView); - - return this.CenterNode(node.Parent); - } - - } - - @observable - public SetViewportXY(x: number, y: number) { - this.ViewportX = x; - this.ViewportY = y; - } - - - //NAV - /** - * This method sets the position of the new node to the center of the window/collection - * it is in. - */ - private SetPosition(node: NodeStore){ - let windowWidth: number; - let windowHeight: number; - let cornerX: number; - let cornerY: number; - - //size of parent is size of window if parent is root - if (node.Parent === RootStore.Instance.MainNodeCollection) { - windowWidth = window.innerWidth; - windowHeight = window.innerHeight; - } - //size of parent is size of collection node if not main - else { - windowWidth = node.Parent.Width; - windowHeight = node.Parent.Height; - } - - //corner of the parent's viewport (top left) - cornerX = node.Parent.ViewportX; - cornerY = node.Parent.ViewportY; - - //calculates node's position - let x = (windowWidth / 2 - cornerX) / node.Parent.Scale - node.Width / 2; - let y = (windowHeight / 2 - cornerY) / node.Parent.Scale - node.Height / 2; - - //sets node's position - node.X = x; - node.Y = y; - } - - /** - * This method finds the collection that has a name corresponding with the string - * passed in as a parameter. - */ - private findCollection(name: string): NodeCollectionStore { - - for (let cur of RootStore.Instance.Collections) { - if (name === cur.Title) { - return cur; - } - } - - return null; - } - - //NAV - /** - * This method resets all of the Z indices of the nodes to 0 so that one of them could be brought forward. - */ - @observable - private resetZIndices() { - for (let node of RootStore.Instance.Nodes) { - node.zIndex = 0; - } - } - - //NAV - /** - * This method brings the node passed in as a parameter to the front by resetting all of the - * z indices to 0, and then setting the one passed in to have a z index of 1 - */ - @observable - public bringForward(node: NodeStore) { - this.resetZIndices(); - node.zIndex = 1; - } \ No newline at end of file -- 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/nodes/DocumentView.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 6d456bbe4a2de50abe1a4b338d1f446d3123b321 Mon Sep 17 00:00:00 2001 From: Eleanor Eng Date: Sat, 2 Mar 2019 19:07:00 -0500 Subject: with collection view --- src/client/views/ContextMenu.scss | 13 +- src/client/views/ContextMenu.tsx | 3 - src/client/views/ContextMenuItem.tsx | 9 + src/client/views/Main.tsx | 20 ++- .../views/collections/CollectionSchemaView.tsx | 9 +- src/client/views/collections/CollectionView.tsx | 26 ++- src/client/views/nodes/DocumentView.tsx | 181 +++++++++++++-------- src/client/views/nodes/FormattedTextBox.tsx | 13 ++ src/server/index.ts | 5 +- 9 files changed, 174 insertions(+), 105 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index b7fd60ffb..ea40c8e99 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -3,16 +3,15 @@ display: flex; z-index: 1000; box-shadow: #AAAAAA .2vw .2vw .4vw; - flex-direction: column; //E - // border-radius: 20px; + flex-direction: column; } .contextMenu-item { - width: auto; //10vw - height: auto; //4vh - background: #F0F8FF; // background: #DDDDDD; + width: auto; + height: auto; + background: #F0F8FF; display: flex; - justify-content: left; //center + justify-content: left; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; @@ -32,7 +31,7 @@ .contextMenu-item:hover { transition: all .1s; - background: #B0E0E6; // background: #AAAAAA + background: #B0E0E6; } .contextMenu-description { diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index ed35021d3..fcb934860 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -3,9 +3,6 @@ import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem"; import { observable, action } from "mobx"; import { observer } from "mobx-react"; import "./ContextMenu.scss" -// import { library } from '@fortawesome/fontawesome-svg-core' -// import { faIgloo } from '@fortawesome/free-solid-svg-icons' -// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' @observer export class ContextMenu extends React.Component { diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 8f00f8b3d..723606dcf 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -6,6 +6,15 @@ export interface ContextMenuProps { event: (e: React.MouseEvent) => void; } +export interface SubmenuProps { + description: string; + subitems: ContextMenuProps[]; +} + +export interface ContextMenuItemProps { + type: ContextMenuProps | SubmenuProps +} + export class ContextMenuItem extends React.Component { render() { return ( diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 17dda899d..23438c91f 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -66,17 +66,19 @@ Documents.initProtos(() => { mainContainer.GetAsync(KeyStore.ActiveFrame, field => mainfreeform = field as Document); } else { - mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson())) + // mainContainer = Documents.DockDocument(JSON.stringify({ content: [{ type: 'row', content: [] }] }), { title: "main container" }, mainDocId); + // Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson())) - setTimeout(() => { - mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); - Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); + // setTimeout(() => { + // mainfreeform = Documents.FreeformDocument([], { x: 0, y: 400, title: "mini collection" }); + // Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson())); - var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc)); - mainContainer.SetText(KeyStore.Data, JSON.stringify({ content: [{ type: 'row', content: docs }] })); - mainContainer.Set(KeyStore.ActiveFrame, mainfreeform); - }, 0); + // var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc)); + // mainContainer.SetText(KeyStore.Data, JSON.stringify({ content: [{ type: 'row', content: docs }] })); + // mainContainer.Set(KeyStore.ActiveFrame, mainfreeform); + // }, 0); + mainContainer = Documents.FreeformDocument([], {}); + mainfreeform = mainContainer; } let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 22b5989a0..4beb0aea1 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -181,13 +181,6 @@ export class CollectionSchemaView extends CollectionViewBase { } } - //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE - collectionCapability = (e: React.MouseEvent): void => { - } - - specificContextMenu = (e: React.MouseEvent): void => { - ContextMenu.Instance.addItem({ description: "Collection Capability", event: this.collectionCapability }); - } @action setScaling = (r: any) => { const children = this.props.Document.GetList(this.props.fieldKey, []); @@ -227,7 +220,7 @@ export class CollectionSchemaView extends CollectionViewBase { let handle = !this.props.active() ? (null) : (
); return ( -
+
{ this._dividerX = r.entry.width; this._panelHeight = r.entry.height; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 03e1f1fa4..a7db07a42 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -87,27 +87,43 @@ export class CollectionView extends React.Component { Document.SetData(KeyStore.ViewType, type, NumberField); } + specificContextMenu = (e: React.MouseEvent): void => { + 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: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) + } + render() { let viewType = this.collectionViewType; + let subView: JSX.Element; switch (viewType) { case CollectionViewType.Freeform: - return () + break; case CollectionViewType.Schema: - return () + break; case CollectionViewType.Docking: - return () + break; case CollectionViewType.Tree: - return () + break; default: - return
+ subView =
+ break; } + return (
+ {subView} +
) } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 4c302ed87..a14239e94 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -18,17 +18,15 @@ import { FormattedTextBox } from "../nodes/FormattedTextBox"; import { ImageBox } from "../nodes/ImageBox"; import "./DocumentView.scss"; import React = require("react"); -const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? +const JsxParser = require('react-jsx-parser').default; //TODO Why does this need to be imported like this? export interface DocumentViewProps { ContainingCollectionView: Opt; - Document: Document; AddDocument?: (doc: Document) => void; RemoveDocument?: (doc: Document) => boolean; ScreenToLocalTransform: () => Transform; - isTopMost: boolean; - //tfs: This shouldn't be necessary I don't think + isTopMost: boolean; //tfs: This shouldn't be necessary I don't think ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; @@ -53,6 +51,7 @@ Example usage of this function: ) } */ + export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { let Keys: { [name: string]: any } = {} let Fields: { [name: string]: any } = {} @@ -75,23 +74,28 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { return args; } -@observer -export class DocumentView extends React.Component { - +@observer export class DocumentView extends React.Component { private _mainCont = React.createRef(); private _documentBindings: any = null; private _contextMenuCanOpen = false; private _downX: number = 0; private _downY: number = 0; - - @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); } - @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; } - @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "

Error loading layout data

"); } - @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } - @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } - + @computed get active(): boolean { + return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); + } + @computed get topMost(): boolean { + return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; + } + @computed get layout(): string { + return this.props.Document.GetText(KeyStore.Layout, "

Error loading layout data

"); + } + @computed get layoutKeys(): Key[] { + return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); + } + @computed get layoutFields(): Key[] { + return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); + } screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); - onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; this._downY = e.clientY; @@ -112,7 +116,6 @@ export class DocumentView extends React.Component { } } } - onPointerMove = (e: PointerEvent): void => { if (e.cancelBubble) { this._contextMenuCanOpen = false; @@ -122,23 +125,29 @@ export class DocumentView extends React.Component { this._contextMenuCanOpen = false; if (this._mainCont.current != null && !this.topMost) { this._contextMenuCanOpen = false; - const [left, top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - let dragData: { [id: string]: any } = {}; + const [left, + top] = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + let dragData: { + [id: string]: any + } + = {} + ; dragData["documentView"] = this; dragData["xOffset"] = e.x - left; dragData["yOffset"] = e.y - top; DragManager.StartDrag(this._mainCont.current, dragData, { handlers: { - dragComplete: action((e: DragManager.DragCompleteEvent) => { }), - }, - hideSource: true - }) + dragComplete: action((e: DragManager.DragCompleteEvent) => { } + ), + } + , hideSource: true + } + ) } } e.stopPropagation(); e.preventDefault(); } - onPointerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onPointerMove) document.removeEventListener("pointerup", this.onPointerUp) @@ -147,7 +156,6 @@ export class DocumentView extends React.Component { SelectionManager.SelectDoc(this, e.ctrlKey); } } - deleteClicked = (e: React.MouseEvent): void => { if (this.props.RemoveDocument) { this.props.RemoveDocument(this.props.Document); @@ -156,93 +164,124 @@ export class DocumentView extends React.Component { fullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.Instance.OpenFullScreen(this.props.Document); ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked }); + ContextMenu.Instance.addItem({ + description: "Close Full Screen", event: this.closeFullScreenClicked + } + ); ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } closeFullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.Instance.CloseFullScreen(); ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) + ContextMenu.Instance.addItem({ + description: "Full Screen", event: this.fullScreenClicked + }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } - - @action - onContextMenu = (e: React.MouseEvent): void => { + @action onContextMenu = (e: React.MouseEvent): void => { e.preventDefault() e.stopPropagation(); if (!SelectionManager.IsSelected(this) || !this._contextMenuCanOpen) { return; } - if (this.topMost) { - ContextMenu.Instance.clearItems() - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) + ContextMenu.Instance.addItem({ + description: "Full Screen", event: this.fullScreenClicked + }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } else { // DocumentViews should stop propagation of this event - e.stopPropagation(); - - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }) - ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) - // 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: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) + ContextMenu.Instance.addItem({ + description: "Full Screen", event: this.fullScreenClicked + } + ) + ContextMenu.Instance.addItem({ + description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) + } + ) + ContextMenu.Instance.addItem({ + description: "Delete", event: this.deleteClicked + } + ) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) SelectionManager.SelectDoc(this, e.ctrlKey); } } - @computed get mainContent() { var val = this.props.Document.Id; - return { console.log(test) }} + return { + console.log(test) + } + } /> } render() { - if (!this.props.Document) - return
+ if (!this.props.Document) return
let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField); if (!lkeys || lkeys === "") { return

Error loading layout keys

; } this._documentBindings = { ...this.props, - isSelected: () => SelectionManager.IsSelected(this), - select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed) - }; + isSelected: () => SelectionManager.IsSelected(this), select: (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed) + } + ; 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 + 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 } for (const key of this.layoutFields) { let field = this.props.Document.Get(key); this._documentBindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; } this._documentBindings.bindings = this._documentBindings; - var scaling = this.props.ContentScaling(); var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); - return ( -
0 ? nativeWidth.toString() + "px" : "100%", - height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", - transformOrigin: "left top", - transform: `scale(${scaling},${scaling})` - }} - onContextMenu={this.onContextMenu} - onPointerDown={this.onPointerDown} - > - {this.mainContent} -
- ) + return (
0 ? nativeWidth.toString() + "px" : "100%", height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", transformOrigin: "left top", transform: `scale($ { + scaling + } + , $ { + scaling + } + )` + } + } + onContextMenu={ + this.onContextMenu + } + onPointerDown={ + this.onPointerDown + } + > { + this.mainContent + } +
) } -} +} \ No newline at end of file diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index d0dd9e91f..8b3deeb8b 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -119,6 +119,19 @@ export class FormattedTextBox extends React.Component { specificContextMenu = (e: React.MouseEvent): void => { ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability }); + // ContextMenu.Instance.addItem({ + // description: "Submenu", + // items: [ + // { + // description: "item 1", event: + // }, + // { + // description: "item 2", event: + // } + // ] + // }) + // e.stopPropagation() + } onPointerWheel = (e: React.WheelEvent): void => { diff --git a/src/server/index.ts b/src/server/index.ts index eb0527ee7..84acb72cb 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -125,7 +125,6 @@ function deleteAll() { function barReceived(guid: String) { clients[guid.toString()] = new Client(guid.toString()); - // Database.Instance.print() } function addDocument(document: Document) { @@ -148,7 +147,9 @@ function getFields([ids, callback]: [string[], (result: any) => void]) { } function setField(socket: Socket, newValue: Transferable) { - Database.Instance.update(newValue._id, newValue) + let val = { ...newValue }; + delete val._id; + Database.Instance.update(newValue._id, val) socket.broadcast.emit(MessageStore.SetField.Message, newValue) } -- cgit v1.2.3-70-g09d2 From 172f60807639d49182014810493e059b674362a5 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 2 Mar 2019 23:18:41 -0500 Subject: minor changes --- src/client/views/nodes/DocumentView.tsx | 65 ++++++++++----------------------- src/server/index.ts | 4 +- 2 files changed, 20 insertions(+), 49 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ce722480f..0159bc5d2 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -84,21 +84,11 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { private _documentBindings: any = null; private _downX: number = 0; private _downY: number = 0; - @computed get active(): boolean { - return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); - } - @computed get topMost(): boolean { - return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; - } - @computed get layout(): string { - return this.props.Document.GetText(KeyStore.Layout, "

Error loading layout data

"); - } - @computed get layoutKeys(): Key[] { - return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); - } - @computed get layoutFields(): Key[] { - return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); - } + @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); } + @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; } + @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "

Error loading layout data

"); } + @computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array()); } + @computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array()); } screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect(); onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; @@ -166,19 +156,14 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { fullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.Instance.OpenFullScreen(this.props.Document); ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ - description: "Close Full Screen", event: this.closeFullScreenClicked - } - ); + ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked }); ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } closeFullScreenClicked = (e: React.MouseEvent): void => { CollectionDockingView.Instance.CloseFullScreen(); ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ - description: "Full Screen", event: this.fullScreenClicked - }) + ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) } @@ -248,29 +233,17 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { var scaling = this.props.ContentScaling(); var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0); - return (
0 ? nativeWidth.toString() + "px" : "100%", height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", transformOrigin: "left top", transform: `scale($ { - scaling - } - , $ { - scaling - } - )` - } - } - onContextMenu={ - this.onContextMenu - } - onPointerDown={ - this.onPointerDown - } - > { - this.mainContent - } -
) + return ( +
0 ? nativeWidth.toString() + "px" : "100%", + height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", + transformOrigin: "left top", transform: `scale(${scaling} , ${scaling})` + }} + onContextMenu={this.onContextMenu} + onPointerDown={this.onPointerDown} > + {this.mainContent} +
+ ) } } \ No newline at end of file diff --git a/src/server/index.ts b/src/server/index.ts index 84acb72cb..56881e254 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -147,9 +147,7 @@ function getFields([ids, callback]: [string[], (result: any) => void]) { } function setField(socket: Socket, newValue: Transferable) { - let val = { ...newValue }; - delete val._id; - Database.Instance.update(newValue._id, val) + Database.Instance.update(newValue._id, newValue) socket.broadcast.emit(MessageStore.SetField.Message, newValue) } -- cgit v1.2.3-70-g09d2 From 09928503be98d605052fba65dcd2f91f9b056f23 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Sat, 2 Mar 2019 23:20:53 -0500 Subject: Some more formatting --- src/client/views/nodes/DocumentView.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) (limited to 'src/client/views/nodes/DocumentView.tsx') diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0159bc5d2..e01e1d4cd 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -29,7 +29,7 @@ export interface DocumentViewProps { AddDocument?: (doc: Document) => void; RemoveDocument?: (doc: Document) => boolean; ScreenToLocalTransform: () => Transform; - isTopMost: boolean; //tfs: This shouldn't be necessary I don't think + isTopMost: boolean; ContentScaling: () => number; PanelWidth: () => number; PanelHeight: () => number; @@ -56,7 +56,6 @@ Example usage of this function: ) } */ - export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { let Keys: { [name: string]: any } = {} let Fields: { [name: string]: any } = {} @@ -79,7 +78,8 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { return args; } -@observer export class DocumentView extends React.Component { +@observer +export class DocumentView extends React.Component { private _mainCont = React.createRef(); private _documentBindings: any = null; private _downX: number = 0; @@ -238,7 +238,8 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs { style={{ width: nativeWidth > 0 ? nativeWidth.toString() + "px" : "100%", height: nativeHeight > 0 ? nativeHeight.toString() + "px" : "100%", - transformOrigin: "left top", transform: `scale(${scaling} , ${scaling})` + transformOrigin: "left top", + transform: `scale(${scaling} , ${scaling})` }} onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} > -- cgit v1.2.3-70-g09d2