slider added + wheel propagation prevented + fixed bug in changeListenerDisposer

3 files changed, 63 insertions, 12 deletions

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index df84cab56..d6f729598 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -264,7 +264,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
             subItems.push({ description: "Carousel", event: () => this.props.Document._viewType = CollectionViewType.Carousel, icon: "columns" });
             subItems.push({ description: "Pivot/Time", event: () => this.props.Document._viewType = CollectionViewType.Time, icon: "columns" });
             subItems.push({ description: "Map", event: () => this.props.Document._viewType = CollectionViewType.Map, icon: "globe-americas" });
-            subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "rainbow" });
+            subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "th-list" });
             switch (this.props.Document._viewType) {
                 case CollectionViewType.Freeform: {
                     subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) });
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 68612c9dc..dd4e28e33 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -28,6 +28,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
     private containerRef: React.RefObject<HTMLDivElement>;
     @observable private _scroll: number = 0;
     private changeListenerDisposer: Opt<Lambda>;
+    private rowHeight: number = 0;
 
     constructor(props: Readonly<SubCollectionViewProps>) {
         super(props);
@@ -38,7 +39,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
         this.setLayout = this.setLayout.bind(this);
         this.onSliderChange = this.onSliderChange.bind(this);
-
+        // this.deletePlaceholder = this.deletePlaceholder.bind(this);
         this.containerRef = React.createRef();
     }
 
@@ -49,7 +50,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
             // if grid view has been opened and then exited and a document has been deleted
             // this deletes the layout of that document from the layouts list
-            if (!oldValue) {
+            if (!oldValue && newValue.length) {
                 layouts.forEach(({ i }, index) => {
                     const targetId = i;
                     if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) {
@@ -88,8 +89,28 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
 
     componentWillUnmount() {
         this.changeListenerDisposer && this.changeListenerDisposer();
+        console.log("unmounted")
     }
 
+    // deletePlaceholder(placeholder: Layout, e: MouseEvent) {
+
+    //     const { left, right, top, bottom } = this.containerRef.current!.getBoundingClientRect();
+    //     if (e.clientX > right || e.clientX < left || e.clientY < top || e.clientY > bottom) {
+    //         const layouts: Layout[] = this.parsedLayoutList;
+    //         const index = layouts.findIndex((gridLayout: Layout) => gridLayout.i === placeholder.i);
+    //         index !== -1 && layouts.splice(index, 1);
+
+    //         const i = this.childLayoutPairs.findIndex(({ layout }) => placeholder.i === layout.i);
+    //         i !== -1 && this.childLayoutPairs.splice(i, 1);
+
+    //         console.log("deleting");
+
+    //         this.unStringifiedLayoutList = layouts;
+    //     }
+
+    // }
+
+
     /**
      * @returns the transform that will correctly place
      * the document decorations box, shifted to the right by
@@ -232,6 +253,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         this.props.Document.rowHeight = event.currentTarget.valueAsNumber;
     }
 
+    onSliderDown = () => {
+        this.rowHeight = NumCast(this.props.Document.rowHeight);
+    }
+
+    onSliderUp = () => {
+        const tempVal = this.props.Document.rowHeight;
+        this.props.Document.rowHeight = this.rowHeight;
+        undoBatch(() => this.props.Document.rowHeight = tempVal)();
+    }
+
     @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value }));
 
     /**
@@ -243,7 +274,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
      * the setLayout event, which makes these unintended changes permanent by writing them to the likely now resolved documents.
      */
     render() {
-
         const newEditableViewProps: EditableProps = {
             GetValue: () => "",
             SetValue: this.addTextDocument,
@@ -257,8 +287,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
         return (
             <div className="collectionGridView-contents"
                 style={{
-                    marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin),
-                    marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin),
+                    // marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin),
+                    // marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin),
                     pointerEvents: !this.props.isSelected() && this.props.renderDepth !== 0 && !this.props.ContainingCollectionView?._isChildActive && !SnappingManager.GetIsDragging() ? "none" : undefined
                 }}
                 ref={this.createDashEventsTarget}
@@ -268,9 +298,12 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                             e.stopPropagation();
                         }
                     }
-                    if (this.props.isSelected(true)) {
-                        !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault();
-                    }
+                    // is the following section needed? it prevents the slider from being easily used and I'm not sure what it's preventing
+
+                    // if (this.props.isSelected(true)) {
+                    // !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault();
+                    // }
+
                 }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond
             >
                 {showChrome ?
@@ -280,9 +313,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                 }
                 <div className="collectionGridView-gridContainer"
                     ref={this.containerRef}
-                    onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
+                    onScroll={action(e => this._scroll = e.currentTarget.scrollTop)}
+                    onWheel={e => e.stopPropagation()}
                 >
-                    <input className="rowHeightSlider" type="range" defaultValue={NumCast(this.props.Document.rowHeight)} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onPointerEnter={e => e.currentTarget.focus()} />
+                    <input className="rowHeightSlider" type="range" value={NumCast(this.props.Document.rowHeight)} onPointerDown={this.onSliderDown} onPointerUp={this.onSliderUp} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onPointerEnter={e => e.currentTarget.focus()} />
                     <Grid
                         width={this.props.PanelWidth()}
                         nodeList={childDocumentViews.length ? childDocumentViews : null}
@@ -292,6 +326,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                         rowHeight={NumCast(this.props.Document.rowHeight)}
                         setLayout={this.setLayout}
                         transformScale={this.props.ScreenToLocalTransform().Scale}
+                    // deletePlaceholder={this.deletePlaceholder}
                     />
 
                 </div>
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
index 29bafda9b..df550e3c2 100644
--- a/src/client/views/collections/collectionGrid/Grid.tsx
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -19,6 +19,7 @@ interface GridProps {
     setLayout: Function;
     transformScale: number;
     childrenDraggable: boolean;
+    // deletePlaceholder: Function;
 }
 
 /**
@@ -27,9 +28,12 @@ interface GridProps {
 @observer
 export default class Grid extends React.Component<GridProps> {
 
+    // private dragging: boolean = false;
+
     constructor(props: Readonly<GridProps>) {
         super(props);
         this.onLayoutChange = this.onLayoutChange.bind(this);
+        // this.onDrag = this.onDrag.bind(this);
     }
     /**
      * If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document.
@@ -39,8 +43,20 @@ export default class Grid extends React.Component<GridProps> {
         this.props.setLayout(layout);
     }
 
+    // onDrag(layout: Layout[],
+    //     oldItem: Layout,
+    //     newItem: Layout,
+    //     placeholder: Layout,
+    //     event: MouseEvent,
+    //     element: HTMLElement) {
+    //     this.props.deletePlaceholder(placeholder, event);
+    //     console.log("Grid -> event", event.clientX)
+
+    // }
+
     render() {
         console.log(this.props.transformScale);
+
         return (
             <GridLayout className="layout"
                 layout={this.props.layout}
@@ -54,7 +70,7 @@ export default class Grid extends React.Component<GridProps> {
                 useCSSTransforms={true}
                 onLayoutChange={this.onLayoutChange}
                 preventCollision={true}
-                transformScale={this.props.transformScale}
+                transformScale={this.props.transformScale} // still doesn't work :(
                 style={{ zIndex: 5 }}
             >
                 {this.props.nodeList}