limitations under the License.
============LICENSE_END============================================ -->
-
-
-
-<!-- <div style="display: flex; flex-direction: row; height: 100%;width: 100%"> -->
- <div style="display: flex; flex-direction: row; height: 100%;width: 100%">
- <div class="outerDiv divone">
- <mat-accordion>
- <mat-expansion-panel>
- <mat-expansion-panel-header style="background-color: #f1f1f1">
- <mat-panel-title>
- Node types
- </mat-panel-title>
- </mat-expansion-panel-header>
- <div class="flex-container">
- <div>
- Node 1
- </div>
- <div>
- Node 2
- </div>
- <div>
- Node 3
- </div>
- <div>
- Node 4
- </div>
- <div>
-
- </div>
- </mat-expansion-panel>
- <mat-expansion-panel (opened)="panelOpenState = true"
- (closed)="panelOpenState = false">
- <mat-expansion-panel-header style="background-color: #f1f1f1">
- <mat-panel-title>
- Policy
- </mat-panel-title>
- </mat-expansion-panel-header>
- <div class="flex-container">
- <div>
- Node 1
- </div>
- <div>
- Node 2
- </div>
- <div>
- Node 3
- </div>
- <div>
- Node 4
- </div>
- <div>
- Node 3
- </div>
-
- </div>
- </mat-expansion-panel>
- </mat-accordion>
- </div>
- <div class="outerDiv divtwo" (click)="on = !on">
- <canvas class="cnv" height="500"></canvas>
- </div>
- <div *ngIf="on" id="overlay" class="outerDiv divThree">
- <mat-accordion style="width: 100%">
- <mat-expansion-panel>
- <mat-expansion-panel-header style="background-color: #f1f1f1">
- <mat-panel-title>
- Properties
- </mat-panel-title>
- </mat-expansion-panel-header>
- </mat-expansion-panel>
- <mat-expansion-panel (opened)="panelOpenState = true"
- (closed)="panelOpenState = false">
- <mat-expansion-panel-header style="background-color: #f1f1f1">
- <mat-panel-title>
- Interface
- </mat-panel-title>
- </mat-expansion-panel-header>
- </mat-expansion-panel>
- </mat-accordion>
- </div>
- </div>
-
-
-
- <!-- </div> -->
-
\ No newline at end of file
+<svg id="svgArea" width="1000px" height="100%" style="background-color:white">
+</svg>
\ No newline at end of file
============LICENSE_END============================================
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import * as d3 from 'd3';
+import { text } from 'd3';
@Component({
selector: 'app-designer',
})
export class DesignerComponent implements OnInit {
- constructor() { }
+ @ViewChild('svgArea') graphContainer: ElementRef;
+ dataForsimulation;
+ svg;
+ svgWidth;
+ svgHeight;
+
+
+ simulation;
+
+ constructor() {
+ this.dataForsimulation = {"nodes" :[],
+ "links": []
+ }
+
+
+ d3.json("../../../../../assets/activation-blueprint.json")
+ .then((data)=>{
+ console.log(data);
+ this.buildD3DataNodes(data);
+ //this.buildD3DataLinks(data);
+ this.drawNode();
+ });
+ }
ngOnInit() {
}
+ ngAfterContentInit() {
+
+ }
+
+ drawNode() {
+ this.svg = d3.select('#svgArea')
+ .style('back-ground-color', 'white');
+
+ this.svgWidth = this.svg._groups[0][0].width.baseVal.value;
+ this.svgHeight = this.svg._groups[0][0].height.baseVal.value;
+
+ console.log('width', this.svgWidth);
+
+ let xbyMath;
+ let ybyMath;
+ let X= 10;
+ let Y=10;
+
+ let transformString = "translate(" + X + "," + Y + ")";
+ this.dataForsimulation.nodes.forEach((d, i)=> {
+ let id= 'g'+i;
+
+ // xbyMath = Math.random() * ( this.svgWidth - 50 - 105 ) + ( 105/2 + 10 );
+ // ybyMath = Math.random() * ( this.svgWidth - 20 - 100 ) + ( 100/2 + 10 );
+
+ xbyMath = Math.floor(Math.random() * ((this.svgWidth-110) - 100 + 1)) + 100;
+ ybyMath = Math.floor(Math.random() * ((this.svgHeight-110) - 100 + 1)) + 100;
+
+ transformString = "translate(" + xbyMath + "," + ybyMath + ")";
+
+ let gEleId = 'g'+i;
+ let nodeTemprectId = gEleId+name
+ let requirement = gEleId+name+'requirement';
+ this.svg.append('g')
+ .attr('id', gEleId);
+
+ let firstg = d3.select('#g'+i)
+ .attr('transform', transformString);
+
+ firstg.append('rect')
+ .attr('id', d.name)
+ .attr("x", 0)
+ .attr("y", 0)
+ .attr("rx", 20)
+ .attr("ry", 20)
+ .attr('width', 100)
+ .attr('height', 100)
+ .attr('fill', 'white')
+ .attr('stroke', 'black')
+ .attr('opacity', 0.6)
+ .on('mouseover', () => this.handleMouseOver());
+
+ d.x = xbyMath;
+ d.y = ybyMath;
+
+ firstg.append('rect')
+ .attr('x', 95)
+ .attr('y', 20)
+ // .attr('r', 10)
+ .attr('width', 10)
+ .attr('height', 10)
+ .attr('fill', 'orange')
+
+ if(d.requirementsArray) {
+ d.requirementsArray.forEach(requirement =>{
+ firstg.append('rect')
+ .attr('id', d.name+requirement.name)
+ .attr('x', 95)
+ .attr('y', 60)
+ // .attr('r', 10)
+ .attr('width', 10)
+ .attr('height', 10)
+ .attr('fill', 'blue')
+ requirement.x = xbyMath + 95;
+ requirement.y = ybyMath + 60;
+ });
+ }
+
+ if(d.capabilitiesArray) {
+ d.capabilitiesArray.forEach(capability =>{
+ firstg.append('rect')
+ .attr('id', d.name+capability.name)
+ .attr('x', 95)
+ .attr('y', 40)
+ // .attr('r', 10)
+ .attr('width', 10)
+ .attr('height', 10)
+ .attr('fill', 'green');
+ capability.x = xbyMath + 95;
+ capability.y = ybyMath + 60;
+ });
+ }
+
+
+ firstg.append('text')
+ .attr('x', 0)
+ .attr('y', 115)
+ .text(d.name);
+
+ // X = X +120;
+ // Y = 10;
+ });
+ this.buildD3DataLinks();
+ }
+
+ buildD3DataNodes(data) {
+ let d3data;
+ d3data = data.topology_template.node_templates;
+ console.log('d3data:', d3data);
+ let finalData = [];
+ for (var property1 in d3data) {
+ d3data[property1].name = property1;
+ this.dataForsimulation.nodes.push(d3data[property1]);
+ finalData.push(d3data[property1]);
+ }
+
+ this.dataForsimulation.nodes.forEach(node => {
+ for( var nodeProperty in node) {
+ if(nodeProperty == 'requirements' || nodeProperty == 'capabilities') {
+ let arrayName = nodeProperty + 'Array';
+ node[arrayName] = [];
+ for(var reqProperty in node[nodeProperty]) {
+ node[nodeProperty][reqProperty].name = reqProperty;
+ node[arrayName].push(node[nodeProperty][reqProperty])
+ }
+
+ console.log('node array:', + node[arrayName]);
+ }
+ }
+ });
+ console.log( this.dataForsimulation);
+
+
+ }
+
+ buildD3DataLinks() {
+ this.dataForsimulation.nodes.forEach((node) => {
+ if(node.requirementsArray && node.requirementsArray.length > 0) {
+ node.requirementsArray.forEach(requirement => {
+ let linkObject = {};
+ linkObject['sourceName'] = node.name + requirement.name;
+ linkObject['sourceid'] = node.name + requirement.name;
+ linkObject['sourceX'] = requirement.x;
+ linkObject['sourceY'] = requirement.y;
+ linkObject['targetNode'] = requirement.node;
+ linkObject['targetCapabilility'] = requirement.capability;
+ linkObject['ele'] = d3.select('#'+ linkObject['sourceid']);
+ this.dataForsimulation.links.push(linkObject);
+ });
+ }
+ });
+
+ this.capabilityTargets();
+ }
+
+ capabilityTargets() {
+ this.dataForsimulation.links.forEach(link=>{
+ this.dataForsimulation.nodes.forEach(node=>{
+ if(node.name == link.targetNode && node.capabilitiesArray) {
+ node.capabilitiesArray.forEach(capability=>{
+ if(capability.name == link.targetCapabilility) {
+ link['targetX'] = capability.x;
+ link['targetY'] = capability.y;
+ }
+ })
+ }
+ });
+ });
+
+ this.drawlink();
+ }
+
+ drawlink() {
+ this.dataForsimulation.links.forEach(link=>{
+ this.svg.append('line')
+ .attr('x1', link.sourceX)
+ .attr('y1', link.sourceY)
+ .attr('x2', link.targetX)
+ .attr('y2', link.targetY)
+ .attr('stroke','gray')
+ .attr('stroke-width', 5);
+ });
+ }
+
+ handleMouseOver() {
+ console.log('mouse over');
+ }
+
}
Code Review / ccsdk / cds.git / commitdiff