From 85c052837d21eb48b3a4f1fa7c95db6703b217d1 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 22 May 2020 00:59:42 -0400
Subject: got rid of renderLock for piles.  fixed drag/drop on piles to place
 things correctly.  made piles store their layoutEngine as a field.  fixed
 layout  of piled docs.

---
 .../views/collections/CollectionPileView.tsx       | 59 ++++++++++++----------
 1 file changed, 31 insertions(+), 28 deletions(-)

(limited to 'src/client/views/collections/CollectionPileView.tsx')

diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx
index e3bcf2a21..020a87b2e 100644
--- a/src/client/views/collections/CollectionPileView.tsx
+++ b/src/client/views/collections/CollectionPileView.tsx
@@ -1,18 +1,17 @@
 import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { HeightSym, Opt, WidthSym } from "../../../fields/Doc";
+import { HeightSym, Opt, WidthSym, Doc } from "../../../fields/Doc";
 import { ScriptField } from "../../../fields/ScriptField";
 import { BoolCast, NumCast, StrCast } from "../../../fields/Types";
-import { ContextMenu } from "../ContextMenu";
-import { ContextMenuProps } from "../ContextMenuItem";
 import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
 import { CollectionSubView } from "./CollectionSubView";
 import "./CollectionPileView.scss";
 import React = require("react");
 import { setupMoveUpEvents, emptyFunction, returnFalse } from "../../../Utils";
 import { SelectionManager } from "../../util/SelectionManager";
-import { UndoManager } from "../../util/UndoManager";
+import { UndoManager, undoBatch } from "../../util/UndoManager";
 import { SnappingManager } from "../../util/SnappingManager";
+import { DragManager } from "../../util/DragManager";
 
 @observer
 export class CollectionPileView extends CollectionSubView(doc => doc) {
@@ -20,10 +19,12 @@ export class CollectionPileView extends CollectionSubView(doc => doc) {
     _doubleTap: boolean | undefined = false;
     _originalChrome: string = "";
     @observable _contentsActive = true;
-    @observable _layoutEngine = "pass";
     @observable _collapsed: boolean = false;
     @observable _childClickedScript: Opt<ScriptField>;
     componentDidMount() {
+        if (this.layoutEngine() !== "pass" && this.layoutEngine() !== "starburst") {
+            this.Document._layoutEngine = "pass";
+        }
         this._originalChrome = StrCast(this.layoutDoc._chromeStatus);
         this.layoutDoc._chromeStatus = "disabled";
         this.layoutDoc.hideFilterView = true;
@@ -33,49 +34,54 @@ export class CollectionPileView extends CollectionSubView(doc => doc) {
         this.layoutDoc._chromeStatus = this._originalChrome;
     }
 
-    layoutEngine = () => this._layoutEngine;
+    layoutEngine = () => StrCast(this.Document._layoutEngine);
 
     @computed get contents() {
-        return <div className="collectionPileView-innards" style={{
-            width: "100%",
-            pointerEvents: this.layoutEngine() !== "pass" && (this.props.active() || this.layoutEngine() === "starburst") ? undefined : "none"
-        }} >
+        return <div className="collectionPileView-innards" style={{ pointerEvents: this.layoutEngine() === "starburst" ? undefined : "none" }} >
             <CollectionFreeFormView {...this.props} layoutEngine={this.layoutEngine} />
         </div>;
     }
-
-    specificMenu = (e: React.MouseEvent) => {
-        const layoutItems: ContextMenuProps[] = [];
-        const doc = this.props.Document;
-
-        ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "eye" });
-    }
-
     toggleStarburst = action(() => {
-        if (this._layoutEngine === 'starburst') {
+        if (this.layoutEngine() === 'starburst') {
             const defaultSize = 110;
             this.layoutDoc._overflow = undefined;
+            this.childDocs.forEach(d => Doc.iconify(d));
             this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[WidthSym]() / 2 - NumCast(this.layoutDoc._starburstPileWidth, defaultSize) / 2;
             this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[HeightSym]() / 2 - NumCast(this.layoutDoc._starburstPileHeight, defaultSize) / 2;
             this.layoutDoc._width = NumCast(this.layoutDoc._starburstPileWidth, defaultSize);
             this.layoutDoc._height = NumCast(this.layoutDoc._starburstPileHeight, defaultSize);
-            this._layoutEngine = 'pass';
+            Doc.pileup(this.childDocs);
+            this.layoutDoc._panX = 0;
+            this.layoutDoc._panY = -10;
+            this.props.Document._layoutEngine = 'pass';
         } else {
             const defaultSize = 25;
             this.layoutDoc._overflow = 'visible';
             !this.layoutDoc._starburstRadius && (this.layoutDoc._starburstRadius = 500);
             !this.layoutDoc._starburstDocScale && (this.layoutDoc._starburstDocScale = 2.5);
-            if (this._layoutEngine === 'pass') {
+            if (this.layoutEngine() === 'pass') {
                 this.rootDoc.x = NumCast(this.rootDoc.x) + this.layoutDoc[WidthSym]() / 2 - defaultSize / 2;
                 this.rootDoc.y = NumCast(this.rootDoc.y) + this.layoutDoc[HeightSym]() / 2 - defaultSize / 2;
                 this.layoutDoc._starburstPileWidth = this.layoutDoc[WidthSym]();
                 this.layoutDoc._starburstPileHeight = this.layoutDoc[HeightSym]();
             }
+            this.layoutDoc._panX = this.layoutDoc._panY = 0;
             this.layoutDoc._width = this.layoutDoc._height = defaultSize;
-            this._layoutEngine = 'starburst';
+            this.props.Document._layoutEngine = 'starburst';
         }
     });
 
+    @undoBatch
+    @action
+    onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        if (super.onInternalDrop(e, de)) {
+            if (de.complete.docDragData) {
+                Doc.pileup(this.childDocs);
+            }
+        }
+        return true;
+    }
+
     _undoBatch: UndoManager.Batch | undefined;
     pointerDown = (e: React.PointerEvent) => {
         let dist = 0;
@@ -107,20 +113,17 @@ export class CollectionPileView extends CollectionSubView(doc => doc) {
     }
 
     onClick = (e: React.MouseEvent) => {
-        if (e.button === 0 && (this._doubleTap || this.layoutEngine() === "starburst")) {
+        if (e.button === 0 && this._doubleTap) {
             SelectionManager.DeselectAll();
             this.toggleStarburst();
             e.stopPropagation();
         }
-        // else if (this.layoutEngine() === "pass") {
-        //     runInAction(() => this._contentsActive = false);
-        //     setTimeout(action(() => this._contentsActive = true), 300);
-        // }
     }
 
     render() {
 
-        return <div className={"collectionPileView"} onContextMenu={this.specificMenu} onClick={this.onClick} onPointerDown={this.pointerDown}
+        return <div className={"collectionPileView"} onClick={this.onClick} onPointerDown={this.pointerDown}
+            ref={this.createDashEventsTarget}
             style={{ width: this.props.PanelWidth(), height: `calc(100%  - ${this.props.Document._chromeStatus === "enabled" ? 51 : 0}px)` }}>
             {this.contents}
         </div>;
-- 
cgit v1.2.3-70-g09d2

