2 * ============LICENSE_START=======================================================
4 * ================================================================================
5 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
6 * ================================================================================
7 * Licensed under the Apache License, Version 2.0 (the "License");
8 * you may not use this file except in compliance with the License.
9 * You may obtain a copy of the License at
11 * http://www.apache.org/licenses/LICENSE-2.0
13 * Unless required by applicable law or agreed to in writing, software
14 * distributed under the License is distributed on an "AS IS" BASIS,
15 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16 * See the License for the specific language governing permissions and
17 * limitations under the License.
18 * ============LICENSE_END=========================================================
21 import {ComponentInstance} from "../../../componentsInstances/componentInstance";
22 import {CommonCINodeBase} from "../common-ci-node-base";
23 import {ImagesUrl, GraphUIObjects} from "app/utils";
24 import {AngularJSBridge} from "app/services";
25 import {ResourceNamePipe} from "app/ng2/pipes/resource-name.pipe";
26 import {ComponentInstanceNodesStyle} from "app/ng2/pages/composition/graph/common/style/component-instances-nodes-style";
27 import {ImageCreatorService, ICanvasImage} from "app/ng2/pages/composition/graph/common/image-creator.service";
29 export interface ICompositionCiNodeBase {
33 export abstract class CompositionCiNodeBase extends CommonCINodeBase implements ICompositionCiNodeBase {
35 public textPosition:string; //need to move to cp UCPE
36 public isUcpe:boolean;
37 public isInsideGroup:boolean;
38 public isUcpePart:boolean;
40 constructor(instance:ComponentInstance,
41 public imageCreator:ImageCreatorService) {
47 this.displayName = this.getDisplayName();
50 this.isUcpePart = false;
51 this.isInsideGroup = false;
55 protected enhanceImage(node:Cy.Collection, nodeMinSize:number, imgUrl: string):string {
57 let infoIconWidth:number = GraphUIObjects.HANDLE_SIZE;
58 let nodeWidth:number = node.data('imgWidth') || node.width();
59 // let uncertifiedCanvasWidth: number = nodeWidth;
60 let infoCanvasWidth: number = nodeWidth;
62 if (nodeWidth < nodeMinSize) { //uncertified icon will overlap too much of the node, need to expand canvas.
63 infoCanvasWidth = nodeWidth + infoIconWidth/2; //expand canvas so that only half of the icon overlaps with the node
66 const x = infoCanvasWidth - nodeWidth, y = x, width = nodeWidth, height = width;
68 const canvasImages:ICanvasImage[] = [
69 { src: this.imagesPath + this.componentInstance.icon + '.png', x, y, width, height},
70 { src: imgUrl, x: 0, y: 0, width: infoIconWidth, height: infoIconWidth}
74 //Create the image and update the node background styles
75 this.imageCreator.getMultiLayerBase64Image(canvasImages, infoCanvasWidth, infoCanvasWidth).then(img => this.updateNodeStyles(node,infoCanvasWidth,img));
76 return this.img; // Return the referance to the image (in Base64 format)
80 public setArchivedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string {
81 let archivedIconWidth:number = GraphUIObjects.HANDLE_SIZE;
82 let nodeWidth:number = node.data('imgWidth') || node.width();
83 let archivedCanvasWidth: number = nodeWidth;
85 const x = archivedCanvasWidth - nodeWidth, y = x, width = nodeWidth, height = width;
86 const archiveImage = nodeWidth < 50? 'archive_small.png':'archive_big.png';
88 const canvasImages = [
89 { src: this.imagesPath + this.componentInstance.icon + '.png', x, y, width, height},
90 { src: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.RESOURCE_ICONS + archiveImage, x, y, width, height}
93 //Create the image and update the node background styles
94 this.imageCreator.getMultiLayerBase64Image(canvasImages, archivedCanvasWidth, archivedCanvasWidth).then(img => this.updateNodeStyles(node, archivedCanvasWidth, img));
95 return this.img; // Return the default img
98 public initUncertifiedImage(node:Cy.Collection, nodeMinSize:number):string {
99 return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'uncertified.png');
102 protected getDisplayName():string {
103 let resourceName = ResourceNamePipe.getDisplayName(this.componentInstance.name);
104 return ComponentInstanceNodesStyle.getGraphDisplayName(resourceName);
107 //TODO:: move to Base class ???
108 private updateNodeStyles(node,canvasWidth,imageBase64){
109 this.img = imageBase64;
111 'background-image': this.img,
112 'background-width': canvasWidth,
113 'background-height': canvasWidth,
114 'background-position-x':0,
115 'background-position-y':0