filip mertens
3 years ago
parent
38758f9171
commit
e73b1b6c47
@ -1,15 +1,62 @@ |
||||
import { Plugin } from '@remixproject/engine' |
||||
import { Profile } from '@remixproject/plugin-utils' |
||||
import { EventEmitter } from 'events' |
||||
import { TabProxy } from './tab-proxy' |
||||
const EventManager = require('../../lib/events') |
||||
|
||||
const profile:Profile = { |
||||
const profile: Profile = { |
||||
name: 'layout', |
||||
description: 'layout' |
||||
} |
||||
|
||||
interface panelState { |
||||
active: boolean |
||||
plugin: Plugin |
||||
} |
||||
interface panels { |
||||
tabs: panelState |
||||
editor: panelState |
||||
main: panelState |
||||
terminal: panelState |
||||
} |
||||
|
||||
export class Layout extends Plugin { |
||||
event: any |
||||
constructor () { |
||||
panels: panels |
||||
constructor() { |
||||
super(profile) |
||||
this.event = new EventManager() |
||||
this.event = new EventEmitter() |
||||
} |
||||
|
||||
onActivation(): void { |
||||
console.log('layout plugin activated') |
||||
this.on('fileManager', 'currentFileChanged', () => { |
||||
console.log('layout plugin currentFileChanged') |
||||
this.panels.editor.active = true |
||||
this.panels.main.active = false |
||||
this.event.emit('change', null) |
||||
}) |
||||
this.on('tabs', 'openFile', () => { |
||||
console.log('layout plugin currentFileChanged') |
||||
this.panels.editor.active = true |
||||
this.panels.main.active = false |
||||
this.event.emit('change', null) |
||||
}) |
||||
this.on('tabs', 'switchApp', (name: string) => { |
||||
console.log('layout plugin switchApp', name) |
||||
this.call('mainPanel', 'showContent', name) |
||||
this.panels.editor.active = false |
||||
this.panels.main.active = true |
||||
this.event.emit('change', null) |
||||
}) |
||||
this.on('tabs', 'closeApp', (name: string) => { |
||||
console.log('layout plugin closeapp', name) |
||||
this.panels.editor.active = true |
||||
this.panels.main.active = false |
||||
this.event.emit('change', null) |
||||
}) |
||||
this.on('tabs', 'tabCountChanged', (count) => { |
||||
// if (!count) this.editor.displayEmptyReadOnlySession()
|
||||
}) |
||||
} |
||||
} |
||||
|
||||
@ -1,5 +1,5 @@ |
||||
import React from 'react' |
||||
|
||||
const AppContext = React.createContext(null) |
||||
const AppContext = React.createContext<{layout: any, settings: any, showMatamo: boolean, appManager: any}>(null) |
||||
|
||||
export default AppContext |
||||
|
||||
@ -1,52 +1,78 @@ |
||||
import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context' |
||||
import { editor } from 'monaco-editor' |
||||
import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||
import RemixUIPanelPlugin from '../plugins/panel-plugin' |
||||
import { PluginRecord } from '../types' |
||||
import './main-panel.css' |
||||
|
||||
const RemixUIMainPanel = () => { |
||||
const appContext = useContext(AppContext) |
||||
const tabsRef = useRef<HTMLDivElement>(null) |
||||
const [plugins, setPlugins] = useState<PluginRecord[]>([]) |
||||
const editorRef = useRef<HTMLDivElement>(null) |
||||
const mainPanelRef = useRef<HTMLDivElement>(null) |
||||
const tabsRef = useRef<HTMLDivElement>(null) |
||||
const terminalRef = useRef<HTMLDivElement>(null) |
||||
const editorRef = useRef<HTMLDivElement>(null) |
||||
|
||||
useEffect(() => { |
||||
const refs = [tabsRef, editorRef, mainPanelRef, terminalRef] |
||||
|
||||
const _adjustLayout = (delta: number) => { |
||||
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)
|
||||
editorRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`) |
||||
terminalRef.current?.setAttribute('style', `height: ${delta}px`) |
||||
mainPanelRef.current?.setAttribute('style', `height: ${mainPanelHeight}px`) |
||||
// appContext.panels.editor.resize((document.querySelector('#editorWrap') || {}).checked)
|
||||
appContext.layout.panels.terminal.plugin.scroll2bottom() |
||||
} |
||||
|
||||
console.log(appContext) |
||||
if(appContext) { |
||||
const renderPanels = () => { |
||||
//console.log(appContext)
|
||||
if (appContext) { |
||||
console.log(appContext) |
||||
tabsRef.current.appendChild(appContext.panels.tabs.renderTabsbar()) |
||||
editorRef.current.appendChild(appContext.panels.editor.render()) |
||||
mainPanelRef.current.appendChild(appContext.panels.main.render()) |
||||
terminalRef.current.appendChild(appContext.panels.terminal.render()) |
||||
console.log(appContext.panels.main.render()) |
||||
|
||||
const plugins: PluginRecord[] = [ |
||||
{ |
||||
profile: appContext.panels.tabs.profile, |
||||
active: true, |
||||
view: appContext.panels.tabs.renderTabsbar() |
||||
} |
||||
] |
||||
} |
||||
}, []) |
||||
const pluginPanels: PluginRecord[] = [] |
||||
Object.values(appContext.layout.panels).map((panel: any) => { |
||||
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 |
||||
}) |
||||
}) |
||||
// console.log(pluginPanels)
|
||||
setPlugins(pluginPanels) |
||||
|
||||
const components = { |
||||
tabs: <div ref={tabsRef}></div>, |
||||
editor: <div ref={editorRef}></div>, |
||||
main: <div ref={mainPanelRef}></div>, |
||||
terminal: <div ref={terminalRef}></div> |
||||
appContext.layout.panels.terminal.plugin.event.register('resize', (delta: number) => |
||||
_adjustLayout(delta) |
||||
) |
||||
} |
||||
} |
||||
|
||||
useEffect(() => { |
||||
renderPanels() |
||||
console.log(appContext.layout) |
||||
appContext.layout.event.on('change',() => { |
||||
console.log('change') |
||||
renderPanels() |
||||
}) |
||||
}, []) |
||||
|
||||
|
||||
return (<div className='mainview'> |
||||
{ components.tabs } |
||||
{ components.editor } |
||||
{ components.main } |
||||
{ components.terminal } |
||||
</div>) |
||||
return ( |
||||
<div className="mainview"> |
||||
{Object.values(plugins).map((pluginRecord, i) => { |
||||
return ( |
||||
<RemixUIPanelPlugin |
||||
ref={refs[i]} |
||||
key={pluginRecord.profile.name} |
||||
pluginRecord={pluginRecord} |
||||
/> |
||||
) |
||||
})} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default RemixUIMainPanel |
||||
|
||||
@ -1,26 +1,37 @@ |
||||
import React, { useEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||
import React, { forwardRef, useEffect, useRef, useState } from 'react' // eslint-disable-line
|
||||
import { PluginRecord } from '../types' |
||||
import './panel.css' |
||||
interface panelPLuginProps { |
||||
pluginRecord: PluginRecord |
||||
pluginRecord: PluginRecord |
||||
} |
||||
|
||||
const RemixUIPanelPlugin = (props: panelPLuginProps) => { |
||||
const PanelRef = useRef<HTMLDivElement>(null) |
||||
const RemixUIPanelPlugin = (props: panelPLuginProps, panelRef: any) => { |
||||
const localRef = useRef<HTMLDivElement>(null) |
||||
const [view, setView] = useState<JSX.Element | HTMLDivElement>() |
||||
useEffect(() => { |
||||
if (PanelRef.current) { |
||||
console.log(panelRef) |
||||
const ref:any = panelRef? panelRef : localRef |
||||
if (ref.current) { |
||||
if (props.pluginRecord.view) { |
||||
if (React.isValidElement(props.pluginRecord.view)) { |
||||
setView(props.pluginRecord.view) |
||||
} else { |
||||
PanelRef.current.appendChild(props.pluginRecord.view) |
||||
ref.current.appendChild(props.pluginRecord.view) |
||||
} |
||||
} |
||||
} |
||||
}, []) |
||||
|
||||
return <div className={props.pluginRecord.active ? `${props.pluginRecord.class} active` : 'd-none'} ref={PanelRef}>{view}</div> |
||||
return ( |
||||
<div |
||||
className={ |
||||
props.pluginRecord.active ? `${props.pluginRecord.class}` : 'd-none' |
||||
} |
||||
ref={panelRef || localRef} |
||||
> |
||||
{view} |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default RemixUIPanelPlugin |
||||
export default forwardRef(RemixUIPanelPlugin) |
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue