diff --git a/src/app/cartography/events/event-source.ts b/src/app/cartography/events/event-source.ts index 7252129a..1b7fdd72 100644 --- a/src/app/cartography/events/event-source.ts +++ b/src/app/cartography/events/event-source.ts @@ -1,6 +1,8 @@ import { TextElement } from '../models/drawings/text-element'; import { MapDrawing } from '../models/map/map-drawing'; import { MapLink } from '../models/map/map-link'; +import { MapLinkNode } from '../models/map/map-link-node'; +import { MapLabel } from '../models/map/map-label'; export class DataEventSource { constructor(public datum: T, public dx: number, public dy: number) {} @@ -33,5 +35,13 @@ export class DrawingContextMenu { } export class LinkContextMenu { - constructor(public event:any, public link: MapLink) {} + constructor(public event: any, public link: MapLink) {} +} + +export class InterfaceLabelContextMenu { + constructor(public event: any, public interfaceLabel: MapLinkNode) {} +} + +export class LabelContextMenu { + constructor(public event: any, public label: MapLabel) {} } diff --git a/src/app/cartography/widgets/interface-label.ts b/src/app/cartography/widgets/interface-label.ts index 2e49c60f..7adcb0e2 100644 --- a/src/app/cartography/widgets/interface-label.ts +++ b/src/app/cartography/widgets/interface-label.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, EventEmitter } from '@angular/core'; import { SVGSelection } from '../models/types'; import { CssFixer } from '../helpers/css-fixer'; @@ -10,9 +10,11 @@ import { MapLinkNode } from '../models/map/map-link-node'; import { MapNode } from '../models/map/map-node'; import { Draggable } from '../events/draggable'; import { MapSettingsManager } from '../managers/map-settings-manager'; +import { InterfaceLabelContextMenu } from '../events/event-source'; @Injectable() export class InterfaceLabelWidget { + public onContextMenu = new EventEmitter(); public draggable = new Draggable(); static SURROUNDING_TEXT_BORDER = 5; @@ -30,6 +32,8 @@ export class InterfaceLabelWidget { } draw(selection: SVGSelection) { + const self = this; + const link_node_position = selection .selectAll('g.link_node_position') .data((link: MapLink) => [[link.source, link.nodes[0]], [link.target, link.nodes[1]]]); @@ -68,7 +72,12 @@ export class InterfaceLabelWidget { .attr('class', 'interface_label noselect') .attr('interface_label_id', (i: MapLinkNode) => `${i.id}`); - const merge = labels.merge(enter); + const merge = labels + .merge(enter) + .on('contextmenu', (n: MapLinkNode, i: number) => { + event.preventDefault(); + self.onContextMenu.emit(new InterfaceLabelContextMenu(event, n)); + }); // update label merge diff --git a/src/app/cartography/widgets/label.ts b/src/app/cartography/widgets/label.ts index a28793e6..8d3ab782 100644 --- a/src/app/cartography/widgets/label.ts +++ b/src/app/cartography/widgets/label.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, EventEmitter } from '@angular/core'; import { Widget } from './widget'; import { SVGSelection } from '../models/types'; @@ -10,9 +10,11 @@ import { SelectionManager } from '../managers/selection-manager'; import { Draggable } from '../events/draggable'; import { MapLabel } from '../models/map/map-label'; import { MapSettingsManager } from '../managers/map-settings-manager'; +import { LabelContextMenu } from '../events/event-source'; @Injectable() export class LabelWidget implements Widget { + public onContextMenu = new EventEmitter(); public draggable = new Draggable(); static NODE_LABEL_MARGIN = 3; @@ -29,6 +31,7 @@ export class LabelWidget implements Widget { } public draw(view: SVGSelection) { + const self = this; const label_view = view.selectAll('g.label_container').data((node: MapNode) => { return [node.label]; }); @@ -39,7 +42,12 @@ export class LabelWidget implements Widget { .attr('class', 'label_container') .attr('label_id', (label: MapLabel) => label.id); - const merge = label_view.merge(label_enter); + const merge = label_view + .merge(label_enter) + .on('contextmenu', (n: MapLabel, i: number) => { + event.preventDefault(); + self.onContextMenu.emit(new LabelContextMenu(event, n)); + }); this.drawLabel(merge); @@ -63,7 +71,8 @@ export class LabelWidget implements Widget { label_body_enter.append('rect').attr('class', 'label_selection'); - const label_body_merge = label_body.merge(label_body_enter); + const label_body_merge = label_body + .merge(label_body_enter); label_body_merge .select('text.label') diff --git a/src/app/cartography/widgets/node.ts b/src/app/cartography/widgets/node.ts index 89016a84..f55555f5 100644 --- a/src/app/cartography/widgets/node.ts +++ b/src/app/cartography/widgets/node.ts @@ -38,10 +38,6 @@ export class NodeWidget implements Widget { const node_body_merge = node_body .merge(node_body_enter) .classed('selected', (n: MapNode) => this.selectionManager.isSelected(n)) - .on('contextmenu', function(n: MapNode, i: number) { - event.preventDefault(); - self.onContextMenu.emit(new NodeContextMenu(event, n)); - }) .on('click', (node: MapNode) => { this.nodesEventSource.clicked.emit(new ClickedDataEvent(node, event.clientX, event.clientY)); }); @@ -49,6 +45,10 @@ export class NodeWidget implements Widget { // update image of node node_body_merge .select('image') + .on('contextmenu', function(n: MapNode, i: number) { + event.preventDefault(); + self.onContextMenu.emit(new NodeContextMenu(event, n)); + }) .attr('xnode:href', (n: MapNode) => n.symbolUrl) .attr('width', (n: MapNode) => n.width) .attr('height', (n: MapNode) => n.height) diff --git a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts index 2486a0c7..0030a1ae 100644 --- a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts +++ b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts @@ -4,6 +4,7 @@ import { Project } from '../../../../../models/project'; import { Drawing } from '../../../../../cartography/models/drawing'; import { MatDialog } from '@angular/material'; import { TextEditorDialogComponent } from '../../../drawings-editors/text-editor/text-editor.component'; +import { Label } from '../../../../../cartography/models/label'; @Component({ selector: 'app-edit-text-action', @@ -13,6 +14,7 @@ export class EditTextActionComponent implements OnInit { @Input() server: Server; @Input() project: Project; @Input() drawing: Drawing; + @Input() label: Label; constructor(private dialog: MatDialog) {} @@ -27,5 +29,6 @@ export class EditTextActionComponent implements OnInit { instance.server = this.server; instance.project = this.project; instance.drawing = this.drawing; + instance.label = this.label; } } diff --git a/src/app/components/project-map/context-menu/context-menu.component.html b/src/app/components/project-map/context-menu/context-menu.component.html index 0d80158f..c0f2e8af 100644 --- a/src/app/components/project-map/context-menu/context-menu.component.html +++ b/src/app/components/project-map/context-menu/context-menu.component.html @@ -14,10 +14,11 @@ [drawing]="drawings[0]" > Text editor
- + - +
diff --git a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts index 389259c1..7eb22a2b 100644 --- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts +++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts @@ -8,6 +8,7 @@ import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map import { DrawingService } from '../../../../services/drawing.service'; import { DrawingsDataSource } from '../../../../cartography/datasources/drawings-datasource'; import { TextElement } from '../../../../cartography/models/drawings/text-element'; +import { Label } from '../../../../cartography/models/label'; @Component({ selector: 'app-text-editor', @@ -20,6 +21,7 @@ export class TextEditorDialogComponent implements OnInit { server: Server; project: Project; drawing: Drawing; + label: Label; element: TextElement; rotation: string; @@ -33,13 +35,20 @@ export class TextEditorDialogComponent implements OnInit { ) {} ngOnInit() { - this.rotation = this.drawing.rotation.toString(); - - this.element = this.drawing.element as TextElement; - this.renderer.setStyle(this.textArea.nativeElement, 'color', this.element.fill); - this.renderer.setStyle(this.textArea.nativeElement, 'font-family', this.element.font_family); - this.renderer.setStyle(this.textArea.nativeElement, 'font-size', `${this.element.font_size}pt`); - this.renderer.setStyle(this.textArea.nativeElement, 'font-weight', this.element.font_weight); + console.log(this.label); + if (this.drawing) { + this.rotation = this.drawing.rotation.toString(); + this.element = this.drawing.element as TextElement; + this.renderer.setStyle(this.textArea.nativeElement, 'color', this.element.fill); + this.renderer.setStyle(this.textArea.nativeElement, 'font-family', this.element.font_family); + this.renderer.setStyle(this.textArea.nativeElement, 'font-size', `${this.element.font_size}pt`); + this.renderer.setStyle(this.textArea.nativeElement, 'font-weight', this.element.font_weight); + } else if (this.label) { + this.rotation = this.label.rotation.toString(); + this.element = new TextElement(); + this.element.text = this.label.text; + this.element.fill = "#ffffff"; + } } onNoClick() { @@ -47,18 +56,22 @@ export class TextEditorDialogComponent implements OnInit { } onYesClick() { - this.drawing.rotation = +this.rotation; - this.drawing.element = this.element; + if (this.drawing) { + this.drawing.rotation = +this.rotation; + this.drawing.element = this.element; - let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing); - mapDrawing.element = this.drawing.element; + let mapDrawing = this.drawingToMapDrawingConverter.convert(this.drawing); + mapDrawing.element = this.drawing.element; - this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing); + this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing); - this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => { - this.drawingsDataSource.update(serverDrawing); - this.dialogRef.close(); - }); + this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => { + this.drawingsDataSource.update(serverDrawing); + this.dialogRef.close(); + }); + } else if(this.label) { + + } } changeTextColor(changedColor) { diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 1d9ebc27..f412d7ef 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -30,7 +30,7 @@ import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-nod import { SettingsService, Settings } from '../../services/settings.service'; import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component'; import { ToolsService } from '../../services/tools.service'; -import { DrawingContextMenu, LinkContextMenu } from '../../cartography/events/event-source'; +import { DrawingContextMenu, LinkContextMenu, LabelContextMenu, InterfaceLabelContextMenu } from '../../cartography/events/event-source'; import { MapDrawingToDrawingConverter } from '../../cartography/converters/map/map-drawing-to-drawing-converter'; import { SelectionManager } from '../../cartography/managers/selection-manager'; import { SelectionTool } from '../../cartography/tools/selection-tool'; @@ -44,6 +44,8 @@ import { MapLink } from '../../cartography/models/map/map-link'; import { MapLinkToLinkConverter } from '../../cartography/converters/map/map-link-to-link-converter'; import { LinkWidget } from '../../cartography/widgets/link'; import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer'; +import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label'; +import { LabelWidget } from '../../cartography/widgets/label'; @Component({ @@ -98,6 +100,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private nodeWidget: NodeWidget, private drawingsWidget: DrawingsWidget, private linkWidget: LinkWidget, + private labelWidget: LabelWidget, + private interfaceLabelWidget: InterfaceLabelWidget, private mapNodeToNode: MapNodeToNodeConverter, private mapDrawingToDrawing: MapDrawingToDrawingConverter, private mapLabelToLabel: MapLabelToLabelConverter, @@ -238,6 +242,17 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.contextMenu.openMenuForDrawing(drawing, eventDrawing.event.pageY, eventDrawing.event.pageX); }); + const onLabelContextMenu = this.labelWidget.onContextMenu.subscribe((eventLabel: LabelContextMenu) => { + const label = this.mapLabelToLabel.convert(eventLabel.label); + this.contextMenu.openMenuForLabel(label, eventLabel.event.pageY, eventLabel.event.pageX); + }); + + const onInterfaceLabelContextMenu = this.interfaceLabelWidget.onContextMenu.subscribe((eventInterfaceLabel: InterfaceLabelContextMenu) => { + console.log("!!!!!!!!!! interface label"); + console.log(eventInterfaceLabel); + //const interfaceLabel = this.mapLinkToLink.convert(eventInterfaceLabel.interfaceLabel); + }); + const onContextMenu = this.selectionTool.contextMenuOpened.subscribe((event) => { const selectedItems = this.selectionManager.getSelected(); if (selectedItems.length === 0 || !(event instanceof MouseEvent)) return; @@ -266,6 +281,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.subscriptions.push(onNodeContextMenu); this.subscriptions.push(onDrawingContextMenu); this.subscriptions.push(onContextMenu); + this.subscriptions.push(onLabelContextMenu); + this.subscriptions.push(onInterfaceLabelContextMenu); this.mapChangeDetectorRef.detectChanges(); }