From ec2b0b56058fce137ff28ae3ec125f9e695f315c Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Tue, 19 Feb 2019 05:19:50 -0500 Subject: Changed some names, added some comments, and got rid of some unused stuff --- src/client/views/Main.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 15 ++++---- .../views/collections/CollectionFreeFormView.tsx | 42 +++++++++++----------- .../views/collections/CollectionSchemaView.tsx | 4 +-- .../views/collections/CollectionViewBase.tsx | 13 ++++--- src/client/views/nodes/DocumentView.tsx | 8 +++-- 6 files changed, 44 insertions(+), 40 deletions(-) (limited to 'src') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 1eeec7ff5..c3a9f1906 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -86,7 +86,7 @@ ReactDOM.render(( AddDocument={undefined} RemoveDocument={undefined} ScreenToLocalTransform={() => Transform.Identity} Scaling={1} isTopMost={true} - ContainingCollectionView={undefined} DocumentView={undefined} /> + ContainingCollectionView={undefined} /> ), diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 1c1f6f8b4..05e1ea90a 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -25,7 +25,7 @@ export class CollectionDockingView extends CollectionViewBase { private _containerRef = React.createRef(); @computed private get modelForFlexLayout() { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetData(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] }; @@ -40,8 +40,8 @@ export class CollectionDockingView extends CollectionViewBase { }); } @computed - private get modelForGoldenLayout(): any { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + private get modelForGoldenLayout(): GoldenLayout { + const { fieldKey: fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetData(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc, scaling: 1 } }; @@ -92,7 +92,7 @@ export class CollectionDockingView extends CollectionViewBase { if (component === "button") { return ; } - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetData(fieldKey, ListField, []); for (var i: number = 0; i < value.length; i++) { if (value[i].Id === component) { @@ -101,7 +101,7 @@ export class CollectionDockingView extends CollectionViewBase { ScreenToLocalTransform={() => Transform.Identity} isTopMost={true} Scaling={1} - ContainingCollectionView={this} DocumentView={undefined} />); + ContainingCollectionView={this} />); } } if (component === "text") { @@ -262,9 +262,10 @@ export class CollectionDockingView extends CollectionViewBase { render() { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, Document: Document } = this.props; 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. + // tfs: we should be able to use this.props.ScreenToLocalTransform to get s right? 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; @@ -314,7 +315,7 @@ export class RenderClass extends React.Component { return this.props.CollectionDockingView.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale) }} isTopMost={true} - ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} /> + ContainingCollectionView={this.props.CollectionDockingView} /> if (nativeWidth > 0 && (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) { return { @@ -105,8 +105,8 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble && this.active) { e.preventDefault(); e.stopPropagation(); - let x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0); - let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0); + let x = this.props.Document.GetNumber(KeyStore.PanX, 0); + let y = this.props.Document.GetNumber(KeyStore.PanY, 0); let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); this.SetPan(x + dx, y + dy); @@ -131,7 +131,7 @@ export class CollectionFreeFormView extends CollectionViewBase { let localTransform = this.getLocalTransform(); localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y) - this.props.DocumentForCollection.SetNumber(KeyStore.Scale, localTransform.Scale); + this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale); this.SetPan(localTransform.TranslateX, localTransform.TranslateY); } @@ -139,8 +139,8 @@ export class CollectionFreeFormView extends CollectionViewBase { private SetPan(panX: number, panY: number) { const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX)); const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY)); - this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); - this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); + this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX); + this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY); } @action @@ -150,8 +150,8 @@ export class CollectionFreeFormView extends CollectionViewBase { let fReader = new FileReader() let file = e.dataTransfer.items[0].getAsFile(); let that = this; - const panx: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0); - const pany: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0); + const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0); + const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0); let x = e.pageX - panx let y = e.pageY - pany @@ -161,11 +161,11 @@ export class CollectionFreeFormView extends CollectionViewBase { let doc = Documents.ImageDocument(url, { x: x, y: y }) - let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField); + let docs = that.props.Document.GetT(KeyStore.Data, ListField); if (docs != FieldWaiting) { if (!docs) { docs = new ListField(); - that.props.DocumentForCollection.Set(KeyStore.Data, docs) + that.props.Document.Set(KeyStore.Data, docs) } docs.Data.push(doc); } @@ -182,7 +182,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action bringToFront(doc: DocumentView) { - const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; + const { fieldKey: fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetList(fieldKey, []); var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000); @@ -200,14 +200,14 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get translate(): [number, number] { - const x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0); - const y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0); + const x = this.props.Document.GetNumber(KeyStore.PanX, 0); + const y = this.props.Document.GetNumber(KeyStore.PanY, 0); return [x, y]; } @computed get scale(): number { - return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); + return this.props.Document.GetNumber(KeyStore.Scale, 1); } getTransform = (): Transform => { @@ -220,8 +220,8 @@ export class CollectionFreeFormView extends CollectionViewBase { } render() { - const Document: Document = this.props.DocumentForCollection; - const value: Document[] = Document.GetList(this.props.CollectionFieldKey, []); + const Document: Document = this.props.Document; + const value: Document[] = Document.GetList(this.props.fieldKey, []); const panx: number = Document.GetNumber(KeyStore.PanX, 0); const pany: number = Document.GetNumber(KeyStore.PanY, 0); var me = this; @@ -249,7 +249,7 @@ export class CollectionFreeFormView extends CollectionViewBase { ScreenToLocalTransform={this.getTransform} isTopMost={false} Scaling={1} - ContainingCollectionView={this} DocumentView={this.props.ContainingDocumentView} />); + ContainingCollectionView={this} />); })} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9a0ce0782..5c95aca99 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -104,7 +104,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView render() { - const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props; + const { Document: Document, fieldKey: fieldKey } = this.props; const children = Document.GetList(fieldKey, []); const columns = Document.GetList(KS.ColumnsKey, [KS.Title, KS.Data, KS.Author]) @@ -126,7 +126,7 @@ export class CollectionSchemaView extends CollectionViewBase { ScreenToLocalTransform={() => Transform.Identity}//TODO This should probably be an actual transform Scaling={this._parentScaling} isTopMost={false} - DocumentView={undefined} ContainingCollectionView={me} /> + ContainingCollectionView={me} /> } diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx index 4cbafe950..5dd10722d 100644 --- a/src/client/views/collections/CollectionViewBase.tsx +++ b/src/client/views/collections/CollectionViewBase.tsx @@ -14,15 +14,14 @@ import { Transform } from "../../util/Transform"; export interface CollectionViewProps { - CollectionFieldKey: Key; - DocumentForCollection: Document; + fieldKey: Key; + Document: Document; ContainingDocumentView: Opt; ScreenToLocalTransform: () => Transform; isSelected: () => boolean; isTopMost: boolean; select: (ctrlPressed: boolean) => void; BackgroundView?: () => JSX.Element; - ParentScaling: number; } export const COLLECTION_BORDER_WIDTH = 2; @@ -31,8 +30,8 @@ export const COLLECTION_BORDER_WIDTH = 2; export class CollectionViewBase extends React.Component { public static LayoutString(collectionType: string, fieldKey: string = "DataKey") { - return `<${collectionType} Scaling={Scaling} DocumentForCollection={Document} - ScreenToLocalTransform={ScreenToLocalTransform} CollectionFieldKey={${fieldKey}} isSelected={isSelected} select={select} + return `<${collectionType} Document={Document} + ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} isTopMost={isTopMost} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`; } @@ -46,14 +45,14 @@ export class CollectionViewBase extends React.Component { @action addDocument = (doc: Document): void => { //TODO This won't create the field if it doesn't already exist - const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array()) + const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) value.push(doc); } @action removeDocument = (doc: Document): boolean => { //TODO This won't create the field if it doesn't already exist - const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array()) + const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array()) let index = value.indexOf(doc); if (index !== -1) { value.splice(index, 1) diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f368fdeaf..14268c644 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -21,7 +21,6 @@ import { TextField } from "../../../fields/TextField"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? export interface DocumentViewProps { - DocumentView: Opt // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way? ContainingCollectionView: Opt; Document: Document; @@ -29,6 +28,7 @@ export interface DocumentViewProps { RemoveDocument?: (doc: Document) => boolean; ScreenToLocalTransform: () => Transform; isTopMost: boolean; + //tfs: This shouldn't be necessary I don't think Scaling: number; } @@ -198,12 +198,13 @@ export class DocumentView extends React.Component { // // returns the cumulative scaling between the document and the screen + // tfs: I don't think this should be necessary // @computed public get ScalingToScreenSpace(): number { if (this.props.ContainingCollectionView != undefined && this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) { - let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); + let ss = this.props.ContainingCollectionView.props.Document.GetNumber(KeyStore.Scale, 1); return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss; } return 1; @@ -229,6 +230,7 @@ export class DocumentView extends React.Component { bindings[key.Name] = field && field != FieldWaiting ? field.GetValue() : field; } /* + tfs: Should this be moved to CollectionFreeformView or another component that renders Document backgrounds (or contents based on a layout key, which could be used here as well) that CollectionFreeformView uses? It seems like a lot for it to be here considering only one view currently uses it... @@ -245,6 +247,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 39e1e9f550be2ae128a32f58f35da40e09f54345 Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Tue, 19 Feb 2019 06:25:29 -0500 Subject: Fixed bug with resizing --- src/client/views/DocumentDecorations.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 62a1899bb..48f5f01a1 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -127,16 +127,14 @@ export class DocumentDecorations extends React.Component { let width = doc.GetOrCreate(KeyStore.Width, NumberField); let height = doc.GetOrCreate(KeyStore.Height, NumberField); let x = doc.GetOrCreate(KeyStore.X, NumberField); - let y = doc.GetOrCreate(KeyStore.X, NumberField); + let y = doc.GetOrCreate(KeyStore.Y, NumberField); let scale = width.Data / rect.width; let actualdW = Math.max(width.Data + (dW * scale), 20); let actualdH = Math.max(height.Data + (dH * scale), 20); x.Data += dX * (actualdW - width.Data); y.Data += dY * (actualdH - height.Data); - if (Math.abs(dW) > Math.abs(dH)) - width.Data = actualdW; - else - height.Data = actualdH; + width.Data = actualdW; + height.Data = actualdH; } }) } -- cgit v1.2.3-70-g09d2 From f80cddf158c6a43259d68ed0be9bfe084d464b4a Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 19 Feb 2019 09:29:34 -0500 Subject: converted docking collection to use a GoldenLayout layout string for its data --- src/client/documents/Documents.ts | 1 + src/client/views/Main.tsx | 2 + .../views/collections/CollectionDockingView.tsx | 79 ++++++---------------- 3 files changed, 25 insertions(+), 57 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 72fa608ad..36119e552 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -169,6 +169,7 @@ export namespace Documents { export function CollectionDocument(documents: Array, options: DocumentOptions = {}): Document { let doc = GetCollectionPrototype().MakeDelegate(); + Server.AddDocument(doc); setupOptions(doc, options); doc.Set(KeyStore.Data, new ListField(documents)); return doc; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index c3a9f1906..933c904fb 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -76,6 +76,8 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { // mainNodes.Data.push(doc1); // mainNodes.Data.push(doc2); mainNodes.Data.push(doc6); + var layoutstr = `{"settings":{"hasHeaders":true,"constrainDragToContainer":true,"reorderEnabled":true,"selectionEnabled":true,"popoutWholeStack":false,"blockedPopoutsThrowError":true,"closePopoutsOnUnload":true,"showPopoutIcon":true,"showMaximiseIcon":true,"showCloseIcon":true,"responsiveMode":"onload","tabOverlapAllowance":0,"reorderOnTabMenuClick":true,"tabControlOffset":10},"dimensions":{"borderWidth":5,"borderGrabWidth":15,"minItemHeight":10,"minItemWidth":10,"headerHeight":20,"dragProxyWidth":300,"dragProxyHeight":200},"labels":{"close":"close","maximise":"maximise","minimise":"minimise","popout":"open in new window","popin":"pop in","tabDropdown":"additional tabs"},"content":[{"type":"row","isClosable":true,"reorderEnabled":true,"title":"","content":[{"type":"stack","width":33.333333333333336,"isClosable":true,"reorderEnabled":true,"title":"","activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc3.Id}","title":"mini collection","scaling":1},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]},{"type":"stack","width":33.333333333333336,"isClosable":true,"reorderEnabled":true,"title":"","activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc6.Id}","title":"","scaling":1},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]},{"type":"stack","width":16.666666666666668,"isClosable":true,"reorderEnabled":true,"title":"","activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc4.Id}","title":"docking collection","scaling":1},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]},{"type":"stack","isClosable":true,"reorderEnabled":true,"title":"","width":16.666666666666668,"activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc4.Id}","title":"hello"},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]}]}],"isClosable":true,"reorderEnabled":true,"title":"","openPopouts":[],"maximisedItemId":null}` + mainContainer.SetText(KeyStore.Data, layoutstr) } //} //); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 05e1ea90a..4c83186f8 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -16,6 +16,8 @@ import React = require("react"); import * as ReactDOM from 'react-dom'; import Measure from "react-measure"; import { Utils } from "../../../Utils"; +import { FieldId } from "../../../fields/Field"; +import { Server } from "../../Server"; @observer export class CollectionDockingView extends CollectionViewBase { @@ -24,27 +26,15 @@ export class CollectionDockingView extends CollectionViewBase { public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); } private _containerRef = React.createRef(); @computed - private get modelForFlexLayout() { - const { fieldKey: fieldKey, Document: Document } = this.props; - const value: Document[] = Document.GetData(fieldKey, ListField, []); - var docs = value.map(doc => { - return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] }; - }); - return FlexLayout.Model.fromJson({ - global: {}, borders: [], - layout: { - "type": "row", - "weight": 100, - "children": docs - } - }); - } - @computed private get modelForGoldenLayout(): GoldenLayout { + var json = this.props.Document.GetText(KeyStore.Data, ""); + if (json != "") { + return new GoldenLayout(JSON.parse(json)) + } const { fieldKey: fieldKey, Document: Document } = this.props; const value: Document[] = Document.GetData(fieldKey, ListField, []); var docs = value.map(doc => { - return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc, scaling: 1 } }; + return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc.Id, title: doc.Title, scaling: 1 } }; }); return new GoldenLayout({ settings: { @@ -87,28 +77,6 @@ export class CollectionDockingView extends CollectionViewBase { } } - flexLayoutFactory = (node: any): any => { - var component = node.getComponent(); - if (component === "button") { - return ; - } - const { fieldKey: fieldKey, Document: Document } = this.props; - const value: Document[] = Document.GetData(fieldKey, ListField, []); - for (var i: number = 0; i < value.length; i++) { - if (value[i].Id === component) { - return ( Transform.Identity} - isTopMost={true} - Scaling={1} - ContainingCollectionView={this} />); - } - } - if (component === "text") { - return (
Panel {node.getName()}
); - } - } - public static myLayout: any = null; private static _dragDiv: any = null; @@ -119,7 +87,7 @@ export class CollectionDockingView extends CollectionViewBase { var newItemConfig = { type: 'component', componentName: 'documentViewComponent', - componentState: { doc: dragDoc, scaling: 1 } + componentState: { doc: dragDoc.Id, title: dragDoc.Title, scaling: 1 } }; this._dragElement = dragElement; this._dragParent = dragElement.parentElement; @@ -149,7 +117,7 @@ export class CollectionDockingView extends CollectionViewBase { var newItemConfig = { type: 'component', componentName: 'documentViewComponent', - componentState: { doc: document } + componentState: { doc: document.Id, title: document.Title } }; CollectionDockingView.myLayout._makeFullScreen = true; CollectionDockingView.myLayout.root.contentItems[0].addChild(newItemConfig); @@ -167,7 +135,7 @@ export class CollectionDockingView extends CollectionViewBase { var newItemConfig = { type: 'component', componentName: 'documentViewComponent', - componentState: { doc: document } + componentState: { doc: document.Id, title: document.Title } } let newItemStackConfig = { type: 'stack', @@ -196,6 +164,8 @@ export class CollectionDockingView extends CollectionViewBase { newContentItem.config["width"] = 50; collayout.parent.callDownwards('setSize'); } + var state = JSON.stringify(CollectionDockingView.myLayout.toConfig()); + console.log(state); } goldenLayoutFactory() { CollectionDockingView.myLayout = this.modelForGoldenLayout; @@ -209,7 +179,7 @@ export class CollectionDockingView extends CollectionViewBase { DragManager.Root().removeChild(CollectionDockingView._dragDiv); CollectionDockingView._dragDiv = null; } - tab.setTitle(tab.contentItem.config.componentState.doc.Title); + tab.setTitle(tab.contentItem.config.componentState.title); tab.closeElement.off('click') //unbind the current click handler .click(function () { tab.contentItem.remove(); @@ -244,7 +214,7 @@ export class CollectionDockingView extends CollectionViewBase { if (divContainer) { let props: DockingProps = { ContainingDiv: containingDiv, - Document: state.doc, + DocumentId: state.doc, Container: container, CollectionDockingView: me, HtmlElement: divContainer, @@ -269,12 +239,6 @@ export class CollectionDockingView extends CollectionViewBase { 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 chooseLayout = () => { - if (!CollectionDockingView.UseGoldenLayout) - return ; - } - return ( + }} /> ); } } interface DockingProps { ContainingDiv: string, - Document: Document, + DocumentId: FieldId, Container: any, HtmlElement: HTMLElement, CollectionDockingView: CollectionDockingView, @@ -302,11 +264,14 @@ export class RenderClass extends React.Component { @observable private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView + @computed + private get Document() { return Server.GetField(this.props.DocumentId) as Document } + render() { - let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); - var layout = this.props.Document.GetText(KeyStore.Layout, ""); + let nativeWidth = this.Document.GetNumber(KeyStore.NativeWidth, 0); + var layout = this.Document.GetText(KeyStore.Layout, ""); var content = - Date: Tue, 19 Feb 2019 11:13:22 -0500 Subject: added layout saving/loading to collectiondockingview & cleaned up to use react-component --- src/client/documents/Documents.ts | 4 +- src/client/views/Main.tsx | 82 +++--- .../views/collections/CollectionDockingView.tsx | 303 +++++++++------------ src/client/views/nodes/DocumentView.tsx | 8 +- 4 files changed, 174 insertions(+), 223 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 36119e552..f954b37a8 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -107,10 +107,10 @@ export namespace Documents { return dockProto; } - export function DockDocument(documents: Array, options: DocumentOptions = {}): Document { + export function DockDocument(config: string, options: DocumentOptions = {}): Document { let doc = GetDockPrototype().MakeDelegate(); setupOptions(doc, options); - doc.Set(KeyStore.Data, new ListField(documents)); + doc.SetText(KeyStore.Data, config); return doc; } diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 933c904fb..a86fdb9b0 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -14,6 +14,7 @@ import { ContextMenu } from './ContextMenu'; import { DocumentView } from './nodes/DocumentView'; import { ImageField } from '../../fields/ImageField'; import { Transform } from '../util/Transform'; +import { CollectionDockingView } from './collections/CollectionDockingView'; configure({ @@ -21,9 +22,6 @@ configure({ }); const mainNodeCollection = new Array(); -let mainContainer = Documents.DockDocument(mainNodeCollection, { - x: 0, y: 0, title: "main container" -}) window.addEventListener("drop", function (e) { e.preventDefault(); @@ -38,49 +36,41 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) { }), true) -//runInAction(() => -{ - let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 }); - let doc2 = doc1.MakeDelegate(); - doc2.Set(KS.X, new NumberField(150)); - doc2.Set(KS.Y, new NumberField(20)); - let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 450, y: 100, title: "dog", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 - }); - //doc3.Set(KeyStore.Data, new ImageField); - const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { - x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386 - })); - schemaDocs.push(doc3); - schemaDocs[0].SetData(KS.Author, "Tyler", TextField); - schemaDocs[4].SetData(KS.Author, "Bob", TextField); - schemaDocs.push(doc2); - const doc7 = Documents.SchemaDocument(schemaDocs) - const docset = [doc1, doc2, doc3, doc7]; - let doc4 = Documents.CollectionDocument(docset, { - x: 0, y: 400, title: "mini collection" - }); - // let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { - // x: 650, y: 500, width: 600, height: 600, title: "cat 2" - // }); - let docset2 = [doc3, doc4, doc2]; - 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); - mainNodes.Data.push(doc4); - mainNodes.Data.push(doc3); - // mainNodes.Data.push(doc5); - // mainNodes.Data.push(doc1); - // mainNodes.Data.push(doc2); - mainNodes.Data.push(doc6); - var layoutstr = `{"settings":{"hasHeaders":true,"constrainDragToContainer":true,"reorderEnabled":true,"selectionEnabled":true,"popoutWholeStack":false,"blockedPopoutsThrowError":true,"closePopoutsOnUnload":true,"showPopoutIcon":true,"showMaximiseIcon":true,"showCloseIcon":true,"responsiveMode":"onload","tabOverlapAllowance":0,"reorderOnTabMenuClick":true,"tabControlOffset":10},"dimensions":{"borderWidth":5,"borderGrabWidth":15,"minItemHeight":10,"minItemWidth":10,"headerHeight":20,"dragProxyWidth":300,"dragProxyHeight":200},"labels":{"close":"close","maximise":"maximise","minimise":"minimise","popout":"open in new window","popin":"pop in","tabDropdown":"additional tabs"},"content":[{"type":"row","isClosable":true,"reorderEnabled":true,"title":"","content":[{"type":"stack","width":33.333333333333336,"isClosable":true,"reorderEnabled":true,"title":"","activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc3.Id}","title":"mini collection","scaling":1},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]},{"type":"stack","width":33.333333333333336,"isClosable":true,"reorderEnabled":true,"title":"","activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc6.Id}","title":"","scaling":1},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]},{"type":"stack","width":16.666666666666668,"isClosable":true,"reorderEnabled":true,"title":"","activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc4.Id}","title":"docking collection","scaling":1},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]},{"type":"stack","isClosable":true,"reorderEnabled":true,"title":"","width":16.666666666666668,"activeItemIndex":0,"content":[{"type":"component","componentName":"documentViewComponent","componentState":{"doc":"${doc4.Id}","title":"hello"},"isClosable":true,"reorderEnabled":true,"title":"documentViewComponent"}]}]}],"isClosable":true,"reorderEnabled":true,"title":"","openPopouts":[],"maximisedItemId":null}` - mainContainer.SetText(KeyStore.Data, layoutstr) -} -//} -//); +let doc1 = Documents.TextDocument({ title: "hello", width: 400, height: 300 }); +let doc2 = doc1.MakeDelegate(); +doc2.Set(KS.X, new NumberField(150)); +doc2.Set(KS.Y, new NumberField(20)); +let doc3 = Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { + x: 450, y: 100, title: "dog", width: 606, height: 386, nativeWidth: 606, nativeHeight: 386 +}); +//doc3.Set(KeyStore.Data, new ImageField); +const schemaDocs = Array.from(Array(5).keys()).map(v => Documents.ImageDocument("https://psmag.com/.image/t_share/MTMyNzc2NzM1MDY1MjgzMDM4/shutterstock_151341212jpg.jpg", { + x: 50 + 100 * v, y: 50, width: 100, height: 100, title: "cat" + v, nativeWidth: 606, nativeHeight: 386 +})); +schemaDocs.push(doc3); +schemaDocs[0].SetData(KS.Author, "Tyler", TextField); +schemaDocs[4].SetData(KS.Author, "Bob", TextField); +schemaDocs.push(doc2); +const doc7 = Documents.SchemaDocument(schemaDocs) +const docset = [doc1, doc2, doc3, doc7]; +let doc4 = Documents.CollectionDocument(docset, { + x: 0, y: 400, title: "mini collection" +}); +// let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { +// x: 650, y: 500, width: 600, height: 600, title: "cat 2" +// }); +let docset2 = [doc3, doc4, doc2]; +let doc6 = Documents.CollectionDocument(docset2, { + x: 350, y: 100, width: 600, height: 600, title: "docking collection" +}); + +var docs = [doc4, doc3, doc6].map(doc => CollectionDockingView.makeDocumentConfig(doc)); +var config = { + settings: { selectionEnabled: false }, content: [{ type: 'row', content: docs }] +}; +let mainContainer = Documents.DockDocument(JSON.stringify(config), { + x: 0, y: 0, title: "main container" +}) ReactDOM.render((
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 4c83186f8..9cc92712e 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,4 +1,3 @@ -import FlexLayout from "flexlayout-react"; import * as GoldenLayout from "golden-layout"; import 'golden-layout/src/css/goldenlayout-base.css'; import 'golden-layout/src/css/goldenlayout-dark-theme.css'; @@ -8,7 +7,6 @@ import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/Key"; import { ListField } from "../../../fields/ListField"; 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"; @@ -22,73 +20,37 @@ import { Server } from "../../Server"; @observer export class CollectionDockingView extends CollectionViewBase { - private static UseGoldenLayout = true; + public static Instance: CollectionDockingView; public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); } - private _containerRef = React.createRef(); - @computed - private get modelForGoldenLayout(): GoldenLayout { - var json = this.props.Document.GetText(KeyStore.Data, ""); - if (json != "") { - return new GoldenLayout(JSON.parse(json)) - } - const { fieldKey: fieldKey, Document: Document } = this.props; - const value: Document[] = Document.GetData(fieldKey, ListField, []); - var docs = value.map(doc => { - return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc.Id, title: doc.Title, scaling: 1 } }; - }); - return new GoldenLayout({ - settings: { - selectionEnabled: true - }, content: [{ type: 'row', content: docs }] - }); - } - constructor(props: CollectionViewProps) { - super(props); - } - - componentDidMount: () => void = () => { - if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) { - this.goldenLayoutFactory(); - window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window + public static makeDocumentConfig(document: Document) { + return { + type: 'react-component', + component: 'DocumentFrameRenderer', + title: document.Title, + props: { + documentId: document.Id, + CollectionDockingView: CollectionDockingView.Instance, + } } } - componentWillUnmount: () => void = () => { - window.removeEventListener('resize', this.onResize); - } - private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })(); - - @action - onResize = (event: any) => { - var cur = this.props.ContainingDocumentView!.MainContent.current; - // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed - CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); - } + private _goldenLayout: any = null; + private _dragDiv: any = null; + private _dragParent: HTMLElement | null = null; + private _dragElement: HTMLDivElement | undefined; + private _dragFakeElement: HTMLDivElement | undefined; + private _containerRef = React.createRef(); + private _makeFullScreen: boolean = false; + private _maximizedStack: any = null; - @action - onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 2 && this.active) { - e.stopPropagation(); - e.preventDefault(); - } else { - if (e.buttons === 1 && this.active) { - e.stopPropagation(); - } - } + constructor(props: CollectionViewProps) { + super(props); + CollectionDockingView.Instance = this; + (window as any).React = React; + (window as any).ReactDOM = ReactDOM; } - public static myLayout: any = null; - - private static _dragDiv: any = null; - private static _dragParent: HTMLElement | null = null; - private static _dragElement: HTMLDivElement; - private static _dragFakeElement: HTMLDivElement; - public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) { - var newItemConfig = { - type: 'component', - componentName: 'documentViewComponent', - componentState: { doc: dragDoc.Id, title: dragDoc.Title, scaling: 1 } - }; + public StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) { this._dragElement = dragElement; this._dragParent = dragElement.parentElement; // bcz: we want to copy this document into the header, not move it there. @@ -98,7 +60,7 @@ export class CollectionDockingView extends CollectionViewBase { this._dragDiv = document.createElement("div"); this._dragDiv.style.opacity = 0; DragManager.Root().appendChild(this._dragDiv); - CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig); + this._goldenLayout.createDragSource(this._dragDiv, CollectionDockingView.makeDocumentConfig(dragDoc)); // - add our document to that div so that GoldenLayout will get the move events its listening for this._dragDiv.appendChild(this._dragElement); @@ -111,40 +73,29 @@ export class CollectionDockingView extends CollectionViewBase { // all of this must be undone when the document has been dropped (see tabCreated) } - _makeFullScreen: boolean = false; - _maximizedStack: any = null; - public static OpenFullScreen(document: Document) { - var newItemConfig = { - type: 'component', - componentName: 'documentViewComponent', - componentState: { doc: document.Id, title: document.Title } - }; - CollectionDockingView.myLayout._makeFullScreen = true; - CollectionDockingView.myLayout.root.contentItems[0].addChild(newItemConfig); + public OpenFullScreen(document: Document) { + this._makeFullScreen = true; + this._goldenLayout.root.contentItems[0].addChild(CollectionDockingView.makeDocumentConfig(document)); } - public static CloseFullScreen() { - if (CollectionDockingView.myLayout._maximizedStack != null) { - CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click(); - CollectionDockingView.myLayout._maximizedStack = null; + public CloseFullScreen() { + if (this._maximizedStack) { + this._maximizedStack.header.controlsContainer.find('.lm_close').click(); + this._maximizedStack = null; } } + // // Creates a vertical split on the right side of the docking view, and then adds the Document to that split // - public static AddRightSplit(document: Document) { - var newItemConfig = { - type: 'component', - componentName: 'documentViewComponent', - componentState: { doc: document.Id, title: document.Title } - } + public AddRightSplit(document: Document) { let newItemStackConfig = { type: 'stack', - content: [newItemConfig] + content: [CollectionDockingView.makeDocumentConfig(document)] }; - var newContentItem = new CollectionDockingView.myLayout._typeToItem[newItemStackConfig.type](CollectionDockingView.myLayout, newItemStackConfig, parent); + var newContentItem = new this._goldenLayout._typeToItem[newItemStackConfig.type](this._goldenLayout, newItemStackConfig, parent); - if (CollectionDockingView.myLayout.root.contentItems[0].isRow) { - var rowlayout = CollectionDockingView.myLayout.root.contentItems[0]; + if (this._goldenLayout.root.contentItems[0].isRow) { + var rowlayout = this._goldenLayout.root.contentItems[0]; var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1]; lastRowItem.config["width"] *= 0.5; @@ -153,8 +104,8 @@ export class CollectionDockingView extends CollectionViewBase { rowlayout.callDownwards('setSize'); } else { - var collayout = CollectionDockingView.myLayout.root.contentItems[0]; - var newRow = collayout.layoutManager.createContentItem({ type: "row" }, CollectionDockingView.myLayout); + var collayout = this._goldenLayout.root.contentItems[0]; + var newRow = collayout.layoutManager.createContentItem({ type: "row" }, this._goldenLayout); collayout.parent.replaceChild(collayout, newRow); newRow.addChild(newContentItem, undefined, true); @@ -164,70 +115,75 @@ export class CollectionDockingView extends CollectionViewBase { newContentItem.config["width"] = 50; collayout.parent.callDownwards('setSize'); } - var state = JSON.stringify(CollectionDockingView.myLayout.toConfig()); - console.log(state); } - goldenLayoutFactory() { - CollectionDockingView.myLayout = this.modelForGoldenLayout; - var layout = CollectionDockingView.myLayout; - CollectionDockingView.myLayout.on('tabCreated', function (tab: any) { - if (CollectionDockingView._dragDiv) { - CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement); - CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement); - CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement); - DragManager.Root().removeChild(CollectionDockingView._dragDiv); - CollectionDockingView._dragDiv = null; + componentDidMount: () => void = () => { + if (this._containerRef.current) { + + this._goldenLayout = new GoldenLayout(JSON.parse(this.props.Document.GetText(KeyStore.Data, ""))); + this._goldenLayout.on('tabCreated', this.tabCreated); + this._goldenLayout.on('stackCreated', this.stackCreated); + this._goldenLayout.registerComponent('DocumentFrameRenderer', DockedFrameRenderer); + this._goldenLayout.container = this._containerRef.current; + this._goldenLayout.init(); + + window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window + } + } + componentWillUnmount: () => void = () => { + window.removeEventListener('resize', this.onResize); + } + @action + onResize = (event: any) => { + var cur = this.props.ContainingDocumentView!.MainContent.current; + + // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed + this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); + } + + @action + onPointerDown = (e: React.PointerEvent): void => { + if (e.button === 2 && this.active) { + e.stopPropagation(); + e.preventDefault(); + } else { + if (e.buttons === 1 && this.active) { + e.stopPropagation(); } - tab.setTitle(tab.contentItem.config.componentState.title); - tab.closeElement.off('click') //unbind the current click handler - .click(function () { - tab.contentItem.remove(); - }); - }); + } + } - CollectionDockingView.myLayout.on('stackCreated', function (stack: any) { - if (CollectionDockingView.myLayout._makeFullScreen) { - CollectionDockingView.myLayout._maximizedStack = stack; - CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise'); + tabCreated = (tab: any) => { + { + if (this._dragDiv) { + this._dragDiv.removeChild(this._dragElement); + this._dragParent!.removeChild(this._dragFakeElement!); + this._dragParent!.appendChild(this._dragElement!); + DragManager.Root().removeChild(this._dragDiv); + this._dragDiv = null; } - //stack.header.controlsContainer.find('.lm_popout').hide(); - stack.header.controlsContainer.find('.lm_close') //get the close icon - .off('click') //unbind the current click handler + //tab.setTitle(tab.contentItem.config.componentState.title); + tab.closeElement.off('click') //unbind the current click handler .click(function () { - //if (confirm('really close this?')) { - stack.remove(); - //} + tab.contentItem.remove(); }); - }); + } + } - var me = this; - CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) { - // bcz: this is crufty - // calling html() causes a div tag to be added in the DOM with id 'containingDiv'. - // Apparently, we need to wait to allow a live html div element to actually be instantiated. - // After a timeout, we lookup the live html div element and add our React DocumentView to it. - var containingDiv = "component_" + me.nextId(); - container.getElement().html("
"); - setTimeout(function () { - let divContainer = document.getElementById(containingDiv) as HTMLDivElement; - if (divContainer) { - let props: DockingProps = { - ContainingDiv: containingDiv, - DocumentId: state.doc, - Container: container, - CollectionDockingView: me, - HtmlElement: divContainer, - } - ReactDOM.render((), divContainer); - if (CollectionDockingView.myLayout._maxstack) { - CollectionDockingView.myLayout._maxstack.click(); - } - } - }, 0); - }); - CollectionDockingView.myLayout.container = this._containerRef.current; - CollectionDockingView.myLayout.init(); + stackCreated = (stack: any) => { + if (this._makeFullScreen) { + this._maximizedStack = stack; + setTimeout(function () { stack.header.controlsContainer.find('.lm_maximise').click() }, 10); + this._makeFullScreen = false; + } + //stack.header.controlsContainer.find('.lm_popout').hide(); + stack.header.controlsContainer.find('.lm_close') //get the close icon + .off('click') //unbind the current click handler + .click(function () { + //if (confirm('really close this?')) { + stack.remove(); + //} + }); } @@ -243,8 +199,8 @@ export class CollectionDockingView extends CollectionViewBase { ); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d1fd6fb22..f8770f020 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -80,7 +80,6 @@ export class DocumentView extends React.Component { onPointerDown = (e: React.PointerEvent): void => { this._downX = e.clientX; this._downY = e.clientY; - var me = this; if (e.shiftKey && e.buttons === 1) { CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document); e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From 190d0225d7bf605aa53847eb7beda5de72e753a8 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 19 Feb 2019 13:10:56 -0500 Subject: fixed circular reference for json docking views --- src/client/views/collections/CollectionDockingView.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 47ed25fa3..885a4bece 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -28,8 +28,7 @@ export class CollectionDockingView extends CollectionViewBase { component: 'DocumentFrameRenderer', title: document.Title, props: { - documentId: document.Id, - CollectionDockingView: CollectionDockingView.Instance, + documentId: document.Id } } } @@ -210,7 +209,6 @@ export class CollectionDockingView extends CollectionViewBase { interface DockedFrameProps { documentId: FieldId, - CollectionDockingView: CollectionDockingView, } @observer export class DockedFrameRenderer extends React.Component { @@ -224,7 +222,7 @@ export class DockedFrameRenderer extends React.Component { private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView @computed - private get Document() { return Server.GetField(this.props.documentId) as Document } + private get Document() { return Server.GetField(this.props.documentId, () => { }) as Document } render() { let nativeWidth = this.Document.GetNumber(KeyStore.NativeWidth, 0); @@ -237,11 +235,11 @@ export class DockedFrameRenderer extends React.Component { Scaling={this._parentScaling} ScreenToLocalTransform={() => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!); - var props = this.props.CollectionDockingView ? this.props.CollectionDockingView.props : CollectionDockingView.Instance.props; + var props = CollectionDockingView.Instance.props; return props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._parentScaling) }} isTopMost={true} - ContainingCollectionView={this.props.CollectionDockingView} /> + ContainingCollectionView={undefined} />
if (nativeWidth > 0 && -- cgit v1.2.3-70-g09d2 From 02f36f30593ba05cd3af166c17d30a67c69590c9 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 19 Feb 2019 16:00:41 -0500 Subject: clean up a bit. --- src/client/Server.ts | 14 -------- .../views/collections/CollectionDockingView.tsx | 38 ++++++++++++---------- src/client/views/nodes/DocumentView.tsx | 17 ++-------- src/fields/Document.ts | 4 +-- 4 files changed, 24 insertions(+), 49 deletions(-) (limited to 'src') diff --git a/src/client/Server.ts b/src/client/Server.ts index 76f182e41..3e61729ab 100644 --- a/src/client/Server.ts +++ b/src/client/Server.ts @@ -60,21 +60,7 @@ export class Server { }); } - static times = 0; // hack for testing public static GetDocumentField(doc: Document, key: Key) { - // let keyId: string = element[0] - // let valueId: string = element[1] - // Server.GetField(keyId, (key: Field) => { - // if (key instanceof Key) { - // Server.GetField(valueId, (field: Field) => { - // console.log(field) - // doc.Set(key as Key, field) - // }) - // } - // else { - // console.log("how did you get a key that isnt a key wtf") - // } - // }) let field = doc._proxies.get(key.Id); if (field) { this.GetField(field, diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 41fad9dac..abba0a6ae 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -1,7 +1,7 @@ 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, computed, observable, reaction, trace } from "mobx"; import { DragManager } from "../../util/DragManager"; import { DocumentView } from "../nodes/DocumentView"; import { Document } from "../../../fields/Document"; @@ -43,6 +43,8 @@ export class CollectionDockingView extends CollectionViewBase { private _containerRef = React.createRef(); private _makeFullScreen: boolean = false; private _maximizedStack: any = null; + private _pointerIsDown = false; // used to defer updating the document's layout state Data + private _deferredLayoutChange = ""; // the last deferred state change made that needs to be flushed on pointer up constructor(props: CollectionViewProps) { super(props); @@ -131,13 +133,9 @@ export class CollectionDockingView extends CollectionViewBase { } componentDidMount: () => void = () => { if (this._containerRef.current) { - reaction(() => { - if (this.props.Document.Get(KeyStore.Data) as TextField) { - return [(this.props.Document.Get(KeyStore.Data) as TextField).Data]; - } - return [this.props.Document.Get(KeyStore.Data)]; - }, () => this.setupGoldenLayout()); // should only react once when the Data field is retrieved from the sever .. after that, changes to the Data field will not trigger this reaction. - this.setupGoldenLayout(); + reaction( + () => this.props.Document.GetText(KeyStore.Data, ""), + () => this.setupGoldenLayout(), { fireImmediately: true }); window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window } @@ -147,14 +145,21 @@ export class CollectionDockingView extends CollectionViewBase { } @action onResize = (event: any) => { - var cur = this.props.ContainingDocumentView!.MainContent.current; + var cur = this._containerRef.current; // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); } + @action + onPointerUp = (e: PointerEvent): void => { + window.removeEventListener("pointerup", this.onPointerUp) + this._pointerIsDown = false; + } @action onPointerDown = (e: React.PointerEvent): void => { + window.addEventListener("pointerup", this.onPointerUp) + this._pointerIsDown = true; if (e.button === 2 && this.active) { e.stopPropagation(); e.preventDefault(); @@ -166,8 +171,10 @@ export class CollectionDockingView extends CollectionViewBase { } stateChanged = () => { - var json = JSON.stringify(this._goldenLayout.toConfig()); - this.props.Document.SetText(KeyStore.Data, json) + if (!this._pointerIsDown) { + var json = JSON.stringify(this._goldenLayout.toConfig()); + this.props.Document.SetText(KeyStore.Data, json) + } } tabCreated = (tab: any) => { @@ -202,13 +209,8 @@ export class CollectionDockingView extends CollectionViewBase { render() { - const { fieldKey: fieldKey, Document: Document } = this.props; - 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. - // tfs: we should be able to use this.props.ScreenToLocalTransform to get s right? - 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; + this.props.Document.GetNumber(KeyStore.Width, 0); // bcz: needed to force render when window size changes + this.props.Document.GetNumber(KeyStore.Height, 0); return (