Merge pull request #351 from GNS3/Insert-image-drawing

Insert image drawing

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

@@ -366,6 +366,27 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.drawTools.visibility = true;
   }
 
+  public uploadImageFile(event) {
+    this.readImageFile(event.target);
+  }
+
+  private readImageFile(fileInput) {
+    let file: File = fileInput.files[0];
+    let fileReader: FileReader = new FileReader();
+    let imageToUpload = new Image();
+
+    fileReader.onloadend = () => {
+      let image = fileReader.result;
+      let svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" 
+                height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\">\n<image height=\"${imageToUpload.height}\" width=\"${imageToUpload.width}\" 
+                xlink:href=\"${image}\"/>\n</svg>`;
+      this.drawingService.add(this.server, this.project.project_id, -(imageToUpload.width/2), -(imageToUpload.height/2), svg).subscribe(() => {});
+    }
+        
+    imageToUpload.onload = () => { fileReader.readAsDataURL(file) };
+    imageToUpload.src = window.URL.createObjectURL(file);
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();