Workspace drawer no longer needed

This commit is contained in:
Lukas Martinelli 2016-12-17 14:53:16 +01:00
parent e84be3873a
commit 04ebd25773
2 changed files with 36 additions and 90 deletions

View file

@ -8,13 +8,14 @@ import Fixed from 'rebass/dist/Fixed'
import { MapboxGlMap } from './gl.jsx'
import { OpenLayers3Map } from './ol3.jsx'
import { LayerList } from './layers/list.jsx'
import {Toolbar} from './toolbar.jsx'
import style from './style.js'
import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
import { ApiStyleStore } from './apistore.js'
import { WorkspaceDrawer } from './workspace.jsx'
import theme from './theme.js'
import { colors, fullHeight } from './theme.js'
import './index.scss'
export default class App extends React.Component {
@ -99,30 +100,48 @@ export default class App extends React.Component {
this.setState({ accessToken: newToken })
}
render() {
const renderer = this.state.currentStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
onLayersChanged(changedLayers) {
const changedStyle = this.props.mapStyle.set('layers', changedLayers)
this.props.onStyleChanged(changedStyle)
}
mapRenderer() {
const mapProps = {
mapStyle: this.state.currentStyle,
accessToken: this.state.accessToken,
}
const renderer = this.state.currentStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
if(renderer === 'ol3') {
return <OpenLayers3Map {...mapProps} />
} else {
return <MapboxGlMap {...mapProps} />
}
}
render() {
return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
<Toolbar
mapStyle={this.state.currentStyle}
onStyleChanged={this.onStyleChanged.bind(this)}
onStyleSave={this.onStyleSave.bind(this)}
onStyleUpload={this.onStyleUpload.bind(this)}
onStyleDownload={this.onStyleDownload.bind(this)}
/>
<WorkspaceDrawer
onStyleChanged={this.onStyleChanged.bind(this)}
onReset={this.onReset.bind(this)}
workContext={this.state.workContext}
mapStyle={this.state.currentStyle}
accessToken={this.state.accessToken}
onAccessTokenChanged={this.onAccessTokenChanged.bind(this)}
onStyleChanged={this.onStyleChanged.bind(this)}
onStyleSave={this.onStyleSave.bind(this)}
onStyleUpload={this.onStyleUpload.bind(this)}
onStyleDownload={this.onStyleDownload.bind(this)}
/>
{renderer == 'ol3' && <OpenLayers3Map {...mapProps} />}
{renderer == 'mbgljs' && <MapboxGlMap {...mapProps} />}
<div style={{
...fullHeight,
top: 50,
left: 0,
zIndex: 100,
width: 300,
overflow: "hidden",
backgroundColor: colors.gray
}}>
<LayerList
onLayersChanged={this.onLayersChanged.bind(this)}
layers={this.state.currentStyle.get('layers')}
/>
</div>
{this.mapRenderer()}
</div>
}
}

View file

@ -1,73 +0,0 @@
import React from 'react'
import { LayerList } from './layers/list.jsx'
import { SourceList } from './sources/list.jsx'
import { SettingsEditor } from './settings.jsx'
import { About } from './about.jsx'
import { colors, fullHeight } from './theme.js'
/** The workspace drawer contains the editor components depending on the edit
* context chosen in the toolbar. It holds the state of the layers.*/
export class WorkspaceDrawer extends React.Component {
static propTypes = {
mapStyle: React.PropTypes.object.isRequired,
onStyleChanged: React.PropTypes.func.isRequired,
workContext: React.PropTypes.oneOf(['layers', 'settings', 'sources']).isRequired,
accessToken: React.PropTypes.string,
onAccessTokenChanged: React.PropTypes.func,
onReset: React.PropTypes.func,
}
onLayersChanged(changedLayers) {
const changedStyle = this.props.mapStyle.set('layers', changedLayers)
this.props.onStyleChanged(changedStyle)
}
onSourcesChanged(changedSources) {
const changedStyle = this.props.mapStyle.set('sources', changedSources)
this.props.onStyleChanged(changedStyle)
}
render() {
let workspaceContent = null
if(this.props.workContext === "sources") {
workspaceContent = <SourceList
onSourcesChanged={this.onSourcesChanged.bind(this)}
sources={this.props.mapStyle.get('sources')}
/>
}
if(this.props.workContext === "layers") {
workspaceContent = <LayerList
onLayersChanged={this.onLayersChanged.bind(this)}
layers={this.props.mapStyle.get('layers')}
/>
}
if(this.props.workContext === "settings") {
workspaceContent = <SettingsEditor
onReset={this.props.onReset}
onStyleChanged={this.props.onStyleChanged}
mapStyle={this.props.mapStyle}
accessToken={this.props.accessToken}
onAccessTokenChanged={this.props.onAccessTokenChanged}
/>
}
if(this.props.workContext === "about") {
workspaceContent = <About />
}
return <div style={{
...fullHeight,
top: 50,
left: 0,
zIndex: 100,
width: 300,
overflow: "hidden",
backgroundColor: colors.gray}
}>
{workspaceContent}
</div>
}
}