diff --git a/src/app/cartography/components/drawing-resizing/drawing-resizing.components.ts b/src/app/cartography/components/drawing-resizing/drawing-resizing.components.ts
index 73c5ee7d..dfd11ba0 100644
--- a/src/app/cartography/components/drawing-resizing/drawing-resizing.components.ts
+++ b/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: ``,
@@ -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) => {
- console.log("inside component");
- this.drawingsEventSource.resized.emit(new DraggedDataEvent(evt.datum, evt.x, evt.y));
+ this.drawingsEventSource.resized.emit(new ResizedDataEvent(evt.datum, evt.x, evt.y, evt.width, evt.height));
});
}
diff --git a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts b/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
index f227a210..4922e965 100644
--- a/src/app/cartography/converters/map/map-drawing-to-svg-converter.ts
+++ b/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 {
) {}
convert(mapDrawing: MapDrawing) {
- return "";
+ let str = ``;
}
}
\ No newline at end of file
diff --git a/src/app/cartography/events/drawings-event-source.ts b/src/app/cartography/events/drawings-event-source.ts
index 8688ae96..73971484 100644
--- a/src/app/cartography/events/drawings-event-source.ts
+++ b/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>();
- public resized = new EventEmitter>();
+ public resized = new EventEmitter>();
}
diff --git a/src/app/cartography/widgets/drawings.ts b/src/app/cartography/widgets/drawings.ts
index 599f29ad..2d09d668 100644
--- a/src/app/cartography/widgets/drawings.ts
+++ b/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();
+ 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();
+ 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();
+ 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
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts
index cf35f564..c01e7e88 100644
--- a/src/app/components/project-map/project-map.component.ts
+++ b/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) {
- console.log("ready to save");
-
+ private onDrawingResized(resizedEvent: ResizedDataEvent) {
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);
- //
- console.log(serverDrawing.svg);
- });*/
+ this.drawingsDataSource.update(serverDrawing);
+ });
}
public set readonly(value) {
diff --git a/src/app/services/drawing.service.ts b/src/app/services/drawing.service.ts
index 31ef46a7..45bc1833 100644
--- a/src/app/services/drawing.service.ts
+++ b/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 {
+ return this.httpServer
+ .put(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {
+ 'svg': svg,
+ 'x': x,
+ 'y': y
+ })
+ }
+
update(server: Server, drawing: Drawing): Observable {
return this.httpServer
.put(server, `/projects/${drawing.project_id}/drawings/${drawing.drawing_id}`, {