From 043fe3cb67003ddd0bc309b85e2b0dad353ed629 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 13 Dec 2020 13:58:56 -0500
Subject: more props cleanup.  Got rid of ItemBackgroundColor in favor of
 having StyleProvider choose style based on whether it's givena DocViewProp or
 a FieldViewProp.

---
 src/client/views/collections/collectionGrid/CollectionGridView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.tsx')

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 1a4eb8b7b..36ed72596 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -169,7 +169,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             PanelHeight={height}
             ContentScaling={returnOne}
             freezeDimensions={true}
-            fitToBox={true}
+            fitDocToPanel={true}
             ScreenToLocalTransform={dxf}
             onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
-- 
cgit v1.2.3-70-g09d2


From 9af7025b7c9e6181843594f5179166556041234c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 13 Dec 2020 18:05:45 -0500
Subject: removed ContentScaling={returnOne} from a lot of places

---
 src/client/views/DocumentDecorations.tsx           |  8 ++++----
 src/client/views/GestureOverlay.tsx                |  1 -
 src/client/views/MainView.tsx                      |  3 ---
 src/client/views/OverlayView.tsx                   |  1 -
 src/client/views/Palette.tsx                       |  1 -
 src/client/views/PropertiesView.tsx                |  1 -
 src/client/views/StyleProvider.tsx                 |  4 ++--
 .../views/collections/CollectionLinearView.tsx     |  1 -
 .../views/collections/CollectionSchemaView.tsx     |  1 -
 .../views/collections/CollectionStackingView.tsx   |  1 -
 .../views/collections/CollectionTreeView.tsx       |  1 -
 src/client/views/collections/SchemaTable.tsx       |  3 +--
 src/client/views/collections/TabDocView.tsx        |  1 -
 src/client/views/collections/TreeView.tsx          |  2 --
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  3 +--
 .../collectionGrid/CollectionGridView.tsx          |  1 -
 .../CollectionMulticolumnView.tsx                  |  1 -
 .../CollectionMultirowView.tsx                     |  1 -
 src/client/views/linking/LinkMenu.tsx              |  2 +-
 src/client/views/nodes/AudioBox.tsx                |  2 --
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 12 +++++------
 src/client/views/nodes/ComparisonBox.tsx           |  1 -
 src/client/views/nodes/DocHolderBox.tsx            |  4 +---
 src/client/views/nodes/DocumentContentsView.tsx    |  1 +
 src/client/views/nodes/DocumentIcon.tsx            |  2 +-
 src/client/views/nodes/DocumentView.tsx            | 24 ++++++++--------------
 src/client/views/nodes/FieldView.tsx               |  1 +
 src/client/views/nodes/LinkDocPreview.tsx          |  1 -
 src/client/views/nodes/PDFBox.tsx                  |  2 +-
 .../formattedText/FormattedTextBoxComment.tsx      |  1 -
 .../views/presentationview/PresElementBox.tsx      |  1 -
 src/mobile/AudioUpload.tsx                         |  1 -
 src/mobile/MobileInterface.tsx                     |  1 -
 33 files changed, 28 insertions(+), 63 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index d3b83352e..bce73c60e 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -136,8 +136,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
         const dragDocView = SelectionManager.SelectedDocuments()[0];
         const dragData = new DragManager.DocumentDragData(SelectionManager.SelectedDocuments().map(dv => dv.props.Document));
-        const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).inverse().transformPoint(0, 0);
-        dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.props.ContentScaling()).transformDirection(e.x - left, e.y - top);
+        const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.LocalScaling).inverse().transformPoint(0, 0);
+        dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.LocalScaling).transformDirection(e.x - left, e.y - top);
         dragData.moveDocument = dragDocView.props.moveDocument;
         dragData.isSelectionMove = true;
         dragData.canEmbed = dragTitle;
@@ -445,7 +445,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
                 const width = (doc._width || 0);
                 let height = (doc._height || (nheight / nwidth * width));
                 height = !height || isNaN(height) ? 20 : height;
-                const scale = docView.props.ScreenToLocalTransform().Scale * docView.props.ContentScaling();
+                const scale = docView.props.ScreenToLocalTransform().Scale * docView.LocalScaling;
                 if (nwidth && nheight) {
                     if (nwidth / nheight !== width / height && !dragBottom) {
                         height = nheight / nwidth * width;
@@ -504,7 +504,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     onPointerUp = (e: PointerEvent): void => {
         SelectionManager.SelectedDocuments().map(dv => {
             if (NumCast(dv.layoutDoc._delayAutoHeight) < this._dragHeights.get(dv.layoutDoc)!) {
-                dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.props.ContentScaling(), dv.props.PanelWidth(), dv.props.PanelHeight());
+                dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.LocalScaling, dv.props.PanelWidth(), dv.props.PanelHeight());
                 dv.layoutDoc._autoHeight = true;
             }
             dv.layoutDoc._delayAutoHeight = undefined;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index c60060095..aaa914fa4 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -896,7 +896,6 @@ export class GestureOverlay extends Touchable {
                 onClick={undefined}
                 removeDocument={undefined}
                 ScreenToLocalTransform={this.screenToLocalTransform}
-                ContentScaling={returnOne}
                 PanelWidth={this.return300}
                 PanelHeight={this.return300}
                 renderDepth={0}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b8c7a1a73..960b50f43 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -250,7 +250,6 @@ export class MainView extends React.Component {
             onClick={undefined}
             removeDocument={undefined}
             ScreenToLocalTransform={Transform.Identity}
-            ContentScaling={returnOne}
             PanelWidth={this.getPWidth}
             PanelHeight={this.getPHeight}
             focus={emptyFunction}
@@ -313,7 +312,6 @@ export class MainView extends React.Component {
                         removeDocument={returnFalse}
                         onClick={undefined}
                         ScreenToLocalTransform={this.mainContainerXf}
-                        ContentScaling={returnOne}
                         PanelWidth={this.flyoutWidthFunc}
                         PanelHeight={this.getContentsHeight}
                         renderDepth={0}
@@ -345,7 +343,6 @@ export class MainView extends React.Component {
                 removeDocument={returnFalse}
                 onClick={undefined}
                 ScreenToLocalTransform={this.sidebarScreenToLocal}
-                ContentScaling={returnOne}
                 PanelWidth={this.menuPanelWidth}
                 PanelHeight={this.getContentsHeight}
                 renderDepth={0}
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index ee1af8b13..cb7ff20b2 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -187,7 +187,6 @@ export class OverlayView extends React.Component {
                     bringToFront={emptyFunction}
                     addDocument={undefined}
                     removeDocument={undefined}
-                    ContentScaling={returnOne}
                     PanelWidth={returnOne}
                     PanelHeight={returnOne}
                     ScreenToLocalTransform={Transform.Identity}
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
index b31cfd7d2..4d0368424 100644
--- a/src/client/views/Palette.tsx
+++ b/src/client/views/Palette.tsx
@@ -47,7 +47,6 @@ export default class Palette extends React.Component<PaletteProps> {
                             removeDocument={undefined}
                             onClick={undefined}
                             ScreenToLocalTransform={Transform.Identity}
-                            ContentScaling={returnOne}
                             PanelWidth={() => window.screen.width}
                             PanelHeight={() => window.screen.height}
                             renderDepth={0}
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 24c6c6d71..fdc470103 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -293,7 +293,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     addDocTab={returnFalse}
                     pinToPres={emptyFunction}
                     bringToFront={returnFalse}
-                    ContentScaling={returnOne}
                     dontRegisterView={true}
                     dropAction={undefined}
                 />
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 28373952a..386e03f37 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -60,7 +60,7 @@ function toggleBackground(doc: Doc) {
 }
 
 export function testDocProps(toBeDetermined: any): toBeDetermined is DocumentViewProps {
-    return (toBeDetermined?.ContentScaling) ? true : false;
+    return (toBeDetermined?.select) ? false : true;
 }
 
 //
@@ -126,7 +126,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
                     `${darkScheme() ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(doc.boxShadow, "0.2vw 0.2vw 0.8vw")}`;
                 default:
                     return doc.z ? `#9c9396  ${StrCast(doc?.boxShadow, "10px 10px 0.9vw")}` :  // if it's a floating doc, give it a big shadow
-                        backgroundHalo(doc) && doc.type !== DocumentType.INK ? (`${props?.styleProvider?.(doc, props, StyleProp.BackgroundColor)} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / ((docProps && (props as DocumentViewProps).ContentScaling()) || 1)}px`)}`) :  // if it's just in a cluster, make the shadown roughly match the cluster border extent
+                        backgroundHalo(doc) && doc.type !== DocumentType.INK ? (`${props?.styleProvider?.(doc, props, StyleProp.BackgroundColor)} ${StrCast(doc.boxShadow, `0vw 0vw ${(isBackground() ? 100 : 50) / ((docProps && (props as DocumentViewProps).ContentScaling?.()) || 1)}px`)}`) :  // if it's just in a cluster, make the shadown roughly match the cluster border extent
                             isBackground() ? undefined :  // if it's a background & has a cluster color, make the shadow spread really big
                                 StrCast(doc.boxShadow, "");
             }
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index c7c510306..58e9fd5db 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -148,7 +148,6 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                                 removeDocument={this.props.removeDocument}
                                 onClick={undefined}
                                 ScreenToLocalTransform={this.getTransform(dref)}
-                                ContentScaling={returnOne}
                                 PanelWidth={nested ? pair.layout[WidthSym] : this.dimension}
                                 PanelHeight={nested ? pair.layout[HeightSym] : this.dimension}
                                 renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index e87fdef1e..b2aa0d6ea 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -425,7 +425,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                     addDocTab={this.props.addDocTab}
                     pinToPres={this.props.pinToPres}
                     bringToFront={returnFalse}
-                    ContentScaling={returnOne}
                 />}
         </div>;
     }
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index f64186728..3af145788 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -235,7 +235,6 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             whenActiveChanged={this.props.whenActiveChanged}
             addDocTab={this.addDocTab}
             bringToFront={returnFalse}
-            ContentScaling={returnOne}
             scriptContext={this.props.scriptContext}
             pinToPres={this.props.pinToPres}
         />;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 0fd263402..8ea7c3723 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -182,7 +182,6 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
                 addDocTab={this.props.addDocTab}
                 pinToPres={this.props.pinToPres}
                 bringToFront={returnFalse}
-                ContentScaling={returnOne}
             />
         </div>;
     }
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 58adff6b9..1747c8a89 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -588,8 +588,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         whenActiveChanged={emptyFunction}
                         addDocTab={this.props.addDocTab}
                         pinToPres={this.props.pinToPres}
-                        bringToFront={returnFalse}
-                        ContentScaling={returnOne}>
+                        bringToFront={returnFalse}>
                     </ContentFittingDocumentView>
                 </div>}
         </div>;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 9c77792a0..40e7bc7ce 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -392,7 +392,6 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 removeDocument={undefined}
                 addDocTab={this.addDocTab}
                 ScreenToLocalTransform={this.ScreenToLocalTransform}
-                ContentScaling={returnOne}
                 dontCenter={"y"}
                 rootSelected={returnTrue}
                 parentActive={this.active}
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index dd6f21998..bf77bddeb 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -554,7 +554,6 @@ export class TreeView extends React.Component<TreeViewProps> {
                 moveDocument={this.move}
                 removeDocument={this.props.removeDoc}
                 ScreenToLocalTransform={this.getTransform}
-                ContentScaling={returnOne}
                 PanelWidth={this.truncateTitleWidth}
                 PanelHeight={returnZero}
                 contextMenuItems={this.contextMenuItems}
@@ -640,7 +639,6 @@ export class TreeView extends React.Component<TreeViewProps> {
             addDocTab={this.props.addDocTab}
             pinToPres={this.props.pinToPres}
             bringToFront={returnFalse}
-            ContentScaling={returnOne}
         />;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 6d5f97367..740fc0658 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -322,7 +322,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 const clusterDocs = eles.map(ele => DocumentManager.Instance.getDocumentView(ele, this.props.CollectionView)!);
                 const de = new DragManager.DocumentDragData(eles);
                 de.moveDocument = this.props.moveDocument;
-                const [left, top] = clusterDocs[0].props.ScreenToLocalTransform().scale(clusterDocs[0].props.ContentScaling()).inverse().transformPoint(0, 0);
+                const [left, top] = clusterDocs[0].props.ScreenToLocalTransform().scale(clusterDocs[0].LocalScaling).inverse().transformPoint(0, 0);
                 de.offset = this.getTransform().transformDirection(ptsParent.clientX - left, ptsParent.clientY - top);
                 de.dropAction = e.ctrlKey || e.altKey ? "alias" : undefined;
                 DragManager.StartDocumentDrag(clusterDocs.map(v => v.ContentDiv!), de, ptsParent.clientX, ptsParent.clientY, { hideSource: !de.dropAction });
@@ -1011,7 +1011,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             ScreenToLocalTransform: childLayout.z ? this.getTransformOverlay : this.getTransform,
             PanelWidth: childLayout[WidthSym],
             PanelHeight: childLayout[HeightSym],
-            ContentScaling: returnOne,
             docFilters: this.docFilters,
             docRangeFilters: this.docRangeFilters,
             searchFilterDocs: this.searchFilterDocs,
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 36ed72596..55467696d 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -167,7 +167,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             DataDoc={layout.resolvedDataDoc as Doc}
             PanelWidth={width}
             PanelHeight={height}
-            ContentScaling={returnOne}
             freezeDimensions={true}
             fitDocToPanel={true}
             ScreenToLocalTransform={dxf}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 6ed7d1dd3..e3c6ed3ea 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -243,7 +243,6 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
             addDocTab={this.addDocTab}
             pinToPres={this.props.pinToPres}
             bringToFront={returnFalse}
-            ContentScaling={returnOne}
         />;
     }
     /**
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index a4a569cc9..b634e2307 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -243,7 +243,6 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
             addDocTab={this.addDocTab}
             pinToPres={this.props.pinToPres}
             bringToFront={returnFalse}
-            ContentScaling={returnOne}
         />;
     }
     /**
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 54b597f59..6277f7ecc 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -75,7 +75,7 @@ export class LinkMenu extends React.Component<Props> {
     @computed
     get position() {
         const docView = this.props.docView;
-        const transform = (docView.props.ScreenToLocalTransform().scale(docView.props.ContentScaling())).inverse();
+        const transform = (docView.props.ScreenToLocalTransform().scale(docView.LocalScaling)).inverse();
         const [sptX, sptY] = transform.transformPoint(0, 0);
         const [bptX, bptY] = transform.transformPoint(docView.props.PanelWidth(), docView.props.PanelHeight());
         return { x: sptX, y: sptY, r: bptX, b: bptY };
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 7b721786f..2d0441cac 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -554,7 +554,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                 rootSelected={returnFalse}
                 LayoutTemplate={undefined}
                 ContainingCollectionDoc={this.props.Document}
-                ContentScaling={returnOne}
                 removeDocument={this.removeDocument}
                 parentActive={returnTrue}
                 onClick={this.layoutDoc.playOnClick ? script : undefined}
@@ -641,7 +640,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
                                             ContainingCollectionDoc={this.props.Document}
                                             parentActive={returnTrue}
                                             bringToFront={emptyFunction}
-                                            ContentScaling={returnOne}
                                             styleProvider={AudioBox.audioStyleProvider}
                                             LayoutTemplate={undefined}
                                             LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(l, la2)}`)}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 6eb8dc8c9..b148fad12 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -43,7 +43,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
     get displayName() { return "CollectionFreeFormDocumentView(" + this.rootDoc.title + ")"; } // this makes mobx trace() statements more descriptive
     get maskCentering() { return this.props.Document.isInkMask ? InkingStroke.MaskDim / 2 : 0; }
-    get transform() { return `scale(${this.props.ContentScaling()}) translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.random(-1, 1) * this.props.jitterRotation}deg)`; }
+    get transform() { return `translate(${this.X - this.maskCentering}px, ${this.Y - this.maskCentering}px) rotate(${this.random(-1, 1) * this.props.jitterRotation}deg)`; }
     get X() { return this.dataProvider ? this.dataProvider.x : (this.Document.x || 0); }
     get Y() { return this.dataProvider ? this.dataProvider.y : (this.Document.y || 0); }
     get ZInd() { return this.dataProvider ? this.dataProvider.zIndex : (this.Document.zIndex || 0); }
@@ -54,11 +54,10 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         const hgt = this.props.sizeProvider && this.sizeProvider ? this.sizeProvider.height : this.layoutDoc[HeightSym]();
         return (hgt === undefined && this.nativeWidth && this.nativeHeight) ? this.width * this.nativeHeight / this.nativeWidth : hgt;
     }
-    @computed get freezeDimensions() { return this.props.freezeDimensions; }
     @computed get dataProvider() { return this.props.dataProvider?.(this.props.Document, this.props.replica); }
     @computed get sizeProvider() { return this.props.sizeProvider?.(this.props.Document, this.props.replica); }
-    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, undefined, this.freezeDimensions)); }
-    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, undefined, this.freezeDimensions)); }
+    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, undefined, this.props.freezeDimensions)); }
+    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, undefined, this.props.freezeDimensions)); }
 
     styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps | FieldViewProps>, property: string) => {
         if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children
@@ -139,10 +138,9 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         this.props.Document.x = NumCast(this.props.Document.x) + x;
         this.props.Document.y = NumCast(this.props.Document.y) + y;
     }
-    contentScaling = () => this.nativeWidth > 0 && !this.props.fitDocToPanel && !this.freezeDimensions ? this.width / this.nativeWidth : 1;
     panelWidth = () => (this.sizeProvider?.width || this.props.PanelWidth?.());
     panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.());
-    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y).scale(1 / this.contentScaling());
+    getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y);
     focusDoc = (doc: Doc) => this.props.focus(doc, false);
     NativeWidth = () => this.nativeWidth;
     NativeHeight = () => this.nativeHeight;
@@ -192,7 +190,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
             {this.props.fitDocToPanel ?
                 <ContentFittingDocumentView {...divProps} ref={action((r: ContentFittingDocumentView | null) => this._contentView = r)} /> :
-                <DocumentView {...divProps} ContentScaling={this.contentScaling} />}
+                <DocumentView {...divProps} />}
         </div>;
     }
 }
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 1b7084ffa..9511668d5 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -85,7 +85,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
             const whichDoc = Cast(this.dataDoc[`compareBox-${which}`], Doc, null);
             return whichDoc ? <>
                 <ContentFittingDocumentView {...this.props}
-                    ContentScaling={returnOne}
                     pointerEvents={"none"}
                     parentActive={this.props.active}
                     Document={whichDoc} />
diff --git a/src/client/views/nodes/DocHolderBox.tsx b/src/client/views/nodes/DocHolderBox.tsx
index 5aab0a4c8..0eefb231f 100644
--- a/src/client/views/nodes/DocHolderBox.tsx
+++ b/src/client/views/nodes/DocHolderBox.tsx
@@ -142,8 +142,7 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
                     parentActive={this.isActive}
                     dontRegisterView={true}
                     whenActiveChanged={this.props.whenActiveChanged}
-                    bringToFront={returnFalse}
-                    ContentScaling={returnOne} /> :
+                    bringToFront={returnFalse} /> :
                 <ContentFittingDocumentView
                     Document={containedDoc}
                     DataDoc={undefined}
@@ -172,7 +171,6 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
                     dontRegisterView={true}
                     whenActiveChanged={this.props.whenActiveChanged}
                     bringToFront={returnFalse}
-                    ContentScaling={returnOne}
                 />;
         return contents;
     }
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 2c3e9bc88..a3048e32f 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -108,6 +108,7 @@ export class HTMLtag extends React.Component<HTMLtagProps> {
 export class DocumentContentsView extends React.Component<DocumentViewProps & FormattedTextBoxProps & {
     isSelected: (outsideReaction: boolean) => boolean,
     select: (ctrl: boolean) => void,
+    scaling?: () => number,
     layoutKey: string,
     hideOnLeave?: boolean,
     makeLink?: () => Opt<Doc>,  // function to call when a link is made
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index fb54f18e8..f2838981d 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -9,7 +9,7 @@ import { Field } from "../../../fields/Doc";
 export class DocumentIcon extends React.Component<{ view: DocumentView, index: number }> {
     render() {
         const view = this.props.view;
-        const transform = view.props.ScreenToLocalTransform().scale(view.props.ContentScaling()).inverse();
+        const transform = view.props.ScreenToLocalTransform().scale(view.LocalScaling).inverse();
         const { x, y, width, height } = transform.transformBounds(0, 0, view.props.PanelWidth(), view.props.PanelHeight());
 
         return (
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3dd15d541..ec730dbf6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -52,7 +52,6 @@ export interface DocumentViewSharedProps {
     renderDepth: number;
     Document: Doc;
     DataDoc?: Doc;
-    DocumentView?: DocumentView;
     ContainingCollectionView: Opt<CollectionView>;
     fitContentsToDoc?: boolean; // used by freeformview to fit its contents to its panel. corresponds to _fitToBox property on a Document
     ContainingCollectionDoc: Opt<Doc>;
@@ -96,7 +95,7 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
     radialMenu?: String[];
     LayoutTemplateString?: string;
     LayoutTemplate?: () => Opt<Doc>;
-    ContentScaling: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal
+    ContentScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal
     contextMenuItems?: () => { script: ScriptField, label: string }[];
     onDoubleClick?: () => ScriptField;
     onPointerDown?: () => ScriptField;
@@ -131,11 +130,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 (this.dataDoc.author === Doc.CurrentUserEmail ? StrCast(Doc.UserDoc().showTitle) : "author;creationDate") :
                 undefined);
     }
-    @computed get LocalScaling() { return this.props.ContentScaling(); }
+    @computed get LocalScaling() { return this.props.ContentScaling?.() || 1; }
     @computed get topMost() { return this.props.renderDepth === 0; }
-    @computed get freezeDimensions() { return this.props.freezeDimensions; }
-    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.freezeDimensions)); }
-    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.freezeDimensions)); }
+    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); }
+    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); }
     @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); }
     @computed get onDoubleClickHandler() { return this.props.onDoubleClick?.() ?? (Cast(this.layoutDoc.onDoubleClick, ScriptField, null) ?? this.Document.onDoubleClick); }
     @computed get onPointerDownHandler() { return this.props.onPointerDown?.() ?? ScriptCast(this.Document.onPointerDown); }
@@ -247,8 +245,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     startDragging(x: number, y: number, dropAction: dropActionType) {
         if (this._mainCont.current) {
             const dragData = new DragManager.DocumentDragData([this.props.Document]);
-            const [left, top] = this.props.ScreenToLocalTransform().scale(this.props.ContentScaling()).inverse().transformPoint(0, 0);
-            dragData.offset = this.props.ScreenToLocalTransform().scale(this.props.ContentScaling()).transformDirection(x - left, y - top);
+            const [left, top] = this.props.ScreenToLocalTransform().scale(this.LocalScaling).inverse().transformPoint(0, 0);
+            dragData.offset = this.props.ScreenToLocalTransform().scale(this.LocalScaling).transformDirection(x - left, y - top);
             dragData.dropAction = dropAction;
             dragData.removeDocument = this.props.removeDocument;
             dragData.moveDocument = this.props.moveDocument;
@@ -497,7 +495,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 let nheight = Doc.NativeHeight(layoutDoc);
                 const width = (layoutDoc._width || 0);
                 const height = (layoutDoc._height || (nheight / nwidth * width));
-                const scale = this.props.ScreenToLocalTransform().Scale * this.props.ContentScaling();
+                const scale = this.props.ScreenToLocalTransform().Scale * this.LocalScaling;
                 const actualdW = Math.max(width + (dW * scale), 20);
                 const actualdH = Math.max(height + (dH * scale), 20);
                 doc.x = (doc.x || 0) + dX * (actualdW - width);
@@ -721,7 +719,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     @undoBatch
     @action
     toggleNativeDimensions = () => {
-        Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.PanelWidth(), this.props.PanelHeight());
+        Doc.toggleNativeDimensions(this.layoutDoc, this.LocalScaling, this.props.PanelWidth(), this.props.PanelHeight());
     }
 
     @undoBatch
@@ -899,7 +897,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         return this.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false;
     }
     panelHeight = () => this.props.PanelHeight() - this.headerMargin;
-    childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling());
     @computed.struct get linkOffset() { return this.topMost ? [0, undefined, undefined, 10] : [-15, undefined, undefined, -20]; }
     @observable contentsActive: () => boolean = returnFalse;
     @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
@@ -914,7 +911,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             }}>
             <DocumentContentsView key={1}
                 renderDepth={this.props.renderDepth}
-                DocumentView={this}
                 Document={this.props.Document}
                 DataDoc={this.props.DataDoc}
                 fitContentsToDoc={this.props.fitContentsToDoc}
@@ -924,6 +920,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 NativeHeight={this.NativeHeight}
                 PanelWidth={this.props.PanelWidth}
                 PanelHeight={this.props.PanelHeight}
+                scaling={this.props.ContentScaling || returnOne}
                 layerProvider={this.props.layerProvider}
                 styleProvider={this.props.styleProvider}
                 LayoutTemplateString={this.props.LayoutTemplateString}
@@ -946,7 +943,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 ScreenToLocalTransform={this.screenToLocal}
                 ignoreAutoHeight={this.props.ignoreAutoHeight}
                 bringToFront={this.props.bringToFront}
-                ContentScaling={this.childScaling}
                 isSelected={this.isSelected}
                 select={this.select}
                 rootSelected={this.rootSelected}
@@ -1008,7 +1004,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     Document={d}
                     PanelWidth={this.anchorPanelWidth}
                     PanelHeight={this.anchorPanelHeight}
-                    ContentScaling={returnOne}
                     dontRegisterView={false}
                     styleProvider={this.anchorStyleProvider}
                     removeDocument={this.hideLinkAnchor}
@@ -1034,7 +1029,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     styleProvider={this.captionStyleProvider}
                     dontRegisterView={true}
                     LayoutTemplateString={`<FormattedTextBox {...props} fieldKey={'${showCaption}'}/>`}
-                    ContentScaling={returnOne}
                     isSelected={this.isSelected}
                     select={this.select}
                     onClick={this.onClickFunc}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 2e79ba7b0..1b4119210 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -21,6 +21,7 @@ export interface FieldViewProps extends DocumentViewSharedProps {
     active: (outsideReaction?: boolean) => boolean;
     select: (isCtrlPressed: boolean) => void;
     isSelected: (outsideReaction?: boolean) => boolean;
+    scaling?: () => number;
 
     // properties intended to be used from within layout strings (otherwise use the function equivalents that work more efficiently with React)
     pointerEvents?: string;
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 508d85e14..b842c1f10 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -115,7 +115,6 @@ export class LinkDocPreview extends React.Component<Props> {
                 focus={emptyFunction}
                 whenActiveChanged={returnFalse}
                 bringToFront={returnFalse}
-                ContentScaling={returnOne}
                 styleProvider={this.props.styleProvider} />;
     }
 
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 18ded4f3b..262e61c9b 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -192,7 +192,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
         </div>;
     }
 
-    contentScaling = () => this.props.DocumentView?.props.ContentScaling() || 1;
+    contentScaling = () => this.props.scaling?.() || 1;
     isChildActive = (outsideReaction?: boolean) => this._isChildActive;
     @computed get renderPdfView() {
         TraceMobx();
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 1ee217d03..d517dba1e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -318,7 +318,6 @@ export class FormattedTextBoxComment {
                                             focus={emptyFunction}
                                             whenActiveChanged={returnFalse}
                                             bringToFront={returnFalse}
-                                            ContentScaling={returnOne}
                                             NativeWidth={Doc.NativeWidth(target) ? (() => Doc.NativeWidth(target)) : undefined}
                                             NativeHeight={Doc.NativeHeight(target) ? (() => Doc.NativeHeight(target)) : undefined}
                                         />
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 6d51df01d..f8f244c35 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -113,7 +113,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     searchFilterDocs={this.props.searchFilterDocs}
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined}
-                    ContentScaling={returnOne}
                 />
                 <div className="presItem-embeddedMask" />
             </div>;
diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx
index 21c156ac0..bd24efe66 100644
--- a/src/mobile/AudioUpload.tsx
+++ b/src/mobile/AudioUpload.tsx
@@ -91,7 +91,6 @@ export class AudioUpload extends React.Component {
                         searchFilterDocs={returnEmptyDoclist}
                         onClick={undefined}
                         ScreenToLocalTransform={Transform.Identity}
-                        ContentScaling={returnOne}
                         PanelWidth={() => 600}
                         PanelHeight={() => 400}
                         renderDepth={0}
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 3d5c70ff7..68246e52a 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -209,7 +209,6 @@ export class MobileInterface extends React.Component {
                     removeDocument={undefined}
                     onClick={undefined}
                     ScreenToLocalTransform={Transform.Identity}
-                    ContentScaling={returnOne}
                     PanelWidth={this.returnWidth}
                     PanelHeight={this.returnHeight}
                     renderDepth={0}
-- 
cgit v1.2.3-70-g09d2


From 8d9b38b64e61f2afb2b698004bcef7017d454078 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 14 Dec 2020 14:22:44 -0500
Subject: got rid of fitDocToPanel.  made collectionFreeFormDocView always use
 a ContentFittingDocView.  fixed up web box selections.

---
 src/client/util/DragManager.ts                     | 33 ++++++++-------
 src/client/views/PropertiesView.tsx                |  1 -
 .../views/collections/CollectionSchemaView.tsx     |  1 -
 .../views/collections/CollectionStackingView.tsx   |  1 -
 src/client/views/collections/SchemaTable.tsx       |  1 -
 src/client/views/collections/TreeView.tsx          |  1 -
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  2 -
 .../collectionGrid/CollectionGridView.tsx          |  1 -
 .../CollectionMulticolumnView.tsx                  |  1 -
 .../CollectionMultirowView.tsx                     |  1 -
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 18 +++------
 .../views/nodes/ContentFittingDocumentView.tsx     |  2 +-
 src/client/views/nodes/DocHolderBox.tsx            |  2 -
 src/client/views/nodes/DocumentContentsView.tsx    |  1 -
 src/client/views/nodes/DocumentView.tsx            |  7 +---
 src/client/views/nodes/ImageBox.tsx                | 18 ++++-----
 src/client/views/nodes/LinkDocPreview.tsx          |  1 -
 src/client/views/nodes/VideoBox.tsx                | 13 +++---
 src/client/views/nodes/WebBox.scss                 |  1 +
 src/client/views/nodes/WebBox.tsx                  | 47 +++++++++++-----------
 .../views/nodes/formattedText/DashDocView.tsx      |  1 -
 .../formattedText/FormattedTextBoxComment.tsx      |  1 -
 .../views/nodes/formattedText/RichTextSchema.tsx   |  1 -
 .../views/presentationview/PresElementBox.tsx      |  1 -
 24 files changed, 63 insertions(+), 94 deletions(-)

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.tsx')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index e3019d288..db371416c 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -342,12 +342,11 @@ export namespace DragManager {
             dragLabel.style.zIndex = "100001";
             dragLabel.style.fontSize = "10px";
             dragLabel.style.position = "absolute";
-            // dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar
+            dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar
             dragDiv.appendChild(dragLabel);
             DragManager.Root().appendChild(dragDiv);
         }
         dragDiv.hidden = false;
-        dragLabel.style.display = "";
         const scaleXs: number[] = [];
         const scaleYs: number[] = [];
         const xs: number[] = [];
@@ -416,13 +415,22 @@ export namespace DragManager {
         });
 
         const hideSource = options?.hideSource ? true : false;
-        eles.forEach(ele => {
-            if (ele.parentElement && ele.parentElement?.className === dragData.dragDivName) {
-                ele.parentElement.hidden = hideSource;
-            } else {
-                ele.hidden = hideSource;
-            }
-        });
+        const hideDragShowOriginalElements = (hide: boolean) => {
+            dragLabel.style.display = hide ? "" : "none";
+            !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
+            eles.forEach(ele => {
+                if (ele.parentElement?.className === dragData.dragDivName) {
+                    ele.parentElement!.hidden = hide;
+                } else if (ele.parentElement?.parentElement?.className === dragData.dragDivName) {
+                    ele.parentElement!.parentElement!.hidden = hide;
+                } else if (ele.parentElement?.parentElement?.parentElement?.className === dragData.dragDivName) {
+                    ele.parentElement!.parentElement!.parentElement!.hidden = hide;
+                } else {
+                    ele.hidden = hide;
+                }
+            });
+        };
+        hideDragShowOriginalElements(hideSource);
 
         SnappingManager.SetIsDragging(true);
         let lastX = downX;
@@ -517,13 +525,8 @@ export namespace DragManager {
             );
         };
 
-        const hideDragShowOriginalElements = () => {
-            dragLabel.style.display = "none";
-            dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
-            eles.map(ele => ele.parentElement && ele.parentElement?.className === dragData.dragDivName ? (ele.hidden = ele.parentElement.hidden = false) : (ele.hidden = false));
-        };
         const endDrag = action(() => {
-            hideDragShowOriginalElements();
+            hideDragShowOriginalElements(false);
             document.removeEventListener("pointermove", moveHandler, true);
             document.removeEventListener("pointerup", upHandler);
             SnappingManager.SetIsDragging(false);
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index fdc470103..46d3b201b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -271,7 +271,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     renderDepth={1}
                     rootSelected={returnFalse}
                     styleProvider={DefaultStyleProvider}
-                    fitDocToPanel={true}
                     freezeDimensions={true}
                     dontCenter={"y"}
                     NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index b2aa0d6ea..81ee16f63 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -401,7 +401,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 <ContentFittingDocumentView
                     Document={this.previewDocument}
                     DataDoc={undefined}
-                    fitDocToPanel={true}
                     fitContentsToDoc={true}
                     freezeDimensions={true}
                     dontCenter={"y"}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 3af145788..8bcd1ba29 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -214,7 +214,6 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             NativeWidth={this.props.childIgnoreNativeSize ? returnZero : undefined}  // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox
             NativeHeight={this.props.childIgnoreNativeSize ? returnZero : undefined}
             dontCenter={this.props.childIgnoreNativeSize ? "xy" : undefined}
-            fitDocToPanel={false}
             dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)}
             rootSelected={this.rootSelected}
             dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType}
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 1747c8a89..b4afbc1d3 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -570,7 +570,6 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     ref="overlay"><ContentFittingDocumentView
                         Document={this._showDoc}
                         DataDoc={this._showDataDoc}
-                        fitDocToPanel={true}
                         freezeDimensions={true}
                         focus={emptyFunction}
                         renderDepth={this.props.renderDepth}
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index bf77bddeb..2c2498e0b 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -616,7 +616,6 @@ export class TreeView extends React.Component<TreeViewProps> {
             PanelHeight={panelHeight}
             NativeWidth={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined}
             NativeHeight={!asText && this.layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined}
-            fitDocToPanel={!asText && this.isCollectionDoc !== undefined}
             fitContentsToDoc={true}
             hideTitle={asText}
             LayoutTemplateString={asText ? FormattedTextBox.LayoutString("text") : undefined}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 740fc0658..bda3757e3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -998,7 +998,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             pinToPres: this.props.pinToPres,
             whenActiveChanged: this.props.whenActiveChanged,
             parentActive: this.parentActive,
-            fitDocToPanel: false,
             DataDoc: childData,
             Document: childLayout,
             ContainingCollectionView: this.props.CollectionView,
@@ -1174,7 +1173,6 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                         (this.props.viewDefDivClick || (engine === "pass" && !this.props.isSelected(true))) ? "none" : undefined}
                     jitterRotation={NumCast(this.props.Document._jitterRotation) || ((Doc.UserDoc().renderStyle === "comic" ? 10 : 0))}
                     //fitToBox={this.props.fitToBox || BoolCast(this.props.freezeChildDimensions)} // bcz: check this
-                    fitDocToPanel={BoolCast(this.props.childFreezeDimensions)} // bcz: check this
                     freezeDimensions={BoolCast(this.props.childFreezeDimensions)}
                 />,
                 bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica)
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 55467696d..093a4c770 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -168,7 +168,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             PanelWidth={width}
             PanelHeight={height}
             freezeDimensions={true}
-            fitDocToPanel={true}
             ScreenToLocalTransform={dxf}
             onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index e3c6ed3ea..fe1595644 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -223,7 +223,6 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
             renderDepth={this.props.renderDepth + 1}
             PanelWidth={width}
             PanelHeight={height}
-            fitDocToPanel={false}
             rootSelected={this.rootSelected}
             dropAction={StrCast(this.props.Document.childDropAction) as dropActionType}
             onClick={this.onChildClickHandler}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index b634e2307..ca712b521 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -223,7 +223,6 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
             renderDepth={this.props.renderDepth + 1}
             PanelWidth={width}
             PanelHeight={height}
-            fitDocToPanel={false}
             rootSelected={this.rootSelected}
             dropAction={StrCast(this.props.Document.childDropAction) as dropActionType}
             onClick={this.onChildClickHandler}
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index bfdb7d98e..667962889 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -7,8 +7,7 @@ import { listSpec } from "../../../fields/Schema";
 import { ComputedField } from "../../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { TraceMobx } from "../../../fields/util";
-import { numberRange, returnVal } from "../../../Utils";
-import { DocumentType } from "../../documents/DocumentTypes";
+import { numberRange, returnVal, returnOne } from "../../../Utils";
 import { Transform } from "../../util/Transform";
 import { DocComponent } from "../DocComponent";
 import { InkingStroke } from "../InkingStroke";
@@ -27,7 +26,6 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
     highlight?: boolean;
     jitterRotation: number;
     dataTransition?: string;
-    fitDocToPanel?: boolean;
     replica: string;
 }
 
@@ -58,10 +56,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     @computed get sizeProvider() { return this.props.sizeProvider?.(this.props.Document, this.props.replica); }
     @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, undefined, this.props.freezeDimensions)); }
     @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, undefined, this.props.freezeDimensions)); }
-    @computed get pointerEvents() {
-        if (this.props.pointerEvents === "none") return "none";
-        return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (!this._contentView?.docView?.isSelected() ? ":selected" : ""));
-    }
+    @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (!this._contentView?.docView?.isSelected() ? ":selected" : "")); }
 
     styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps | FieldViewProps>, property: string) => {
         if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children
@@ -144,12 +139,11 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     }
     panelWidth = () => (this.sizeProvider?.width || this.props.PanelWidth?.());
     panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.());
-    screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y).scale(1 / this.Scaling());
+    screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y);
     focusDoc = (doc: Doc) => this.props.focus(doc, false);
     NativeWidth = () => this.nativeWidth;
     NativeHeight = () => this.nativeHeight;
     returnThis = () => this;
-    Scaling = () => this.Document._fitWidth ? this.props.PanelWidth() / this.NativeWidth() : 1;
     render() {
         TraceMobx();
         const backgroundColor = this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor);
@@ -161,7 +155,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             dragDivName: "collectionFreeFormDocumentView-container",
             styleProvider: this.styleProvider,
             ScreenToLocalTransform: this.screenToLocalTransform,
-            ContentScaling: this.Scaling,
+            ContentScaling: returnOne,
             NativeHeight: this.NativeHeight,
             NativeWidth: this.NativeWidth,
             PanelWidth: this.panelWidth,
@@ -190,9 +184,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     </svg>
                 </div>}
 
-            {this.props.fitDocToPanel ?
-                <ContentFittingDocumentView {...divProps} ref={action((r: ContentFittingDocumentView | null) => this._contentView = r)} /> :
-                <DocumentView {...divProps} />}
+            <ContentFittingDocumentView {...divProps} ref={action((r: ContentFittingDocumentView | null) => this._contentView = r)} />
         </div>;
     }
 }
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 5111fa041..db9366390 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -31,6 +31,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
         } else if (nativeW && nativeH) {
             scaling = this.props.PanelHeight() / nativeH; // height-limited
         }
+        console.log(this.props.Document.title + " " + scaling)
         return scaling;
     }
 
@@ -75,7 +76,6 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
                         NativeWidth={this.NativeWidth}
                         NativeHeight={this.NativeHeight}
                         ContentScaling={this.NativeScaling}
-                        contentFittingXf={returnTrue}
                         ScreenToLocalTransform={this.screenToLocalTransform}
                         focus={this.props.focus || emptyFunction}
                         bringToFront={emptyFunction}
diff --git a/src/client/views/nodes/DocHolderBox.tsx b/src/client/views/nodes/DocHolderBox.tsx
index 0eefb231f..b5c068b08 100644
--- a/src/client/views/nodes/DocHolderBox.tsx
+++ b/src/client/views/nodes/DocHolderBox.tsx
@@ -124,7 +124,6 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
                     searchFilterDocs={this.props.searchFilterDocs}
                     ContainingCollectionView={this as any} // bcz: hack!  need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked.  currently, the up selector allows only a containing collection to be selected
                     ContainingCollectionDoc={undefined}
-                    fitDocToPanel={true}
                     styleProvider={this.props.styleProvider}
                     LayoutTemplateString={layoutTemplate}
                     LayoutTemplate={this.layoutTemplateDoc}
@@ -151,7 +150,6 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
                     searchFilterDocs={this.props.searchFilterDocs}
                     ContainingCollectionView={this as any} // bcz: hack!  need to pass a prop that can be used to select the container (ie, 'this') when the up selector in document decorations is clicked.  currently, the up selector allows only a containing collection to be selected
                     ContainingCollectionDoc={undefined}
-                    fitDocToPanel={true}
                     styleProvider={this.props.styleProvider}
                     ignoreAutoHeight={true}
                     LayoutTemplateString={layoutTemplate}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index a3048e32f..16937a791 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -142,7 +142,6 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
         const docOnlyProps = [  // these are the properties in  DocumentViewProps that need to be removed to pass on only DocumentSharedViewProps to the FieldViews
             "freezeDimensions",
             "hideTitle",
-            "fitDocToPanel",
             "treeViewDoc",
             "dragDivName",
             "contentPointerEvents",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 460e5c2c6..010a270e6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -75,7 +75,6 @@ export interface DocumentViewSharedProps {
     moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean;
     pinToPres: (document: Doc) => void;
     ScreenToLocalTransform: () => Transform;
-    contentFittingXf?: () => boolean;  // bcz: need to figure out why this is needed in VideoBox/ImageBox/WebBox to turn off scaling... 
     bringToFront: (doc: Doc, sendToBack?: boolean) => void;
     onClick?: () => ScriptField;
     dropAction?: dropActionType;
@@ -88,7 +87,6 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
     // properties specific to DocumentViews but not to FieldView
     freezeDimensions?: boolean;
     hideTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
-    fitDocToPanel?: boolean; // makes the document view fit the panel available to it (if it has native dimensions, then only one dimension will be fit)
     treeViewDoc?: Doc;
     dragDivName?: string;
     contentPointerEvents?: string; // pointer events allowed for content of a document view.  eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
@@ -868,12 +866,13 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     panelHeight = () => this.props.PanelHeight() - this.headerMargin;
     parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false;
     screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
-    contentScaling = () => !this.props.Document._fitWidth ? this.props.PanelWidth() / (this.props.NativeWidth?.() || this.props.PanelWidth()) : this.LocalScaling;
+    contentScaling = () => this.LocalScaling;
 
     @observable contentsActive: () => boolean = returnFalse;
     @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
 
     @computed get contents() {
+        console.log(this.props.Document.title + " " + this.LocalScaling + " " + this.contentScaling())
         TraceMobx();
         return (<div className="documentView-contentsView"
             style={{
@@ -891,7 +890,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 NativeHeight={this.NativeHeight}
                 PanelWidth={this.props.PanelWidth}
                 PanelHeight={this.props.PanelHeight}
-                contentFittingXf={this.props.contentFittingXf}
                 scaling={this.contentScaling}
                 layerProvider={this.props.layerProvider}
                 styleProvider={this.props.styleProvider}
@@ -906,7 +904,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 makeLink={this.makeLink}
                 focus={this.props.focus}
                 dontRegisterView={this.props.dontRegisterView}
-                fitDocToPanel={this.props.fitDocToPanel}
                 addDocument={this.props.addDocument}
                 removeDocument={this.props.removeDocument}
                 moveDocument={this.props.moveDocument}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 5fba273fb..403b12f0d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -67,8 +67,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
     @observable static _showControls: boolean;
     @observable uploadIcon = uploadIcons.idle;
 
-    @computed get contentScaling() { return this.props.contentFittingXf?.() ? 1 : this.props.scaling?.() || 1; }
-
     protected createDropTarget = (ele: HTMLDivElement) => {
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.props.Document));
@@ -264,7 +262,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
     considerGooglePhotosLink = () => {
         const remoteUrl = this.dataDoc.googlePhotosUrl;
         return !remoteUrl ? (null) : (<img draggable={false}
-            style={{ transform: `scale(${this.contentScaling})`, transformOrigin: "bottom right" }}
+            style={{ transformOrigin: "bottom right" }}
             id={"google-photos"}
             src={"/assets/google_photos.png"}
             onClick={() => window.open(remoteUrl)}
@@ -289,7 +287,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
         return (
             <img
                 id={"upload-icon"} draggable={false}
-                style={{ transform: `scale(${1 / this.contentScaling})`, transformOrigin: "bottom right" }}
+                style={{ transformOrigin: "bottom right" }}
                 src={`/assets/${this.uploadIcon}`}
                 onClick={async () => {
                     const { dataDoc } = this;
@@ -400,26 +398,24 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
             (this.props.PanelHeight() - this.props.PanelWidth() * aspect) / 2 : 0;
     }
 
-    scaling = () => this.contentScaling;
-    screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter).scale(1 / this.contentScaling);
+    screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(0, -this.ycenter);
     contentFunc = () => [this.content];
 
     render() {
         TraceMobx();
         return (<div className={`imageBox`} onContextMenu={this.specificContextMenu}
             style={{
-                transform: this.props.PanelWidth() ? undefined : `scale(${this.contentScaling})`,
-                width: this.props.PanelWidth() ? undefined : `${100 / this.contentScaling}%`,
-                height: this.props.PanelWidth() ? undefined : `${100 / this.contentScaling}%`,
+                width: this.props.PanelWidth() ? undefined : `100%`,
+                height: this.props.PanelWidth() ? undefined : `100%`,
                 pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? "none" : undefined,
-                borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", "")) / this.contentScaling}px`
+                borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", ""))}px`
             }} >
             <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
                 renderDepth={this.props.renderDepth + 1}
                 ContainingCollectionDoc={this.props.ContainingCollectionDoc}
                 CollectionView={undefined}
                 PanelHeight={this.props.PanelHeight}
-                scaling={this.scaling}
+                scaling={returnOne}
                 ScreenToLocalTransform={this.screenToLocalTransform}
                 PanelWidth={this.props.PanelWidth}
                 fieldKey={this.annotationKey}
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index b842c1f10..fd2425950 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -94,7 +94,6 @@ export class LinkDocPreview extends React.Component<Props> {
             :
             <ContentFittingDocumentView
                 Document={this._targetDoc}
-                fitDocToPanel={true}
                 moveDocument={returnFalse}
                 rootSelected={returnFalse}
                 ScreenToLocalTransform={Transform.Identity}
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 77db7189a..bc9c3f09d 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -414,18 +414,15 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
         return this.addDocument(doc);
     }
 
-    @computed get contentScaling() { return this.props.contentFittingXf?.() ? 1 : this.props.scaling?.() || 1; }
-    scaling = () => this.contentScaling;
-    screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.scaling());
+    screenToLocalTransform = () => this.props.ScreenToLocalTransform();
     contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content];
     render() {
         return (<div className="videoBox" onContextMenu={this.specificContextMenu}
             style={{
-                transform: this.props.PanelWidth() ? undefined : `scale(${this.contentScaling})`,
-                width: this.props.PanelWidth() ? undefined : `${100 / this.contentScaling}%`,
-                height: this.props.PanelWidth() ? undefined : `${100 / this.contentScaling}%`,
+                width: "100%",
+                height: "100%",
                 pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? "none" : undefined,
-                borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", "")) / this.contentScaling}px`
+                borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", ""))}px`
             }} >
             <div className="videoBox-viewer" >
                 <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
@@ -434,7 +431,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps, VideoD
                     isAnnotationOverlay={true}
                     select={emptyFunction}
                     active={this.annotationsActive}
-                    scaling={this.scaling}
+                    scaling={returnOne}
                     ScreenToLocalTransform={this.screenToLocalTransform}
                     whenActiveChanged={this.whenActiveChanged}
                     removeDocument={this.removeDocument}
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index 9d9c8a883..5a7c1c904 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -69,6 +69,7 @@
             width: 100%;
             height: 100%;
             position: absolute;
+            transform-origin: top left;
             top: 0;
             left: 0;
             overflow: auto;
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 3064de03b..22328d1ae 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -452,12 +452,16 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     @computed
     get content() {
         const view = this.urlContent;
-
         const frozen = !this.props.isSelected() || DocumentDecorations.Instance?.Interacting;
+        const scale = this.props.scaling?.() || 1;
 
         return (<>
             <div className={"webBox-cont" + (this.props.isSelected() && Doc.GetSelectedTool() === InkTool.None && !DocumentDecorations.Instance?.Interacting ? "-interactive" : "")}
-                style={{ width: NumCast(this.layoutDoc[this.fieldKey + "-contentWidth"]) || (Number.isFinite(this.contentScaling) ? `${Math.max(100, 100 / this.contentScaling)}% ` : "100%") }}
+                style={{
+                    width: `${100 / scale}%`,
+                    height: `${100 / scale}%`,
+                    transform: `scale(${scale})`
+                }}
                 onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
                 {view}
             </div>
@@ -646,26 +650,23 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     marqueeX = () => this._marqueeX;
     marqueeY = () => this._marqueeY;
     marqueeing = () => this._marqueeing;
-    @computed get contentScaling() { return this.props.scaling?.() || 1; }
-    scrollXf = () => this.props.ScreenToLocalTransform().scale(this.props.contentFittingXf?.() ? 1 : 1 / this.contentScaling).translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop));
-    scaling = () => this.contentScaling;
+    scrollXf = () => this.props.ScreenToLocalTransform().translate(NumCast(this.layoutDoc._scrollLeft), NumCast(this.layoutDoc._scrollTop));
     render() {
+        const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false;
+        const scale = this.props.scaling?.() || 1;
+        console.log("Scale = " + scale);
         return (<div className="webBox" ref={this._mainCont} >
             <div className={`webBox-container`}
-                style={{
-                    position: undefined,
-                    transform: `scale(${this.contentScaling})`,
-                    width: `${100 / this.contentScaling}% `,
-                    height: `${100 / this.contentScaling}% `,
-                    pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? "none" : undefined
-                }}
+                style={{ pointerEvents: inactiveLayer ? "none" : undefined }}
                 onContextMenu={this.specificContextMenu}>
                 <base target="_blank" />
                 {this.content}
                 <div className={"webBox-outerContent"} ref={this._outerRef}
                     style={{
-                        width: `${Math.max(100, 100 / this.contentScaling)}% `,
-                        pointerEvents: this.layoutDoc.isAnnotating && this.props.layerProvider?.(this.layoutDoc) !== false ? "all" : "none"
+                        width: `${100 / scale}%`,
+                        height: `${100 / scale}%`,
+                        transform: `scale(${scale})`,
+                        pointerEvents: this.layoutDoc.isAnnotating && !inactiveLayer ? "all" : "none"
                     }}
                     onWheel={e => {
                         const target = this._outerRef.current;
@@ -687,22 +688,22 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                 >
                     <div className={"webBox-innerContent"} style={{
                         height: NumCast(this.scrollHeight, 50),
-                        pointerEvents: this.props.layerProvider?.(this.layoutDoc) === false ? "none" : undefined
+                        pointerEvents: inactiveLayer ? "none" : undefined
                     }}>
                         <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                            renderDepth={this.props.renderDepth + 1}
+                            CollectionView={undefined}
                             fieldKey={this.annotationKey}
-                            setPreviewCursor={this.setPreviewCursor}
                             isAnnotationOverlay={true}
-                            select={emptyFunction}
-                            active={this.active}
-                            whenActiveChanged={this.whenActiveChanged}
+                            scaling={returnOne}
+                            ScreenToLocalTransform={this.scrollXf}
                             removeDocument={this.removeDocument}
                             moveDocument={this.moveDocument}
                             addDocument={this.addDocument}
-                            CollectionView={undefined}
-                            scaling={this.scaling}
-                            ScreenToLocalTransform={this.scrollXf}
-                            renderDepth={this.props.renderDepth + 1}>
+                            setPreviewCursor={this.setPreviewCursor}
+                            select={emptyFunction}
+                            active={this.active}
+                            whenActiveChanged={this.whenActiveChanged}>
                         </CollectionFreeFormView>
                     </div>
                 </div>
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 04e94391f..c15eb2dac 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -228,7 +228,6 @@ export class DashDocView extends React.Component<IDashDocView> {
                         <DocumentView
                             Document={finalLayout}
                             DataDoc={resolvedDataDoc}
-                            fitDocToPanel={BoolCast(dashDoc._fitToBox)}
                             addDocument={returnFalse}
                             rootSelected={this._textBox.props.isSelected}
                             removeDocument={this.removeDoc}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index a80314f74..447ff5865 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -297,7 +297,6 @@ export class FormattedTextBoxComment {
                                     <div className="FormattedTextBoxComment-preview-wrapper">
                                         <ContentFittingDocumentView
                                             Document={target}
-                                            fitDocToPanel={true}
                                             moveDocument={returnFalse}
                                             rootSelected={returnFalse}
                                             ScreenToLocalTransform={Transform.Identity}
diff --git a/src/client/views/nodes/formattedText/RichTextSchema.tsx b/src/client/views/nodes/formattedText/RichTextSchema.tsx
index 683fa1029..046825ede 100644
--- a/src/client/views/nodes/formattedText/RichTextSchema.tsx
+++ b/src/client/views/nodes/formattedText/RichTextSchema.tsx
@@ -137,7 +137,6 @@ export class DashDocView {
                 ReactDOM.render(<DocumentView
                     Document={finalLayout}
                     DataDoc={resolvedDataDoc}
-                    fitDocToPanel={BoolCast(dashDoc._fitToBox)}
                     addDocument={returnFalse}
                     rootSelected={this._textBox.props.isSelected}
                     removeDocument={removeDoc}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index f8f244c35..243773b95 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -92,7 +92,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 <ContentFittingDocumentView
                     Document={this.targetDoc}
                     DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
-                    fitDocToPanel={true}
                     styleProvider={this.styleProvider}
                     rootSelected={returnTrue}
                     addDocument={returnFalse}
-- 
cgit v1.2.3-70-g09d2


From 5f999d6fa4dcc8a8994a4c97f7ce6e0d66d67411 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 14 Dec 2020 18:46:22 -0500
Subject: renamed ContentFittingDocumentView as DocumentView.  Renamed
 DocmentView as DocumentViewInternal

---
 src/client/util/DictationManager.ts                |  14 +-
 src/client/util/DocumentManager.ts                 |   4 +-
 src/client/util/DragManager.ts                     |  13 +-
 src/client/util/SelectionManager.ts                |   6 +-
 src/client/util/SharingManager.tsx                 |  12 +-
 src/client/views/.DS_Store                         | Bin 10244 -> 10244 bytes
 src/client/views/DocumentDecorations.tsx           |  60 ++--
 src/client/views/GestureOverlay.tsx                |   8 +-
 src/client/views/GlobalKeyHandler.ts               |   2 +-
 src/client/views/MainView.tsx                      |   6 +-
 src/client/views/OverlayView.tsx                   |  14 +-
 src/client/views/Palette.tsx                       |   2 +-
 src/client/views/PropertiesButtons.tsx             |  16 +-
 src/client/views/PropertiesView.tsx                |  13 +-
 src/client/views/TemplateMenu.tsx                  |  24 +-
 .../views/collections/CollectionCarousel3DView.tsx |   6 +-
 .../views/collections/CollectionCarouselView.tsx   |  21 +-
 .../views/collections/CollectionLinearView.tsx     |   6 +-
 src/client/views/collections/CollectionMenu.tsx    |   2 +-
 .../views/collections/CollectionSchemaView.tsx     |   8 +-
 .../views/collections/CollectionStackingView.tsx   |  17 +-
 .../views/collections/CollectionTreeView.tsx       |   4 +-
 src/client/views/collections/SchemaTable.tsx       |  20 +-
 src/client/views/collections/TabDocView.tsx        |  22 +-
 src/client/views/collections/TreeView.tsx          |  15 +-
 .../CollectionFreeFormLinkView.tsx                 |  12 +-
 .../CollectionFreeFormLinksView.tsx                |   7 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  12 +-
 .../collectionGrid/CollectionGridView.tsx          |   6 +-
 .../CollectionMulticolumnView.tsx                  |  10 +-
 .../CollectionMultirowView.tsx                     |  24 +-
 src/client/views/linking/LinkMenu.tsx              |   7 +-
 src/client/views/linking/LinkMenuItem.tsx          |   4 +-
 src/client/views/nodes/AudioBox.tsx                |   4 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  18 +-
 src/client/views/nodes/ComparisonBox.tsx           |  17 +-
 .../views/nodes/ContentFittingDocumentView.scss    |  25 --
 .../views/nodes/ContentFittingDocumentView.tsx     |  86 -----
 src/client/views/nodes/DocHolderBox.tsx            |   9 +-
 src/client/views/nodes/DocumentContentsView.tsx    |   2 +-
 src/client/views/nodes/DocumentIcon.tsx            |   5 +-
 src/client/views/nodes/DocumentView.scss           |  23 ++
 src/client/views/nodes/DocumentView.tsx            | 390 +++++++++++++--------
 src/client/views/nodes/LinkDocPreview.tsx          |   9 +-
 src/client/views/nodes/WebBox.tsx                  |   1 -
 .../views/nodes/formattedText/DashDocView.tsx      |  10 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   3 +-
 .../formattedText/FormattedTextBoxComment.tsx      |   7 +-
 .../views/nodes/formattedText/RichTextSchema.tsx   |  10 +-
 .../views/presentationview/PresElementBox.tsx      |  29 +-
 src/fields/Doc.ts                                  |  19 +-
 src/mobile/AudioUpload.tsx                         |  28 +-
 src/mobile/MobileInterface.tsx                     |   1 -
 53 files changed, 533 insertions(+), 560 deletions(-)
 delete mode 100644 src/client/views/nodes/ContentFittingDocumentView.scss
 delete mode 100644 src/client/views/nodes/ContentFittingDocumentView.tsx

(limited to 'src/client/views/collections/collectionGrid/CollectionGridView.tsx')

diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts
index 231e1fa8d..34e274699 100644
--- a/src/client/util/DictationManager.ts
+++ b/src/client/util/DictationManager.ts
@@ -1,17 +1,17 @@
-import { SelectionManager } from "./SelectionManager";
-import { DocumentView } from "../views/nodes/DocumentView";
-import { UndoManager } from "./UndoManager";
 import * as interpreter from "words-to-numbers";
-import { DocumentType } from "../documents/DocumentTypes";
 import { Doc, Opt } from "../../fields/Doc";
 import { List } from "../../fields/List";
-import { Docs } from "../documents/Documents";
-import { Cast, CastCtor } from "../../fields/Types";
+import { RichTextField } from "../../fields/RichTextField";
 import { listSpec } from "../../fields/Schema";
+import { Cast, CastCtor } from "../../fields/Types";
 import { AudioField, ImageField } from "../../fields/URLField";
 import { Utils } from "../../Utils";
-import { RichTextField } from "../../fields/RichTextField";
+import { Docs } from "../documents/Documents";
+import { DocumentType } from "../documents/DocumentTypes";
 import { DictationOverlay } from "../views/DictationOverlay";
+import { DocumentView } from "../views/nodes/DocumentView";
+import { SelectionManager } from "./SelectionManager";
+import { UndoManager } from "./UndoManager";
 
 /**
  * This namespace provides a singleton instance of a manager that
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index eaccbdb63..6258cc0ab 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -7,10 +7,10 @@ import { DocumentType } from '../documents/DocumentTypes';
 import { CollectionDockingView } from '../views/collections/CollectionDockingView';
 import { CollectionView } from '../views/collections/CollectionView';
 import { DocumentView } from '../views/nodes/DocumentView';
+import { FormattedTextBoxComment } from '../views/nodes/formattedText/FormattedTextBoxComment';
+import { LinkDocPreview } from '../views/nodes/LinkDocPreview';
 import { LinkManager } from './LinkManager';
 import { Scripting } from './Scripting';
-import { LinkDocPreview } from '../views/nodes/LinkDocPreview';
-import { FormattedTextBoxComment } from '../views/nodes/formattedText/FormattedTextBoxComment';
 
 export type CreateViewFunc = (doc: Doc, followLinkLocation: string, finished?: () => void) => void;
 
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index db371416c..4704d9e71 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -125,7 +125,6 @@ export namespace DragManager {
         }
         draggedDocuments: Doc[];
         droppedDocuments: Doc[];
-        dragDivName?: string;
         treeViewDoc?: Doc;
         offset: number[];
         canEmbed?: boolean;
@@ -418,17 +417,7 @@ export namespace DragManager {
         const hideDragShowOriginalElements = (hide: boolean) => {
             dragLabel.style.display = hide ? "" : "none";
             !hide && dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
-            eles.forEach(ele => {
-                if (ele.parentElement?.className === dragData.dragDivName) {
-                    ele.parentElement!.hidden = hide;
-                } else if (ele.parentElement?.parentElement?.className === dragData.dragDivName) {
-                    ele.parentElement!.parentElement!.hidden = hide;
-                } else if (ele.parentElement?.parentElement?.parentElement?.className === dragData.dragDivName) {
-                    ele.parentElement!.parentElement!.parentElement!.hidden = hide;
-                } else {
-                    ele.hidden = hide;
-                }
-            });
+            eles.forEach(ele => ele.hidden = hide);
         };
         hideDragShowOriginalElements(hideSource);
 
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 34e88c7b0..728a4bce1 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -1,9 +1,9 @@
-import { observable, action, runInAction, ObservableMap } from "mobx";
-import { Doc, Opt } from "../../fields/Doc";
-import { DocumentView } from "../views/nodes/DocumentView";
+import { action, observable, ObservableMap } from "mobx";
 import { computedFn } from "mobx-utils";
+import { Doc, Opt } from "../../fields/Doc";
 import { CollectionSchemaView } from "../views/collections/CollectionSchemaView";
 import { CollectionViewType } from "../views/collections/CollectionView";
+import { DocumentView } from "../views/nodes/DocumentView";
 
 export namespace SelectionManager {
 
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 062852e36..646926bb7 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -1,13 +1,14 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, runInAction, computed } from "mobx";
+import { intersection } from "lodash";
+import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import Select from "react-select";
 import * as RequestPromise from "request-promise";
-import { AclAdmin, AclPrivate, DataSym, Doc, DocListCast, Opt, AclSym, AclAddonly, AclEdit, AclReadonly, DocListCastAsync } from "../../fields/Doc";
+import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, DataSym, Doc, DocListCast, DocListCastAsync, Opt } from "../../fields/Doc";
 import { List } from "../../fields/List";
 import { Cast, StrCast } from "../../fields/Types";
-import { distributeAcls, GetEffectiveAcl, SharingPermissions, TraceMobx, normalizeEmail } from "../../fields/util";
+import { distributeAcls, GetEffectiveAcl, normalizeEmail, SharingPermissions, TraceMobx } from "../../fields/util";
 import { Utils } from "../../Utils";
 import { DocServer } from "../DocServer";
 import { CollectionView } from "../views/collections/CollectionView";
@@ -15,13 +16,12 @@ import { DictationOverlay } from "../views/DictationOverlay";
 import { MainViewModal } from "../views/MainViewModal";
 import { DocumentView } from "../views/nodes/DocumentView";
 import { TaskCompletionBox } from "../views/nodes/TaskCompletedBox";
+import { SearchBox } from "../views/search/SearchBox";
 import { DocumentManager } from "./DocumentManager";
 import { GroupManager, UserOptions } from "./GroupManager";
 import { GroupMemberView } from "./GroupMemberView";
-import "./SharingManager.scss";
 import { SelectionManager } from "./SelectionManager";
-import { intersection } from "lodash";
-import { SearchBox } from "../views/search/SearchBox";
+import "./SharingManager.scss";
 
 export interface User {
     email: string;
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 60b336584..14e9f6680 100644
Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index bce73c60e..1d0c5dac0 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -3,29 +3,29 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { AclAdmin, AclEdit, DataSym, Doc, Field, WidthSym, HeightSym } from "../../fields/Doc";
+import { AclAdmin, AclEdit, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc";
 import { Document } from '../../fields/documentSchemas';
 import { HtmlField } from '../../fields/HtmlField';
 import { InkField } from "../../fields/InkField";
 import { ScriptField } from '../../fields/ScriptField';
 import { Cast, NumCast } from "../../fields/Types";
 import { GetEffectiveAcl } from '../../fields/util';
-import { emptyFunction, returnFalse, setupMoveUpEvents, simulateMouseClick, returnVal } from "../../Utils";
-import { DocUtils, Docs } from "../documents/Documents";
+import { emptyFunction, returnFalse, returnVal, setupMoveUpEvents } from "../../Utils";
+import { Docs, DocUtils } from "../documents/Documents";
 import { DocumentType } from '../documents/DocumentTypes';
-import { DragManager, dropActionType } from "../util/DragManager";
+import { CurrentUserUtils } from '../util/CurrentUserUtils';
+import { DragManager } from "../util/DragManager";
 import { SelectionManager } from "../util/SelectionManager";
 import { SnappingManager } from '../util/SnappingManager';
 import { undoBatch, UndoManager } from "../util/UndoManager";
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { DocumentButtonBar } from './DocumentButtonBar';
 import './DocumentDecorations.scss';
+import { KeyManager } from './GlobalKeyHandler';
+import { InkStrokeProperties } from './InkStrokeProperties';
 import { DocumentView } from "./nodes/DocumentView";
 import React = require("react");
 import e = require('express');
-import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { InkStrokeProperties } from './InkStrokeProperties';
-import { KeyManager } from './GlobalKeyHandler';
 
 @observer
 export class DocumentDecorations extends React.Component<{ boundsLeft: number, boundsTop: number }, { value: string }> {
@@ -62,31 +62,15 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
 
     @computed
     get Bounds(): { x: number, y: number, b: number, r: number } {
-        return SelectionManager.SelectedDocuments().reduce((bounds, documentView) => {
-            if (documentView.props.renderDepth === 0 ||
-                documentView.props.treeViewDoc ||
-                !documentView.ContentDiv ||
-                Doc.AreProtosEqual(documentView.props.Document, Doc.UserDoc())) {
-                return bounds;
-            }
-            const transform = (documentView.props.ScreenToLocalTransform().scale(documentView.LocalScaling)).inverse();
-            var [sptX, sptY] = transform.transformPoint(0, 0);
-            let [bptX, bptY] = transform.transformPoint(documentView.props.PanelWidth(), documentView.props.PanelHeight());
-            if (documentView.props.LayoutTemplateString?.includes("LinkAnchorBox")) {
-                const docuBox = documentView.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
-                if (docuBox.length) {
-                    const rect = docuBox[0].getBoundingClientRect();
-                    sptX = rect.left;
-                    sptY = rect.top;
-                    bptX = rect.right;
-                    bptY = rect.bottom;
-                }
-            }
-            return {
-                x: Math.min(sptX, bounds.x), y: Math.min(sptY, bounds.y),
-                r: Math.max(bptX, bounds.r), b: Math.max(bptY, bounds.b)
-            };
-        }, { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
+        return SelectionManager.SelectedDocuments().map(dv => dv.getBounds()).reduce((bounds, rect) =>
+            !rect ? bounds :
+                {
+                    x: Math.min(rect.left, bounds.x),
+                    y: Math.min(rect.top, bounds.y),
+                    r: Math.max(rect.right, bounds.r),
+                    b: Math.max(rect.bottom, bounds.b)
+                },
+            { x: Number.MAX_VALUE, y: Number.MAX_VALUE, r: Number.MIN_VALUE, b: Number.MIN_VALUE });
     }
 
     titleBlur = action((commit: boolean) => {
@@ -136,8 +120,8 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     onBackgroundMove = (dragTitle: boolean, e: PointerEvent): boolean => {
         const dragDocView = SelectionManager.SelectedDocuments()[0];
         const dragData = new DragManager.DocumentDragData(SelectionManager.SelectedDocuments().map(dv => dv.props.Document));
-        const [left, top] = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.LocalScaling).inverse().transformPoint(0, 0);
-        dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.LocalScaling).transformDirection(e.x - left, e.y - top);
+        const { left, top } = dragDocView.getBounds() || { left: 0, top: 0 };
+        dragData.offset = dragDocView.props.ScreenToLocalTransform().scale(dragDocView.ContentScale()).transformDirection(e.x - left, e.y - top);
         dragData.moveDocument = dragDocView.props.moveDocument;
         dragData.isSelectionMove = true;
         dragData.canEmbed = dragTitle;
@@ -440,12 +424,12 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
             if (e.ctrlKey && !Doc.NativeHeight(docView.props.Document)) docView.toggleNativeDimensions();
             if (dX !== 0 || dY !== 0 || dW !== 0 || dH !== 0) {
                 const doc = Document(docView.rootDoc);
-                let nwidth = returnVal(docView.NativeWidth?.(), Doc.NativeWidth(doc));
-                let nheight = returnVal(docView.NativeHeight?.(), Doc.NativeHeight(doc));
+                let nwidth = docView.nativeWidth;
+                let nheight = docView.nativeHeight;
                 const width = (doc._width || 0);
                 let height = (doc._height || (nheight / nwidth * width));
                 height = !height || isNaN(height) ? 20 : height;
-                const scale = docView.props.ScreenToLocalTransform().Scale * docView.LocalScaling;
+                const scale = docView.props.ScreenToLocalTransform().Scale * docView.ContentScale();
                 if (nwidth && nheight) {
                     if (nwidth / nheight !== width / height && !dragBottom) {
                         height = nheight / nwidth * width;
@@ -504,7 +488,7 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b
     onPointerUp = (e: PointerEvent): void => {
         SelectionManager.SelectedDocuments().map(dv => {
             if (NumCast(dv.layoutDoc._delayAutoHeight) < this._dragHeights.get(dv.layoutDoc)!) {
-                dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.LocalScaling, dv.props.PanelWidth(), dv.props.PanelHeight());
+                dv.nativeWidth > 0 && Doc.toggleNativeDimensions(dv.layoutDoc, dv.ContentScale(), dv.props.PanelWidth(), dv.props.PanelHeight());
                 dv.layoutDoc._autoHeight = true;
             }
             dv.layoutDoc._delayAutoHeight = undefined;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index aaa914fa4..b32acce62 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -1,4 +1,5 @@
 import React = require("react");
+import * as fitCurve from 'fit-curve';
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../fields/Doc";
@@ -7,7 +8,7 @@ import { Cast, FieldValue, NumCast } from "../../fields/Types";
 import MobileInkOverlay from "../../mobile/MobileInkOverlay";
 import { GestureUtils } from "../../pen-gestures/GestureUtils";
 import { MobileInkOverlayContent } from "../../server/Message";
-import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter, setupMoveUpEvents, returnEmptyDoclist } from "../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from "../../Utils";
 import { CognitiveServices } from "../cognitive_services/CognitiveServices";
 import { DocUtils } from "../documents/Documents";
 import { CurrentUserUtils } from "../util/CurrentUserUtils";
@@ -15,15 +16,14 @@ import { InteractionUtils } from "../util/InteractionUtils";
 import { LinkManager } from "../util/LinkManager";
 import { Scripting } from "../util/Scripting";
 import { Transform } from "../util/Transform";
+import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
 import "./GestureOverlay.scss";
-import { ActiveInkBezierApprox, ActiveArrowStart, ActiveArrowEnd, ActiveFillColor, ActiveInkColor, ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "./InkingStroke";
+import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, SetActiveArrowEnd, SetActiveArrowStart, SetActiveDash, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "./InkingStroke";
 import { DocumentView } from "./nodes/DocumentView";
 import { RadialMenu } from "./nodes/RadialMenu";
 import HorizontalPalette from "./Palette";
 import { Touchable } from "./Touchable";
 import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
-import * as fitCurve from 'fit-curve';
-import { CollectionFreeFormViewChrome } from "./collections/CollectionMenu";
 
 @observer
 export class GestureOverlay extends Touchable {
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 50a8e71f9..a727e58a4 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -22,11 +22,11 @@ import { DocumentDecorations } from "./DocumentDecorations";
 import { InkStrokeProperties } from "./InkStrokeProperties";
 import { MainView } from "./MainView";
 import { DocumentLinksButton } from "./nodes/DocumentLinksButton";
-import { DocumentView } from "./nodes/DocumentView";
 import { PDFMenu } from "./pdf/PDFMenu";
 import { SnappingManager } from "../util/SnappingManager";
 import { SearchBox } from "./search/SearchBox";
 import { random } from "lodash";
+import { DocumentView } from "./nodes/DocumentView";
 
 const modifiers = ["control", "meta", "shift", "alt"];
 type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise<KeyControlInfo>;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 960b50f43..17f2e0d89 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -13,7 +13,7 @@ import { List } from '../../fields/List';
 import { PrefetchProxy } from '../../fields/Proxy';
 import { BoolCast, PromiseValue, StrCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../Utils';
 import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
 import { DocServer } from '../DocServer';
 import { Docs } from '../documents/Documents';
@@ -46,7 +46,7 @@ import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
 import { AudioBox } from './nodes/AudioBox';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
+import { DocumentView } from './nodes/DocumentView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import { LinkDocPreview } from './nodes/LinkDocPreview';
@@ -58,7 +58,7 @@ import { PDFMenu } from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider, StyleProp } from './StyleProvider';
+import { DefaultStyleProvider } from './StyleProvider';
 const _global = (window /* browser */ || global /* node */) as any;
 
 @observer
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index cb7ff20b2..78053be92 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -2,20 +2,18 @@ import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import ReactLoading from 'react-loading';
-import { Doc, DocListCast, Opt } from "../../fields/Doc";
+import { Doc } from "../../fields/Doc";
 import { Id } from "../../fields/FieldSymbols";
-import { NumCast, Cast } from "../../fields/Types";
-import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, Utils, setupMoveUpEvents, returnEmptyFilter, returnEmptyDoclist } from "../../Utils";
+import { Cast, NumCast } from "../../fields/Types";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils } from "../../Utils";
+import { CurrentUserUtils } from "../util/CurrentUserUtils";
+import { DragManager } from "../util/DragManager";
+import { Scripting } from "../util/Scripting";
 import { Transform } from "../util/Transform";
 import { CollectionFreeFormLinksView } from "./collections/collectionFreeForm/CollectionFreeFormLinksView";
 import { DocumentView } from "./nodes/DocumentView";
 import './OverlayView.scss';
-import { Scripting } from "../util/Scripting";
 import { ScriptingRepl } from './ScriptingRepl';
-import { DragManager } from "../util/DragManager";
-import { List } from "../../fields/List";
-import { CurrentUserUtils } from "../util/CurrentUserUtils";
-import { TabDocView } from "./collections/TabDocView";
 import { DefaultStyleProvider } from "./StyleProvider";
 
 export type OverlayDisposer = () => void;
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
index 4d0368424..304687123 100644
--- a/src/client/views/Palette.tsx
+++ b/src/client/views/Palette.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Doc } from "../../fields/Doc";
 import { NumCast } from "../../fields/Types";
-import { emptyFunction, emptyPath, returnEmptyString, returnZero, returnFalse, returnOne, returnTrue, returnEmptyFilter, returnEmptyDoclist } from "../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue } from "../../Utils";
 import { Transform } from "../util/Transform";
 import { DocumentView } from "./nodes/DocumentView";
 import "./Palette.scss";
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 9de4f9c67..1731d715a 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -187,7 +187,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     @action @undoBatch
     onLock = () => {
-        SelectionManager.SelectedDocuments().forEach(dv => dv.toggleLockPosition());
+        SelectionManager.SelectedDocuments().forEach(dv => dv.docView?.toggleLockPosition());
     }
 
     @computed
@@ -327,18 +327,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
         SelectionManager.SelectedDocuments().forEach(dv => {
             if (value === "nothing") {
-                dv.noOnClick();
+                dv.docView?.noOnClick();
             } else if (value === "enterPortal") {
-                dv.noOnClick();
-                dv.makeIntoPortal();
+                dv.docView?.noOnClick();
+                dv.docView?.makeIntoPortal();
             } else if (value === "toggleDetail") {
-                dv.noOnClick();
-                dv.toggleDetail();
+                dv.docView?.noOnClick();
+                dv.docView?.toggleDetail();
             } else if (value === "linkInPlace") {
-                dv.noOnClick();
+                dv.docView?.noOnClick();
                 dv.toggleFollowLink("inPlace", true, false);
             } else if (value === "linkOnRight") {
-                dv.noOnClick();
+                dv.docView?.noOnClick();
                 dv.toggleFollowLink("add:right", false, false);
             }
         });
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 46d3b201b..1c14bc721 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -5,13 +5,13 @@ import { intersection } from "lodash";
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { ColorState, SketchPicker } from "react-color";
-import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym, Opt } from "../../fields/Doc";
+import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, WidthSym } from "../../fields/Doc";
 import { Id } from "../../fields/FieldSymbols";
 import { InkField } from "../../fields/InkField";
 import { ComputedField } from "../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../fields/Types";
-import { GetEffectiveAcl, SharingPermissions, denormalizeEmail } from "../../fields/util";
-import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne } from "../../Utils";
+import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from "../../fields/util";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse } from "../../Utils";
 import { DocumentType } from "../documents/DocumentTypes";
 import { DocumentManager } from "../util/DocumentManager";
 import { SelectionManager } from "../util/SelectionManager";
@@ -19,16 +19,15 @@ import { SharingManager } from "../util/SharingManager";
 import { Transform } from "../util/Transform";
 import { undoBatch, UndoManager } from "../util/UndoManager";
 import { CollectionDockingView } from "./collections/CollectionDockingView";
+import { CollectionViewType } from "./collections/CollectionView";
 import { EditableView } from "./EditableView";
 import { InkStrokeProperties } from "./InkStrokeProperties";
-import { ContentFittingDocumentView } from "./nodes/ContentFittingDocumentView";
+import { DocumentView, StyleProviderFunc } from "./nodes/DocumentView";
 import { KeyValueBox } from "./nodes/KeyValueBox";
 import { PresBox } from "./nodes/PresBox";
 import { PropertiesButtons } from "./PropertiesButtons";
 import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector";
 import "./PropertiesView.scss";
-import { CollectionViewType } from "./collections/CollectionView";
-import { DocumentViewProps, StyleProviderFunc } from "./nodes/DocumentView";
 import { DefaultStyleProvider } from "./StyleProvider";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
@@ -265,7 +264,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             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 ref={this.propertiesDocViewRef} style={{ pointerEvents: "none", display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}>
-                <ContentFittingDocumentView
+                <DocumentView
                     Document={layoutDoc}
                     DataDoc={this.dataDoc}
                     renderDepth={1}
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index ddba71dd2..841e8aef9 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -1,19 +1,19 @@
-import { action, observable, runInAction, ObservableSet, trace, computed } from "mobx";
+import { action, computed, observable, ObservableSet, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { undoBatch } from "../util/UndoManager";
-import './TemplateMenu.scss';
-import { DocumentView } from "./nodes/DocumentView";
-import React = require("react");
 import { Doc, DocListCast } from "../../fields/Doc";
-import { Docs, DocUtils, } from "../documents/Documents";
-import { StrCast, Cast } from "../../fields/Types";
-import { CollectionTreeView } from "./collections/CollectionTreeView";
-import { returnTrue, emptyFunction, returnFalse, returnOne, emptyPath, returnZero, returnEmptyFilter, returnEmptyDoclist } from "../../Utils";
-import { Transform } from "../util/Transform";
-import { ScriptField, ComputedField } from "../../fields/ScriptField";
-import { Scripting } from "../util/Scripting";
 import { List } from "../../fields/List";
+import { ScriptField } from "../../fields/ScriptField";
+import { Cast, StrCast } from "../../fields/Types";
 import { TraceMobx } from "../../fields/util";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../Utils";
+import { Docs, DocUtils } from "../documents/Documents";
+import { Scripting } from "../util/Scripting";
+import { Transform } from "../util/Transform";
+import { undoBatch } from "../util/UndoManager";
+import { CollectionTreeView } from "./collections/CollectionTreeView";
+import { DocumentView } from "./nodes/DocumentView";
+import './TemplateMenu.scss';
+import React = require("react");
 
 @observer
 class TemplateToggle extends React.Component<{ template: string, checked: boolean, toggle: (event: React.ChangeEvent<HTMLInputElement>, template: string) => void }> {
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 67f73d44a..9b1e3b80d 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -8,9 +8,9 @@ import { Id } from '../../../fields/FieldSymbols';
 import { makeInterface } from '../../../fields/Schema';
 import { ScriptField } from '../../../fields/ScriptField';
 import { NumCast, ScriptCast, StrCast } from '../../../fields/Types';
-import { returnFalse, Utils, OmitKeys } from '../../../Utils';
+import { OmitKeys, returnFalse, Utils } from '../../../Utils';
 import { DragManager } from '../../util/DragManager';
-import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
+import { DocumentView } from '../nodes/DocumentView';
 import "./CollectionCarousel3DView.scss";
 import { CollectionSubView } from './CollectionSubView';
 
@@ -42,7 +42,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         const displayDoc = (childPair: { layout: Doc, data: Doc }) => {
             const script = ScriptField.MakeScript("child._showCaption = 'caption'", { child: Doc.name }, { child: childPair.layout });
             const onChildClick = script && (() => script);
-            return <ContentFittingDocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+            return <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
                 onDoubleClick={this.onChildDoubleClick}
                 onClick={onChildClick}
                 renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 26c36507a..512328835 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -1,21 +1,18 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observable, computed } from 'mobx';
+import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { documentSchema, collectionSchema } from '../../../fields/documentSchemas';
+import { Doc } from '../../../fields/Doc';
+import { collectionSchema, documentSchema } from '../../../fields/documentSchemas';
 import { makeInterface } from '../../../fields/Schema';
-import { NumCast, StrCast, ScriptCast, Cast } from '../../../fields/Types';
+import { NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { OmitKeys, returnFalse } from '../../../Utils';
 import { DragManager } from '../../util/DragManager';
-import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
-import "./CollectionCarouselView.scss";
-import { CollectionSubView } from './CollectionSubView';
-import { Doc } from '../../../fields/Doc';
+import { DocumentView } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
-import { ContextMenu } from '../ContextMenu';
-import { ObjectField } from '../../../fields/ObjectField';
-import { returnFalse, returnZero, OmitKeys } from '../../../Utils';
-import { ScriptField } from '../../../fields/ScriptField';
 import { StyleProp } from '../StyleProvider';
+import "./CollectionCarouselView.scss";
+import { CollectionSubView } from './CollectionSubView';
 
 type CarouselDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>;
 const CarouselDocument = makeInterface(documentSchema, collectionSchema);
@@ -50,7 +47,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
         return !(curDoc?.layout instanceof Doc) ? (null) :
             <>
                 <div className="collectionCarouselView-image" key="image">
-                    <ContentFittingDocumentView  {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                    <DocumentView  {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
                         onDoubleClick={this.onContentDoubleClick}
                         onClick={this.onContentClick}
                         renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 58e9fd5db..99a11de15 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -7,11 +7,11 @@ import { documentSchema } from '../../../fields/documentSchemas';
 import { Id } from '../../../fields/FieldSymbols';
 import { makeInterface } from '../../../fields/Schema';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
-import { emptyFunction, returnOne, returnTrue, Utils } from '../../../Utils';
+import { emptyFunction, returnTrue, Utils } from '../../../Utils';
 import { DragManager } from '../../util/DragManager';
 import { Transform } from '../../util/Transform';
-import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
 import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
+import { DocumentView } from '../nodes/DocumentView';
 import { LinkDescriptionPopup } from '../nodes/LinkDescriptionPopup';
 import "./CollectionLinearView.scss";
 import { CollectionSubView } from './CollectionSubView';
@@ -137,7 +137,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                                 width: nested ? pair.layout[WidthSym]() : this.dimension(),
                                 height: nested && pair.layout.linearViewIsExpanded ? pair.layout[HeightSym]() : this.dimension(),
                             }}  >
-                            <ContentFittingDocumentView
+                            <DocumentView
                                 Document={pair.layout}
                                 DataDoc={pair.data}
                                 addDocument={this.props.addDocument}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 833fc0007..896b10360 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -11,6 +11,7 @@ import { Id } from "../../../fields/FieldSymbols";
 import { InkTool } from "../../../fields/InkField";
 import { List } from "../../../fields/List";
 import { ObjectField } from "../../../fields/ObjectField";
+import { RichTextField } from "../../../fields/RichTextField";
 import { listSpec } from "../../../fields/Schema";
 import { ScriptField } from "../../../fields/ScriptField";
 import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
@@ -33,7 +34,6 @@ import { PresBox } from "../nodes/PresBox";
 import "./CollectionMenu.scss";
 import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { TabDocView } from "./TabDocView";
-import { RichTextField } from "../../../fields/RichTextField";
 
 @observer
 export class CollectionMenu extends AntimodeMenu<AntimodeMenuProps> {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 81ee16f63..f153f1cca 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -11,7 +11,7 @@ import { listSpec } from "../../../fields/Schema";
 import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { Cast, NumCast } from "../../../fields/Types";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, returnFalse, returnOne, setupMoveUpEvents } from "../../../Utils";
+import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { SnappingManager } from "../../util/SnappingManager";
 import { Transform } from "../../util/Transform";
@@ -20,11 +20,11 @@ import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globa
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import '../DocumentDecorations.scss';
-import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
+import { DocumentView } from "../nodes/DocumentView";
+import { DefaultStyleProvider } from "../StyleProvider";
 import "./CollectionSchemaView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { SchemaTable } from "./SchemaTable";
-import { DefaultStyleProvider } from "../StyleProvider";
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
 export enum ColumnType {
@@ -398,7 +398,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     get previewPanel() {
         return <div ref={this.createTarget} style={{ width: `${this.previewWidth()}px` }}>
             {!this.previewDocument ? (null) :
-                <ContentFittingDocumentView
+                <DocumentView
                     Document={this.previewDocument}
                     DataDoc={undefined}
                     fitContentsToDoc={true}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 8bcd1ba29..d8a8723cd 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CursorProperty } from "csstype";
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { DataSym, Doc, HeightSym, WidthSym, Opt } from "../../../fields/Doc";
+import { DataSym, Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
 import { collectionSchema, documentSchema } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
 import { List } from "../../../fields/List";
@@ -11,7 +11,7 @@ import { listSpec, makeInterface } from "../../../fields/Schema";
 import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, returnFalse, returnOne, returnVal, returnZero, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils";
+import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils";
 import { DocUtils } from "../../documents/Documents";
 import { DragManager, dropActionType } from "../../util/DragManager";
 import { SnappingManager } from "../../util/SnappingManager";
@@ -21,15 +21,14 @@ import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { EditableView } from "../EditableView";
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { DocAfterFocusFunc, DocumentViewProps } from "../nodes/DocumentView";
+import { DocumentView, DocAfterFocusFunc, DocumentViewProps } from "../nodes/DocumentView";
+import { FieldViewProps } from "../nodes/FieldView";
+import { StyleProp } from "../StyleProvider";
 import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow";
 import "./CollectionStackingView.scss";
 import { CollectionStackingViewFieldColumn } from "./CollectionStackingViewFieldColumn";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
-import { StyleProp } from "../StyleProvider";
-import { FieldViewProps } from "../nodes/FieldView";
 const _global = (window /* browser */ || global /* node */) as any;
 
 type StackingDocument = makeInterface<[typeof collectionSchema, typeof documentSchema]>;
@@ -201,7 +200,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             }
             return this.props.styleProvider?.(doc, props, property);
         };
-        return <ContentFittingDocumentView
+        return <DocumentView
             Document={doc}
             DataDoc={dataDoc || (!Doc.AreProtosEqual(doc[DataSym], doc) && doc[DataSym])}
             renderDepth={this.props.renderDepth + 1}
@@ -480,8 +479,8 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
     }
 
 
-    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc)); }
-    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc)); }
+    @computed get nativeWidth() { return Doc.NativeWidth(this.layoutDoc); }
+    @computed get nativeHeight() { return Doc.NativeHeight(this.layoutDoc); }
 
     @computed get scaling() { return !this.nativeWidth ? 1 : this.props.PanelHeight() / this.nativeHeight; }
 
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 8ea7c3723..a90edc2c9 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -8,7 +8,7 @@ import { Document } from '../../../fields/Schema';
 import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, returnTrue, Utils } from '../../../Utils';
+import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, Utils } from '../../../Utils';
 import { DocUtils } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from "../../util/DragManager";
@@ -20,11 +20,11 @@ import { ContextMenuProps } from '../ContextMenuItem';
 import { EditableView } from "../EditableView";
 import { DocumentView } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
+import { StyleProp } from '../StyleProvider';
 import { CollectionSubView } from "./CollectionSubView";
 import "./CollectionTreeView.scss";
 import { TreeView } from "./TreeView";
 import React = require("react");
-import { StyleProp } from '../StyleProvider';
 
 export type collectionTreeViewProps = {
     treeViewHideTitle?: boolean;
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index b4afbc1d3..d77f70607 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -5,31 +5,31 @@ import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from "react-table";
 import "react-table/react-table.css";
-import { Doc, DocListCast, Field, Opt, AclPrivate, AclReadonly, DataSym } from "../../../fields/Doc";
+import { DateField } from "../../../fields/DateField";
+import { AclPrivate, AclReadonly, DataSym, Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
 import { Id } from "../../../fields/FieldSymbols";
 import { List } from "../../../fields/List";
 import { listSpec } from "../../../fields/Schema";
 import { SchemaHeaderField } from "../../../fields/SchemaHeaderField";
 import { ComputedField } from "../../../fields/ScriptField";
 import { Cast, FieldValue, NumCast, StrCast } from "../../../fields/Types";
-import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero, returnEmptyDoclist } from "../../../Utils";
+import { ImageField } from "../../../fields/URLField";
+import { GetEffectiveAcl } from "../../../fields/util";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse } from "../../../Utils";
 import { Docs, DocumentOptions } from "../../documents/Documents";
+import { DocumentType } from "../../documents/DocumentTypes";
 import { CompileScript, Transformer, ts } from "../../util/Scripting";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH, SCHEMA_DIVIDER_WIDTH } from '../../views/globalCssVariables.scss';
 import { ContextMenu } from "../ContextMenu";
 import '../DocumentDecorations.scss';
-import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import { CellProps, CollectionSchemaButtons, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDateCell, CollectionSchemaDocCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaBooleanCell } from "./CollectionSchemaCells";
+import { DocumentView } from "../nodes/DocumentView";
+import { CellProps, CollectionSchemaButtons, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDateCell, CollectionSchemaDocCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaNumberCell, CollectionSchemaStringCell } from "./CollectionSchemaCells";
 import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders";
 import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC";
 import "./CollectionSchemaView.scss";
 import { CollectionView } from "./CollectionView";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { GetEffectiveAcl } from "../../../fields/util";
-import { DateField } from "../../../fields/DateField";
-import { ImageField } from "../../../fields/URLField";
 
 
 enum ColumnType {
@@ -567,7 +567,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         background: "dimGray", display: "block", top: 0, left: 0,
                         transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)`
                     }}
-                    ref="overlay"><ContentFittingDocumentView
+                    ref="overlay"><DocumentView
                         Document={this._showDoc}
                         DataDoc={this._showDataDoc}
                         freezeDimensions={true}
@@ -588,7 +588,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         addDocTab={this.props.addDocTab}
                         pinToPres={this.props.pinToPres}
                         bringToFront={returnFalse}>
-                    </ContentFittingDocumentView>
+                    </DocumentView>
                 </div>}
         </div>;
     }
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 1f00b3a02..a4ab201bc 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -6,14 +6,15 @@ import { clamp } from 'lodash';
 import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import * as ReactDOM from 'react-dom';
-import { DataSym, Doc, DocListCast, Opt, DocListCastAsync, StrListCast, WidthSym, HeightSym } from "../../../fields/Doc";
+import { DataSym, Doc, DocListCast, DocListCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
 import { Id } from '../../../fields/FieldSymbols';
 import { FieldId } from "../../../fields/RefField";
 import { listSpec } from '../../../fields/Schema';
-import { Cast, NumCast, StrCast, BoolCast } from "../../../fields/Types";
+import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, emptyPath, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils";
+import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils";
 import { DocServer } from "../../DocServer";
+import { DocumentType } from '../../documents/DocumentTypes';
 import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager, dropActionType } from "../../util/DragManager";
@@ -22,19 +23,16 @@ import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from "../../util/UndoManager";
 import { DocumentView, DocAfterFocusFunc, DocumentViewProps } from "../nodes/DocumentView";
+import { FieldViewProps } from '../nodes/FieldView';
 import { PresBox, PresMovement } from '../nodes/PresBox';
+import { DefaultLayerProvider, DefaultStyleProvider, StyleLayers, StyleProp } from '../StyleProvider';
 import { CollectionDockingView } from './CollectionDockingView';
 import { CollectionDockingViewMenu } from './CollectionDockingViewMenu';
 import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
 import { CollectionViewType } from './CollectionView';
 import "./TabDocView.scss";
 import React = require("react");
-import { List } from '../../../fields/List';
-import { DocumentType } from '../../documents/DocumentTypes';
 import Color = require('color');
-import { StyleProp, DefaultStyleProvider, DefaultLayerProvider, StyleLayers } from '../StyleProvider';
-import { FieldViewProps } from '../nodes/FieldView';
-import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
 const _global = (window /* browser */ || global /* node */) as any;
 
 interface TabDocViewProps {
@@ -51,7 +49,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     @observable private _panelHeight = 0;
     @observable private _isActive: boolean = false;
     @observable private _document: Doc | undefined;
-    @observable private _view: ContentFittingDocumentView | undefined;
+    @observable private _view: DocumentView | undefined;
 
     @computed get layoutDoc() { return this._document && Doc.Layout(this._document); }
     @computed get tabColor() { return StrCast(this._document?._backgroundColor, StrCast(this._document?.backgroundColor, DefaultStyleProvider(this._document, undefined, StyleProp.BackgroundColor))); }
@@ -119,7 +117,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             // select the tab document when the tab is directly clicked and activate the tab whenver the tab document is selected
             titleEle.onpointerdown = action((e: any) => {
                 if (e.target.className !== "lm_close_tab") {
-                    if (this.view?.docView) SelectionManager.SelectDoc(this.view.docView, false);
+                    if (this.view) SelectionManager.SelectDoc(this.view, false);
                     else this._activated = true;
                     if (Date.now() - titleEle.lastClick < 1000) titleEle.select();
                     titleEle.lastClick = Date.now();
@@ -140,7 +138,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
             const stack = tab.contentItem.parent;
             const dragHdl = document.createElement("div");
             dragHdl.className = "lm_drag_tab";
-            tab._disposers.buttonDisposer = reaction(() => this.view?.docView, view =>
+            tab._disposers.buttonDisposer = reaction(() => this.view, view =>
                 view && [ReactDOM.render(<span className="tabDocView-drag" onPointerDown={dragBtnDown}><CollectionDockingViewMenu views={() => [view]} Stack={stack} /></span>, dragHdl), tab._disposers.buttonDisposer?.()],
                 { fireImmediately: true });
             tab.reactComponents = [dragHdl];
@@ -374,7 +372,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     @computed get docView() {
         TraceMobx();
         return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) :
-            <><ContentFittingDocumentView key={this._document[Id]} ref={action((r: ContentFittingDocumentView) => this._view = r)}
+            <><DocumentView key={this._document[Id]} ref={action((r: DocumentView) => this._view = r)}
                 renderDepth={0}
                 Document={this._document}
                 DataDoc={!Doc.AreProtosEqual(this._document[DataSym], this._document) ? this._document[DataSym] : undefined}
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 2c2498e0b..31a1a2b99 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, trace } from "mobx";
+import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
 import { DataSym, Doc, DocListCast, DocListCastOrNull, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
@@ -9,7 +9,7 @@ import { listSpec } from '../../../fields/Schema';
 import { ComputedField, ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, returnZero, simulateMouseClick, Utils } from '../../../Utils';
 import { Docs, DocUtils } from '../../documents/Documents';
 import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from '../../util/CurrentUserUtils';
@@ -20,17 +20,16 @@ import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoBatch, UndoManager } from '../../util/UndoManager';
 import { EditableView } from "../EditableView";
-import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
 import { DocumentView, DocumentViewProps, StyleProviderFunc } from '../nodes/DocumentView';
+import { FieldViewProps } from '../nodes/FieldView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
 import { KeyValueBox } from '../nodes/KeyValueBox';
+import { StyleProp, testDocProps } from '../StyleProvider';
 import { CollectionTreeView } from './CollectionTreeView';
 import { CollectionView, CollectionViewType } from './CollectionView';
 import "./TreeView.scss";
 import React = require("react");
-import { StyleProp, testDocProps } from '../StyleProvider';
-import { FieldViewProps } from '../nodes/FieldView';
 
 export interface TreeViewProps {
     document: Doc;
@@ -84,7 +83,7 @@ export class TreeView extends React.Component<TreeViewProps> {
     private _uniqueId = Utils.GenerateGuid();
     private _editMaxWidth: number | string = 0;
 
-    @observable _dref: ContentFittingDocumentView | undefined | null;
+    @observable _dref: DocumentView | undefined | null;
     @computed get doc() { TraceMobx(); return this.props.document; }
     get noviceMode() { return BoolCast(Doc.UserDoc().noviceMode, false); }
     get displayName() { return "TreeView(" + this.props.document.title + ")"; }  // this makes mobx trace() statements more descriptive
@@ -609,7 +608,7 @@ export class TreeView extends React.Component<TreeViewProps> {
     renderEmbeddedDocument = (asText: boolean) => {
         const panelWidth = asText || StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth;
         const panelHeight = asText ? this.rtfOutlineHeight : StrCast(Doc.LayoutField(this.layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight;
-        return <ContentFittingDocumentView key={this.doc[Id]} ref={action((r: ContentFittingDocumentView | null) => this._dref = r)}
+        return <DocumentView key={this.doc[Id]} ref={action((r: DocumentView | null) => this._dref = r)}
             Document={this.doc}
             DataDoc={undefined}
             PanelWidth={panelWidth}
@@ -671,7 +670,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         else this._editMaxWidth = "";
 
         const hideTitle = this.doc.treeViewHideHeader || this.outlineMode;
-        return <div className={`treeView-container${this._dref?.docView?.contentsActive() ? "-active" : ""}`}
+        return <div className={`treeView-container${this._dref?.contentsActive() ? "-active" : ""}`}
             ref={this.createTreeDropTarget}
             onPointerDown={e => this.props.active(true) && SelectionManager.DeselectAll()}
             onKeyDown={this.onKeyDown}>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 473363292..ae5688b48 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -1,14 +1,14 @@
+import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../../fields/Doc";
-import { Utils, setupMoveUpEvents, emptyFunction, returnFalse } from '../../../../Utils';
+import { Id } from "../../../../fields/FieldSymbols";
+import { NumCast, StrCast } from "../../../../fields/Types";
+import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { DocumentType } from "../../../documents/DocumentTypes";
+import { SnappingManager } from "../../../util/SnappingManager";
 import { DocumentView } from "../../nodes/DocumentView";
 import "./CollectionFreeFormLinkView.scss";
 import React = require("react");
-import { DocumentType } from "../../../documents/DocumentTypes";
-import { observable, action, reaction, IReactionDisposer, trace, computed } from "mobx";
-import { StrCast, Cast, NumCast } from "../../../../fields/Types";
-import { Id } from "../../../../fields/FieldSymbols";
-import { SnappingManager } from "../../../util/SnappingManager";
 
 export interface CollectionFreeFormLinkViewProps {
     A: DocumentView;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 260b257c5..4dab8f15b 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -1,15 +1,14 @@
-import { computed, trace } from "mobx";
+import { computed } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
+import { Utils } from "../../../../Utils";
+import { DocumentType } from "../../../documents/DocumentTypes";
 import { DocumentManager } from "../../../util/DocumentManager";
 import { DocumentView } from "../../nodes/DocumentView";
 import "./CollectionFreeFormLinksView.scss";
 import { CollectionFreeFormLinkView } from "./CollectionFreeFormLinkView";
 import React = require("react");
-import { Utils, emptyFunction } from "../../../../Utils";
-import { DocumentType } from "../../../documents/DocumentTypes";
-import { SnappingManager } from "../../../util/SnappingManager";
 
 @observer
 export class CollectionFreeFormLinksView extends React.Component {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index bda3757e3..67ad2b769 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -119,8 +119,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @computed get fitToContent() { return (this.props.fitContentsToDoc || this.Document._fitToBox) && !this.isAnnotationOverlay; }
     @computed get parentScaling() { return 1; }
     @computed get contentBounds() { return aggregateBounds(this._layoutElements.filter(e => e.bounds && !e.bounds.z).map(e => e.bounds!), NumCast(this.layoutDoc._xPadding, 10), NumCast(this.layoutDoc._yPadding, 10)); }
-    @computed get nativeWidth() { return this.fitToContent ? 0 : returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.Document)); }
-    @computed get nativeHeight() { return this.fitToContent ? 0 : returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.Document)); }
+    @computed get nativeWidth() { return this.fitToContent ? 0 : Doc.NativeWidth(this.Document); }
+    @computed get nativeHeight() { return this.fitToContent ? 0 : Doc.NativeHeight(this.Document); }
     private get isAnnotationOverlay() { return this.props.isAnnotationOverlay; }
     private get scaleFieldKey() { return this.props.scaleField || "_viewScale"; }
     private get borderWidth() { return this.isAnnotationOverlay ? 0 : COLLECTION_BORDER_WIDTH; }
@@ -322,7 +322,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                 const clusterDocs = eles.map(ele => DocumentManager.Instance.getDocumentView(ele, this.props.CollectionView)!);
                 const de = new DragManager.DocumentDragData(eles);
                 de.moveDocument = this.props.moveDocument;
-                const [left, top] = clusterDocs[0].props.ScreenToLocalTransform().scale(clusterDocs[0].LocalScaling).inverse().transformPoint(0, 0);
+                const { left, top } = clusterDocs[0].getBounds() || { left: 0, top: 0 };
                 de.offset = this.getTransform().transformDirection(ptsParent.clientX - left, ptsParent.clientY - top);
                 de.dropAction = e.ctrlKey || e.altKey ? "alias" : undefined;
                 DragManager.StartDocumentDrag(clusterDocs.map(v => v.ContentDiv!), de, ptsParent.clientX, ptsParent.clientY, { hideSource: !de.dropAction });
@@ -1275,7 +1275,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @undoBatch
     @action
     toggleNativeDimensions = () => {
-        Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0);
+        Doc.toggleNativeDimensions(this.layoutDoc, 1, this.nativeWidth, this.nativeHeight);
     }
 
     @undoBatch
@@ -1499,8 +1499,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     @computed get contentScaling() {
         if (this.props.isAnnotationOverlay && !this.props.forceScaling) return 0;
-        const nw = returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.Document));
-        const nh = returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.Document));
+        const nw = this.nativeWidth;
+        const nh = this.nativeHeight;
         const hscale = nh ? this.props.PanelHeight() / nh : 1;
         const wscale = nw ? this.props.PanelWidth() / nw : 1;
         return wscale < hscale ? wscale : hscale;
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 093a4c770..58db080ad 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -6,7 +6,7 @@ import { documentSchema } from '../../../../fields/documentSchemas';
 import { Id } from '../../../../fields/FieldSymbols';
 import { makeInterface } from '../../../../fields/Schema';
 import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, OmitKeys, returnFalse, returnOne, setupMoveUpEvents } from '../../../../Utils';
+import { emptyFunction, OmitKeys, returnFalse, setupMoveUpEvents } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { DragManager } from '../../../util/DragManager';
 import { SnappingManager } from '../../../util/SnappingManager';
@@ -14,7 +14,7 @@ import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { ContextMenuProps } from '../../ContextMenuItem';
-import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
+import { DocumentView } from '../../nodes/DocumentView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { CollectionSubView } from '../CollectionSubView';
 import "./CollectionGridView.scss";
@@ -161,7 +161,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * @returns the `ContentFittingDocumentView` of the node
      */
     getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
-        return <ContentFittingDocumentView
+        return <DocumentView
             {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
             Document={layout}
             DataDoc={layout.resolvedDataDoc as Doc}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index fe1595644..85013b960 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -3,18 +3,18 @@ import { observer } from 'mobx-react';
 import * as React from "react";
 import { Doc } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
+import { List } from '../../../../fields/List';
 import { makeInterface } from '../../../../fields/Schema';
-import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../fields/Types';
+import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { returnFalse } from '../../../../Utils';
 import { DragManager, dropActionType } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
 import { undoBatch } from '../../../util/UndoManager';
-import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
+import { DocumentView } from '../../nodes/DocumentView';
 import { CollectionSubView } from '../CollectionSubView';
 import "./CollectionMulticolumnView.scss";
 import ResizeBar from './MulticolumnResizer';
 import WidthLabel from './MulticolumnWidthLabel';
-import { List } from '../../../../fields/List';
-import { returnZero, returnFalse, returnOne } from '../../../../Utils';
 
 type MulticolumnDocument = makeInterface<[typeof documentSchema]>;
 const MulticolumnDocument = makeInterface(documentSchema);
@@ -213,7 +213,7 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu
         return this.props.addDocTab(doc, where);
     }
     getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
-        return <ContentFittingDocumentView
+        return <DocumentView
             Document={layout}
             DataDoc={layout.resolvedDataDoc as Doc}
             styleProvider={this.props.styleProvider}
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index ca712b521..4f5c8af95 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -1,20 +1,20 @@
+import { action, computed } from 'mobx';
 import { observer } from 'mobx-react';
-import { makeInterface } from '../../../../fields/Schema';
-import { documentSchema } from '../../../../fields/documentSchemas';
-import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView';
 import * as React from "react";
 import { Doc } from '../../../../fields/Doc';
-import { NumCast, StrCast, BoolCast, ScriptCast } from '../../../../fields/Types';
-import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
-import { Utils, returnZero, returnFalse, returnOne } from '../../../../Utils';
-import "./CollectionMultirowView.scss";
-import { computed, trace, observable, action } from 'mobx';
+import { documentSchema } from '../../../../fields/documentSchemas';
+import { List } from '../../../../fields/List';
+import { makeInterface } from '../../../../fields/Schema';
+import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { returnFalse } from '../../../../Utils';
+import { DragManager, dropActionType } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
+import { undoBatch } from '../../../util/UndoManager';
+import { DocumentView } from '../../nodes/DocumentView';
+import { CollectionSubView } from '../CollectionSubView';
+import "./CollectionMultirowView.scss";
 import HeightLabel from './MultirowHeightLabel';
 import ResizeBar from './MultirowResizer';
-import { undoBatch } from '../../../util/UndoManager';
-import { DragManager, dropActionType } from '../../../util/DragManager';
-import { List } from '../../../../fields/List';
 
 type MultirowDocument = makeInterface<[typeof documentSchema]>;
 const MultirowDocument = makeInterface(documentSchema);
@@ -213,7 +213,7 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument)
         return this.props.addDocTab(doc, where);
     }
     getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) {
-        return <ContentFittingDocumentView
+        return <DocumentView
             Document={layout}
             DataDoc={layout.resolvedDataDoc as Doc}
             styleProvider={this.props.styleProvider}
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 6277f7ecc..5fab81ba7 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -74,11 +74,8 @@ export class LinkMenu extends React.Component<Props> {
 
     @computed
     get position() {
-        const docView = this.props.docView;
-        const transform = (docView.props.ScreenToLocalTransform().scale(docView.LocalScaling)).inverse();
-        const [sptX, sptY] = transform.transformPoint(0, 0);
-        const [bptX, bptY] = transform.transformPoint(docView.props.PanelWidth(), docView.props.PanelHeight());
-        return { x: sptX, y: sptY, r: bptX, b: bptY };
+        const docView = this.props.docView.getBounds();
+        return { x: docView?.left || 0, y: docView?.top || 0, r: docView?.right || 0, b: docView?.bottom || 0 };
     }
 
     render() {
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 9ecf3d0fb..8e0004c87 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -1,4 +1,5 @@
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, observable, runInAction } from 'mobx';
 import { observer } from "mobx-react";
@@ -18,7 +19,6 @@ import { DocumentView } from '../nodes/DocumentView';
 import { LinkDocPreview } from '../nodes/LinkDocPreview';
 import './LinkMenuItem.scss';
 import React = require("react");
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 
 interface LinkMenuItemProps {
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 2d0441cac..4b3c328b0 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -13,7 +13,7 @@ import { createSchema, listSpec, makeInterface } from "../../../fields/Schema";
 import { ComputedField, ScriptField } from "../../../fields/ScriptField";
 import { Cast, DateCast, NumCast } from "../../../fields/Types";
 import { AudioField, nullAudio } from "../../../fields/URLField";
-import { emptyFunction, formatTime, returnFalse, returnOne, returnTrue, setupMoveUpEvents, Utils, numberRange } from "../../../Utils";
+import { emptyFunction, formatTime, numberRange, returnFalse, returnTrue, setupMoveUpEvents, Utils } from "../../../Utils";
 import { Docs, DocUtils } from "../../documents/Documents";
 import { Networking } from "../../Network";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
@@ -23,13 +23,13 @@ import { SnappingManager } from "../../util/SnappingManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
+import { StyleProp } from "../StyleProvider";
 import "./AudioBox.scss";
 import { DocumentView, DocumentViewProps } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment";
 import { LinkAnchorBox } from "./LinkAnchorBox";
 import { LinkDocPreview } from "./LinkDocPreview";
-import { StyleProp } from "../StyleProvider";
 
 declare class MediaRecorder {
     // whatever MediaRecorder has
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index b124263e7..828b76d3d 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,22 +1,21 @@
 import { action, computed, observable } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
+import { Doc, Opt } from "../../../fields/Doc";
 import { Document } from "../../../fields/documentSchemas";
 import { List } from "../../../fields/List";
 import { listSpec } from "../../../fields/Schema";
 import { ComputedField } from "../../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { TraceMobx } from "../../../fields/util";
-import { numberRange, returnVal, returnOne } from "../../../Utils";
+import { numberRange, returnOne } from "../../../Utils";
 import { Transform } from "../../util/Transform";
 import { DocComponent } from "../DocComponent";
 import { InkingStroke } from "../InkingStroke";
+import { StyleProp } from "../StyleProvider";
 import "./CollectionFreeFormDocumentView.scss";
-import { ContentFittingDocumentView } from "./ContentFittingDocumentView";
 import { DocumentView, DocumentViewProps } from "./DocumentView";
-import React = require("react");
-import { StyleProp } from "../StyleProvider";
 import { FieldViewProps } from "./FieldView";
+import React = require("react");
 
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
     dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined;
@@ -33,7 +32,7 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
 export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps, Document>(Document) {
     static animFields = ["_height", "_width", "x", "y", "_scrollTop", "opacity"];  // fields that are configured to be animatable using animation frames
     @observable _animPos: number[] | undefined = undefined;
-    @observable _contentView: ContentFittingDocumentView | undefined | null;
+    @observable _contentView: DocumentView | undefined | null;
     random(min: number, max: number) { // min should not be equal to max
         const mseed = Math.abs(this.X * this.Y);
         const seed = (mseed * 9301 + 49297) % 233280;
@@ -50,7 +49,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     get Highlight() { return this.dataProvider?.highlight; }
     @computed get dataProvider() { return this.props.dataProvider?.(this.props.Document, this.props.replica); }
     @computed get sizeProvider() { return this.props.sizeProvider?.(this.props.Document, this.props.replica); }
-    @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (!this._contentView?.docView?.isSelected() ? ":selected" : "")); }
+    @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (!this._contentView?.isSelected() ? ":selected" : "")); }
 
     styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps | FieldViewProps>, property: string) => {
         if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children
@@ -148,9 +147,8 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             ContentScaling: returnOne,
             PanelWidth: this.panelWidth,
             PanelHeight: this.panelHeight,
-            dragDivName: "collectionFreeFormDocumentView-container",
         };
-        return <div className={divProps.dragDivName}
+        return <div className={"collectionFreeFormDocumentView-container"}
             style={{
                 boxShadow,
                 borderRadius,
@@ -171,7 +169,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                     </svg>
                 </div>}
 
-            <ContentFittingDocumentView {...divProps} ref={action((r: ContentFittingDocumentView | null) => this._contentView = r)} />
+            <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} />
         </div>;
     }
 }
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 1bf448bff..b1bbc9506 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,20 +1,19 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, observable } from 'mobx';
 import { observer } from "mobx-react";
-import { Doc, WidthSym, HeightSym } from '../../../fields/Doc';
+import { Doc } from '../../../fields/Doc';
 import { documentSchema } from '../../../fields/documentSchemas';
 import { createSchema, makeInterface } from '../../../fields/Schema';
-import { NumCast, Cast, StrCast } from '../../../fields/Types';
+import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { emptyFunction, OmitKeys, setupMoveUpEvents } from '../../../Utils';
 import { DragManager } from '../../util/DragManager';
+import { SnappingManager } from '../../util/SnappingManager';
+import { undoBatch } from '../../util/UndoManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
-import { FieldView, FieldViewProps } from './FieldView';
 import "./ComparisonBox.scss";
+import { DocumentView } from './DocumentView';
+import { FieldView, FieldViewProps } from './FieldView';
 import React = require("react");
-import { ContentFittingDocumentView } from './ContentFittingDocumentView';
-import { undoBatch } from '../../util/UndoManager';
-import { setupMoveUpEvents, emptyFunction, returnOne, OmitKeys } from '../../../Utils';
-import { SnappingManager } from '../../util/SnappingManager';
-import { DocumentViewProps } from './DocumentView';
 
 export const comparisonSchema = createSchema({});
 
@@ -84,7 +83,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         const displayDoc = (which: string) => {
             const whichDoc = Cast(this.dataDoc[`compareBox-${which}`], Doc, null);
             return whichDoc ? <>
-                <ContentFittingDocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+                <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
                     Document={whichDoc}
                     DataDoc={undefined}
                     pointerEvents={"none"}
diff --git a/src/client/views/nodes/ContentFittingDocumentView.scss b/src/client/views/nodes/ContentFittingDocumentView.scss
deleted file mode 100644
index 679073d44..000000000
--- a/src/client/views/nodes/ContentFittingDocumentView.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@import "../globalCssVariables";
-
-.contentFittingDocumentView {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-
-    .contentFittingDocumentView-previewDoc {
-        position: relative;
-        display: inline;
-    }
-
-    .contentFittingDocumentView-input {
-        position: absolute;
-        max-width: 150px;
-        width: 100%;
-        bottom: 0px;
-    }
-
-    .documentView-node:first-child {
-        position: relative;
-        background: "#B59B66"; //$light-color;
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
deleted file mode 100644
index db9366390..000000000
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React = require("react");
-import { action, computed, observable } from "mobx";
-import { observer } from "mobx-react";
-import { Doc } from "../../../fields/Doc";
-import { NumCast } from "../../../fields/Types";
-import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, OmitKeys, returnVal, returnTrue } from "../../../Utils";
-import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
-import { StyleProp } from "../StyleProvider";
-import "./ContentFittingDocumentView.scss";
-interface ContentFittingDocumentViewProps {
-    dontCenter?: "x" | "y" | "xy";
-}
-@observer
-export class ContentFittingDocumentView extends React.Component<DocumentViewProps & ContentFittingDocumentViewProps> {
-    public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
-    public ContentRef = React.createRef<HTMLDivElement>();
-
-    @observable public docView: DocumentView | undefined | null;
-
-    @computed get layoutDoc() { return Doc.Layout(this.props.Document, this.props.LayoutTemplate?.()); }
-
-    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); }
-    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 0); }
-    @computed get nativeScaling() {
-        const nativeW = this.nativeWidth;
-        const nativeH = this.nativeHeight;
-        let scaling = 1;
-        if (nativeW && (this.layoutDoc?._fitWidth || this.props.PanelHeight() / nativeH > this.props.PanelWidth() / nativeW)) {
-            scaling = this.props.PanelWidth() / nativeW;  // width-limited or fitWidth
-        } else if (nativeW && nativeH) {
-            scaling = this.props.PanelHeight() / nativeH; // height-limited
-        }
-        console.log(this.props.Document.title + " " + scaling)
-        return scaling;
-    }
-
-    @computed get panelWidth() { return this.nativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); }
-    @computed get panelHeight() {
-        if (this.nativeHeight) {
-            if (this.props.Document._fitWidth) {
-                return Math.min(this.props.PanelHeight(), NumCast(this.props.Document.scrollHeight, this.props.PanelHeight()));
-            }
-            else return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling);
-        }
-        return this.props.PanelHeight();
-    }
-
-    @computed get Xshift() { return this.nativeWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; }
-    @computed get YShift() { return this.nativeWidth && this.nativeHeight && Math.abs(this.Xshift) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; }
-    @computed get centeringX() { return this.props.dontCenter?.includes("x") ? 0 : this.Xshift; }
-    @computed get centeringY() { return this.props.Document._fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.YShift; }
-
-    NativeWidth = () => this.nativeWidth;
-    NativeHeight = () => this.nativeHeight;
-    PanelWidth = () => this.panelWidth;
-    PanelHeight = () => this.panelHeight;
-    NativeScaling = () => this.nativeScaling;
-    screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling);
-
-    render() {
-        TraceMobx();
-        return (<div className="contentFittingDocumentView">
-            {!this.props.Document || !this.props.PanelWidth() ? (null) : (
-                <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef}
-                    style={{
-                        transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
-                        borderRadius: this.props.styleProvider?.(this.props.Document, this.props, StyleProp.PointerEvents),
-                        width: Math.abs(this.Xshift) > 0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(),
-                        height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(),
-                    }}>
-                    <DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
-                        ref={action((r: DocumentView | null) => this.docView = r)}
-                        PanelWidth={this.PanelWidth}
-                        PanelHeight={this.PanelHeight}
-                        NativeWidth={this.NativeWidth}
-                        NativeHeight={this.NativeHeight}
-                        ContentScaling={this.NativeScaling}
-                        ScreenToLocalTransform={this.screenToLocalTransform}
-                        focus={this.props.focus || emptyFunction}
-                        bringToFront={emptyFunction}
-                    />
-                </div>)}
-        </div>);
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocHolderBox.tsx b/src/client/views/nodes/DocHolderBox.tsx
index b5c068b08..533a4931a 100644
--- a/src/client/views/nodes/DocHolderBox.tsx
+++ b/src/client/views/nodes/DocHolderBox.tsx
@@ -3,23 +3,22 @@ import { action, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, Field } from "../../../fields/Doc";
 import { collectionSchema, documentSchema } from "../../../fields/documentSchemas";
-import { makeInterface, listSpec } from "../../../fields/Schema";
+import { listSpec, makeInterface } from "../../../fields/Schema";
 import { ComputedField } from "../../../fields/ScriptField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { TraceMobx } from "../../../fields/util";
-import { emptyPath, returnFalse, returnOne, returnZero } from "../../../Utils";
+import { returnFalse } from "../../../Utils";
 import { DocumentType } from "../../documents/DocumentTypes";
 import { DragManager } from "../../util/DragManager";
 import { undoBatch } from "../../util/UndoManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { ViewBoxAnnotatableComponent } from "../DocComponent";
-import { ContentFittingDocumentView } from "./ContentFittingDocumentView";
+import { StyleProp } from "../StyleProvider";
 import "./DocHolderBox.scss";
 import { DocumentView } from "./DocumentView";
 import { FieldView, FieldViewProps } from "./FieldView";
 import React = require("react");
-import { StyleProp } from "../StyleProvider";
 
 type DocHolderBoxSchema = makeInterface<[typeof documentSchema, typeof collectionSchema]>;
 const DocHolderBoxDocument = makeInterface(documentSchema, collectionSchema);
@@ -142,7 +141,7 @@ export class DocHolderBox extends ViewBoxAnnotatableComponent<FieldViewProps, Do
                     dontRegisterView={true}
                     whenActiveChanged={this.props.whenActiveChanged}
                     bringToFront={returnFalse} /> :
-                <ContentFittingDocumentView
+                <DocumentView
                     Document={containedDoc}
                     DataDoc={undefined}
                     docFilters={this.props.docFilters}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 16937a791..f969bee85 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -156,7 +156,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & Fo
             "onPointerUp",
         ];
         const list = {
-            ...OmitKeys(this.props, [...docOnlyProps, 'NativeWidth', 'NativeHeight'], "", (obj: any) => obj.active = this.props.parentActive).omit,
+            ...OmitKeys(this.props, [...docOnlyProps], "", (obj: any) => obj.active = this.props.parentActive).omit,
             RootDoc: Cast(this.layoutDoc?.rootDocument, Doc, null) || this.layoutDoc,
             Document: this.layoutDoc,
             DataDoc: this.dataDoc,
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
index f2838981d..123212608 100644
--- a/src/client/views/nodes/DocumentIcon.tsx
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -9,13 +9,12 @@ import { Field } from "../../../fields/Doc";
 export class DocumentIcon extends React.Component<{ view: DocumentView, index: number }> {
     render() {
         const view = this.props.view;
-        const transform = view.props.ScreenToLocalTransform().scale(view.LocalScaling).inverse();
-        const { x, y, width, height } = transform.transformBounds(0, 0, view.props.PanelWidth(), view.props.PanelHeight());
+        const { left, top, right, bottom } = view.getBounds() || { left: 0, top: 0, right: 0, bottom: 0 };
 
         return (
             <div className="documentIcon-outerDiv" style={{
                 position: "absolute",
-                transform: `translate(${x + width / 2}px, ${y}px)`,
+                transform: `translate(${(left + right) / 2}px, ${top}px)`,
             }}>
                 <p>d{this.props.index}</p>
             </div>
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 8dadd2467..6f041e5ef 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -142,4 +142,27 @@
             opacity: 1;
         }
     }
+}
+.contentFittingDocumentView {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    .contentFittingDocumentView-previewDoc {
+        position: relative;
+        display: inline;
+    }
+
+    .contentFittingDocumentView-input {
+        position: absolute;
+        max-width: 150px;
+        width: 100%;
+        bottom: 0px;
+    }
+
+    .documentView-node:first-child {
+        position: relative;
+        background: "#B59B66"; //$light-color;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 010a270e6..61e17082a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -10,7 +10,7 @@ import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Ty
 import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
 import { MobileInterface } from '../../../mobile/MobileInterface';
 import { GestureUtils } from '../../../pen-gestures/GestureUtils';
-import { emptyFunction, OmitKeys, returnFalse, returnVal, Utils } from "../../../Utils";
+import { emptyFunction, OmitKeys, returnFalse, Utils, returnVal } from "../../../Utils";
 import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils';
 import { Docs, DocUtils } from "../../documents/Documents";
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -57,8 +57,6 @@ export interface DocumentViewSharedProps {
     CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
     PanelWidth: () => number;
     PanelHeight: () => number;
-    NativeWidth?: () => number;
-    NativeHeight?: () => number;
     layerProvider?: (doc: Doc, assign?: boolean) => boolean;
     styleProvider?: StyleProviderFunc;
     focus: DocFocusFunc;
@@ -88,10 +86,12 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
     freezeDimensions?: boolean;
     hideTitle?: boolean;  // forces suppression of title. e.g, treeView document labels suppress titles in case they are globally active via settings
     treeViewDoc?: Doc;
-    dragDivName?: string;
     contentPointerEvents?: string; // pointer events allowed for content of a document view.  eg. set to "none" in menuSidebar for sharedDocs so that you can select a document, but not interact with its contents
     radialMenu?: String[];
     LayoutTemplateString?: string;
+    dontCenter?: "x" | "y" | "xy";
+    NativeWidth?: () => number;
+    NativeHeight?: () => number;
     LayoutTemplate?: () => Opt<Doc>;
     ContentScaling?: () => number; // scaling the DocumentView does to transform its contents into its panel & needed by ScreenToLocal
     contextMenuItems?: () => { script: ScriptField, label: string }[];
@@ -100,9 +100,16 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
     onPointerUp?: () => ScriptField;
 }
 
+export interface DocumentViewInternalProps {
+    NativeWidth: () => number;
+    NativeHeight: () => number;
+    isSelected: (outsideReaction?: boolean) => boolean;
+    select: (ctrlPressed: boolean) => void;
+    DocumentView: any;
+}
+
 @observer
-export class DocumentView extends DocComponent<DocumentViewProps, Document>(Document) {
-    public static ROOT_DIV = "documentView-effectsWrapper";
+export class DocumentViewInternal extends DocComponent<DocumentViewProps & DocumentViewInternalProps, Document>(Document) {
     @observable _animateScalingTo = 0;
     private _downX: number = 0;
     private _downY: number = 0;
@@ -118,37 +125,32 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
     protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
 
-    private get active() { return this.isSelected(true) || this.props.parentActive(true); }
+    private get topMost() { return this.props.renderDepth === 0; }
+    private get active() { return this.props.isSelected(true) || this.props.parentActive(true); }
     public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive
     public get ContentDiv() { return this._mainCont.current; }
     public get LayoutFieldKey() { return Doc.LayoutFieldKey(this.layoutDoc); }
     @computed get ShowTitle() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.ShowTitle) as (Opt<string>); }
-    @computed get LocalScaling() { return this.props.ContentScaling?.() || 1; }
-    @computed get topMost() { return this.props.renderDepth === 0; }
+    @computed get ContentScale() { return this.props.ContentScaling?.() || 1; }
     @computed get hidden() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Hidden); }
     @computed get opacity() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Opacity); }
     @computed get borderRounding() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow); }
-    @computed get hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.isSelected() ? ":selected" : "")); }
-    @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.isSelected() ? ":selected" : "")); }
+    @computed get hideLinkButton() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HideLinkButton + (this.props.isSelected() ? ":selected" : "")); }
+    @computed get widgetDecorations() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Decorations + (this.props.isSelected() ? ":selected" : "")); }
     @computed get backgroundColor() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor); }
     @computed get docContents() { return this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.DocContents); }
     @computed get headerMargin() { return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; }
-    @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.isSelected() ? ":selected" : "")); }
+    @computed get pointerEvents() { return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (this.props.isSelected() ? ":selected" : "")); }
     @computed get finalLayoutKey() { return StrCast(this.props.Document.layoutKey, "layout"); }
-    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); }
-    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.dataDoc, this.props.freezeDimensions)); }
+    @computed get nativeWidth() { return this.props.NativeWidth(); }
+    @computed get nativeHeight() { return this.props.NativeHeight(); }
     @computed get onClickHandler() { return this.props.onClick?.() ?? Cast(this.Document.onClick, ScriptField, Cast(this.layoutDoc.onClick, ScriptField, null)); }
     @computed get onDoubleClickHandler() { return this.props.onDoubleClick?.() ?? (Cast(this.layoutDoc.onDoubleClick, ScriptField, null) ?? this.Document.onDoubleClick); }
     @computed get onPointerDownHandler() { return this.props.onPointerDown?.() ?? ScriptCast(this.Document.onPointerDown); }
     @computed get onPointerUpHandler() { return this.props.onPointerUp?.() ?? ScriptCast(this.Document.onPointerUp); }
-    NativeWidth = () => this.nativeWidth;
-    NativeHeight = () => this.nativeHeight;
-    onClickFunc = () => this.onClickHandler;
-    onDoubleClickFunc = () => this.onDoubleClickHandler;
 
     constructor(props: any) {
         super(props);
-        props.getView?.(this);
     }
 
     handle1PointerHoldStart = (e: Event, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
@@ -210,9 +212,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     @action
     componentDidMount() {
         this.componentDidUpdate();
-        if (!BoolCast(this.rootDoc.dontRegisterView, this.props.dontRegisterView)) {
-            DocumentManager.Instance.AddView(this);
-        }
     }
 
     @action
@@ -236,47 +235,20 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         this._multiTouchDisposer?.();
         this._holdDisposer?.();
         Doc.UnBrushDoc(this.props.Document);
-        !this.props.dontRegisterView && DocumentManager.Instance.RemoveView(this);
     }
 
     startDragging(x: number, y: number, dropAction: dropActionType) {
         if (this._mainCont.current) {
             const dragData = new DragManager.DocumentDragData([this.props.Document]);
-            const [left, top] = this.props.ScreenToLocalTransform().scale(this.LocalScaling).inverse().transformPoint(0, 0);
-            dragData.offset = this.props.ScreenToLocalTransform().scale(this.LocalScaling).transformDirection(x - left, y - top);
+            const [left, top] = this.props.ScreenToLocalTransform().scale(this.ContentScale).inverse().transformPoint(0, 0);
+            dragData.offset = this.props.ScreenToLocalTransform().scale(this.ContentScale).transformDirection(x - left, y - top);
             dragData.dropAction = dropAction;
             dragData.removeDocument = this.props.removeDocument;
             dragData.moveDocument = this.props.moveDocument;
-            dragData.dragDivName = this.props.dragDivName;
             dragData.treeViewDoc = this.props.treeViewDoc;
             DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, { hideSource: !dropAction && !this.layoutDoc.onDragStart });
         }
     }
-
-    @undoBatch @action
-    public static FloatDoc(topDocView: DocumentView) {
-        const { Document: topDoc, ContainingCollectionView: container } = topDocView.props;
-        const screenXf = container?.screenToLocalTransform();
-        if (screenXf) {
-            SelectionManager.DeselectAll();
-            if (topDoc.z) {
-                const spt = screenXf.inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y));
-                topDoc.z = 0;
-                topDoc.x = spt[0];
-                topDoc.y = spt[1];
-                topDocView.props.removeDocument?.(topDoc);
-                topDocView.props.addDocTab(topDoc, "inParent");
-            } else {
-                const spt = topDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-                const fpt = screenXf.transformPoint(spt[0], spt[1]);
-                topDoc.z = 1;
-                topDoc.x = fpt[0];
-                topDoc.y = fpt[1];
-            }
-            setTimeout(() => SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(topDoc, container)!, false), 0);
-        }
-    }
-
     onKeyDown = (e: React.KeyboardEvent) => {
         if (e.altKey && !e.nativeEvent.cancelBubble) {
             e.stopPropagation();
@@ -355,48 +327,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 if ((this.layoutDoc.onDragStart || this.props.Document.rootDocument) && !(e.ctrlKey || e.button > 0)) {  // onDragStart implies a button doc that we don't want to select when clicking.   RootDocument & isTemplaetForField implies we're clicking on part of a template instance and we want to select the whole template, not the part
                     stopPropagate = false; // don't stop propagation for field templates -- want the selection to propagate up to the root document of the template
                 } else {
-                    this.select(e.ctrlKey || e.shiftKey);
+                    this.props.select(e.ctrlKey || e.shiftKey);
                 }
                 preventDefault = false;
             }
             stopPropagate && e.stopPropagation();
             preventDefault && e.preventDefault();
         }
-    });
-
-    // follows a link - if the target is on screen, it highlights/pans to it.
-    // if the target isn't onscreen, then it will open up the target in a tab, on the right, or in place
-    // depending on the followLinkLocation property of the source (or the link itself as a fallback);
-    public static followLinkClick = async (linkDoc: Opt<Doc>, sourceDoc: Doc, docView: {
-        focus: DocFocusFunc,
-        addDocTab: (doc: Doc, where: string) => boolean,
-        ContainingCollectionDoc?: Doc
-    }, altKey: boolean) => {
-        const batch = UndoManager.StartBatch("follow link click");
-        // open up target if it's not already in view ...
-        const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => {
-            const targetFocusAfterDocFocus = () => {
-                const where = StrCast(sourceDoc.followLinkLocation) || followLoc;
-                const hackToCallFinishAfterFocus = () => {
-                    finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout.
-                    return false; // we must return false here so that the zoom to the document is not reversed.  If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false
-                };
-                const addTab = docView.addDocTab(doc, where);
-                addTab && setTimeout(() => {
-                    const targDocView = DocumentManager.Instance.getFirstDocumentView(doc);
-                    targDocView?.props.focus(doc, BoolCast(sourceDoc.followLinkZoom, false), undefined, hackToCallFinishAfterFocus);
-                }); //  add the target and focus on it.
-                return where !== "inPlace" || addTab; // return true to reset the initial focus&zoom (return false for 'inPlace' since resetting the initial focus&zoom will negate the zoom into the target)
-            };
-            if (!sourceDoc.followLinkZoom) {
-                targetFocusAfterDocFocus();
-            } else {
-                // first focus & zoom onto this (the clicked document).  Then execute the function to focus on the target
-                docView.focus(sourceDoc, BoolCast(sourceDoc.followLinkZoom, true), 1, targetFocusAfterDocFocus);
-            }
-        };
-        await DocumentManager.Instance.FollowLink(linkDoc, sourceDoc, createViewFunc, BoolCast(sourceDoc.followLinkZoom, false), docView.ContainingCollectionDoc, batch.end, altKey ? true : undefined);
-    }
+    }).bind(this);
 
     handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
         SelectionManager.DeselectAll();
@@ -421,7 +359,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (e.cancelBubble && this.active) {
             this.removeMoveListeners();
         }
-        else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
+        else if (!e.cancelBubble && (this.props.isSelected(true) || this.props.parentActive(true) || this.layoutDoc.onDragStart || this.onClickHandler) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
 
             const touch = me.touchEvent.changedTouches.item(0);
             if (touch && (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3)) {
@@ -436,7 +374,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
-        if (!e.nativeEvent.cancelBubble && !this.isSelected()) {
+        if (!e.nativeEvent.cancelBubble && !this.props.isSelected()) {
             e.stopPropagation();
             e.preventDefault();
 
@@ -447,17 +385,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-    public iconify() {
-        const layoutKey = Cast(this.props.Document.layoutKey, "string", null);
-        if (layoutKey !== "layout_icon") {
-            this.switchViews(true, "icon");
-            if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.props.Document.deiconifyLayout = layoutKey.replace("layout_", "");
-        } else {
-            const deiconifyLayout = Cast(this.props.Document.deiconifyLayout, "string", null);
-            this.switchViews(deiconifyLayout ? true : false, deiconifyLayout);
-            this.props.Document.deiconifyLayout = undefined;
-        }
-    }
 
     @action
     handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
@@ -480,7 +407,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 let nheight = Doc.NativeHeight(layoutDoc);
                 const width = (layoutDoc._width || 0);
                 const height = (layoutDoc._height || (nheight / nwidth * width));
-                const scale = this.props.ScreenToLocalTransform().Scale * this.LocalScaling;
+                const scale = this.props.ScreenToLocalTransform().Scale * this.ContentScale;
                 const actualdW = Math.max(width + (dW * scale), 20);
                 const actualdH = Math.max(height + (dH * scale), 20);
                 doc.x = (doc.x || 0) + dX * (actualdW - width);
@@ -523,7 +450,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || Doc.GetSelectedTool() === InkTool.Highlighter || Doc.GetSelectedTool() === InkTool.Pen)) {
             if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
                 e.stopPropagation();
-                if (SelectionManager.IsSelected(this, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
+                if (SelectionManager.IsSelected(this.props.DocumentView, true) && this.props.Document._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
                 // TODO: check here for panning/inking
             }
             return;
@@ -538,7 +465,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)) &&
                 !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
                 e.stopPropagation();
-                if (SelectionManager.IsSelected(this, true) && this.layoutDoc._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
+                if (SelectionManager.IsSelected(this.props.DocumentView, true) && this.layoutDoc._viewType !== CollectionViewType.Docking) e.preventDefault(); // goldenlayout needs to be able to move its tabs, so can't preventDefault for it
             }
             document.removeEventListener("pointermove", this.onPointerMove);
             document.removeEventListener("pointerup", this.onPointerUp);
@@ -555,7 +482,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (e.cancelBubble && this.active) {
             document.removeEventListener("pointermove", this.onPointerMove); // stop listening to pointerMove if something else has stopPropagated it (e.g., the MarqueeView)
         }
-        else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
+        else if (!e.cancelBubble && (SelectionManager.IsSelected(this.props.DocumentView, true) || this.props.parentActive(true) || this.layoutDoc.onDragStart) && !this.layoutDoc.lockedPosition && !CurrentUserUtils.OverlayDocs.includes(this.layoutDoc)) {
             if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3) {
                 if (!e.altKey && (!this.topMost || this.layoutDoc.onDragStart || this.onClickHandler) && (e.buttons === 1 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE))) {
                     document.removeEventListener("pointermove", this.onPointerMove);
@@ -702,7 +629,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     @undoBatch
     toggleNativeDimensions = () => {
-        Doc.toggleNativeDimensions(this.layoutDoc, this.LocalScaling, this.props.PanelWidth(), this.props.PanelHeight());
+        Doc.toggleNativeDimensions(this.layoutDoc, this.ContentScale, this.props.PanelWidth(), this.props.PanelHeight());
     }
 
     @undoBatch
@@ -736,7 +663,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (e && this.rootDoc._hideContextMenu && Doc.UserDoc().noviceMode) {
             e.preventDefault();
             e.stopPropagation();
-            !this.isSelected(true) && SelectionManager.SelectDoc(this, false);
+            !this.props.isSelected(true) && SelectionManager.SelectDoc(this.props.DocumentView, false);
         }
         // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
         if (e) {
@@ -818,7 +745,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const more = cm.findByDescription("More...");
         const moreItems = more && "subitems" in more ? more.subitems : [];
         if (!Doc.IsSystem(this.rootDoc)) {
-            (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" });
+            (this.rootDoc._viewType !== CollectionViewType.Docking || !Doc.UserDoc().noviceMode) && moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this.props.DocumentView), icon: "users" });
             //moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
             if (!Doc.UserDoc().noviceMode) {
                 moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" });
@@ -853,26 +780,25 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 e?.stopPropagation(); // DocumentViews should stop propagation of this event
             }
             cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
-            !this.isSelected(true) && setTimeout(() => SelectionManager.SelectDoc(this, false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up.  by delaying the selection until hopefully after the pointer up, the context menu will appear.
+            !this.props.isSelected(true) && setTimeout(() => SelectionManager.SelectDoc(this.props.DocumentView, false), 300); // on a mac, the context menu is triggered on mouse down, but a YouTube video becaomes interactive when selected which means that the context menu won't show up.  by delaying the selection until hopefully after the pointer up, the context menu will appear.
         });
     }
 
-    isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction);
-    select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); };
     rootSelected = (outsideReaction?: boolean) => {
-        return this.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false;
+        return this.props.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false;
     }
 
     panelHeight = () => this.props.PanelHeight() - this.headerMargin;
     parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false;
     screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
-    contentScaling = () => this.LocalScaling;
+    contentScaling = () => this.ContentScale;
+    onClickFunc = () => this.onClickHandler;
+    onDoubleClickFunc = () => this.onDoubleClickHandler;
 
     @observable contentsActive: () => boolean = returnFalse;
     @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
 
     @computed get contents() {
-        console.log(this.props.Document.title + " " + this.LocalScaling + " " + this.contentScaling())
         TraceMobx();
         return (<div className="documentView-contentsView"
             style={{
@@ -886,8 +812,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 fitContentsToDoc={this.props.fitContentsToDoc}
                 ContainingCollectionView={this.props.ContainingCollectionView}
                 ContainingCollectionDoc={this.props.ContainingCollectionDoc}
-                NativeWidth={this.NativeWidth}
-                NativeHeight={this.NativeHeight}
                 PanelWidth={this.props.PanelWidth}
                 PanelHeight={this.props.PanelHeight}
                 scaling={this.contentScaling}
@@ -912,14 +836,16 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 ScreenToLocalTransform={this.screenToLocal}
                 ignoreAutoHeight={this.props.ignoreAutoHeight}
                 bringToFront={this.props.bringToFront}
-                isSelected={this.isSelected}
-                select={this.select}
+                isSelected={this.props.isSelected}
+                select={this.props.select}
                 rootSelected={this.rootSelected}
                 scriptContext={this.props.scriptContext}
                 onClick={this.onClickFunc}
                 layoutKey={this.finalLayoutKey} />
             {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors}
-            {this.hideLinkButton ? (null) : <DocumentLinksButton View={this} links={this.allLinks} Offset={this.topMost ? [0, undefined, undefined, 10] : [-15, undefined, undefined, -20]} />}
+            {this.hideLinkButton ?
+                (null) :
+                <DocumentLinksButton View={this.props.DocumentView} links={this.allLinks} Offset={this.topMost ? [0, undefined, undefined, 10] : [-15, undefined, undefined, -20]} />}
         </div>
         );
     }
@@ -933,8 +859,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         return anchor.type === DocumentType.AUDIO && NumCast(ept) ? false : true;
     }
 
-    @observable _link: Opt<Doc>;  // see DocumentButtonBar for explanation of how this works
-    makeLink = () => this._link; // pass the link placeholde to child views so they can react to make a specialized anchor.  This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined.
+    makeLink = () => this.props.DocumentView._link; // pass the link placeholde to child views so they can react to make a specialized anchor.  This is essentially a function call to the descendants since the value of the _link variable will immediately get set back to undefined.
 
     @undoBatch
     hideLinkAnchor = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && (doc.hidden = true), true)
@@ -998,8 +923,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     styleProvider={this.captionStyleProvider}
                     dontRegisterView={true}
                     LayoutTemplateString={`<FormattedTextBox {...props} fieldKey={'${showCaption}'}/>`}
-                    isSelected={this.isSelected}
-                    select={this.select}
                     onClick={this.onClickFunc}
                     layoutKey={this.finalLayoutKey} />
             </div>);
@@ -1027,21 +950,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 {captionView}
             </div>;
     }
-    @undoBatch
-    @action
-    setCustomView = (custom: boolean, layout: string): void => {
-        Doc.setNativeView(this.props.Document);
-        custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined);
-    }
 
-    switchViews = action((custom: boolean, view: string) => {
-        this._animateScalingTo = 0.1;  // shrink doc
-        setTimeout(action(() => {
-            this.setCustomView(custom, view);
-            this._animateScalingTo = 1; // expand it
-            setTimeout(action(() => this._animateScalingTo = 0), 400);
-        }), 400);
-    });
 
     @computed get renderDoc() {
         TraceMobx();
@@ -1077,7 +986,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             onContextMenu={this.onContextMenu}
             onKeyDown={this.onKeyDown}
             onPointerDown={this.onPointerDown}
-            onClick={this.onClick}
+            onClick={this.onClick.bind(this)}
             onPointerEnter={action(e => !SnappingManager.GetIsDragging() && Doc.BrushDoc(this.props.Document))}
             onPointerLeave={action(e => {
                 let entered = false;
@@ -1106,3 +1015,210 @@ Scripting.addGlobal(function toggleDetail(doc: any, layoutKey: string, otherKey:
     if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", ""));
     else dv?.switchViews(true, layoutKey.replace("layout_", ""));
 });
+
+@observer
+export class DocumentView extends React.Component<DocumentViewProps> {
+    public static ROOT_DIV = "documentView-effectsWrapper";
+    public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
+    public ContentRef = React.createRef<HTMLDivElement>();
+
+    @observable _link: Opt<Doc>;  // see DocumentButtonBar for explanation of how this works
+    @observable public docView: DocumentViewInternal | undefined | null;
+
+    get rootDoc() { return this.docView?.rootDoc || this.Document; }
+    get dataDoc() { return this.docView?.dataDoc || this.Document; }
+    get finalLayoutKey() { return this.docView?.finalLayoutKey || "layout"; }
+    get ContentDiv() { return this.docView?.ContentDiv; }
+    get allLinks() { return this.docView?.allLinks || []; }
+    get LayoutFieldKey() { return this.docView?.LayoutFieldKey || "layout"; }
+    toggleFollowLink = (location: Opt<string>, zoom: boolean, setPushpin: boolean) => this.docView?.toggleFollowLink(location, zoom, setPushpin);
+    toggleNativeDimensions = () => this.docView?.toggleNativeDimensions();
+    contentsActive = () => this.docView?.contentsActive();
+
+
+    // follows a link - if the target is on screen, it highlights/pans to it.
+    // if the target isn't onscreen, then it will open up the target in a tab, on the right, or in place
+    // depending on the followLinkLocation property of the source (or the link itself as a fallback);
+    public static followLinkClick = async (linkDoc: Opt<Doc>, sourceDoc: Doc, docView: {
+        focus: DocFocusFunc,
+        addDocTab: (doc: Doc, where: string) => boolean,
+        ContainingCollectionDoc?: Doc
+    }, altKey: boolean) => {
+        const batch = UndoManager.StartBatch("follow link click");
+        // open up target if it's not already in view ...
+        const createViewFunc = (doc: Doc, followLoc: string, finished: Opt<() => void>) => {
+            const targetFocusAfterDocFocus = () => {
+                const where = StrCast(sourceDoc.followLinkLocation) || followLoc;
+                const hackToCallFinishAfterFocus = () => {
+                    finished && setTimeout(finished, 0); // finished() needs to be called right after hackToCallFinishAfterFocus(), but there's no callback for that so we use the hacky timeout.
+                    return false; // we must return false here so that the zoom to the document is not reversed.  If it weren't for needing to call finished(), we wouldn't need this function at all since not having it is equivalent to returning false
+                };
+                const addTab = docView.addDocTab(doc, where);
+                addTab && setTimeout(() => {
+                    const targDocView = DocumentManager.Instance.getFirstDocumentView(doc);
+                    targDocView?.props.focus(doc, BoolCast(sourceDoc.followLinkZoom, false), undefined, hackToCallFinishAfterFocus);
+                }); //  add the target and focus on it.
+                return where !== "inPlace" || addTab; // return true to reset the initial focus&zoom (return false for 'inPlace' since resetting the initial focus&zoom will negate the zoom into the target)
+            };
+            if (!sourceDoc.followLinkZoom) {
+                targetFocusAfterDocFocus();
+            } else {
+                // first focus & zoom onto this (the clicked document).  Then execute the function to focus on the target
+                docView.focus(sourceDoc, BoolCast(sourceDoc.followLinkZoom, true), 1, targetFocusAfterDocFocus);
+            }
+        };
+        await DocumentManager.Instance.FollowLink(linkDoc, sourceDoc, createViewFunc, BoolCast(sourceDoc.followLinkZoom, false), docView.ContainingCollectionDoc, batch.end, altKey ? true : undefined);
+    }
+
+    @undoBatch @action
+    public static FloatDoc(topDocView: DocumentView) {
+        const { Document: topDoc, ContainingCollectionView: container } = topDocView.props;
+        const screenXf = container?.screenToLocalTransform();
+        if (screenXf) {
+            SelectionManager.DeselectAll();
+            if (topDoc.z) {
+                const spt = screenXf.inverse().transformPoint(NumCast(topDoc.x), NumCast(topDoc.y));
+                topDoc.z = 0;
+                topDoc.x = spt[0];
+                topDoc.y = spt[1];
+                topDocView.props.removeDocument?.(topDoc);
+                topDocView.props.addDocTab(topDoc, "inParent");
+            } else {
+                const spt = topDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+                const fpt = screenXf.transformPoint(spt[0], spt[1]);
+                topDoc.z = 1;
+                topDoc.x = fpt[0];
+                topDoc.y = fpt[1];
+            }
+            setTimeout(() => SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(topDoc, container)!, false), 0);
+        }
+    }
+
+    get Document() { return this.props.Document; }
+    get topMost() { return this.props.renderDepth === 0; }
+    @computed get layoutDoc() { return Doc.Layout(this.Document, this.props.LayoutTemplate?.()); }
+
+    @computed get nativeWidth() { return returnVal(this.props.NativeWidth?.(), Doc.NativeWidth(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions)); }
+    @computed get nativeHeight() { return returnVal(this.props.NativeHeight?.(), Doc.NativeHeight(this.layoutDoc, this.props.DataDoc, this.props.freezeDimensions) || 0); }
+    @computed get nativeScaling() {
+        const nativeW = this.nativeWidth;
+        const nativeH = this.nativeHeight;
+        let scaling = 1;
+        if (nativeW && (this.layoutDoc?._fitWidth || this.props.PanelHeight() / nativeH > this.props.PanelWidth() / nativeW)) {
+            scaling = this.props.PanelWidth() / nativeW;  // width-limited or fitWidth
+        } else if (nativeW && nativeH) {
+            scaling = this.props.PanelHeight() / nativeH; // height-limited
+        }
+        return scaling;
+    }
+
+    @computed get panelWidth() { return this.nativeWidth ? this.nativeWidth * this.nativeScaling : this.props.PanelWidth(); }
+    @computed get panelHeight() {
+        if (this.nativeHeight) {
+            if (this.props.Document._fitWidth) {
+                return Math.min(this.props.PanelHeight(), NumCast(this.props.Document.scrollHeight, this.props.PanelHeight()));
+            }
+            else return Math.min(this.props.PanelHeight(), this.nativeHeight * this.nativeScaling);
+        }
+        return this.props.PanelHeight();
+    }
+
+    @computed get Xshift() { return this.nativeWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; }
+    @computed get YShift() { return this.nativeWidth && this.nativeHeight && Math.abs(this.Xshift) < 0.001 ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; }
+    @computed get centeringX() { return this.props.dontCenter?.includes("x") ? 0 : this.Xshift; }
+    @computed get centeringY() { return this.props.Document._fitWidth || this.props.dontCenter?.includes("y") ? 0 : this.YShift; }
+
+    getBounds = () => {
+        if (!this.docView ||
+            !this.docView.ContentDiv ||
+            this.docView.props.renderDepth === 0 ||
+            this.docView.props.treeViewDoc ||
+            Doc.AreProtosEqual(this.props.Document, Doc.UserDoc())) {
+            return undefined;
+        }
+        const xf = this.docView?.props.ScreenToLocalTransform();
+        const transform = (xf.scale(this.nativeScaling)).inverse();
+        var [left, top] = transform.transformPoint(0, 0);
+        let [right, bottom] = transform.transformPoint(this.PanelWidth(), this.PanelHeight());
+        if (this.docView.props.LayoutTemplateString?.includes("LinkAnchorBox")) {
+            const docuBox = this.docView.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
+            if (docuBox.length) {
+                return docuBox[0].getBoundingClientRect();
+            }
+        }
+        return { left, top, right, bottom };
+    }
+
+    public iconify() {
+        const layoutKey = Cast(this.Document.layoutKey, "string", null);
+        if (layoutKey !== "layout_icon") {
+            this.switchViews(true, "icon");
+            if (layoutKey && layoutKey !== "layout" && layoutKey !== "layout_icon") this.Document.deiconifyLayout = layoutKey.replace("layout_", "");
+        } else {
+            const deiconifyLayout = Cast(this.Document.deiconifyLayout, "string", null);
+            this.switchViews(deiconifyLayout ? true : false, deiconifyLayout);
+            this.Document.deiconifyLayout = undefined;
+        }
+    }
+    @undoBatch
+    @action
+    setCustomView = (custom: boolean, layout: string): void => {
+        Doc.setNativeView(this.props.Document);
+        custom && DocUtils.makeCustomViewClicked(this.props.Document, Docs.Create.StackingDocument, layout, undefined);
+    }
+    switchViews = action((custom: boolean, view: string) => {
+        this.docView && (this.docView._animateScalingTo = 0.1);  // shrink doc
+        setTimeout(action(() => {
+            this.setCustomView(custom, view);
+            this.docView && (this.docView._animateScalingTo = 1); // expand it
+            setTimeout(action(() => this.docView && (this.docView._animateScalingTo = 0)), 400);
+        }), 400);
+    });
+
+    isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction);
+    select = (ctrlPressed: boolean) => SelectionManager.SelectDoc(this, ctrlPressed);
+    NativeWidth = () => this.nativeWidth;
+    NativeHeight = () => this.nativeHeight;
+    PanelWidth = () => this.panelWidth;
+    PanelHeight = () => this.panelHeight;
+    ContentScale = () => this.nativeScaling;
+    screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling);
+
+    componentDidMount() {
+        if (!BoolCast(this.props.Document.dontRegisterView, this.props.dontRegisterView)) {
+            DocumentManager.Instance.AddView(this);
+        }
+    }
+    componentWillUnmount() {
+        !this.props.dontRegisterView && DocumentManager.Instance.RemoveView(this);
+    }
+
+    render() {
+        TraceMobx();
+        return (<div className="contentFittingDocumentView">
+            {!this.props.Document || !this.props.PanelWidth() ? (null) : (
+                <div className="contentFittingDocumentView-previewDoc" ref={this.ContentRef}
+                    style={{
+                        transform: `translate(${this.centeringX}px, ${this.centeringY}px)`,
+                        borderRadius: this.props.styleProvider?.(this.props.Document, this.props, StyleProp.PointerEvents),
+                        width: Math.abs(this.Xshift) > 0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(),
+                        height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(),
+                    }}>
+                    <DocumentViewInternal {...this.props}
+                        DocumentView={this}
+                        ref={action((r: DocumentViewInternal | null) => this.docView = r)}
+                        PanelWidth={this.PanelWidth}
+                        PanelHeight={this.PanelHeight}
+                        NativeWidth={this.NativeWidth}
+                        NativeHeight={this.NativeHeight}
+                        isSelected={this.isSelected}
+                        select={this.select}
+                        ContentScaling={this.ContentScale}
+                        ScreenToLocalTransform={this.screenToLocalTransform}
+                        focus={this.props.focus || emptyFunction}
+                        bringToFront={emptyFunction}
+                    />
+                </div>)}
+        </div>);
+    }
+}
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index fd2425950..c69fb5b33 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -2,17 +2,16 @@ import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from "mobx-react";
 import wiki from "wikijs";
 import { Doc, DocCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
+import { Id } from '../../../fields/FieldSymbols';
 import { Cast, FieldValue, NumCast } from "../../../fields/Types";
-import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero, returnEmptyDoclist } from "../../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse } from "../../../Utils";
 import { Docs } from "../../documents/Documents";
 import { DocumentManager } from "../../util/DocumentManager";
 import { Transform } from "../../util/Transform";
 import { ContextMenu } from '../ContextMenu';
-import { ContentFittingDocumentView } from "./ContentFittingDocumentView";
 import { DocumentLinksButton } from './DocumentLinksButton';
+import { DocumentView, StyleProviderFunc } from "./DocumentView";
 import React = require("react");
-import { StyleProviderFunc } from './DocumentView';
-import { Id } from '../../../fields/FieldSymbols';
 
 interface Props {
     linkDoc?: Doc;
@@ -92,7 +91,7 @@ export class LinkDocPreview extends React.Component<Props> {
                 </div>
             </div>
             :
-            <ContentFittingDocumentView
+            <DocumentView
                 Document={this._targetDoc}
                 moveDocument={returnFalse}
                 rootSelected={returnFalse}
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 22328d1ae..125bf62f0 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -654,7 +654,6 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     render() {
         const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false;
         const scale = this.props.scaling?.() || 1;
-        console.log("Scale = " + scale);
         return (<div className="webBox" ref={this._mainCont} >
             <div className={`webBox-container`}
                 style={{ pointerEvents: inactiveLayer ? "none" : undefined }}
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index c15eb2dac..d834276c7 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -2,17 +2,15 @@ import { IReactionDisposer, reaction } from "mobx";
 import { NodeSelection } from "prosemirror-state";
 import { Doc, HeightSym, WidthSym } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
-import { ObjectField } from "../../../../fields/ObjectField";
-import { ComputedField } from "../../../../fields/ScriptField";
-import { BoolCast, Cast, NumCast, StrCast } from "../../../../fields/Types";
-import { emptyFunction, returnEmptyString, returnFalse, Utils, returnZero, returnEmptyFilter, returnEmptyDoclist } from "../../../../Utils";
+import { Cast, StrCast } from "../../../../fields/Types";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, Utils } from "../../../../Utils";
 import { DocServer } from "../../../DocServer";
 import { Docs, DocUtils } from "../../../documents/Documents";
+import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
+import { Transform } from "../../../util/Transform";
 import { DocumentView } from "../DocumentView";
 import { FormattedTextBox } from "./FormattedTextBox";
-import { Transform } from "../../../util/Transform";
 import React = require("react");
-import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
 
 interface IDashDocView {
     node: any;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 584674a02..bf0832211 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -581,7 +581,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     @undoBatch
     @action
     toggleNativeDimensions = () => {
-        Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0);
+        alert("need to fix");
+        // Doc.toggleNativeDimensions(this.layoutDoc, 1, this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0);
     }
 
     public static get DefaultLayout(): Doc | string | undefined {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 447ff5865..c6be25dc2 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -6,16 +6,15 @@ import { EditorState, Plugin } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import * as ReactDOM from 'react-dom';
 import wiki from "wikijs";
-import { Doc, DocCastAsync, Opt, DocListCast } from "../../../../fields/Doc";
+import { Doc, DocCastAsync, DocListCast, Opt } from "../../../../fields/Doc";
 import { Cast, FieldValue, NumCast, StrCast } from "../../../../fields/Types";
-import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnOne, Utils } from "../../../../Utils";
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, Utils } from "../../../../Utils";
 import { DocServer } from "../../../DocServer";
 import { Docs } from "../../../documents/Documents";
 import { DocumentType } from "../../../documents/DocumentTypes";
 import { LinkManager } from "../../../util/LinkManager";
 import { Transform } from "../../../util/Transform";
 import { undoBatch } from "../../../util/UndoManager";
-import { ContentFittingDocumentView } from "../ContentFittingDocumentView";
 import { DocumentLinksButton } from "../DocumentLinksButton";
 import { DocumentView } from "../DocumentView";
 import { LinkDocPreview } from "../LinkDocPreview";
@@ -295,7 +294,7 @@ export class FormattedTextBoxComment {
                                         </div>
                                     </div>
                                     <div className="FormattedTextBoxComment-preview-wrapper">
-                                        <ContentFittingDocumentView
+                                        <DocumentView
                                             Document={target}
                                             moveDocument={returnFalse}
                                             rootSelected={returnFalse}
diff --git a/src/client/views/nodes/formattedText/RichTextSchema.tsx b/src/client/views/nodes/formattedText/RichTextSchema.tsx
index 046825ede..2f180a228 100644
--- a/src/client/views/nodes/formattedText/RichTextSchema.tsx
+++ b/src/client/views/nodes/formattedText/RichTextSchema.tsx
@@ -3,18 +3,16 @@ import { NodeSelection } from "prosemirror-state";
 import * as ReactDOM from 'react-dom';
 import { Doc, HeightSym, WidthSym } from "../../../../fields/Doc";
 import { Id } from "../../../../fields/FieldSymbols";
-import { ObjectField } from "../../../../fields/ObjectField";
-import { ComputedField } from "../../../../fields/ScriptField";
-import { BoolCast, Cast, NumCast, StrCast } from "../../../../fields/Types";
-import { emptyFunction, returnEmptyString, returnFalse, returnZero, Utils } from "../../../../Utils";
+import { Cast, StrCast } from "../../../../fields/Types";
+import { emptyFunction, returnFalse, Utils } from "../../../../Utils";
 import { DocServer } from "../../../DocServer";
 import { Docs, DocUtils } from "../../../documents/Documents";
+import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
 import { Transform } from "../../../util/Transform";
+import { DefaultStyleProvider } from "../../StyleProvider";
 import { DocumentView } from "../DocumentView";
 import { FormattedTextBox } from "./FormattedTextBox";
 import React = require("react");
-import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
-import { DefaultStyleProvider } from "../../StyleProvider";
 
 
 export class DashDocView {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 243773b95..c07e137c4 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -1,28 +1,27 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, IReactionDisposer, reaction, runInAction, observable, trace } from "mobx";
+import { Tooltip } from "@material-ui/core";
+import { action, computed, IReactionDisposer, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DataSym, Opt } from "../../../fields/Doc";
+import { DataSym, Doc, Opt } from "../../../fields/Doc";
 import { documentSchema } from '../../../fields/documentSchemas';
 import { Id } from "../../../fields/FieldSymbols";
 import { createSchema, makeInterface } from '../../../fields/Schema';
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
-import { emptyFunction, emptyPath, returnFalse, returnTrue, returnOne, setupMoveUpEvents } from "../../../Utils";
-import { Transform } from "../../util/Transform";
-import { ViewBoxBaseComponent } from '../DocComponent';
-import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView';
-import { FieldView, FieldViewProps } from '../nodes/FieldView';
-import "./PresElementBox.scss";
-import React = require("react");
-import { PresBox, PresColor, PresMovement } from "../nodes/PresBox";
+import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from "../../../Utils";
 import { DocumentType } from "../../documents/DocumentTypes";
-import { Tooltip } from "@material-ui/core";
-import { DragManager } from "../../util/DragManager";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { DocumentManager } from "../../util/DocumentManager";
+import { DragManager } from "../../util/DragManager";
+import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
+import { ViewBoxBaseComponent } from '../DocComponent';
 import { EditableView } from "../EditableView";
-import { DocumentManager } from "../../util/DocumentManager";
-import { DocumentViewProps } from "../nodes/DocumentView";
+import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
+import { FieldView, FieldViewProps } from '../nodes/FieldView';
+import { PresBox, PresColor, PresMovement } from "../nodes/PresBox";
 import { StyleProp } from "../StyleProvider";
+import "./PresElementBox.scss";
+import React = require("react");
 
 export const presSchema = createSchema({
     presentationTargetDoc: Doc,
@@ -89,7 +88,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @computed get renderEmbeddedInline() {
         return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) :
             <div className="presItem-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}>
-                <ContentFittingDocumentView
+                <DocumentView
                     Document={this.targetDoc}
                     DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
                     styleProvider={this.styleProvider}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index fdea47c84..d5f852c4d 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1,12 +1,17 @@
-import { action, computed, observable, ObservableMap, runInAction, untracked } from "mobx";
+import { saveAs } from "file-saver";
+import { action, computed, observable, ObservableMap, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-import { alias, map, serializable, list } from "serializr";
+import { alias, map, serializable } from "serializr";
 import { DocServer } from "../client/DocServer";
 import { DocumentType } from "../client/documents/DocumentTypes";
+import { LinkManager } from "../client/util/LinkManager";
 import { Scripting, scriptingGlobal } from "../client/util/Scripting";
+import { SelectionManager } from "../client/util/SelectionManager";
 import { afterDocDeserialize, autoObject, Deserializable, SerializationHelper } from "../client/util/SerializationHelper";
 import { UndoManager } from "../client/util/UndoManager";
+import { CollectionDockingView } from "../client/views/collections/CollectionDockingView";
 import { intersectRect, Utils } from "../Utils";
+import { DateField } from "./DateField";
 import { Copy, HandleUpdate, Id, OnUpdate, Parent, Self, SelfProxy, ToScriptString, ToString, Update } from "./FieldSymbols";
 import { InkTool } from "./InkField";
 import { List } from "./List";
@@ -14,18 +19,12 @@ import { ObjectField } from "./ObjectField";
 import { PrefetchProxy, ProxyField } from "./Proxy";
 import { FieldId, RefField } from "./RefField";
 import { RichTextField } from "./RichTextField";
-import { ImageField, VideoField, WebField, AudioField, PdfField } from "./URLField";
-import { DateField } from "./DateField";
 import { listSpec } from "./Schema";
 import { ComputedField, ScriptField } from "./ScriptField";
 import { Cast, FieldValue, NumCast, StrCast, ToConstructor } from "./Types";
-import { deleteProperty, getField, getter, makeEditable, makeReadOnly, setter, updateFunction, GetEffectiveAcl, SharingPermissions, normalizeEmail } from "./util";
-import { LinkManager } from "../client/util/LinkManager";
+import { AudioField, ImageField, PdfField, VideoField, WebField } from "./URLField";
+import { deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, normalizeEmail, setter, SharingPermissions, updateFunction } from "./util";
 import JSZip = require("jszip");
-import { saveAs } from "file-saver";
-import { CollectionDockingView } from "../client/views/collections/CollectionDockingView";
-import { SelectionManager } from "../client/util/SelectionManager";
-import { DocumentView } from "../client/views/nodes/DocumentView";
 
 export namespace Field {
     export function toKeyValueString(doc: Doc, key: string): string {
diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx
index bd24efe66..e73950f42 100644
--- a/src/mobile/AudioUpload.tsx
+++ b/src/mobile/AudioUpload.tsx
@@ -1,21 +1,21 @@
-import { Docs } from '../client/documents/Documents';
-import "./ImageUpload.scss";
-import React = require('react');
-import { observer } from 'mobx-react';
-import { observable, action, computed } from 'mobx';
-import { Utils, emptyPath, returnFalse, emptyFunction, returnOne, returnZero, returnTrue, returnEmptyFilter, returnEmptyDoclist } from '../Utils';
-import { Doc, Opt } from '../fields/Doc';
-import { Cast, FieldValue } from '../fields/Types';
-import { listSpec } from '../fields/Schema';
-import { MainViewModal } from '../client/views/MainViewModal';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { nullAudio } from '../fields/URLField';
+import { action, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import { Docs } from '../client/documents/Documents';
 import { Transform } from '../client/util/Transform';
-import { DocumentView } from '../client/views/nodes/DocumentView';
-import { MobileInterface } from './MobileInterface';
+import { ContextMenu } from '../client/views/ContextMenu';
 import { DictationOverlay } from '../client/views/DictationOverlay';
+import { MainViewModal } from '../client/views/MainViewModal';
+import { DocumentView } from '../client/views/nodes/DocumentView';
 import { RichTextMenu } from '../client/views/nodes/formattedText/RichTextMenu';
-import { ContextMenu } from '../client/views/ContextMenu';
+import { Doc } from '../fields/Doc';
+import { listSpec } from '../fields/Schema';
+import { Cast, FieldValue } from '../fields/Types';
+import { nullAudio } from '../fields/URLField';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../Utils';
+import "./ImageUpload.scss";
+import { MobileInterface } from './MobileInterface';
+import React = require('react');
 
 @observer
 export class AudioUpload extends React.Component {
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 68246e52a..a901d317f 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -38,7 +38,6 @@ import { Uploader } from "./ImageUpload";
 import "./AudioUpload.scss";
 import "./ImageUpload.scss";
 import "./MobileInterface.scss";
-import { InkStrokeProperties } from '../client/views/InkStrokeProperties';
 
 library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
-- 
cgit v1.2.3-70-g09d2

