diff options
Diffstat (limited to 'src/views/collections')
| -rw-r--r-- | src/views/collections/CollectionDockingView.tsx | 20 | ||||
| -rw-r--r-- | src/views/collections/CollectionFreeFormView.tsx | 37 | ||||
| -rw-r--r-- | src/views/collections/CollectionSchemaView.tsx | 16 |
3 files changed, 37 insertions, 36 deletions
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index 177e3510a..197b7df46 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -4,7 +4,7 @@ import React = require("react"); import FlexLayout from "flexlayout-react"; import { action, observable, computed } from "mobx"; import { Document } from "../../fields/Document"; -import { DocumentView } from "../nodes/DocumentView"; +import { DocumentView, DocumentContentsView } from "../nodes/DocumentView"; import { ListField } from "../../fields/ListField"; import { NumberField } from "../../fields/NumberField"; import { SSL_OP_SINGLE_DH_USE } from "constants"; @@ -20,11 +20,11 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from export class CollectionDockingView extends CollectionViewBase { private static UseGoldenLayout = true; - public static LayoutString() { return '<CollectionDockingView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'; } + public static LayoutString() { return '<CollectionDockingView DocumentForCollection={Document} CollectionFieldKey={DataKey} DocumentContentsContainingCollection={ContainingDocumentContentsView}/>'; } private _containerRef = React.createRef<HTMLDivElement>(); @computed private get modelForFlexLayout() { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] }; @@ -40,7 +40,7 @@ export class CollectionDockingView extends CollectionViewBase { } @computed private get modelForGoldenLayout(): any { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); var docs = value.map(doc => { return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } }; @@ -69,7 +69,7 @@ export class CollectionDockingView extends CollectionViewBase { @action onResize = (event: any) => { - var cur = this.props.ContainingDocumentView!.MainContent.current; + var cur = this.props.DocumentContentsContainingCollection!.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); @@ -92,11 +92,11 @@ export class CollectionDockingView extends CollectionViewBase { if (component === "button") { return <button>{node.getName()}</button>; } - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(fieldKey, ListField, []); for (var i: number = 0; i < value.length; i++) { if (value[i].Id === component) { - return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} ContainingDocumentView={this.props.ContainingDocumentView} />); + return (<DocumentView key={value[i].Id} ContainingCollectionView={this} Document={value[i]} ContainingDocumentContentsView={this.props.DocumentContentsContainingCollection} />); } } if (component === "text") { @@ -237,7 +237,7 @@ export class CollectionDockingView extends CollectionViewBase { container.getElement().html("<div id='" + containingDiv + "'></div>"); setTimeout(function () { ReactDOM.render(( - <DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} /> + <DocumentContentsView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} ContainingDocumentContentsView={me.props.DocumentContentsContainingCollection} /> // bcz: need to fill in containingdoccontnents with value of DocumentContents when created... ), document.getElementById(containingDiv) ); @@ -252,10 +252,10 @@ export class CollectionDockingView extends CollectionViewBase { render() { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetFieldValue(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!.ScalingToScreenSpace; + var s = this.props.DocumentContentsContainingCollection != undefined ? this.props.DocumentContentsContainingCollection!.ScalingToScreenSpace : 1; var w = Document.GetFieldValue(KeyStore.Width, NumberField, Number(0)) / s; var h = Document.GetFieldValue(KeyStore.Height, NumberField, Number(0)) / s; diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx index ab2aeee64..d0dea7a79 100644 --- a/src/views/collections/CollectionFreeFormView.tsx +++ b/src/views/collections/CollectionFreeFormView.tsx @@ -15,6 +15,7 @@ import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from @observer export class CollectionFreeFormView extends CollectionViewBase { + public static LayoutString() { return '<CollectionFreeFormView DocumentForCollection={Document} CollectionFieldKey={DataKey} DocumentContentsContainingCollection={ContainingDocumentContentsView}/>'; } private _containerRef = React.createRef<HTMLDivElement>(); private _canvasRef = React.createRef<HTMLDivElement>(); private _nodeContainerRef = React.createRef<HTMLDivElement>(); @@ -36,14 +37,14 @@ export class CollectionFreeFormView extends CollectionViewBase { const xOffset = de.data["xOffset"] as number || 0; const yOffset = de.data["yOffset"] as number || 0; const { scale, translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!); - let sscale = this.props.ContainingDocumentView!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) + let sscale = this.props.DocumentContentsContainingCollection!.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1)) const screenX = de.x - xOffset; const screenY = de.y - yOffset; const docX = (screenX - translateX) / sscale / scale; const docY = (screenY - translateY) / sscale / scale; doc.x = docX; doc.y = docY; - this.bringToFront(doc); + //this.bringToFront(doc); } e.stopPropagation(); } @@ -82,11 +83,11 @@ export class CollectionFreeFormView extends CollectionViewBase { if (!e.cancelBubble) { e.preventDefault(); e.stopPropagation(); - let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace; - let x = this.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - let y = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); - this.props.Document.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); - this.props.Document.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); + let currScale: number = this.props.DocumentContentsContainingCollection!.ScalingToScreenSpace; + let x = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + let y = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, x + (e.pageX - this._lastX) / currScale, NumberField); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField); this._lastX = e.pageX; this._lastY = e.pageY; } @@ -96,7 +97,7 @@ export class CollectionFreeFormView extends CollectionViewBase { onPointerWheel = (e: React.WheelEvent): void => { e.stopPropagation(); - let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY); + let { LocalX, Ss, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY } = this.props.DocumentContentsContainingCollection!.TransformToLocalPoint(e.pageX, e.pageY); var deltaScale = (1 - (e.deltaY / 1000)) * Ss; @@ -106,9 +107,9 @@ export class CollectionFreeFormView extends CollectionViewBase { let dx = ContainerX - newContainerX; let dy = ContainerY - newContainerY; - this.props.Document.SetField(KeyStore.Scale, new NumberField(deltaScale)); - this.props.Document.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField); - this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); + this.props.DocumentForCollection.SetField(KeyStore.Scale, new NumberField(deltaScale)); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField); + this.props.DocumentForCollection.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField); } @action @@ -118,8 +119,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.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); - const pany: number = this.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); + const panx: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanX, NumberField, Number(0)); + const pany: number = this.props.DocumentForCollection.GetFieldValue(KeyStore.PanY, NumberField, Number(0)); let x = e.pageX - panx let y = e.pageY - pany @@ -129,10 +130,10 @@ export class CollectionFreeFormView extends CollectionViewBase { let doc = Documents.ImageDocument(url, { x: x, y: y }) - let docs = that.props.Document.GetFieldT(KeyStore.Data, ListField); + let docs = that.props.DocumentForCollection.GetFieldT(KeyStore.Data, ListField); if (!docs) { docs = new ListField<Document>(); - that.props.Document.SetField(KeyStore.Data, docs) + that.props.DocumentForCollection.SetField(KeyStore.Data, docs) } docs.Data.push(doc); } @@ -148,7 +149,7 @@ export class CollectionFreeFormView extends CollectionViewBase { @action bringToFront(doc: DocumentView) { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetListField<Document>(fieldKey, []); var topmost = value.reduce((topmost, d) => Math.max(d.GetNumberField(KeyStore.ZIndex, 0), topmost), -1000); @@ -165,7 +166,7 @@ export class CollectionFreeFormView extends CollectionViewBase { } render() { - const { fieldKey, Document: Document } = this.props; + const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props; const value: Document[] = Document.GetListField<Document>(fieldKey, []); const panx: number = Document.GetNumberField(KeyStore.PanX, 0); const pany: number = Document.GetNumberField(KeyStore.PanY, 0); @@ -186,7 +187,7 @@ export class CollectionFreeFormView extends CollectionViewBase { <div className="node-container" ref={this._nodeContainerRef}> {value.map(doc => { - return (<DocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} ContainingDocumentView={this.props.ContainingDocumentView} />); + return (<DocumentView key={doc.Id} ContainingCollectionView={this} Document={doc} ContainingDocumentContentsView={this.props.DocumentContentsContainingCollection} />); })} </div> </div> diff --git a/src/views/collections/CollectionSchemaView.tsx b/src/views/collections/CollectionSchemaView.tsx index 420a68cc9..f625b39c5 100644 --- a/src/views/collections/CollectionSchemaView.tsx +++ b/src/views/collections/CollectionSchemaView.tsx @@ -1,4 +1,4 @@ -import { DocumentContents } from "../nodes/DocumentView"; +import { DocumentContentsView } from "../nodes/DocumentView"; import React = require("react") import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table"; import { observer } from "mobx-react"; @@ -14,19 +14,19 @@ import { CollectionViewBase } from "./CollectionViewBase"; @observer export class CollectionSchemaView extends CollectionViewBase { - public static LayoutString() { return '<CollectionSchemaView Document={Document} fieldKey={DataKey} ContainingDocumentView={ContainingDocumentView}/>'; } + public static LayoutString() { return '<CollectionSchemaView DocumentForCollection={Document} CollectionFieldKey={DataKey} ContainingDocumentView={ContainingDocumentContentsView}/>'; } @observable selectedIndex = 0; renderCell = (rowProps: CellInfo) => { - if (!this.props.ContainingDocumentView) { + if (!this.props.DocumentContentsContainingCollection) { return <div></div> } let props: FieldViewProps = { doc: rowProps.value[0], fieldKey: rowProps.value[1], - documentViewContainer: this.props.ContainingDocumentView + documentViewContainer: this.props.DocumentContentsContainingCollection } return ( <FieldView {...props} /> @@ -71,15 +71,15 @@ export class CollectionSchemaView extends CollectionViewBase { } render() { - const { Document, fieldKey } = this.props; + const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props; const children = Document.GetListField<Document>(fieldKey, []); const columns = Document.GetListField(KS.ColumnsKey, [KS.Title, KS.Data, KS.Author]) let content; if (this.selectedIndex != -1) { - content = (<DocumentContents Document={children[this.selectedIndex]} - ContainingDocumentView={this.props.ContainingDocumentView} - ContainingCollectionView={undefined} />) + content = (<DocumentContentsView Document={children[this.selectedIndex]} + ContainingDocumentContentsView={this.props.DocumentContentsContainingCollection} + ContainingCollectionView={this} />) } else { content = <div /> } |
