Initial implementation

src/app/cartography/cartography.module.ts

@@ -55,6 +55,8 @@ import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-el
 import { LineElementFactory } from './helpers/drawings-factory/line-element-factory';
 import { TextEditorComponent } from './components/text-editor/text-editor.component';
 import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
+import { MovingModeComponent } from './components/moving-mode/moving-mode.component';
+import { MovingEventSource } from './events/moving-event-source';
 
 @NgModule({
   imports: [CommonModule, MatMenuModule, MatIconModule],
@@ -67,7 +69,8 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
     ...ANGULAR_MAP_DECLARATIONS,
     SelectionControlComponent,
     SelectionSelectComponent,
-    DraggableSelectionComponent
+    DraggableSelectionComponent,
+    MovingModeComponent
   ],
   providers: [
     CssFixer,
@@ -87,6 +90,7 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
     DrawingsEventSource,
     NodesEventSource,
     LinksEventSource,
+    MovingEventSource,
     MapDrawingToSvgConverter,
     DrawingToMapDrawingConverter,
     LabelToMapLabelConverter,

src/app/cartography/components/d3-map/d3-map.component.html

@@ -8,3 +8,4 @@
 <app-selection-select></app-selection-select>
 <app-text-editor #textEditor [svg]="svg"></app-text-editor>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>
+<app-moving-mode [svg]="svg"></app-moving-mode>

src/app/cartography/components/d3-map/d3-map.component.ts

@@ -121,7 +121,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
 
     this.subscriptions.push(
       this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
-        this.movingToolWidget.setEnabled(value);
+        //this.movingToolWidget.setEnabled(value);
         this.mapChangeDetectorRef.detectChanges();
       })
     );

src/app/cartography/components/moving-mode/moving-mode.component.ts

@@ -0,0 +1,105 @@
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { Context } from '../../models/context';
+import { MovingEventSource } from '../../events/moving-event-source';
+import { Subscription } from 'rxjs';
+import { select } from 'd3-selection';
+
+@Component({
+    selector: 'app-moving-mode',
+    templateUrl: './moving-mode.component.html',
+    styleUrls: ['./moving-mode.component.scss']
+})
+export class MovingModeComponent implements OnInit, OnDestroy {
+    @Input('svg') svg: SVGSVGElement;
+
+    private scrollListener: Function;
+    private mouseupListener: Function;
+    private mousedownListener: Function;
+    private mousemoveListener: Function;
+    private movingModeState: Subscription;
+
+    constructor(
+        private context: Context,
+        private movingEventSource: MovingEventSource
+    ) {}
+
+    ngOnInit() {
+        this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
+            event ? this.activate() : this.deactivate();
+        });
+    }
+
+    activate() {
+        this.addMoveListener();
+        this.addZoomListener();
+    }
+
+    addMoveListener() {
+        this.mousemoveListener = (event: MouseEvent) => {
+            const view = select(this.svg);
+            const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
+            const canvasEnter = canvas.enter().append<SVGGElement>('g').attr('class', 'canvas');
+            
+            canvas.merge(canvasEnter).attr('transform', () => {
+                this.context.transformation.x = this.context.transformation.x + event.movementX;
+                this.context.transformation.y = this.context.transformation.y + event.movementY;
+
+                const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+                const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+                const kTrans = this.context.transformation.k;
+
+                return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
+            });
+        };
+        this.mousedownListener = (event: MouseEvent) => {
+            this.mouseupListener = (event: MouseEvent) => {
+                this.removelisteners();
+            };
+
+            this.svg.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
+            this.svg.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
+        };
+        this.svg.addEventListener('mousedown', this.mousedownListener as EventListenerOrEventListenerObject);
+    }
+
+    addZoomListener() {
+        this.scrollListener = (event: WheelEvent) => {
+            event.stopPropagation();
+            event.preventDefault();
+
+            let zoom = event.deltaY;
+            zoom = event.deltaMode === 0 ? zoom/100 : zoom/3;
+
+            const view = select(this.svg);
+            const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
+            const canvasEnter = canvas.enter().append<SVGGElement>('g').attr('class', 'canvas');
+            
+            canvas.merge(canvasEnter).attr('transform', () => {
+                this.context.transformation.k = this.context.transformation.k - zoom/10;
+
+                const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+                const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+                const kTrans = this.context.transformation.k;
+
+                return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
+            });
+        };
+        document.addEventListener('wheel', this.scrollListener as EventListenerOrEventListenerObject);
+    }
+
+    removelisteners() {
+        this.svg.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
+        this.svg.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
+    }
+
+    deactivate() {
+        this.svg.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
+        this.svg.removeEventListener('mousedown', this.mousedownListener as EventListenerOrEventListenerObject);
+        this.svg.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
+        document.removeEventListener('wheel', this.scrollListener as EventListenerOrEventListenerObject);
+    }
+
+    ngOnDestroy() {
+        this.movingModeState.unsubscribe();
+    }
+}

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

@@ -0,0 +1,6 @@
+import { Injectable, EventEmitter } from "@angular/core";
+
+@Injectable()
+export class MovingEventSource {
+    public movingModeState = new EventEmitter<boolean>();
+}

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

@@ -42,6 +42,7 @@ import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-l
 import { RecentlyOpenedProjectService } from '../../services/recentlyOpenedProject.service';
 import { MapLink } from '../../cartography/models/map/map-link';
 import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter';
+import { MovingEventSource } from '../../cartography/events/moving-event-source';
 
 
 @Component({
@@ -106,7 +107,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private toolsService: ToolsService,
     private selectionManager: SelectionManager,
     private selectionTool: SelectionTool,
-    private recentlyOpenedProjectService: RecentlyOpenedProjectService
+    private recentlyOpenedProjectService: RecentlyOpenedProjectService,
+    private movingEventSource: MovingEventSource
   ) {}
 
   ngOnInit() {
@@ -292,7 +294,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
   public toggleMovingMode() {
     this.tools.moving = !this.tools.moving;
-    this.toolsService.movingToolActivation(this.tools.moving);
+    this.movingEventSource.movingModeState.emit(this.tools.moving);
+    //this.toolsService.movingToolActivation(this.tools.moving);
+    
     if (!this.readonly) {
       this.tools.selection = !this.tools.moving;
       this.toolsService.selectionToolActivation(this.tools.selection);