Merge branch 'master' into presentation_v1

2 files changed, 125 insertions, 104 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 9dcfde7f9..4cf257640 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -22,74 +22,63 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
     @observable _start = 0;
     _anchorDisposer: IReactionDisposer | undefined;
     _timeout: NodeJS.Timeout | undefined;
-    componentWillUnmount() {
-        this._anchorDisposer?.();
-    }
-    @action
-    timeout = action(() => (Date.now() < this._start++ + 1000) && (this._timeout = setTimeout(this.timeout, 25)));
+    componentWillUnmount() { this._anchorDisposer?.(); }
+    @action timeout = action(() => (Date.now() < this._start++ + 1000) && (this._timeout = setTimeout(this.timeout, 25)));
     componentDidMount() {
-        this._anchorDisposer = reaction(() => [this.props.A.props.ScreenToLocalTransform(), this.props.B.props.ScreenToLocalTransform(), this.props.A.isSelected() || Doc.IsBrushed(this.props.A.props.Document), this.props.A.isSelected() || Doc.IsBrushed(this.props.A.props.Document)],
+        this._anchorDisposer = reaction(() => [this.props.A.props.ScreenToLocalTransform(), this.props.B.props.ScreenToLocalTransform()],
             action(() => {
                 this._start = Date.now();
                 this._timeout && clearTimeout(this._timeout);
                 this._timeout = setTimeout(this.timeout, 25);
-                if (SnappingManager.GetIsDragging() || !this.props.A.ContentDiv || !this.props.B.ContentDiv) return;
-                setTimeout(action(() => this._opacity = 1), 0); // since the render code depends on querying the Dom through getBoudndingClientRect, we need to delay triggering render()
-                setTimeout(action(() => (!this.props.LinkDocs.length || !this.props.LinkDocs[0].linkDisplay) && (this._opacity = 0.05)), 750); // this will unhighlight the link line.
-                const acont = this.props.A.props.Document.type === DocumentType.LINK ? this.props.A.ContentDiv.getElementsByClassName("linkAnchorBox-cont") : [];
-                const bcont = this.props.B.props.Document.type === DocumentType.LINK ? this.props.B.ContentDiv.getElementsByClassName("linkAnchorBox-cont") : [];
-                const adiv = (acont.length ? acont[0] : this.props.A.ContentDiv);
-                const bdiv = (bcont.length ? bcont[0] : this.props.B.ContentDiv);
-                const a = adiv.getBoundingClientRect();
-                const b = bdiv.getBoundingClientRect();
-                const abounds = adiv.parentElement!.getBoundingClientRect();
-                const bbounds = bdiv.parentElement!.getBoundingClientRect();
-                const apt = Utils.closestPtBetweenRectangles(abounds.left, abounds.top, abounds.width, abounds.height,
-                    bbounds.left, bbounds.top, bbounds.width, bbounds.height,
-                    a.left + a.width / 2, a.top + a.height / 2);
-                const bpt = Utils.closestPtBetweenRectangles(bbounds.left, bbounds.top, bbounds.width, bbounds.height,
-                    abounds.left, abounds.top, abounds.width, abounds.height,
-                    apt.point.x, apt.point.y);
-                const afield = this.props.A.props.LayoutTemplateString?.indexOf("anchor1") === -1 ? "anchor2" : "anchor1";
-                const bfield = afield === "anchor1" ? "anchor2" : "anchor1";
-
-                // really hacky stuff to make the LinkAnchorBox display where we want it to:
-                //   if there's an element in the DOM with a classname containing the link's id and a data-targetids attribute containing the other end of the link, 
-                //   then that DOM element is a hyperlink source for the current anchor and we want to place our link box at it's top right
-                //   otherwise, we just use the computed nearest point on the document boundary to the target Document
-                const linkId = this.props.LinkDocs[0][Id]; // this link's Id
-                const AanchorId = (this.props.LinkDocs[0][afield] as Doc)[Id]; // anchor a's id
-                const BanchorId = (this.props.LinkDocs[0][bfield] as Doc)[Id]; // anchor b's id
-                const linkEles = Array.from(window.document.getElementsByClassName(linkId));
-                const targetAhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes(AanchorId));
-                const targetBhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes(BanchorId));
-                if (!targetBhyperlink) {
-                    this.props.A.rootDoc[afield + "_x"] = (apt.point.x - abounds.left) / abounds.width * 100;
-                    this.props.A.rootDoc[afield + "_y"] = (apt.point.y - abounds.top) / abounds.height * 100;
-                } else {
-                    setTimeout(() => {
-                        (this.props.A.rootDoc[(this.props.A.props as any).fieldKey] as Doc);
-                        const m = targetBhyperlink.getBoundingClientRect();
-                        const mp = this.props.A.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
-                        this.props.A.rootDoc[afield + "_x"] = Math.min(1, mp[0] / this.props.A.props.PanelWidth()) * 100;
-                        this.props.A.rootDoc[afield + "_y"] = Math.min(1, mp[1] / this.props.A.props.PanelHeight()) * 100;
-                    }, 0);
-                }
-                if (!targetAhyperlink) {
-                    this.props.A.rootDoc[bfield + "_x"] = (bpt.point.x - bbounds.left) / bbounds.width * 100;
-                    this.props.A.rootDoc[bfield + "_y"] = (bpt.point.y - bbounds.top) / bbounds.height * 100;
-                } else {
-                    setTimeout(() => {
-                        (this.props.B.rootDoc[(this.props.B.props as any).fieldKey] as Doc);
-                        const m = targetAhyperlink.getBoundingClientRect();
-                        const mp = this.props.B.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
-                        this.props.B.rootDoc[bfield + "_x"] = Math.min(1, mp[0] / this.props.B.props.PanelWidth()) * 100;
-                        this.props.B.rootDoc[bfield + "_y"] = Math.min(1, mp[1] / this.props.B.props.PanelHeight()) * 100;
-                    }, 0);
-                }
+                setTimeout(this.placeAnchors);
             })
             , { fireImmediately: true });
     }
+    placeAnchors = () => {
+        const { A, B, LinkDocs } = this.props;
+        const linkDoc = LinkDocs[0];
+        if (SnappingManager.GetIsDragging() || !A.ContentDiv || !B.ContentDiv) return;
+        setTimeout(action(() => this._opacity = 1), 0); // since the render code depends on querying the Dom through getBoudndingClientRect, we need to delay triggering render()
+        setTimeout(action(() => (!LinkDocs.length || !linkDoc.linkDisplay) && (this._opacity = 0.05)), 750); // this will unhighlight the link line.
+        const acont = A.props.Document.type === DocumentType.LINK ? A.ContentDiv.getElementsByClassName("linkAnchorBox-cont") : [];
+        const bcont = B.props.Document.type === DocumentType.LINK ? B.ContentDiv.getElementsByClassName("linkAnchorBox-cont") : [];
+        const adiv = (acont.length ? acont[0] : A.ContentDiv);
+        const bdiv = (bcont.length ? bcont[0] : B.ContentDiv);
+        const a = adiv.getBoundingClientRect();
+        const b = bdiv.getBoundingClientRect();
+        const { left: aleft, top: atop, width: awidth, height: aheight } = adiv.parentElement!.getBoundingClientRect();
+        const { left: bleft, top: btop, width: bwidth, height: bheight } = bdiv.parentElement!.getBoundingClientRect();
+        const apt = Utils.closestPtBetweenRectangles(aleft, atop, awidth, aheight, bleft, btop, bwidth, bheight, a.left + a.width / 2, a.top + a.height / 2);
+        const bpt = Utils.closestPtBetweenRectangles(bleft, btop, bwidth, bheight, aleft, atop, awidth, aheight, apt.point.x, apt.point.y);
+        const afield = A.props.LayoutTemplateString?.indexOf("anchor1") === -1 ? "anchor2" : "anchor1";
+        const bfield = afield === "anchor1" ? "anchor2" : "anchor1";
+
+        // really hacky stuff to make the LinkAnchorBox display where we want it to:
+        //   if there's an element in the DOM with a classname containing the link's id and a data-targetids attribute containing the other end of the link, 
+        //   then that DOM element is a hyperlink source for the current anchor and we want to place our link box at it's top right
+        //   otherwise, we just use the computed nearest point on the document boundary to the target Document
+        const linkEles = Array.from(window.document.getElementsByClassName(linkDoc[Id]));
+        const targetAhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes((linkDoc[afield] as Doc)[Id]));
+        const targetBhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes((linkDoc[bfield] as Doc)[Id]));
+        if (!targetBhyperlink) {
+            A.rootDoc[afield + "_x"] = (apt.point.x - aleft) / awidth * 100;
+            A.rootDoc[afield + "_y"] = (apt.point.y - atop) / aheight * 100;
+        } else {
+            const m = targetBhyperlink.getBoundingClientRect();
+            const mp = A.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
+            A.rootDoc[afield + "_x"] = Math.min(1, mp[0] / A.props.PanelWidth()) * 100;
+            A.rootDoc[afield + "_y"] = Math.min(1, mp[1] / A.props.PanelHeight()) * 100;
+        }
+        if (!targetAhyperlink) {
+            B.rootDoc[bfield + "_x"] = (bpt.point.x - bleft) / bwidth * 100;
+            B.rootDoc[bfield + "_y"] = (bpt.point.y - btop) / bheight * 100;
+        } else {
+            const m = targetAhyperlink.getBoundingClientRect();
+            const mp = B.props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
+            B.rootDoc[bfield + "_x"] = Math.min(1, mp[0] / B.props.PanelWidth()) * 100;
+            B.rootDoc[bfield + "_y"] = Math.min(1, mp[1] / B.props.PanelHeight()) * 100;
+        }
+    }
 
 
     pointerDown = (e: React.PointerEvent) => {
@@ -111,13 +100,15 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         let rect = el.getBoundingClientRect();
         const top = rect.top, height = rect.height;
         var el = el.parentNode;
-        do {
-            rect = el.getBoundingClientRect();
-            if (top <= rect.right === false && getComputedStyle(el).overflow === "hidden") return rect.bottom;
-            // Check if the element is out of view due to a container scrolling
-            if ((top + height) <= rect.top && getComputedStyle(el).overflow === "hidden") return rect.top;
+        while (el && el !== document.body) {
+            if (el.hasOwnProperty("getBoundingClientRect")) {
+                rect = el.getBoundingClientRect();
+                if (top <= rect.bottom === false && getComputedStyle(el).overflow === "hidden") return rect.bottom;
+                // Check if the element is out of view due to a container scrolling
+                if ((top + height) <= rect.top && getComputedStyle(el).overflow === "hidden") return rect.top;
+            }
             el = el.parentNode;
-        } while (el !== document.body);
+        }
         // Check its within the document viewport
         return top; //top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
     }
@@ -125,27 +116,27 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         let rect = el.getBoundingClientRect();
         const left = rect.left, width = rect.width;
         var el = el.parentNode;
-        do {
-            rect = el.getBoundingClientRect();
-            if (left <= rect.right === false && getComputedStyle(el).overflow === "hidden") return rect.right;
-            // Check if the element is out of view due to a container scrolling
-            if ((left + width) <= rect.left && getComputedStyle(el).overflow === "hidden") return rect.left;
+        while (el && el !== document.body) {
+            if (el.hasOwnProperty("getBoundingClientRect")) {
+                rect = el.getBoundingClientRect();
+                if (left <= rect.right === false && getComputedStyle(el).overflow === "hidden") return rect.right;
+                // Check if the element is out of view due to a container scrolling
+                if ((left + width) <= rect.left && getComputedStyle(el).overflow === "hidden") return rect.left;
+            }
             el = el.parentNode;
-        } while (el !== document.body);
+        }
         // Check its within the document viewport
         return left; //top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden";
     }
 
     @computed.struct get renderData() {
         this._start; SnappingManager.GetIsDragging();
-        if (!this.props.A.ContentDiv || !this.props.B.ContentDiv || !this.props.LinkDocs.length) {
-            return undefined;
-        }
-        this.props.A.props.ScreenToLocalTransform().transform(this.props.B.props.ScreenToLocalTransform());
-        const acont = this.props.A.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
-        const bcont = this.props.B.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
-        const adiv = (acont.length ? acont[0] : this.props.A.ContentDiv);
-        const bdiv = (bcont.length ? bcont[0] : this.props.B.ContentDiv);
+        const { A, B, LinkDocs } = this.props;
+        if (!A.ContentDiv || !B.ContentDiv || !LinkDocs.length) return undefined;
+        const acont = A.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
+        const bcont = B.ContentDiv.getElementsByClassName("linkAnchorBox-cont");
+        const adiv = (acont.length ? acont[0] : A.ContentDiv);
+        const bdiv = (bcont.length ? bcont[0] : B.ContentDiv);
         for (let apdiv = adiv; apdiv; apdiv = apdiv.parentElement as any) if ((apdiv as any).hidden) return;
         for (let apdiv = bdiv; apdiv; apdiv = apdiv.parentElement as any) if ((apdiv as any).hidden) return;
         const a = adiv.getBoundingClientRect();
@@ -154,12 +145,9 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const btop = this.visibleY(bdiv);
         const aleft = this.visibleX(adiv);
         const bleft = this.visibleX(bdiv);
-        const apt = Utils.closestPtBetweenRectangles(aleft, atop, a.width, a.height,
-            bleft, btop, b.width, b.height,
-            a.left + a.width / 2, a.top + a.height / 2);
-        const bpt = Utils.closestPtBetweenRectangles(bleft, btop, b.width, b.height,
-            aleft, atop, a.width, a.height,
-            apt.point.x, apt.point.y);
+        const clipped = aleft !== a.left || atop !== a.top || bleft !== b.left || btop !== b.top;
+        const apt = Utils.closestPtBetweenRectangles(aleft, atop, a.width, a.height, bleft, btop, b.width, b.height, a.left + a.width / 2, a.top + a.height / 2);
+        const bpt = Utils.closestPtBetweenRectangles(bleft, btop, b.width, b.height, aleft, atop, a.width, a.height, apt.point.x, apt.point.y);
         const pt1 = [apt.point.x, apt.point.y];
         const pt2 = [bpt.point.x, bpt.point.y];
         const pt1vec = [pt1[0] - (aleft + a.width / 2), pt1[1] - (atop + a.height / 2)];
@@ -167,14 +155,13 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         const pt1len = Math.sqrt((pt1vec[0] * pt1vec[0]) + (pt1vec[1] * pt1vec[1]));
         const pt2len = Math.sqrt((pt2vec[0] * pt2vec[0]) + (pt2vec[1] * pt2vec[1]));
         const ptlen = Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0]) + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1])) / 2;
-        const pt1norm = [pt1vec[0] / pt1len * ptlen, pt1vec[1] / pt1len * ptlen];
-        const pt2norm = [pt2vec[0] / pt2len * ptlen, pt2vec[1] / pt2len * ptlen];
-        const aActive = this.props.A.isSelected() || Doc.IsBrushed(this.props.A.props.Document);
-        const bActive = this.props.B.isSelected() || Doc.IsBrushed(this.props.B.props.Document);
-        if (aleft !== a.left || atop !== a.top || bleft !== b.left || btop !== b.top) return { a, b, pt1norm: [0, 0], pt2norm: [0, 0], aActive, bActive, textX: undefined, textY: undefined, pt1, pt2 };
+        const pt1norm = clipped ? [0, 0] : [pt1vec[0] / pt1len * ptlen, pt1vec[1] / pt1len * ptlen];
+        const pt2norm = clipped ? [0, 0] : [pt2vec[0] / pt2len * ptlen, pt2vec[1] / pt2len * ptlen];
+        const aActive = A.isSelected() || Doc.IsBrushed(A.props.Document);
+        const bActive = B.isSelected() || Doc.IsBrushed(B.props.Document);
 
-        const textX = (Math.min(pt1[0], pt2[0]) + Math.max(pt1[0], pt2[0])) / 2 + NumCast(this.props.LinkDocs[0].linkOffsetX);
-        const textY = (pt1[1] + pt2[1]) / 2 + NumCast(this.props.LinkDocs[0].linkOffsetY);
+        const textX = (Math.min(pt1[0], pt2[0]) + Math.max(pt1[0], pt2[0])) / 2 + NumCast(LinkDocs[0].linkOffsetX);
+        const textY = (pt1[1] + pt2[1]) / 2 + NumCast(LinkDocs[0].linkOffsetY);
         return { a, b, pt1norm, pt2norm, aActive, bActive, textX, textY, pt1, pt2 };
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2783011cf..71519f2b9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -7,7 +7,7 @@ import { Id } from "../../../../fields/FieldSymbols";
 import { InkData, InkField, InkTool } from "../../../../fields/InkField";
 import { List } from "../../../../fields/List";
 import { RichTextField } from "../../../../fields/RichTextField";
-import { createSchema, makeInterface } from "../../../../fields/Schema";
+import { createSchema, makeInterface, listSpec } from "../../../../fields/Schema";
 import { ScriptField } from "../../../../fields/ScriptField";
 import { BoolCast, Cast, FieldValue, NumCast, ScriptCast, StrCast } from "../../../../fields/Types";
 import { TraceMobx } from "../../../../fields/util";
@@ -88,6 +88,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     private _clusterDistance: number = 75;
     private _hitCluster = false;
     private _layoutComputeReaction: IReactionDisposer | undefined;
+    private _boundsReaction: IReactionDisposer | undefined;
     private _layoutPoolData = new ObservableMap<string, PoolData>();
     private _layoutSizeData = new ObservableMap<string, { width?: number, height?: number }>();
     private _cachedPool: Map<string, PoolData> = new Map();
@@ -782,10 +783,14 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         let deltaScale = deltaY > 0 ? (1 / 1.05) : 1.05;
         if (deltaScale < 0) deltaScale = -deltaScale;
         const [x, y] = this.getTransform().transformPoint(pointX, pointY);
+        const invTransform = this.getLocalTransform().inverse();
+        if (deltaScale * invTransform.Scale > 20) {
+            deltaScale = 20 / invTransform.Scale;
+        }
         const localTransform = this.getLocalTransform().inverse().scaleAbout(deltaScale, x, y);
 
         if (localTransform.Scale >= 0.15 || localTransform.Scale > this.zoomScaling()) {
-            const safeScale = Math.min(Math.max(0.15, localTransform.Scale), 40);
+            const safeScale = Math.min(Math.max(0.15, localTransform.Scale), 20);
             this.props.Document[this.scaleFieldKey] = Math.abs(safeScale);
             this.setPan(-localTransform.TranslateX / safeScale, -localTransform.TranslateY / safeScale);
         }
@@ -867,7 +872,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         this.layoutDoc._panY = NumCast(this.layoutDoc._panY) - newpan[1];
     }
 
-    focusDocument = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => boolean) => {
+    focusDocument = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => boolean, dontCenter?: boolean) => {
         const state = HistoryUtil.getState();
 
         // TODO This technically isn't correct if type !== "doc", as
@@ -886,15 +891,32 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         SelectionManager.DeselectAll();
         if (this.props.Document.scrollHeight) {
             const annotOn = Cast(doc.annotationOn, Doc) as Doc;
+            let delay = 1000;
             if (!annotOn) {
-                this.props.focus(doc);
+                !dontCenter && this.props.focus(doc);
+                afterFocus && setTimeout(afterFocus, delay);
             } else {
                 const contextHgt = Doc.AreProtosEqual(annotOn, this.props.Document) && this.props.VisibleHeight ? this.props.VisibleHeight() : NumCast(annotOn._height);
-                const offset = annotOn && (contextHgt / 2);
-                this.props.Document._scrollY = NumCast(doc.y) - offset;
+                const curScroll = NumCast(this.props.Document._scrollTop);
+                let scrollTo = curScroll;
+                if (curScroll + contextHgt < NumCast(doc.y)) {
+                    scrollTo = NumCast(doc.y) + Math.max(NumCast(doc._height), 100) - contextHgt;
+                } else if (curScroll > NumCast(doc.y)) {
+                    scrollTo = Math.max(0, NumCast(doc.y) - 50);
+                }
+                if (curScroll !== scrollTo || this.props.Document._viewTransition) {
+                    this.props.Document._scrollPY = this.props.Document._scrollY = scrollTo;
+                    delay = Math.abs(scrollTo - curScroll) > 5 ? 1000 : 0;
+                    !dontCenter && this.props.focus(this.props.Document);
+                    afterFocus && setTimeout(afterFocus, delay);
+                } else {
+                    !dontCenter && delay && this.props.focus(this.props.Document);
+                    // @ts-ignore
+                    afterFocus(true);  // bcz: TODO Aragh -- need to add a parameter to afterFocus() functions to indicate whether the focus function didn't need to scroll
+
+                }
             }
 
-            afterFocus && setTimeout(afterFocus, 1000);
         } else {
             const layoutdoc = Doc.Layout(doc);
             const newPanX = NumCast(doc.x) + NumCast(layoutdoc._width) / 2;
@@ -914,14 +936,16 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             willZoom && this.setScaleToZoom(layoutdoc, scale);
             Doc.linkFollowHighlight(doc);
 
+            const notFocused = newPanX === savedState.px && newPanY === savedState.py;
             afterFocus && setTimeout(() => {
-                if (afterFocus?.()) {
+                // @ts-ignore
+                if (afterFocus?.(notFocused)) { // bcz: TODO Aragh -- need to add a parameter to afterFocus() functions to indicate whether the focus function didn't need to scroll
                     this.Document._panX = savedState.px;
                     this.Document._panY = savedState.py;
                     this.Document[this.scaleFieldKey] = savedState.s;
                     this.Document._viewTransition = savedState.pt;
                 }
-            }, 500);
+            }, notFocused ? 0 : 500);
         }
 
     }
@@ -1145,12 +1169,22 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         this._layoutComputeReaction = reaction(() => this.doLayoutComputation,
             (elements) => this._layoutElements = elements || [],
             { fireImmediately: true, name: "doLayout" });
+        if (!this.props.annotationsKey) {
+            this._boundsReaction = reaction(() => this.contentBounds,
+                bounds => (!this.fitToContent && this._layoutElements?.length) && setTimeout(() => {
+                    const rbounds = Cast(this.Document._renderContentBounds, listSpec("number"), [0, 0, 0, 0]);
+                    if (rbounds[0] !== bounds.x || rbounds[1] !== bounds.y || rbounds[2] !== bounds.r || rbounds[3] !== bounds.b) {
+                        this.Document._renderContentBounds = new List<number>([bounds.x, bounds.y, bounds.r, bounds.b]);
+                    }
+                }));
+        }
 
         this._marqueeRef.current?.addEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
     }
 
     componentWillUnmount() {
         this._layoutComputeReaction?.();
+        this._boundsReaction?.();
         this._marqueeRef.current?.removeEventListener("dashDragAutoScroll", this.onDragAutoScroll as any);
     }
 
@@ -1159,7 +1193,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     @action
     onCursorMove = (e: React.PointerEvent) => {
-        super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
+        //  super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY));
     }
 
 
@@ -1424,10 +1458,10 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         return wscale < hscale ? wscale : hscale;
     }
     @computed get backgroundEvents() { return this.layoutDoc._isBackground && SnappingManager.GetIsDragging(); }
+
     render() {
         TraceMobx();
         const clientRect = this._mainCont?.getBoundingClientRect();
-        !this.fitToContent && this._layoutElements?.length && setTimeout(() => this.Document._renderContentBounds = new List<number>([this.contentBounds.x, this.contentBounds.y, this.contentBounds.r, this.contentBounds.b]), 0);
         return <div className={"collectionfreeformview-container"} ref={this.createDashEventsTarget}
             onPointerOver={this.onPointerOver}
             onWheel={this.onPointerWheel}