fixed comparisonBox to create embeddings of documents by fixing targetDropAction to work for non-collections. fixed carouse3D view to have correct screentolocal XFs,

1 files changed, 20 insertions, 12 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index b10b453bf..d94e552b4 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -7,6 +7,8 @@ import { Id } from '../../../fields/FieldSymbols';
 import { NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { returnFalse, returnZero, Utils } from '../../../Utils';
 import { DragManager } from '../../util/DragManager';
+import { SelectionManager } from '../../util/SelectionManager';
+import { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } from '../global/globalCssVariables.scss';
 import { DocumentView } from '../nodes/DocumentView';
 import { StyleProp } from '../StyleProvider';
 import './CollectionCarousel3DView.scss';
@@ -32,11 +34,17 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         }
     };
 
+    centerScale = Number(CAROUSEL3D_CENTER_SCALE);
     panelWidth = () => this.props.PanelWidth() / 3;
-    panelHeight = () => this.props.PanelHeight() * 0.6;
+    panelHeight = () => this.props.PanelHeight() * Number(CAROUSEL3D_SIDE_SCALE);
     onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     isContentActive = () => this.props.isSelected() || this.props.isContentActive() || this.props.isAnyChildContentActive();
     isChildContentActive = () => (this.isContentActive() ? true : false);
+    childScreenToLocal = () =>
+        this.props // document's left is the panel shifted by the doc's index * panelWidth/#docs.  But it scales by centerScale around its center, so it's left moves left by the distance of the left from the center (panelwidth/2) * the scale delta (centerScale-1)
+            .ScreenToLocalTransform() // the top behaves the same way ecept it's shifted by the 'top' amount specified for the panel in css and then by the scale factor.
+            .translate(-this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2, -((Number(CAROUSEL3D_TOP) / 100) * this.props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2)
+            .scale(1 / this.centerScale);
 
     @computed get content() {
         const currentIndex = NumCast(this.layoutDoc._carousel_index);
@@ -46,13 +54,14 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                     {...this.props}
                     NativeWidth={returnZero}
                     NativeHeight={returnZero}
-                    suppressSetHeight={true}
+                    //suppressSetHeight={true}
                     onDoubleClick={this.onChildDoubleClick}
                     renderDepth={this.props.renderDepth + 1}
                     LayoutTemplate={this.props.childLayoutTemplate}
                     LayoutTemplateString={this.props.childLayoutString}
                     Document={childPair.layout}
                     DataDoc={childPair.data}
+                    ScreenToLocalTransform={this.childScreenToLocal}
                     isContentActive={this.isChildContentActive}
                     isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive}
                     PanelWidth={this.panelWidth}
@@ -64,10 +73,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
 
         return this.childLayoutPairs.map((childPair, index) => {
             return (
-                <div
-                    key={childPair.layout[Id]}
-                    className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`}
-                    style={index === currentIndex ? { opacity: '1', transform: 'scale(1.3)', width: this.panelWidth() } : { opacity: '0.5', transform: 'scale(0.6)', userSelect: 'none', width: this.panelWidth() }}>
+                <div key={childPair.layout[Id]} className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} style={{ width: this.panelWidth() }}>
                     {displayDoc(childPair)}
                 </div>
             );
@@ -75,6 +81,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
     }
 
     changeSlide = (direction: number) => {
+        SelectionManager.DeselectAll();
         this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length;
     };
 
@@ -114,10 +121,10 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         return (
             <div className="arrow-buttons">
                 <div key="back" className="carousel3DView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={e => this.onArrowClick(e, -1)}>
-                    <FontAwesomeIcon icon={'angle-left'} size={'2x'} />
+                    <FontAwesomeIcon icon="angle-left" size={'2x'} />
                 </div>
                 <div key="fwd" className="carousel3DView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={e => this.onArrowClick(e, 1)}>
-                    <FontAwesomeIcon icon={'angle-right'} size={'2x'} />
+                    <FontAwesomeIcon icon="angle-right" size={'2x'} />
                 </div>
                 {this.autoScrollButton}
             </div>
@@ -141,11 +148,12 @@ export class CollectionCarousel3DView extends CollectionSubView() {
     @computed get dots() {
         return this.childLayoutPairs.map((_child, index) => <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._carousel_index) ? '-active' : ''}`} onClick={() => (this.layoutDoc._carousel_index = index)} />);
     }
-
-    render() {
+    @computed get translateX() {
         const index = NumCast(this.layoutDoc._carousel_index);
-        const translateX = this.panelWidth() * (1 - index);
+        return this.panelWidth() * (1 - index);
+    }
 
+    render() {
         return (
             <div
                 className="collectionCarousel3DView-outer"
@@ -154,7 +162,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                     background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
                     color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
                 }}>
-                <div className="carousel-wrapper" style={{ transform: `translateX(${translateX}px)` }}>
+                <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}>
                     {this.content}
                 </div>
                 {this.props.Document._chromeHidden ? null : this.buttons}