Fix encoder rendering issue

src/assets/keymaps/FrogNpKeymap.ts

@@ -22,10 +22,14 @@ export const FrogNpKeymap = [
       y: 0.25,
       x: 4.5,
     },
-    '1,0',
-    '1,1',
-    '1,2',
-    '1,3',
+    '1,0\n\n\n\n\n\n\n\n\ne2',
+    { a: 3 },
+    'e3',
+    { a: 4 },
+    { a: 7 },
+    'e4',
+    { a: 4 },
+    '\n\n\n\n\n\n\n\n\ne5',
   ],
   [
     {

src/models/KeyModel.ts

@@ -55,14 +55,23 @@ export default class KeyModel {
     this.encoderId = encoderId;
     this.location = location;
     const locs = location.split('\n');
-    this.pos = locs[0];
+    // If the location is only encoder ID like 'e0', the pos is empty.
+    // This is for the case that the encoder is defined as like
+    // "{a:3},"e0",{a:4}" or "{a:7},"e0",{a:4}".
+    if (this.location.match(/^e[0-9]+$/i)) {
+      this.pos = '';
+    } else {
+      this.pos = locs[0];
+    }
     if (!this.includePosition(this.pos) && this.encoderId === null) {
       // If there is no position label and this is not an encoder,
       // this Key should be "Decal".
       this.keyOp = { ...(this.keyOp || {}), ...{ d: true } };
     }
-    this.optionLabel =
-      4 <= locs.length ? locs[3] : `${OPTION_DEFAULT},${OPTION_DEFAULT}`;
+    this.optionLabel = `${OPTION_DEFAULT},${OPTION_DEFAULT}`;
+    if (4 <= locs.length && 0 < locs[3].length) {
+      this.optionLabel = locs[3];
+    }
     const options = this.optionLabel.split(',');
     this.option = options[0];
     this.optionChoice = options[1];

src/models/KeyboardModel.test.ts

@@ -27,7 +27,7 @@ describe('KeyboardModel', () => {
       expect(actual[0].x).toEqual(0);
       expect(actual[0].y).toEqual(0);
       expect(actual[1].location).toEqual('e0');
-      expect(actual[1].pos).toEqual('e0');
+      expect(actual[1].pos).toEqual('');
       expect(actual[1].optionLabel).toEqual('-,-');
       expect(actual[1].option).toEqual('-');
       expect(actual[1].optionChoice).toEqual('-');
@@ -36,9 +36,9 @@ describe('KeyboardModel', () => {
       expect(actual[1].y).toEqual(0);
       expect(actual[2].location).toEqual('0,1\n\n\n\n\n\n\n\n\ne1');
       expect(actual[2].pos).toEqual('0,1');
-      expect(actual[2].optionLabel).toEqual('');
-      expect(actual[2].option).toEqual('');
-      expect(actual[2].optionChoice).toBeUndefined();
+      expect(actual[2].optionLabel).toEqual('-,-');
+      expect(actual[2].option).toEqual('-');
+      expect(actual[2].optionChoice).toEqual('-');
       expect(actual[2].encoderId).toEqual(1);
       expect(actual[2].x).toEqual(2);
       expect(actual[2].y).toEqual(0);

src/models/KeyboardModel.ts

@@ -272,7 +272,7 @@ export default class KeyboardModel {
 
       curr.nextRow(keyRow[0]);
       for (let col = 0; col < keyRow.length; col++) {
-        const item: string | KeyOp = keyRow[col]; // KeyMapOp or string('rwo,col')
+        const item: string | KeyOp = keyRow[col]; // KeyMapOp or string('row,col')
         let keymapItem: KeymapItem;
 
         if (typeof item === 'string') {