Basic redo/undo with keybindings #25

This commit is contained in:
Lukas Martinelli 2016-12-23 17:17:02 +01:00
parent c95dd75e2a
commit cfbcdc7fa1
2 changed files with 29 additions and 1 deletions

View file

@ -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",

View file

@ -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 })