added grid ref and fixed css

3 files changed, 54 insertions, 35 deletions

diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
index b88721b4d..49d463441 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.scss
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -1,14 +1,4 @@
-// .react-grid-layout.layout {
-//     // max-height: 100%;// min-height: 100%;
-//     overflow-y: auto;
-// }
-
-// .collectionView {//     background-color: white;
-//     overflow-y: scroll;
-// }
-
-
-.collectionGridView_contents {
+.collectionGridView-contents {
     display: flex;
     overflow: hidden;
     width: 100%;
@@ -16,13 +6,32 @@
     flex-direction: column;
 }
 
-.collectionGridView_contents .document-wrapper {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+.collectionGridView-contents .collectionGridView-gridContainer {
     height: 100%;
+    overflow-y: auto;
+    background-color: white;
+}
+
+.documentDecorations-container .documentDecorations-resizer {
+    pointer-events: none;
+
+}
+
+#documentDecorations-bottomRightResizer,
+#documentDecorations-bottomLeftResizer,
+#documentDecorations-topRightResizer,
+#documentDecorations-topLeftResizer {
+    visibility: collapse;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
 }
 
-.react-grid-layout.layout {
-    height: 100%
+/* Firefox */
+input[type=number] {
+    -moz-appearance: textfield;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 111ce4beb..5eeaa9b0d 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,4 +1,4 @@
-import { computed, observable } from 'mobx';
+import { computed, observable, action } from 'mobx';
 import * as React from "react";
 import { Doc, DocListCast } from '../../../../fields/Doc';
 import { documentSchema } from '../../../../fields/documentSchemas';
@@ -23,6 +23,8 @@ const GridSchema = makeInterface(documentSchema);
 
 @observer
 export class CollectionGridView extends CollectionSubView(GridSchema) {
+    private containerRef: React.RefObject<HTMLDivElement>;
+    @observable private _scroll: number = 0;
 
     constructor(props: Readonly<SubCollectionViewProps>) {
         super(props);
@@ -33,6 +35,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         this.setLayout = this.setLayout.bind(this);
         this.deleteInContext = this.deleteInContext.bind(this);
+
+        this.containerRef = React.createRef();
     }
 
     componentDidMount() {
@@ -66,7 +70,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * documents before the target. 
      */
     private lookupIndividualTransform = (doc: Doc) => {
-        const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10;
+        const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll;
+        console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop)
         const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10;
         return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation);
     }
@@ -113,7 +118,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
             onClick={this.onChildClickHandler}
             renderDepth={this.props.renderDepth + 1}
             parentActive={this.props.active}
-            display={"contents"}
+            display={"contents"} // this causes an issue- this is the reason the decorations box is weird with images and web boxes
             removeDocument={this.deleteInContext}
         />;
     }
@@ -291,17 +296,21 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                 ref={this.createDashEventsTarget}
                 onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond
             >
-                DIV HERE with ref to access scroll of and adjust in getting position
-                <Grid
-                    width={this.props.PanelWidth()}
-                    nodeList={contents}
-                    layout={layout}
-                    numCols={this.props.Document.numCols as number}
-                    rowHeight={this.props.Document.rowHeight as number}
-                    setLayout={this.setLayout}
-                    flex={this.props.Document.flexGrid as boolean}
-                    scale={this.props.ScreenToLocalTransform().Scale}
-                />
+                <div className="collectionGridView-gridContainer"
+                    ref={this.containerRef}
+                    onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
+                >
+                    <Grid
+                        width={this.props.PanelWidth()}
+                        nodeList={contents}
+                        layout={layout}
+                        numCols={this.props.Document.numCols as number}
+                        rowHeight={this.props.Document.rowHeight as number}
+                        setLayout={this.setLayout}
+                        flex={this.props.Document.flexGrid as boolean}
+                        scale={this.props.ScreenToLocalTransform().Scale}
+                    />
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 673f670a6..be6c4343a 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -26,9 +26,11 @@ interface GridProps {
  */
 @observer
 export default class Grid extends React.Component<GridProps> {
+    gridRef: React.RefObject<HTMLDivElement>;
 
     constructor(props: Readonly<GridProps>) {
         super(props);
+        this.gridRef = React.createRef();
 
         this.onLayoutChange = this.onLayoutChange.bind(this);
     }
@@ -50,13 +52,12 @@ export default class Grid extends React.Component<GridProps> {
                 width={this.props.width}
                 compactType={null}
                 isDroppable={true}
-                useCSSTransforms={true}
+                // useCSSTransforms={true}
                 margin={[10, 10]}
                 onLayoutChange={this.onLayoutChange}
                 preventCollision={false} // change this to true later
-                transformScale={0.8} // 1.2/scale
-                style={{ height: "100%", overflowY: "scroll" }}
-            // draggableHandle={".documentDecorations-resizer"}
+                // transformScale={2} // 1.2/scale
+                onDrop={({ x, y, e }) => { console.log("Grid -> render -> x, y, e", x, y, e) }}
             >
                 {this.props.nodeList}
             </GridLayout >