From a99cef9945c1c4f9e5ff07663fc6db5cda2dcd50 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 22 Jul 2020 16:27:27 -0500
Subject: added layout section

---
 src/client/views/collections/CollectionView.tsx    |  7 +-
 .../collectionFreeForm/PropertiesView.scss         | 15 +++-
 .../collectionFreeForm/PropertiesView.tsx          | 82 +++++++++++++++++++---
 3 files changed, 92 insertions(+), 12 deletions(-)

(limited to 'src')

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>;
     }
-- 
cgit v1.2.3-70-g09d2