cleaned up pileView to feel somewhat usable by tweaking icon sizes, and making icon<->doc toggleable by just clicking.

2 files changed, 13 insertions, 6 deletions

diff --git a/src/client/views/collections/CollectionPileView.tsx b/src/client/views/collections/CollectionPileView.tsx
index 0ca0a463e..3d5552f81 100644
--- a/src/client/views/collections/CollectionPileView.tsx
+++ b/src/client/views/collections/CollectionPileView.tsx
@@ -11,6 +11,7 @@ import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormV
 import "./CollectionPileView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import React = require("react");
+import { ScriptField } from "../../../fields/ScriptField";
 
 @observer
 export class CollectionPileView extends CollectionSubView() {
@@ -47,6 +48,10 @@ export class CollectionPileView extends CollectionSubView() {
         return this.props.moveDocument?.(doc, targetCollection, addDoc) || false;
     }
 
+    toggleIcon = () => {
+        return ScriptField.MakeScript("documentView.iconify()", { documentView: "any" });
+    }
+
     // returns the contents of the pileup in a CollectionFreeFormView
     @computed get contents() {
         const isStarburst = this.layoutEngine() === "starburst";
@@ -60,6 +65,7 @@ export class CollectionPileView extends CollectionSubView() {
                 layoutEngine={this.layoutEngine}
                 childDocumentsActive={isStarburst ? returnTrue : undefined}
                 addDocument={this.addPileDoc}
+                childClickScript={this.toggleIcon()}
                 moveDocument={this.removePileDoc} />
         </div>;
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index 9fed82dae..f9345e33f 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -113,16 +113,17 @@ export function computerStarburstLayout(
 ) {
     const docMap = new Map<string, PoolData>();
     const burstRadius = [NumCast(pivotDoc._starburstRadius, panelDim[0]), NumCast(pivotDoc._starburstRadius, panelDim[1])];
-    const docScale = NumCast(pivotDoc._starburstDocScale);
-    const docSize = docScale * 100; // assume a icon sized at 100
+    const docSize = 75; // assume a icon sized at 100
     const scaleDim = [burstRadius[0] + docSize, burstRadius[1] + docSize];
     childPairs.forEach(({ layout, data }, i) => {
+        const docSize = layout.layoutKey === "layout_icon" ? 75 : 400; // assume a icon sized at 100
         const deg = i / childPairs.length * Math.PI * 2;
         docMap.set(layout[Id], {
-            x: Math.cos(deg) * (burstRadius[0] / 3) - docScale * layout[WidthSym]() / 2,
-            y: Math.sin(deg) * (burstRadius[1] / 3) - docScale * layout[HeightSym]() / 2,
-            width: docScale * layout[WidthSym](),
-            height: docScale * layout[HeightSym](),
+            x: Math.cos(deg) * (burstRadius[0] / 3) - docSize / 2,
+            y: Math.sin(deg) * (burstRadius[1] / 3) - docSize * layout[HeightSym]() / layout[WidthSym]() / 2,
+            width: docSize,//layout[WidthSym](),
+            height: docSize * layout[HeightSym]() / layout[WidthSym](),
+            zIndex: NumCast(layout.zIndex),
             pair: { layout, data },
             replica: ""
         });