mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

fake layout fix

Browse Source
pull/1857/head
filip mertens 3 years ago
parent 24ef3e951e
commit beb7bfbbd5
8 changed files with 153 additions and 81 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 185
      apps/remix-ide/src/app.js
  2. 4
      apps/remix-ide/src/app/panels/layout.ts
  3. 4
      apps/remix-ide/src/app/panels/main-view.js
  4. 2
      apps/remix-ide/src/app/panels/tab-proxy.js
  5. 3
      apps/remix-ide/src/framingService.js
  6. 1
      apps/remix-ide/src/remixAppManager.js
  7. 3
      libs/remix-ui/panel/src/lib/main/main-panel.css
  8. 32
      libs/remix-ui/panel/src/lib/main/main-panel.tsx

185
apps/remix-ide/src/app.js
Unescape View File

@ -2,7 +2,6 @@
import { RunTab, makeUdapp } from './app/udapp'
import { RemixEngine } from './remixEngine'
import { RemixAppManager } from './remixAppManager'
import { MainView } from './app/panels/main-view'
import { ThemeModule } from './app/tabs/theme-module'
import { NetworkModule } from './app/tabs/network-module'
import { Web3ProviderModule } from './app/tabs/web3-provider'
@ -11,11 +10,17 @@ import { HiddenPanel } from './app/components/hidden-panel'
import { VerticalIcons } from './app/components/vertical-icons'
import { LandingPage } from './app/ui/landing-page/landing-page'
import { MainPanel } from './app/components/main-panel'
import { FramingService } from './framingService'
import { WalkthroughService } from './walkthroughService'
import { OffsetToLineColumnConverter, CompilerMetadata, CompilerArtefacts, FetchAndCompile, CompilerImports, EditorContextListener } from '@remix-project/core-plugin'
import {
OffsetToLineColumnConverter,
CompilerMetadata,
CompilerArtefacts,
FetchAndCompile,
CompilerImports,
EditorContextListener
} from '@remix-project/core-plugin'
import migrateFileSystem from './migrateFileSystem'
import Registry from './app/state/registry'
@ -68,13 +73,27 @@ class AppComponent {
// load file system
self._components.filesProviders = {}
self._components.filesProviders.browser = new FileProvider('browser')
Registry.getInstance().put({ api: self._components.filesProviders.browser, name: 'fileproviders/browser' })
self._components.filesProviders.localhost = new RemixDProvider(self.appManager)
Registry.getInstance().put({ api: self._components.filesProviders.localhost, name: 'fileproviders/localhost' })
Registry.getInstance().put({
api: self._components.filesProviders.browser,
name: 'fileproviders/browser'
})
self._components.filesProviders.localhost = new RemixDProvider(
self.appManager
)
Registry.getInstance().put({
api: self._components.filesProviders.localhost,
name: 'fileproviders/localhost'
})
self._components.filesProviders.workspace = new WorkspaceFileProvider()
Registry.getInstance().put({ api: self._components.filesProviders.workspace, name: 'fileproviders/workspace' })
Registry.getInstance().put({
api: self._components.filesProviders.workspace,
name: 'fileproviders/workspace'
})
Registry.getInstance().put({ api: self._components.filesProviders, name: 'fileproviders' })
Registry.getInstance().put({
api: self._components.filesProviders,
name: 'fileproviders'
})
migrateFileSystem(self._components.filesProviders.browser)
}
@ -94,8 +113,15 @@ class AppComponent {
'remix-beta.ethereum.org': 25,
'remix.ethereum.org': 23
}
self.showMatamo = (matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics'))
self.walkthroughService = new WalkthroughService(appManager, self.showMatamo)
self.showMatamo =
matomoDomains[window.location.hostname] &&
!Registry.getInstance()
.get('config')
.api.exists('settings/matomo-analytics')
self.walkthroughService = new WalkthroughService(
appManager,
self.showMatamo
)
const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
// workaround for Electron support
@ -114,7 +140,9 @@ class AppComponent {
// ----------------- editor service ----------------------------
const editor = new Editor() // wrapper around ace editor
Registry.getInstance().put({ api: editor, name: 'editor' })
editor.event.register('requiringToSaveCurrentfile', () => fileManager.saveCurrentFile())
editor.event.register('requiringToSaveCurrentfile', () =>
fileManager.saveCurrentFile()
)
// ----------------- fileManager service ----------------------------
const fileManager = new FileManager(editor, appManager)
@ -131,7 +159,10 @@ class AppComponent {
const compilerMetadataGenerator = new CompilerMetadata()
// ----------------- compilation result service (can keep track of compilation results) ----------------------------
const compilersArtefacts = new CompilerArtefacts() // store all the compilation results (key represent a compiler name)
Registry.getInstance().put({ api: compilersArtefacts, name: 'compilersartefacts' })
Registry.getInstance().put({
api: compilersArtefacts,
name: 'compilersartefacts'
})
// service which fetch contract artifacts from sourve-verify, put artifacts in remix and compile it
const fetchAndCompile = new FetchAndCompile()
@ -142,19 +173,22 @@ class AppComponent {
const hardhatProvider = new HardhatProvider(blockchain)
// ----------------- convert offset to line/column service -----------
const offsetToLineColumnConverter = new OffsetToLineColumnConverter()
Registry.getInstance().put({ api: offsetToLineColumnConverter, name: 'offsettolinecolumnconverter' })
Registry.getInstance().put({
api: offsetToLineColumnConverter,
name: 'offsettolinecolumnconverter'
})
// -------------------Terminal----------------------------------------
makeUdapp(blockchain, compilersArtefacts, (domEl) => terminal.logHtml(domEl))
makeUdapp(blockchain, compilersArtefacts, domEl => terminal.logHtml(domEl))
const terminal = new Terminal(
{ appManager, blockchain },
{
getPosition: (event) => {
getPosition: event => {
const limitUp = 36
const limitDown = 20
const height = window.innerHeight
let newpos = (event.pageY < limitUp) ? limitUp : event.pageY
newpos = (newpos < height - limitDown) ? newpos : height - limitDown
let newpos = event.pageY < limitUp ? limitUp : event.pageY
newpos = newpos < height - limitDown ? newpos : height - limitDown
return height - newpos
}
}
@ -190,19 +224,25 @@ class AppComponent {
// self.mainview = new MainView(contextualListener, editor, appPanel, fileManager, appManager, terminal)
Registry.getInstance().put({ api: self.mainview, name: 'mainview' })
const tabProxy = new TabProxy(fileManager, editor)
self.engine.register([
appPanel,
tabProxy
])
self.engine.register([appPanel, tabProxy])
// those views depend on app_manager
self.menuicons = new VerticalIcons(appManager)
self.sidePanel = new SidePanel(appManager, self.menuicons)
self.hiddenPanel = new HiddenPanel()
const pluginManagerComponent = new PluginManagerComponent(appManager, self.engine)
const pluginManagerComponent = new PluginManagerComponent(
appManager,
self.engine
)
const filePanel = new FilePanel(appManager)
const landingPage = new LandingPage(appManager, self.menuicons, fileManager, filePanel, contentImport)
const landingPage = new LandingPage(
appManager,
self.menuicons,
fileManager,
filePanel,
contentImport
)
self.settings = new SettingsTab(
Registry.getInstance().get('config').api,
editor,
@ -220,7 +260,10 @@ class AppComponent {
])
// CONTENT VIEWS & DEFAULT PLUGINS
const compileTab = new CompileTab(Registry.getInstance().get('config').api, Registry.getInstance().get('filemanager').api)
const compileTab = new CompileTab(
Registry.getInstance().get('config').api,
Registry.getInstance().get('filemanager').api
)
const run = new RunTab(
blockchain,
Registry.getInstance().get('config').api,
@ -256,10 +299,10 @@ class AppComponent {
])
self.layout.panels = {
tabs: { plugin:tabProxy, active: true },
editor: { plugin:editor, active: true },
main: { plugin:appPanel, active: false },
terminal: { plugin:terminal, active: true },
tabs: { plugin: tabProxy, active: true },
editor: { plugin: editor, active: true },
main: { plugin: appPanel, active: false },
terminal: { plugin: terminal, active: true }
}
}
@ -275,53 +318,81 @@ class AppComponent {
try {
self.engine.register(await self.appManager.registeredPlugins())
} catch (e) {
console.log('couldn\'t register iframe plugins', e.message)
console.log("couldn't register iframe plugins", e.message)
}
await self.appManager.activatePlugin(['layout', 'editor'])
await self.appManager.activatePlugin(['theme', 'fileManager', 'compilerMetadata', 'compilerArtefacts', 'network', 'web3Provider', 'offsetToLineColumnConverter'])
await self.appManager.activatePlugin([
'theme',
'fileManager',
'compilerMetadata',
'compilerArtefacts',
'network',
'web3Provider',
'offsetToLineColumnConverter'
])
await self.appManager.activatePlugin(['mainPanel'])
await self.appManager.activatePlugin(['mainPanel', 'menuicons', 'tabs'])
await self.appManager.activatePlugin(['sidePanel']) // activating host plugin separately
await self.appManager.activatePlugin(['home'])
await self.appManager.activatePlugin(['settings', 'config'])
await self.appManager.activatePlugin(['hiddenPanel', 'pluginManager', 'contextualListener', 'terminal', 'blockchain', 'fetchAndCompile', 'contentImport'])
await self.appManager.activatePlugin([
'hiddenPanel',
'pluginManager',
'contextualListener',
'terminal',
'blockchain',
'fetchAndCompile',
'contentImport'
])
await self.appManager.activatePlugin(['settings'])
await self.appManager.activatePlugin(['walkthrough'])
self.appManager.on('filePanel', 'workspaceInitializationCompleted', async () => {
await self.appManager.registerContextMenuItems()
})
self.appManager.on(
'filePanel',
'workspaceInitializationCompleted',
async () => {
await self.appManager.registerContextMenuItems()
}
)
await self.appManager.activatePlugin(['filePanel'])
// Set workspace after initial activation
self.appManager.on('editor', 'editorMounted', () => {
if (Array.isArray(self.workspace)) {
self.appManager.activatePlugin(self.workspace).then(async () => {
try {
if (params.deactivate) {
await self.appManager.deactivatePlugin(params.deactivate.split(','))
self.appManager
.activatePlugin(self.workspace)
.then(async () => {
try {
if (params.deactivate) {
await self.appManager.deactivatePlugin(
params.deactivate.split(',')
)
}
} catch (e) {
console.log(e)
}
if (params.code) {
// if code is given in url we focus on solidity plugin
self.menuicons.select('solidity')
} else {
// If plugins are loaded from the URL params, we focus on the last one.
if (
self.appManager.pluginLoader.current === 'queryParams' &&
self.workspace.length > 0
) { self.menuicons.select(self.workspace[self.workspace.length - 1]) }
}
} catch (e) {
console.log(e)
}
if (params.code) {
// if code is given in url we focus on solidity plugin
self.menuicons.select('solidity')
} else {
// If plugins are loaded from the URL params, we focus on the last one.
if (self.appManager.pluginLoader.current === 'queryParams' && self.workspace.length > 0) self.menuicons.select(self.workspace[self.workspace.length - 1])
}
if (params.call) {
const callDetails = params.call.split('//')
if (callDetails.length > 1) {
toolTip(`initiating ${callDetails[0]} ...`)
// @todo(remove the timeout when activatePlugin is on 0.3.0)
self.appManager.call(...callDetails).catch(console.error)
if (params.call) {
const callDetails = params.call.split('//')
if (callDetails.length > 1) {
toolTip(`initiating ${callDetails[0]} ...`)
// @todo(remove the timeout when activatePlugin is on 0.3.0)
self.appManager.call(...callDetails).catch(console.error)
}
}
}
}).catch(console.error)
})
.catch(console.error)
}
})
// activate solidity plugin

4
apps/remix-ide/src/app/panels/layout.ts
Unescape View File

@ -22,12 +22,12 @@ interface panels {
export class Layout extends Plugin {
event: any
panels: panels
constructor() {
constructor () {
super(profile)
this.event = new EventEmitter()
}
async onActivation(): Promise<void> {
async onActivation (): Promise<void> {
console.log('layout plugin activated')
this.on('fileManager', 'currentFileChanged', () => {
this.panels.editor.active = true

4
apps/remix-ide/src/app/panels/main-view.js
Unescape View File

@ -87,7 +87,7 @@ export class MainView {
}
self._components.terminal.event.register('resize', delta => self._adjustLayout('top', delta))
// mv
// mv
if (self.txListener) {
self._components.terminal.event.register('listenOnNetWork', (listenOnNetWork) => {
self.txListener.setListenOnNetwork(listenOnNetWork)
@ -211,7 +211,7 @@ export class MainView {
return self._components.terminal.registerCommand(name, command, opts)
}
// rm
// rm
updateTerminalFilter (filter) {
this._components.terminal.updateJournal(filter)
}

2
apps/remix-ide/src/app/panels/tab-proxy.js
Unescape View File

@ -288,7 +288,6 @@ export class TabProxy extends Plugin {
}
renderComponent () {
const onSelect = (index) => {
if (this.loadedTabs[index]) {
const name = this.loadedTabs[index].name
@ -316,7 +315,6 @@ export class TabProxy extends Plugin {
}
renderTabsbar () {
return this.el
}
}

3
apps/remix-ide/src/framingService.js
Unescape View File

@ -1,9 +1,6 @@
export class FramingService {
constructor (verticalIcons, layout) {
this.verticalIcons = verticalIcons
this.mainPanel = mainView.getAppPanel()
this.mainView = mainView
this.resizeFeature = resizeFeature
}
start (params) {

1
apps/remix-ide/src/remixAppManager.js
Unescape View File

@ -1,6 +1,5 @@
/* global localStorage, fetch */
import { PluginManager } from '@remixproject/engine'
import { IframeReactPlugin } from '@remix-ui/app'
import { EventEmitter } from 'events'
import QueryParams from './lib/query-params'
import { PermissionHandler } from './app/ui/persmission-handler'

3
libs/remix-ui/panel/src/lib/main/main-panel.css
Unescape View File

@ -4,4 +4,5 @@
height : 100%;
width : 100%;
position: relative;
}
}

32
libs/remix-ui/panel/src/lib/main/main-panel.tsx
Unescape View File

@ -1,5 +1,5 @@
import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react' // eslint-disable-line
import DragBar from '../dragbar/dragbar'
import RemixUIPanelPlugin from '../plugins/panel-plugin'
import { PluginRecord } from '../types'
@ -16,14 +16,15 @@ const RemixUIMainPanel = () => {
const refs = [tabsRef, editorRef, mainPanelRef, terminalRef]
const _adjustLayout = (delta: number) => {
if(!delta) return
if (!delta) return
console.log('adjustLayout', delta, terminalRef.current)
const limitDown = 32
const containerHeight = window.innerHeight
const tmp = delta - limitDown
delta = tmp > 0 ? tmp : 0
let mainPanelHeight = containerHeight - delta
mainPanelHeight = mainPanelHeight < 0 ? 0 : mainPanelHeight
//self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
// self.editor.resize((document.querySelector('#editorWrap') || {}).checked)
editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
terminalRef.current?.setAttribute('style', `height: ${delta}px`)
mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`)
@ -32,7 +33,7 @@ const RemixUIMainPanel = () => {
}
const renderPanels = () => {
//console.log(appContext)
// console.log(appContext)
if (appContext) {
console.log(appContext)
const pluginPanels: PluginRecord[] = []
@ -40,8 +41,8 @@ const RemixUIMainPanel = () => {
pluginPanels.push({
profile: panel.plugin.profile,
active: panel.active,
view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar(): panel.plugin.render(),
class: panel.plugin.profile.name
view: panel.plugin.profile.name === 'tabs' ? panel.plugin.renderTabsbar() : panel.plugin.render(),
class: panel.plugin.profile.name + '-wrap'
})
})
// console.log(pluginPanels)
@ -53,13 +54,18 @@ const RemixUIMainPanel = () => {
}
}
useLayoutEffect(() => {
_adjustLayout(323)
})
useEffect(() => {
renderPanels()
console.log(appContext.layout)
appContext.layout.event.on('change',() => {
appContext.layout.event.on('change', () => {
console.log('change')
renderPanels()
})
}, [])
return (
@ -68,12 +74,12 @@ const RemixUIMainPanel = () => {
console.log(pluginRecord)
return (
<>
{(pluginRecord.profile.name === 'terminal') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={()=>{}} refObject={terminalRef}></DragBar>:<></>}
<RemixUIPanelPlugin
ref={refs[i]}
key={pluginRecord.profile.name}
pluginRecord={pluginRecord}
/>
{(pluginRecord.profile.name === 'terminal') ? <DragBar key={'dragbar'} minHeight={32} hidden={false} setHideStatus={() => {}} refObject={terminalRef}></DragBar> : <></>}
<RemixUIPanelPlugin
ref={refs[i]}
key={pluginRecord.profile.name}
pluginRecord={pluginRecord}
/>
</>
)
})}

Write Preview
Loading…
Cancel
Save