diff --git a/package.json b/package.json index a119b9a7..49fb7ceb 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "lodash.topairs": "^4.3.0", "mapbox-gl": "mapbox/mapbox-gl-js#6c24b9621d2aa770eda67fb5638b4d78087b5624", "mapbox-gl-style-spec": "mapbox/mapbox-gl-style-spec#e85407a377510acb647161de6be6357ab4f606dd", + "mousetrap": "^1.6.0", "ol-mapbox-style": "0.0.11", "openlayers": "^3.19.1", "randomcolor": "^0.4.4", diff --git a/src/components/App.jsx b/src/components/App.jsx index 2e82a002..6e11eed8 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,5 +1,6 @@ import React from 'react' import { saveAs } from 'file-saver' +import Mousetrap from 'mousetrap' import MapboxGlMap from './map/MapboxGlMap' import OpenLayers3Map from './map/OpenLayers3Map' @@ -11,15 +12,16 @@ import AppLayout from './AppLayout' import style from '../libs/style.js' import { loadDefaultStyle, SettingsStore, StyleStore } from '../libs/stylestore' import { ApiStyleStore } from '../libs/apistore' +import { RevisionStore } from '../libs/revisions' import LayerWatcher from '../libs/layerwatcher' export default class App extends React.Component { - constructor(props) { super(props) this.layerWatcher = new LayerWatcher() this.styleStore = new ApiStyleStore() + this.revisionStore = new RevisionStore() this.styleStore.supported(isSupported => { if(!isSupported) { 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() { this.styleStore.purge() loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle)) @@ -53,10 +65,25 @@ export default class App extends React.Component { } onStyleChanged(newStyle) { + this.revisionStore.addRevision(newStyle) this.saveStyle(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) { this.settingsStore.accessToken = newToken this.setState({ accessToken: newToken })