diff options
Diffstat (limited to 'catalog-ui/src/app/models/graph/nodes/composition-graph-nodes')
2 files changed, 36 insertions, 18 deletions
diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts index a24142348c..51a0c7b3e5 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-base.ts @@ -48,33 +48,31 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements this.isUcpePart = false; this.isInsideGroup = false; } - - - public setUncertifiedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string { - let uncertifiedIconWidth:number = GraphUIObjects.HANDLE_SIZE; + + protected enhanceImage(node:Cy.Collection, nodeMinSize:number, imgUrl: string):string { + let infoIconWidth:number = GraphUIObjects.HANDLE_SIZE; let nodeWidth:number = node.data('imgWidth') || node.width(); - let uncertifiedCanvasWidth: number = nodeWidth; + let infoCanvasWidth: number = nodeWidth; - if (nodeWidth < nodeMinSize) { //uncertified icon will overlap too much of the node, need to expand canvas. - uncertifiedCanvasWidth = nodeWidth + uncertifiedIconWidth/2; //expand canvas so that only half of the icon overlaps with the node + if (nodeWidth < nodeMinSize) { //info icon will overlap too much of the node, need to expand canvas. + infoCanvasWidth = nodeWidth + infoIconWidth/2; //expand canvas so that only half of the icon overlaps with the node } - const x = uncertifiedCanvasWidth - nodeWidth, y = x, width = nodeWidth, height = width; + const x = infoCanvasWidth - nodeWidth, y = x, width = nodeWidth, height = width; const canvasImages:ICanvasImage[] = [ { src: this.imagesPath + this.componentInstance.icon + '.png', x, y, width, height}, - { src: this.imagesPath + 'uncertified.png', x: 0, y: 0, width: uncertifiedIconWidth, height: uncertifiedIconWidth} + { src: imgUrl, x: 0, y: 0, width: infoIconWidth, height: infoIconWidth} ]; - //Create the image and update the node background styles - this.imageCreator.getMultiLayerBase64Image(canvasImages, uncertifiedCanvasWidth, uncertifiedCanvasWidth).then(img => this.updateNodeStyles(node,uncertifiedCanvasWidth,img)); + this.imageCreator.getMultiLayerBase64Image(canvasImages, infoCanvasWidth, infoCanvasWidth).then(img => this.updateNodeStyles(node,infoCanvasWidth,img)); return this.img; // Return the referance to the image (in Base64 format) } - - public setArchivedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string { + + public setArchivedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string { let archivedIconWidth:number = GraphUIObjects.HANDLE_SIZE; let nodeWidth:number = node.data('imgWidth') || node.width(); let archivedCanvasWidth: number = nodeWidth; @@ -92,6 +90,10 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements return this.img; // Return the default img } + public initUncertifiedImage(node:Cy.Collection, nodeMinSize:number):string { + return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'uncertified.png'); + } + protected getDisplayName():string { let graphResourceName = AngularJSBridge.getFilter('graphResourceName'); let resourceName = AngularJSBridge.getFilter('resourceName'); @@ -99,7 +101,7 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements } //TODO:: move to Base class ??? - private updateNodeStyles(node,canvasWidth,imageBase64){ + private updateNodeStyles(node,canvasWidth,imageBase64){ this.img = imageBase64; node.style({ 'background-image': this.img, @@ -107,7 +109,7 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements 'background-height': canvasWidth, 'background-position-x':0, 'background-position-y':0 - }); + }); } } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts index b025221f25..5ef3a733b2 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service-proxy.ts @@ -18,29 +18,45 @@ * ============LICENSE_END========================================================= */ -import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; -import {ComponentInstance, CompositionCiNodeBase} from "../../../../models"; -import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; +import {ComponentInstance, CompositionCiNodeBase} from "app/models"; +import {ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service"; +import {ImagesUrl, GraphUIObjects} from "app/utils"; export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase { + private isDependent: boolean; + private originalImg: string; constructor(instance:ComponentInstance, imageCreator:ImageCreatorService) { super(instance, imageCreator); + this.isDependent =instance.isDependent(); this.initService(); } private initService():void { this.imagesPath = this.imagesPath + ImagesUrl.SERVICE_PROXY_ICONS; this.img = this.imagesPath + this.componentInstance.icon + '.png'; + this.originalImg = this.img; this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; this.classes = 'service-node'; if(this.archived){ this.classes = this.classes + ' archived'; return; } + if (this.isDependent) { + this.classes += ' dependent'; + } if (!this.certified) { this.classes = this.classes + ' not-certified'; } } + + public initUncertifiedDependentImage(node:Cy.Collection, nodeMinSize:number):string { + return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'uncertified_dependent.png'); + } + + public initDependentImage(node:Cy.Collection, nodeMinSize:number):string { + return this.enhanceImage(node, nodeMinSize, this.imagesPath + 'dependent.png'); + } + } |