Merge pull request #116 from Coding/hackape/pane-tabGroup-fix

address coding/WebIDE#180

Author: hackape

app/commons/Pane/state.js

@@ -0,0 +1,69 @@
+import { extendObservable, observable, computed } from 'mobx'
+
+function PaneScope () {
+  const state = observable({
+    entities: observable.map({})
+  })
+
+  class BasePane {
+    constructor (paneConfig) {
+      const defaults = {
+        flexDirection: 'row',
+        size: 100,
+        parentId: '',
+        index: 0,
+      }
+
+      paneConfig = { ...defaults, ...paneConfig }
+      extendObservable(this, paneConfig)
+      state.entities.set(this.id, this)
+    }
+
+    @computed
+    get isRoot () {
+      return !Boolean(this.parentId)
+    }
+
+    @computed
+    get parent () {
+      const parent = state.entities.get(this.parentId)
+      if (parent === this) throw Error(`Pane/Panel ${this.id} is parent of itself.`)
+      return parent
+    }
+
+    @computed
+    get views () {
+      return state.entities.values()
+        .filter(pane => pane.parentId === this.id)
+        .sort((a, b) => a.index - b.index)
+    }
+
+    @computed
+    get siblings () {
+      if (!this.parent) return [this]
+      return this.parent.views
+    }
+
+    @computed
+    get leafChildren () {
+      if (!this.views.length) return [this]
+      return this.views.reduce((acc, child) =>
+        acc.concat(child.leafChildren)
+      , [])
+    }
+
+    @computed
+    get prev () {
+      return this.siblings[this.index - 1]
+    }
+
+    @computed
+    get next () {
+      return this.siblings[this.index + 1]
+    }
+  }
+
+  return { BasePane, state }
+}
+
+export default PaneScope

app/components/Pane/state.js

@@ -1,14 +1,16 @@
 import uniqueId from 'lodash/uniqueId'
 import { extendObservable, observable, computed, action, autorun, autorunAsync } from 'mobx'
 import EditorTabState, { TabGroup } from 'components/Editor/state'
+import PaneScope from 'commons/Pane/state'
 
-const state = observable({
-  panes: observable.map({}),
+const { state, BasePane } = PaneScope()
+
+extendObservable(state, {
+  get panes () { return this.entities },
   activePaneId: null,
-  rootPaneId: null,
   autoCloseEmptyPane: true,
   get rootPane () {
-    const rootPane = this.panes.get(this.rootPaneId)
+    const rootPane = this.panes.values().find(pane => pane.isRoot)
     return rootPane || this.panes.values()[0]
   },
   get activePane () {
@@ -17,51 +19,9 @@ const state = observable({
   },
 })
 
-class BasePane {
-  constructor (paneConfig) {
-    const defaults = {
-      id: uniqueId('pane_view_'),
-      flexDirection: 'row',
-      size: 100,
-      parentId: '',
-      index: 0,
-    }
-
-    paneConfig = Object.assign({}, defaults, paneConfig)
-    extendObservable(this, paneConfig)
-    state.panes.set(this.id, this)
-  }
-
-  @computed
-  get parent () {
-    return state.panes.get(this.parentId)
-  }
-
-  @computed
-  get views () {
-    return state.panes.values()
-      .filter(pane => pane.parentId === this.id)
-      .sort((a, b) => a.index - b.index)
-  }
-
-  @computed
-  get siblings () {
-    return this.parent.views
-  }
-
-  @computed
-  get prev () {
-    return this.siblings[this.index - 1]
-  }
-
-  @computed
-  get next () {
-    return this.siblings[this.index + 1]
-  }
-}
-
 class Pane extends BasePane {
   constructor (paneConfig) {
+    if (!paneConfig.id) paneConfig.id = uniqueId('pane_view_')
     super(paneConfig)
     this.contentType = 'tabGroup'
     const tabGroup = this.tabGroup || new TabGroup()
@@ -76,14 +36,6 @@ class Pane extends BasePane {
     return EditorTabState.tabGroups.get(this.contentId)
   }
 
-  @computed
-  get leafChildren () {
-    if (!this.views.length) return [this]
-    return this.views.reduce((acc, pane) => {
-      return acc.concat(pane.leafChildren)
-    }, [])
-  }
-
   @action
   destroy () {
     if (this.isRoot) return
@@ -110,29 +62,30 @@ class Pane extends BasePane {
 }
 
 const rootPane = new Pane({
-  id: 'pane_view_1',
   flexDirection: 'row',
   size: 100,
-  isRoot: true,
 })
 
 state.panes.set(rootPane.id, rootPane)
-state.rootPaneId = rootPane.id
 
-autorun(() => {
+autorun('normalize pane indexes', () => {
   state.panes.forEach(parentPane =>
     parentPane.views.forEach((pane, index) => {
       if (pane.index !== index) pane.index = index
     })
   )
 })
 
-autorunAsync(() => {
+autorunAsync('short-circuit unnecessary internal pane node', () => {
+  // pane.parent -> pane -> lonelyChild
+  // => pane.panret -> lonelyChild
+  //    delete pane
   state.panes.forEach(pane => {
-    if (!pane || pane.isRoot) return
+    if (!pane) return
     if (pane.views.length === 1) {
-      pane.contentId = pane.views[0].contentId
-      state.panes.delete(pane.views[0].id)
+      const lonelyChild = pane.views[0]
+      lonelyChild.parentId = pane.parentId
+      state.panes.delete(pane.id)
     }
   })
 })