Initial implementation of inserting images

src/app/components/project-map/project-map.component.html

@@ -103,6 +103,21 @@
     >
       <mat-icon>create</mat-icon>
     </button>
+    <input
+      type="file"
+      accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
+      class="non-visible"
+      #file
+      (change)="uploadImageFile($event)"
+    />
+    <button
+      matTooltip="Insert a picture"
+      mat-icon-button
+      class="menu-button"
+      (click)="file.click()"
+    >
+      <mat-icon>image</mat-icon>
+    </button>
     <button
       matTooltip="Draw a rectangle"
       mat-icon-button

src/app/components/project-map/project-map.component.scss

@@ -39,6 +39,10 @@ g.node:hover {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+.non-visible {
+  display: none;
+}
+
 #menu-wrapper {
   position: fixed;
   background: transparent;
@@ -76,7 +80,7 @@ g.node:hover {
 }
 
 .extended {
-  width: 570px !important;
+  width: 640px !important;
   height: 100%;
   overflow: hidden;
 }

src/app/components/project-map/project-map.component.ts

@@ -59,6 +59,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public server: Server;
   public selectedDrawing: string;
   private ws: Subject<any>;
+  private image;
 
   tools = {
     selection: true,
@@ -358,6 +359,23 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.drawTools.visibility = true;
   }
 
+  public uploadImageFile(event) {
+    this.readImageFile(event.target);
+  }
+
+  private readImageFile(fileInput) {
+    var file: File = fileInput.files[0];
+    var fileReader: FileReader = new FileReader();
+
+    fileReader.onloadend = (e) => {
+      this.image = fileReader.result;
+      let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" height=\"1086\" width=\"2106\">\n<image height=\"1086\" width=\"2106\" xlink:href=\"${this.image}\"/>\n</svg>`;
+      this.drawingService.add(this.server, this.project.project_id, 0, 0, svg).subscribe(() => {});
+    }
+
+    fileReader.readAsDataURL(file);
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();