From c9b0eca05bedff8266fc73460e69312cdf5d948f Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Thu, 3 Jan 2019 07:17:47 -0800 Subject: [PATCH] Exchanging tools to components --- src/app/app.module.ts | 2 + src/app/cartography/cartography.module.ts | 2 + .../components/d3-map/d3-map.component.html | 2 +- .../components/d3-map/d3-map.component.ts | 2 +- .../temporary-text-element.component.html | 5 ++ .../temporary-text-element.component.scss | 10 +++ .../temporary-text-element.component.spec.ts | 0 .../temporary-text-element.component.ts | 69 +++++++++++++++++++ .../text-adding/text-adding.component.ts | 2 +- .../text-editing/text-editing.component.ts | 2 +- src/app/cartography/tools/text-adding-tool.ts | 12 ++-- .../text-added/text-added.component.css | 0 .../text-added/text-added.component.html | 0 .../text-added/text-added.component.spec.ts | 0 .../text-added/text-added.component.ts | 56 +++++++++++++++ .../add-drawing/add-drawing.component.ts | 2 +- .../project-map/project-map.component.html | 1 + 17 files changed, 156 insertions(+), 11 deletions(-) create mode 100644 src/app/cartography/components/temporary-text-element/temporary-text-element.component.html create mode 100644 src/app/cartography/components/temporary-text-element/temporary-text-element.component.scss create mode 100644 src/app/cartography/components/temporary-text-element/temporary-text-element.component.spec.ts create mode 100644 src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts create mode 100644 src/app/components/drawings-listeners/text-added/text-added.component.css create mode 100644 src/app/components/drawings-listeners/text-added/text-added.component.html create mode 100644 src/app/components/drawings-listeners/text-added/text-added.component.spec.ts create mode 100644 src/app/components/drawings-listeners/text-added/text-added.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0ca0f3ad..49d1599e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -83,6 +83,7 @@ import { DrawingDraggedComponent } from './components/drawings-listeners/drawing import { LinkCreatedComponent } from './components/drawings-listeners/link-created/link-created.component'; import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component'; import { ToolsService } from './services/tools.service'; +import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component'; if (environment.production) { @@ -128,6 +129,7 @@ if (environment.production) { DrawLinkToolComponent, AddDrawingComponent, DrawingResizedComponent, + TextAddedComponent, TextEditedComponent, NodeDraggedComponent, NodeLabelDraggedComponent, diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index 23b6c27e..64accd5a 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -50,6 +50,7 @@ import { TextElementFactory } from './helpers/drawings-factory/text-element-fact 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'; +import { TemporaryTextElementComponent } from './components/temporary-text-element/temporary-text-element.component'; @NgModule({ @@ -64,6 +65,7 @@ import { LineElementFactory } from './helpers/drawings-factory/line-element-fact DrawingResizingComponent, TextAddingComponent, TextEditingComponent, + TemporaryTextElementComponent, ...ANGULAR_MAP_DECLARATIONS, SelectionControlComponent, SelectionSelectComponent, diff --git a/src/app/cartography/components/d3-map/d3-map.component.html b/src/app/cartography/components/d3-map/d3-map.component.html index 4bcc5f26..baa64846 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.html +++ b/src/app/cartography/components/d3-map/d3-map.component.html @@ -11,7 +11,7 @@ + - diff --git a/src/app/cartography/components/d3-map/d3-map.component.ts b/src/app/cartography/components/d3-map/d3-map.component.ts index b7a8c922..a58313ac 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.ts +++ b/src/app/cartography/components/d3-map/d3-map.component.ts @@ -116,7 +116,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { this.subscriptions.push( this.toolsService.isTextAddingToolActivated.subscribe((value: boolean) => { - this.textAddingToolWidget.setEnabled(value); + //this.textAddingToolWidget.setEnabled(value); this.mapChangeDetectorRef.detectChanges(); }) ); diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html new file mode 100644 index 00000000..0ea1ea51 --- /dev/null +++ b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.html @@ -0,0 +1,5 @@ +
+ {{innerText}} +
diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.scss b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.scss new file mode 100644 index 00000000..1b55f51f --- /dev/null +++ b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.scss @@ -0,0 +1,10 @@ +.temporaryElement{ + padding-left: 4px; + width: fit-content; + position: absolute; + z-index: 99; + font-family: 'Noto Sans'; + font-size: 11pt; + font-weight: bold; + color: #000000; +} diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.spec.ts b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts new file mode 100644 index 00000000..c168cd4a --- /dev/null +++ b/src/app/cartography/components/temporary-text-element/temporary-text-element.component.ts @@ -0,0 +1,69 @@ +import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy } from "@angular/core"; +import { DrawingsEventSource } from '../../events/drawings-event-source'; +import { TextAddedDataEvent } from '../../events/event-source'; +import { ToolsService } from '../../../services/tools.service'; + + +@Component({ + selector: 'app-temporary-text-element', + templateUrl: './temporary-text-element.component.html', + styleUrls: ['./temporary-text-element.component.scss'] +}) +export class TemporaryTextElementComponent implements OnInit, OnDestroy { + @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef; + @Input('svg') svg: SVGSVGElement; + + //should cover all style variables that can change + private leftPosition: string; + private topPosition: string; + private innerText: string; + private isActive: boolean = true; + private mapListener: Function; + private textListener: Function; + public addingFinished = new EventEmitter(); + + constructor( + private drawingsEventSource: DrawingsEventSource, + private toolsService: ToolsService + ){ + this.leftPosition = '100px'; + this.topPosition = '100px'; + this.innerText = ''; + } + + ngOnInit(){ + this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => { + isActive ? this.activate() : this.decativate() + }); + } + + activate(){ + let addTextListener = (event: MouseEvent) => { + this.leftPosition = event.clientX.toString() + 'px'; + this.topPosition = event.clientY.toString() + 'px'; + + this.temporaryTextElement.nativeElement.focus(); + + let textListener = () => { + console.log("textListener: ", this.innerText); + this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.innerText.replace(/\n$/, ""), event.clientX, event.clientY)); + this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject); + this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener); + this.innerText = ''; + } + this.textListener = textListener; + this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener); + } + + this.mapListener = addTextListener; + this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject); + } + + decativate(){ + this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject); + } + + ngOnDestroy(){ + + } +} diff --git a/src/app/cartography/components/text-adding/text-adding.component.ts b/src/app/cartography/components/text-adding/text-adding.component.ts index b0ca8d39..e9daca9c 100644 --- a/src/app/cartography/components/text-adding/text-adding.component.ts +++ b/src/app/cartography/components/text-adding/text-adding.component.ts @@ -11,7 +11,7 @@ import { TextAddedDataEvent } from '../../events/event-source'; template: ``, styleUrls: ['./text-adding.component.scss'] }) -export class TextAddingComponent implements OnInit, OnDestroy{ +export class TextAddingComponent implements OnInit, OnDestroy { textAddingFinished: Subscription; constructor( diff --git a/src/app/cartography/components/text-editing/text-editing.component.ts b/src/app/cartography/components/text-editing/text-editing.component.ts index 9aa96a78..0ffc7c3e 100644 --- a/src/app/cartography/components/text-editing/text-editing.component.ts +++ b/src/app/cartography/components/text-editing/text-editing.component.ts @@ -9,7 +9,7 @@ import { TextEditedDataEvent } from '../../events/event-source'; template: ``, styleUrls: ['./text-editing.component.scss'] }) -export class TextEditingComponent implements OnInit, OnDestroy{ +export class TextEditingComponent implements OnInit, OnDestroy { textEditingFinished: Subscription; constructor( diff --git a/src/app/cartography/tools/text-adding-tool.ts b/src/app/cartography/tools/text-adding-tool.ts index 553c1f62..bcf80cb9 100644 --- a/src/app/cartography/tools/text-adding-tool.ts +++ b/src/app/cartography/tools/text-adding-tool.ts @@ -10,15 +10,15 @@ export class TextAddingTool { public addingFinished = new EventEmitter(); constructor( - private drawingEventSource: DrawingsEventSource + private drawingEventSource: DrawingsEventSource, ){} public setEnabled(enabled){ - if (enabled){ - this.activate(); - } else { - this.deactivate(); - } + // if (enabled){ + // this.activate(); + // } else { + // this.deactivate(); + // } } private deactivate(){ diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.css b/src/app/components/drawings-listeners/text-added/text-added.component.css new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.html b/src/app/components/drawings-listeners/text-added/text-added.component.html new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.spec.ts b/src/app/components/drawings-listeners/text-added/text-added.component.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/components/drawings-listeners/text-added/text-added.component.ts b/src/app/components/drawings-listeners/text-added/text-added.component.ts new file mode 100644 index 00000000..f76fd097 --- /dev/null +++ b/src/app/components/drawings-listeners/text-added/text-added.component.ts @@ -0,0 +1,56 @@ +import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from "@angular/core"; +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'; +import { TextAddedDataEvent } from '../../../cartography/events/event-source'; +import { DefaultDrawingsFactory } from '../../../cartography/helpers/default-drawings-factory'; +import { TextElement } from '../../../cartography/models/drawings/text-element'; +import { Server } from '../../../models/server'; +import { Project } from '../../../models/project'; +import { Drawing } from '../../../cartography/models/drawing'; + + +@Component({ + selector: 'app-text-added', + templateUrl: './text-added.component.html', + styleUrls: ['./text-added.component.css'] +}) +export class TextAddedComponent implements OnInit, OnDestroy{ + @Input() server: Server; + @Input() project: Project; + @Output() drawingSaved = new EventEmitter(); + private textAdded: Subscription; + + constructor( + private drawingService: DrawingService, + private drawingsDataSource: DrawingsDataSource, + private drawingsEventSource: DrawingsEventSource, + private drawingsFactory: DefaultDrawingsFactory, + private mapDrawingToSvgConverter: MapDrawingToSvgConverter + ){} + + ngOnInit(){ + this.textAdded = this.drawingsEventSource.textAdded.subscribe((evt) => this.onTextAdded(evt)); + } + + onTextAdded(evt: TextAddedDataEvent){ + console.log(evt); + + let drawing = this.drawingsFactory.getDrawingMock("text"); + (drawing.element as TextElement).text = "evtsavedText"; + let svgText = this.mapDrawingToSvgConverter.convert(drawing); + + this.drawingService + .add(this.server, this.project.project_id, -55, -400, svgText) + .subscribe((serverDrawing: Drawing) => { + this.drawingsDataSource.add(serverDrawing); + this.drawingSaved.emit(true); + }); + } + + ngOnDestroy(){ + this.textAdded.unsubscribe(); + } +} 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 cd2b9a00..2a4cb056 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 @@ -37,7 +37,7 @@ export class AddDrawingComponent implements OnChanges { if(this.availableDrawings.includes(changes['selectedDrawing'].currentValue)){ this.addDrawing(changes['selectedDrawing'].currentValue); } else if (changes['selectedDrawing'].currentValue === "text") { - this.addText(); + //this.addText(); } else { document.getElementsByClassName('map')[0].removeEventListener('click', this.drawListener as EventListenerOrEventListenerObject); } diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index a4f57a13..23ae4f17 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -156,4 +156,5 @@ +