From 73424369485e6ad0dcd6f7935bfa08aa1fb711f7 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Fri, 31 May 2019 07:24:28 -0700 Subject: [PATCH 1/4] Initial implementation --- src/app/cartography/events/event-source.ts | 12 ++++- .../cartography/widgets/interface-label.ts | 13 +++++- src/app/cartography/widgets/label.ts | 15 +++++-- src/app/cartography/widgets/node.ts | 8 ++-- .../edit-text-action.component.ts | 3 ++ .../context-menu/context-menu.component.html | 5 ++- .../text-editor/text-editor.component.html | 6 +-- .../text-editor/text-editor.component.ts | 45 ++++++++++++------- .../project-map/project-map.component.ts | 19 +++++++- 9 files changed, 94 insertions(+), 32 deletions(-) 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(); } From 536a1c4d0831288dcdac15fa1ded3fee4948262e Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Tue, 4 Jun 2019 04:25:51 -0700 Subject: [PATCH 2/4] Editing labels added --- .../edit-text-action.component.ts | 9 +++ .../context-menu/context-menu.component.html | 25 ++++--- .../context-menu/context-menu.component.ts | 17 ++++- .../text-editor/text-editor.component.html | 6 +- .../text-editor/text-editor.component.ts | 72 ++++++++++++++++--- .../project-map/project-map.component.spec.ts | 6 ++ .../project-map/project-map.component.ts | 11 +-- 7 files changed, 116 insertions(+), 30 deletions(-) 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 0030a1ae..219c475b 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 @@ -5,6 +5,9 @@ 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'; +import { Node } from '../../../../../cartography/models/node'; +import { Link } from '../../../../../models/link'; +import { LinkNode } from '../../../../../models/link-node'; @Component({ selector: 'app-edit-text-action', @@ -14,7 +17,10 @@ export class EditTextActionComponent implements OnInit { @Input() server: Server; @Input() project: Project; @Input() drawing: Drawing; + @Input() node: Node; @Input() label: Label; + @Input() link: Link; + @Input() linkNode: LinkNode; constructor(private dialog: MatDialog) {} @@ -29,6 +35,9 @@ export class EditTextActionComponent implements OnInit { instance.server = this.server; instance.project = this.project; instance.drawing = this.drawing; + instance.node = this.node; instance.label = this.label; + instance.link = this.link; + instance.linkNode = this.linkNode; } } 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 c0f2e8af..eada6c08 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 @@ -1,33 +1,36 @@
- - + + - 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 7eb22a2b..d98a9c78 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 @@ -9,6 +9,13 @@ 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'; +import { NodeService } from '../../../../services/node.service'; +import { Node } from '../../../../cartography/models/node'; +import { NodesDataSource } from '../../../../cartography/datasources/nodes-datasource'; +import { Link } from '../../../../models/link'; +import { LinkNode } from '../../../../models/link-node'; +import { LinkService } from '../../../../services/link.service'; +import { LinksDataSource } from '../../../../cartography/datasources/links-datasource'; @Component({ selector: 'app-text-editor', @@ -21,9 +28,13 @@ export class TextEditorDialogComponent implements OnInit { server: Server; project: Project; drawing: Drawing; + node: Node; label: Label; + link: Link; + linkNode: LinkNode; element: TextElement; rotation: string; + isTextEditable: boolean; constructor( private dialogRef: MatDialogRef, @@ -31,24 +42,48 @@ export class TextEditorDialogComponent implements OnInit { private mapDrawingToSvgConverter: MapDrawingToSvgConverter, private drawingService: DrawingService, private drawingsDataSource: DrawingsDataSource, - private renderer: Renderer2 + private renderer: Renderer2, + private nodeService: NodeService, + private nodesDataSource: NodesDataSource, + private linkService: LinkService, + private linksDataSource: LinksDataSource ) {} ngOnInit() { - console.log(this.label); if (this.drawing) { + this.isTextEditable = true; 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) { + } else if (this.label && this.node) { + this.isTextEditable = false; this.rotation = this.label.rotation.toString(); - this.element = new TextElement(); - this.element.text = this.label.text; - this.element.fill = "#ffffff"; + this.element = this.getTextElementFromLabel(); + } else if (this.linkNode && this.link) { + this.isTextEditable = true; + this.label = this.link.nodes.find(n => n.node_id === this.linkNode.node_id).label; + this.rotation = this.label.rotation.toString(); + this.element = this.getTextElementFromLabel(); } + + 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); + } + + getTextElementFromLabel(): TextElement{ + var textElement = new TextElement(); + textElement.text = this.label.text; + textElement.font_family = this.label.style.split(";")[0].split(" ")[1]; + textElement.font_size = +this.label.style.split(";")[1].split(" ")[1]; + textElement.font_weight = this.label.style.split(";")[2].split(" ")[1]; + textElement.fill = this.label.style.split(";")[3].split(" ")[1]; + textElement.fill_opacity = +this.label.style.split(";")[4].split(" ")[1]; + return textElement; + } + + getStyleFromTextElement(): string{ + return `font-family: ${this.element.font_family};font-size: ${this.element.font_size};font-weight: ${this.element.font_weight};fill: ${this.element.fill};fill-opacity: ${this.element.fill_opacity};`; } onNoClick() { @@ -69,8 +104,23 @@ export class TextEditorDialogComponent implements OnInit { this.drawingsDataSource.update(serverDrawing); this.dialogRef.close(); }); - } else if(this.label) { + } else if (this.label && this.node) { + this.node.label.style = this.getStyleFromTextElement(); + this.node.label.rotation = +this.rotation; + this.nodeService.updateLabel(this.server, this.node, this.node.label).subscribe((node: Node) => { + this.nodesDataSource.update(node); + this.dialogRef.close(); + }); + } else if (this.linkNode && this.link) { + this.label.style = this.getStyleFromTextElement(); + this.label.rotation = +this.rotation; + this.label.text = this.element.text; + + this.linkService.updateLink(this.server, this.link).subscribe((link: Link) => { + this.linksDataSource.update(link); + this.dialogRef.close(); + }); } } 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 bd399179..b7bc050c 100644 --- a/src/app/components/project-map/project-map.component.spec.ts +++ b/src/app/components/project-map/project-map.component.spec.ts @@ -43,6 +43,9 @@ import { Project } from '../../models/project'; import { CapturingSettings } from '../../models/capturingSettings'; import { LinkWidget } from '../../cartography/widgets/link'; import { NodeCreatedLabelStylesFixer } from './helpers/node-created-label-styles-fixer'; +import { LabelWidget } from '../../cartography/widgets/label'; +import { InterfaceLabelWidget } from '../../cartography/widgets/interface-label'; +import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter'; export class MockedProgressService { public activate() {} @@ -205,10 +208,13 @@ describe('ProjectMapComponent', () => { { provide: NodeWidget }, { provide: LinkWidget }, { provide: DrawingsWidget }, + { provide: LabelWidget }, + { provide: InterfaceLabelWidget }, { provide: MapNodeToNodeConverter }, { provide: MapDrawingToDrawingConverter }, { provide: MapLabelToLabelConverter }, { provide: MapLinkToLinkConverter }, + { provide: MapLinkNodeToLinkNodeConverter }, { provide: NodesDataSource, useValue: nodesDataSource }, { provide: LinksDataSource, useValue: linksDataSource }, { provide: DrawingsDataSource, useValue: drawingsDataSource }, diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index f412d7ef..0f1f6f0b 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -46,6 +46,7 @@ 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'; +import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map/map-link-node-to-link-node-converter'; @Component({ @@ -106,6 +107,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private mapDrawingToDrawing: MapDrawingToDrawingConverter, private mapLabelToLabel: MapLabelToLabelConverter, private mapLinkToLink: MapLinkToLinkConverter, + private mapLinkNodeToLinkNode: MapLinkNodeToLinkNodeConverter, private nodesDataSource: NodesDataSource, private linksDataSource: LinksDataSource, private drawingsDataSource: DrawingsDataSource, @@ -244,13 +246,14 @@ export class ProjectMapComponent implements OnInit, OnDestroy { 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 node = this.nodes.find(n => n.node_id === eventLabel.label.nodeId); + this.contextMenu.openMenuForLabel(label, node, 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 linkNode = this.mapLinkNodeToLinkNode.convert(eventInterfaceLabel.interfaceLabel); + const link = this.links.find(l => l.link_id === eventInterfaceLabel.interfaceLabel.linkId); + this.contextMenu.openMenuForInterfaceLabel(linkNode, link, eventInterfaceLabel.event.pageY, eventInterfaceLabel.event.pageX); }); const onContextMenu = this.selectionTool.contextMenuOpened.subscribe((event) => { From bec54a8fa42094ff1c3e5103e9bd19348fa7c3ef Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Wed, 12 Jun 2019 07:36:01 -0700 Subject: [PATCH 3/4] Removing bug with style translation --- .../drawings-editors/text-editor/text-editor.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a1154465..db502d89 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 @@ -96,7 +96,7 @@ export class TextEditorDialogComponent implements OnInit { textElement.text = this.label.text ? this.label.text : ''; textElement.font_family = styleProperties.find(p => p.property === 'font-family') ? styleProperties.find(p => p.property === 'font-family').value : 'TypeWriter'; - textElement.font_size = styleProperties.find(p => p.property === 'font-size') ? +styleProperties.find(p => p.property === 'font-family').value : 10.0; + textElement.font_size = styleProperties.find(p => p.property === 'font-size') ? +styleProperties.find(p => p.property === 'font-size').value : 10.0; textElement.font_weight = styleProperties.find(p => p.property === 'font-weight') ? styleProperties.find(p => p.property === 'font-weight').value : 'normal'; textElement.fill = styleProperties.find(p => p.property === 'fill') ? styleProperties.find(p => p.property === 'fill').value : '#000000'; textElement.fill_opacity = styleProperties.find(p => p.property === 'fill-opacity') ? +styleProperties.find(p => p.property === 'fill-opacity').value : 1.0; From 3a1111c82d8c9cd7c94f0c265edb9e622637835b Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Tue, 2 Jul 2019 04:45:23 -0700 Subject: [PATCH 4/4] Fix for selecting issue --- .../context-menu/context-menu.component.html | 7 +++- .../text-editor/text-editor.component.ts | 42 +++++++++---------- .../project-map/project-map.component.ts | 2 +- 3 files changed, 27 insertions(+), 24 deletions(-) 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 eada6c08..844dd403 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,7 +14,10 @@ [drawing]="drawings[0]" > n.node_id === this.linkNode.node_id).label; this.rotation = this.label.rotation.toString(); this.element = this.getTextElementFromLabel(); - } + } else if (this.drawing) { + this.isTextEditable = true; + this.rotation = this.drawing.rotation.toString(); + this.element = this.drawing.element as TextElement; + }; this.formGroup.controls['rotation'].setValue(this.rotation); this.renderer.setStyle(this.textArea.nativeElement, 'color', this.element.fill); @@ -116,20 +116,7 @@ export class TextEditorDialogComponent implements OnInit { if (this.formGroup.valid) { this.rotation = this.formGroup.get('rotation').value; - 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; - - this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing); - - this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => { - this.drawingsDataSource.update(serverDrawing); - this.dialogRef.close(); - }); - } else if (this.label && this.node) { + if (this.label && this.node) { this.node.label.style = this.getStyleFromTextElement(); this.node.label.rotation = +this.rotation; @@ -146,7 +133,20 @@ export class TextEditorDialogComponent implements OnInit { this.linksDataSource.update(link); this.dialogRef.close(); }); - } + } else 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; + + this.drawing.svg = this.mapDrawingToSvgConverter.convert(mapDrawing); + + this.drawingService.update(this.server, this.drawing).subscribe((serverDrawing: Drawing) => { + this.drawingsDataSource.update(serverDrawing); + this.dialogRef.close(); + }); + }; } else { this.toasterService.error(`Entered data is incorrect`); } diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 4e3645f5..2cf9da98 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -267,7 +267,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { const onContextMenu = this.selectionTool.contextMenuOpened.subscribe((event) => { const selectedItems = this.selectionManager.getSelected(); - if (selectedItems.length === 0 || !(event instanceof MouseEvent)) return; + if (selectedItems.length < 2 || !(event instanceof MouseEvent)) return; let drawings: Drawing[] = []; let nodes: Node[] = [];