diff options
Diffstat (limited to 'catalog-ui/src/app/directives')
3 files changed, 26 insertions, 23 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts index 64197594e2..7e21f8293b 100644 --- a/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts +++ b/catalog-ui/src/app/directives/graphs-v2/common/style/component-instances-nodes-style.ts @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import {GraphColors} from "app/utils/constants"; +import { GraphColors, GraphUIObjects} from "app/utils/constants"; import constant = require("lodash/constant"); import {ImagesUrl} from "app/utils/constants"; import {AngularJSBridge} from "app/services/angular-js-bridge-service"; @@ -61,11 +61,11 @@ export class ComponentInstanceNodesStyle { 'shape': 'rectangle', 'label': 'data(displayName)', 'background-image': 'data(img)', - 'width': 65, - 'height': 65, + 'width': GraphUIObjects.DEFAULT_RESOURCE_WIDTH, + 'height': GraphUIObjects.DEFAULT_RESOURCE_WIDTH, 'background-opacity': 0, - "background-width": 65, - "background-height": 65, + "background-width": GraphUIObjects.DEFAULT_RESOURCE_WIDTH, + "background-height": GraphUIObjects.DEFAULT_RESOURCE_WIDTH, 'text-valign': 'bottom', 'text-halign': 'center', 'background-fit': 'cover', @@ -100,10 +100,10 @@ export class ComponentInstanceNodesStyle { 'shape': 'rectangle', 'label': 'data(displayName)', 'background-image': 'data(img)', - 'background-width': 21, - 'background-height': 21, - 'width': 21, - 'height': 21, + 'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH, 'text-valign': 'bottom', 'text-halign': 'center', 'background-opacity': 0, @@ -118,10 +118,10 @@ export class ComponentInstanceNodesStyle { 'shape': 'rectangle', 'label': 'data(displayName)', 'background-image': 'data(img)', - 'background-width': 21, - 'background-height': 21, - 'width': 21, - 'height': 21, + 'background-width': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'background-height': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'width': GraphUIObjects.SMALL_RESOURCE_WIDTH, + 'height': GraphUIObjects.SMALL_RESOURCE_WIDTH, 'text-valign': 'bottom', 'text-halign': 'center', 'background-opacity': 0, @@ -200,7 +200,7 @@ export class ComponentInstanceNodesStyle { css: { 'shape': 'rectangle', 'background-image': (ele:Cy.Collection) => { - return ele.data().initImage(ele) + return ele.data().initUncertifiedImage(ele, GraphUIObjects.NODE_OVERLAP_MIN_SIZE) }, "border-width": 0 } diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts index 9aa7941272..8b3a59ec1f 100644 --- a/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/composition-graph.directive.ts @@ -158,7 +158,7 @@ export class CompositionGraph implements ng.IDirective { container: graphEl, style: ComponentInstanceNodesStyle.getCompositionGraphStyle(), zoomingEnabled: true, - maxZoom: 2.5, + maxZoom: 1.2, minZoom: .1, userZoomingEnabled: false, userPanningEnabled: true, @@ -295,6 +295,10 @@ export class CompositionGraph implements ng.IDirective { //Zooms to fit all of the nodes in the collection passed in. If no nodes are passed in, will zoom to fit all nodes on graph scope.zoomAll = (nodes?:Cy.CollectionNodes) => { + if (!nodes || !nodes.length) { + nodes = this._cy.nodes(); + } + scope.withSidebar = false; this._cy.animate({ fit: { eles: nodes, padding: 20 }, @@ -311,9 +315,7 @@ export class CompositionGraph implements ng.IDirective { } }; - scope.highlightSearchMatches = (searchTerm: string) => { - if (searchTerm === undefined) return; //dont zoom & highlight if click on Search initially (searchTerm will be undefined). However, allow highlights to be cleared after subsequent search (searchTerm will be "") - + scope.highlightSearchMatches = (searchTerm: string) => { this.NodesGraphUtils.highlightMatchingNodesByName(this._cy, searchTerm); let matchingNodes: Cy.CollectionNodes = this.NodesGraphUtils.getMatchingNodesByName(this._cy, searchTerm); scope.zoomAll(matchingNodes); diff --git a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts index 51a77d1272..6d6291d900 100644 --- a/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts +++ b/catalog-ui/src/app/directives/graphs-v2/image-creator/image-creator.service.ts @@ -31,7 +31,7 @@ export class ImageCreatorService { body.appendChild(this._canvas); } - getImageBase64(imageBaseUri:string, imageLayerUri:string):ng.IPromise<string> { + getImageBase64(imageBaseUri:string, imageLayerUri:string, nodeWidth:number, canvasWidth:number, handleSize:number):ng.IPromise<string> { let deferred = this.$q.defer(); let imageBase = new Image(); let imageLayer = new Image(); @@ -42,14 +42,15 @@ export class ImageCreatorService { if (imagesLoaded < 2) { return; } - this._canvas.setAttribute('width', imageBase.width.toString()); - this._canvas.setAttribute('height', imageBase.height.toString()); + this._canvas.setAttribute('width', canvasWidth.toString()); + this._canvas.setAttribute('height', canvasWidth.toString()); let canvasCtx = this._canvas.getContext('2d'); canvasCtx.clearRect(0, 0, this._canvas.width, this._canvas.height); - canvasCtx.drawImage(imageBase, 0, 0, imageBase.width, imageBase.height); - canvasCtx.drawImage(imageLayer, imageBase.width - imageLayer.width, 0, imageLayer.width, imageLayer.height); + //Note: params below are: image, x to start drawing at, y to start drawing at, num of x pixels to draw, num of y pixels to draw + canvasCtx.drawImage(imageBase, 0, canvasWidth - nodeWidth, nodeWidth, nodeWidth); //Draw the node: When nodeWidth == canvasWidth, we'll start at point 0,0. Otherwise, x starts at 0 (but will end before end of canvas) and y starts low enough that node img ends at bottom of canvas. + canvasCtx.drawImage(imageLayer, canvasWidth - handleSize, 0, handleSize, handleSize); //Draw the icon: icon should be drawn in top right corner let base64Image = this._canvas.toDataURL(); deferred.resolve(base64Image); |