transformations are being unbelieveably silly rn

5 files changed, 316 insertions, 162 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1c57c5d63..77cc5f51e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -499,9 +499,10 @@ export class DocumentOptions {
     userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)');
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
 
-    card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
-    card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
-    card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
+    cardSort?: STRt = new StrInfo('way cards are sorted in deck view');
+    // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
+    // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
+    // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
 
 
 }
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 88fcf098b..767d6c635 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -713,9 +713,11 @@ pie title Minerals in my tap water
     }
     static cardTools(): Button[] {
         return [
-            { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Links",   icon:"link", toolTip:"Sort by its links",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"links",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+
 
         ]
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index ff9c0a569..aafc3b556 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -2,26 +2,43 @@
 
 .collectionCardView-outer {
     height: 100%;
+    width: 100%;
     position: relative;
     background-color: white;
     overflow: hidden;
 }
 
 .card-wrapper {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr); /* Creates 10 columns, adjust number as needed */
+    // width: 100%;
+
     position: absolute;
     align-items: center;
+    justify-items: center;
+    justify-content: center;
+
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
-.card-row{
-    display: flex;
-    position: absolute;
-    align-items: center;
-    transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+// .card-wrapper::after {
+//     content: "";
+//     width: 100%; /* Forces wrapping */
+// }
 
+// .card-wrapper > .card-item:nth-child(10n)::after {
+//     content: "";
+//     width: 100%; /* Forces wrapping after every 10th item */
+// }
 
-}
+// .card-row{
+//     display: flex;
+//     position: absolute;
+//     align-items: center;
+//     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+
+// }
 
 .card-item-active,
 .card-item {
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index ab7aac267..bda72b2d6 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils';
 import { Doc, DocListCast, Field } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { NumCast, ScriptCast, StrCast, BoolCast } from '../../../fields/Types';
+import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
 import { StyleProp } from '../StyleProvider';
@@ -12,7 +12,10 @@ import { DocumentView } from '../nodes/DocumentView';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { Transform } from '../../util/Transform';
+import { LinkManager } from '../../util/LinkManager';
 // import Card from 'react-bootstrap/Card';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { forEach } from 'lodash';
 
 
 @observer
@@ -21,6 +24,10 @@ export class CollectionCardView extends CollectionSubView() {
 
     @observable hoveredNodeIndex = -1;
 
+    @computed get myChildLayoutPairs(){
+        return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK)
+    }
+
     @action
     setHoveredNodeIndex = (index: number) => {
         if (!this.isSelected(index)) {
@@ -38,10 +45,10 @@ export class CollectionCardView extends CollectionSubView() {
     @action
     setSelectedNodeIndex = (index: number) => {
         const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-        console.log('goodnight');
+        // console.log('goodnight');
 
         if (SelectionManager.IsSelected(docs[index])) {
-            console.log('good mornings');
+            // console.log('good mornings');
             this.setSelectedNodeIndex(index);
         }
     };
@@ -53,12 +60,11 @@ export class CollectionCardView extends CollectionSubView() {
     };
 
     inactiveDocs = () => {
-        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-
+        const docs = this.myChildLayoutPairs;
+        return docs.filter(d => !SelectionManager.IsSelected(d.layout));
+    };
 
 
-        return docs.filter(d => !SelectionManager.IsSelected(d));
-    };
 
     middleIndex = Math.floor(this.inactiveDocs().length / 2);
 
@@ -81,12 +87,21 @@ export class CollectionCardView extends CollectionSubView() {
         }
     };
 
+
+
     childDocumentWidth = 600; // target width of a Doc...
     /**
      * how much to scale down the contents of the view so that everything will fit
      */
     @computed get fitContentScale() {
-        return (this.childDocumentWidth * this.childLayoutPairs.length) / this._props.PanelWidth();
+        if (this.myChildLayoutPairs.length< this.maxRowCount){
+            length = this.myChildLayoutPairs.length
+        }
+
+        else{
+            length = this.maxRowCount
+        }
+        return (this.childDocumentWidth * length) / this._props.PanelWidth();
     }
     panelWidth = () => this.childDocumentWidth;
     panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width);
@@ -95,7 +110,7 @@ export class CollectionCardView extends CollectionSubView() {
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
     rotate = (amCards: number, index: number) => {
-        console.log(amCards + "wtf")
+        // console.log(amCards + "wtf")
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
         const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2)));
 
@@ -113,31 +128,39 @@ export class CollectionCardView extends CollectionSubView() {
         return possRotate;
     };
 
-    translateY = (amCards: number, index: number) => {
+    translateY = (amCards: number, index: number, realIndex: number) => {
         const evenOdd = amCards % 2;
         const apex = (amCards - evenOdd) / 2;
         const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25);
+        let rowOffset = 0
 
-        console.log('steo' + stepMag);
+        if (realIndex > this.maxRowCount -1){
+            // 11 - 1 = 10
+            rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount)
+        }
+
+        
+
+        // console.log('steo' + stepMag);
 
         if (evenOdd == 1 || index < apex - 1) {
-            console.log('hi' + index);
-            return Math.abs(stepMag * (apex - index));
+            // console.log('hi' + index);
+            return Math.abs(stepMag * (apex - index)) - rowOffset;
         } else {
             if (index == apex || index == apex - 1) {
-                return 0;
+                return 0 - rowOffset;
             }
 
-            return Math.abs(stepMag * (apex - index - 1));
+            return Math.abs(stepMag * (apex - index - 1)) - rowOffset;
         }
     };
 
-    translateOverFlowY = (amCards: number, index: number) => {
-        if (amCards > 8 && index > amCards / 2) {
-            return 100;
-        }
-        return 0;
-    };
+    // translateOverFlowY = (amCards: number, index: number) => {
+    //     if (amCards > 8 && index > amCards / 2) {
+    //         return 100;
+    //     }
+    //     return 0;
+    // };
 
     translateSelected = (index: number): number => {
         if (this.isSelected(index)) {
@@ -161,78 +184,190 @@ export class CollectionCardView extends CollectionSubView() {
     @computed get sortedDocsType() {
         
         const desc = BoolCast(this.layoutDoc.sortDesc);
-
         let sorted = []
+        let docs = []
 
-        for (let i=0; i< this.childLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
-            sorted[i] = this.childLayoutPairs[i]
+        for (let i=0; i< this.myChildLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
+            sorted[i] = this.myChildLayoutPairs[i]
         }
 
+        switch(this._props.Document.cardSort){
+            case "type":
+                 // Copy and sort documents by type 
+                return this.sort(sorted, "type", desc)
+            case "color":
+                return this.sort(sorted, "color", desc)
+            case "links":
+                console.log("hi")
+
+                   let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout)
+
+                   console.log(links)
+                   
+                   // }
 
-        // Copy and sort documents by type
-        const docs = sorted.sort((docA, docB) => {
-            const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
-            const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
+            default:
+                docs =  this.myChildLayoutPairs
+                return {docs}
+
+
+                
+        }
+    }
+
+    
+    
+
+    hexToHsv = (hex: string): [number, number, number] => {
+        if (!hex) return [0, 0, 0]; // Default to black if hex is not defined
+        const r = parseInt(hex.slice(1, 3), 16) / 255;
+        const g = parseInt(hex.slice(3, 5), 16) / 255;
+        const b = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        const d = max - min;
+        let h: number;
+        const s = (max === 0 ? 0 : d / max);
+        const v = max;
+
+        switch (max) {
+            case min: h = 0; break;
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+            default: h = 0; break;
+        }
+        h /= 6;
+        return [h, s, v];
+    };
+
+    
+
+    sort = (docs: {layout: Doc;  data: Doc; }[], sortType: string, isDesc: boolean) => {
+
+        docs.sort((docA, docB) => {
+            let typeA;
+            let typeB             
+
+            switch(sortType) {
+                case "color":
+                    typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string
+                    typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string
+                    break
+
+                default:
+                    typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
+                    typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
+                    break
+            }
+            
 
             // Perform a basic string comparison if types are strings
             let out = 0;
             if (typeA < typeB) out = -1;
             if (typeA > typeB) out = 1;
-            if (desc) out *= -1; // Reverse the sort order if descending is true
+            if (isDesc) out *= -1; // Reverse the sort order if descending is true
             return out;
-        });
-        
+            });
 
-        return { docs };
+        return {docs}
     }
 
     
 
+    // @computed get cards(){
+
+
+    // }
+
+    
+    displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
+        return (
+            <DocumentView
+                {...this._props}
+                ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
+                Document={childPair.layout}
+                TemplateDataDocument={childPair.data}
+                // onClickScript={this.toggleIcon}
+                //suppressSetHeight={true}
+                NativeWidth={returnZero}
+                NativeHeight={returnZero}
+                layout_fitWidth={returnFalse}
+                onDoubleClickScript={this.onChildDoubleClick}
+                renderDepth={this._props.renderDepth + 1}
+                LayoutTemplate={this._props.childLayoutTemplate}
+                LayoutTemplateString={this._props.childLayoutString}
+                // focus={this.focus}
+                ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
+                isContentActive={this.isChildContentActive}
+                isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+                PanelWidth={this.panelWidth}
+                PanelHeight={this.panelHeight(childPair.layout)}
+            />
+        );
+    };
    
 
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
+    @observable maxRowCount = 10;
+
+    overflowAmCardsCalc(index: number) {
+        if (this.inactiveDocs().length < this.maxRowCount){
+            return this.inactiveDocs().length
+        }
+        // 13 - 3 = 10 
+        const totalCards = this.inactiveDocs().length
+        // if 9 or less
+        if ( index < ((totalCards - (totalCards % 10)))){
+            return this.maxRowCount
+        }
+        //(3)
+        return totalCards % 10
+
+    }
+
+    overflowIndexCalc(realIndex: number) {
+        if (realIndex < 10){
+            return realIndex
+        }
+
+        return realIndex % 10
+
+    }
+
+    translateOverflowX(realIndex: number, calcRowCards: number){
+        if (realIndex < this.maxRowCount){
+            return 0
+        }
+
+        return (10 - calcRowCards) * (this.panelWidth()/2)
+
+
+
+
+    }
+
     @computed get contentSorted() {
         const sortedDocs = this.sortedDocsType.docs; 
-        const amCards = this.inactiveDocs().length; 
-
-        const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
-            return (
-                <DocumentView
-                    {...this._props}
-                    ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
-                    Document={childPair.layout}
-                    TemplateDataDocument={childPair.data}
-                    NativeWidth={returnZero}
-                    NativeHeight={returnZero}
-                    layout_fitWidth={returnFalse}
-                    onDoubleClickScript={this.onChildDoubleClick}
-                    renderDepth={this._props.renderDepth + 1}
-                    LayoutTemplate={this._props.childLayoutTemplate}
-                    LayoutTemplateString={this._props.childLayoutString}
-                    ScreenToLocalTransform={screenToLocalTransform}
-                    isContentActive={this.isChildContentActive}
-                    isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-                    PanelWidth={this.panelWidth}
-                    PanelHeight={this.panelHeight(childPair.layout)}
-                />
-            );
-        };
+        // const amCards = this.inactiveDocs().length; 
 
         // Map sorted documents to their rendered components
         return sortedDocs.map((childPair, index) => {
             // const childPair = { layout: doc, data: doc }; 
-            const isHovered = this.hoveredNodeIndex === index;
-            const inactiveIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
-            const isSelected = SelectionManager.IsSelected(childPair.layout);
 
 
+            const isHovered = this.hoveredNodeIndex === index;
+            const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
+            const calcRowIndex = this.overflowIndexCalc(realIndex)
+
+            const amCards = this.overflowAmCardsCalc(realIndex)
 
+            const isSelected = SelectionManager.IsSelected(childPair.layout);
 
             const childScreenToLocal = () => {
                 const dref = this.docRefs.get(childPair.layout);
                 const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
-                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
+                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0);
             };
 
             return (
@@ -243,111 +378,105 @@ export class CollectionCardView extends CollectionSubView() {
                         width: this.panelWidth(),
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
-                            rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg)
-                            translateY(${isHovered ? this.translateHover(inactiveIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
-                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
+                            rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
+                            translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px)
+                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px)
                             scale(${isSelected ? 1.25 : 1})
                         `,
                     }}
                     onMouseEnter={() => this.setHoveredNodeIndex(index)}>
-                    {displayDoc(childPair, childScreenToLocal)}
+                    {this.displayDoc(childPair, childScreenToLocal)}
+
+                    {/* <circle r="45" cx="50" cy="50" fill="red" /> */}
+
                 </div>
             );
         });
     }
 
-    @computed get content() {
-        // const currentIndex = NumCast(this.layoutDoc._carousel_index);
-        const amCards = this.inactiveDocs().length;
-        console.log(amCards + "lol")
-        // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
-
-        // const myInactives =
-        const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
-            return (
-                <DocumentView
-                    {...this._props}
-                    ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
-                    Document={childPair.layout}
-                    TemplateDataDocument={childPair.data}
-                    // onClickScript={this.toggleIcon}
-                    //suppressSetHeight={true}
-                    NativeWidth={returnZero}
-                    NativeHeight={returnZero}
-                    layout_fitWidth={returnFalse}
-                    onDoubleClickScript={this.onChildDoubleClick}
-                    renderDepth={this._props.renderDepth + 1}
-                    LayoutTemplate={this._props.childLayoutTemplate}
-                    LayoutTemplateString={this._props.childLayoutString}
-                    // focus={this.focus}
-                    ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
-                    isContentActive={this.isChildContentActive}
-                    isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-                    PanelWidth={this.panelWidth}
-                    PanelHeight={this.panelHeight(childPair.layout)}
-                />
-            );
-        };
+    
 
-        return this.childLayoutPairs.map((childPair, index) => {
-            const isSelected = this.isSelected(index);
-            const isHovered = this.hoveredNodeIndex === index;
-            const isOverflow = amCards > 8 && index > amCards / 2;
-            // const  inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
-            const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
-            // const yOffset = this.verticalOffset(index);
+    // @computed get content() {
+    //     // const currentIndex = NumCast(this.layoutDoc._carousel_index);
+    //     const amCards = this.inactiveDocs().length;
+    //     console.log(amCards + "lol")
+    //     // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
 
-            const childScreenToLocal = () => {
-                const dref = this.docRefs.get(childPair.layout);
-                const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
-                // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
-                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
-            };
+    //     // const myInactives =
+        
 
-            return (
-                <div
-                    key={childPair.layout[Id]}
-                    className={`card-item${isSelected ? '-active' : ''}`}
-                    style={{
-                        width: this.panelWidth(),
-                        height: this.panelHeight(childPair.layout)(),
-                        transform: `
-                            rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
-                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
-                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
-                            scale(${isSelected ? 1.25 : 1})
+    //     return this.myChildLayoutPairs.map((childPair, index) => {
+    //         const isSelected = this.isSelected(index);
+    //         const isHovered = this.hoveredNodeIndex === index;
+    //         const isOverflow = amCards > 8 && index > amCards / 2;
+    //         // const  inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
+    //         const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
+    //         // const yOffset = this.verticalOffset(index);
+
+    //         const childScreenToLocal = () => {
+    //             const dref = this.docRefs.get(childPair.layout);
+    //             const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
+    //             // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
+    //             return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
+    //         };
+
+    //         return (
+    //             <div
+    //                 key={childPair.layout[Id]}
+    //                 className={`card-item${isSelected ? '-active' : ''}`}
+    //                 style={{
+    //                     width: this.panelWidth(),
+    //                     height: this.panelHeight(childPair.layout)(),
+    //                     transform: `
+    //                         rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
+    //                         translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
+    //                         translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
+    //                         scale(${isSelected ? 1.25 : 1})
                             
-                            `, //scale has to be applied last or selected offset gets messed up
-                    }}
-                    // onClick={() => this.setSelectedNodeIndex(index)}
+    //                         `, //scale has to be applied last or selected offset gets messed up
+    //                 }}
+    //                 // onClick={() => this.setSelectedNodeIndex(index)}
 
-                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
-                    {/* {this.lol(childPair.data, index)} */}
+    //                 onMouseEnter={() => this.setHoveredNodeIndex(index)}>
+    //                 {/* {this.lol(childPair.data, index)} */}
 
-                    {displayDoc(childPair, childScreenToLocal)}
-                </div>
-            );
-        });
-    }
+    //                 {this.displayDoc(childPair, childScreenToLocal)}
+    //             </div>
+    //         );
+    //     });
+    // }
 
     @computed get translateWrapperX() {
-        if (this.inactiveDocs().length != this.childLayoutPairs.length) {
-            return this.panelWidth() / 2;
-        }
 
-        return 0;
-    }
+        let translate = 0
 
-    @computed get renderCardsSort(){
-        if (BoolCast(this._props.Document.card_sort_type) == true){
-            return this.contentSorted
+        if (this.inactiveDocs().length != this.myChildLayoutPairs.length) {
+            translate += this.panelWidth() / 2;
         }
 
-        else{
-            return this.content
-        }
+        console.log("in" + this.inactiveDocs().length)
+        console.log("max" + this.maxRowCount)
+
+        // if (this.inactiveDocs().length > this.maxRowCount){
+        //     translate += ((this.inactiveDocs().length % this.maxRowCount) * this.panelWidth()) / 2
+        //     console.log("trans" + (this.inactiveDocs().length % this.maxRowCount) / 2 )
+        // }
+
+
+
+        return translate;
     }
 
+    // @computed get renderCardsSort(){
+    //     if (StrCast(this._props.Document.cardSort) == "type"){
+    //         return this.contentSorted
+    //     }
+
+    //     else{
+    //         return this.content
+    //     }
+    // }
+
     
 
     render() {
@@ -367,7 +496,7 @@ export class CollectionCardView extends CollectionSubView() {
                         height: `${100 * this.fitContentScale}%`,
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
-                    {this.renderCardsSort}
+                    {this.contentSorted}
                 </div>
 
                 {/* <Card  className={`custom-modal-position step-${step}`}>
@@ -386,4 +515,4 @@ export class CollectionCardView extends CollectionSubView() {
             </div>
         );
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 0c6095346..526315802 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -105,10 +105,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', checkResult?: boolean, persist?: boolean) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', checkResult?: boolean, persist?: boolean) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
             setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -140,15 +140,20 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
         }],
         ['time', {
             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_time = !doc.card_sort_time,
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", 
         }],
         ['docType', {
             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_type = !doc.card_sort_type,
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type",
         }],
         ['color', {
             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_color = !doc.card_sort_color,
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color",
+        }],
+
+        ['links', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links",
         }],
 
    ]);