From 60afaf8dbbf64984511e2b9ca6540064ae5b5588 Mon Sep 17 00:00:00 2001 From: yann300 Date: Wed, 13 Feb 2019 15:31:27 +0100 Subject: [PATCH] display plugins as tab --- src/app.js | 15 +++-- .../components/vertical-icons-component.js | 10 ++- src/app/panels/editor-panel.js | 45 +++++++++---- src/app/panels/tab-proxy.js | 64 +++++++++++++++---- 4 files changed, 97 insertions(+), 37 deletions(-) diff --git a/src/app.js b/src/app.js index 7fd016466d..69373f7a29 100644 --- a/src/app.js +++ b/src/app.js @@ -388,13 +388,18 @@ Please make a backup of your contracts and start using http://remix.ethereum.org // TODO: There are still a lot of dep between editorpanel and filemanager + let appStore = new EntityStore('module', { actives: [], ids: [], entities: {} }) + const appManager = new RemixAppManager(appStore) + + const mainPanelComponent = new SwapPanelComponent('mainPanel', appStore, appManager, { default: false }) + // ----------------- file manager ---------------------------- self._components.fileManager = new FileManager() var fileManager = self._components.fileManager registry.put({api: fileManager, name: 'filemanager'}) // ----------------- editor panel ---------------------- - self._components.editorpanel = new EditorPanel() + self._components.editorpanel = new EditorPanel(appStore, appManager, mainPanelComponent) registry.put({ api: self._components.editorpanel, name: 'editorpanel' }) // ----------------- Renderer ----------------- @@ -412,12 +417,9 @@ 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 - let appStore = new EntityStore('module') const pluginManagerComponent = new PluginManagerComponent() - const appManager = new RemixAppManager(appStore) const swapPanelComponent = new SwapPanelComponent('swapPanel', appStore, appManager, { default: true }) - const mainPanelComponent = new SwapPanelComponent('mainPanel', appStore, appManager, { default: false }) - const verticalIconsComponent = new VerticalIconsComponent(appStore) + const verticalIconsComponent = new VerticalIconsComponent('swapPanel', appStore) const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconsComponent) // eslint-disable-line const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line @@ -430,7 +432,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org self._components.editorpanel.init() self._components.fileManager.init() - self._view.mainpanel.appendChild(mainPanelComponent.render()) + self._view.mainpanel.appendChild(self._components.editorpanel.render()) self._view.iconpanel.appendChild(verticalIconsComponent.render()) self._view.swappanel.appendChild(swapPanelComponent.render()) @@ -464,7 +466,6 @@ Please make a backup of your contracts and start using http://remix.ethereum.org { profile: sourceHighlighters.profile(), api: sourceHighlighters }, { profile: configProvider.profile(), api: configProvider }, { profile: txListenerModuleProxy.profile(), api: txListenerModuleProxy }, - { profile: self._components.editorpanel.profile(), api: self._components.editorpanel }, { profile: filePanel.profile(), api: filePanel }, // { profile: support.profile(), api: support }, { profile: settings.profile(), api: settings }, diff --git a/src/app/components/vertical-icons-component.js b/src/app/components/vertical-icons-component.js index c29821d713..ff2c3d5326 100644 --- a/src/app/components/vertical-icons-component.js +++ b/src/app/components/vertical-icons-component.js @@ -6,15 +6,19 @@ const EventEmmitter = require('events') // Component class VerticalIconComponent { - constructor (appStore) { + constructor (name, appStore) { this.store = appStore this.event = new EventEmmitter() this.icons = {} this.iconKind = {} + this.name = name this.store.event.on('activate', (name) => { - const item = this.store.getOne(name) - if (item && item.profile.icon && name !== 'code editor') this.addIcon(item.profile) + const { profile } = this.store.getOne(name) + if (!profile.icon) return + if (profile.prefferedLocation === this.name || !profile.prefferedLocation) { + this.addIcon(profile) + } }) this.store.event.on('deactivate', (name) => { const item = this.store.getOne(name) diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js index d4ec83fa07..1878572937 100644 --- a/src/app/panels/editor-panel.js +++ b/src/app/panels/editor-panel.js @@ -13,24 +13,17 @@ var cssTabs = styles.cssTabs var css = styles.css class EditorPanel { - constructor (localRegistry) { + constructor (appStore, appManager, mainPanelComponent) { var self = this self.event = new EventManager() self._view = {} self._components = {} - self._components.registry = localRegistry || globalRegistry + self._components.registry = globalRegistry self._components.editor = new Editor({}) self._components.registry.put({api: self._components.editor, name: 'editor'}) - } - profile () { - return { - name: 'code editor', - methods: [], - events: [], - icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNjk2IDM4NHE0MCAwIDY4IDI4dDI4IDY4djEyMTZxMCA0MC0yOCA2OHQtNjggMjhoLTk2MHEtNDAgMC02OC0yOHQtMjgtNjh2LTI4OGgtNTQ0cS00MCAwLTY4LTI4dC0yOC02OHYtNjcycTAtNDAgMjAtODh0NDgtNzZsNDA4LTQwOHEyOC0yOCA3Ni00OHQ4OC0yMGg0MTZxNDAgMCA2OCAyOHQyOCA2OHYzMjhxNjgtNDAgMTI4LTQwaDQxNnptLTU0NCAyMTNsLTI5OSAyOTloMjk5di0yOTl6bS02NDAtMzg0bC0yOTkgMjk5aDI5OXYtMjk5em0xOTYgNjQ3bDMxNi0zMTZ2LTQxNmgtMzg0djQxNnEwIDQwLTI4IDY4dC02OCAyOGgtNDE2djY0MGg1MTJ2LTI1NnEwLTQwIDIwLTg4dDQ4LTc2em05NTYgODA0di0xMTUyaC0zODR2NDE2cTAgNDAtMjggNjh0LTY4IDI4aC00MTZ2NjQwaDg5NnoiLz48L3N2Zz4=', - description: ' - ', - prefferedLocation: 'mainPanel' - } + self.appStore = appStore + self.appManager = appManager + self.mainPanelComponent = mainPanelComponent } init () { var self = this @@ -41,7 +34,29 @@ class EditorPanel { udapp: self._components.registry.get('udapp').api, pluginManager: self._components.registry.get('pluginmanager').api } - self.tabProxy = new TabProxy(self._deps.fileManager, self._components.editor) + self.tabProxy = new TabProxy(self._deps.fileManager, self._components.editor, self.appStore, self.appManager) + /* + We listen here on event from the tab component to display / hide the editor and mainpanel + depending on the content that should be displayed + */ + self.tabProxy.event.on('switchFile', (file) => { + self._view.editor.style.display = 'block' + self._components.contextView.show() + self._view.mainPanel.style.display = 'none' + }) + self.tabProxy.event.on('closeFile', (file) => { + }) + self.tabProxy.event.on('switchApp', (name) => { + self.mainPanelComponent.showContent(name) + self._view.editor.style.display = 'none' + self._components.contextView.hide() + self._view.mainPanel.style.display = 'block' + }) + self.tabProxy.event.on('closeApp', (name) => { + self._view.editor.style.display = 'block' + self._components.contextView.hide() + self._view.mainPanel.style.display = 'none' + }) self.data = { _FILE_SCROLL_DELTA: 200, _layout: { @@ -108,6 +123,7 @@ class EditorPanel { var height = containerHeight - delta height = height < 0 ? 0 : height self._view.editor.style.height = `${delta}px` + self._view.mainPanel.style.height = `${delta}px` self._view.terminal.style.height = `${height}px` // - menu bar height self._components.editor.resize((document.querySelector('#editorWrap') || {}).checked) self._components.terminal.scroll2bottom() @@ -138,6 +154,8 @@ class EditorPanel { var self = this if (self._view.el) return self._view.el self._view.editor = self._components.editor.render() + self._view.mainPanel = self.mainPanelComponent.render() + self._view.mainPanel.style.display = 'none' self._view.terminal = self._components.terminal.render() self._view.content = yo`
@@ -146,6 +164,7 @@ class EditorPanel { ${self._components.contextView.render()}
${self._view.editor} + ${self._view.mainPanel} ${self._view.terminal} ` diff --git a/src/app/panels/tab-proxy.js b/src/app/panels/tab-proxy.js index e02fc986ba..2a268f3ea9 100644 --- a/src/app/panels/tab-proxy.js +++ b/src/app/panels/tab-proxy.js @@ -1,38 +1,41 @@ var yo = require('yo-yo') var $ = require('jquery') +const EventEmitter = require('events') var styles = require('./styles/editor-panel-styles') var css = styles.css export class TabProxy { - constructor (fileManager, editor) { + constructor (fileManager, editor, appStore, appManager) { + this.event = new EventEmitter() this.fileManager = fileManager + this.appManager = appManager this.editor = editor this.activeEntity this.entities = {} this.data = {} this._view = {} + this._handlers = {} fileManager.event.register('fileRemoved', (name) => { - const filesEl = document.querySelector('#files') - var file = filesEl.querySelector(`li[path="${name}"]`) - if (file) { - filesEl.removeChild(file) - } + this.removeTab(name) }) fileManager.event.register('fileClosed', (name) => { - const filesEl = document.querySelector('#files') - var file = filesEl.querySelector(`li[path="${name}"]`) - if (file) { - filesEl.removeChild(file) - } + this.removeTab(name) }) fileManager.event.register('currentFileChanged', (file) => { const filesEl = document.querySelector('#files') if (!filesEl.querySelector(`li[path="${file}"]`)) { - filesEl.appendChild(yo`
  • ${file}
    • `) + this.addTab(file, () => { + this.fileManager.switchFile(file) + this.event.emit('switchFile', file) + }, + () => { + this.fileManager.closeFile(file) + this.event.emit('closeFile', file) + }) } this.active(file) }) @@ -45,6 +48,37 @@ export class TabProxy { file.querySelector(`.name`).innerHTML = newName } }) + + appStore.event.on('activate', (name) => { + const { profile } = appStore.get(name) + if (profile.prefferedLocation === 'mainPanel') { + this.addTab(name, () => { + this.event.emit('switchApp', name) + }, () => { + this.event.emit('closeApp', name) + this.appManager.deactivateOne(name) + }) + } + }) + + appStore.event.on('deactivate', (name) => { + this.removeTab(name) + }) + } + + addTab (name, switchTo, close, kind) { + const filesEl = document.querySelector('#files') + filesEl.appendChild(yo`
  • ${name}
    • `) + this._handlers[name] = { switchTo, close } + } + + removeTab (name) { + const filesEl = document.querySelector('#files') + var file = filesEl.querySelector(`li[path="${name}"]`) + if (file) { + filesEl.removeChild(file) + delete this._handlers[name] + } } active (name) { @@ -97,7 +131,9 @@ export class TabProxy { var self = this $filesEl.on('click', '.file:not(.active)', function (ev) { ev.preventDefault() - self.fileManager.switchFile($(this).find('.name').text()) + var name = $(this).find('.name').text() + self._handlers[name].switchTo() + self.active(name) return false }) @@ -105,7 +141,7 @@ export class TabProxy { $filesEl.on('click', '.file .remove', function (ev) { ev.preventDefault() var name = $(this).parent().find('.name').text() - self.fileManager.closeFile(name) + self._handlers[name].close() return false })