Saving data for rectangle added

src/app/cartography/components/drawing-resizing/drawing-resizing.components.ts

@@ -1,17 +1,11 @@
 import { Component, OnInit, ElementRef, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
-import { select } from 'd3-selection';
 import { DrawingsWidget } from '../../widgets/drawings';
 import { MapDrawing } from '../../models/map/map-drawing';
-import { DraggedDataEvent } from '../../events/event-source';
+import { ResizedDataEvent } from '../../events/event-source';
 import { ResizingEnd } from '../../events/resizing';
 
-export class DrawingResizedEvent{
-    constructor() {};
-}
-
-
 @Component({
     selector: 'app-drawing-resizing',
     template: `<ng-content></ng-content>`,
@@ -20,19 +14,14 @@ export class DrawingResizedEvent{
 export class DrawingResizingComponent implements OnInit, OnDestroy{
     private resizingFinished: Subscription;
 
-    @Input('svg') svg: SVGSVGElement;
-
     constructor(
         private drawingsWidget: DrawingsWidget,
         private drawingsEventSource: DrawingsEventSource
     ) {}
 
     ngOnInit() {
-        const svg = select(this.svg);
-
         this.resizingFinished = this.drawingsWidget.resizingFinished.subscribe((evt: ResizingEnd<MapDrawing>) => {
-            console.log("inside component");
+            this.drawingsEventSource.resized.emit(new ResizedDataEvent<MapDrawing>(evt.datum, evt.x, evt.y, evt.width, evt.height));
-            this.drawingsEventSource.resized.emit(new DraggedDataEvent<MapDrawing>(evt.datum, evt.x, evt.y));
         });
     }
 

src/app/cartography/converters/map/map-drawing-to-svg-converter.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { Converter } from '../converter';
 import { MapDrawing } from '../../models/map/map-drawing';
+import { RectElement } from '../../models/drawings/rect-element';
 
 
 @Injectable()
@@ -10,6 +11,13 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
     ) {}
 
     convert(mapDrawing: MapDrawing) {
-        return "";
+        let str = `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">`;
+        let elem = ``;
+
+        if (mapDrawing.element instanceof RectElement) {
+            elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
+        }
+
+        return str + elem + `</svg>`;
     }
 }

src/app/cartography/events/drawings-event-source.ts

@@ -1,10 +1,10 @@
 import { Injectable, EventEmitter } from "@angular/core";
-import { DraggedDataEvent } from "./event-source";
+import { DraggedDataEvent, ResizedDataEvent } from "./event-source";
 import { MapDrawing } from "../models/map/map-drawing";
 
 
 @Injectable()
 export class DrawingsEventSource {
   public dragged = new EventEmitter<DraggedDataEvent<MapDrawing>>();
-  public resized = new EventEmitter<DraggedDataEvent<MapDrawing>>();
+  public resized = new EventEmitter<ResizedDataEvent<MapDrawing>>();
 }

src/app/cartography/widgets/drawings.ts

@@ -81,6 +81,7 @@ export class DrawingsWidget implements Widget {
           (datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += evt.dy/2;
           (datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += evt.dy/2;
         }
+        
         datum.element.height = (datum.element.height + evt.dy) < 0 ? 1: datum.element.height += evt.dy;
         this.redrawDrawing(view, datum);
       })
@@ -123,6 +124,15 @@ export class DrawingsWidget implements Widget {
       })
       .on('end', (datum: MapDrawing) => {
         document.body.style.cursor = "initial";
+
+        const evt = new ResizingEnd<MapDrawing>();
+        evt.x = datum.x;
+        evt.y = datum. y;
+        evt.width = datum.element.width;
+        evt.height = datum.element.height;
+        evt.datum = datum;
+
+        this.resizingFinished.emit(evt);
       });
 
     let x: number;
@@ -151,6 +161,15 @@ export class DrawingsWidget implements Widget {
       })
       .on('end', (datum: MapDrawing) => {
         document.body.style.cursor = "initial";
+
+        const evt = new ResizingEnd<MapDrawing>();
+        evt.x = datum.x;
+        evt.y = datum. y;
+        evt.width = datum.element.width;
+        evt.height = datum.element.height;
+        evt.datum = datum;
+        
+        this.resizingFinished.emit(evt);
       });
 
     let left = drag()
@@ -169,6 +188,15 @@ export class DrawingsWidget implements Widget {
       })
       .on('end', (datum: MapDrawing) => {
         document.body.style.cursor = "initial";
+
+        const evt = new ResizingEnd<MapDrawing>();
+        evt.x = datum.x;
+        evt.y = datum. y;
+        evt.width = datum.element.width;
+        evt.height = datum.element.height;
+        evt.datum = datum;
+
+        this.resizingFinished.emit(evt);
       });
 
     merge

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

@@ -28,7 +28,7 @@ import { MapChangeDetectorRef } from '../../cartography/services/map-change-dete
 import { NodeContextMenu } from '../../cartography/events/nodes';
 import { MapLinkCreated } from '../../cartography/events/links';
 import { NodeWidget } from '../../cartography/widgets/node';
-import { DraggedDataEvent } from '../../cartography/events/event-source';
+import { DraggedDataEvent, ResizedDataEvent } from '../../cartography/events/event-source';
 import { DrawingService } from '../../services/drawing.service';
 import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter';
 import { NodesEventSource } from '../../cartography/events/nodes-event-source';
@@ -282,23 +282,15 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       });
   }
 
-  private onDrawingResized(resizedEvent: DraggedDataEvent<MapDrawing>) {
+  private onDrawingResized(resizedEvent: ResizedDataEvent<MapDrawing>) {
-    console.log("ready to save");
-    
     const drawing = this.drawingsDataSource.get(resizedEvent.datum.id);
-    console.log(resizedEvent.datum.svg);
-
     let svgString = this.mapDrawingToSvgConverter.convert(resizedEvent.datum);
-    console.log(resizedEvent.datum);
+    
-
-    /*
     this.drawingService
-      .updatePosition(this.server, drawing, drawing.x, drawing.y)
+      .updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString)
       .subscribe((serverDrawing: Drawing) => {
-        //this.drawingsDataSource.update(serverDrawing);
+        this.drawingsDataSource.update(serverDrawing);
-        //<svg height="100" width="198"><rect fill="#ffffff" fill-opacity="1.0" height="100" stroke="#000000" stroke-width="2" width="198" /></svg>
+      });
-        console.log(serverDrawing.svg);
-      });*/
   }
 
   public set readonly(value) {

src/app/services/drawing.service.ts

@@ -20,6 +20,15 @@ export class DrawingService {
       });
   }
 
+  updateSizeAndPosition(server: Server, drawing: Drawing, x: number, y: number, svg: string): Observable<Drawing> {
+    return this.httpServer
+      .put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {
+        'svg': svg,
+        'x': x,
+        'y': y
+      })
+  }
+
   update(server: Server, drawing: Drawing): Observable<Drawing> {
     return this.httpServer
       .put<Drawing>(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {