fix so that freeformviews don't break when they have annotation layer children.

2 files changed, 8 insertions, 12 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
index ec8416303..69cbae86f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormPannableContents.tsx
@@ -1,4 +1,4 @@
-import { computed } from 'mobx';
+import { computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc } from '../../../../fields/Doc';
@@ -18,6 +18,10 @@ export interface CollectionFreeFormPannableContentsProps {
 
 @observer
 export class CollectionFreeFormPannableContents extends React.Component<CollectionFreeFormPannableContentsProps> {
+    constructor(props: CollectionFreeFormPannableContentsProps) {
+        super(props);
+        makeObservable(this);
+    }
     @computed get presPaths() {
         return CollectionFreeFormView.ShowPresPaths ? PresBox.Instance.pathLines(this.props.Document) : null;
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a8f22aaae..c0104d0f8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1751,13 +1751,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this.childDocs.some(doc => !this._renderCutoffData.get(doc[Id])) && setTimeout(this.incrementalRender, 1);
     });
 
-    // if a freeform view has any children, then the children will likely consist of a single child
-    // which will be a DocumentView.  In this sitation, this freeform views acts as an annotation overlay for
-    // the underlying DocumentView and will pan and scoll with the underlying Documen tView.
-    @computed get underlayViews() {
-        return this._props.children ? this._props.children : [];
-    }
-
     @computed get placeholder() {
         return (
             <div className="collectionfreeformview-placeholder" style={{ background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor) }}>
@@ -1790,7 +1783,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             </div>
         );
     }
-    @computed get pannableContents() {
+    get pannableContents() {
         this.incrementalRender();
         return (
             <CollectionFreeFormPannableContents
@@ -1800,14 +1793,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 transform={this.PanZoomCenterXf}
                 transition={this._panZoomTransition ? `transform ${this._panZoomTransition}ms` : Cast(this.layoutDoc._viewTransition, 'string', Cast(this.Document._viewTransition, 'string', null))}
                 viewDefDivClick={this._props.viewDefDivClick}>
-                {this.underlayViews}
+                {this.props.children ?? null} {/* most likely case of children is document content that's being annoated: eg., an image */}
                 {this.contentViews}
                 <CollectionFreeFormRemoteCursors {...this._props} key="remoteCursors" />
             </CollectionFreeFormPannableContents>
         );
     }
-    @computed get marqueeView() {
-        TraceMobx();
+    get marqueeView() {
         return (
             <MarqueeView
                 {...this._props}