mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-28 17:41:16 +01:00
Basic redo/undo with keybindings #25
This commit is contained in:
parent
c95dd75e2a
commit
cfbcdc7fa1
2 changed files with 29 additions and 1 deletions
|
@ -26,6 +26,7 @@
|
||||||
"lodash.topairs": "^4.3.0",
|
"lodash.topairs": "^4.3.0",
|
||||||
"mapbox-gl": "mapbox/mapbox-gl-js#6c24b9621d2aa770eda67fb5638b4d78087b5624",
|
"mapbox-gl": "mapbox/mapbox-gl-js#6c24b9621d2aa770eda67fb5638b4d78087b5624",
|
||||||
"mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#e85407a377510acb647161de6be6357ab4f606dd",
|
"mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#e85407a377510acb647161de6be6357ab4f606dd",
|
||||||
|
"mousetrap": "^1.6.0",
|
||||||
"ol-mapbox-style": "0.0.11",
|
"ol-mapbox-style": "0.0.11",
|
||||||
"openlayers": "^3.19.1",
|
"openlayers": "^3.19.1",
|
||||||
"randomcolor": "^0.4.4",
|
"randomcolor": "^0.4.4",
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { saveAs } from 'file-saver'
|
import { saveAs } from 'file-saver'
|
||||||
|
import Mousetrap from 'mousetrap'
|
||||||
|
|
||||||
import MapboxGlMap from './map/MapboxGlMap'
|
import MapboxGlMap from './map/MapboxGlMap'
|
||||||
import OpenLayers3Map from './map/OpenLayers3Map'
|
import OpenLayers3Map from './map/OpenLayers3Map'
|
||||||
|
@ -11,15 +12,16 @@ import AppLayout from './AppLayout'
|
||||||
import style from '../libs/style.js'
|
import style from '../libs/style.js'
|
||||||
import { loadDefaultStyle, SettingsStore, StyleStore } from '../libs/stylestore'
|
import { loadDefaultStyle, SettingsStore, StyleStore } from '../libs/stylestore'
|
||||||
import { ApiStyleStore } from '../libs/apistore'
|
import { ApiStyleStore } from '../libs/apistore'
|
||||||
|
import { RevisionStore } from '../libs/revisions'
|
||||||
import LayerWatcher from '../libs/layerwatcher'
|
import LayerWatcher from '../libs/layerwatcher'
|
||||||
|
|
||||||
|
|
||||||
export default class App extends React.Component {
|
export default class App extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props)
|
super(props)
|
||||||
this.layerWatcher = new LayerWatcher()
|
this.layerWatcher = new LayerWatcher()
|
||||||
this.styleStore = new ApiStyleStore()
|
this.styleStore = new ApiStyleStore()
|
||||||
|
this.revisionStore = new RevisionStore()
|
||||||
this.styleStore.supported(isSupported => {
|
this.styleStore.supported(isSupported => {
|
||||||
if(!isSupported) {
|
if(!isSupported) {
|
||||||
console.log('Falling back to local storage for storing styles')
|
console.log('Falling back to local storage for storing styles')
|
||||||
|
@ -36,6 +38,16 @@ export default class App extends React.Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
Mousetrap.bind(['ctrl+z'], this.onUndo.bind(this));
|
||||||
|
Mousetrap.bind(['ctrl+y'], this.onRedo.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
Mousetrap.unbind(['ctrl+z'], this.onUndo.bind(this));
|
||||||
|
Mousetrap.unbind(['ctrl+y'], this.onRedo.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
onReset() {
|
onReset() {
|
||||||
this.styleStore.purge()
|
this.styleStore.purge()
|
||||||
loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
|
loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
|
||||||
|
@ -53,10 +65,25 @@ export default class App extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
onStyleChanged(newStyle) {
|
onStyleChanged(newStyle) {
|
||||||
|
this.revisionStore.addRevision(newStyle)
|
||||||
this.saveStyle(newStyle)
|
this.saveStyle(newStyle)
|
||||||
this.setState({ mapStyle: newStyle })
|
this.setState({ mapStyle: newStyle })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onUndo() {
|
||||||
|
const activeStyle = this.revisionStore.undo()
|
||||||
|
console.log('Undo revision', this.revisionStore.currentIdx)
|
||||||
|
this.saveStyle(activeStyle)
|
||||||
|
this.setState({ mapStyle: activeStyle })
|
||||||
|
}
|
||||||
|
|
||||||
|
onRedo() {
|
||||||
|
const activeStyle = this.revisionStore.redo()
|
||||||
|
console.log('Redo revision', this.revisionStore.currentIdx)
|
||||||
|
this.saveStyle(activeStyle)
|
||||||
|
this.setState({ mapStyle: activeStyle })
|
||||||
|
}
|
||||||
|
|
||||||
onAccessTokenChanged(newToken) {
|
onAccessTokenChanged(newToken) {
|
||||||
this.settingsStore.accessToken = newToken
|
this.settingsStore.accessToken = newToken
|
||||||
this.setState({ accessToken: newToken })
|
this.setState({ accessToken: newToken })
|
||||||
|
|
Loading…
Reference in a new issue