mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-27 08:35:25 +01:00
Show layer editor side by side
This commit is contained in:
Lukas Martinelli
parent
04ebd25773
commit
f2564e4ddb
2 changed files with 149 additions and 147 deletions
53
src/app.jsx
53
src/app.jsx
|
|
@ -9,6 +9,7 @@ import Fixed from 'rebass/dist/Fixed'
|
|||
import { MapboxGlMap } from './gl.jsx'
|
||||
import { OpenLayers3Map } from './ol3.jsx'
|
||||
import { LayerList } from './layers/list.jsx'
|
||||
import { LayerEditor } from './layers/editor.jsx'
|
||||
import {Toolbar} from './toolbar.jsx'
|
||||
import style from './style.js'
|
||||
import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
|
||||
|
|
@ -39,9 +40,7 @@ export default class App extends React.Component {
|
|||
this.settingsStore = new SettingsStore()
|
||||
this.state = {
|
||||
accessToken: this.settingsStore.accessToken,
|
||||
workContext: "layers",
|
||||
currentStyle: style.emptyStyle,
|
||||
mapRenderer: 'gl',
|
||||
mapStyle: style.emptyStyle,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +57,7 @@ export default class App extends React.Component {
|
|||
}
|
||||
|
||||
onStyleDownload() {
|
||||
const mapStyle = style.toJSON(this.state.currentStyle)
|
||||
const mapStyle = style.toJSON(this.state.mapStyle)
|
||||
const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
|
||||
saveAs(blob, mapStyle.id + ".json");
|
||||
this.onStyleSave()
|
||||
|
|
@ -66,33 +65,18 @@ export default class App extends React.Component {
|
|||
|
||||
onStyleUpload(newStyle) {
|
||||
const savedStyle = this.styleStore.save(newStyle)
|
||||
this.setState({ currentStyle: savedStyle })
|
||||
this.setState({ mapStyle: savedStyle })
|
||||
}
|
||||
|
||||
onStyleSave() {
|
||||
const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON())
|
||||
this.setState({ currentStyle: snapshotStyle })
|
||||
const snapshotStyle = this.state.mapStyle.set('modified', new Date().toJSON())
|
||||
this.setState({ mapStyle: snapshotStyle })
|
||||
console.log('Save')
|
||||
this.styleStore.save(snapshotStyle)
|
||||
}
|
||||
|
||||
onStyleChanged(newStyle) {
|
||||
this.setState({ currentStyle: newStyle })
|
||||
}
|
||||
|
||||
onOpenSettings() {
|
||||
//TODO: open settings modal
|
||||
//this.setState({ workContext: "settings" })
|
||||
}
|
||||
|
||||
onOpenAbout() {
|
||||
//TODO: open about modal
|
||||
//this.setState({ workContext: "about" })
|
||||
}
|
||||
|
||||
onOpenSources() {
|
||||
//TODO: open sources modal
|
||||
//this.setState({ workContext: "sources", })
|
||||
this.setState({ mapStyle: newStyle })
|
||||
}
|
||||
|
||||
onAccessTokenChanged(newToken) {
|
||||
|
|
@ -107,10 +91,10 @@ export default class App extends React.Component {
|
|||
|
||||
mapRenderer() {
|
||||
const mapProps = {
|
||||
mapStyle: this.state.currentStyle,
|
||||
mapStyle: this.state.mapStyle,
|
||||
accessToken: this.state.accessToken,
|
||||
}
|
||||
const renderer = this.state.currentStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
|
||||
const renderer = this.state.mapStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs')
|
||||
if(renderer === 'ol3') {
|
||||
return <OpenLayers3Map {...mapProps} />
|
||||
} else {
|
||||
|
|
@ -119,9 +103,11 @@ export default class App extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const layers = this.state.mapStyle.get('layers').keySeq()
|
||||
console.log(layers.size)
|
||||
return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
|
||||
<Toolbar
|
||||
mapStyle={this.state.currentStyle}
|
||||
mapStyle={this.state.mapStyle}
|
||||
onStyleChanged={this.onStyleChanged.bind(this)}
|
||||
onStyleSave={this.onStyleSave.bind(this)}
|
||||
onStyleUpload={this.onStyleUpload.bind(this)}
|
||||
|
|
@ -132,15 +118,26 @@ export default class App extends React.Component {
|
|||
top: 50,
|
||||
left: 0,
|
||||
zIndex: 100,
|
||||
width: 300,
|
||||
width: 200,
|
||||
overflow: "hidden",
|
||||
backgroundColor: colors.gray
|
||||
}}>
|
||||
<LayerList
|
||||
onLayersChanged={this.onLayersChanged.bind(this)}
|
||||
layers={this.state.currentStyle.get('layers')}
|
||||
layers={this.state.mapStyle.get('layers')}
|
||||
/>
|
||||
</div>
|
||||
<div style={{
|
||||
...fullHeight,
|
||||
top: 50,
|
||||
left: 200,
|
||||
zIndex: 100,
|
||||
width: 300,
|
||||
overflow: "hidden",
|
||||
backgroundColor: colors.gray}
|
||||
}>
|
||||
{layers.size > 0 && <LayerEditor layer={this.state.mapStyle.get('layers').get(layers.get(0))} />}
|
||||
</div>
|
||||
{this.mapRenderer()}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,144 +18,149 @@ import MdDelete from 'react-icons/lib/md/delete'
|
|||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||
|
||||
class UnsupportedLayer extends React.Component {
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
render() {
|
||||
return <div></div>
|
||||
}
|
||||
}
|
||||
|
||||
/** Layer editor supporting multiple types of layers. */
|
||||
export class LayerEditor extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onLayerChanged: React.PropTypes.func.isRequired,
|
||||
onLayerDestroyed: React.PropTypes.func.isRequired,
|
||||
}
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
onLayerChanged: React.PropTypes.func,
|
||||
onLayerDestroyed: React.PropTypes.func,
|
||||
}
|
||||
|
||||
static childContextTypes = {
|
||||
reactIconBase: React.PropTypes.object
|
||||
}
|
||||
static defaultProps = {
|
||||
onLayerChanged: () => {},
|
||||
onLayerDestroyed: () => {},
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
|
||||
this.state = {
|
||||
isOpened: false,
|
||||
}
|
||||
}
|
||||
static childContextTypes = {
|
||||
reactIconBase: React.PropTypes.object
|
||||
}
|
||||
|
||||
getChildContext () {
|
||||
return {
|
||||
reactIconBase: {
|
||||
size: theme.fontSizes[4],
|
||||
color: theme.colors.lowgray,
|
||||
}
|
||||
}
|
||||
}
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
|
||||
this.state = {
|
||||
isOpened: false,
|
||||
}
|
||||
}
|
||||
|
||||
onPaintChanged(property, newValue) {
|
||||
let layer = this.props.layer
|
||||
//TODO: by using immutable records we can avoid this checking if object exists
|
||||
if(!layer.has('paint')) {
|
||||
layer = layer.set('paint', Immutable.Map())
|
||||
}
|
||||
getChildContext () {
|
||||
return {
|
||||
reactIconBase: {
|
||||
size: theme.fontSizes[4],
|
||||
color: theme.colors.lowgray,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const changedLayer = layer.setIn(['paint', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
onPaintChanged(property, newValue) {
|
||||
let layer = this.props.layer
|
||||
//TODO: by using immutable records we can avoid this checking if object exists
|
||||
if(!layer.has('paint')) {
|
||||
layer = layer.set('paint', Immutable.Map())
|
||||
}
|
||||
|
||||
onLayoutChanged(property, newValue) {
|
||||
let layer = this.props.layer
|
||||
//TODO: by using immutable records we can avoid this checking if object exists
|
||||
if(!layer.has('layout')) {
|
||||
layer = layer.set('layout', Immutable.Map())
|
||||
}
|
||||
const changedLayer = layer.setIn(['paint', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
|
||||
const changedLayer = layer.setIn(['layout', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
onLayoutChanged(property, newValue) {
|
||||
let layer = this.props.layer
|
||||
//TODO: by using immutable records we can avoid this checking if object exists
|
||||
if(!layer.has('layout')) {
|
||||
layer = layer.set('layout', Immutable.Map())
|
||||
}
|
||||
|
||||
toggleLayer() {
|
||||
this.setState({isOpened: !this.state.isOpened})
|
||||
}
|
||||
const changedLayer = layer.setIn(['layout', property], newValue)
|
||||
this.props.onLayerChanged(changedLayer)
|
||||
}
|
||||
|
||||
layerFromType(type) {
|
||||
if (type === "fill") {
|
||||
return <FillLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
toggleLayer() {
|
||||
this.setState({isOpened: !this.state.isOpened})
|
||||
}
|
||||
|
||||
if (type === "background") {
|
||||
return <BackgroundLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
layerFromType(type) {
|
||||
if (type === "fill") {
|
||||
return <FillLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type === "line") {
|
||||
return <LineLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
if (type === "background") {
|
||||
return <BackgroundLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type === "symbol") {
|
||||
return <SymbolLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
if (type === "line") {
|
||||
return <LineLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
return <UnsupportedLayer />
|
||||
}
|
||||
if (type === "symbol") {
|
||||
return <SymbolLayer
|
||||
layer={this.props.layer}
|
||||
onPaintChanged={this.onPaintChanged.bind(this)}
|
||||
onLayoutChanged={this.onLayoutChanged.bind(this)}
|
||||
/>
|
||||
}
|
||||
|
||||
toggleVisibility() {
|
||||
if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
|
||||
this.onLayoutChanged('visibility', 'visible')
|
||||
} else {
|
||||
this.onLayoutChanged('visibility', 'none')
|
||||
}
|
||||
}
|
||||
return <UnsupportedLayer />
|
||||
}
|
||||
|
||||
render() {
|
||||
let visibleIcon = <MdVisibilityOff />
|
||||
if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
|
||||
visibleIcon = <MdVisibility />
|
||||
}
|
||||
toggleVisibility() {
|
||||
if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
|
||||
this.onLayoutChanged('visibility', 'visible')
|
||||
} else {
|
||||
this.onLayoutChanged('visibility', 'none')
|
||||
}
|
||||
}
|
||||
|
||||
return <div style={{
|
||||
padding: theme.scale[0],
|
||||
borderBottom: 1,
|
||||
borderTop: 1,
|
||||
borderLeft: 2,
|
||||
borderRight: 0,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.borderColor,
|
||||
borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
|
||||
}}>
|
||||
<Toolbar onClick={this.toggleLayer.bind(this)}>
|
||||
<NavItem style={{fontWeight: 400}}>
|
||||
#{this.props.layer.get('id')}
|
||||
</NavItem>
|
||||
<Space auto x={1} />
|
||||
<NavItem onClick={this.toggleVisibility.bind(this)}>
|
||||
{visibleIcon}
|
||||
</NavItem>
|
||||
<NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
|
||||
<MdDelete />
|
||||
</NavItem>
|
||||
</Toolbar>
|
||||
<Collapse isOpened={this.state.isOpened}>
|
||||
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
|
||||
{this.layerFromType(this.props.layer.get('type'))}
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
}
|
||||
render() {
|
||||
let visibleIcon = <MdVisibilityOff />
|
||||
if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
|
||||
visibleIcon = <MdVisibility />
|
||||
}
|
||||
|
||||
return <div style={{
|
||||
padding: theme.scale[0],
|
||||
borderBottom: 1,
|
||||
borderTop: 1,
|
||||
borderLeft: 2,
|
||||
borderRight: 0,
|
||||
borderStyle: "solid",
|
||||
borderColor: theme.borderColor,
|
||||
borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
|
||||
}}>
|
||||
<Toolbar onClick={this.toggleLayer.bind(this)}>
|
||||
<NavItem style={{fontWeight: 400}}>
|
||||
#{this.props.layer.get('id')}
|
||||
</NavItem>
|
||||
<Space auto x={1} />
|
||||
<NavItem onClick={this.toggleVisibility.bind(this)}>
|
||||
{visibleIcon}
|
||||
</NavItem>
|
||||
<NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
|
||||
<MdDelete />
|
||||
</NavItem>
|
||||
</Toolbar>
|
||||
<Collapse isOpened={this.state.isOpened}>
|
||||
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
|
||||
{this.layerFromType(this.props.layer.get('type'))}
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue