From b78aff5115862cbfa5e704422cb738aa7fd73c64 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Thu, 4 Apr 2019 14:13:29 -0400
Subject: fixed a number of smaller issues related to linking

---
 .../collections/collectionFreeForm/CollectionFreeFormView.scss      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 81d21d89a..79d520069 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -26,7 +26,7 @@
   border: 0px solid $light-color-secondary;
   border-radius: $border-radius;
   box-sizing: border-box;
-  position: relative;
+  position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
@@ -41,12 +41,12 @@
   .formattedTextBox-cont {
     background: $light-color-secondary;
   }
-
+ 
   opacity: 0.99;
   border: 0px solid transparent;
   border-radius: $border-radius;
   box-sizing: border-box;
-  position:relative;
+  position:absolute;
   overflow: hidden;
   top: 0;
   left: 0;
-- 
cgit v1.2.3-70-g09d2


From 89fd4327db1536990b4a4dc218819a1077f82445 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 9 Apr 2019 15:14:46 -0400
Subject: fixed layout of collection freeforms.

---
 .../collectionFreeForm/CollectionFreeFormView.scss |  8 ++-
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 60 ++++++++++++----------
 2 files changed, 40 insertions(+), 28 deletions(-)

(limited to 'src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss')

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 79d520069..81f2146e4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,5 +1,11 @@
 @import "../../global_variables";
-
+.collectionfreeformview-measure {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 .collectionfreeformview {
   position: absolute;
   top: 0;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e694bc7a7..1feb30db1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, observable, trace } from "mobx";
+import { action, computed, observable, trace, ObservableSet, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../../fields/Document";
 import { FieldWaiting } from "../../../../fields/Field";
@@ -24,6 +24,7 @@ import { DocumentManager } from "../../../util/DocumentManager";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { NumberField } from "../../../../fields/NumberField";
 import { Main } from "../../Main";
+import Measure from "react-measure";
 
 @observer
 export class CollectionFreeFormView extends CollectionSubView {
@@ -67,8 +68,8 @@ export class CollectionFreeFormView extends CollectionSubView {
     @observable public DownY: number = 0;
     @observable private _lastX: number = 0;
     @observable private _lastY: number = 0;
-
-    private outerElement?: HTMLDivElement;
+    @observable private _pwidth: number = 0;
+    @observable private _pheight: number = 0;
 
     @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0); }
     @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0); }
@@ -77,8 +78,8 @@ export class CollectionFreeFormView extends CollectionSubView {
     @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
     @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
     @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
-    @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) && this.outerElement ? this.outerElement.clientWidth / 2 : 0; }  // shift so pan position is at center of window for non-overlay collections
-    @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) && this.outerElement ? this.outerElement.clientHeight / 2 : 0; }// shift so pan position is at center of window for non-overlay collections
+    @computed get centeringShiftX() { return !this.props.Document.GetNumber(KeyStore.NativeWidth, 0) ? this._pwidth / 2 : 0; }  // shift so pan position is at center of window for non-overlay collections
+    @computed get centeringShiftY() { return !this.props.Document.GetNumber(KeyStore.NativeHeight, 0) ? this._pheight / 2 : 0; }// shift so pan position is at center of window for non-overlay collections
 
     @undoBatch
     @action
@@ -311,29 +312,34 @@ export class CollectionFreeFormView extends CollectionSubView {
         const pany: number = -this.props.Document.GetNumber(KeyStore.PanY, 0);
 
         return (
-            <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
-                onPointerDown={this.onPointerDown} onPointerMove={(e) => super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))}
-                onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} onWheel={this.onPointerWheel}
-                style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} ref={this.createDropTarget}>
-                <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
-                    addDocument={this.addDocument} removeDocument={this.props.removeDocument}
-                    getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
-                    <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox}
-                        getContainerTransform={this.getContainerTransform} getTransform={this.getTransform} >
-                        <div className="collectionfreeformview" ref={this._canvasRef}
-                            style={{ transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}>
-                            {this.backgroundView}
-                            <CollectionFreeFormLinksView {...this.props}>
-                                <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} >
-                                    {this.childViews}
-                                </InkingCanvas>
-                            </CollectionFreeFormLinksView>
-                            <CollectionFreeFormRemoteCursors {...this.props} />
+            <Measure onResize={(r: any) => runInAction(() => { this._pwidth = r.entry.width; this._pheight = r.entry.height })}>
+                {({ measureRef }) => (
+                    <div className={`collectionfreeformview-measure`} ref={measureRef}>
+                        <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
+                            onPointerDown={this.onPointerDown} onPointerMove={(e) => super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))}
+                            onDrop={this.onDrop.bind(this)} onDragOver={this.onDragOver} onWheel={this.onPointerWheel}
+                            style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} ref={this.createDropTarget}>
+                            <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
+                                addDocument={this.addDocument} removeDocument={this.props.removeDocument}
+                                getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
+                                <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox}
+                                    getContainerTransform={this.getContainerTransform} getTransform={this.getTransform} >
+                                    <div className="collectionfreeformview" ref={this._canvasRef}
+                                        style={{ transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}>
+                                        {this.backgroundView}
+                                        <CollectionFreeFormLinksView {...this.props}>
+                                            <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} >
+                                                {this.childViews}
+                                            </InkingCanvas>
+                                        </CollectionFreeFormLinksView>
+                                        <CollectionFreeFormRemoteCursors {...this.props} />
+                                    </div>
+                                    {this.overlayView}
+                                </PreviewCursor>
+                            </MarqueeView>
                         </div>
-                        {this.overlayView}
-                    </PreviewCursor>
-                </MarqueeView>
-            </div>
+                    </div>)}
+            </Measure>
         );
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2