Drawings can be dragged

src/app/cartography/d3-map.imports.ts

@@ -15,6 +15,7 @@ import { RectDrawingWidget } from './widgets/drawings/rect-drawing';
 import { TextDrawingWidget } from './widgets/drawings/text-drawing';
 import { LineDrawingWidget } from './widgets/drawings/line-drawing';
 import { NodeWidget } from './widgets/node';
+import { DrawingWidget } from './widgets/drawing';
 
 export const D3_MAP_IMPORTS = [
     GraphLayout,
@@ -34,4 +35,5 @@ export const D3_MAP_IMPORTS = [
     LineDrawingWidget,
     RectDrawingWidget,
     TextDrawingWidget,
+    DrawingWidget
 ];

src/app/cartography/listeners/map-listener.ts

@@ -28,12 +28,12 @@ export class MapListener {
       }
     });
 
-    this.drag = this.drawingsWidget.draggable.start.subscribe((evt: DraggableStart<Drawing>) => {
+    this.drag = this.drawingsWidget.draggable.drag.subscribe((evt: DraggableStart<Drawing>) => {
       let drawings = this.selectionManager.getSelectedDrawings();
       drawings.forEach((drawing: Drawing) => {
         drawing.x += evt.dx;
         drawing.y += evt.dy;
-        // this.drawingsWidget.redrawDrawing(svg, drawing);
+        this.drawingsWidget.redrawDrawing(svg, drawing);
       });
     });
 

src/app/cartography/widgets/drawing.ts

@@ -0,0 +1,52 @@
+import { Injectable } from "@angular/core";
+
+import { Widget } from "./widget";
+import { SVGSelection } from "../models/types";
+import { Drawing } from "../models/drawing";
+import { DrawingShapeWidget } from "./drawings/drawing-shape-widget";
+import { TextDrawingWidget } from "./drawings/text-drawing";
+import { ImageDrawingWidget } from "./drawings/image-drawing";
+import { RectDrawingWidget } from "./drawings/rect-drawing";
+import { LineDrawingWidget } from "./drawings/line-drawing";
+import { EllipseDrawingWidget } from "./drawings/ellipse-drawing";
+
+
+@Injectable()
+export class DrawingWidget implements Widget {
+  private drawingWidgets: DrawingShapeWidget[] = [];
+  
+  constructor(
+    private textDrawingWidget: TextDrawingWidget,
+    private imageDrawingWidget: ImageDrawingWidget,
+    private rectDrawingWidget: RectDrawingWidget,
+    private lineDrawingWidget: LineDrawingWidget,
+    private ellipseDrawingWidget: EllipseDrawingWidget
+  ) {
+    this.drawingWidgets = [
+      this.textDrawingWidget,
+      this.imageDrawingWidget,
+      this.rectDrawingWidget,
+      this.lineDrawingWidget,
+      this.ellipseDrawingWidget
+    ];
+  }
+
+  public draw(view: SVGSelection) {
+    const drawing_body = view.selectAll<SVGGElement, Drawing>("g.drawing_body")
+      .data((l) => [l]);
+
+    const drawing_body_enter = drawing_body.enter()
+      .append<SVGGElement>('g')
+      .attr("class", "drawing_body");
+
+    const drawing_body_merge = drawing_body.merge(drawing_body_enter)
+      .attr('transform', (d: Drawing) => {
+        return `translate(${d.x},${d.y}) rotate(${d.rotation})`;
+      });
+  
+    this.drawingWidgets.forEach((widget) => {
+      widget.draw(drawing_body_merge);
+    });
+
+  }
+}

src/app/cartography/widgets/drawings.ts

@@ -1,25 +1,16 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { Injectable } from "@angular/core";
 
 import { Widget } from "./widget";
 import { Drawing } from "../models/drawing";
 import { SVGSelection } from "../models/types";
 import { Layer } from "../models/layer";
-import { TextDrawingWidget } from "./drawings/text-drawing";
 import { SvgToDrawingConverter } from "../helpers/svg-to-drawing-converter";
-import { ImageDrawingWidget } from "./drawings/image-drawing";
-import { RectDrawingWidget } from "./drawings/rect-drawing";
-import { LineDrawingWidget } from "./drawings/line-drawing";
-import { EllipseDrawingWidget } from "./drawings/ellipse-drawing";
-import { DrawingShapeWidget } from "./drawings/drawing-widget";
-import { event } from "d3-selection";
-import { D3DragEvent, drag } from "d3-drag";
 import { Draggable } from "../events/draggable";
+import { DrawingWidget } from "./drawing";
 
 
 @Injectable()
 export class DrawingsWidget implements Widget {
-  private drawingWidgets: DrawingShapeWidget[] = [];
-
   public draggable = new Draggable<SVGGElement, Drawing>();
 
   // public onContextMenu = new EventEmitter<NodeContextMenu>();
@@ -28,57 +19,49 @@ export class DrawingsWidget implements Widget {
   // public onDrawingDragging = new EventEmitter<NodeDragging>();
   
   constructor(
+    private drawingWidget: DrawingWidget,
     private svgToDrawingConverter: SvgToDrawingConverter,
-    private textDrawingWidget: TextDrawingWidget,
-    private imageDrawingWidget: ImageDrawingWidget,
-    private rectDrawingWidget: RectDrawingWidget,
-    private lineDrawingWidget: LineDrawingWidget,
-    private ellipseDrawingWidget: EllipseDrawingWidget
   ) {
     this.svgToDrawingConverter = new SvgToDrawingConverter();
-
-    this.drawingWidgets = [
-      this.textDrawingWidget,
-      this.imageDrawingWidget,
-      this.rectDrawingWidget,
-      this.lineDrawingWidget,
-      this.ellipseDrawingWidget
-    ];
   }
 
-  public draw(view: SVGSelection, drawings?: Drawing[]) {
+  public redrawDrawing(view: SVGSelection, drawing: Drawing) {
+    this.drawingWidget.draw(this.selectDrawing(view, drawing));
+  }
+
+  public draw(view: SVGSelection) {
     const drawing = view
-      .selectAll<SVGGElement, Drawing>('g.drawing')
+      .selectAll<SVGGElement, Drawing>("g.drawing")
-      .data((l: Layer) => {
+      .data((layer: Layer) => {
-        l.drawings.forEach((d: Drawing) => {
+        layer.drawings.forEach((d: Drawing) => {
           try {
             d.element = this.svgToDrawingConverter.convert(d.svg);
           } catch (error) {
             console.log(`Cannot convert due to Error: '${error}'`);
           }
         });
-        return l.drawings;
+        return layer.drawings;
-      }, (d: Drawing) => {
+      }, (l: Drawing) => {
-        return d.drawing_id;
+        return l.drawing_id;
       });
 
     const drawing_enter = drawing.enter()
       .append<SVGGElement>('g')
-      .attr('class', 'drawing');
+        .attr('class', 'drawing')
+        .attr('drawing_id', (l: Drawing) => l.drawing_id)
 
-    const drawing_merge = drawing.merge(drawing_enter)
+    const merge = drawing.merge(drawing_enter);
-      .attr('transform', (d: Drawing) => {
-        return `translate(${d.x},${d.y}) rotate(${d.rotation})`;
-      });
 
-    this.drawingWidgets.forEach((widget) => {
+    this.drawingWidget.draw(merge);
-      widget.draw(drawing_merge);
-    });
 
     drawing
       .exit()
         .remove();
 
-    this.draggable.call(drawing_merge);
+    this.draggable.call(merge);
+  }
+
+  private selectDrawing(view: SVGSelection, drawing: Drawing) {
+    return view.selectAll<SVGGElement, Drawing>(`g.drawing[drawing_id="${drawing.drawing_id}"]`);
   }
 }

src/app/cartography/widgets/drawings/ellipse-drawing.ts

@@ -3,7 +3,7 @@ import { Injectable } from "@angular/core";
 import { SVGSelection } from "../../models/types";
 import { Drawing } from "../../models/drawing";
 import { EllipseElement } from "../../models/drawings/ellipse-element";
-import { DrawingShapeWidget } from "./drawing-widget";
+import { DrawingShapeWidget } from "./drawing-shape-widget";
 import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer";
 
 

src/app/cartography/widgets/drawings/image-drawing.ts

@@ -3,7 +3,7 @@ import { Injectable } from "@angular/core";
 import { SVGSelection } from "../../models/types";
 import { Drawing } from "../../models/drawing";
 import { ImageElement } from "../../models/drawings/image-element";
-import { DrawingShapeWidget } from "./drawing-widget";
+import { DrawingShapeWidget } from "./drawing-shape-widget";
 
 
 @Injectable()

src/app/cartography/widgets/drawings/line-drawing.ts

@@ -3,7 +3,7 @@ import { Injectable } from "@angular/core";
 import { SVGSelection } from "../../models/types";
 import { Drawing } from "../../models/drawing";
 import { LineElement } from "../../models/drawings/line-element";
-import { DrawingShapeWidget } from "./drawing-widget";
+import { DrawingShapeWidget } from "./drawing-shape-widget";
 import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer";
 
 

src/app/cartography/widgets/drawings/rect-drawing.ts

@@ -3,7 +3,7 @@ import { Injectable } from "@angular/core";
 import { SVGSelection } from "../../models/types";
 import { Drawing } from "../../models/drawing";
 import { RectElement } from "../../models/drawings/rect-element";
-import { DrawingShapeWidget } from "./drawing-widget";
+import { DrawingShapeWidget } from "./drawing-shape-widget";
 import { QtDasharrayFixer } from "../../helpers/qt-dasharray-fixer";
 
 

src/app/cartography/widgets/drawings/text-drawing.ts

@@ -3,7 +3,7 @@ import { Injectable } from "@angular/core";
 import { SVGSelection } from "../../models/types";
 import { TextElement } from "../../models/drawings/text-element";
 import { Drawing } from "../../models/drawing";
-import { DrawingShapeWidget } from "./drawing-widget";
+import { DrawingShapeWidget } from "./drawing-shape-widget";
 import { FontFixer } from "../../helpers/font-fixer";
 import { select } from "d3-selection";