Show undo/redo message

src/components/App.jsx

@@ -9,11 +9,12 @@ import LayerList from './layers/LayerList'
 import LayerEditor from './layers/LayerEditor'
 import Toolbar from './Toolbar'
 import AppLayout from './AppLayout'
-import ErrorPanel from './ErrorPanel'
+import MessagePanel from './MessagePanel'
 
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import validateStyleMin from 'mapbox-gl-style-spec/lib/validate_style.min'
 import style from '../libs/style.js'
+import { undoMessages, redoMessages } from '../libs/diffmessage'
 import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
 import { ApiStyleStore } from '../libs/apistore'
 import { RevisionStore } from '../libs/revisions'
@@ -36,6 +37,7 @@ export default class App extends React.Component {
 
     this.state = {
       errors: [],
+      infos: [],
       mapStyle: style.emptyStyle,
       selectedLayerIndex: 0,
       sources: {},
@@ -92,16 +94,22 @@ export default class App extends React.Component {
 
   onUndo() {
     const activeStyle = this.revisionStore.undo()
-    console.log('Undo revision', this.revisionStore.currentIdx)
+    const messages = undoMessages(this.state.mapStyle, activeStyle)
     this.saveStyle(activeStyle)
-    this.setState({ mapStyle: activeStyle })
+    this.setState({
+      mapStyle: activeStyle,
+      infos: messages,
+    })
   }
 
   onRedo() {
     const activeStyle = this.revisionStore.redo()
-    console.log('Redo revision', this.revisionStore.currentIdx)
+    const messages = redoMessages(this.state.mapStyle, activeStyle)
     this.saveStyle(activeStyle)
-    this.setState({ mapStyle: activeStyle })
+    this.setState({
+      mapStyle: activeStyle,
+      infos: messages,
+    })
   }
 
   onLayersChange(changedLayers) {
@@ -194,8 +202,9 @@ export default class App extends React.Component {
       onLayerIdChange={this.onLayerIdChange.bind(this)}
     /> : null
 
-    const bottomPanel = this.state.errors.length > 0 ? <ErrorPanel
-      messages={this.state.errors}
+    const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
+      errors={this.state.errors}
+      infos={this.state.infos}
     /> : null
 
     return <AppLayout

src/components/ErrorPanel.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import Paragraph from './Paragraph'
-import colors from '../config/colors'
-import { fontSizes, margins } from '../config/scales'
-
-class ErrorPanel extends React.Component {
-  static propTypes = {
-    messages: React.PropTypes.array,
-  }
-
-  render() {
-    const errors = this.props.messages.map((m, i) => {
-      return <Paragraph key={i}
-        style={{
-          color: colors.red,
-          margin: 0,
-          lineHeight: 1.2,
-        }}>
-        {m}
-      </Paragraph>
-    })
-
-    return <div style={{
-      padding: margins[1],
-    }}>
-      {errors}
-    </div>
-  }
-}
-
-
-export default ErrorPanel

src/components/MessagePanel.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import Paragraph from './Paragraph'
+import colors from '../config/colors'
+import { fontSizes, margins } from '../config/scales'
+
+class MessagePanel extends React.Component {
+  static propTypes = {
+    errors: React.PropTypes.array,
+    infos: React.PropTypes.array,
+  }
+
+  render() {
+    const paragraphStyle = {
+      margin: 0,
+      lineHeight: 1.2,
+    }
+
+    const errors = this.props.errors.map((m, i) => {
+      return <Paragraph key={i}
+        style={{
+          ...paragraphStyle,
+          color: colors.red,
+        }}>{m}</Paragraph>
+    })
+
+    const infos = this.props.infos.map((m, i) => {
+      return <Paragraph key={i}
+        style={{
+          ...paragraphStyle,
+          color: colors.lowgray,
+        }}>{m}</Paragraph>
+    })
+
+    return <div style={{
+      padding: margins[1],
+    }}>
+      {errors}
+      {infos}
+    </div>
+  }
+}
+
+
+export default MessagePanel

src/libs/diffmessage.js

@@ -0,0 +1,13 @@
+import diffStyles from 'mapbox-gl-style-spec/lib/diff'
+
+export function diffMessages(beforeStyle, afterStyle) {
+  const changes = diffStyles(beforeStyle, afterStyle)
+  return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' '))
+}
+
+export function undoMessages(beforeStyle, afterStyle) {
+  return diffMessages(beforeStyle, afterStyle).map(m => 'Undo ' + m)
+}
+export function redoMessages(beforeStyle, afterStyle) {
+  return diffMessages(beforeStyle, afterStyle).map(m => 'Redo ' + m)
+}