Add map field, refine directory structure

src/app/editor/editor.component.ts

@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import hljs from 'highlight.js/lib/core';
 import { ProtoMessage } from '../model/proto-message.model';
-import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { ProtoFieldComponent } from './proto-field/proto-field.component';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({

src/app/editor/list-field/list-field.component.ts

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { ListMessage } from '../model/proto-message.model';
+import { ListMessage } from '../../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
 
 @Component({
@@ -22,7 +22,7 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
     MatIconModule,
     forwardRef(() => ProtoFieldComponent),
   ],
-  template: ` <h3>{{ label() }}</h3>
+  template: `<h3>{{ label() }}</h3>
     @if(values()) { @for(value of values(); track $index) {
     <div class="row-wrapper">
       <app-proto-field
@@ -50,10 +50,10 @@ export class ListFieldComponent {
     const existingValues = this.values();
     if (existingValues) {
       const newValues = [...existingValues];
-      newValues.push('');
+      newValues.push(undefined);
       this.values.set(newValues);
     } else {
-      this.values.set(['']);
+      this.values.set([undefined]);
     }
   }
 

src/app/editor/map-field/map-field.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+.row-wrapper {
+  display: flex;
+  align-items: baseline;
+}
+
+app-proto-field {
+  flex: 1;
+
+  &:first-child {
+    margin-right: 10px;
+  }
+}
+
+.add-button {
+  align-self: flex-end;
+}

src/app/editor/map-field/map-field.component.ts

@@ -0,0 +1,133 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  forwardRef,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MapMessage } from '../../model/proto-message.model';
+import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+
+const keyIsEmpty = (key: string | number) => key == null || key === '';
+
+@Component({
+  selector: 'app-map-field',
+  standalone: true,
+  imports: [
+    CommonModule,
+    forwardRef(() => ProtoFieldComponent),
+    MatIconModule,
+    MatButtonModule,
+  ],
+  template: `<h3>{{ label() }}</h3>
+    @if(valuePairs()) { @for(value of valuePairs(); track $index) {
+    <div class="row-wrapper">
+      <app-proto-field
+        [configuration]="configuration().keyConfiguration"
+        [value]="value[0]"
+        (valueChange)="updateKey($index, $event)"
+      ></app-proto-field>
+      <app-proto-field
+        [configuration]="configuration().valueConfiguration"
+        [value]="value[1]"
+        (valueChange)="updateValue($index, $event)"
+      ></app-proto-field>
+      <button mat-icon-button (click)="remove($index)">
+        <mat-icon>remove</mat-icon>
+      </button>
+    </div>
+    } }
+    <button mat-icon-button class="add-button" (click)="add()">
+      <mat-icon>add</mat-icon>
+    </button>`,
+  styleUrl: './map-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MapFieldComponent {
+  label = input<string>();
+  configuration = input.required<MapMessage>();
+  values = model<Record<number | string, any>>();
+
+  valuePairs = signal<any[][]>([]);
+
+  private changedInternal = false;
+
+  constructor() {
+    effect(
+      () => {
+        // TODO: Super hacky but can't really think of another way to keep these in sync
+        //    without removing an entry when the key gets blanked. Would need an alternate
+        //    design that updated on blur only perhaps
+        if (this.changedInternal) {
+          this.changedInternal = false;
+          return;
+        }
+        const values = this.values();
+        if (values) {
+          this.valuePairs.set(Object.entries(values));
+        }
+      },
+      { allowSignalWrites: true }
+    );
+  }
+
+  add() {
+    const existingValues = this.valuePairs();
+    if (existingValues) {
+      const newValues = [...existingValues];
+      newValues.push([undefined, undefined]);
+      this.valuePairs.set(newValues);
+    } else {
+      this.valuePairs.set([[undefined, undefined]]);
+    }
+  }
+
+  remove(index: number) {
+    const newValues = { ...this.values()! };
+    const key = this.valuePairs()[index][0];
+    delete newValues[key];
+    this.changedInternal = true;
+    this.values.set(newValues);
+
+    const newValuePairs = [...this.valuePairs()];
+    newValuePairs.splice(index, 1);
+    this.valuePairs.set(newValuePairs);
+  }
+
+  updateKey(index: number, key: string | number) {
+    const values = { ...this.values() };
+    const valuePairs = [...this.valuePairs()];
+    const pair = [...valuePairs[index]];
+    if (!keyIsEmpty(pair[0])) {
+      delete values[pair[0]];
+    }
+    if (!keyIsEmpty(key)) {
+      values[key] = pair[1];
+    }
+    this.changedInternal = true;
+    this.values.set(values);
+
+    pair[0] = key;
+    valuePairs[index] = pair;
+    this.valuePairs.set(valuePairs);
+  }
+
+  updateValue(index: number, value: any) {
+    const valuePairs = [...this.valuePairs()];
+    const pair = [...valuePairs[index]];
+    if (!keyIsEmpty(pair[0])) {
+      let existing = { ...this.values()! };
+      existing[pair[0]] = value;
+      this.changedInternal = true;
+      this.values.set(existing);
+    }
+    pair[1] = value;
+    valuePairs[index] = pair;
+    this.valuePairs.set(valuePairs);
+  }
+}

src/app/editor/proto-field/proto-field.component.ts

@@ -9,15 +9,17 @@ import {
 import { FormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-import { ListFieldComponent } from '../list-field/list-field.component';
 import {
   EnumMessage,
   ListMessage,
+  MapMessage,
   MessageConfiguration,
   MessageTypeEnum,
-} from '../model/proto-message.model';
-import { MatInputModule } from '@angular/material/input';
+} from '../../model/proto-message.model';
+import { ListFieldComponent } from '../list-field/list-field.component';
+import { MapFieldComponent } from '../map-field/map-field.component';
 
 @Component({
   selector: 'app-proto-field',
@@ -26,6 +28,7 @@ import { MatInputModule } from '@angular/material/input';
     CommonModule,
     FormsModule,
     ListFieldComponent,
+    MapFieldComponent,
     MatCheckboxModule,
     MatFormFieldModule,
     MatSelectModule,
@@ -49,7 +52,7 @@ import { MatInputModule } from '@angular/material/input';
     <mat-form-field>
       <mat-label>{{ label() }}</mat-label>
       <mat-select [(value)]="value">
-        @for(option of enumConfiguration()!.options; track
+        @for(option of enumConfiguration().options; track
         enumConfiguration()!.options) {
         <mat-option>None</mat-option>
         <mat-option [value]="option">{{ option }}</mat-option>
@@ -59,11 +62,16 @@ import { MatInputModule } from '@angular/material/input';
     } @case (MessageTypeEnum.List) {
     <app-list-field
       [label]="label()"
-      [configuration]="listConfiguration()!"
+      [configuration]="listConfiguration()"
       [(values)]="value"
     ></app-list-field>
-    } @case (MessageTypeEnum.Map){} @case (MessageTypeEnum.Object) {} @case
-    (MessageTypeEnum.Raw) {}}`,
+    } @case (MessageTypeEnum.Map){
+    <app-map-field
+      [label]="label()"
+      [(values)]="value"
+      [configuration]="mapConfiguration()"
+    ></app-map-field>
+    } @case (MessageTypeEnum.Object) {} @case (MessageTypeEnum.Raw) {}}`,
   styleUrl: './proto-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -72,19 +80,17 @@ export class ProtoFieldComponent {
   configuration = input.required<MessageConfiguration>();
   value = model<any>();
 
-  protected enumConfiguration = computed(() => {
-    if (this.configuration().type === MessageTypeEnum.Enum) {
-      return this.configuration() as EnumMessage;
-    }
-    return;
-  });
+  protected enumConfiguration = computed(
+    () => this.configuration() as EnumMessage
+  );
 
-  protected listConfiguration = computed(() => {
-    if (this.configuration().type === MessageTypeEnum.List) {
-      return this.configuration() as ListMessage;
-    }
-    return;
-  });
+  protected listConfiguration = computed(
+    () => this.configuration() as ListMessage
+  );
+
+  protected mapConfiguration = computed(
+    () => this.configuration() as MapMessage
+  );
 
   protected readonly MessageTypeEnum = MessageTypeEnum;
 }

src/app/proto-definition-selector/proto-definition-selector.component.ts

@@ -12,7 +12,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatListModule } from '@angular/material/list';
 import { ProtoMessage } from '../model/proto-message.model';
-import { ProtoDefinitionService } from '../proto-definition.service';
+import { ProtoDefinitionService } from './proto-definition.service';
 
 @Component({
   selector: 'app-proto-definition-selector',

src/app/proto-definition-selector/proto-definition.service.spec.ts

@@ -8,7 +8,7 @@ import {
   MessageTypeEnum,
   ObjectMessage,
   ProtoMessage,
-} from './model/proto-message.model';
+} from '../model/proto-message.model';
 import { ProtoDefinitionService } from './proto-definition.service';
 
 let testProto = `

src/app/proto-definition-selector/proto-definition.service.ts

@@ -14,7 +14,7 @@ import {
   ProtoMessage,
   StringMessage,
   UnknownProto,
-} from './model/proto-message.model';
+} from '../model/proto-message.model';
 
 @Injectable({
   providedIn: 'root',