From 34f3bab0f4d55b2f55f38e451bfd024994ecff42 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 20 Sep 2023 13:20:53 -0400
Subject: added carousel3D to novice and fixed it's button positions and its
 focus so that it works with trails. added dragging documents within single
 collection for rearranging order of docs in a tab collection.  fixed freeform
 views set to fitWidth to show decorations properly. turned off scaling of
 tree views.  updated lightbox buttons.  fixed tooltips on properties toggles.

---
 .../views/collections/CollectionCarousel3DView.tsx      | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

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

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index d94e552b4..cd59a91a1 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -2,14 +2,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Doc } from '../../../fields/Doc';
+import { Doc, DocListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { returnFalse, returnZero, Utils } from '../../../Utils';
+import { DocumentType } from '../../documents/DocumentTypes';
 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 { DocFocusOptions, DocumentView } from '../nodes/DocumentView';
 import { StyleProp } from '../StyleProvider';
 import './CollectionCarousel3DView.scss';
 import { CollectionSubView } from './CollectionSubView';
@@ -46,6 +47,15 @@ export class CollectionCarousel3DView extends CollectionSubView() {
             .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);
 
+    focus = (anchor: Doc, options: DocFocusOptions) => {
+        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
+        if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return;
+        options.didMove = true;
+        const target = DocCast(anchor.annotationOn) ?? anchor;
+        const index = docs.indexOf(target);
+        index !== -1 && (this.layoutDoc._carousel_index = index);
+        return undefined;
+    };
     @computed get content() {
         const currentIndex = NumCast(this.layoutDoc._carousel_index);
         const displayDoc = (childPair: { layout: Doc; data: Doc }) => {
@@ -61,6 +71,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                     LayoutTemplateString={this.props.childLayoutString}
                     Document={childPair.layout}
                     DataDoc={childPair.data}
+                    focus={this.focus}
                     ScreenToLocalTransform={this.childScreenToLocal}
                     isContentActive={this.isChildContentActive}
                     isDocumentActive={this.props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this.props.isDocumentActive : this.isContentActive}
-- 
cgit v1.2.3-70-g09d2


From 6bc3c1fbd5d44d0d4ea53e219962cfaaa404d151 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 20 Sep 2023 14:10:28 -0400
Subject: removed fwd/back buttons for carousel in favor of just clicking on
 next/previous regions.

---
 .../views/collections/CollectionCarousel3DView.scss      | 11 ++++++-----
 .../views/collections/CollectionCarousel3DView.tsx       | 16 +++++-----------
 2 files changed, 11 insertions(+), 16 deletions(-)

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

diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index 7622043e3..8319f19ca 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -74,7 +74,10 @@
 
 .carousel3DView-fwd,
 .carousel3DView-back {
-    top: 50%;
+    top: 0;
+    background: transparent;
+    width: calc((1 - #{$CAROUSEL3D_CENTER_SCALE} * 0.33) / 2 * 100%);
+    height: 100%;
 }
 
 .carousel3DView-fwd-scroll,
@@ -87,13 +90,13 @@
 .carousel3DView-fwd,
 .carousel3DView-fwd-scroll,
 .carousel3DView-fwd-scroll-hidden {
-    right: 20;
+    right: 0;
 }
 
 .carousel3DView-back,
 .carousel3DView-back-scroll,
 .carousel3DView-back-scroll-hidden {
-    left: 20;
+    left: 0;
 }
 
 .carousel3DView-fwd-scroll-hidden,
@@ -108,8 +111,6 @@
     opacity: 1;
 }
 
-.carousel3DView-back:hover,
-.carousel3DView-fwd:hover,
 .carousel3DView-back-scroll:hover,
 .carousel3DView-fwd-scroll:hover {
     background: lightgray;
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index cd59a91a1..4bc72772a 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -96,8 +96,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
         this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length;
     };
 
-    onArrowClick = (e: React.MouseEvent, direction: number) => {
-        e.stopPropagation();
+    onArrowClick = (direction: number) => {
         this.changeSlide(direction);
         !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction === 1 ? 'fwd' : 'back'); // while autoscroll is on, keep the other autoscroll button hidden
         !this.layoutDoc.autoScrollOn && this.fadeScrollButton(); // keep pause button visible while autoscroll is on
@@ -128,16 +127,11 @@ export class CollectionCarousel3DView extends CollectionSubView() {
     };
 
     @computed get buttons() {
-        if (!this.props.isContentActive()) return null;
         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'} />
-                </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'} />
-                </div>
-                {this.autoScrollButton}
+                <div title="click to go back" key="back" className="carousel3DView-back" onClick={e => this.onArrowClick(-1)} />
+                <div title="click to advance" key="fwd" className="carousel3DView-fwd" onClick={e => this.onArrowClick(1)} />
+                {/* {this.autoScrollButton} */}
             </div>
         );
     }
@@ -176,7 +170,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                 <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}>
                     {this.content}
                 </div>
-                {this.props.Document._chromeHidden ? null : this.buttons}
+                {this.buttons}
                 <div className="dot-bar">{this.dots}</div>
             </div>
         );
-- 
cgit v1.2.3-70-g09d2

