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 = ``; + let elem = ``; + + if (mapDrawing.element instanceof RectElement) { + elem = ``; + } + + return str + elem + ``; } } \ 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}`, {