diff options
Diffstat (limited to 'src')
4 files changed, 44 insertions, 24 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 725b68a54..1653994cf 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -7,7 +7,6 @@ import { observer } from "mobx-react"; 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"; @@ -15,6 +14,7 @@ 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"; @observer export class CollectionDockingView extends CollectionViewBase { @@ -66,7 +66,6 @@ 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; @@ -297,22 +296,27 @@ interface DockingProps { } @observer export class RenderClass extends React.Component<DockingProps> { - @observable _forceRerender = 0; - constructor(props: DockingProps) { - super(props); - this.props.Container.on('resize', action((e: any) => this._forceRerender++)); - } + @observable + private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView + render() { - let x = this._forceRerender; let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0); - let parentScaling = nativeWidth > 0 ? this.props.HtmlElement!.clientWidth / nativeWidth : 1; - return <div> + var layout = this.props.Document.GetText(KeyStore.Layout, ""); + var content = <DocumentView key={this.props.Document.Id} Document={this.props.Document} AddDocument={this.props.CollectionDockingView.addDocument} RemoveDocument={this.props.CollectionDockingView.removeDocument} GetTransform={() => Transform.Identity} - ParentScaling={parentScaling} + ParentScaling={this._parentScaling} ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} /> - </div> + + if (nativeWidth > 0 && (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) { + return <Measure onResize={ + action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)} + > + {({ measureRef }) => <div ref={measureRef}> {content} </div>} + </Measure> + } + return <div> {content} </div> } }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 37efc6b6c..633e3ca1b 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -6,7 +6,10 @@ width: 100%; height: 100%; .collectionfreeformview-container { - border-width: 0px !important + border-width: 0px; + .collectionfreeformview > .jsx-parser{ + position:absolute + } } .imageBox-cont { position:relative; @@ -44,9 +47,7 @@ object-fit: contain; height: 100% } - .documentView-node { - width:100% !important; - height:100% !important; + .documentView-node:first-child { background: grey; .imageBox-cont img { object-fit: contain; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index a2d6444b6..76706f520 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -11,10 +11,11 @@ import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBas import { DocumentView } from "../nodes/DocumentView"; import { EditableView } from "../EditableView"; import { CompileScript, ToField } from "../../util/Scripting"; -import { KeyStore as KS, Key } from "../../../fields/Key"; +import { KeyStore as KS, Key, KeyStore } from "../../../fields/Key"; import { Document } from "../../../fields/Document"; import { Field } from "../../../fields/Field"; import { Transform } from "../../util/Transform"; +import Measure from "react-measure"; @observer export class CollectionSchemaView extends CollectionViewBase { @@ -98,19 +99,35 @@ 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 children = Document.GetList<Document>(fieldKey, []); const columns = Document.GetList(KS.ColumnsKey, [KS.Title, KS.Data, KS.Author]) let content; + var me = this; if (this.selectedIndex != -1) { content = ( - <DocumentView Document={children[this.selectedIndex]} - AddDocument={this.addDocument} RemoveDocument={this.removeDocument} - GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform - ParentScaling={1} - DocumentView={undefined} ContainingCollectionView={this} /> + <Measure onResize={action((r: any) => { + var doc = children[this.selectedIndex]; + var n = doc.GetNumber(KeyStore.NativeWidth, 0); + if (n > 0 && r.entry.width > 0) { + this._parentScaling = r.entry.width / n; + } + })}> + {({ measureRef }) => + <div ref={measureRef}> + <DocumentView Document={children[this.selectedIndex]} + AddDocument={this.addDocument} RemoveDocument={this.removeDocument} + GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform + ParentScaling={this._parentScaling} + DocumentView={undefined} ContainingCollectionView={me} /> + </div> + } + </Measure> ) } else { content = <div /> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 55c8121d3..c5270e0cd 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -15,7 +15,6 @@ import "./DocumentView.scss"; import React = require("react"); import { Transform } from "../../util/Transform"; const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this? -import { CollectionFreeFormDocumentView } from '../../views/nodes/CollectionFreeFormDocumentView'; export interface DocumentViewProps { DocumentView: Opt<DocumentView> // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way? @@ -147,7 +146,6 @@ export class DocumentView extends React.Component<DocumentViewProps> { return { ScreenX: parentX, ScreenY: parentY }; } - render() { let bindings = { ...this.props } as any; for (const key of this.layoutKeys) { |