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