From 325aa35c4bd5f57240ead2ec5f22ea9c4f19d522 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 15 Aug 2024 23:16:09 -0400
Subject: fixed dropping on multi col/row collections with margins

---
 .../CollectionMulticolumnView.scss                 | 69 +++++++++-------
 .../CollectionMulticolumnView.tsx                  | 94 +++++++++++-----------
 .../CollectionMultirowView.scss                    | 49 ++++++-----
 .../CollectionMultirowView.tsx                     | 31 +++----
 4 files changed, 132 insertions(+), 111 deletions(-)

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

diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
index f983fd815..06d78c39e 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.scss
@@ -1,43 +1,50 @@
-.collectionMulticolumnView_contents {
-    display: flex;
-    //overflow: hidden;  // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template)
-    width: 100%;
+.collectionMulticolumnView_drop {
     height: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
 
-    .document-wrapper {
+    .collectionMulticolumnView_contents {
         display: flex;
-        flex-direction: column;
+        //overflow: hidden;  // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template)
         width: 100%;
-        align-items: center;
-        position: relative;
-        > .iconButton-container {
-            top: 0;
-            left: 0;
-            position: absolute;
-        }
-
-        .contentFittingDocumentView {
-            margin: auto;
-        }
+        height: 100%;
 
-        .label-wrapper {
+        .document-wrapper {
             display: flex;
-            flex-direction: row;
-            justify-content: center;
-            height: 20px;
+            flex-direction: column;
+            width: 100%;
+            align-items: center;
+            position: relative;
+            > .iconButton-container {
+                top: 0;
+                left: 0;
+                position: absolute;
+            }
+
+            .contentFittingDocumentView {
+                margin: auto;
+            }
+
+            .label-wrapper {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                height: 20px;
+            }
         }
-    }
 
-    .multiColumnResizer {
-        cursor: ew-resize;
-        transition: 0.5s opacity ease;
-        display: flex;
-        flex-direction: column;
+        .multiColumnResizer {
+            cursor: ew-resize;
+            transition: 0.5s opacity ease;
+            display: flex;
+            flex-direction: column;
 
-        .multiColumnResizer-hdl {
-            width: 100%;
-            height: 100%;
-            transition: 0.5s background-color ease;
+            .multiColumnResizer-hdl {
+                width: 100%;
+                height: 100%;
+                transition: 0.5s background-color ease;
+            }
         }
     }
 }
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
index 5125bdb6c..c6884d866 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx
@@ -17,6 +17,7 @@ import './CollectionMulticolumnView.scss';
 import ResizeBar from './MulticolumnResizer';
 import WidthLabel from './MulticolumnWidthLabel';
 import { dropActionType } from '../../../util/DropActionTypes';
+import { SnappingManager } from '../../../util/SnappingManager';
 
 interface WidthSpecifier {
     magnitude: number;
@@ -211,15 +212,14 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         return Transform.Identity();
     };
 
-    @undoBatch
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         let dropInd = -1;
-        if (de.complete.docDragData && this._mainCont) {
+        if (de.complete.docDragData && this._contRef.current) {
             let curInd = -1;
             de.complete.docDragData?.droppedDocuments.forEach(d => {
                 curInd = this.childDocs.indexOf(d);
             });
-            Array.from(this._mainCont.children).forEach((child, index) => {
+            Array.from(this._contRef.current.children).forEach((child, index) => {
                 const brect = child.getBoundingClientRect();
                 if (brect.x < de.x && brect.x + brect.width > de.x) {
                     if (curInd !== -1 && curInd === Math.floor(index / 2)) {
@@ -317,11 +317,11 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         this.childLayouts.forEach((layout, i) => {
             collector.push(
                 // eslint-disable-next-line react/no-array-index-key
-                <Tooltip title={'Tab: ' + StrCast(layout.title)} key={'wrapper' + i}>
+                <Tooltip title={'Doc: ' + StrCast(layout.title)} key={'wrapper' + i}>
                     <div className="document-wrapper" style={{ flexDirection: 'column', width: this.lookupPixels(layout) }}>
                         {this.getDisplayDoc(layout)}
                         {this.layoutDoc._chromeHidden ? null : (
-                            <Button tooltip="Remove document from header bar" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(() => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} />
+                            <Button tooltip="Remove document" icon={<FontAwesomeIcon icon="times" size="lg" />} onClick={undoable(() => this._props.removeDocument?.(layout), 'close doc')} color={SettingsManager.userColor} />
                         )}
                         <WidthLabel layout={layout} collectionDoc={this.Document} />
                     </div>
@@ -343,49 +343,53 @@ export class CollectionMulticolumnView extends CollectionSubView() {
         return collector;
     }
 
+    _contRef = React.createRef<HTMLDivElement>();
     render() {
         return (
-            <div
-                className="collectionMulticolumnView_contents"
-                ref={this.createDashEventsTarget}
-                style={{
-                    width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`,
-                    height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`,
-                    marginLeft: NumCast(this.Document._xMargin),
-                    marginRight: NumCast(this.Document._xMargin),
-                    marginTop: NumCast(this.Document._yMargin),
-                    marginBottom: NumCast(this.Document._yMargin),
-                }}>
-                {this.contents}
-                {!this._startIndex ? null : (
-                    <Tooltip title="scroll back">
-                        <div
-                            style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }}
-                            onClick={action(() => {
-                                this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown);
-                            })}>
-                            <Button
-                                tooltip="Scroll back"
-                                icon={<FontAwesomeIcon icon="chevron-left" size="lg" />}
+            <div className="collectionMulticolumnView_drop" ref={this.createDashEventsTarget}>
+                <div
+                    className="collectionMulticolumnView_contents"
+                    ref={this._contRef}
+                    style={{
+                        pointerEvents: this._props.isContentActive() && SnappingManager.IsDragging ? 'all' : this._props.pointerEvents?.(),
+                        width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`,
+                        height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`,
+                        marginLeft: NumCast(this.Document._xMargin),
+                        marginRight: NumCast(this.Document._xMargin),
+                        marginTop: NumCast(this.Document._yMargin),
+                        marginBottom: NumCast(this.Document._yMargin),
+                    }}>
+                    {this.contents}
+                    {!this._startIndex ? null : (
+                        <Tooltip title="scroll back">
+                            <div
+                                style={{ position: 'absolute', bottom: 0, left: 0, background: SettingsManager.userVariantColor }}
                                 onClick={action(() => {
-                                    this._startIndex = Math.max(0, this._startIndex - this.maxShown);
-                                })}
-                                color={SettingsManager.userColor}
-                            />
-                        </div>
-                    </Tooltip>
-                )}
-                {this._startIndex > this.childLayoutPairs.length - 1 || !this.maxShown ? null : (
-                    <Tooltip title="scroll forward">
-                        <div
-                            style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }}
-                            onClick={action(() => {
-                                this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown);
-                            })}>
-                            <IconButton icon={<FaChevronRight />} color={SettingsManager.userColor} />
-                        </div>
-                    </Tooltip>
-                )}
+                                    this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown);
+                                })}>
+                                <Button
+                                    tooltip="Scroll back"
+                                    icon={<FontAwesomeIcon icon="chevron-left" size="lg" />}
+                                    onClick={action(() => {
+                                        this._startIndex = Math.max(0, this._startIndex - this.maxShown);
+                                    })}
+                                    color={SettingsManager.userColor}
+                                />
+                            </div>
+                        </Tooltip>
+                    )}
+                    {this._startIndex > this.childLayoutPairs.length - 1 || !this.maxShown ? null : (
+                        <Tooltip title="scroll forward">
+                            <div
+                                style={{ position: 'absolute', bottom: 0, right: 0, background: SettingsManager.userVariantColor }}
+                                onClick={action(() => {
+                                    this._startIndex = Math.min(this.childLayoutPairs.length - 1, this._startIndex + this.maxShown);
+                                })}>
+                                <IconButton icon={<FaChevronRight />} color={SettingsManager.userColor} />
+                            </div>
+                        </Tooltip>
+                    )}
+                </div>
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
index f44eacb2a..0d49fabaa 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.scss
@@ -1,34 +1,41 @@
-.collectionMultirowView_contents {
-    display: flex;
-    //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template)
-    width: 100%;
+.collectionMultirowView_drop {
     height: 100%;
-    flex-direction: column;
+    top: 0;
+    left: 0;
+    position: absolute;
 
-    .document-wrapper {
+    .collectionMultirowView_contents {
         display: flex;
-        flex-direction: row;
+        //overflow: hidden; // bcz: turned of to allow highlighting to appear when there is no border (e.g, for a component of the slide template)
+        width: 100%;
         height: 100%;
-        align-items: center;
+        flex-direction: column;
 
-        .label-wrapper {
+        .document-wrapper {
             display: flex;
             flex-direction: row;
-            justify-content: center;
-            height: 20px;
+            height: 100%;
+            align-items: center;
+
+            .label-wrapper {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                height: 20px;
+            }
         }
-    }
 
-    .multiRowResizer {
-        cursor: ns-resize;
-        transition: 0.5s opacity ease;
-        display: flex;
-        flex-direction: row;
+        .multiRowResizer {
+            cursor: ns-resize;
+            transition: 0.5s opacity ease;
+            display: flex;
+            flex-direction: row;
 
-        .multiRowResizer-hdl {
-            width: 100%;
-            height: 100%;
-            transition: 0.5s background-color ease;
+            .multiRowResizer-hdl {
+                width: 100%;
+                height: 100%;
+                transition: 0.5s background-color ease;
+            }
         }
     }
 }
diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
index 2833ff2f8..04b85e182 100644
--- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
+++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx
@@ -196,12 +196,12 @@ export class CollectionMultirowView extends CollectionSubView() {
     @undoBatch
     onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
         let dropInd = -1;
-        if (de.complete.docDragData && this._mainCont) {
+        if (de.complete.docDragData && this._contRef.current) {
             let curInd = -1;
             de.complete.docDragData?.droppedDocuments.forEach(d => {
                 curInd = this.childDocs.indexOf(d);
             });
-            Array.from(this._mainCont.children).forEach((child, index) => {
+            Array.from(this._contRef.current.children).forEach((child, index) => {
                 const brect = child.getBoundingClientRect();
                 if (brect.y < de.y && brect.y + brect.height > de.y) {
                     if (curInd !== -1 && curInd === Math.floor(index / 2)) {
@@ -318,20 +318,23 @@ export class CollectionMultirowView extends CollectionSubView() {
         return collector;
     }
 
+    _contRef = React.createRef<HTMLDivElement>();
     render() {
         return (
-            <div
-                className="collectionMultirowView_contents"
-                style={{
-                    width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`,
-                    height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`,
-                    marginLeft: NumCast(this.Document._xMargin),
-                    marginRight: NumCast(this.Document._xMargin),
-                    marginTop: NumCast(this.Document._yMargin),
-                    marginBottom: NumCast(this.Document._yMargin),
-                }}
-                ref={this.createDashEventsTarget}>
-                {this.contents}
+            <div className="collectionMultirowView_drop" ref={this.createDashEventsTarget}>
+                <div
+                    ref={this._contRef}
+                    className="collectionMultirowView_contents"
+                    style={{
+                        width: `calc(100% - ${2 * NumCast(this.Document._xMargin)}px)`,
+                        height: `calc(100% - ${2 * NumCast(this.Document._yMargin)}px)`,
+                        marginLeft: NumCast(this.Document._xMargin),
+                        marginRight: NumCast(this.Document._xMargin),
+                        marginTop: NumCast(this.Document._yMargin),
+                        marginBottom: NumCast(this.Document._yMargin),
+                    }}>
+                    {this.contents}
+                </div>
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2