From 085b099e9620ba32615101a47d42674faf0c433a Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Wed, 19 Dec 2018 07:25:09 -0800 Subject: [PATCH] Fixes after review --- src/app/app.module.ts | 6 ++- src/app/cartography/cartography.module.ts | 12 ++++- ...factory.ts => default-drawings-factory.ts} | 25 ++++++--- .../ellipse-element-factory.ts | 2 + .../drawings-factory/line-element-factory.ts | 2 + .../rectangle-element-factory.ts | 2 + .../drawings-factory/text-element-factory.ts | 2 + .../drawing-resized.component.css | 0 .../drawing-resized.component.html | 0 .../drawing-resized.component.spec.ts | 0 .../drawing-resized.component.ts | 47 ++++++++++++++++ .../text-edited/text-edited.component.css | 0 .../text-edited/text-edited.component.html | 0 .../text-edited/text-edited.component.spec.ts | 0 .../text-edited/text-edited.component.ts | 53 +++++++++++++++++++ .../add-drawing/add-drawing.component.spec.ts | 4 +- .../add-drawing/add-drawing.component.ts | 4 +- .../project-map/project-map.component.html | 3 ++ .../project-map/project-map.component.spec.ts | 4 +- .../project-map/project-map.component.ts | 42 ++------------- 20 files changed, 152 insertions(+), 56 deletions(-) rename src/app/cartography/helpers/{drawings-factory.ts => default-drawings-factory.ts} (52%) create mode 100644 src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.css create mode 100644 src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.html create mode 100644 src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts create mode 100644 src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts create mode 100644 src/app/components/drawings-listeners/text-edited/text-edited.component.css create mode 100644 src/app/components/drawings-listeners/text-edited/text-edited.component.html create mode 100644 src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts create mode 100644 src/app/components/drawings-listeners/text-edited/text-edited.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index baeb2276..d2c85c19 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -75,6 +75,8 @@ import { MatSidenavModule } from '@angular/material'; import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component'; import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component'; import { AddDrawingComponent } from './components/project-map/add-drawing/add-drawing.component'; +import { DrawingResizedComponent } from './components/drawings-listeners/drawing-resized/drawing-resized.component'; +import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component'; if (environment.production) { @@ -118,7 +120,9 @@ if (environment.production) { ServerDiscoveryComponent, NodeSelectInterfaceComponent, DrawLinkToolComponent, - AddDrawingComponent + AddDrawingComponent, + DrawingResizedComponent, + TextEditedComponent ], imports: [ BrowserModule, diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index 8526ac6e..23b6c27e 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -4,7 +4,7 @@ import { MatMenuModule, MatIconModule } from '@angular/material'; import { CssFixer } from './helpers/css-fixer'; import { FontFixer } from './helpers/font-fixer'; -import { DrawingsFactory } from './helpers/drawings-factory'; +import { DefaultDrawingsFactory } from './helpers/default-drawings-factory'; import { MultiLinkCalculatorHelper } from './helpers/multi-link-calculator-helper'; import { SvgToDrawingConverter } from './helpers/svg-to-drawing-converter'; import { QtDasharrayFixer } from './helpers/qt-dasharray-fixer'; @@ -46,6 +46,10 @@ import { TextAddingComponent } from './components/text-adding/text-adding.compon import { TextEditingComponent } from './components/text-editing/text-editing.component'; import { FontBBoxCalculator } from './helpers/font-bbox-calculator'; import { StylesToFontConverter } from './converters/styles-to-font-converter'; +import { TextElementFactory } from './helpers/drawings-factory/text-element-factory'; +import { EllipseElementFactory } from './helpers/drawings-factory/ellipse-element-factory'; +import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-element-factory'; +import { LineElementFactory } from './helpers/drawings-factory/line-element-factory'; @NgModule({ @@ -68,7 +72,11 @@ import { StylesToFontConverter } from './converters/styles-to-font-converter'; providers: [ CssFixer, FontFixer, - DrawingsFactory, + DefaultDrawingsFactory, + TextElementFactory, + EllipseElementFactory, + RectangleElementFactory, + LineElementFactory, MultiLinkCalculatorHelper, SvgToDrawingConverter, QtDasharrayFixer, diff --git a/src/app/cartography/helpers/drawings-factory.ts b/src/app/cartography/helpers/default-drawings-factory.ts similarity index 52% rename from src/app/cartography/helpers/drawings-factory.ts rename to src/app/cartography/helpers/default-drawings-factory.ts index a63f47c7..197f6d9e 100644 --- a/src/app/cartography/helpers/drawings-factory.ts +++ b/src/app/cartography/helpers/default-drawings-factory.ts @@ -7,17 +7,26 @@ import { DrawingElementFactory } from './drawings-factory/drawing-element-factor import { MapDrawing } from '../models/map/map-drawing'; @Injectable() -export class DrawingsFactory { +export class DefaultDrawingsFactory { private factory: DrawingElementFactory; - private availablefactories = { - 'text': new TextElementFactory, - 'ellipse': new EllipseElementFactory, - 'rectangle': new RectangleElementFactory, - 'line': new LineElementFactory - }; + private availableFactories: {[ key: string]: DrawingElementFactory}; + + constructor( + private textElementFactory: TextElementFactory, + private ellipseElementFactory: EllipseElementFactory, + private rectangleElementFactory: RectangleElementFactory, + private lineElementFactory: LineElementFactory + ){ + this.availableFactories = { + 'text': this.textElementFactory, + 'ellipse': this.ellipseElementFactory, + 'rectangle': this.rectangleElementFactory, + 'line': this.lineElementFactory + }; + } getDrawingMock(drawingType: string){ - this.factory = this.availablefactories[drawingType]; + this.factory = this.availableFactories[drawingType]; let mapDrawing = new MapDrawing(); mapDrawing.element = this.factory.getDrawingElement(); diff --git a/src/app/cartography/helpers/drawings-factory/ellipse-element-factory.ts b/src/app/cartography/helpers/drawings-factory/ellipse-element-factory.ts index 25ee9f32..845ef462 100644 --- a/src/app/cartography/helpers/drawings-factory/ellipse-element-factory.ts +++ b/src/app/cartography/helpers/drawings-factory/ellipse-element-factory.ts @@ -1,7 +1,9 @@ import { DrawingElementFactory } from './drawing-element-factory'; import { DrawingElement } from '../../models/drawings/drawing-element'; import { EllipseElement } from '../../models/drawings/ellipse-element'; +import { Injectable } from '@angular/core'; +@Injectable() export class EllipseElementFactory implements DrawingElementFactory{ getDrawingElement(): DrawingElement{ diff --git a/src/app/cartography/helpers/drawings-factory/line-element-factory.ts b/src/app/cartography/helpers/drawings-factory/line-element-factory.ts index 39b8d65c..3e176800 100644 --- a/src/app/cartography/helpers/drawings-factory/line-element-factory.ts +++ b/src/app/cartography/helpers/drawings-factory/line-element-factory.ts @@ -1,7 +1,9 @@ import { DrawingElementFactory } from './drawing-element-factory'; import { DrawingElement } from '../../models/drawings/drawing-element'; import { LineElement } from '../../models/drawings/line-element'; +import { Injectable } from '@angular/core'; +@Injectable() export class LineElementFactory implements DrawingElementFactory{ getDrawingElement(): DrawingElement{ diff --git a/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts b/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts index 1b114b32..1db569f9 100644 --- a/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts +++ b/src/app/cartography/helpers/drawings-factory/rectangle-element-factory.ts @@ -1,7 +1,9 @@ import { DrawingElementFactory } from './drawing-element-factory'; import { DrawingElement } from '../../models/drawings/drawing-element'; import { RectElement } from '../../models/drawings/rect-element'; +import { Injectable } from '@angular/core'; +@Injectable() export class RectangleElementFactory implements DrawingElementFactory{ getDrawingElement() : DrawingElement { diff --git a/src/app/cartography/helpers/drawings-factory/text-element-factory.ts b/src/app/cartography/helpers/drawings-factory/text-element-factory.ts index b9495765..24aeb672 100644 --- a/src/app/cartography/helpers/drawings-factory/text-element-factory.ts +++ b/src/app/cartography/helpers/drawings-factory/text-element-factory.ts @@ -1,7 +1,9 @@ import { DrawingElementFactory } from './drawing-element-factory'; import { DrawingElement } from '../../models/drawings/drawing-element'; import { TextElement } from '../../models/drawings/text-element'; +import { Injectable } from '@angular/core'; +@Injectable() export class TextElementFactory implements DrawingElementFactory{ getDrawingElement(): DrawingElement { diff --git a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.css b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.html b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.html new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts new file mode 100644 index 00000000..87654a51 --- /dev/null +++ b/src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts @@ -0,0 +1,47 @@ +import { Component, Input, OnInit, OnDestroy } from "@angular/core"; +import { DrawingService } from '../../../services/drawing.service'; +import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource'; +import { DrawingsEventSource } from '../../../cartography/events/drawings-event-source'; +import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter'; +import { Server } from '../../../models/server'; +import { ResizedDataEvent } from '../../../cartography/events/event-source'; +import { MapDrawing } from '../../../cartography/models/map/map-drawing'; +import { Drawing } from '../../../cartography/models/drawing'; +import { Subscription } from 'rxjs'; + + +@Component({ + selector: 'app-drawing-resized', + templateUrl: './drawing-resized.component.html', + styleUrls: ['./drawing-resized.component.css'] +}) +export class DrawingResizedComponent implements OnInit, OnDestroy{ + @Input() server: Server; + private drawingResized: Subscription; + + constructor( + private drawingService: DrawingService, + private drawingsDataSource: DrawingsDataSource, + private drawingsEventSource: DrawingsEventSource, + private mapDrawingToSvgConverter: MapDrawingToSvgConverter + ){} + + ngOnInit(){ + this.drawingResized = this.drawingsEventSource.resized.subscribe((evt) => this.onDrawingResized(evt)) + } + + public onDrawingResized(resizedEvent: ResizedDataEvent) { + const drawing = this.drawingsDataSource.get(resizedEvent.datum.id); + let svgString = this.mapDrawingToSvgConverter.convert(resizedEvent.datum); + + this.drawingService + .updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString) + .subscribe((serverDrawing: Drawing) => { + this.drawingsDataSource.update(serverDrawing); + }); + } + + ngOnDestroy(){ + this.drawingResized.unsubscribe(); + } +} diff --git a/src/app/components/drawings-listeners/text-edited/text-edited.component.css b/src/app/components/drawings-listeners/text-edited/text-edited.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/text-edited/text-edited.component.html b/src/app/components/drawings-listeners/text-edited/text-edited.component.html new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts b/src/app/components/drawings-listeners/text-edited/text-edited.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/text-edited/text-edited.component.ts b/src/app/components/drawings-listeners/text-edited/text-edited.component.ts new file mode 100644 index 00000000..e9682a28 --- /dev/null +++ b/src/app/components/drawings-listeners/text-edited/text-edited.component.ts @@ -0,0 +1,53 @@ +import { Component, OnInit, OnDestroy, Input } from "@angular/core"; +import { TextEditedDataEvent } from '../../../cartography/events/event-source'; +import { MapDrawing } from '../../../cartography/models/map/map-drawing'; +import { TextElement } from '../../../cartography/models/drawings/text-element'; +import { Drawing } from '../../../cartography/models/drawing'; +import { Server } from '../../../models/server'; +import { Subscription } from 'rxjs'; +import { DrawingService } from '../../../services/drawing.service'; +import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource'; +import { DrawingsEventSource } from '../../../cartography/events/drawings-event-source'; +import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter'; + + +@Component({ + selector: 'app-text-edited', + templateUrl: './text-edited.component.html', + styleUrls: ['./text-edited.component.css'] +}) +export class TextEditedComponent implements OnInit, OnDestroy{ + @Input() server: Server; + private textEdited: Subscription; + + constructor( + private drawingService: DrawingService, + private drawingsDataSource: DrawingsDataSource, + private drawingsEventSource: DrawingsEventSource, + private mapDrawingToSvgConverter: MapDrawingToSvgConverter + ){} + + ngOnInit(){ + this.textEdited = this.drawingsEventSource.textEdited.subscribe((evt) => this.onTextEdited(evt)); + } + + public onTextEdited(evt: TextEditedDataEvent){ + let mapDrawing: MapDrawing = new MapDrawing(); + mapDrawing.element = evt.textElement; + (mapDrawing.element as TextElement).text = evt.editedText; + let svgString = this.mapDrawingToSvgConverter.convert(mapDrawing); + + let drawing = this.drawingsDataSource.get(evt.textDrawingId); + + this.drawingService + .updateText(this.server, drawing, svgString) + .subscribe((serverDrawing: Drawing) => { + this.drawingsDataSource.update(serverDrawing); + this.drawingsEventSource.textSaved.emit(true); + }); + } + + ngOnDestroy(){ + this.textEdited.unsubscribe(); + } +} diff --git a/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts b/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts index d01e7d7b..859259b3 100644 --- a/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts +++ b/src/app/components/project-map/add-drawing/add-drawing.component.spec.ts @@ -1,6 +1,6 @@ import { AddDrawingComponent } from "./add-drawing.component"; import { ComponentFixture, TestBed, async } from '@angular/core/testing'; -import { DrawingsFactory } from '../../../cartography/helpers/drawings-factory'; +import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory'; import { DrawingService } from '../../../services/drawing.service'; import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource'; import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter'; @@ -15,7 +15,7 @@ describe('AddDrawingComponent', () => { providers: [ { provide: DrawingService }, { provide: DrawingsDataSource }, - { provide: DrawingsFactory }, + { provide: DefaultDrawingsFactory }, { provide: MapDrawingToSvgConverter }, { provide: Context } ], diff --git a/src/app/components/project-map/add-drawing/add-drawing.component.ts b/src/app/components/project-map/add-drawing/add-drawing.component.ts index 4e78958e..cd2b9a00 100644 --- a/src/app/components/project-map/add-drawing/add-drawing.component.ts +++ b/src/app/components/project-map/add-drawing/add-drawing.component.ts @@ -1,7 +1,7 @@ import { Component, Input, OnChanges, SimpleChange, Output, EventEmitter } from "@angular/core"; import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource'; import { DrawingService } from '../../../services/drawing.service'; -import { DrawingsFactory } from '../../../cartography/helpers/drawings-factory'; +import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory'; import { MapDrawingToSvgConverter } from '../../../cartography/converters/map/map-drawing-to-svg-converter'; import { Project } from '../../../models/project'; import { Server } from '../../../models/server'; @@ -27,7 +27,7 @@ export class AddDrawingComponent implements OnChanges { constructor( private drawingService: DrawingService, private drawingsDataSource: DrawingsDataSource, - private drawingsFactory: DrawingsFactory, + private drawingsFactory: DefaultDrawingsFactory, private mapDrawingToSvgConverter: MapDrawingToSvgConverter, private context: Context ){} diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 54886d72..fe96db33 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -154,3 +154,6 @@ [selectedDrawing]="selectedDrawing" (drawingSaved)="onDrawingSaved($event)"> + + + diff --git a/src/app/components/project-map/project-map.component.spec.ts b/src/app/components/project-map/project-map.component.spec.ts index e041051b..2b58dae7 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/src/app/components/project-map/project-map.component.spec.ts @@ -42,7 +42,7 @@ import { HttpServer } from '../../services/http-server.service'; import { Server } from '../../models/server'; import { ResizedDataEvent } from '../../cartography/events/event-source'; import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter'; -import { DrawingsFactory } from '../../cartography/helpers/drawings-factory'; +import { DefaultDrawingsFactory } from '../../cartography/helpers/default-drawings-factory'; export class MockedProgressService { public activate() {} @@ -117,7 +117,7 @@ describe('ProjectMapComponent', () => { { provide: NodesEventSource }, { provide: DrawingsEventSource }, { provide: LinksEventSource }, - { provide: DrawingsFactory }, + { provide: DefaultDrawingsFactory }, { provide: MapDrawingToSvgConverter, useValue: { convert: () => { return ''} } }, diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 2576b30f..de7fc7fd 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -26,7 +26,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, ResizedDataEvent, TextEditedDataEvent, TextAddedDataEvent } from '../../cartography/events/event-source'; +import { DraggedDataEvent } 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'; @@ -40,9 +40,8 @@ import { SettingsService, Settings } from '../../services/settings.service'; import { MapLabel } from '../../cartography/models/map/map-label'; import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component'; import { MapLinkNode } from '../../cartography/models/map/map-link-node'; -import { TextElement } from '../../cartography/models/drawings/text-element'; import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter'; -import { DrawingsFactory } from '../../cartography/helpers/drawings-factory'; +import { DefaultDrawingsFactory } from '../../cartography/helpers/default-drawings-factory'; @Component({ @@ -109,7 +108,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private mapDrawingToSvgConverter: MapDrawingToSvgConverter, private settingsService: SettingsService, private mapLabelToLabel: MapLabelToLabelConverter, - private drawingsFactory: DrawingsFactory + private drawingsFactory: DefaultDrawingsFactory ) {} ngOnInit() { @@ -187,14 +186,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.drawingsEventSource.dragged.subscribe((evt) => this.onDrawingDragged(evt)) ); - this.subscriptions.push( - this.drawingsEventSource.resized.subscribe((evt) => this.onDrawingResized(evt)) - ); - - this.subscriptions.push( - this.drawingsEventSource.textEdited.subscribe((evt) => this.onTextEdited(evt)) - ); - this.subscriptions.push( this.linksEventSource.created.subscribe((evt) => this.onLinkCreated(evt)) ); @@ -338,37 +329,10 @@ export class ProjectMapComponent implements OnInit, OnDestroy { }); } - public onDrawingResized(resizedEvent: ResizedDataEvent) { - const drawing = this.drawingsDataSource.get(resizedEvent.datum.id); - let svgString = this.mapDrawingToSvgConverter.convert(resizedEvent.datum); - - this.drawingService - .updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString) - .subscribe((serverDrawing: Drawing) => { - this.drawingsDataSource.update(serverDrawing); - }); - } - public onDrawingSaved(evt: boolean){ this.resetDrawToolChoice(); } - public onTextEdited(evt: TextEditedDataEvent){ - let mapDrawing: MapDrawing = new MapDrawing(); - mapDrawing.element = evt.textElement; - (mapDrawing.element as TextElement).text = evt.editedText; - let svgString = this.mapDrawingToSvgConverter.convert(mapDrawing); - - let drawing = this.drawingsDataSource.get(evt.textDrawingId); - - this.drawingService - .updateText(this.server, drawing, svgString) - .subscribe((serverDrawing: Drawing) => { - this.drawingsDataSource.update(serverDrawing); - this.drawingsEventSource.textSaved.emit(true); - }); - } - public set readonly(value) { this.inReadOnlyMode = value; if (value) {