Allow renaming map keys (#63)

* Add missing locales

* Allow renaming map keys

Resolve #55.

* Add isValidMapKey function

* Update locales/zh-CN

* Prevent from adding existing object

* Reuse preventNewline function

* Fix issues with "." in map keys

* Simply fix not showing keys for non-object components

Co-authored-by: Misode <Misoloo64@gmail.com>

js/model.js

@@ -187,7 +187,7 @@ function getPath(el) {
   let index = $node.attr('data-index');
   if (index === 'root') return [];
   let parent = getPath($node.parent());
-  parent = parent.concat(index.split('.'));
+  parent.push(index);
   return parent;
 }
 
@@ -263,18 +263,22 @@ function removeFromSet(el, array) {
   }
 }
 
+function isValidMapKey(key, node) {
+  return key.length > 0 && !(key in node)
+}
+
 function addToMap(el) {
   let node = getParent(el);
   let $field = $(el).closest('[data-index]');
   let key = $field.find('input').val();
   let map = $field.attr('data-index');
   let type = $field.attr('data-item-type');
-  if (key.length === 0) {
-    return;
-  }
   if (!node[map]) {
     node[map] = {};
   }
+  if (!isValidMapKey(key, node[map])) {
+    return;
+  }
   if (type === 'int' || type === 'float' || type === 'random' || type === 'range' || type === 'boundary') {
     node[map][key] = 0;
   } else if (type === 'boolean') {
@@ -287,6 +291,26 @@ function addToMap(el) {
   invalidated();
 }
 
+function renameMapKey(el) {
+  let key = $(el).text();
+  let $textarea = $('<textarea type="text" class="form-control mr-3 mb-2 float-left" style="max-height: 1em; max-width: 16em; overflow: hidden; display: inline;"></textarea>')
+    .val(key)
+    .keydown(e => preventNewline(e, 'blur'))
+    .on('blur', e => {
+      let newKey = $(e.target).val();
+      let path = getPath($(e.target));
+      let oldKey = path.pop();
+      let node = getNode(path);
+      if (newKey !== oldKey && isValidMapKey(newKey, node)){
+        node[newKey] = node[oldKey];
+        delete node[oldKey];
+      }
+      invalidated();
+    });
+  $(el).replaceWith($textarea);
+  $textarea.focus();
+}
+
 function removeFromMap(el) {
   let path = getPath(el);
   let key = path.pop();

js/view.js

@@ -235,18 +235,18 @@ function generateMap(data, struct) {
   $el.attr('data-index', struct.id).attr('data-item-type', struct.values.type);
   $el.find('[data-name="1"]').attr('data-i18n', struct.translate);
   $el.find('[data-name="2"]').attr('data-i18n', struct.translate + '_add');
-  $input.attr('data-i18n', `[placeholder]${struct.translatePlaceholder}`);
+  $input.attr('data-i18n', `[placeholder]placeholder.${struct.translatePlaceholder}`);
   $input.keypress((e) => {if (e.which == 13) addToMap(e.target);});
   if (data) {
     for (let key of Object.keys(data)) {
-      out = out || {}
+      out = out || {};
       let field = struct.values;
       field.id = key;
       field.translate = key;
       let {out: outValue, component: $item} = generateComponent(data[key], field);
       if (field.type === 'object') {
         let $header = $('<div class="card-header pb-1"></div>');
-        $header.append(('<span class="input-group-text mr-3 mb-2 float-left" data-i18n="' + field.translate + '"></span>'));
+        $header.append('<span class="input-group-text mr-3 mb-2 float-left" onclick="renameMapKey(this)" style="cursor: pointer;">' + key + '</span>');
         $header.append('<button type="button" class="btn btn-danger mb-2 float-right" onclick="removeFromMap(this)" data-i18n="' + struct.translate + '_remove"></button>');
         $item.prepend($header);
       } else {
@@ -443,7 +443,7 @@ function generateObject(data, struct, options) {
   if (struct.card === false) {
     // Note: JSON.parse(JSON.stringify(out)) can remove undefined values in the out object.
     if (Object.keys(JSON.parse(JSON.stringify(out))).length === 0) {
-      out = undefined
+      out = undefined;
     }
   }
   $body.children().first().children('button').removeClass('mt-3');
@@ -482,9 +482,9 @@ function generateTooltip(str) {
   return $el;
 }
 
-function preventNewline(e) {
+function preventNewline(e, event = 'change') {
   if (e.which === 13) {
-    $(e.target).trigger('change');
+    $(e.target).trigger(event);
     e.preventDefault();
   }
 }