fixing adding removing module

src/app/components/plugin-manager-component.js

@@ -96,12 +96,14 @@ class PluginManagerComponent {
     let action = (event) => {
       if (this.activated.hasOwnProperty(item)) {
         this.deactivateInternal(item)
+        event.target.innerHTML = 'activate'
       } else {
         this.activateInternal(item)
+        event.target.innerHTML = 'deactivate'
       }
     }
 
-    ctrBtns = yo`<div id='${item}'>
+    ctrBtns = yo`<div id='${item}Activation'>
         <button onclick=${(event) => { action(event) }} >${this.activated[item] ? 'deactivate' : 'activate'}</button>
         </div>`
     
@@ -125,12 +127,13 @@ class PluginManagerComponent {
   }
 
   deactivateInternal (name) {
+    if (!this.activated[name]) return
+    this.event.emit('removingItem', this.activated[name])
     delete this.activated[name]
-    this.event.emit('removingItem', name)
-    if (this.view) this.view.querySelector(`#${name} button`).innerHTML = 'activate'
   }
 
   activateInternal (name) {
+    if (this.activated[name]) return
     const mod = this.modulesDefinition[name]
     let dep
     if (mod.dep) dep = this.activateInternal(mod.dep)
@@ -149,7 +152,6 @@ class PluginManagerComponent {
       this.data.proxy.register(mod, instance)
     }
     this.activated[mod.name] = mod    
-    if (this.view) this.view.querySelector(`#${name} button`).innerHTML = 'deactivate'
     return instance
   }
 

src/app/components/swap-panel-api.js

@@ -9,6 +9,9 @@ class SwapPanelApi {
     pluginManagerComponent.event.on('requestContainer', (mod, content) => {
       this.add(mod.name, content)
     })
+    pluginManagerComponent.event.on('removingItem', (mod) => {
+      this.remove(mod.name)
+    })
   }
 
   /*
@@ -20,6 +23,10 @@ class SwapPanelApi {
     return this.component.add(moduleName, content)
   }
 
+  remove (moduleName) {
+    return this.component.remove(moduleName)
+  }
+
   reference (modulename, domElement) {
     this.nodes[modulename] = domElement
   }

src/app/components/swap-panel-component.js

@@ -27,10 +27,15 @@ class SwapPanelComponent {
   }
 
   add (moduleName, content) {
-    this.contents[moduleName] = yo`<div class=${css.plugItIn} >${content}</div>`
+    this.contents[moduleName] = yo`<div id='${moduleName}Content' class=${css.plugItIn} >${content}</div>`
     this.view.appendChild(this.contents[moduleName])
   }
 
+  remove (moduleName) {
+    var el = this.view.querySelector(`div#${moduleName}Content`)
+    el.parentElement.removeChild(el)
+  }
+
   render () {
     this.view = yo`
       <div id='plugins' class=${css.plugins} >

src/app/components/vertical-icons-api.js

@@ -4,6 +4,7 @@ class VerticalIconsApi {
   constructor (verticalIconsComponent, pluginManagerComponent) {
     this.component = verticalIconsComponent
     pluginManagerComponent.event.on('requestContainer', (mod, content) => verticalIconsComponent.addIcon(mod))
+    pluginManagerComponent.event.on('removingItem', (mod) => verticalIconsComponent.removeIcon(mod))
   }
 }
 module.exports = VerticalIconsApi

src/app/components/vertical-icons-component.js

@@ -16,11 +16,12 @@ class VerticalIconComponent {
 
   addIcon (mod) {
     let self = this
-    this.view.appendChild(yo`<div class="${css.icon}" onclick=${(e) => { self._iconClick(mod.name) }} title=${mod.name}><img src="${mod.icon}" alt="${mod.name}" /></div>`)
+    this.view.appendChild(yo`<div id="${mod.name}Icon" class="${css.icon}" onclick=${(e) => { self._iconClick(mod.name) }} title=${mod.name}><img src="${mod.icon}" alt="${mod.name}" /></div>`)
   }
 
-  removeIcon (item) {
+  removeIcon (mod) {
-
+    var el = this.view.querySelector(`#${mod.name}Icon`)
+    el.parentElement.removeChild(el)
   }
 
   select (name) {