Merge branch 'master' into data-visualization-view-naafi

2 files changed, 94 insertions, 95 deletions

diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
index e8df192cf..3e3709827 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -1,6 +1,14 @@
-@import "../../global/globalCssVariables";
-@import "../../_nodeModuleOverrides";
+@import '../../global/globalCssVariables';
+@import '../../_nodeModuleOverrides';
 
+.collectionLinearView {
+    width: 100%;
+}
+.collectionLinearView-label {
+    color: black;
+    background-color: $light-gray;
+    width: 100%;
+}
 .collectionLinearView-outer {
     overflow: visible;
     height: 100%;
@@ -11,8 +19,6 @@
     }
 
     &.true {
-        padding-left: 5px;
-        padding-right: 5px;
         border-left: $standard-border;
         background-color: $medium-blue-alt;
     }
@@ -25,7 +31,6 @@
         display: flex;
         height: 100%;
         align-items: center;
-        gap: 5px;
 
         .collectionView {
             overflow: visible !important;
@@ -97,13 +102,12 @@
             background-color: $medium-blue;
             padding: 5;
             border-radius: 2px;
-            height: 25;
+            height: 100%;
             min-width: 25;
             margin: 0;
             color: $white;
             display: flex;
             font-weight: 100;
-            width: fit-content;
             transition: transform 0.2s;
             align-items: center;
             justify-content: center;
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 0d7d67dd8..c7d9b6619 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -5,13 +5,12 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
-import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../../Utils';
+import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnTrue, StopEvent, Utils } from '../../../../Utils';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { DocumentManager } from '../../../util/DocumentManager';
-import { DragManager } from '../../../util/DragManager';
+import { DragManager, dropActionType } from '../../../util/DragManager';
 import { Transform } from '../../../util/Transform';
-import { Colors, Shadows } from '../../global/globalEnums';
 import { DocumentLinksButton } from '../../nodes/DocumentLinksButton';
 import { DocumentView } from '../../nodes/DocumentView';
 import { LinkDescriptionPopup } from '../../nodes/LinkDescriptionPopup';
@@ -45,7 +44,7 @@ export class CollectionLinearView extends CollectionSubView() {
 
     componentDidMount() {
         this._widthDisposer = reaction(
-            () => 5 + (this.layoutDoc.linearViewIsExpanded ? this.childDocs.length * this.rootDoc[HeightSym]() : 10),
+            () => 5 + NumCast(this.rootDoc.linearBtnWidth, this.dimension()) + (this.layoutDoc.linearViewIsExpanded ? this.childDocs.filter(doc => !doc.hidden).reduce((tot, doc) => (doc[WidthSym]() || this.dimension()) + tot + 4, 0) : 0),
             width => this.childDocs.length && (this.layoutDoc._width = width),
             { fireImmediately: true }
         );
@@ -79,7 +78,7 @@ export class CollectionLinearView extends CollectionSubView() {
         }
     };
 
-    dimension = () => NumCast(this.rootDoc._height); // 2 * the padding
+    dimension = () => NumCast(this.rootDoc._height);
     getTransform = (ele: Opt<HTMLDivElement>) => {
         if (!ele) return Transform.Identity();
         const { scale, translateX, translateY } = Utils.GetScreenTransform(ele);
@@ -119,7 +118,53 @@ export class CollectionLinearView extends CollectionSubView() {
         e.preventDefault();
     };
 
+    getLinkUI = () => {
+        return !DocumentLinksButton.StartLink ? null : (
+            <span className="bottomPopup-background" style={{ pointerEvents: 'all' }} onPointerDown={e => e.stopPropagation()}>
+                <span className="bottomPopup-text">
+                    Creating link from:{' '}
+                    <b>
+                        {(DocumentLinksButton.AnnotationId ? 'Annotation in ' : ' ') +
+                            (StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...')}
+                    </b>
+                </span>
+
+                <Tooltip title={<div className="dash-tooltip">{'Toggle description pop-up'} </div>} placement="top">
+                    <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
+                        Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : 'ON'}
+                    </span>
+                </Tooltip>
+
+                <Tooltip title={<div className="dash-tooltip">Exit linking mode</div>} placement="top">
+                    <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
+                        Stop
+                    </span>
+                </Tooltip>
+            </span>
+        );
+    };
+    getCurrentlyPlayingUI = () => {
+        return !CollectionStackedTimeline.CurrentlyPlaying?.length ? null : (
+            <span className="bottomPopup-background">
+                <span className="bottomPopup-text">
+                    Currently playing:
+                    {CollectionStackedTimeline.CurrentlyPlaying.map((clip, i) => (
+                        <>
+                            <span className="audio-title" onPointerDown={() => DocumentManager.Instance.showDocument(clip.rootDoc, { willZoomCentered: true })}>
+                                {clip.rootDoc.title + (i === CollectionStackedTimeline.CurrentlyPlaying.length - 1 ? '  ' : ',')}
+                            </span>
+                            <FontAwesomeIcon icon={!clip.ComponentView?.IsPlaying?.() ? 'play' : 'pause'} size="lg" onPointerDown={() => clip.ComponentView?.TogglePause?.()} />{' '}
+                            <FontAwesomeIcon icon="times" size="lg" onPointerDown={() => clip.ComponentView?.Pause?.()} />{' '}
+                        </>
+                    ))}
+                </span>
+            </span>
+        );
+    };
     getDisplayDoc = (doc: Doc, preview: boolean = false) => {
+        if (doc.icon === 'linkui') return this.getLinkUI();
+        if (doc.icon === 'currentlyplayingui') return this.getCurrentlyPlayingUI();
+
         const nested = doc._viewType === CollectionViewType.Linear;
         const hidden = doc.hidden === true;
 
@@ -133,10 +178,10 @@ export class CollectionLinearView extends CollectionSubView() {
                 ref={r => (dref = r || undefined)}
                 style={{
                     pointerEvents: 'all',
-                    width: nested ? undefined : NumCast(doc._width),
-                    height: nested ? undefined : NumCast(doc._height),
-                    marginLeft: !nested ? 2.5 : 0,
-                    marginRight: !nested ? 2.5 : 0,
+                    width: NumCast(doc._width),
+                    height: NumCast(doc._height),
+                    marginLeft: 2,
+                    marginRight: 2,
                     // width: NumCast(pair.layout._width),
                     // height: NumCast(pair.layout._height),
                 }}>
@@ -148,10 +193,11 @@ export class CollectionLinearView extends CollectionSubView() {
                     moveDocument={this.props.moveDocument}
                     addDocTab={this.props.addDocTab}
                     pinToPres={emptyFunction}
+                    dropAction={StrCast(this.layoutDoc.childDropAction) as dropActionType}
                     rootSelected={this.props.isSelected}
                     removeDocument={this.props.removeDocument}
                     ScreenToLocalTransform={docXf}
-                    PanelWidth={nested ? doc[WidthSym] : this.dimension}
+                    PanelWidth={doc[WidthSym]}
                     PanelHeight={nested || doc._height ? doc[HeightSym] : this.dimension}
                     renderDepth={this.props.renderDepth + 1}
                     dontRegisterView={BoolCast(this.rootDoc.childDontRegisterViews)}
@@ -172,106 +218,55 @@ export class CollectionLinearView extends CollectionSubView() {
     };
 
     render() {
-        const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label
-        const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
-        const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content
-        const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not
-        const floating: boolean = BoolCast(this.props.Document.linearViewFloating); // Specify whether it is expandable or not
+        const flexDir = StrCast(this.Document.flexDirection); // Specify direction of linear view content
+        const flexGap = NumCast(this.Document.flexGap); // Specify the gap between linear view content
+        const isExpanded = BoolCast(this.layoutDoc.linearViewIsExpanded);
 
-        const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-        const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
-        const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
         const menuOpener = (
             <label
-                htmlFor={`${guid}`}
-                style={{
-                    boxShadow: floating ? Shadows.STANDARD_SHADOW : undefined,
-                    color: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.BLACK,
-                    backgroundColor: backgroundColor === color ? 'black' : BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.LIGHT_GRAY,
-                }}
-                onPointerDown={e => e.stopPropagation()}>
-                <div className="collectionLinearView-menuOpener">{BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : <FontAwesomeIcon icon={'minus'} /> : icon ? icon : <FontAwesomeIcon icon={'plus'} />}</div>
+                className={`collectionlinearView-label${isExpanded ? '-expanded' : ''}`}
+                htmlFor={this.Document[Id] + '-input'}
+                style={{ boxShadow: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BoxShadow) }}
+                onPointerDown={StopEvent}>
+                <div className="collectionLinearView-menuOpener">{Cast(this.props.Document.icon, 'string', null) ?? <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}</div>
             </label>
         );
 
         return (
-            <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{ backgroundColor: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : 'transparent' }}>
-                <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu}>
-                    {!expandable ? null : (
-                        <Tooltip
-                            title={
-                                <>
-                                    <div className="dash-tooltip">{BoolCast(this.props.Document.linearViewIsExpanded) ? 'Close' : 'Open'}</div>
-                                </>
-                            }
-                            placement="top">
+            <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{ backgroundColor: this.layoutDoc.linearViewIsExpanded ? undefined : 'transparent' }}>
+                <div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu} style={{ minHeight: this.dimension() }}>
+                    {!this.props.Document.linearViewExpandable ? null : (
+                        <Tooltip title={<div className="dash-tooltip">{isExpanded ? 'Close' : 'Open'}</div>} placement="top">
                             {menuOpener}
                         </Tooltip>
                     )}
                     <input
-                        id={`${guid}`}
+                        id={this.Document[Id] + '-input'}
                         type="checkbox"
-                        checked={BoolCast(this.props.Document.linearViewIsExpanded)}
+                        checked={isExpanded}
                         ref={this.addMenuToggle}
-                        onChange={action(() => (this.props.Document.linearViewIsExpanded = this.addMenuToggle.current!.checked))}
+                        onChange={action(e => {
+                            ScriptCast(this.Document.onClick)?.script.run({
+                                this: this.layoutDoc,
+                                self: this.rootDoc,
+                                _readOnly_: false,
+                                scriptContext: this.props.scriptContext,
+                                thisContainer: this.props.ContainingCollectionDoc,
+                                documentView: this.props.docViewPath().lastElement(),
+                            });
+                            this.layoutDoc.linearViewIsExpanded = this.addMenuToggle.current!.checked;
+                        })}
                     />
 
                     <div
                         className="collectionLinearView-content"
                         style={{
                             height: this.dimension(),
-                            flexDirection: flexDir,
+                            flexDirection: flexDir as any,
                             gap: flexGap,
                         }}>
                         {this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
                     </div>
-                    {!DocumentLinksButton.StartLink || this.layoutDoc !== Doc.MyDockedBtns ? null : (
-                        <span className="bottomPopup-background" style={{ pointerEvents: 'all' }} onPointerDown={e => e.stopPropagation()}>
-                            <span className="bottomPopup-text">
-                                Creating link from:{' '}
-                                <b>
-                                    {(DocumentLinksButton.AnnotationId ? 'Annotation in ' : ' ') +
-                                        (StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...')}
-                                </b>
-                            </span>
-
-                            <Tooltip
-                                title={
-                                    <>
-                                        <div className="dash-tooltip">{'Toggle description pop-up'} </div>
-                                    </>
-                                }
-                                placement="top">
-                                <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
-                                    Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : 'ON'}
-                                </span>
-                            </Tooltip>
-
-                            <Tooltip
-                                title={
-                                    <>
-                                        <div className="dash-tooltip">Exit linking mode</div>
-                                    </>
-                                }
-                                placement="top">
-                                <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
-                                    Stop
-                                </span>
-                            </Tooltip>
-                        </span>
-                    )}
-                    {!CollectionStackedTimeline.CurrentlyPlaying || !CollectionStackedTimeline.CurrentlyPlaying.length || this.layoutDoc !== Doc.MyDockedBtns ? null : (
-                        <span className="bottomPopup-background">
-                            <span className="bottomPopup-text">
-                                Currently playing:
-                                {CollectionStackedTimeline.CurrentlyPlaying.map((clip, i) => (
-                                    <span className="audio-title" onPointerDown={() => DocumentManager.Instance.jumpToDocument(clip, true, undefined, [])}>
-                                        {clip.title + (i === CollectionStackedTimeline.CurrentlyPlaying.length - 1 ? '' : ',')}
-                                    </span>
-                                ))}
-                            </span>
-                        </span>
-                    )}
                 </div>
             </div>
         );