Editing labels added

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;
   }
 }

src/app/components/project-map/context-menu/context-menu.component.html

@@ -1,33 +1,36 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition">
   <span [matMenuTriggerFor]="contextMenu"></span>
   <mat-menu #contextMenu="matMenu" class="context-menu-items">
-    <app-start-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-start-node-action>
+    <app-start-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-start-node-action>
-    <app-stop-node-action *ngIf="nodes.length" [server]="server" [nodes]="nodes"></app-stop-node-action>
+    <app-stop-node-action *ngIf="nodes.length && labels.length===0" [server]="server" [nodes]="nodes"></app-stop-node-action>
     <app-console-device-action
       *ngIf="!projectService.isReadOnly(project) && nodes.length && isElectronApp"
       [server]="server"
       [nodes]="nodes"
     ></app-console-device-action>
-    <app-edit-style-action *ngIf="drawings.length===1 && !hasTextCapabilities"
+    <app-edit-style-action *ngIf="!projectService.isReadOnly(project) && drawings.length===1 && !hasTextCapabilities"
       [server]="server"
       [project]="project"
       [drawing]="drawings[0]"
     ></app-edit-style-action>
     <app-edit-text-action
-      *ngIf="drawings.length===1 && hasTextCapabilities || labels.length===1"
+      *ngIf="!projectService.isReadOnly(project) && drawings.length===1 && hasTextCapabilities || labels.length===1 || linkNodes.length===1"
       [server]="server"
       [project]="project"
       [drawing]="drawings[0]"
+      [node]="nodes[0]"
       [label]="labels[0]"
+      [link]="links[0]"
+      [linkNode]="linkNodes[0]"
     ></app-edit-text-action>
     <app-move-layer-up-action
-      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length)"
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
       [server]="server"
       [nodes]="nodes"
       [drawings]="drawings"
     ></app-move-layer-up-action>
     <app-move-layer-down-action
-      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length)"
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length || nodes.length) && labels.length===0"
       [server]="server"
       [nodes]="nodes"
       [drawings]="drawings"
@@ -40,28 +43,28 @@
     ></app-start-capture-action>
     <app-stop-capture-action
       *ngIf="!projectService.isReadOnly(project) && isBundledServer 
-      && drawings.length===0 && nodes.length===0 && links.length===1"
+      && drawings.length===0 && nodes.length===0 && links.length===1  && linkNodes.length === 0"
       [server]="server"
       [link]="links[0]"
     ></app-stop-capture-action>
     <app-packet-filters-action
-      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1"
+      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
       [server]="server"
       [project]="project"
       [link]="links[0]"
     ></app-packet-filters-action>
     <app-resume-link-action
-      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1"
+      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
       [server]="server"
       [link]="links[0]"
     ></app-resume-link-action>
     <app-suspend-link-action
-      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1"
+      *ngIf="!projectService.isReadOnly(project) && drawings.length===0 && nodes.length===0 && links.length===1 && linkNodes.length === 0"
       [server]="server"
       [link]="links[0]"
     ></app-suspend-link-action>
     <app-delete-action
-      *ngIf="!projectService.isReadOnly(project) && (drawings.length>0 || nodes.length>0 || links.length>0)"
+      *ngIf="!projectService.isReadOnly(project) && (drawings.length>0 || nodes.length>0 || links.length>0) && linkNodes.length === 0 && labels.length===0"
       [server]="server"
       [nodes]="nodes"
       [drawings]="drawings"

src/app/components/project-map/context-menu/context-menu.component.ts

@@ -10,6 +10,7 @@ import { TextElement } from '../../../cartography/models/drawings/text-element';
 import { Label } from '../../../cartography/models/label';
 import { Link } from '../../../models/link';
 import { ElectronService } from 'ngx-electron';
+import { LinkNode } from '../../../models/link-node';
 
 
 @Component({
@@ -30,6 +31,7 @@ export class ContextMenuComponent implements OnInit {
   nodes: Node[] = [];
   labels: Label[] = [];
   links: Link[] = [];
+  linkNodes: LinkNode[] = [];
 
   hasTextCapabilities = false;
   isElectronApp = false;
@@ -74,10 +76,21 @@ export class ContextMenuComponent implements OnInit {
     this.contextMenu.openMenu();
   }
 
-  public openMenuForLabel(label: Label, top: number, left: number) {
+  public openMenuForLabel(label: Label, node: Node, top: number, left: number) {
     this.resetCapabilities();
 
     this.labels = [label];
+    this.nodes = [node];
+    this.setPosition(top, left);
+
+    this.contextMenu.openMenu();
+  }
+
+  public openMenuForInterfaceLabel(linkNode: LinkNode, link: Link, top: number, left: number) {
+    this.resetCapabilities();
+
+    this.linkNodes = [linkNode];
+    this.links = [link];
     this.setPosition(top, left);
 
     this.contextMenu.openMenu();
@@ -99,6 +112,8 @@ export class ContextMenuComponent implements OnInit {
     this.drawings = [];
     this.nodes = [];
     this.labels = [];
+    this.linkNodes = [];
+    this.links = [];
     this.hasTextCapabilities = false;
   }
 }

src/app/components/project-map/drawings-editors/text-editor/text-editor.component.html

@@ -1,15 +1,15 @@
 <h1 mat-dialog-title>Text editor</h1>
 
 <div class="modal-form-container">
-  <!-- <mat-form-field>
+  <mat-form-field>
     <input matInput placeholder="Fill color" type="color" (ngModelChange)="changeTextColor($event)" [(ngModel)]="element.fill">
-  </mat-form-field> -->
+  </mat-form-field>
 
   <mat-form-field>
     <input matInput placeholder="Rotation" type="text" [(ngModel)]="rotation">
   </mat-form-field>
 
-  <!-- <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text"> </textarea>  -->
+  <textarea #textArea id="textArea" class="text" [(ngModel)]="element.text" [readonly]="!isTextEditable"></textarea> 
 </div>
 
 <div mat-dialog-actions>

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<TextEditorDialogComponent>,
@@ -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);
+    } else if (this.label && this.node) {
-      this.renderer.setStyle(this.textArea.nativeElement, 'font-family', this.element.font_family);
+      this.isTextEditable = false;
-      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 = this.getTextElementFromLabel();
-      this.element.text = this.label.text;
+    } else if (this.linkNode && this.link) {
-      this.element.fill = "#ffffff";
+      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();
+      });
     }
   }
 

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 },

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");
+      const linkNode = this.mapLinkNodeToLinkNode.convert(eventInterfaceLabel.interfaceLabel);
-      console.log(eventInterfaceLabel);
+      const link = this.links.find(l => l.link_id === eventInterfaceLabel.interfaceLabel.linkId);
-      //const interfaceLabel = this.mapLinkToLink.convert(eventInterfaceLabel.interfaceLabel);
+      this.contextMenu.openMenuForInterfaceLabel(linkNode, link, eventInterfaceLabel.event.pageY, eventInterfaceLabel.event.pageX);
     });
 
     const onContextMenu = this.selectionTool.contextMenuOpened.subscribe((event) => {