got rid of force update for doc decs and adjusted point transforms to account for collection border width.

2 files changed, 28 insertions, 9 deletions

diff --git a/src/views/freeformcanvas/CollectionFreeFormView.tsx b/src/views/freeformcanvas/CollectionFreeFormView.tsx
index 437db7493..2233ffcaf 100644
--- a/src/views/freeformcanvas/CollectionFreeFormView.tsx
+++ b/src/views/freeformcanvas/CollectionFreeFormView.tsx
@@ -61,7 +61,6 @@ export class CollectionFreeFormView extends React.Component<IProps> {
             doc.y = docY;
         }
         e.stopPropagation();
-        DocumentDecorations.Instance.forceUpdate();
     }
 
     componentDidMount() {
@@ -115,8 +114,6 @@ export class CollectionFreeFormView extends React.Component<IProps> {
             doc.SetFieldValue(KeyStore.PanY, y + (e.pageY - this._lastY) / currScale, NumberField);
             this._lastX = e.pageX;
             this._lastY = e.pageY;
-
-            DocumentDecorations.Instance.forceUpdate()
         }
     }
 
@@ -137,8 +134,6 @@ export class CollectionFreeFormView extends React.Component<IProps> {
         this.props.Document.SetField(KeyStore.Scale, new NumberField(deltaScale));
         this.props.Document.SetFieldValue(KeyStore.PanX, Panxx + dx, NumberField);
         this.props.Document.SetFieldValue(KeyStore.PanY, Panyy + dy, NumberField);
-
-        DocumentDecorations.Instance.forceUpdate()
     }
 
     onDrop = (e: React.DragEvent): void => {
@@ -200,11 +195,10 @@ export class CollectionFreeFormView extends React.Component<IProps> {
         const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
         const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
         const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
-        // DocumentDecorations.Instance.forceUpdate()
         return (
             <div className="border" style={{
                 borderStyle: "solid",
-                borderWidth: "2px"
+                borderWidth: "2px",
             }}>
                 <div className="collectionfreeformview-container" onPointerDown={this.onPointerDown} onWheel={this.onPointerWheel} onContextMenu={(e) => e.preventDefault()} style={{
                     width: "100%",
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 8250d5405..1387f44b1 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -129,14 +129,15 @@ export class DocumentView extends React.Component<IProps> {
         return SelectionManager.IsSelected(this) || this.props.ContainingCollectionView === undefined || this.props.ContainingCollectionView!.active;
     }
 
+    hackToAccountForCollectionFreeFormBorderWidth: number = 2; // this is the border width of the collection
     //
     // Converts an input coordinate in application's screen space
     // into a coordinate in the space of this document.
     // NOTE: this is intended for use on DocumentViews that are CollectionFreeFormViews
     //
     public TransformToLocalPoint(screenX: number, screenY: number) {
-        let ContainerX = screenX;
-        let ContainerY = screenY;
+        let ContainerX = screenX - this.hackToAccountForCollectionFreeFormBorderWidth;
+        let ContainerY = screenY - this.hackToAccountForCollectionFreeFormBorderWidth;
         // if this collection view is nested within another collection view, then 
         // first transform the screen point into the parent collection's coordinate space.
         if (this.props.ContainingDocumentView != undefined) {
@@ -156,6 +157,30 @@ export class DocumentView extends React.Component<IProps> {
 
         return {LocalX, Ss, W, Panxx, Xx, LocalY, Panyy, Yy, ContainerX, ContainerY};
     }
+    //
+    // Converts the coordinate space of a document to a screen space coordinate.
+    //
+    public TransformToScreenPoint(localX: number, localY: number, Ss: number = 1, Panxx: number = 0, Panyy: number = 0): {ScreenX: number, ScreenY: number} {
+
+        let W = this.props.Document.GetFieldValue(KeyStore.Width, NumberField, Number(0));
+        let Xx = this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0));
+        let Yy = this.props.Document.GetFieldValue(KeyStore.Y, NumberField, Number(0));
+
+        let parentX = (localX + (Xx + Panxx) / Ss - W / 2) * Ss + W / 2;
+        let parentY = (localY + (Yy + Panyy) / Ss) * Ss;
+
+        // if this collection view is nested within another collection view, then 
+        // first transform the screen point into the parent collection's coordinate space.
+        if (this.props.ContainingDocumentView != undefined) {
+            let ss = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+            let panxx = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
+            let panyy = this.props.ContainingDocumentView.props.Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
+            let {ScreenX, ScreenY} = this.props.ContainingDocumentView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
+            return {ScreenX: ScreenX + this.hackToAccountForCollectionFreeFormBorderWidth, ScreenY: ScreenY + this.hackToAccountForCollectionFreeFormBorderWidth};
+        } else {
+            return {ScreenX: parentX, ScreenY: parentY};
+        }
+    }
 
     onPointerDown = (e: React.PointerEvent): void => {
         let me = this;