From ba65b9544d610d0fa39eaf434bf6aa96d2aa8c02 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Wed, 9 Jan 2019 12:54:21 +0100 Subject: [PATCH] update with commented out code, errors for discussion and a question --- src/app.js | 34 +++---- src/app/components/plugin-manager-api.js | 24 ++--- .../components/plugin-manager-component.js | 86 +++++++++++------ src/app/components/plugin-manager-proxy.js | 4 +- src/app/components/swap-panel-api.js | 9 +- src/app/components/swap-panel-component.js | 11 +-- src/app/components/vertical-icons-api.js | 13 +-- .../components/vertical-icons-component.js | 92 +++++++++++-------- src/app/editor/SourceHighlighters.js | 50 +++++----- src/app/files/fileManager.js | 4 +- src/app/panels/editor-panel.js | 2 +- src/app/panels/left-icon-panel.js | 1 - src/universal-dapp.js | 1 - 13 files changed, 170 insertions(+), 161 deletions(-) diff --git a/src/app.js b/src/app.js index efc62d8c9b..dd36032dc0 100644 --- a/src/app.js +++ b/src/app.js @@ -39,12 +39,12 @@ const PluginManagerComponent = require('./app/components/plugin-manager-componen const PluginManagerApi = require('./app/components/plugin-manager-api') const VerticalIconsComponent = require('./app/components/vertical-icons-component') -const VerticalIconsApi = require('./app/components/vertical-icons-api') +// const VerticalIconsApi = require('./app/components/vertical-icons-api') const SwapPanelComponent = require('./app/components/swap-panel-component') -const SwapPanelApi = require('./app/components/swap-panel-api') +// const SwapPanelApi = require('./app/components/swap-panel-api') -const AppManager = require('remix-plugin').AppManager +// const AppManager = require('remix-plugin').AppManager var styleGuide = require('./app/ui/styles-guide/theme-chooser') var styles = styleGuide.chooser() @@ -178,7 +178,7 @@ class App { } } _adjustLayout (direction, delta) { - /*var self = this + /* var self = this var layout = self.data._layout[direction] if (layout) { if (delta === undefined) { @@ -211,7 +211,7 @@ class App { methods: ['getExecutionContextProvider', 'getProviderEndpoint', 'detectNetWork', 'addProvider', 'removeProvider'] } } - + render () { var self = this if (self._view.el) return self._view.el @@ -235,7 +235,7 @@ class App { ${''} ` - + self._view.el = yo`
${self._view.iconpanel} @@ -310,12 +310,12 @@ class App { }) } - addProvider (name, url, cb) { + addProvider (name, url, cb) { executionContext.addProvider({ name, url }) cb() } - removeProvider (name, cb) { + removeProvider (name, cb) { executionContext.removeProvider(name) cb() } @@ -400,7 +400,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org */ const txListenerModuleProxy = { event: new EventEmitter(), - profile() { + profile () { return { type: 'txListener', events: ['newTransaction'] @@ -427,21 +427,21 @@ Please make a backup of your contracts and start using http://remix.ethereum.org // ----------------- Renderer ----------------- var renderer = new Renderer() registry.put({api: renderer, name: 'renderer'}) - + // ----------------- app manager ---------------------------- /* TODOs: - for each activated plugin, an internal module (associated only with the plugin) should be created for accessing specific part of the UI. detail to be discussed - - the current API is not optimal. For instance methods of `app` only refers to `executionContext`, wich does not make really sense. + - the current API is not optimal. For instance methods of `app` only refers to `executionContext`, wich does not make really sense. */ - const appManager = new AppManager({modules: [],plugins : []}) + // const appManager = new AppManager({modules: [], plugins: []}) const swapPanelComponent = new SwapPanelComponent() const pluginManagerComponent = new PluginManagerComponent( - { + { app: this, udapp: udapp, fileManager: fileManager, @@ -452,12 +452,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org registry.put({api: pluginManagerComponent.proxy(), name: 'pluginmanager'}) self._components.editorpanel.init() - self._components.fileManager.init() - + self._components.fileManager.init() + const verticalIconComponent = new VerticalIconsComponent() - const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent) - const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, pluginManagerComponent) + // const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconComponent, pluginManagerComponent) + // const verticalIconsApi = new VerticalIconsApi(verticalIconComponent, pluginManagerComponent) const pluginManagerAPI = new PluginManagerApi(pluginManagerComponent) self._view.mainpanel.appendChild(self._components.editorpanel.render()) diff --git a/src/app/components/plugin-manager-api.js b/src/app/components/plugin-manager-api.js index 865c0b3ce6..66acb32242 100644 --- a/src/app/components/plugin-manager-api.js +++ b/src/app/components/plugin-manager-api.js @@ -1,31 +1,19 @@ -var yo = require('yo-yo') -var csjs = require('csjs-inject') -const remixLib = require('remix-lib') - -const styleguide = require('../ui/styles-guide/theme-chooser') -const styles = styleguide.chooser() +// const remixLib = require('remix-lib') class PluginManagerApi { constructor (pluginManagerComponent) { + this.component = pluginManagerComponent pluginManagerComponent.event.on('activation', (item) => this.event.emit('activation', item)) // listen by appManager pluginManagerComponent.event.on('deactivation', (item) => this.event.emit('deactivation', item)) // listen by appManager } - /* - function called by appManager - */ - addItem (item) { - // add to appManager and then render - this.renderItem(item) - } - init (data) { - for (var m in data.modules) { - this.renderItem(item) + for (var m in data.modules) { + this.renderItem(m) } - for (var m in data.plugins) { - this.renderItem(item) + for (var n in data.plugins) { + this.renderItem(n) } } } diff --git a/src/app/components/plugin-manager-component.js b/src/app/components/plugin-manager-component.js index 1ca95bf82f..9f2b842639 100644 --- a/src/app/components/plugin-manager-component.js +++ b/src/app/components/plugin-manager-component.js @@ -12,12 +12,12 @@ const RunTab = require('../tabs/run-tab') var registry = require('../../global/registry') -const styleguide = require('../ui/styles-guide/theme-chooser') -const styles = styleguide.chooser() +// const styleguide = require('../ui/styles-guide/theme-chooser') +// const styles = styleguide.chooser() const PluginManagerProxy = require('./plugin-manager-proxy') -const EventEmitter = require ('events') +const EventEmitter = require('events') class PluginManagerComponent { @@ -44,9 +44,13 @@ class PluginManagerComponent { 'Settings': { name: 'Settings', Type: SettingsTab, icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwYXRoIGQ9Ik00OSwyNy45NTR2LTZsLTcuMTQxLTEuMTY3ICBjLTAuNDIzLTEuNjkxLTEuMDg3LTMuMjgxLTEuOTYyLTQuNzM3bDQuMTYyLTUuOTMybC00LjI0My00LjI0MWwtNS44NTYsNC4yMWMtMS40Ni0wLjg4NC0zLjA2LTEuNTU4LTQuNzYzLTEuOTgybC0xLjI0NS03LjEwNmgtNiAgbC0xLjE1Niw3LjA4M2MtMS43MDQsMC40MTgtMy4zMTMsMS4wODMtNC43NzcsMS45NjNMMTAuMTgsNS44NzNsLTQuMjQzLDQuMjQxbDQuMTA3LDUuODc0Yy0wLjg4OCwxLjQ3LTEuNTYzLDMuMDc3LTEuOTkyLDQuNzkyICBMMSwyMS45NTR2Nmw3LjA0NCwxLjI0OWMwLjQyNSwxLjcxMSwxLjEwMSwzLjMxOCwxLjk5Miw0Ljc5bC00LjE2Myw1LjgyM2w0LjI0MSw0LjI0NWw1Ljg4MS00LjExOSAgYzEuNDY4LDAuODgyLDMuMDczLDEuNTUyLDQuNzc3LDEuOTczbDEuMTgsNy4wODdoNmwxLjI2MS03LjEwNWMxLjY5NS0wLjQzLDMuMjk3LTEuMTA1LDQuNzUxLTEuOTlsNS45MjIsNC4xNTVsNC4yNDItNC4yNDUgIGwtNC4yMjctNS44N2MwLjg3NS0xLjQ1NiwxLjUzOS0zLjA0OCwxLjk1OC00LjczOUw0OSwyNy45NTR6IE0yNSwzM2MtNC40MTgsMC04LTMuNTgyLTgtOHMzLjU4Mi04LDgtOHM4LDMuNTgyLDgsOFMyOS40MTgsMzMsMjUsMzMgIHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==' } } this.activated = {} // list all activated modules + // this.activated = [] // list all activated modules this.plugins = [] this.data = {} this.data.proxy = new PluginManagerProxy() + + // This load the state from localstorage first then from the second parameter is nothing is found in localstorage + // this.store = Store.fromLocal('***', {}) // Or EntityStore.fromLocal('***', {}, 'id') } proxy () { @@ -70,21 +74,52 @@ class PluginManagerComponent { } render () { - var self = this + // var self = this // loop over all this.modules and this.plugins - return yo` + let pluginManagerDiv = yo`
- list all modules / plugins that can be activated +

Plugin Manager

+
+ ` + for (var mod in this.modulesDefinition) { + if (this.modulesDefinition[mod].icon) pluginManagerDiv.appendChild(this.renderItem(mod)) + } + console.log(this.activated) + return pluginManagerDiv + } + + renderItem (item) { + let ctrBtns + if (this.activated.hasOwnProperty(item)) { + ctrBtns = yo` + + ` + } else { + ctrBtns = yo` + + ` + } + this.plugins.push(item) + // var self = this + return yo` +
+ ${this.modulesDefinition[item].name} + ${ctrBtns}
` } activatePlugin (jsonProfile, api) { - let profile = { json: jsonProfile, api } - let plugin = new Plugin(profile, api) - this.appManager.addPlugin(plugin) - this.event.emit('displayableModuleActivated', jsonProfile, plugin.render()) - this.activated[jsonProfile.name] = plugin + // let profile = { json: jsonProfile, api } + // let plugin = new Plugin(profile, api) + // this.appManager.addPlugin(plugin) + // this.event.emit('displayableModuleActivated', jsonProfile, plugin.render()) + // this.activated[jsonProfile.name] = plugin + } + + deactivateInternal (name) { + delete this.activated[name] + this.event.emit('removingItem', name) } activateInternal (name) { @@ -116,32 +151,23 @@ class PluginManagerComponent { _deactivate (item) { this.event.emit('deactivation', item) } - - renderItem (item) { - this.plugins.push(item) - var self = this - var view = yo` -
- ${item.name} - ${item.url} - - -
- ` - } } module.exports = PluginManagerComponent const css = csjs` - .plugins { + .plugins { width : 300px; } - .plugItIn { - display : none; + .plugin { + border-bottom: 1px black solid; + padding: 10px 20px; + margin-bottom: 20px; + } + .plugItIn.active { + display: block; } - .plugItIn.active { - display :block; + .plugin button { + cursor: pointer; } - .clearFunds { background-color: lightblue; } ` diff --git a/src/app/components/plugin-manager-proxy.js b/src/app/components/plugin-manager-proxy.js index f4849aa534..2aa9508235 100644 --- a/src/app/components/plugin-manager-proxy.js +++ b/src/app/components/plugin-manager-proxy.js @@ -1,5 +1,3 @@ -var yo = require('yo-yo') - var registry = require('../../global/registry') const CompilerAbstract = require('../compiler/compiler-abstract') @@ -9,7 +7,7 @@ const EventManager = require('remix-lib').EventManager class PluginManagerProxy { constructor () { - this.event = new EventManager + this.event = new EventManager() } register (mod, instance) { diff --git a/src/app/components/swap-panel-api.js b/src/app/components/swap-panel-api.js index 24cbd40ce5..9a37f76075 100644 --- a/src/app/components/swap-panel-api.js +++ b/src/app/components/swap-panel-api.js @@ -1,11 +1,4 @@ -var yo = require('yo-yo') -var csjs = require('csjs-inject') -const remixLib = require('remix-lib') - -const styleguide = require('../ui/styles-guide/theme-chooser') -const styles = styleguide.chooser() - -const EventEmmitter = require('events') +// const EventEmmitter = require('events') class SwapPanelApi { constructor (swapPanelComponent, verticalIconsComponent, pluginManagerComponent) { diff --git a/src/app/components/swap-panel-component.js b/src/app/components/swap-panel-component.js index c10bfbe715..525c2e8667 100644 --- a/src/app/components/swap-panel-component.js +++ b/src/app/components/swap-panel-component.js @@ -1,9 +1,9 @@ var yo = require('yo-yo') var csjs = require('csjs-inject') -const remixLib = require('remix-lib') +// const remixLib = require('remix-lib') -const styleguide = require('../ui/styles-guide/theme-chooser') -const styles = styleguide.chooser() +// const styleguide = require('../ui/styles-guide/theme-chooser') +// const styles = styleguide.chooser() class SwapPanelComponent { constructor () { @@ -26,15 +26,14 @@ class SwapPanelComponent { console.log(`${moduleName} not found`) } - add (moduleName, content) { this.contents[moduleName] = yo`
${content}
` this.view.appendChild(this.contents[moduleName]) this.showContent(moduleName) - } + } render () { - this.view = yo` + this.view = yo`
` diff --git a/src/app/components/vertical-icons-api.js b/src/app/components/vertical-icons-api.js index 0ddd3c21bc..3c4ba39ef0 100644 --- a/src/app/components/vertical-icons-api.js +++ b/src/app/components/vertical-icons-api.js @@ -1,16 +1,9 @@ -var yo = require('yo-yo') -var csjs = require('csjs-inject') -const remixLib = require('remix-lib') - -const styleguide = require('../ui/styles-guide/theme-chooser') -const styles = styleguide.chooser() - // API class VerticalIconsApi { - constructor(verticalIconsComponent, pluginManagerComponent) { + constructor (verticalIconsComponent, pluginManagerComponent) { this.component = verticalIconsComponent - pluginManagerComponent.event.on('requestContainer', (mod, content) => verticalIconsComponent.addIcon(mod) ) - } + pluginManagerComponent.event.on('requestContainer', (mod, content) => verticalIconsComponent.addIcon(mod)) + } } module.exports = VerticalIconsApi diff --git a/src/app/components/vertical-icons-component.js b/src/app/components/vertical-icons-component.js index 3364da36e9..6977234217 100644 --- a/src/app/components/vertical-icons-component.js +++ b/src/app/components/vertical-icons-component.js @@ -1,44 +1,58 @@ var yo = require('yo-yo') var csjs = require('csjs-inject') -const remixLib = require('remix-lib') +// const remixLib = require('remix-lib') -const styleguide = require('../ui/styles-guide/theme-chooser') -const styles = styleguide.chooser() +// const styleguide = require('../ui/styles-guide/theme-chooser') +// const styles = styleguide.chooser() const EventEmmitter = require('events') - - // Component - class VerticalIconComponent { - - constructor() { - this.event = new EventEmmitter - } - - addIcon (mod) { - let self = this - this.view.appendChild(yo`
{ self._iconClick(mod.name)}} title=${mod.name}>${mod.name}
`) - } - - removeIcon (item) { - - } - - select (name) { - this.event.emit('showContent', name) - } - - _iconClick (name) { - // called when an icon has been clicked - this.event.emit('showContent', name) - } - - render() { - this.view = yo` -
-
- ` - return this.view - } - } - - module.exports = VerticalIconComponent + +// Component +class VerticalIconComponent { + + constructor () { + this.event = new EventEmmitter() + } + + addIcon (mod) { + let self = this + this.view.appendChild(yo`
{ self._iconClick(mod.name) }} title=${mod.name}>${mod.name}
`) + } + + removeIcon (item) { + + } + + select (name) { + this.event.emit('showContent', name) + } + + _iconClick (name) { + // called when an icon has been clicked + this.event.emit('showContent', name) + } + + render () { + this.view = yo` +
+
+ ` + return this.view + } +} + +module.exports = VerticalIconComponent + +const css = csjs` + .icons { + margin-left: 10px; + margin-top: 15px; + } + .icon { + cursor: pointer; + margin-bottom: 25px; + } + .icon img { + width: 25px; + } +` diff --git a/src/app/editor/SourceHighlighters.js b/src/app/editor/SourceHighlighters.js index e5eaa3d92b..8902235fe5 100644 --- a/src/app/editor/SourceHighlighters.js +++ b/src/app/editor/SourceHighlighters.js @@ -3,33 +3,33 @@ var SourceHighlighter = require('./sourceHighlighter') module.exports = class SourceHighlighters { - constructor () { - this.highlighters = {} - } + constructor () { + this.highlighters = {} + } - profile () { - return { - type: 'sourcehighlighter', - methods: ['highlight', 'discardHighlight'] - } + profile () { + return { + type: 'sourcehighlighter', + methods: ['highlight', 'discardHighlight'] } + } - // TODO what to do with mod? - highlight (mod, lineColumnPos, filePath, hexColor, cb) { - var position - try { - position = JSON.parse(lineColumnPos) - } catch (e) { - return cb(e.message) - } - if (!highlighters[mod]) highlighters[mod] = new SourceHighlighter() - highlighters[mod].currentSourceLocation(null) - highlighters[mod].currentSourceLocationFromfileName(position, filePath, hexColor) - cb() + // TODO what to do with mod? + highlight (mod, lineColumnPos, filePath, hexColor, cb) { + var position + try { + position = JSON.parse(lineColumnPos) + } catch (e) { + return cb(e.message) } + if (!highlighters[mod]) highlighters[mod] = new SourceHighlighter() + highlighters[mod].currentSourceLocation(null) + highlighters[mod].currentSourceLocationFromfileName(position, filePath, hexColor) + cb() + } - discardHighlight (mod, cb) { - if (highlighters[mod]) highlighters[mod].currentSourceLocation(null) - cb() - } -} \ No newline at end of file + discardHighlight (mod, cb) { + if (highlighters[mod]) highlighters[mod].currentSourceLocation(null) + cb() + } +} diff --git a/src/app/files/fileManager.js b/src/app/files/fileManager.js index 65b8d19cb2..a32ef613c8 100644 --- a/src/app/files/fileManager.js +++ b/src/app/files/fileManager.js @@ -2,7 +2,7 @@ var $ = require('jquery') var yo = require('yo-yo') -var EventEmitter = require ('events') +var EventEmitter = require('events') var EventManager = require('../../lib/events') var globalRegistry = require('../../global/registry') var CompilerImport = require('../compiler/compiler-imports') @@ -116,7 +116,7 @@ class FileManager { cb(null, path) } } - + getFile (path, cb) { var provider = this.fileProviderOf(path) if (provider) { diff --git a/src/app/panels/editor-panel.js b/src/app/panels/editor-panel.js index 6dc8f84467..6a8fda6d07 100644 --- a/src/app/panels/editor-panel.js +++ b/src/app/panels/editor-panel.js @@ -40,7 +40,7 @@ class EditorPanel { } } self._view = {} - + var contextualListener = new ContextualListener({editor: self._components.editor, pluginManager: self._deps.pluginManager}) var contextView = new ContextView({contextualListener, editor: self._components.editor}) diff --git a/src/app/panels/left-icon-panel.js b/src/app/panels/left-icon-panel.js index c68a84235f..e6121dad3a 100644 --- a/src/app/panels/left-icon-panel.js +++ b/src/app/panels/left-icon-panel.js @@ -69,7 +69,6 @@ module.exports = class LeftIconPanel { {type: 'settings', displayName: 'setting', icon: 'fa fa-cog fa-2x'} ] } - swapPlugin (name) { console.log(name) diff --git a/src/universal-dapp.js b/src/universal-dapp.js index f15cb7d2b7..70a5b48adf 100644 --- a/src/universal-dapp.js +++ b/src/universal-dapp.js @@ -321,7 +321,6 @@ UniversalDApp.prototype.runTestTx = function (tx, cb) { }) } - /** * This function send a tx without alerting the user (if mainnet or if gas estimation too high). * SHOULD BE TAKEN CAREFULLY!