diff --git a/package.json b/package.json index 56ee0445..f487e588 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "dependencies": { "color": "^1.0.3", "file-saver": "^1.3.2", - "immutable": "^3.8.1", "lodash.throttle": "^4.1.1", "lodash.topairs": "^4.3.0", "mapbox-gl": "mapbox/mapbox-gl-js#6c24b9621d2aa770eda67fb5638b4d78087b5624", diff --git a/src/components/About.jsx b/src/components/About.jsx index 83d2fb4c..e2abf582 100644 --- a/src/components/About.jsx +++ b/src/components/About.jsx @@ -8,18 +8,8 @@ import Toolbar from 'rebass/dist/Toolbar' import NavItem from 'rebass/dist/NavItem' import Space from 'rebass/dist/Space' -import Immutable from 'immutable' -import PureRenderMixin from 'react-addons-pure-render-mixin'; - /** About page with basic infos and links to github repo */ export class About extends React.Component { - static propTypes = {} - - constructor(props) { - super(props); - this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); - } - render() { return
diff --git a/src/components/App.jsx b/src/components/App.jsx index f09fa60c..b7139df9 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,5 +1,4 @@ import React from 'react' -import Immutable from 'immutable' import { saveAs } from 'file-saver' import Drawer from 'rebass/dist/Drawer' @@ -43,7 +42,7 @@ export default class App extends React.Component { this.state = { accessToken: this.settingsStore.accessToken, mapStyle: style.emptyStyle, - selectedLayerId: null, + selectedLayerIndex: 0, } } @@ -60,19 +59,20 @@ export default class App extends React.Component { } onStyleDownload() { - const mapStyle = style.toJSON(this.state.mapStyle) + const mapStyle = 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() } onStyleUpload(newStyle) { + console.log('upload', newStyle) const savedStyle = this.styleStore.save(newStyle) this.setState({ mapStyle: savedStyle }) } onStyleSave() { - const snapshotStyle = this.state.mapStyle.set('modified', new Date().toJSON()) + const snapshotStyle = this.state.mapStyle.modified = new Date().toJSON() this.setState({ mapStyle: snapshotStyle }) console.log('Save') this.styleStore.save(snapshotStyle) @@ -88,20 +88,22 @@ export default class App extends React.Component { } onLayersChanged(changedLayers) { - const changedStyle = this.state.mapStyle.set('layers', changedLayers) - this.onStyleChanged(changedStyle) + const changedStyle = { + ...this.state.mapStyle, + layers: [changedLayers] + } + this.setState({ mapStyle: newStyle }) } onLayerChanged(layer) { - console.log('layer changed', layer) - const layers = this.state.mapStyle.get('layers') - const changedLayers = layers.set(layer.get('id'), layer) - this.onLayersChanged(changedLayers) - } - - onLayerChanged(layer) { - const changedStyle = this.state.mapStyle.setIn(['layers', layer.id], Immutable.fromJS(layer)) - this.onStyleChanged(changedStyle) + const changedStyle = { + ...this.state.mapStyle, + layers: { + ...this.state.mapStyle.layers, + [layer.id]: layer + } + } + this.setState({ mapStyle: changedStyle }) } mapRenderer() { @@ -112,7 +114,9 @@ export default class App extends React.Component { this.layerWatcher.map = map } } - const renderer = this.state.mapStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs') + + const metadata = this.state.mapStyle.metadata || {} + const renderer = metadata['maputnik:renderer'] || 'mbgljs' if(renderer === 'ol3') { return } else { @@ -121,11 +125,18 @@ export default class App extends React.Component { } onLayerSelected(layerId) { - this.setState({ selectedLayerId: layerId }) + const layers = this.state.mapStyle.layers + for (let i = 0; i < layers.length; i++) { + if(layers[i].id === layerId) { + this.setState({ selectedLayerIndex: i }) + break + } + } } render() { - const selectedLayer = this.state.mapStyle.getIn(['layers', this.state.selectedLayerId], null) + const layers = this.state.mapStyle.layers || [] + const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null return
- {selectedLayer && } + {selectedLayer && }
{this.mapRenderer()}
diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 9b130cab..522cf1c8 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -1,5 +1,4 @@ import React from 'react' -import Immutable from 'immutable' import FileReaderInput from 'react-file-reader-input' import Button from 'rebass/dist/Button' @@ -37,7 +36,7 @@ const InlineBlock = props =>
{ - let mapStyle = style.fromJSON(JSON.parse(e.target.result)) + let mapStyle = JSON.parse(e.target.result) mapStyle = style.ensureMetadataExists(mapStyle) this.props.onStyleUpload(mapStyle); } @@ -68,7 +67,7 @@ export default class Toolbar extends React.Component { } saveButton() { - if(this.props.mapStyle.get('layers').size > 0) { + if(this.props.mapStyle.layers.length > 0) { return