schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 17:11:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show layer editor side by side

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-17 15:44:42 +01:00
parent 04ebd25773
commit f2564e4ddb
2 changed files with 149 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/app.jsx
View file

@ -9,6 +9,7 @@ import Fixed from 'rebass/dist/Fixed'
import { MapboxGlMap } from './gl.jsx' import { MapboxGlMap } from './gl.jsx'
import { OpenLayers3Map } from './ol3.jsx' import { OpenLayers3Map } from './ol3.jsx'
import { LayerList } from './layers/list.jsx' import { LayerList } from './layers/list.jsx'
import { LayerEditor } from './layers/editor.jsx'
import {Toolbar} from './toolbar.jsx' import {Toolbar} from './toolbar.jsx'
import style from './style.js' import style from './style.js'
import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js' import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js'
@ -39,9 +40,7 @@ export default class App extends React.Component {
this.settingsStore = new SettingsStore() this.settingsStore = new SettingsStore()
this.state = { this.state = {
accessToken: this.settingsStore.accessToken, accessToken: this.settingsStore.accessToken,
workContext: "layers", mapStyle: style.emptyStyle,
currentStyle: style.emptyStyle,
mapRenderer: 'gl',
} }
} }
@ -58,7 +57,7 @@ export default class App extends React.Component {
} }
onStyleDownload() { 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"}); const blob = new Blob([JSON.stringify(mapStyle, null, 4)], {type: "application/json;charset=utf-8"});
saveAs(blob, mapStyle.id + ".json"); saveAs(blob, mapStyle.id + ".json");
this.onStyleSave() this.onStyleSave()
@ -66,33 +65,18 @@ export default class App extends React.Component {
onStyleUpload(newStyle) { onStyleUpload(newStyle) {
const savedStyle = this.styleStore.save(newStyle) const savedStyle = this.styleStore.save(newStyle)
this.setState({ currentStyle: savedStyle }) this.setState({ mapStyle: savedStyle })
} }
onStyleSave() { onStyleSave() {
const snapshotStyle = this.state.currentStyle.set('modified', new Date().toJSON()) const snapshotStyle = this.state.mapStyle.set('modified', new Date().toJSON())
this.setState({ currentStyle: snapshotStyle }) this.setState({ mapStyle: snapshotStyle })
console.log('Save') console.log('Save')
this.styleStore.save(snapshotStyle) this.styleStore.save(snapshotStyle)
} }
onStyleChanged(newStyle) { onStyleChanged(newStyle) {
this.setState({ currentStyle: newStyle }) this.setState({ mapStyle: 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", })
} }
onAccessTokenChanged(newToken) { onAccessTokenChanged(newToken) {
@ -107,10 +91,10 @@ export default class App extends React.Component {
mapRenderer() { mapRenderer() {
const mapProps = { const mapProps = {
mapStyle: this.state.currentStyle, mapStyle: this.state.mapStyle,
accessToken: this.state.accessToken, 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') { if(renderer === 'ol3') {
return <OpenLayers3Map {...mapProps} /> return <OpenLayers3Map {...mapProps} />
} else { } else {
@ -119,9 +103,11 @@ export default class App extends React.Component {
} }
render() { render() {
const layers = this.state.mapStyle.get('layers').keySeq()
console.log(layers.size)
return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}> return <div style={{ fontFamily: theme.fontFamily, color: theme.color, fontWeight: 300 }}>
<Toolbar <Toolbar
mapStyle={this.state.currentStyle} mapStyle={this.state.mapStyle}
onStyleChanged={this.onStyleChanged.bind(this)} onStyleChanged={this.onStyleChanged.bind(this)}
onStyleSave={this.onStyleSave.bind(this)} onStyleSave={this.onStyleSave.bind(this)}
onStyleUpload={this.onStyleUpload.bind(this)} onStyleUpload={this.onStyleUpload.bind(this)}
@ -132,15 +118,26 @@ export default class App extends React.Component {
top: 50, top: 50,
left: 0, left: 0,
zIndex: 100, zIndex: 100,
width: 300, width: 200,
overflow: "hidden", overflow: "hidden",
backgroundColor: colors.gray backgroundColor: colors.gray
}}> }}>
<LayerList <LayerList
onLayersChanged={this.onLayersChanged.bind(this)} onLayersChanged={this.onLayersChanged.bind(this)}
layers={this.state.currentStyle.get('layers')} layers={this.state.mapStyle.get('layers')}
/> />
</div> </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()} {this.mapRenderer()}
</div> </div>
} }

243
src/layers/editor.jsx
View file

@ -18,144 +18,149 @@ import MdDelete from 'react-icons/lib/md/delete'
import PureRenderMixin from 'react-addons-pure-render-mixin'; import PureRenderMixin from 'react-addons-pure-render-mixin';
class UnsupportedLayer extends React.Component { class UnsupportedLayer extends React.Component {
render() { render() {
return <div></div> return <div></div>
} }
} }
/** Layer editor supporting multiple types of layers. */ /** Layer editor supporting multiple types of layers. */
export class LayerEditor extends React.Component { export class LayerEditor extends React.Component {
static propTypes = { static propTypes = {
layer: React.PropTypes.object.isRequired, layer: React.PropTypes.object.isRequired,
onLayerChanged: React.PropTypes.func.isRequired, onLayerChanged: React.PropTypes.func,
onLayerDestroyed: React.PropTypes.func.isRequired, onLayerDestroyed: React.PropTypes.func,
} }
static childContextTypes = { static defaultProps = {
reactIconBase: React.PropTypes.object onLayerChanged: () => {},
} onLayerDestroyed: () => {},
}
constructor(props) { static childContextTypes = {
super(props); reactIconBase: React.PropTypes.object
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); }
this.state = {
isOpened: false,
}
}
getChildContext () { constructor(props) {
return { super(props);
reactIconBase: { this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
size: theme.fontSizes[4], this.state = {
color: theme.colors.lowgray, isOpened: false,
} }
} }
}
onPaintChanged(property, newValue) { getChildContext () {
let layer = this.props.layer return {
//TODO: by using immutable records we can avoid this checking if object exists reactIconBase: {
if(!layer.has('paint')) { size: theme.fontSizes[4],
layer = layer.set('paint', Immutable.Map()) color: theme.colors.lowgray,
} }
}
}
const changedLayer = layer.setIn(['paint', property], newValue) onPaintChanged(property, newValue) {
this.props.onLayerChanged(changedLayer) 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) { const changedLayer = layer.setIn(['paint', property], newValue)
let layer = this.props.layer this.props.onLayerChanged(changedLayer)
//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(['layout', property], newValue) onLayoutChanged(property, newValue) {
this.props.onLayerChanged(changedLayer) 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() { const changedLayer = layer.setIn(['layout', property], newValue)
this.setState({isOpened: !this.state.isOpened}) this.props.onLayerChanged(changedLayer)
} }
layerFromType(type) { toggleLayer() {
if (type === "fill") { this.setState({isOpened: !this.state.isOpened})
return <FillLayer }
layer={this.props.layer}
onPaintChanged={this.onPaintChanged.bind(this)}
onLayoutChanged={this.onLayoutChanged.bind(this)}
/>
}
if (type === "background") { layerFromType(type) {
return <BackgroundLayer if (type === "fill") {
layer={this.props.layer} return <FillLayer
onPaintChanged={this.onPaintChanged.bind(this)} layer={this.props.layer}
onLayoutChanged={this.onLayoutChanged.bind(this)} onPaintChanged={this.onPaintChanged.bind(this)}
/> onLayoutChanged={this.onLayoutChanged.bind(this)}
} />
}
if (type === "line") { if (type === "background") {
return <LineLayer return <BackgroundLayer
layer={this.props.layer} layer={this.props.layer}
onPaintChanged={this.onPaintChanged.bind(this)} onPaintChanged={this.onPaintChanged.bind(this)}
onLayoutChanged={this.onLayoutChanged.bind(this)} onLayoutChanged={this.onLayoutChanged.bind(this)}
/> />
} }
if (type === "symbol") { if (type === "line") {
return <SymbolLayer return <LineLayer
layer={this.props.layer} layer={this.props.layer}
onPaintChanged={this.onPaintChanged.bind(this)} onPaintChanged={this.onPaintChanged.bind(this)}
onLayoutChanged={this.onLayoutChanged.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() { return <UnsupportedLayer />
if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') { }
this.onLayoutChanged('visibility', 'visible')
} else {
this.onLayoutChanged('visibility', 'none')
}
}
render() { toggleVisibility() {
let visibleIcon = <MdVisibilityOff /> if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') { this.onLayoutChanged('visibility', 'visible')
visibleIcon = <MdVisibility /> } else {
} this.onLayoutChanged('visibility', 'none')
}
}
return <div style={{ render() {
padding: theme.scale[0], let visibleIcon = <MdVisibilityOff />
borderBottom: 1, if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
borderTop: 1, visibleIcon = <MdVisibility />
borderLeft: 2, }
borderRight: 0,
borderStyle: "solid", return <div style={{
borderColor: theme.borderColor, padding: theme.scale[0],
borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color']) borderBottom: 1,
}}> borderTop: 1,
<Toolbar onClick={this.toggleLayer.bind(this)}> borderLeft: 2,
<NavItem style={{fontWeight: 400}}> borderRight: 0,
#{this.props.layer.get('id')} borderStyle: "solid",
</NavItem> borderColor: theme.borderColor,
<Space auto x={1} /> borderLeftColor: this.props.layer.getIn(['metadata', 'maputnik:color'])
<NavItem onClick={this.toggleVisibility.bind(this)}> }}>
{visibleIcon} <Toolbar onClick={this.toggleLayer.bind(this)}>
</NavItem> <NavItem style={{fontWeight: 400}}>
<NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}> #{this.props.layer.get('id')}
<MdDelete /> </NavItem>
</NavItem> <Space auto x={1} />
</Toolbar> <NavItem onClick={this.toggleVisibility.bind(this)}>
<Collapse isOpened={this.state.isOpened}> {visibleIcon}
<div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}> </NavItem>
{this.layerFromType(this.props.layer.get('type'))} <NavItem onClick={(e) => this.props.onLayerDestroyed(this.props.layer)}>
</div> <MdDelete />
</Collapse> </NavItem>
</div> </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>
}
} }