From 294412015c0f3dbfaa8982f1dcab100fbfdd036f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 1 Feb 2023 02:22:00 -0500
Subject: fixed ungrouping documents on video/image/etc.  fixed undoing
 deleting collections to reset annotationOn field.  fixed setting size in text
 box with richtext menu buttons and not losing focus and having stored marks
 get lost.

---
 .../views/collections/CollectionCarouselView.tsx   | 94 ++++++++++++----------
 1 file changed, 52 insertions(+), 42 deletions(-)

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

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index abb4b6bc6..32f6207ed 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -9,54 +9,58 @@ import { DragManager } from '../../util/DragManager';
 import { DocumentView, DocumentViewProps } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { StyleProp } from '../StyleProvider';
-import "./CollectionCarouselView.scss";
+import './CollectionCarouselView.scss';
 import { CollectionSubView } from './CollectionSubView';
 
 @observer
 export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
 
-    componentWillUnmount() { this._dropDisposer?.(); }
+    componentWillUnmount() {
+        this._dropDisposer?.();
+    }
 
-    protected createDashEventsTarget = (ele: HTMLDivElement | null) => { //used for stacking and masonry view
+    protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
+        //used for stacking and masonry view
         this._dropDisposer?.();
         if (ele) {
             this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
         }
-    }
+    };
 
     advance = (e: React.MouseEvent) => {
         e.stopPropagation();
         this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length;
-    }
+    };
     goback = (e: React.MouseEvent) => {
         e.stopPropagation();
         this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
-    }
-    captionStyleProvider = (doc: (Doc | undefined), captionProps: Opt<DocumentViewProps>, property: string): any => {
+    };
+    captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<DocumentViewProps>, property: string): any => {
         // first look for properties on the document in the carousel, then fallback to properties on the container
-        const childValue = doc?.["caption-" + property] ? this.props.styleProvider?.(doc, captionProps, property) : undefined;
+        const childValue = doc?.['caption-' + property] ? this.props.styleProvider?.(doc, captionProps, property) : undefined;
         return childValue ?? this.props.styleProvider?.(this.layoutDoc, captionProps, property);
-    }
+    };
     panelHeight = () => this.props.PanelHeight() - (StrCast(this.layoutDoc._showCaption) ? 50 : 0);
     onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     @computed get content() {
         const index = NumCast(this.layoutDoc._itemIndex);
         const curDoc = this.childLayoutPairs?.[index];
-        const captionProps = { ...OmitKeys(this.props, ["setHeight",]).omit, fieldKey: "caption" };
-        const marginX = NumCast(this.layoutDoc["caption-xMargin"]);
-        const marginY = NumCast(this.layoutDoc["caption-yMargin"]);
+        const captionProps = { ...OmitKeys(this.props, ['setHeight']).omit, fieldKey: 'caption' };
+        const marginX = NumCast(this.layoutDoc['caption-xMargin']);
+        const marginY = NumCast(this.layoutDoc['caption-yMargin']);
         const showCaptions = StrCast(this.layoutDoc._showCaption);
-        return !(curDoc?.layout instanceof Doc) ? (null) :
+        return !(curDoc?.layout instanceof Doc) ? null : (
             <>
                 <div className="collectionCarouselView-image" key="image">
-                    <DocumentView  {...OmitKeys(this.props, ["setHeight", "NativeWidth", "NativeHeight", "childLayoutTemplate", "childLayoutString"]).omit}
+                    <DocumentView
+                        {...OmitKeys(this.props, ['setHeight', 'NativeWidth', 'NativeHeight', 'childLayoutTemplate', 'childLayoutString']).omit}
                         onDoubleClick={this.onContentDoubleClick}
                         onClick={this.onContentClick}
                         hideCaptions={showCaptions ? true : false}
                         renderDepth={this.props.renderDepth + 1}
-                        ContainingCollectionView={this}
+                        ContainingCollectionView={this.props.CollectionView}
                         LayoutTemplate={this.props.childLayoutTemplate}
                         LayoutTemplateString={this.props.childLayoutString}
                         Document={curDoc.layout}
@@ -65,40 +69,46 @@ export class CollectionCarouselView extends CollectionSubView() {
                         bringToFront={returnFalse}
                     />
                 </div>
-                <div className="collectionCarouselView-caption" key="caption"
+                <div
+                    className="collectionCarouselView-caption"
+                    key="caption"
                     style={{
-                        display: showCaptions ? undefined : "none",
+                        display: showCaptions ? undefined : 'none',
                         borderRadius: this.props.styleProvider?.(this.layoutDoc, captionProps, StyleProp.BorderRounding),
-                        marginRight: marginX, marginLeft: marginX,
-                        width: `calc(100% - ${marginX * 2}px)`
+                        marginRight: marginX,
+                        marginLeft: marginX,
+                        width: `calc(100% - ${marginX * 2}px)`,
                     }}>
-                    <FormattedTextBox key={index} {...captionProps}
-                        fieldKey={showCaptions}
-                        styleProvider={this.captionStyleProvider}
-                        Document={curDoc.layout}
-                        DataDoc={undefined} />
+                    <FormattedTextBox key={index} {...captionProps} fieldKey={showCaptions} styleProvider={this.captionStyleProvider} Document={curDoc.layout} DataDoc={undefined} />
                 </div>
-            </>;
+            </>
+        );
     }
     @computed get buttons() {
-        return <>
-            <div key="back" className="carouselView-back" onClick={this.goback}>
-                <FontAwesomeIcon icon={"chevron-left"} size={"2x"} />
-            </div>
-            <div key="fwd" className="carouselView-fwd" onClick={this.advance}>
-                <FontAwesomeIcon icon={"chevron-right"} size={"2x"} />
-            </div>
-        </>;
+        return (
+            <>
+                <div key="back" className="carouselView-back" onClick={this.goback}>
+                    <FontAwesomeIcon icon={'chevron-left'} size={'2x'} />
+                </div>
+                <div key="fwd" className="carouselView-fwd" onClick={this.advance}>
+                    <FontAwesomeIcon icon={'chevron-right'} size={'2x'} />
+                </div>
+            </>
+        );
     }
 
     render() {
-        return <div className="collectionCarouselView-outer" ref={this.createDashEventsTarget}
-            style={{
-                background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
-                color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
-            }}>
-            {this.content}
-            {this.props.Document._chromeHidden ? (null) : this.buttons}
-        </div>;
+        return (
+            <div
+                className="collectionCarouselView-outer"
+                ref={this.createDashEventsTarget}
+                style={{
+                    background: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
+                    color: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.Color),
+                }}>
+                {this.content}
+                {this.props.Document._chromeHidden ? null : this.buttons}
+            </div>
+        );
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2