Enable dragging sections

src/frontend/workspace/components/Droppable/index.jsx

@@ -37,10 +37,10 @@ class Droppable extends React.Component {
       const { onDropTab, onDropSection } = this.props;
       switch (data.type) {
         case 'tab':
-          onDropTab(data.tab);
+          onDropTab && onDropTab(data.tab);
           break;
         case 'section':
-          onDropSection(data.section);
+          onDropSection && onDropSection(data.section);
           break;
       }
     }

src/frontend/workspace/components/WSSectionContainer/index.jsx

@@ -23,18 +23,26 @@ class WSSectionContainer extends React.Component {
 
   handleDropTabToContainer(tab, index) {
     const tabContainer = new TabContainer();
-    this.core.addChild(tabContainer, index);
+    this.handleDropSectionToContainer(tabContainer, index);
     tabContainer.addChild(tab);
   }
 
+  handleDropSectionToContainer(section, index) {
+    this.core.addChild(section, index);
+  }
+
   handleDropTabToSection(tab, index, before = false) {
-    const child = this.core.children[index];
     const tabContainer = new TabContainer();
+    this.handleDropSectionToSection(tabContainer, index, before);
+    tabContainer.addChild(tab);
+  }
+
+  handleDropSectionToSection(section, index, before = false) {
+    const child = this.core.children[index];
     const sectionContainer = new SectionContainer({ horizontal: !this.core.horizontal });
     this.core.addChild(sectionContainer, index);
     sectionContainer.addChild(child);
-    sectionContainer.addChild(tabContainer, before ? 0 : 1);
-    tabContainer.addChild(tab);
+    sectionContainer.addChild(section, before ? 0 : 1);
   }
 
   render() {
@@ -54,41 +62,41 @@ class WSSectionContainer extends React.Component {
         elements.push(
           <Divider key={`divider-${i}`} horizontal={horizontal}
                    onResize={(target, x, y) => this.handleResize(visibleIndex - 1, target, x, y)}
-                   onDropTab={tab => this.handleDropTabToContainer(tab, i)} />
-        );
-      }
-      if (child instanceof SectionContainer || visibleChildren.length === 1) {
-        elements.push(
-          <div key={child.key} className={styles.wrapper} style={style}>
-            {child.element}
-          </div>
-        );
-      } else {
-        elements.push(
-          <div key={child.key} className={classes(styles.wrapper, !horizontal && styles.horizontal)}
-               style={style}>
-            <Divider horizontal={!horizontal} onDrop={data => this.handleDropToSection(data, i, true)} />
-            {child.element}
-            <Divider horizontal={!horizontal} onDrop={data => this.handleDropToSection(data, i)} />
-          </div>
+                   onDropTab={tab => this.handleDropTabToContainer(tab, i)}
+                   onDropSection={section => this.handleDropSectionToContainer(section, i)} />
         );
       }
+      elements.push(
+        <div key={child.key} className={classes(styles.wrapper, !horizontal && styles.horizontal)}
+             style={style}>
+          <Divider horizontal={!horizontal}
+                   onDropTab={tab => this.handleDropTabToSection(tab, i, true)}
+                   onDropSection={section => this.handleDropSectionToSection(section, i, true)} />
+          {child.element}
+          <Divider horizontal={!horizontal}
+                   onDropTab={tab => this.handleDropTabToSection(tab, i)}
+                   onDropSection={section => this.handleDropSectionToSection(section, i)} />
+        </div>
+      );
     });
     if (elements.length) {
       const firstIndex = children.indexOf(visibleChildren[0]);
       const lastIndex = children.indexOf(visibleChildren[visibleChildren.length - 1]);
       elements.unshift(
         <Divider key="divider-first" horizontal={horizontal}
-                 onDropTab={tab => this.handleDropTabToContainer(tab, firstIndex)} />
+                 onDropTab={tab => this.handleDropTabToContainer(tab, firstIndex)}
+                 onDropSection={section => this.handleDropSectionToContainer(section, firstIndex)} />
       );
       elements.push(
         <Divider key="divider-last" horizontal={horizontal}
-                 onDropTab={tab => this.handleDropTabToContainer(tab, lastIndex + 1)} />
+                 onDropTab={tab => this.handleDropTabToContainer(tab, lastIndex + 1)}
+                 onDropSection={section => this.handleDropSectionToContainer(section, lastIndex + 1)} />
       );
     } else {
       elements.push(
         <Droppable key="empty" className={styles.wrapper} droppingClassName={styles.dropping}
-                   onDropTab={tab => this.handleDropTabToContainer(tab)} />
+                   onDropTab={tab => this.handleDropTabToContainer(tab)}
+                   onDropSection={section => this.handleDropSectionToContainer(section)} />
       );
     }
 

src/frontend/workspace/components/WSTabContainer/index.jsx

@@ -26,7 +26,7 @@ class WSTabContainer extends React.Component {
     e.stopPropagation();
     draggingData.set(e, {
       type: 'section',
-      section: this.section,
+      section: this.core,
     })
   }
 

src/frontend/workspace/components/WSTabContainer/stylesheet.scss

@@ -43,6 +43,7 @@
 
       &.fake {
         &:first-child {
+          flex-shrink: 0;
           width: $line-height / 2;
         }
 

src/frontend/workspace/core/TabContainer.js

@@ -22,13 +22,13 @@ class TabContainer extends parentMixin(Section) {
   }
 
   addChild(child, index = this.children.length) {
-    this.tabIndex = index;
     super.addChild(child, index);
+    this.setTabIndex(Math.min(index, this.children.length - 1));
   }
 
   removeChild(index) {
-    this.tabIndex = Math.min(this.tabIndex, this.children.length - 2);
     super.removeChild(index);
+    this.setTabIndex(Math.min(this.tabIndex, this.children.length - 1));
   }
 
   setTabIndex(tabIndex) {

src/frontend/workspace/core/mixins/parentMixin.js

@@ -14,8 +14,15 @@ const parentMixin = (Base = Child) => class Parent extends Base {
   }
 
   addChild(child, index = this.children.length) {
-    this.children.splice(index, 0, child);
-    child.setParent(this);
+    if (child.parent === this) {
+      const oldIndex = this.children.indexOf(child);
+      this.children[oldIndex] = null;
+      this.children.splice(index, 0, child);
+      this.children = this.children.filter(child => child);
+    } else {
+      this.children.splice(index, 0, child);
+      child.setParent(this);
+    }
     this.render();
   }