fixed height of autoHeight masonry (tools panel was messed up showing nothing). fixed drag to hide the dragged feedback before hit testing which prevented dragging buttons from working. removed 'dropAction' from removeDropProperties on buttons

4 files changed, 12 insertions, 10 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index cae359362..202cd7b1f 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -494,7 +494,7 @@ export class CurrentUserUtils {
             activeInkPen,
             backgroundColor,
             _hideContextMenu: true,
-            removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
+            removeDropProperties: new List<string>(["_stayInCollection"]),
             _stayInCollection: true,
             dragFactory,
             clickFactory,
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 86e2d339e..e3019d288 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -127,7 +127,6 @@ export namespace DragManager {
         droppedDocuments: Doc[];
         dragDivName?: string;
         treeViewDoc?: Doc;
-        dontHideOnDrop?: boolean;
         offset: number[];
         canEmbed?: boolean;
         userDropAction: dropActionType;     // the user requested drop action -- this will be honored as specified by modifier keys
@@ -347,6 +346,7 @@ export namespace DragManager {
             dragDiv.appendChild(dragLabel);
             DragManager.Root().appendChild(dragDiv);
         }
+        dragDiv.hidden = false;
         dragLabel.style.display = "";
         const scaleXs: number[] = [];
         const scaleYs: number[] = [];
@@ -546,13 +546,14 @@ export namespace DragManager {
 
     function dispatchDrag(dragEles: HTMLElement[], e: PointerEvent, dragData: { [index: string]: any },
         xFromLeft: number, yFromTop: number, xFromRight: number, yFromBottom: number, options?: DragOptions, finishDrag?: (e: DragCompleteEvent) => void) {
-        const removed = dragData.dontHideOnDrop ? [] : dragEles.map(dragEle => {
+        const removed = dragEles.map(dragEle => {
             const ret = { ele: dragEle, w: dragEle.style.width, h: dragEle.style.height, o: dragEle.style.overflow };
             dragEle.style.width = "0";
             dragEle.style.height = "0";
             dragEle.style.overflow = "hidden";
             return ret;
         });
+        dragDiv.hidden = true;
         const target = document.elementFromPoint(e.x, e.y);
         removed.map(r => {
             r.ele.style.width = r.w;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index cf9ced849..5c28d8969 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -292,9 +292,9 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
             });
             const oldDocs = this.childDocs.length;
             if (super.onInternalDrop(e, de)) {
-                const newDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs);
+                const droppedDocs = this.childDocs.slice().filter((d: Doc, ind: number) => ind >= oldDocs); // dropping a document that wasn't in the list or one that creates something new (eg., a button that creates a note) adds a document to the end of the list
+                const newDocs = droppedDocs.length ? droppedDocs : de.complete.docDragData.droppedDocuments; // if nothing was added to the end of the list, then presumably the dropped documents were already in the list, but possibly got reordered so we use them.
 
-                //de.complete.docDragData.droppedDocuments;
                 const docs = this.childDocList;
                 DragManager.docsBeingDragged = [];
                 if (docs && newDocs.length) {
@@ -410,7 +410,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                     this.observer = new _global.ResizeObserver(action((entries: any) => {
                         if (this.layoutDoc._autoHeight && ref && this.refList.length && !SnappingManager.GetIsDragging()) {
                             const height = this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0);
-                            Doc.Layout(doc)._height = Math.max(height * NumCast(doc[this.props.fieldKey + "-height"]), NumCast(doc[this.props.fieldKey + "-height"]));
+                            Doc.Layout(doc)._height = Math.max(height, NumCast(doc[this.props.fieldKey + "-height"]));
                         }
                     }));
                     this.observer.observe(ref);
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 4d4531ba8..ce13c1d38 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -552,7 +552,8 @@ export class TreeView extends React.Component<TreeViewProps> {
         </div>;
     }
 
-    @computed get renderTitleAsText() {
+    // renders the text version of a document as the header (e.g., useful for Slide views where the "")
+    @computed get renderTitleAsHeader() {
         return <>
             {this.renderBullet}
             {this.renderTitle}
@@ -596,7 +597,7 @@ export class TreeView extends React.Component<TreeViewProps> {
         />;
     }
 
-    @computed get renderDocumentInHeader() {
+    @computed get renderDocumentAsHeader() {
         return <>
             {this.renderBullet}
             {this.renderDocument(true)}
@@ -635,11 +636,11 @@ export class TreeView extends React.Component<TreeViewProps> {
                 onKeyDown={this.onKeyDown}>
                 {hideTitle ?
                     <li className="collection-child">
-                        {this.renderBulletHeader(this.renderDocumentInHeader)}
+                        {this.renderBulletHeader(this.renderDocumentAsHeader)}
                         {this.renderBorder}
                     </li> :
                     <li className="collection-child">
-                        {this.renderBulletHeader(this.renderTitleAsText)}
+                        {this.renderBulletHeader(this.renderTitleAsHeader)}
                         {this.renderBorder}
                     </li>
                 }