Merge branch 'master' into audio_refactor

1 files changed, 80 insertions, 25 deletions

diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 1e38a8927..db8f7d5e4 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -127,36 +127,22 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
     @undoBatch
     @action
     public static CloseRightSplit(document: Opt<Doc>): boolean {
-        if (!CollectionDockingView.Instance) return false;
         const instance = CollectionDockingView.Instance;
-        let retVal = false;
-        if (instance._goldenLayout.root.contentItems[0].isRow) {
-            retVal = Array.from(instance._goldenLayout.root.contentItems[0].contentItems).some((child: any) => {
-                if (child.contentItems.length === 1 && child.contentItems[0].config.component === "DocumentFrameRenderer" &&
-                    DocumentManager.Instance.getDocumentViewById(child.contentItems[0].config.props.documentId) &&
-                    ((!document && DocumentManager.Instance.getDocumentViewById(child.contentItems[0].config.props.documentId)!.Document.isDisplayPanel) ||
-                        (document && Doc.AreProtosEqual(DocumentManager.Instance.getDocumentViewById(child.contentItems[0].config.props.documentId)!.Document, document)))) {
-                    child.contentItems[0].remove();
+        const tryClose = (childItem: any) => {
+            if (childItem.config?.component === "DocumentFrameRenderer") {
+                const docView = DocumentManager.Instance.getDocumentViewById(childItem.config.props.documentId);
+                if (docView && ((!document && docView.Document.isDisplayPanel) || (document && Doc.AreProtosEqual(docView.props.Document, document)))) {
+                    childItem.remove();
                     instance.layoutChanged(document);
                     return true;
-                } else {
-                    Array.from(child.contentItems).filter((tab: any) => tab.config.component === "DocumentFrameRenderer").some((tab: any, j: number) => {
-                        if (DocumentManager.Instance.getDocumentViewById(tab.config.props.documentId) &&
-                            ((!document && DocumentManager.Instance.getDocumentViewById(tab.config.props.documentId)!.Document.isDisplayPanel) ||
-                                (document && Doc.AreProtosEqual(DocumentManager.Instance.getDocumentViewById(tab.config.props.documentId)!.Document, document)))) {
-                            child.contentItems[j].remove();
-                            child.config.activeItemIndex = Math.max(child.contentItems.length - 1, 0);
-                            return true;
-                        }
-                        return false;
-                    });
                 }
-                return false;
-            });
-        }
-        if (retVal) {
-            instance.stateChanged();
+            }
+            return false;
         }
+        let retVal = !instance?._goldenLayout.root.contentItems[0].isRow ? false :
+            Array.from(instance._goldenLayout.root.contentItems[0].contentItems).some((child: any) => Array.from(child.contentItems).some(tryClose));
+
+        retVal && instance.stateChanged();
         return retVal;
     }
 
@@ -238,6 +224,75 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         return true;
     }
 
+
+    //
+    //  Creates a split on any side of the docking view based on the passed input pullSide and then adds the Document to the requested side
+    //
+    @undoBatch
+    @action
+    public static AddSplit(document: Doc, pullSide: string, libraryPath?: Doc[]) {
+        if (!CollectionDockingView.Instance) return false;
+        const instance = CollectionDockingView.Instance;
+        const newItemStackConfig = {
+            type: 'stack',
+            content: [CollectionDockingView.makeDocumentConfig(document, undefined, libraryPath)]
+        };
+
+        const newContentItem = instance._goldenLayout.root.layoutManager.createContentItem(newItemStackConfig, instance._goldenLayout);
+
+        if (instance._goldenLayout.root.contentItems.length === 0) { // if no rows / columns
+            instance._goldenLayout.root.addChild(newContentItem);
+        } else if (instance._goldenLayout.root.contentItems[0].isRow) { // if row
+            if (pullSide === "left") {
+                instance._goldenLayout.root.contentItems[0].addChild(newContentItem, 0);
+            } else if (pullSide === "right") {
+                instance._goldenLayout.root.contentItems[0].addChild(newContentItem);
+            } else if (pullSide === "top" || pullSide === "bottom") {
+                // if not going in a row layout, must add already existing content into column
+                const rowlayout = instance._goldenLayout.root.contentItems[0];
+                const newColumn = rowlayout.layoutManager.createContentItem({ type: "column" }, instance._goldenLayout);
+                rowlayout.parent.replaceChild(rowlayout, newColumn);
+                if (pullSide === "top") {
+                    newColumn.addChild(rowlayout, undefined, true);
+                    newColumn.addChild(newContentItem, 0, true);
+                } else if (pullSide === "bottom") {
+                    newColumn.addChild(newContentItem, undefined, true);
+                    newColumn.addChild(rowlayout, 0, true);
+                }
+
+                rowlayout.config.height = 50;
+                newContentItem.config.height = 50;
+            }
+        } else if (instance._goldenLayout.root.contentItems[0].isColumn) { // if column
+            if (pullSide === "top") {
+                instance._goldenLayout.root.contentItems[0].addChild(newContentItem, 0);
+            } else if (pullSide === "bottom") {
+                instance._goldenLayout.root.contentItems[0].addChild(newContentItem);
+            } else if (pullSide === "left" || pullSide === "right") {
+                // if not going in a row layout, must add already existing content into column
+                const collayout = instance._goldenLayout.root.contentItems[0];
+                const newRow = collayout.layoutManager.createContentItem({ type: "row" }, instance._goldenLayout);
+                collayout.parent.replaceChild(collayout, newRow);
+
+                if (pullSide === "left") {
+                    newRow.addChild(collayout, undefined, true);
+                    newRow.addChild(newContentItem, 0, true);
+                } else if (pullSide === "right") {
+                    newRow.addChild(newContentItem, undefined, true);
+                    newRow.addChild(collayout, 0, true);
+                }
+
+                collayout.config.width = 50;
+                newContentItem.config.width = 50;
+            }
+        }
+
+        newContentItem.callDownwards('_$init');
+        instance.layoutChanged();
+        return true;
+    }
+
+
     //
     //  Creates a vertical split on the right side of the docking view, and then adds the Document to that split
     //