panel resize

src/app.js

@@ -191,7 +191,7 @@ class App {
     self._view.swappanel.style.left = self._view.iconpanel.clientWidth + 'px'
     self._view.mainpanel.style.left = (self._view.iconpanel.clientWidth + self._view.swappanel.clientWidth) + 'px'
 
-    let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': '300' })
+    let resizeFeature = new PanelsResize('#swap-panel', '#editor-container', { 'minWidth': 300 })
     run.apply(self)
   }
 
@@ -412,7 +412,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // ----------------- editor panel ----------------------
   self._components.editorpanel = new EditorPanel()
   registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
-  
+
   // ----------------- Renderer -----------------
   var renderer = new Renderer()
   registry.put({api: renderer, name: 'renderer'})
@@ -429,7 +429,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   // TODOs those are instanciated before hand. should be instanciated on demand
 
   const pluginManagerComponent = new PluginManagerComponent()
-  
   let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} })
   const appManager = new RemixAppManager(appStore)
   registry.put({api: appManager.proxy(), name: 'pluginmanager'})
@@ -467,21 +466,16 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   { profile: pluginManagerComponent.profile(), api: pluginManagerComponent }])
 
   const swapPanelComponent = new SwapPanelComponent()
-  
   const verticalIconComponent = new VerticalIconsComponent()
   const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, appManager)
   const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, appManager)
 
   self._components.editorpanel.init()
   self._components.fileManager.init()
-  
+    
-  let mainEl = self._components.editorpanel.render()
+  self._view.mainpanel.appendChild(self._components.editorpanel.render())
-  self._view.mainpanel.appendChild(mainEl)
-
   self._view.iconpanel.appendChild(verticalIconComponent.render())
-
+  self._view.swappanel.appendChild(swapPanelComponent.render())
-  let swapEl = swapPanelComponent.render()
-  self._view.swappanel.appendChild(swapEl)
 
   appManager.activateOne('App')
   appManager.activateOne('Udapp')

src/lib/panels-resize.js

@@ -54,8 +54,8 @@ export default class PanelsResize {
     }
 
     let moveGhostbar = (event) => { // @NOTE VERTICAL ghostbar
-      let p = processWidth(event)
+      let p = processPositiions(event)
-      if (p.panel1Width < opt.minWidth || p.panel2Width < opt.minWidth) return
+      if (p.panel1Width <= opt.minWidth || p.panel2Width <= opt.minWidth) return
       ghostbar.style.left = event.x + 'px'
     }
 
@@ -64,17 +64,18 @@ export default class PanelsResize {
       document.removeEventListener('mousemove', moveGhostbar)
       document.removeEventListener('mouseup', removeGhostbar)
       document.removeEventListener('keydown', cancelGhostbar)
-      let p = processWidth(event)
+      let p = processPositiions(event)
-      if (p.panel1Width < opt.minWidth || p.panel2Width < opt.minWidth) return
       panel1.style.width = p.panel1Width + 'px'
       panel2.style.left = p.panel2left + 'px'
       panel2.style.width = p.panel2Width + 'px'
     }
 
-    let processWidth = (event) => {
+    let processPositiions = (event) => {
       let panel1Width = event.x - panel1.offsetLeft
+      panel1Width = panel1Width < opt.minWidth ? opt.minWidth : panel1Width
       let panel2left = panel1.offsetLeft + panel1Width
       let panel2Width = panel2.parentElement.clientWidth - panel1.offsetLeft - panel1Width
+      panel2Width = panel2Width < opt.minWidth ? opt.minWidth : panel2Width
       return { panel1Width, panel2left, panel2Width }
     }