From 70f4632e0a24ffff8858b241226604e6fd372956 Mon Sep 17 00:00:00 2001 From: Rob Stupay Date: Thu, 3 Jan 2019 14:33:16 +0100 Subject: [PATCH] with Yann --- src/app.js | 201 +++++++++++++----- src/app/components/plugin-manager-api.js | 26 +++ .../components/plugin-manager-component.js | 62 ++++++ src/app/components/swap-panel-api.js | 26 +++ src/app/components/swap-panel-component.js | 57 +++++ src/app/components/vertical-icons-api.js | 23 ++ .../components/vertical-icons-component.js | 39 ++++ src/app/panels/left-icon-panel.js | 183 ++++++++++++++++ 8 files changed, 559 insertions(+), 58 deletions(-) create mode 100644 src/app/components/plugin-manager-api.js create mode 100644 src/app/components/plugin-manager-component.js create mode 100644 src/app/components/swap-panel-api.js create mode 100644 src/app/components/swap-panel-component.js create mode 100644 src/app/components/vertical-icons-api.js create mode 100644 src/app/components/vertical-icons-component.js create mode 100644 src/app/panels/left-icon-panel.js diff --git a/src/app.js b/src/app.js index 4ebd885dfe..63de8c3af4 100644 --- a/src/app.js +++ b/src/app.js @@ -37,7 +37,17 @@ var toolTip = require('./app/ui/tooltip') var TransactionReceiptResolver = require('./transactionReceiptResolver') const CompilerAbstract = require('./app/compiler/compiler-abstract') -const PluginManager = require('./app/plugin/pluginManager') +// const PluginManager = require('./app/plugin/pluginManager') + +// var IconPanel = require('./app/panels/left-icon-panel') + +const VerticalIconsComponent = require('./app/components/vertical-icons-component') +const VerticalIconsApi = require('./app/components/vertical-icons-api') +// var VerticalIconsProfile = require('./app/panels/vertical-icons-profile') + +const SwapPanelComponent = require('./app/component/swap-panel-component') +const SwapPanelComponent = require('./app/component/swap-panel-api') + const CompileTab = require('./app/tabs/compile-tab') const SettingsTab = require('./app/tabs/settings-tab') const AnalysisTab = require('./app/tabs/analysis-tab') @@ -46,6 +56,8 @@ const SupportTab = require('./app/tabs/support-tab') const TestTab = require('./app/tabs/test-tab') const RunTab = require('./app/tabs/run-tab') +const appManager = require('remix-plugin').appManager + var styleGuide = require('./app/ui/styles-guide/theme-chooser') var styles = styleGuide.chooser() @@ -188,46 +200,53 @@ class App { } } if (direction === 'left') { - self._view.leftpanel.style.width = delta + 'px' - self._view.centerpanel.style.left = delta + 'px' - } - if (direction === 'right') { - self._view.rightpanel.style.width = delta + 'px' - self._view.centerpanel.style.right = delta + 'px' + self._view.swappanel.style.width = delta + 'px' + self._view.mainpanel.style.left = delta + 'px' } + // if (direction === 'right') { + // self._view.mainpanel.style.width = delta + 'px' + // self._view.swappanel.style.right = delta + 'px' + // } } init () { var self = this run.apply(self) } + render () { var self = this if (self._view.el) return self._view.el - self._view.leftpanel = yo` -
- ${''} + // not resizable + self._view.iconpanel = yo` +
+ ${''}
` - self._view.centerpanel = yo` -
+ + // center panel, resizable + self._view.swappanel = yo` +
${''}
` - self._view.rightpanel = yo` -
+ + // handle the editor + terminal + self._view.mainpanel = yo` +
${''}
` + self._view.el = yo`
- ${self._view.leftpanel} - ${self._view.centerpanel} - ${self._view.rightpanel} + ${self._view.iconpanel} + ${self._view.swappanel} + ${self._view.mainpanel}
` // INIT self._adjustLayout('left', self.data._layout.left.offset) - self._adjustLayout('right', self.data._layout.right.offset) + // self._adjustLayout('right', self.data._layout.right.offset) return self._view.el } startdebugging (txHash) { @@ -365,23 +384,113 @@ Please make a backup of your contracts and start using http://remix.ethereum.org var fileManager = self._components.fileManager registry.put({api: fileManager, name: 'filemanager'}) - // ---------------- Plugin Manager ------------------------------- - - let pluginManager = new PluginManager( - self, - self._components.compilersArtefacts, - txlistener, - self._components.fileProviders, - self._components.fileManager, - udapp) - registry.put({api: pluginManager, name: 'pluginmanager'}) - - pluginManager.event.register('sendCompilationResult', (file, source, languageVersion, data) => { - // TODO check whether the tab is configured - let compiler = new CompilerAbstract(languageVersion, data, source) - self._components.compilersArtefacts['__last'] = compiler + // ----------------- app manager ---------------------------- + const VerticalIconsProfile = { + type: 'verticalIcons', + methods: ['addIcon', 'removeIcon'], + } + + const SwapPanelProfile = { + type: 'swapPanel', + methods: ['addView', 'showContent'], + } + + const PluginManagerProfile = { + type: 'pluginManager', + methods: [], + } + + const FileManagerProfile = { + type: 'fileManager', + methods: [], + } + + const SettingsProfile = { + type: 'settings', + methods: [], + } + + const appManager = new appManager() + + const swapPanelComponent = new SwapPanelComponent() + const pluginManagerComponent = new PluginManagerComponent(appManager) + const verticalIconComponent = new VerticalIconsComponent(appManager) + + const swapPanelApi = new SwapPanelApi(swapPanelComponent) + const verticalIconApi = new VerticalsIconApi(verticalIconComponent) + const pluginManagerAPI = new pluginManagerAPI(pluginManagerComponent) + + self._components.filePanel = new FilePanel() + registry.put({api: self._components.filePanel, name: 'filepanel'}) + + var settings = new SettingsTab() + + // All Plugins and Modules are registered in the contructor + // You cannot add module after + appManager.init({ + // Module should be activated by default + modules: [ + { json: VerticalIconsProfile, api: verticalIconApi }, + { json: SwapPanelProfile, api: swapPanelApi }, + { json: PluginManagerProfile, api: pluginManagerApi }, + { json: FileManagerProfile, api: self._components.filePanel }, + { json: SettingsProfile, api: settings } + ], + // Plugins need to be activated + plugins: [], + options: { + bootstrap: 'pluginManager' + } }) + const compileTab = new CompileTab(self._components.registry) + const compileTabProfile = { + type: 'solidityCompile', + methods: [], + } + appManager.addPlugin({json: compileTabProfile, api: compileTab}) + + const testTab = new TestTab(self._components.registry, compileTab) + const testTabProfile = { + type: 'solidityUnitTesting', + methods: [], + } + appManager.addPlugin({json: testTabProfile, api: testTab}) + + const runTab = new RunTab(self._components.registry) + const runTabProfile = { + type: 'runTransaction', + methods: [], + } + appManager.addPlugin({json: runTabProfile, api: runTab}) + + const analysisTab = new AnalysisTab(self._components.registry) + const analysisTabProfile = { + type: 'solidityStaticAnalisys', + methods: [], + } + appManager.addPlugin({json: analysisTabProfile, api: analysisTab}) + + const debuggerTab = new DebuggerTab(self._components.registry) + const debuggerTabProfile = { + type: 'debugger', + methods: [], + } + appManager.addPlugin({json: debuggerTabProfile, api: debuggerTab}) + + const supportTab = new SupportTab(self._components.registry) + const supportTabProfile = { + type: 'support', + methods: [], + } + appManager.addPlugin({json: supportTabProfile, api: supportTab}) + + self._components.iconpanel.appendChild(verticalIconComponent.render()) + self._components.iconpanel.event.register('resize', delta => self._adjustLayout('left', delta)) + + self._components.swappanel.appendChild(swapPanelComponent.render()) + self._components.swappanel.event.register('resize', delta => self._adjustLayout('center', delta)) + self._components.editorpanel.init() self._components.fileManager.init() @@ -409,35 +518,11 @@ Please make a backup of your contracts and start using http://remix.ethereum.org self.loadFiles(filesToLoad) } - // ---------------- FilePanel -------------------- - self._components.filePanel = new FilePanel() - self._view.leftpanel.appendChild(self._components.filePanel.render()) - self._components.filePanel.event.register('resize', delta => self._adjustLayout('left', delta)) - registry.put({api: self._components.filePanel, name: 'filepanel'}) - // ----------------- Renderer ----------------- var renderer = new Renderer() registry.put({api: renderer, name: 'renderer'}) - // ---------------- Tabs ------------------------------- - let compileTab = new CompileTab(self._components.registry) - let tabs = { - compile: compileTab, - run: new RunTab(self._components.registry), - settings: new SettingsTab(self._components.registry), - analysis: new AnalysisTab(self._components.registry), - debug: new DebuggerTab(self._components.registry), - support: new SupportTab(self._components.registry), - test: new TestTab(self._components.registry, compileTab) - } - - // ---------------- Righthand-panel -------------------- - self._components.righthandpanel = new RighthandPanel({ tabs, pluginManager }) - self._view.rightpanel.appendChild(self._components.righthandpanel.render()) - self._components.righthandpanel.init() - self._components.righthandpanel.event.register('resize', delta => self._adjustLayout('right', delta)) - - var txLogger = new TxLogger() // eslint-disable-line + var txLogger = new TxLogger() // eslint-disable-line var queryParams = new QueryParams() diff --git a/src/app/components/plugin-manager-api.js b/src/app/components/plugin-manager-api.js new file mode 100644 index 0000000000..3cadd1bdb1 --- /dev/null +++ b/src/app/components/plugin-manager-api.js @@ -0,0 +1,26 @@ +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 EventManager = remixLib.EventManager + +class SwapPanelApi { + constructor (swapPanelComponent) { + this.component = swapPanelComponent + } + + /* + viewTitle: string + content: DOM element + */ + addView(viewTitle, content) { + // add the DOM to the swappanel + this.component.addView(viewTitle, contents) + } +} + + +module.exports = SwapPanelApi diff --git a/src/app/components/plugin-manager-component.js b/src/app/components/plugin-manager-component.js new file mode 100644 index 0000000000..59de442953 --- /dev/null +++ b/src/app/components/plugin-manager-component.js @@ -0,0 +1,62 @@ +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 EventManager = remixLib.EventManager + +class PluginManagerComponent { + constructor (appManager) { + this.appManager = appManager + appManager.event.register('pluginLoaded', () => { + // call this.renderItem + }) + } + + render () { + var self = this + // loop over all this.modules and this.plugins + var view = yo` +
+
+ ` + } + + _activate(item) { + this.appManager.activate(item) + } + + _deactivate(item) { + this.appManager.deactivate(item) + } + + renderItem (item) { + var self = this + + var view = yo` +
+ ${item.name} + ${item.url} +
+ ` + } +} + +module.exports = SwapPanelComponent + +const css = csjs` + .plugins { + width : 300px; + } + .plugItIn { + display : none; + } + .plugItIn.active { + display :block; + } + .clearFunds { background-color: lightblue; } +` diff --git a/src/app/components/swap-panel-api.js b/src/app/components/swap-panel-api.js new file mode 100644 index 0000000000..3cadd1bdb1 --- /dev/null +++ b/src/app/components/swap-panel-api.js @@ -0,0 +1,26 @@ +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 EventManager = remixLib.EventManager + +class SwapPanelApi { + constructor (swapPanelComponent) { + this.component = swapPanelComponent + } + + /* + viewTitle: string + content: DOM element + */ + addView(viewTitle, content) { + // add the DOM to the swappanel + this.component.addView(viewTitle, contents) + } +} + + +module.exports = SwapPanelApi diff --git a/src/app/components/swap-panel-component.js b/src/app/components/swap-panel-component.js new file mode 100644 index 0000000000..bb6c213e09 --- /dev/null +++ b/src/app/components/swap-panel-component.js @@ -0,0 +1,57 @@ +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 EventManager = remixLib.EventManager + +class SwapPanelComponent { + constructor () { + } + + showContent (moduleName) { + // hiding the current view and display the `moduleName` + } + + addView (title, content) { + // add the DOM to the swappanel + } + + render () { + var self = this + + var view = yo` +
+
+

Plugin 1

+
  • Some Text
+
+
+

Plugin 2

+
  • Some Text
+
+
+

Plugin 3

+
  • Some Text
+
+
+ ` + } +} + +module.exports = SwapPanelComponent + +const css = csjs` + .plugins { + width : 300px; + } + .plugItIn { + display : none; + } + .plugItIn.active { + display :block; + } + .clearFunds { background-color: lightblue; } +` diff --git a/src/app/components/vertical-icons-api.js b/src/app/components/vertical-icons-api.js new file mode 100644 index 0000000000..ec4438d734 --- /dev/null +++ b/src/app/components/vertical-icons-api.js @@ -0,0 +1,23 @@ +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) { + this.component = verticalIconsComponent + } + + addIcon(icon) { + this.component.event.trigger('addIcon', icon) + } + + removeIcon(icon) { + this.component.event.trigger('removeIcon', icon) + } +} +module.exports = VerticalIconsApi diff --git a/src/app/components/vertical-icons-component.js b/src/app/components/vertical-icons-component.js new file mode 100644 index 0000000000..57e375272f --- /dev/null +++ b/src/app/components/vertical-icons-component.js @@ -0,0 +1,39 @@ + +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() + + // Component + class VerticalIconComponent { + + constructor(appManager) { + this.appManager = appManager + appManager.event.register('activated', (item) => { + this.addIcon(item) + }) + appManager.event.register('deactivated', (item) => { + this.removeIcon(item) + }) + } + + addIcon (item) { + + } + + removeIcon (item) { + + } + + render() { + yo` +
+

example

+
+ ` + } + } + + module.exports = VerticalIconComponent diff --git a/src/app/panels/left-icon-panel.js b/src/app/panels/left-icon-panel.js new file mode 100644 index 0000000000..10601dc9da --- /dev/null +++ b/src/app/panels/left-icon-panel.js @@ -0,0 +1,183 @@ +const yo = require('yo-yo') +const csjs = require('csjs-inject') +const remixLib = require('remix-lib') + +var globalRegistry = require('../../global/registry') + +const styleguide = require('../ui/styles-guide/theme-chooser') +const styles = styleguide.chooser() +// const PluginManager = require('../plugin/pluginManager') +// const TabbedMenu = require('../tabs/tabbed-menu') +// const CompileTab = require('../tabs/compile-tab') +// const SettingsTab = require('../tabs/settings-tab') +// const AnalysisTab = require('../tabs/analysis-tab') +// const DebuggerTab = require('../tabs/debugger-tab') +// const SupportTab = require('../tabs/support-tab') +// const PluginTab = require('../tabs/plugin-tab') +// const TestTab = require('../tabs/test-tab') +// const RunTab = require('../tabs/run-tab') +// const DraggableContent = require('../ui/draggableContent') + +const EventManager = remixLib.EventManager + +// var async = require('async') + +// var tooltip = require('../ui/tooltip') + +// var styleGuide = require('../ui/styles-guide/theme-chooser') + +// var css = require('./styles/file-panel-styles') + +// var canUpload = window.File || window.FileReader || window.FileList || window.Blob +// var ghostbar = yo`
` + +/* + Overview of APIs: + * fileManager: @args fileProviders (browser, shared-folder, swarm, github, etc ...) & config & editor + - listen on browser & localhost file provider (`fileRenamed` & `fileRemoved`) + - update the tabs, switchFile + - trigger `currentFileChanged` + - set the current file in the config + * fileProvider: currently browser, swarm, localhost, github, gist + - link to backend + - provide properties `type`, `readonly` + - provide API `resolveDirectory`, `remove`, `exists`, `rename`, `get`, `set` + - trigger `fileExternallyChanged`, `fileRemoved`, `fileRenamed`, `fileRenamedError`, `fileAdded` + * file-explorer: treeview @args fileProvider + - listen on events triggered by fileProvider + - call fileProvider API +*/ + +module.exports = class LeftIconPanel { + constructor (localRegistry) { + const self = this + self._components = {} + self._components.registry = localRegistry || globalRegistry + + self._components.registry.put({api: this, name: 'lefticonpanel'}) + self.event = new EventManager() + self._view = { + element: null, + tabbedMenu: null, + tabbedMenuViewport: null, + dragbar: null + } + + self.plugins = [ + {type: 'fileManager', displayName: 'File Manger', icon: 'fa fa-files-o fa-2x'}, + {type: 'pluginManager', displayName: 'Plugin Manger', icon: 'fa fa-puzzle-piece fa-2x'}, + {type: 'settings', displayName: 'setting', icon: 'fa fa-cog fa-2x'} + ] + } + + + swapPlugin (name) { + console.log(name) + } + + render () { + const self = this + // if (self._view.element) return self._view.element + // return self._view.element + return yo` +
+
    + ${self.plugins.map(function (pi) { + return yo`
  • + { self.swapPlugin(pi.type) }} style="size: 24px;" class="${pi.icon} ${css.plugin}"> +
    • ` + }) + } +
+
+ ` + } + + init () { + // @TODO: init is for resizable drag bar only and should be refactored in the future + const self = this + const limit = 60 + self._view.dragbar.addEventListener('mousedown', mousedown) + const ghostbar = yo`
` + function mousedown (event) { + event.preventDefault() + if (event.which === 1) { + moveGhostbar(event) + document.body.appendChild(ghostbar) + document.addEventListener('mousemove', moveGhostbar) + document.addEventListener('mouseup', removeGhostbar) + document.addEventListener('keydown', cancelGhostbar) + } + } + function cancelGhostbar (event) { + if (event.keyCode === 27) { + document.body.removeChild(ghostbar) + document.removeEventListener('mousemove', moveGhostbar) + document.removeEventListener('mouseup', removeGhostbar) + document.removeEventListener('keydown', cancelGhostbar) + } + } + function getPosition (event) { + const lhp = window['filepanel'].offsetWidth + const max = document.body.offsetWidth - limit + var newpos = (event.pageX > max) ? max : event.pageX + newpos = (newpos > (lhp + limit)) ? newpos : lhp + limit + return newpos + } + function moveGhostbar (event) { // @NOTE VERTICAL ghostbar + ghostbar.style.left = getPosition(event) + 'px' + } + function removeGhostbar (event) { + document.body.removeChild(ghostbar) + document.removeEventListener('mousemove', moveGhostbar) + document.removeEventListener('mouseup', removeGhostbar) + document.removeEventListener('keydown', cancelGhostbar) + self.event.trigger('resize', [document.body.offsetWidth - getPosition(event)]) + } + } +} + +const css = csjs` + .lefticonpanel { + display : flex; + flex-direction : column; + top : 0; + right : 0; + bottom : 0; + box-sizing : border-box; + overflow : hidden; + height : 100%; + } + .header { + height : 100%; + } + .dragbar { + position : absolute; + width : 0.5em; + top : 3em; + bottom : 0; + cursor : col-resize; + z-index : 999; + border-left : 2px solid ${styles.rightPanel.bar_Dragging}; + } + .ghostbar { + width : 3px; + background-color : ${styles.rightPanel.bar_Ghost}; + opacity : 0.5; + position : absolute; + cursor : col-resize; + z-index : 9999; + top : 0; + bottom : 0; + } + i.plugin { + cursor : pointer; + } + .container ul { + margin-top : 10px; + } + .container ul li { + text-align : center; + margin-top : 10px; + } +`