add 'deselect' button

src/js/components/settingPanel.js

@@ -110,6 +110,7 @@ export default class SettingPanel extends React.Component {
                 <div>
                   <button onClick={this.handleCopyText.bind(this)}>copy</button>
                   <button onClick={this.handleRemoveText.bind(this)}>remove</button>
+                  <button onClick={this.handleSelectText.bind(this, null)}>deselect</button>
                 </div>
               );
             })()}

src/js/reducers/text.js

@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import { ActionTypes } from '../constants';
 
-function getDefaultParams() {
+function getDefaultParams(uniqueId) {
   return {
-    key: _.uniqueId('text-'),
+    key: (uniqueId || _.uniqueId)('text-'),
     x: 0,
     y: 0,
     width: 160,

src/js/typesetter.js

@@ -35,14 +35,25 @@ class Typesetter extends React.Component {
     });
   }
 
+  getMaxId(texts, prefix) {
+    const re = new RegExp('^' + prefix + '(\\d+)');
+    return texts.map((text) => {
+      return +((re.exec(text.key) || [, 0])[1]);
+    }).reduce(function(x, y) {
+      return (x > y) ? x : y;
+    }, 0);
+  }
+
   handleSelectText(key) {
     const text = this.findText(key);
     this.setState((state) => {
       if (text && (text.key !== state.edittingText.key ||
             text.key === state.draggingKey)) {
         state.edittingText = text;
       } else {
-        state.edittingText = this.props.text.getDefaultParams();
+        state.edittingText = this.props.text.getDefaultParams(function(prefix) {
+          return prefix + (this.getMaxId(this.props.text.texts, prefix) + 1);
+        }.bind(this));
       }
       state.draggingKey = null;
       return state;
@@ -56,7 +67,11 @@ class Typesetter extends React.Component {
     }
     this.props.actions.updateText(text, originalKey);
     if (!this.findText(originalKey)) {
-      this.setState({ edittingText: this.props.text.getDefaultParams() });
+      var edittingText = this.props.text.getDefaultParams(function(prefix) {
+        return prefix + (this.getMaxId(_.union(this.props.text.texts, [text]), prefix) + 1);
+      }.bind(this));
+
+      this.setState({ edittingText: edittingText });
     }
   }