Code cleaned-up

src/app/cartography/cartography.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common';
 import { MatMenuModule, MatIconModule } from '@angular/material';
 
 import { DrawLinkToolComponent } from './components/draw-link-tool/draw-link-tool.component';
-import { NodeSelectInterfaceComponent } from './components/node-select-interface/node-select-interface.component';
 import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.components';
 
 import { CssFixer } from './helpers/css-fixer';

src/app/cartography/widgets/drawing.ts

@@ -9,8 +9,6 @@ import { RectDrawingWidget } from "./drawings/rect-drawing";
 import { LineDrawingWidget } from "./drawings/line-drawing";
 import { EllipseDrawingWidget } from "./drawings/ellipse-drawing";
 import { MapDrawing } from "../models/map/map-drawing";
-import { drag } from "d3-drag";
-import { event } from "d3-selection";
 import { SelectionManager } from "../managers/selection-manager";
 
 @Injectable()
@@ -67,8 +65,6 @@ export class DrawingWidget implements Widget {
       .select<SVGAElement>('line.top')
         .attr('stroke', 'transparent')
         .attr('stroke-width', '8px')
-        // .attr('stroke-dashoffset', '0')
-        // .attr('stroke-dasharray', '3')
         .attr('x1', '0')
         .attr('x2', (drawing) => drawing.element.width)
         .attr('y1', '0')
@@ -80,8 +76,6 @@ export class DrawingWidget implements Widget {
       .select<SVGAElement>('line.bottom')
         .attr('stroke', 'transparent')
         .attr('stroke-width', '8px')
-        // .attr('stroke-dashoffset', '0')
-        // .attr('stroke-dasharray', '3')
         .attr('x1', '0')
         .attr('x2', (drawing) => drawing.element.width)
         .attr('y1', (drawing) => drawing.element.height)
@@ -93,8 +87,6 @@ export class DrawingWidget implements Widget {
       .select<SVGAElement>('line.right')
         .attr('stroke', 'transparent')
         .attr('stroke-width', '8px')
-        // .attr('stroke-dashoffset', '0')
-        // .attr('stroke-dasharray', '3')
         .attr('x1', '0')
         .attr('x2', '0')
         .attr('y1', '0')
@@ -106,8 +98,6 @@ export class DrawingWidget implements Widget {
       .select<SVGAElement>('line.left')
         .attr('stroke', 'transparent')
         .attr('stroke-width', '8px')
-        // .attr('stroke-dashoffset', '0')
-        // .attr('stroke-dasharray', '3')
         .attr('x1', (drawing) => drawing.element.width)
         .attr('x2', (drawing) => drawing.element.width)
         .attr('y1', '0')

src/app/cartography/widgets/drawings.ts

@@ -73,7 +73,8 @@ export class DrawingsWidget implements Widget {
     let y: number;
     let dy: number;
     let topEdge: number;
-    let isReflected: boolean = false;
+    let bottomEdge: number;
+    let isReflectedVertical: boolean = false;
     let bottom = drag()
       .on('start', (datum: MapDrawing) => {
         document.body.style.cursor = "ns-resize"; 
@@ -81,11 +82,10 @@ export class DrawingsWidget implements Widget {
       })
       .on('drag', (datum: MapDrawing) => {
         const evt = event;
-        console.log("bottom drag event ", evt);
 
-        if (!isReflected) {
+        if (!isReflectedVertical) {
           if ((datum.element.height + evt.dy) < 0) {
-            isReflected = true;
+            isReflectedVertical = true;
             y = topEdge;
             datum.element.height = Math.abs(datum.element.height + evt.dy);
           } else {
@@ -102,7 +102,7 @@ export class DrawingsWidget implements Widget {
           
           if ((datum.element.height + dy) < 0){
             y = topEdge;
-            isReflected = false;
+            isReflectedVertical = false;
             datum.element.height = Math.abs(datum.element.height + evt.dy);
           } else {
             datum.y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
@@ -129,53 +129,48 @@ export class DrawingsWidget implements Widget {
         this.resizingFinished.emit(evt);
       });
 
-    //let y: number;
-    //let dy: number;
-    let bottomEdge: number;
-    //let isReflected: boolean = false;
     let top = drag()
       .on('start', (datum: MapDrawing) => {
         y = event.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
         bottomEdge = y + datum.element.height;
         document.body.style.cursor = "ns-resize";
       })
-      // .on('drag', (datum: MapDrawing) => {
+      .on('drag', (datum: MapDrawing) => {
-      //   const evt = event;
+        const evt = event;
 
-      //   if (!isReflected) {
+        if (!isReflectedVertical) {
-      //     dy =  y - (evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y);
+          dy =  y - (evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y);
-      //     y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
+          y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
-      //     console.log(y);
 
-      //     if ((datum.element.height + dy) < 0){
+          if ((datum.element.height + dy) < 0){
-      //       y = bottomEdge;
+            y = bottomEdge;
-      //       isReflected = true;
+            isReflectedVertical = true;
-      //       datum.element.height = Math.abs(datum.element.height + evt.dy);
+            datum.element.height = Math.abs(datum.element.height + evt.dy);
-      //     } else {
+          } else {
-      //       datum.y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
+            datum.y = evt.sourceEvent.clientY - this.context.getZeroZeroTransformationPoint().y;
-      //       datum.element.height += dy;
+            datum.element.height += dy;
-      //       if (datum.element instanceof EllipseElement) {
+            if (datum.element instanceof EllipseElement) {
-      //         (datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += dy/2;
+              (datum.element as EllipseElement).cy = (datum.element as EllipseElement).cy + dy/2 < 0 ? 1 : (datum.element as EllipseElement).cy += dy/2;
-      //         (datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += dy/2;
+              (datum.element as EllipseElement).ry = (datum.element as EllipseElement).ry + dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += dy/2;
-      //       }
+            }
-      //     }
+          }
-      //   } else {
+        } else {
-      //     if ((datum.element.height + evt.dy) < 0) {
+          if ((datum.element.height + evt.dy) < 0) {
-      //       isReflected = false;
+            isReflectedVertical = false;
-      //       y = bottomEdge;
+            y = bottomEdge;
-      //       datum.element.height = Math.abs(datum.element.height + evt.dy);
+            datum.element.height = Math.abs(datum.element.height + evt.dy);
-      //     } else {
+          } else {
-      //       datum.element.height += evt.dy;
+            datum.element.height += evt.dy;
 
-      //       if (datum.element instanceof EllipseElement){
+            if (datum.element instanceof EllipseElement){
-      //         (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).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 as EllipseElement).ry = (datum.element as EllipseElement).ry + evt.dy/2 < 0 ? 1 : (datum.element as EllipseElement).ry += evt.dy/2;
-      //       }
+            }
-      //     }
+          }
-      //   }
+        }
 
-      //   this.redrawDrawing(view, datum);
+        this.redrawDrawing(view, datum);
-      //})
+      })
       .on('end', (datum: MapDrawing) => {
         document.body.style.cursor = "initial";
 
@@ -186,23 +181,31 @@ export class DrawingsWidget implements Widget {
         evt.height = datum.element.height;
         evt.datum = datum;
 
-        //this.resizingFinished.emit(evt);
+        this.resizingFinished.emit(evt);
       });
 
     let x: number;
     let dx: number;
+    let rightEdge: number;
+    let leftEdge: number;
+    let isReflectedHorizontal: boolean = false;
     let right = drag()
-      .on('start', () => {
+      .on('start', (datum: MapDrawing) => {
         x = event.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
+        leftEdge = x + datum.element.width;
         document.body.style.cursor = "ew-resize";
       })
       .on('drag', (datum: MapDrawing) => {
         const evt = event;
+
+        if (!isReflectedHorizontal) {
           dx = x - (evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x);
           x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
 
-        if ((datum.element.width + dx) < 0){
+          if ((datum.element.width + dx) < 0) {
-          datum.element.width = 1;
+            x = leftEdge;
+            isReflectedHorizontal = true;
+            datum.element.width = Math.abs(datum.element.width + evt.dx);
           } else {
             datum.x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
             datum.element.width += dx;
@@ -211,6 +214,20 @@ export class DrawingsWidget implements Widget {
               (datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += dx/2;
             }
           }
+        } else {
+          if ((datum.element.width + evt.dx) < 0) {
+            x = leftEdge;
+            isReflectedHorizontal = false;
+            datum.element.width = Math.abs(datum.element.width + evt.dx);
+          } else {
+            if (datum.element instanceof EllipseElement){
+              (datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += evt.dx/2;
+              (datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += evt.dx/2;
+            }
+            datum.element.width = (datum.element.width + evt.dx) < 0 ? 1 : datum.element.width += evt.dx;
+          }
+        }
+
         this.redrawDrawing(view, datum);
       })
       .on('end', (datum: MapDrawing) => {
@@ -227,17 +244,43 @@ export class DrawingsWidget implements Widget {
       });
 
     let left = drag()
-      .on('start', () => {
+      .on('start', (datum: MapDrawing) => {
         document.body.style.cursor = "ew-resize";
+        rightEdge = datum.x;
       })
       .on('drag', (datum: MapDrawing) => {
         const evt = event;
 
+        if (!isReflectedHorizontal) {
+          if ((datum.element.width + evt.dx) < 0) {
+            x = rightEdge;
+            isReflectedHorizontal = true;
+            datum.element.width = Math.abs(datum.element.width + evt.dx);
+          } else {
             if (datum.element instanceof EllipseElement){
               (datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += evt.dx/2;
               (datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + evt.dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += evt.dx/2;
             }
             datum.element.width = (datum.element.width + evt.dx) < 0 ? 1 : datum.element.width += evt.dx;
+          }
+        } else {
+          dx = x - (evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x);
+          x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
+
+          if ((datum.element.width + dx) < 0) {
+            x = rightEdge;
+            isReflectedHorizontal = false;
+            datum.element.width = Math.abs(datum.element.width + evt.dx);
+          } else {
+            datum.x = evt.sourceEvent.clientX - this.context.getZeroZeroTransformationPoint().x;
+            datum.element.width += dx;
+            if (datum.element instanceof EllipseElement) {
+              (datum.element as EllipseElement).cx = (datum.element as EllipseElement).cx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).cx += dx/2;
+              (datum.element as EllipseElement).rx = (datum.element as EllipseElement).rx + dx/2 < 0 ? 1 : (datum.element as EllipseElement).rx += dx/2;
+            }
+          }
+        }
+
         this.redrawDrawing(view, datum);
       })
       .on('end', (datum: MapDrawing) => {
@@ -273,4 +316,5 @@ export class DrawingsWidget implements Widget {
   private selectDrawing(view: SVGSelection, drawing: MapDrawing) {
     return view.selectAll<SVGGElement, MapDrawing>(`g.drawing[drawing_id="${drawing.id}"]`);
   }
+
 }

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

@@ -108,7 +108,7 @@ svg.map image:hover, svg.map image.chosen, g.selected {
 }
 
 g.selected line {
-  stroke: black;
+  stroke: transparent;
 }
 
 path.selected {

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

@@ -104,7 +104,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private nodesEventSource: NodesEventSource,
     private drawingsEventSource: DrawingsEventSource,
     private linksEventSource: LinksEventSource,
-    private mapDrawingToSvgConverter: MapDrawingToSvgConverter
+    private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
     private settingsService: SettingsService,
   ) {}
 
@@ -312,7 +312,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   private onDrawingResized(resizedEvent: ResizedDataEvent<MapDrawing>) {
     const drawing = this.drawingsDataSource.get(resizedEvent.datum.id);
     let svgString = this.mapDrawingToSvgConverter.convert(resizedEvent.datum);
-    console.log(svgString);
     
     this.drawingService
       .updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString)