⚡ 🐛 improve reliability of Tab/Editor/File models, resolve some issues

Author: hackape

app/components/Editor/components/CodeMirrorEditor/index.jsx

@@ -62,20 +62,22 @@ class CodeMirrorEditor extends Component {
 
   componentDidMount () {
     const { themeName, editor, file } = this.props
-    let cmInitialized = false
+
+    let isCmFreshlyInit = false
     // todo add other setting item from config
     if (editor.cm) {
       this.cm = editor.cm
       this.cmContainer.appendChild(this.cm.getWrapperElement())
     } else {
       this.cm = editor.cm = initializeEditor(this.cmContainer, themeName)
-      cmInitialized = true
+      isCmFreshlyInit = true
     }
-    const cm = this.cm
 
-    if (cmInitialized && file) {
-      if (file.content) cm.setValue(file.content)
-      const modeInfo = getMode(file)
+    const cm = this.cm
+    if (isCmFreshlyInit) {
+      cm.setValue(editor.content)
+      let modeInfo
+      if (file) modeInfo = getMode(file)
       if (modeInfo) {
         let mode = modeInfo.mode
         if (mode === 'null') {
@@ -131,15 +133,15 @@ class CodeMirrorEditor extends Component {
   onChange = (e) => {
     if (!this.isChanging) this.isChanging = true
     const { tab, file } = this.props
-    FileStore.updateFile({
-      id: file.id,
-      content: this.cm.getValue(),
-    })
     TabStore.updateTab({
       id: tab.id,
       flags: { modified: true },
     })
     if (file) debounced(() => {
+      FileStore.updateFile({
+        id: file.id,
+        content: this.cm.getValue(),
+      })
       dispatchCommand('file:save')
       this.isChanging = false
     })
@@ -196,13 +198,20 @@ class TablessCodeMirrorEditor extends Component {
     this.cm.on('change', this.onChange)
   }
 
+  componentWillUnmount () {
+    this.cm.off('change', this.onChange)
+  }
+
   onChange = (e) => {
     TabStore.createTab({
+      flags: { modified: true },
       tabGroup: {
         id: this.props.tabGroupId,
       },
-      flags: { modified: true },
-      content: this.cm.getValue()
+      editor: {
+        content: this.cm.getValue(),
+        cm: this.cm,
+      },
     })
   }
 

app/components/Editor/state.js

@@ -1,5 +1,7 @@
 import uniqueId from 'lodash/uniqueId'
+import is from 'utils/is'
 import { extendObservable, observable, computed, action } from 'mobx'
+import CodeMirror from 'codemirror'
 import FileStore from 'commons/File/store'
 
 const state = observable({
@@ -9,12 +11,8 @@ const state = observable({
 class Editor {
   constructor (props={}) {
     this.id = uniqueId('editor_')
-    if (props.filePath) this.filePath = props.filePath
-    if (!this.file && props.content) {
-      this._content = props.content
-    }
-    if (props.gitBlame) this.gitBlame = props.gitBlame
     state.entities.set(this.id, this)
+    this.update(props)
   }
 
   @observable tabId = ''
@@ -30,10 +28,17 @@ class Editor {
   @computed get content () {
     return this.file ? this.file.content : this._content
   }
+  set content (v) { return this._content = v }
 
   @action update (props={}) {
-    if (props.filePath) this.filePath = props.filePath
-    if (props.gitBlame) this.gitBlame = props.gitBlame
+    if (is.string(props.tabId)) this.tabId = props.tabId
+    if (is.string(props.filePath)) this.filePath = props.filePath
+    if (is.pojo(props.gitBlame)) this.gitBlame = props.gitBlame
+    // file
+    if (!this.file && props.content) {
+      this._content = props.content
+    }
+    if (props.cm instanceof CodeMirror) this.cm = props.cm
   }
 }
 

app/components/Tab/actions.js

@@ -5,12 +5,8 @@ import store from 'mobxStore'
 
 export const TAB_CREATE = 'TAB_CREATE'
 export const createTab = registerAction(TAB_CREATE,
-  (tabConfig) => {
-    const tab = new Tab(tabConfig)
-    if (!tab.tabGroup) {
-      const activeTabGroup = state.activeTabGroup
-      activeTabGroup.addTab(tab)
-    }
+  (tabProps) => {
+    const tab = new Tab(tabProps)
   },
 )
 
@@ -51,15 +47,15 @@ export const removeGroup = registerAction('tab:remove_tab_group',
 )
 
 export const updateTab = registerAction('tab:update',
-  (tabConfig={}) => {
-    const tabId = tabConfig.id
+  (tabProps={}) => {
+    const tabId = tabProps.id
     const tab = state.tabs.get(tabId)
-    if (tab) tab.update(tabConfig)
+    if (tab) tab.update(tabProps)
   }
 )
 
 export const TAB_UPDATE_BY_PATH = 'TAB_UPDATE_BY_PATH'
-export const updateTabByPath = registerAction(TAB_UPDATE_BY_PATH, (tabConfig = {}) => tabConfig)
+export const updateTabByPath = registerAction(TAB_UPDATE_BY_PATH, (tabProps = {}) => tabProps)
 
 export const TAB_UPDATE_FLAGS = 'TAB_UPDATE_FLAGS'
 export const updateTabFlags = registerAction('tab:update_flags', (tabId, flag, value=true) => {

app/components/Tab/state.js

@@ -1,48 +1,77 @@
+import uniqueId from 'lodash/uniqueId'
+import is from 'utils/is'
 import { extendObservable, observable, computed, action } from 'mobx'
 import { TabStateScope } from 'commons/Tab'
 import PaneState from 'components/Pane/state'
 import EditorState, { Editor } from 'components/Editor/state'
 import FileState, { FileNode } from 'commons/File/state'
 
-const { Tab: BaseTab, TabGroup: BaseTabGroup, entities: state } = TabStateScope()
+const { Tab: BaseTab, TabGroup: BaseTabGroup, state } = TabStateScope()
 
 class Tab extends BaseTab {
   constructor (props={}) {
-    super(props)
-    let editor
-    if (props.editor) {
-      editor = new Editor(props.editor)
-      editor.tabId = this.id
+    super()
+    this.id = is.undefined(props.id) ? uniqueId('tab_') : props.id
+    state.tabs.set(this.id, this)
+    console.log('the tab', this);
+    this.update(props)
+  }
+
+  @action update (props={}) {
+    if (is.string(props.title)) this.title = props.title
+    if (is.pojo(props.flags)) this.flags = props.flags
+
+    // tabGroup
+    let tabGroup
+    if (props.tabGroup && props.tabGroup.id) {
+      tabGroup = state.tabGroups.get(props.tabGroup.id)
+    }
+    if (!tabGroup) tabGroup = state.activeTabGroup
+    if (this.tabGroup !== tabGroup) { tabGroup && tabGroup.addTab(this) }
+
+    // editor
+    if (!props.editor) props.editor = {}
+    props.editor.tabId = this.id
+    if (this.editor) {
+      this.editor.update(props.editor)
+    } else {
+      new Editor(props.editor)
     }
+
   }
 
   @observable flags = {}
 
+  @computed get title () {
+    if (this.file) {
+      return this.file.name
+    } else {
+      return this._title
+    }
+  }
+
+  set title (v) { return this._title = v }
+
   @computed get editor () {
     return EditorState.entities.values().find(editor => editor.tabId === this.id)
   }
+  set editor (editor) {
+    if (editor) editor.tabId = this.id
+    return editor
+  }
 
   @computed get file () {
     const editor = this.editor
     return editor ? editor.file : null
   }
-
-  @action update (props={}) {
-    if (props.title) this.title = props.title
-    if (props.flags) this.flags = props.flags
-    if (this.editor) {
-      this.editor.update(props.editor)
-    } else if (props.editor) {
-      editor = new Editor(props.editor)
-      editor.tabId = this.id
-    }
-  }
 }
 
 class TabGroup extends BaseTabGroup {
   static Tab = Tab;
   constructor (props={}) {
-    super(props)
+    super()
+    this.id = is.undefined(props.id) ? uniqueId('tab_group_') : props.id
+    state.tabGroups.set(this.id, this)
     extendObservable(this, props)
   }