added drop code for dropping onto an audio stackedTimeline

2 files changed, 87 insertions, 66 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index 0fc66445a..65022fdfd 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -44,6 +44,8 @@ import { LabelBox } from "../nodes/LabelBox";
 import "./CollectionStackedTimeline.scss";
 import { Colors } from "../global/globalEnums";
 import { DocumentManager } from "../../util/DocumentManager";
+import { SnappingManager } from "../../util/SnappingManager";
+import { DragManager } from "../../util/DragManager";
 
 type PanZoomDocument = makeInterface<[]>;
 const PanZoomDocument = makeInterface();
@@ -345,6 +347,22 @@ export class CollectionStackedTimeline extends CollectionSubView<
         );
     }
 
+    @action
+    internalDocDrop(e: Event, de: DragManager.DropEvent, docDragData: DragManager.DocumentDragData, xp: number) {
+        if (!de.embedKey && this.props.layerProvider?.(this.props.Document) !== false && this.props.Document._isGroup) return false;
+        if (!super.onInternalDrop(e, de)) return false;
+
+
+        // determine x coordinate of drop and assign it to the documents being dragged  --- see internalDocDrop of collectionFreeFormView.tsx for how it's done when dropping onto a 2D freeform view
+
+        return true;
+    }
+
+    onInternalDrop = (e: Event, de: DragManager.DropEvent) => {
+        if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData, 0);
+        return false;
+    }
+
     @undoBatch
     @action
     static createAnchor(
@@ -361,6 +379,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
             title: ComputedField.MakeFunction(
                 `"#" + formatToTime(self["${startTag}"]) + "-" + formatToTime(self["${endTag}"])`
             ) as any,
+            _stayInCollection: true,
             useLinkSmallAnchor: true,
             hideLinkButton: true,
             annotationOn: rootDoc,
@@ -537,7 +556,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
         const maxLevel = overlaps.reduce((m, o) => Math.max(m, o.level), 0) + 2;
         const isActive =
             this.props.isContentActive() || this.props.isSelected(false);
-        return (
+        return (<div ref={this.createDashEventsTarget} style={{ pointerEvents: SnappingManager.GetIsDragging() ? "all" : undefined }}>
             <div
                 className="collectionStackedTimeline"
                 ref={(timeline: HTMLDivElement | null) => (this._timeline = timeline)}
@@ -642,7 +661,7 @@ export class CollectionStackedTimeline extends CollectionSubView<
                     </>
                 )}
             </div>
-        );
+        </div>);
     }
 }
 
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index cdb37bf92..c79828470 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -336,8 +336,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                 (this.layoutDoc.dontAutoPlayFollowedLinks ? "" : "Don't") +
                 " play when link is selected",
             event: () =>
-            (this.layoutDoc.dontAutoPlayFollowedLinks =
-                !this.layoutDoc.dontAutoPlayFollowedLinks),
+                (this.layoutDoc.dontAutoPlayFollowedLinks =
+                    !this.layoutDoc.dontAutoPlayFollowedLinks),
             icon: "expand-arrows-alt",
         });
         funcs.push({
@@ -562,6 +562,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                 whenChildContentsActiveChanged={
                     this.timelineWhenChildContentsActiveChanged
                 }
+                moveDocument={this.moveDocument}
+                addDocument={this.addDocument}
                 removeDocument={this.removeDocument}
                 ScreenToLocalTransform={this.timelineScreenToLocal}
                 Play={this.Play}
@@ -635,77 +637,77 @@ export class AudioBox extends ViewBoxAnnotatableComponent<
                                 </div>
                             </div>
                         ) : (
-                            <div
-                                className={`audiobox-record${interactive}`}
-                                style={{ backgroundColor: Colors.DARK_GRAY }}
-                            >
-                                <FontAwesomeIcon icon="microphone" />
+                                <div
+                                    className={`audiobox-record${interactive}`}
+                                    style={{ backgroundColor: Colors.DARK_GRAY }}
+                                >
+                                    <FontAwesomeIcon icon="microphone" />
                                 RECORD
-                            </div>
-                        )}
+                                </div>
+                            )}
                     </div>
                 ) : (
-                    <div
-                        className="audiobox-controls"
-                        style={{
-                            pointerEvents:
-                                this._isAnyChildContentActive || this.props.isContentActive()
-                                    ? "all"
-                                    : "none",
-                        }}
-                    >
-                        <div className="audiobox-dictation" />
                         <div
-                            className="audiobox-player"
-                            style={{ height: `${AudioBox.heightPercent}%` }}
+                            className="audiobox-controls"
+                            style={{
+                                pointerEvents:
+                                    this._isAnyChildContentActive || this.props.isContentActive()
+                                        ? "all"
+                                        : "none",
+                            }}
                         >
+                            <div className="audiobox-dictation" />
                             <div
-                                className="audiobox-buttons"
-                                title={this.mediaState === "paused" ? "play" : "pause"}
-                                onClick={this.mediaState === "paused" ? this.Play : this.Pause}
-                            >
-                                {" "}
-                                <FontAwesomeIcon
-                                    icon={this.mediaState === "paused" ? "play" : "pause"}
-                                    size={"1x"}
-                                />
-                            </div>
-                            <div
-                                className="audiobox-buttons"
-                                title={this._trimming ? "finish" : "trim"}
-                                onClick={this._trimming ? this.finishTrim : this.startTrim}
-                            >
-                                <FontAwesomeIcon
-                                    icon={this._trimming ? "check" : "cut"}
-                                    size={"1x"}
-                                />
-                            </div>
-                            <div
-                                className="audiobox-timeline"
-                                style={{
-                                    top: 0,
-                                    height: `100%`,
-                                    left: AudioBox.playheadWidth,
-                                    width: `calc(100% - ${AudioBox.playheadWidth}px)`,
-                                    background: "white",
-                                }}
+                                className="audiobox-player"
+                                style={{ height: `${AudioBox.heightPercent}%` }}
                             >
-                                {this.renderTimeline}
-                            </div>
-                            {this.audio}
-                            <div className="audioBox-current-time">
-                                {this._trimming ?
-                                    formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))
-                                    : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))}
-                            </div>
-                            <div className="audioBox-total-time">
-                                {this._trimming || !this._trimEnd ?
-                                    formatTime(Math.round(NumCast(this.duration)))
-                                    : formatTime(Math.round(NumCast(this.trimDuration)))}
+                                <div
+                                    className="audiobox-buttons"
+                                    title={this.mediaState === "paused" ? "play" : "pause"}
+                                    onClick={this.mediaState === "paused" ? this.Play : this.Pause}
+                                >
+                                    {" "}
+                                    <FontAwesomeIcon
+                                        icon={this.mediaState === "paused" ? "play" : "pause"}
+                                        size={"1x"}
+                                    />
+                                </div>
+                                <div
+                                    className="audiobox-buttons"
+                                    title={this._trimming ? "finish" : "trim"}
+                                    onClick={this._trimming ? this.finishTrim : this.startTrim}
+                                >
+                                    <FontAwesomeIcon
+                                        icon={this._trimming ? "check" : "cut"}
+                                        size={"1x"}
+                                    />
+                                </div>
+                                <div
+                                    className="audiobox-timeline"
+                                    style={{
+                                        top: 0,
+                                        height: `100%`,
+                                        left: AudioBox.playheadWidth,
+                                        width: `calc(100% - ${AudioBox.playheadWidth}px)`,
+                                        background: "white",
+                                    }}
+                                >
+                                    {this.renderTimeline}
+                                </div>
+                                {this.audio}
+                                <div className="audioBox-current-time">
+                                    {this._trimming ?
+                                        formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode)))
+                                        : formatTime(Math.round(NumCast(this.layoutDoc._currentTimecode) - NumCast(this._trimStart)))}
+                                </div>
+                                <div className="audioBox-total-time">
+                                    {this._trimming || !this._trimEnd ?
+                                        formatTime(Math.round(NumCast(this.duration)))
+                                        : formatTime(Math.round(NumCast(this.trimDuration)))}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                )}
+                    )}
             </div>
         );
     }