diff --git a/src/js/components/settingPanel.js b/src/js/components/settingPanel.js index d09cdf7..7b1385a 100644 --- a/src/js/components/settingPanel.js +++ b/src/js/components/settingPanel.js @@ -110,6 +110,7 @@ export default class SettingPanel extends React.Component {
+
); })()} diff --git a/src/js/reducers/text.js b/src/js/reducers/text.js index d594c68..dbbe3b4 100644 --- a/src/js/reducers/text.js +++ b/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, diff --git a/src/js/typesetter.js b/src/js/typesetter.js index 0787599..5358fc9 100644 --- a/src/js/typesetter.js +++ b/src/js/typesetter.js @@ -35,6 +35,15 @@ 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) => { @@ -42,7 +51,9 @@ class Typesetter extends React.Component { 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 }); } }