diff options
Diffstat (limited to 'src/client/views/collections')
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 43 |
3 files changed, 44 insertions, 17 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index ceb638ab4..5e30c0390 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -242,6 +242,20 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { @observable private Document: Opt<Document>; + @action + setScaling = (r: any) => { + let nativeWidth = this.Document!.GetNumber(KeyStore.NativeWidth, 0); + let nativeHeight = this.Document!.GetNumber(KeyStore.NativeWidth, 0); + this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1; + this._nativeWidth = r.entry.width ? r.entry.width : nativeWidth; + this._nativeHeight = nativeWidth ? r.entry.width / nativeWidth * nativeHeight : nativeHeight; + } + + @observable + private _nativeWidth = 0; + @observable + private _nativeHeight = 0; + render() { if (!this.Document) return <div></div> @@ -253,6 +267,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { AddDocument={undefined} RemoveDocument={undefined} Scaling={this._parentScaling} + PanelSize={[this._nativeWidth, this._nativeHeight]} ScreenToLocalTransform={() => { let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont); var props = CollectionDockingView.Instance.props; @@ -264,7 +279,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> { if (nativeWidth > 0 && (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) { // contents of documents should be scaled if document is not a freeform view, or if the freeformview is an annotation layer (presumably on a document that is not a freeformview) - return <Measure onResize={action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}> + return <Measure onResize={this.setScaling}> {({ measureRef }) => <div ref={measureRef}> {content} </div>} </Measure> } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index a6f34dfdf..3a66ebb75 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -249,6 +249,7 @@ export class CollectionFreeFormView extends CollectionViewBase { ScreenToLocalTransform={this.getTransform} isTopMost={false} Scaling={1} + PanelSize={[doc.GetNumber(KeyStore.Width, 0), doc.GetNumber(KeyStore.Height, 0)]} ContainingCollectionView={this} />); })} </div> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index fa37e0e76..f3217d55d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -21,6 +21,8 @@ export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef<HTMLDivElement>(); + private DIVIDER_WIDTH = 5; + @observable selectedIndex = 0; @@ -116,27 +118,38 @@ export class CollectionSchemaView extends CollectionViewBase { } } - innerScreenToLocal(tx: number, ty: number) { - return () => this.props.ScreenToLocalTransform().transform(new Transform(-tx - 5 - COLLECTION_BORDER_WIDTH, -ty - COLLECTION_BORDER_WIDTH, 1)) + getTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._parentScaling); + } + + @action + setScaling = (r: any) => { + const children = this.props.Document.GetList<Document>(this.props.fieldKey, []); + const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; + this._panelWidth = r.entry.width; + this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight; + this._parentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width); } @observable _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView @observable _dividerX = 0; - @observable _dividerY = 0; + @observable _panelWidth = 0; + @observable _panelHeight = 0; render() { const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) const children = this.props.Document.GetList<Document>(this.props.fieldKey, []); const selected = children.length > this.selectedIndex ? children[this.selectedIndex] : undefined; let me = this; let content = this.selectedIndex == -1 || !selected ? (null) : ( - <Measure onResize={action((r: any) => this._parentScaling = r.entry.width / selected.GetNumber(KeyStore.NativeWidth, r.entry.width))}> + <Measure onResize={this.setScaling}> {({ measureRef }) => <div ref={measureRef}> <DocumentView Document={selected} AddDocument={this.addDocument} RemoveDocument={this.removeDocument} - ScreenToLocalTransform={this.innerScreenToLocal(me._dividerX, me._dividerY)}//TODO This should probably be an actual transform + ScreenToLocalTransform={this.getTransform} Scaling={this._parentScaling} isTopMost={false} + PanelSize={[this._panelWidth, this._panelHeight]} ContainingCollectionView={me} /> </div> } @@ -146,6 +159,7 @@ export class CollectionSchemaView extends CollectionViewBase { <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} > <Measure onResize={action((r: any) => { this._dividerX = r.entry.width; + this._panelHeight = r.entry.height; })}> {({ measureRef }) => <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}> @@ -154,14 +168,11 @@ export class CollectionSchemaView extends CollectionViewBase { pageSize={children.length} page={0} showPagination={false} - columns={columns.map(col => { - return ( - { - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }) - })} + columns={columns.map(col => ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} column={{ ...ReactTableDefaults.column, Cell: this.renderCell @@ -171,8 +182,8 @@ export class CollectionSchemaView extends CollectionViewBase { </div> } </Measure> - <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: "5px", height: "100%" }} onPointerDown={this.onDividerDown} /> - <div className="collectionSchemaView-previewRegion" style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - 5px)`, height: "100%" }}> + <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: `${this.DIVIDER_WIDTH}px`, height: "100%" }} onPointerDown={this.onDividerDown} /> + <div className="collectionSchemaView-previewRegion" style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}> {content} </div> </div > |