diff options
3 files changed, 92 insertions, 12 deletions
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 616e7995d..eec68f9fc 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -588,7 +588,12 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus width: `${this.propertiesWidth()}px`, overflow: this.propertiesWidth() < 15 ? "hidden" : undefined }}> - <PropertiesView document={this.dataDoc} /> + <PropertiesView dataDoc={this.dataDoc} Document={this.props.Document} + width={this._propertiesWidth} + height={this.props.PanelHeight()} + renderDepth={this.props.renderDepth} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} + /> </div>; } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index bb5b80abd..e81b1eeb4 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -51,9 +51,18 @@ } .propertiesView-layout { - border-bottom: 1px solid black; padding: 8.5px; - font-size: 12.5px; - font-weight: bold; + + .propertiesView-layout-title { + font-weight: bold; + font-size: 12.5px; + padding-bottom: 7px; + } + + .propertiesView-layout-content { + margin-left: 5px; + overflow: hidden; + } + } }
\ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index bc78fccdf..27b0dbd9e 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -2,27 +2,58 @@ import React = require("react"); import { observer } from "mobx-react"; import "./PropertiesView.scss"; import { observable, action, computed } from "mobx"; -import { Doc, Field, DocListCast } from "../../../../fields/Doc"; +import { Doc, Field, DocListCast, WidthSym, HeightSym } from "../../../../fields/Doc"; import { DocumentView } from "../../nodes/DocumentView"; import { ComputedField } from "../../../../fields/ScriptField"; import { EditableView } from "../../EditableView"; import { KeyValueBox } from "../../nodes/KeyValueBox"; -import { Cast } from "../../../../fields/Types"; +import { Cast, StrCast, NumCast } from "../../../../fields/Types"; import { listSpec } from "../../../../fields/Schema"; +import { ContentFittingDocumentView } from "../../nodes/ContentFittingDocumentView"; +import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZero, returnEmptyFilter, Utils } from "../../../../Utils"; +import { Id } from "../../../../fields/FieldSymbols"; +import { Transform } from "../../../util/Transform"; interface PropertiesViewProps { - document: Doc; - //dataDoc: Doc; + dataDoc: Doc; + Document: Doc; + width: number; + height: number; + renderDepth: number; + ScreenToLocalTransform: () => Transform; //docView: DocumentView; } @observer export class PropertiesView extends React.Component<PropertiesViewProps> { + @computed get MAX_EMBED_HEIGHT() { return 200; } + + rtfWidth = () => Math.min(this.props.Document?.[WidthSym](), this.props.width - 20); + rtfHeight = () => this.rtfWidth() <= this.props.Document?.[WidthSym]() ? Math.min(this.props.Document?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; + + docWidth = () => { + const layoutDoc = this.props.Document; + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20)); + return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20; + } + docHeight = () => { + const layoutDoc = this.props.Document; + return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => { + const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]()); + if (aspect) return this.docWidth() * aspect; + return layoutDoc._fitWidth ? (!this.props.dataDoc._nativeHeight ? NumCast(this.props.height) : + Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth, + NumCast(this.props.height)))) : + NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50; + })())); + } + @computed get expandedField() { const ids: { [key: string]: string } = {}; - const doc = this.props.document; + const doc = this.props.dataDoc; doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key)); const rows: JSX.Element[] = []; @@ -47,7 +78,42 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get layoutPreview() { - return "layout"; + const layoutDoc = Doc.Layout(this.props.Document); + const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight; + const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth; + return <div style={{ display: "inline-block", height: panelHeight() }} key={this.props.dataDoc[Id]}> + <ContentFittingDocumentView + Document={layoutDoc} + DataDoc={this.props.dataDoc} + LibraryPath={emptyPath} + renderDepth={this.props.renderDepth + 1} + rootSelected={returnFalse} + treeViewDoc={undefined} + backgroundColor={() => "lightgrey"} + fitToBox={false} + FreezeDimensions={true} + NativeWidth={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero} + NativeHeight={layoutDoc.type === + StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero} + PanelWidth={panelWidth} + PanelHeight={panelHeight} + focus={returnFalse} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={undefined} + ContainingCollectionView={undefined} + addDocument={returnFalse} + moveDocument={undefined} + removeDocument={returnFalse} + parentActive={() => false} + whenActiveChanged={emptyFunction} + addDocTab={returnFalse} + pinToPres={emptyFunction} + bringToFront={returnFalse} + ContentScaling={returnOne} + /> + </div>; } render() { @@ -66,8 +132,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="propertiesView-fields-content"> {this.expandedField} </div> </div> <div className="propertiesView-layout"> - <div>Layout</div> - <div>{this.layoutPreview}</div> + <div className="propertiesView-layout-title" >Layout</div> + <div className="propertiesView-layout-content">{this.layoutPreview}</div> </div> </div>; } |