cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts

   1 /*
   2 ============LICENSE_START==========================================
   3 ===================================================================
   4 Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
   5 ===================================================================
   6
   7 Unless otherwise specified, all software contained herein is licensed
   8 under the Apache License, Version 2.0 (the License);
   9 you may not use this software except in compliance with the License.
  10 You may obtain a copy of the License at
  11
  12     http://www.apache.org/licenses/LICENSE-2.0
  13
  14 Unless required by applicable law or agreed to in writing, software
  15 distributed under the License is distributed on an "AS IS" BASIS,
  16 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17 See the License for the specific language governing permissions and
  18 limitations under the License.
  19 ============LICENSE_END============================================
  20 */
  21
  22 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
  23 import * as d3 from 'd3';
  24 import { text } from 'd3';
  25
  26 @Component({
  27   selector: 'app-designer',
  28   templateUrl: './designer.component.html',
  29   styleUrls: ['./designer.component.scss']
  30 })
  31 export class DesignerComponent implements OnInit {
  32
  33   @ViewChild('svgArea') graphContainer: ElementRef;
  34   dataForsimulation;
  35   svg;
  36   svgWidth;
  37   svgHeight;
  38
  39
  40   simulation;
  41
  42   constructor() {
  43     this.dataForsimulation = {"nodes" :[],
  44                               "links": []
  45                             }
  46
  47
  48     d3.json("../../../../../assets/activation-blueprint.json")
  49     .then((data)=>{
  50       console.log(data);
  51       this.buildD3DataNodes(data);
  52       //this.buildD3DataLinks(data);
  53       this.drawNode();
  54     });
  55    }
  56
  57   ngOnInit() {
  58   }
  59
  60   ngAfterContentInit()  {
  61
  62   }
  63
  64   drawNode() {
  65     this.svg = d3.select('#svgArea')
  66               .style('back-ground-color', 'white');
  67
  68     this.svgWidth = this.svg._groups[0][0].width.baseVal.value;
  69     this.svgHeight = this.svg._groups[0][0].height.baseVal.value;
  70
  71     console.log('width', this.svgWidth);
  72
  73     let xbyMath;
  74     let ybyMath;
  75     let X= 10;
  76     let Y=10;
  77
  78     let transformString = "translate(" + X + "," + Y + ")";
  79     this.dataForsimulation.nodes.forEach((d, i)=> {
  80       let id= 'g'+i;
  81
  82       // xbyMath =  Math.random() * ( this.svgWidth - 50 -  105  ) + ( 105/2 + 10 );
  83       // ybyMath =  Math.random() * ( this.svgWidth - 20 -  100  ) + ( 100/2 + 10 );
  84
  85       xbyMath = Math.floor(Math.random() * ((this.svgWidth-110) - 100 + 1)) + 100;
  86       ybyMath = Math.floor(Math.random() * ((this.svgHeight-110) - 100 + 1)) + 100;
  87
  88       transformString =  "translate(" + xbyMath + "," + ybyMath + ")";
  89
  90       let gEleId = 'g'+i;
  91       let nodeTemprectId = gEleId+name
  92       let requirement = gEleId+name+'requirement';
  93         this.svg.append('g')
  94           .attr('id', gEleId);
  95
  96         let firstg = d3.select('#g'+i)
  97                     .attr('transform', transformString);
  98
  99         firstg.append('rect')
 100               .attr('id', d.name)
 101               .attr("x", 0)
 102                .attr("y", 0)
 103                .attr("rx", 20)
 104                 .attr("ry", 20)
 105                 .attr('width', 100)
 106                 .attr('height', 100)
 107                 .attr('fill', 'white')
 108                  .attr('stroke', 'black')
 109                  .attr('opacity', 0.6)
 110                  .on('mouseover', () => this.handleMouseOver());
 111
 112           d.x = xbyMath;
 113           d.y = ybyMath;
 114
 115         firstg.append('rect')
 116                     .attr('x', 95)
 117                     .attr('y', 20)
 118                    // .attr('r', 10)
 119                     .attr('width', 10)
 120                    .attr('height', 10)
 121                     .attr('fill', 'orange')
 122
 123         if(d.requirementsArray) {
 124           d.requirementsArray.forEach(requirement =>{
 125             firstg.append('rect')
 126                       .attr('id', d.name+requirement.name)
 127                       .attr('x', 95)
 128                       .attr('y', 60)
 129                      // .attr('r', 10)
 130                       .attr('width', 10)
 131                      .attr('height', 10)
 132                       .attr('fill', 'blue')
 133             requirement.x = xbyMath + 95;
 134             requirement.y = ybyMath + 60;
 135           });
 136         }
 137
 138         if(d.capabilitiesArray) {
 139           d.capabilitiesArray.forEach(capability =>{
 140             firstg.append('rect')
 141                         .attr('id', d.name+capability.name)
 142                         .attr('x', 95)
 143                         .attr('y', 40)
 144                        // .attr('r', 10)
 145                         .attr('width', 10)
 146                        .attr('height', 10)
 147                         .attr('fill', 'green');
 148             capability.x = xbyMath + 95;
 149             capability.y = ybyMath + 60;
 150           });
 151         }
 152
 153
 154         firstg.append('text')
 155                     .attr('x', 0)
 156                     .attr('y', 115)
 157                     .text(d.name);
 158
 159        // X = X +120;
 160        // Y = 10;
 161     });
 162     this.buildD3DataLinks();
 163   }
 164
 165   buildD3DataNodes(data) {
 166     let d3data;
 167     d3data = data.topology_template.node_templates;
 168     console.log('d3data:', d3data);
 169     let finalData = [];
 170     for (var property1 in d3data) {
 171       d3data[property1].name = property1;
 172       this.dataForsimulation.nodes.push(d3data[property1]);
 173       finalData.push(d3data[property1]);
 174     }
 175
 176     this.dataForsimulation.nodes.forEach(node => {
 177       for( var nodeProperty in node) {
 178         if(nodeProperty == 'requirements' || nodeProperty == 'capabilities') {
 179             let arrayName = nodeProperty + 'Array';
 180             node[arrayName] = [];
 181             for(var reqProperty in node[nodeProperty]) {
 182               node[nodeProperty][reqProperty].name = reqProperty;
 183               node[arrayName].push(node[nodeProperty][reqProperty])
 184             }
 185
 186         console.log('node array:', + node[arrayName]);
 187         }
 188       }
 189     });
 190     console.log( this.dataForsimulation);
 191
 192
 193   }
 194
 195  buildD3DataLinks() {
 196   this.dataForsimulation.nodes.forEach((node) => {
 197     if(node.requirementsArray && node.requirementsArray.length > 0) {
 198       node.requirementsArray.forEach(requirement => {
 199         let linkObject = {};
 200         linkObject['sourceName'] = node.name + requirement.name;
 201         linkObject['sourceid'] = node.name + requirement.name;
 202         linkObject['sourceX'] = requirement.x;
 203         linkObject['sourceY'] = requirement.y;
 204         linkObject['targetNode'] = requirement.node;
 205         linkObject['targetCapabilility'] = requirement.capability;
 206         linkObject['ele'] = d3.select('#'+ linkObject['sourceid']);
 207         this.dataForsimulation.links.push(linkObject);
 208       });
 209     }
 210   });
 211
 212   this.capabilityTargets();
 213  }
 214
 215  capabilityTargets() {
 216    this.dataForsimulation.links.forEach(link=>{
 217     this.dataForsimulation.nodes.forEach(node=>{
 218           if(node.name == link.targetNode && node.capabilitiesArray) {
 219             node.capabilitiesArray.forEach(capability=>{
 220               if(capability.name == link.targetCapabilility) {
 221                 link['targetX'] = capability.x;
 222                 link['targetY'] = capability.y;
 223               }
 224             })
 225           }
 226       });
 227    });
 228
 229    this.drawlink();
 230  }
 231
 232  drawlink() {
 233    this.dataForsimulation.links.forEach(link=>{
 234       this.svg.append('line')
 235       .attr('x1', link.sourceX)
 236       .attr('y1', link.sourceY)
 237       .attr('x2', link.targetX)
 238       .attr('y2', link.targetY)
 239       .attr('stroke','gray')
 240       .attr('stroke-width', 5);
 241    });
 242  }
 243
 244  handleMouseOver() {
 245   console.log('mouse over');
 246  }
 247
 248 }