From 5b593496b8f1b8e8be8d7d2dbcc223332e65a49b Mon Sep 17 00:00:00 2001 From: Michael Lando Date: Sun, 29 Jul 2018 16:13:45 +0300 Subject: re base code Change-Id: I12a5ca14a6d8a87e9316b9ff362eb131105f98a5 Issue-ID: SDC-1566 Signed-off-by: Michael Lando --- .../app/models/graph/nodes/common-ci-node-base.ts | 2 + .../composition-ci-node-base.ts | 71 +++++++++++++++------- .../composition-ci-node-configuration.ts | 3 + .../composition-ci-node-cp.ts | 5 +- .../composition-ci-node-service-proxy.ts | 6 +- .../composition-ci-node-service.ts | 7 ++- .../composition-ci-node-ucpe.ts | 5 +- .../composition-ci-node-vf.ts | 4 ++ .../composition-ci-node-vl.ts | 4 ++ 9 files changed, 79 insertions(+), 28 deletions(-) (limited to 'catalog-ui/src/app/models/graph/nodes') diff --git a/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts index fb051c891d..dfd39d1b9f 100644 --- a/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts +++ b/catalog-ui/src/app/models/graph/nodes/common-ci-node-base.ts @@ -22,6 +22,7 @@ import {ComponentInstance} from "../../componentsInstances/componentInstance"; export abstract class CommonCINodeBase extends CommonNodeBase { public certified:boolean; + public archived:boolean; public template:string; public componentInstance:ComponentInstance; public group:string; @@ -34,6 +35,7 @@ export abstract class CommonCINodeBase extends CommonNodeBase { this.img = ''; this.certified = this.isCertified(this.componentInstance.componentVersion); this.displayName = instance.name; + this.archived = instance.originArchived; } private isCertified(version:string):boolean { 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 3b634b1f6e..a24142348c 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 @@ -20,7 +20,7 @@ import {ComponentInstance} from "../../../componentsInstances/componentInstance"; import {CommonCINodeBase} from "../common-ci-node-base"; -import {ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service"; +import {ICanvasImage, ImageCreatorService} from "app/directives/graphs-v2/image-creator/image-creator.service"; import {ImagesUrl, GraphUIObjects} from "app/utils"; import {AngularJSBridge} from "app/services"; @@ -42,47 +42,72 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements } private init() { - this.displayName = this.getDisplayName(); this.isUcpe = false; this.isGroup = false; this.isUcpePart = false; this.isInsideGroup = false; } + + + public setUncertifiedImageBgStyle(node:Cy.Collection, nodeMinSize:number):string { - public initUncertifiedImage(node:Cy.Collection, nodeMinSize:number):string { - let uncertifiedIconWidth:number = GraphUIObjects.HANDLE_SIZE; let nodeWidth:number = node.data('imgWidth') || node.width(); let uncertifiedCanvasWidth: 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 } - - - - this.imageCreator.getImageBase64(this.imagesPath + this.componentInstance.icon + '.png', - this.imagesPath + 'uncertified.png', nodeWidth, uncertifiedCanvasWidth, uncertifiedIconWidth) - .then(imageBase64 => { - this.img = imageBase64; - node.style({ - 'background-image': this.img, - 'background-width': uncertifiedCanvasWidth, - 'background-height': uncertifiedCanvasWidth, - 'width': uncertifiedCanvasWidth, - 'height': uncertifiedCanvasWidth - }); - }); - - return this.img; + + const x = uncertifiedCanvasWidth - 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} + ]; + + + //Create the image and update the node background styles + this.imageCreator.getMultiLayerBase64Image(canvasImages, uncertifiedCanvasWidth, uncertifiedCanvasWidth).then(img => this.updateNodeStyles(node,uncertifiedCanvasWidth,img)); + return this.img; // Return the referance to the image (in Base64 format) } - protected getDisplayName():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; + const x = archivedCanvasWidth - nodeWidth, y = x, width = nodeWidth, height = width; + const archiveImage = nodeWidth < 50? 'archive_small.png':'archive_big.png'; + + const canvasImages = [ + { src: this.imagesPath + this.componentInstance.icon + '.png', x, y, width, height}, + { src: AngularJSBridge.getAngularConfig().imagesPath + ImagesUrl.RESOURCE_ICONS + archiveImage, x, y, width, height} + ]; + + //Create the image and update the node background styles + this.imageCreator.getMultiLayerBase64Image(canvasImages, archivedCanvasWidth, archivedCanvasWidth).then(img => this.updateNodeStyles(node, archivedCanvasWidth, img)); + return this.img; // Return the default img + } + + protected getDisplayName():string { let graphResourceName = AngularJSBridge.getFilter('graphResourceName'); let resourceName = AngularJSBridge.getFilter('resourceName'); return graphResourceName(resourceName(this.componentInstance.name)); } + //TODO:: move to Base class ??? + private updateNodeStyles(node,canvasWidth,imageBase64){ + this.img = imageBase64; + node.style({ + 'background-image': this.img, + 'background-width': canvasWidth, + '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-configuration.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts index 1182f5e664..78bcc17186 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-configuration.ts @@ -35,5 +35,8 @@ export class CompositionCiNodeConfiguration extends CompositionCiNodeBase { this.imgWidth = GraphUIObjects.SMALL_RESOURCE_WIDTH; this.type = "basic-small-node"; this.classes = 'configuration-node'; + if(this.archived){ + this.classes = this.classes + ' archived'; + } } } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts index 3bd57695ec..05a6d790ab 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-cp.ts @@ -44,9 +44,12 @@ export class CompositionCiNodeCp extends CompositionCiNodeBase { } else { this.classes = 'cp-node'; } + if(this.archived){ + this.classes = this.classes + ' archived'; + return; + } if (!this.certified) { this.classes = this.classes + ' not-certified'; } - } } 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 b993490043..b025221f25 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 @@ -33,7 +33,11 @@ export class CompositionCiNodeServiceProxy extends CompositionCiNodeBase { this.imagesPath = this.imagesPath + ImagesUrl.SERVICE_PROXY_ICONS; this.img = this.imagesPath + this.componentInstance.icon + '.png'; this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; - this.classes = 'service-node' + this.classes = 'service-node'; + if(this.archived){ + this.classes = this.classes + ' archived'; + return; + } if (!this.certified) { this.classes = this.classes + ' not-certified'; } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts index b4e6ac354a..bf8facf002 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-service.ts @@ -33,10 +33,13 @@ export class CompositionCiNodeService extends CompositionCiNodeBase { this.imagesPath = this.imagesPath + ImagesUrl.SERVICE_ICONS; this.img = this.imagesPath + ImagesUrl.SERVICE_ICONS + this.componentInstance.icon + '.png'; this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; - this.classes = 'service-node' + this.classes = 'service-node'; + if(this.archived){ + this.classes = this.classes + ' archived'; + return; + } if (!this.certified) { this.classes = this.classes + ' not-certified'; } - } } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts index 3dd6a4e238..d4172c0eaa 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-ucpe.ts @@ -38,7 +38,10 @@ export class NodeUcpe extends CompositionCiNodeBase { this.type = 'ucpe-node'; this.allowConnection = false; this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; - + if(this.archived){ + this.classes = this.classes + ' archived'; + return; + } if (!this.certified) { this.classes = this.classes + ' not-certified-ucpe'; } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts index b5ad57a5c3..4aff85e6c3 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts @@ -35,6 +35,10 @@ export class CompositionCiNodeVf extends CompositionCiNodeBase { this.img = this.imagesPath + this.componentInstance.icon + '.png'; this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; this.classes = 'vf-node'; + if(this.archived){ + this.classes = this.classes + ' archived'; + return; + } if (!this.certified) { this.classes = this.classes + ' not-certified'; } diff --git a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts index eded75d5da..a440f09156 100644 --- a/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts +++ b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vl.ts @@ -52,6 +52,10 @@ export class CompositionCiNodeVl extends CompositionCiNodeBase { this.imagesPath = this.imagesPath + ImagesUrl.RESOURCE_ICONS; this.classes = 'vl-node'; + if(this.archived){ + this.classes = this.classes + ' archived'; + return; + } if (!this.certified) { this.classes = this.classes + ' not-certified'; } -- cgit 1.2.3-korg