diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index af13bf92..a28733b5 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -42,7 +42,6 @@ import { SelectionSelectComponent } from './components/selection-select/selectio import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component'; import { MapSettingsManager } from './managers/map-settings-manager'; import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component'; -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'; @@ -64,7 +63,6 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi ExperimentalMapComponent, DrawingAddingComponent, DrawingResizingComponent, - TextEditingComponent, TemporaryTextElementComponent, ...ANGULAR_MAP_DECLARATIONS, SelectionControlComponent, 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 b8c1ec97..0b9c5465 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.html +++ b/src/app/cartography/components/d3-map/d3-map.component.html @@ -12,6 +12,5 @@ - - + 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 87316eef..4282947f 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.ts +++ b/src/app/cartography/components/d3-map/d3-map.component.ts @@ -18,9 +18,9 @@ import { Drawing } from '../../models/drawing'; import { Symbol } from '../../../models/symbol'; import { GraphDataManager } from '../../managers/graph-data-manager'; import { MapSettingsManager } from '../../managers/map-settings-manager'; -import { TextEditingTool } from '../../tools/text-editing-tool'; import { Server } from '../../../models/server'; import { ToolsService } from '../../../services/tools.service'; +import { TemporaryTextElementComponent } from '../temporary-text-element/temporary-text-element.component'; @Component({ @@ -39,6 +39,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { @Input() height = 600; @ViewChild('svg') svgRef: ElementRef; + @ViewChild('temporaryTextElement') temporaryTextElement: TemporaryTextElementComponent; private parentNativeElement: any; private svg: Selection; @@ -62,7 +63,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { protected interfaceLabelWidget: InterfaceLabelWidget, protected selectionToolWidget: SelectionTool, protected movingToolWidget: MovingTool, - protected textEditingToolWidget: TextEditingTool, public graphLayout: GraphLayout, private toolsService: ToolsService ) { @@ -110,13 +110,6 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { } }); - this.subscriptions.push( - this.toolsService.isTextEditingToolActivated.subscribe((value: boolean) => { - this.textEditingToolWidget.setEnabled(value); - this.mapChangeDetectorRef.detectChanges(); - }) - ); - this.subscriptions.push( this.toolsService.isMovingToolActivated.subscribe((value: boolean) => { this.movingToolWidget.setEnabled(value); @@ -175,6 +168,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy { this.graphDataManager.setLinks(this.links); this.graphDataManager.setDrawings(this.drawings); this.graphLayout.draw(this.svg, this.context); + this.temporaryTextElement.activateTextEditing(); } @HostListener('window:resize', ['$event']) 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 index 65f15594..c7e04045 100644 --- 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 @@ -1,11 +1,12 @@ 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 { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source'; import { ToolsService } from '../../../services/tools.service'; -import { SVGSelection } from '../../models/types'; -import { Selection, select } from 'd3-selection'; +import { select } from 'd3-selection'; import { TextElement } from '../../models/drawings/text-element'; import { Context } from '../../models/context'; +import { Subscription } from 'rxjs'; + @Component({ selector: 'app-temporary-text-element', @@ -16,18 +17,18 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef; @Input('svg') svg: SVGSVGElement; - private leftPosition: string = '0px'; - private topPosition: string = '0px'; - private innerText: string = ''; - private isActive: boolean = false; - private mapListener: Function; - private textListener: Function; - public addingFinished = new EventEmitter(); + private isActive: boolean = true; + private leftPosition: string; + private topPosition: string; + private innerText: string = "";s - private enabled = true; private editingDrawingId: string; private editedElement: any; - private temporaryElement: HTMLDivElement; + + private mapListener: Function; + private textListener: Function; + private textAddingSubscription: Subscription; + public addingFinished = new EventEmitter(); constructor( private drawingsEventSource: DrawingsEventSource, @@ -36,9 +37,9 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { ){} ngOnInit(){ - this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => { + this.textAddingSubscription = this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => { this.isActive = isActive; - isActive ? this.activate() : this.deactivate() + this.isActive ? this.activate() : this.deactivate() }); this.activateTextEditing(); @@ -48,13 +49,13 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { let addTextListener = (event: MouseEvent) => { this.leftPosition = event.clientX.toString() + 'px'; this.topPosition = event.clientY.toString() + 'px'; + this.temporaryTextElement.nativeElement.focus(); let textListener = () => { this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY)); this.deactivate(); this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener); - this.isActive = false; } this.textListener = textListener; this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener); @@ -71,16 +72,38 @@ export class TemporaryTextElementComponent implements OnInit, OnDestroy { activateTextEditing(){ const rootElement = select(this.svg); - console.log("From component ", rootElement.selectAll('text.text_element')); rootElement.selectAll('text.text_element') .on("dblclick", (elem, index, textElements) => { + this.isActive = true; this.editedElement = elem; + select(textElements[index]) .attr("visibility", "hidden"); select(textElements[index]) .classed("editingMode", true); + + this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id"); + var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/); + var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x; + var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y; + this.leftPosition = x.toString() + 'px'; + this.topPosition = y.toString() + 'px'; + this.innerText = elem.text; + + this.temporaryTextElement.nativeElement.addEventListener("focusout", () => { + let innerText = this.temporaryTextElement.nativeElement.innerText; + this.drawingsEventSource.textEdited.emit(new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ""), this.editedElement)); + + rootElement.selectAll('text.editingMode') + .attr("visibility", "visible") + .classed("editingMode", false); + + this.isActive = false; + }); + + this.temporaryTextElement.nativeElement.focus(); }); } diff --git a/src/app/cartography/components/text-editing/text-editing.component.html b/src/app/cartography/components/text-editing/text-editing.component.html deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/cartography/components/text-editing/text-editing.component.scss b/src/app/cartography/components/text-editing/text-editing.component.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/cartography/components/text-editing/text-editing.component.spec.ts b/src/app/cartography/components/text-editing/text-editing.component.spec.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/cartography/components/text-editing/text-editing.component.ts b/src/app/cartography/components/text-editing/text-editing.component.ts deleted file mode 100644 index 0ffc7c3e..00000000 --- a/src/app/cartography/components/text-editing/text-editing.component.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Component, OnDestroy, OnInit } from "@angular/core"; -import { Subscription } from 'rxjs'; -import { TextEditingTool } from '../../tools/text-editing-tool'; -import { DrawingsEventSource } from '../../events/drawings-event-source'; -import { TextEditedDataEvent } from '../../events/event-source'; - -@Component({ - selector: 'app-text-editing', - template: ``, - styleUrls: ['./text-editing.component.scss'] -}) -export class TextEditingComponent implements OnInit, OnDestroy { - textEditingFinished: Subscription; - - constructor( - private textEditingTool: TextEditingTool, - private drawingEventSource: DrawingsEventSource - ) {} - - ngOnInit() { - this.textEditingFinished = this.textEditingTool.editingFinished.subscribe((evt: TextEditedDataEvent) => { - this.drawingEventSource.textEdited.emit(evt); - }); - } - - ngOnDestroy() { - this.textEditingFinished.unsubscribe(); - } -} diff --git a/src/app/cartography/d3-map.imports.ts b/src/app/cartography/d3-map.imports.ts index 728a6af8..25aa4e27 100644 --- a/src/app/cartography/d3-map.imports.ts +++ b/src/app/cartography/d3-map.imports.ts @@ -5,7 +5,6 @@ import { DrawingsWidget } from './widgets/drawings'; import { DrawingLineWidget } from './widgets/drawing-line'; import { SelectionTool } from './tools/selection-tool'; import { MovingTool } from './tools/moving-tool'; -import {TextEditingTool} from './tools/text-editing-tool'; import { LayersWidget } from './widgets/layers'; import { LinkWidget } from './widgets/link'; import { InterfaceStatusWidget } from './widgets/interface-status'; @@ -29,7 +28,6 @@ export const D3_MAP_IMPORTS = [ DrawingLineWidget, SelectionTool, MovingTool, - TextEditingTool, LayersWidget, LinkWidget, InterfaceStatusWidget, diff --git a/src/app/cartography/tools/text-editing-tool.spec.ts b/src/app/cartography/tools/text-editing-tool.spec.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/app/cartography/tools/text-editing-tool.ts b/src/app/cartography/tools/text-editing-tool.ts deleted file mode 100644 index 6389ddc9..00000000 --- a/src/app/cartography/tools/text-editing-tool.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { Injectable, EventEmitter } from "@angular/core"; -import { SVGSelection } from '../models/types'; -import { select } from 'd3-selection'; -import { TextElement } from '../models/drawings/text-element'; -import { TextEditedDataEvent } from '../events/event-source'; -import { DrawingsEventSource } from '../events/drawings-event-source'; -import { Context } from '../models/context'; - - -@Injectable() -export class TextEditingTool { - private enabled = true; - private editingDrawingId: string; - private editedElement: any; - private temporaryElement: HTMLDivElement; - public editingFinished = new EventEmitter(); - - constructor( - private drawingEventSource: DrawingsEventSource, - private context: Context - ){} - - public setEnabled(enabled) { - this.enabled = enabled; - } - - public draw(selection: SVGSelection){ - if (!this.enabled){ - return; - } - - console.log("From service", selection.selectAll('text.text_element')); - - selection.selectAll('text.text_element') - .on("dblclick", (elem, index, textElements) => { - this.editedElement = elem; - - select(textElements[index]) - .attr("visibility", "hidden"); - - select(textElements[index]) - .classed("editingMode", true); - - this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id"); - - var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/); - var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x; - var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y; - - this.temporaryElement = document.createElement('div'); - this.temporaryElement.className = "temporaryElement"; - this.temporaryElement.style.paddingLeft = "4px"; - this.temporaryElement.style.width = "fit-content"; - this.temporaryElement.style.left = x.toString() + 'px'; - this.temporaryElement.style.top = y.toString() + 'px'; - this.temporaryElement.style.position = "absolute"; - this.temporaryElement.style.zIndex = "99"; - this.temporaryElement.style.fontFamily = elem.font_family; - this.temporaryElement.style.fontSize = `${elem.font_size}pt`; - this.temporaryElement.style.fontWeight = elem.font_weight; - this.temporaryElement.style.color = elem.fill; - this.temporaryElement.style.textDecoration = elem.text_decoration; - this.temporaryElement.setAttribute("contenteditable", "true"); - this.temporaryElement.innerText = elem.text; - - this.temporaryElement.addEventListener("focusout", () => { - let innerText = this.temporaryElement.innerText; - this.editingFinished.emit(new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ""), this.editedElement)); - - this.drawingEventSource.textSaved.subscribe((evt:boolean) => { - if(evt){ - this.temporaryElement.remove(); - document.body.style.cursor = "default"; - } - }); - - selection.selectAll('text.editingMode') - .attr("visibility", "visible") - .classed("editingMode", false); - }); - - document.body.appendChild(this.temporaryElement); - this.temporaryElement.focus(); - }); - } -} diff --git a/src/app/cartography/widgets/graph-layout.ts b/src/app/cartography/widgets/graph-layout.ts index fe152411..a559853a 100644 --- a/src/app/cartography/widgets/graph-layout.ts +++ b/src/app/cartography/widgets/graph-layout.ts @@ -8,7 +8,6 @@ import { MovingTool } from "../tools/moving-tool"; import { LayersWidget } from "./layers"; import { LayersManager } from "../managers/layers-manager"; import { Injectable } from "@angular/core"; -import { TextEditingTool } from '../tools/text-editing-tool'; @Injectable() @@ -18,7 +17,6 @@ export class GraphLayout implements Widget { private drawingLineTool: DrawingLineWidget, private selectionTool: SelectionTool, private movingTool: MovingTool, - private textEditingTool: TextEditingTool, private layersWidget: LayersWidget, private layersManager: LayersManager ) { @@ -69,7 +67,6 @@ export class GraphLayout implements Widget { this.drawingLineTool.draw(view, context); this.selectionTool.draw(view, context); this.movingTool.draw(view, context); - this.textEditingTool.draw(view); } disconnect(view: SVGSelection) {