From 2ea594a4c1ff221200e0795fb07d30b603177a67 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 3 Jan 2024 23:44:28 -0500
Subject: cleaned up screenToLocalTransform in several places by making it
 additional methods.  cleaned up styleProider api a bit to take
 DocumentViewInternalProps, not DocumentViewProps..

---
 .../CollectionFreeFormLinkView.tsx                 | 10 +--
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 94 +++++++++++-----------
 2 files changed, 51 insertions(+), 53 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 6131fe037..5204633ea 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -22,8 +22,6 @@ export interface CollectionFreeFormLinkViewProps {
     LinkDocs: Doc[];
 }
 
-// props.screentolocatransform
-
 @observer
 export class CollectionFreeFormLinkView extends ObservableReactComponent<CollectionFreeFormLinkViewProps> {
     @observable _opacity: number = 0;
@@ -42,10 +40,10 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect
     componentDidMount() {
         this._anchorDisposer = reaction(
             () => [
-                this._props.A._props.ScreenToLocalTransform(),
+                this._props.A.screenToViewTransform(),
                 Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
                 Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_1, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
-                this._props.B._props.ScreenToLocalTransform(),
+                this._props.B.screenToViewTransform(),
                 Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.layout_scrollTop,
                 Cast(Cast(Cast(this._props.A.Document, Doc, null)?.link_anchor_2, Doc, null)?.annotationOn, Doc, null)?.[DocCss],
             ],
@@ -91,7 +89,7 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect
             }
         } else {
             const m = targetAhyperlink.getBoundingClientRect();
-            const mp = A._props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
+            const mp = A.screenToViewTransform().transformPoint(m.right, m.top + 5);
             const mpx = mp[0] / A._props.PanelWidth();
             const mpy = mp[1] / A._props.PanelHeight();
             if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_1_x = mpx * 100;
@@ -106,7 +104,7 @@ export class CollectionFreeFormLinkView extends ObservableReactComponent<Collect
             }
         } else {
             const m = targetBhyperlink.getBoundingClientRect();
-            const mp = B._props.ScreenToLocalTransform().transformPoint(m.right, m.top + 5);
+            const mp = B.screenToViewTransform().transformPoint(m.right, m.top + 5);
             const mpx = mp[0] / B._props.PanelWidth();
             const mpy = mp[1] / B._props.PanelHeight();
             if (mpx >= 0 && mpx <= 1) linkDoc.link_anchor_2_x = mpx * 100;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 44654c8fe..0128647a4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -38,7 +38,7 @@ import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } fr
 import { LightboxView } from '../../LightboxView';
 import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView';
 import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp';
-import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere } from '../../nodes/DocumentView';
+import { DocFocusOptions, DocumentView, DocumentViewInternalProps, DocumentViewProps, OpenWhere } from '../../nodes/DocumentView';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { PinProps, PresBox } from '../../nodes/trails/PresBox';
@@ -172,10 +172,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     @computed get panZoomXf() {
         return new Transform(this.panX(), this.panY(), 1 / this.zoomScaling());
     }
-    @computed get screenToLocalXf() {
+    @computed get screenToFreeformContentsXf() {
         return this._props
-            .ScreenToLocalTransform()
-            .scale(this._props.isAnnotationOverlay ? 1 : 1)
+            .ScreenToLocalTransform() //
             .translate(-this.cachedCenteringShiftX, -this.cachedCenteringShiftY)
             .transform(this.panZoomXf);
     }
@@ -242,7 +241,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     zoomScaling = () => this.freeformData()?.scale ?? NumCast(Doc.Layout(this.Document)[this.scaleFieldKey], NumCast(Cast(this.Document.resolvedDataDoc, Doc, null)?.[this.scaleFieldKey], 1));
     PanZoomCenterXf = () =>
         this._props.isAnnotationOverlay && this.zoomScaling() === 1 ? `` : `translate(${this.cachedCenteringShiftX}px, ${this.cachedCenteringShiftY}px) scale(${this.zoomScaling()}) translate(${-this.panX()}px, ${-this.panY()}px)`;
-    ScreenToLocalXf = () => this.screenToLocalXf.copy();
+    ScreenToContentsXf = () => this.screenToFreeformContentsXf.copy();
     getActiveDocuments = () => this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair => pair.layout);
     isAnyChildContentActive = () => this._props.isAnyChildContentActive();
     addLiveTextBox = (newDoc: Doc) => {
@@ -329,13 +328,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             findDoc(dv => res(dv));
         });
 
-    internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number, yp: number) {
+    internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData) {
         if (!super.onInternalDrop(e, de)) return false;
         const refDoc = docDragData.droppedDocuments[0];
-        const [xpo, ypo] = this._props.ScreenToLocalTransform().transformPoint(de.x, de.y);
-        const z = NumCast(refDoc.z);
-        const x = (z ? xpo : xp) - docDragData.offset[0];
-        const y = (z ? ypo : yp) - docDragData.offset[1];
+        const fromScreenXf = NumCast(refDoc.z) ? this.ScreenToLocalBoxXf() : this.screenToFreeformContentsXf;
+        const [xpo, ypo] = fromScreenXf.transformPoint(de.x, de.y);
+        const x = xpo - docDragData.offset[0];
+        const y = ypo - docDragData.offset[1];
         const zsorted = this.childLayoutPairs
             .map(pair => pair.layout)
             .slice()
@@ -347,7 +346,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         for (let i = 0; i < docDragData.droppedDocuments.length; i++) {
             const d = docDragData.droppedDocuments[i];
             const layoutDoc = Doc.Layout(d);
-            const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], this._props.ScreenToLocalTransform().Rotate);
+            const delta = Utils.rotPt(x - dropPos[0], y - dropPos[1], fromScreenXf.Rotate);
             if (this.Document._currentFrame !== undefined) {
                 CollectionFreeFormDocumentView.setupKeyframes([d], NumCast(this.Document._currentFrame), false);
                 const pvals = CollectionFreeFormDocumentView.getValues(d, NumCast(d.activeFrame, 1000)); // get filled in values (uses defaults when not value is specified) for position
@@ -393,8 +392,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     }
 
     @undoBatch
-    internalAnchorAnnoDrop(e: Event, annoDragData: DragManager.AnchorAnnoDragData, xp: number, yp: number) {
+    internalAnchorAnnoDrop(e: Event, de: DragManager.DropEvent, annoDragData: DragManager.AnchorAnnoDragData) {
         const dropCreator = annoDragData.dropDocCreator;
+        const [xp, yp] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y);
         annoDragData.dropDocCreator = (annotationOn: Doc | undefined) => {
             const dropDoc = dropCreator(annotationOn);
             if (dropDoc) {
@@ -408,20 +408,21 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     }
 
     @undoBatch
-    internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData, xp: number, yp: number) {
+    internalLinkDrop(e: Event, de: DragManager.DropEvent, linkDragData: DragManager.LinkDragData) {
         if (linkDragData.linkDragView.props.docViewPath().includes(this._props.docViewPath().lastElement())) {
+            const [x, y] = this.screenToFreeformContentsXf.transformPoint(de.x, de.y);
             let added = false;
             //  do nothing if link is dropped into any freeform view parent of dragged document
             const source =
                 !linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.Document
-                    ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x: xp, y: yp, title: 'dropped annotation' })
+                    ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x, y, title: 'dropped annotation' })
                     : Docs.Create.FontIconDocument({
                           title: 'anchor',
                           icon_label: '',
                           followLinkToggle: true,
                           icon: 'map-pin',
-                          x: xp,
-                          y: yp,
+                          x,
+                          y,
                           backgroundColor: '#ACCEF7',
                           layout_hideAllLinks: true,
                           layout_hideLinkButton: true,
@@ -441,14 +442,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     }
 
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
-        const [xp, yp] = this.screenToLocalXf.transformPoint(de.x, de.y);
-        if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de.complete.annoDragData, xp, yp);
-        else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData, xp, yp);
-        else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData, xp, yp);
+        if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de, de.complete.annoDragData);
+        else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData);
+        else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData);
         return false;
     };
 
-    onExternalDrop = (e: React.DragEvent) => (([x, y]) => super.onExternalDrop(e, { x, y }))(this.screenToLocalXf.transformPoint(e.pageX, e.pageY));
+    onExternalDrop = (e: React.DragEvent) => (([x, y]) => super.onExternalDrop(e, { x, y }))(this.screenToFreeformContentsXf.transformPoint(e.pageX, e.pageY));
 
     static overlapping(doc1: Doc, doc2: Doc, clusterDistance: number) {
         const doc2Layout = Doc.Layout(doc2);
@@ -489,7 +489,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 const { left, top } = clusterDocs[0].getBounds() || { left: 0, top: 0 };
                 const de = new DragManager.DocumentDragData(eles, e.ctrlKey || e.altKey ? 'embed' : undefined);
                 de.moveDocument = this._props.moveDocument;
-                de.offset = this.screenToLocalXf.transformDirection(ptsParent.clientX - left, ptsParent.clientY - top);
+                de.offset = this.screenToFreeformContentsXf.transformDirection(ptsParent.clientX - left, ptsParent.clientY - top);
                 DragManager.StartDocumentDrag(
                     clusterDocs.map(v => v.ContentDiv!),
                     de,
@@ -586,7 +586,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     };
 
-    clusterStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => {
+    clusterStyleProvider = (doc: Opt<Doc>, props: Opt<DocumentViewInternalProps | FieldViewProps>, property: string) => {
         let styleProp = this._props.styleProvider?.(doc, props, property); // bcz: check 'props'  used to be renderDepth + 1
         if (doc && this.childDocList?.includes(doc))
             switch (property) {
@@ -643,7 +643,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         break;
                     case InkTool.None:
                         if (!(this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine))) {
-                            this._hitCluster = this.pickCluster(this.screenToLocalXf.transformPoint(e.clientX, e.clientY));
+                            this._hitCluster = this.pickCluster(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY));
                             setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, emptyFunction, this._hitCluster !== -1 ? true : false, false);
                         }
                         break;
@@ -664,8 +664,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             case GestureUtils.Gestures.Triangle:
             case GestureUtils.Gestures.Stroke:
                 const points = ge.points;
-                const B = this.screenToLocalXf.transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
-                const inkWidth = ActiveInkWidth() * this._props.ScreenToLocalTransform().Scale;
+                const B = this.screenToFreeformContentsXf.transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
+                const inkWidth = ActiveInkWidth() * this.ScreenToLocalBoxXf().Scale;
                 const inkDoc = Docs.Create.InkDocument(
                     points,
                     { title: ge.gesture.toString(),
@@ -696,7 +696,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 break;
             case GestureUtils.Gestures.Text:
                 if (ge.text) {
-                    const B = this.screenToLocalXf.transformPoint(ge.points[0].X, ge.points[0].Y);
+                    const B = this.screenToFreeformContentsXf.transformPoint(ge.points[0].X, ge.points[0].Y);
                     this.addDocument(Docs.Create.TextDocument(ge.text, { title: ge.text, x: B[0], y: B[1] }));
                     e.stopPropagation();
                 }
@@ -719,7 +719,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 e.preventDefault();
             } else if (this.isContentActive() && e.shiftKey) {
                 // reset zoom of freeform view to 1-to-1 on a shift + double click
-                this.zoomSmoothlyAboutPt(this.screenToLocalXf.transformPoint(e.clientX, e.clientY), 1);
+                this.zoomSmoothlyAboutPt(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY), 1);
                 e.stopPropagation();
                 e.preventDefault();
             }
@@ -738,8 +738,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const shiftKey = e.shiftKey && !e.ctrlKey;
         PresBox.Instance?.pauseAutoPres();
         this._props.DocumentView?.().clearViewTransition();
-        const [dxi, dyi] = this.screenToLocalXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-        const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, this._props.ScreenToLocalTransform().Rotate);
+        const [dxi, dyi] = this.screenToFreeformContentsXf.transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
+        const { x: dx, y: dy } = Utils.rotPt(dxi, dyi, this.ScreenToLocalBoxXf().Rotate);
         this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0, true);
         this._lastX = e.clientX;
         this._lastY = e.clientY;
@@ -940,7 +940,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         if (this.Document.isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return;
         let deltaScale = deltaY > 0 ? 1 / 1.05 : 1.05;
         if (deltaScale < 0) deltaScale = -deltaScale;
-        const [x, y] = this.screenToLocalXf.transformPoint(pointX, pointY);
+        const [x, y] = this.screenToFreeformContentsXf.transformPoint(pointX, pointY);
         const invTransform = this.panZoomXf.inverse();
         if (deltaScale * invTransform.Scale > 20) {
             deltaScale = 20 / invTransform.Scale;
@@ -982,7 +982,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 if (((!e.metaKey && !e.altKey) || Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom) && this._props.isContentActive(true)) {
                     const deltaX = e.shiftKey ? e.deltaX : e.ctrlKey ? 0 : e.deltaX;
                     const deltaY = e.shiftKey ? 0 : e.ctrlKey ? e.deltaY : e.deltaY;
-                    this.scrollPan({ deltaX: -deltaX * this.screenToLocalXf.Scale, deltaY: e.shiftKey ? 0 : -deltaY * this.screenToLocalXf.Scale });
+                    this.scrollPan({ deltaX: -deltaX * this.screenToFreeformContentsXf.Scale, deltaY: e.shiftKey ? 0 : -deltaY * this.screenToFreeformContentsXf.Scale });
                     break;
                 }
             default:
@@ -1040,9 +1040,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             const minPanY = NumCast(this.dataDoc._freeform_panY_min, 0);
             const maxPanX = NumCast(this.dataDoc._freeform_panX_max, this.nativeWidth);
             const newPanX = Math.min(minPanX + scale * maxPanX, Math.max(minPanX, panX));
-            const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this._props.PanelWidth() - this._props.PanelHeight()) * this._props.ScreenToLocalTransform().Scale) / minScale;
+            const fitYscroll = (((this.nativeHeight / this.nativeWidth) * this._props.PanelWidth() - this._props.PanelHeight()) * this.ScreenToLocalBoxXf().Scale) / minScale;
             const nativeHeight = (this._props.PanelHeight() / this._props.PanelWidth() / (this.nativeHeight / this.nativeWidth)) * this.nativeHeight;
-            const maxScrollTop = this.nativeHeight / this._props.ScreenToLocalTransform().Scale - this._props.PanelHeight();
+            const maxScrollTop = this.nativeHeight / this.ScreenToLocalBoxXf().Scale - this._props.PanelHeight();
             const maxPanY =
                 minPanY + // minPanY + scrolling introduced by view scaling + scrolling introduced by layout_fitWidth
                 scale * NumCast(this.dataDoc._panY_max, nativeHeight) +
@@ -1116,11 +1116,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     zoomSmoothlyAboutPt(docpt: number[], scale: number, transitionTime = 500) {
         if (this.Document.isGroup) return;
         this.setPanZoomTransition(transitionTime);
-        const screenXY = this.screenToLocalXf.inverse().transformPoint(docpt[0], docpt[1]);
+        const screenXY = this.screenToFreeformContentsXf.inverse().transformPoint(docpt[0], docpt[1]);
         this.layoutDoc[this.scaleFieldKey] = scale;
-        const newScreenXY = this.screenToLocalXf.inverse().transformPoint(docpt[0], docpt[1]);
+        const newScreenXY = this.screenToFreeformContentsXf.inverse().transformPoint(docpt[0], docpt[1]);
         const scrDelta = { x: screenXY[0] - newScreenXY[0], y: screenXY[1] - newScreenXY[1] };
-        const newpan = this.screenToLocalXf.transformDirection(scrDelta.x, scrDelta.y);
+        const newpan = this.screenToFreeformContentsXf.transformDirection(scrDelta.x, scrDelta.y);
         this.layoutDoc[this.panXFieldKey] = NumCast(this.layoutDoc[this.panXFieldKey]) - newpan[0];
         this.layoutDoc[this.panYFieldKey] = NumCast(this.layoutDoc[this.panYFieldKey]) - newpan[1];
     }
@@ -1229,7 +1229,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 onKey={this.onKeyDown}
                 onDoubleClick={this.onChildDoubleClickHandler}
                 onBrowseClick={this.onBrowseClickHandler}
-                ScreenToLocalTransform={childLayout.z ? this._props.ScreenToLocalTransform : this.ScreenToLocalXf}
+                ScreenToLocalTransform={childLayout.z ? this.ScreenToLocalBoxXf : this.ScreenToContentsXf}
                 PanelWidth={childLayout[Width]}
                 PanelHeight={childLayout[Height]}
                 childFilters={this.childDocFilters}
@@ -1264,7 +1264,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 return (
                     (this.addDocument?.(
                         (doc instanceof Doc ? [doc] : doc).map(doc => {
-                            const pt = this.screenToLocalXf.transformPoint(NumCast(doc.x), NumCast(doc.y));
+                            const pt = this.screenToFreeformContentsXf.transformPoint(NumCast(doc.x), NumCast(doc.y));
                             doc.x = pt[0];
                             doc.y = pt[1];
                             return doc;
@@ -1437,7 +1437,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @observable _hideInfo = false;
     @action closeInfo = () => (this._hideInfo = true);
-    infoUI = () => (this._hideInfo || this.Document.annotationOn ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
+    infoUI = () => (this._hideInfo || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
 
     componentDidMount() {
         this._props.setContentView?.(this);
@@ -1601,7 +1601,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     promoteCollection = () => {
         const childDocs = this.childDocs.slice();
         childDocs.forEach(doc => {
-            const scr = this.screenToLocalXf.inverse().transformPoint(NumCast(doc.x), NumCast(doc.y));
+            const scr = this.screenToFreeformContentsXf.inverse().transformPoint(NumCast(doc.x), NumCast(doc.y));
             doc.x = scr?.[0];
             doc.y = scr?.[1];
         });
@@ -1713,7 +1713,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         visited.add(this.Document);
         showGroupDragTarget && (this.GroupChildDrag = BoolCast(this.Document.isGroup));
         const activeDocs = this.getActiveDocuments();
-        const size = this.screenToLocalXf.transformDirection(this._props.PanelWidth(), this._props.PanelHeight());
+        const size = this.screenToFreeformContentsXf.transformDirection(this._props.PanelWidth(), this._props.PanelHeight());
         const selRect = { left: this.panX() - size[0] / 2, top: this.panY() - size[1] / 2, width: size[0], height: size[1] };
         const docDims = (doc: Doc) => ({ left: NumCast(doc.x), top: NumCast(doc.y), width: NumCast(doc._width), height: NumCast(doc._height) });
         const isDocInView = (doc: Doc, rect: { left: number; top: number; width: number; height: number }) => intersectRect(docDims(doc), rect);
@@ -1725,7 +1725,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
         const horizLines: number[] = [];
         const vertLines: number[] = [];
-        const invXf = this.screenToLocalXf.inverse();
+        const invXf = this.screenToFreeformContentsXf.inverse();
         snappableDocs
             .filter(doc => !doc.isGroup && (snapToDraggedDoc || (SnappingManager.IsResizing !== doc && !DragManager.docsBeingDragged.includes(doc))))
             .forEach(doc => {
@@ -1822,8 +1822,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 selectDocuments={this.selectDocuments}
                 addDocument={this.addDocument}
                 addLiveTextDocument={this.addLiveTextBox}
-                getContainerTransform={this._props.ScreenToLocalTransform}
-                getTransform={this.ScreenToLocalXf}
+                getContainerTransform={this.ScreenToLocalBoxXf}
+                getTransform={this.ScreenToContentsXf}
                 panXFieldKey={this.panXFieldKey}
                 panYFieldKey={this.panYFieldKey}
                 isAnnotationOverlay={this.isAnnotationOverlay}>
@@ -1859,7 +1859,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
     lightboxPanelWidth = () => Math.max(0, this._props.PanelWidth() - 30);
     lightboxPanelHeight = () => Math.max(0, this._props.PanelHeight() - 30);
-    lightboxScreenToLocal = () => this._props.ScreenToLocalTransform().translate(-15, -15);
+    lightboxScreenToLocal = () => this.ScreenToLocalBoxXf().translate(-15, -15);
     onPassiveWheel = (e: WheelEvent) => {
         const docHeight = NumCast(this.Document[Doc.LayoutFieldKey(this.Document) + '_nativeHeight'], this.nativeHeight);
         const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this._props.PanelHeight() / this.nativeDimScaling;
@@ -1950,7 +1950,7 @@ export function CollectionBrowseClick(dv: DocumentView, clientX: number, clientY
                 }
                 while (parFfview?.Document.isGroup) parFfview = parFfview.props.DocumentView?.().CollectionFreeFormView;
                 const ffview = selfFfview && selfFfview.layoutDoc[selfFfview.scaleFieldKey] !== 0.5 ? selfFfview : parFfview; // if focus doc is a freeform that is not at it's default 0.5 scale, then zoom out on it.  Otherwise, zoom out on the parent ffview
-                ffview?.zoomSmoothlyAboutPt(ffview.screenToLocalXf.transformPoint(clientX, clientY), ffview?.isAnnotationOverlay ? 1 : 0.5, browseTransitionTime);
+                ffview?.zoomSmoothlyAboutPt(ffview.screenToFreeformContentsXf.transformPoint(clientX, clientY), ffview?.isAnnotationOverlay ? 1 : 0.5, browseTransitionTime);
                 Doc.linkFollowHighlight(dv?.props.Document, false);
             }
         });
-- 
cgit v1.2.3-70-g09d2