src/app/components/editor/host-options/host-options.component.html

@@ -1,6 +1,9 @@
 <ion-list>
-  <ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect(menuItems[i].value)">
-    <ion-icon slot="start" [name]="menuItems[i].icon"></ion-icon>
+  <ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect($event, menuItems[i].value)">
+    <i *ngIf="menuItems[i].icon" class="fa" slot="start" [ngClass]="menuItems[i].icon"></i>
+    <div *ngIf="menuItems[i].icons" slot="start">
+      <i *ngFor="let icon of menuItems[i].icons" class="fa" slot="start" [ngClass]="icon" style="margin-right: 5px;"></i>
+    </div>
     <ion-label>{{ menuItems[i].name }}</ion-label>
   </ion-item>
 </ion-list>

src/app/components/editor/host-options/host-options.component.ts

@@ -14,13 +14,33 @@ export class HostOptionsComponent implements OnInit {
   @Input() event: Event;
   @Input() hostRecord: HostRecord;
 
-  public menuItems: Array<{name: string, icon: string, value: string, type?: string}> = [];
-  protected possibleMenuItems: Array<{name: string, icon: string, value: string, type?: string}> = [
+  public menuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = [];
+  protected possibleMenuItems: Array<{name: string, icon?: string, icons?: string[], value: string, type?: string}> = [
+    {
+      name: 'Move Up',
+      icons: ['fa-chevron-up'],
+      value: 'move_up',
+    },
+    {
+      name: 'Add Node Before',
+      icons: ['fa-plus'],
+      value: 'add_before',
+    },
     {
       name: 'Delete Node',
-      icon: 'trash',
+      icon: 'fa-trash',
       value: 'delete_node',
     },
+    {
+      name: 'Add Node After',
+      icons: ['fa-plus'],
+      value: 'add_after',
+    },
+    {
+      name: 'Move Down',
+      icons: ['fa-chevron-down'],
+      value: 'move_down',
+    },
   ];
 
   constructor(
@@ -37,7 +57,7 @@ export class HostOptionsComponent implements OnInit {
     }
   }
 
-  async onSelect(value) {
-    await this.popover.dismiss(value);
+  async onSelect(event: MouseEvent, value) {
+    await this.popover.dismiss({event, value});
   }
 }

src/app/pages/editor/editor.page.ts

@@ -68,15 +68,24 @@ export class EditorPage implements OnInit {
     });
 
     popover.onDidDismiss().then(result => {
-      if ( result.data === 'delete_node' ) {
+      const { event: dismissEvent , value } = result.data;
+      if ( value === 'delete_node' ) {
         this.editorService.deleteNode(node.UUID);
+      } else if ( value === 'move_up' ) {
+        this.editorService.moveNode(node, 'up');
+      } else if ( value === 'move_down' ) {
+        this.editorService.moveNode(node, 'down');
+      } else if ( value === 'add_before' ) {
+        this.onAddClick(dismissEvent, 'before', node.UUID);
+      } else if ( value === 'add_after' ) {
+        this.onAddClick(dismissEvent, 'after', node.UUID);
       }
     });
 
     await popover.present();
   }
 
-  async onAddClick(event: MouseEvent) {
+  async onAddClick(event: MouseEvent, position?: 'before' | 'after', positionNodeId?: string) {
     if ( !this.editorService.canEdit() ) {
       return;
     }
@@ -88,7 +97,7 @@ export class EditorPage implements OnInit {
 
     popover.onDidDismiss().then(result => {
       console.log('adding node', result.data);
-      this.editorService.addNode(result.data);
+      this.editorService.addNode(result.data, position, positionNodeId);
     });
 
     // popover.onDidDismiss().then(arg => {

src/app/service/editor.service.ts

@@ -91,6 +91,32 @@ export class EditorService {
         }));
 
         await this.saveNodesAsPage(this.currentPage, this.currentNodes);
+        this.dirtyOverride = false;
+    }
+
+    async moveNode(node: HostRecord, direction: 'up' | 'down') {
+        if ( !this.currentPage ) {
+            throw new NoPageLoadedError();
+        }
+
+        const nodeIndex = this.currentNodes.findIndex(maybeNode => maybeNode.UUID === node.UUID);
+        if ( nodeIndex < 0 ) {
+            return;
+        }
+
+        if ( direction === 'up' && nodeIndex > 0 ) {
+            const otherIdx = nodeIndex - 1;
+            const otherNode = this.currentNodes[otherIdx];
+            this.currentNodes[otherIdx] = this.currentNodes[nodeIndex];
+            this.currentNodes[nodeIndex] = otherNode;
+        } else if ( direction === 'down' && nodeIndex !== (this.currentNodes.length - 1) ) {
+            const otherIdx = nodeIndex + 1;
+            const otherNode = this.currentNodes[otherIdx];
+            this.currentNodes[otherIdx] = this.currentNodes[nodeIndex];
+            this.currentNodes[nodeIndex] = otherNode;
+        }
+
+        this.dirtyOverride = true;
     }
 
     async saveNodesAsPage(page: PageRecord, nodes: HostRecord[]): Promise<HostRecord[]> {