diff options
Diffstat (limited to 'catalog-ui')
12 files changed, 97 insertions, 57 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); diff --git a/catalog-ui/src/app/models/graph/nodes/base-common-node.ts b/catalog-ui/src/app/models/graph/nodes/base-common-node.ts index 153a18225d..fb43f46bbd 100644 --- a/catalog-ui/src/app/models/graph/nodes/base-common-node.ts +++ b/catalog-ui/src/app/models/graph/nodes/base-common-node.ts @@ -27,7 +27,8 @@ export abstract class CommonNodeBase { public displayName:string; public name:string; - public img:string; + public img: string; + public imgWidth: number; public certified:boolean; public isGroup:boolean; public imagesPath:string; 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 1e4a735a53..681cebc8d2 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 @@ -21,7 +21,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 {ImagesUrl} from "app/utils"; +import {ImagesUrl, GraphUIObjects} from "app/utils"; import {AngularJSBridge} from "app/services"; export interface ICompositionCiNodeBase { @@ -51,13 +51,27 @@ export abstract class CompositionCiNodeBase extends CommonCINodeBase implements } - public initImage(node:Cy.Collection):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 + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png', - this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'uncertified.png') + this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'uncertified.png', nodeWidth, uncertifiedCanvasWidth, uncertifiedIconWidth) .then(imageBase64 => { this.img = imageBase64; - node.style({'background-image': this.img}); + node.style({ + 'background-image': this.img, + 'background-width': uncertifiedCanvasWidth, + 'background-height': uncertifiedCanvasWidth, + 'width': uncertifiedCanvasWidth, + 'height': uncertifiedCanvasWidth + }); }); return this.img; 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 85534c78de..cded0ea104 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 @@ -22,7 +22,7 @@ import {CompositionCiNodeBase} from "./composition-ci-node-base"; import {ComponentInstance} from "../../../componentsInstances/componentInstance"; import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; import {AngularJSBridge} from "../../../../services/angular-js-bridge-service"; -import {ImagesUrl} from "../../../../utils/constants"; +import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; export class CompositionCiNodeCp extends CompositionCiNodeBase { @@ -35,6 +35,7 @@ export class CompositionCiNodeCp extends CompositionCiNodeBase { private initCp():void { let sdcConfig = AngularJSBridge.getAngularConfig(); this.img = sdcConfig.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png'; + this.imgWidth = GraphUIObjects.SMALL_RESOURCE_WIDTH; this.type = "basic-small-node"; //if the cp from type cpEndPointInstances create with another template if (sdcConfig.cpEndPointInstances.indexOf(this.componentInstance.icon) > -1) { 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 3a9b8457fd..81ee61a14f 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 @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import {ImagesUrl} from "../../../../utils/constants"; +import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; import {ComponentInstance, CompositionCiNodeBase} from "../../../../models"; import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; export class CompositionCiNodeService extends CompositionCiNodeBase { @@ -32,6 +32,7 @@ export class CompositionCiNodeService extends CompositionCiNodeBase { private initService():void { this.img = this.imagesPath + ImagesUrl.SERVICE_ICONS + this.componentInstance.icon + '.png'; + this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; this.classes = 'service-node' 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-vf.ts b/catalog-ui/src/app/models/graph/nodes/composition-graph-nodes/composition-ci-node-vf.ts index 5d37db30fc..005804c11f 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 @@ -20,7 +20,7 @@ import {CompositionCiNodeBase} from "./composition-ci-node-base"; import {ComponentInstance} from "../../../componentsInstances/componentInstance"; import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; -import {ImagesUrl} from "../../../../utils/constants"; +import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; export class CompositionCiNodeVf extends CompositionCiNodeBase { @@ -32,6 +32,7 @@ export class CompositionCiNodeVf extends CompositionCiNodeBase { private initVf():void { this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + this.componentInstance.icon + '.png'; + this.imgWidth = GraphUIObjects.DEFAULT_RESOURCE_WIDTH; this.classes = 'vf-node'; 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 db46e48ad7..bf52ec0408 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 @@ -20,7 +20,7 @@ import {ComponentInstance} from "../../../componentsInstances/componentInstance"; import {ImageCreatorService} from "../../../../directives/graphs-v2/image-creator/image-creator.service"; import {CompositionCiNodeBase} from "./composition-ci-node-base"; -import {ImagesUrl} from "../../../../utils/constants"; +import { ImagesUrl, GraphUIObjects} from "../../../../utils/constants"; export class CompositionCiNodeVl extends CompositionCiNodeBase { private toolTipText:string; @@ -47,6 +47,7 @@ export class CompositionCiNodeVl extends CompositionCiNodeBase { } } this.img = this.imagesPath + ImagesUrl.RESOURCE_ICONS + 'vl.png'; + this.imgWidth = GraphUIObjects.SMALL_RESOURCE_WIDTH; this.classes = 'vl-node'; if (!this.certified) { diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts index 2835d20ba4..08bdf2030f 100644 --- a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts +++ b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts @@ -15,7 +15,9 @@ export class SearchBarComponent { @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>(); searchButtonClick = (): void => { - this.searchButtonClicked.emit(this.searchQuery); + if (this.searchQuery) { //do not allow empty search + this.searchButtonClicked.emit(this.searchQuery); + } } searchQueryChange = ($event): void => { @@ -24,7 +26,7 @@ export class SearchBarComponent { private clearSearchQuery = (): void => { this.searchQuery = ""; - this.searchButtonClick(); + this.searchButtonClicked.emit(this.searchQuery); } } diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts index d239019455..ffdf6fdaa2 100644 --- a/catalog-ui/src/app/utils/constants.ts +++ b/catalog-ui/src/app/utils/constants.ts @@ -188,6 +188,10 @@ export class GraphTransactionLogText { } export class GraphUIObjects { + public static HANDLE_SIZE = 18; + public static NODE_OVERLAP_MIN_SIZE = 30; + public static DEFAULT_RESOURCE_WIDTH = 65; + public static SMALL_RESOURCE_WIDTH = 21; public static LINK_MENU_HEIGHT = 420; public static TOP_HEADER_HEIGHT = 200; public static TOOLTIP_OFFSET_X = 50; diff --git a/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js b/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js index 9be07f2ea1..5731019ff0 100644 --- a/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js +++ b/catalog-ui/src/third-party/cytoscape.js-edge-editation/CytoscapeEdgeEditation.js @@ -199,19 +199,7 @@ this._resizeCanvas(); - this._arrowEnd = this._cy.add({ - group: "nodes", - data: { - "id": this.ARROW_END_ID, - "position": {x: 150, y: 150} - } - }); - this._arrowEnd.css({ - "opacity": 0, - 'width': 0.0001, - 'height': 0.0001 - }); }, registerHandle: function (handle) { @@ -250,7 +238,7 @@ _drawHandle: function (handle, target) { var position = this._getHandlePosition(handle, target); - var handleSize = target.renderedWidth() / 4; + var handleSize = this.HANDLE_SIZE * this._cy.zoom(); this._ctx.beginPath(); @@ -273,6 +261,22 @@ if (this._hover) { toNode = this._hover; } else { + if (!this._arrowEnd) { + this._arrowEnd = this._cy.add({ + group: "nodes", + data: { + "id": this.ARROW_END_ID, + "position": { x: 150, y: 150 } + } + }); + + this._arrowEnd.css({ + "opacity": 0, + 'width': 0.0001, + 'height': 0.0001 + }); + } + this._arrowEnd.renderedPosition(toPosition); toNode = this._arrowEnd; } @@ -302,6 +306,11 @@ this._edge.remove(); this._edge = null; } + + if (this._arrowEnd) { + this._arrowEnd.remove(); + this._arrowEnd = null; + } }, _resizeCanvas: function () { this._$canvas @@ -460,19 +469,20 @@ } } }, - _getHandlePosition: function (handle, target) { + _getHandlePosition: function (handle, target) { //returns the upper left point at which to begin drawing the handle var position = target.renderedPosition(); var width = target.renderedWidth(); var height = target.renderedHeight(); + var renderedHandleSize = this.HANDLE_SIZE * this._cy.zoom(); //actual number of pixels that handle will use. var xpos = null; var ypos = null; switch (handle.positionX) { case "left": - xpos = position.x - width / 4; + xpos = position.x - width / 2; break; - case "right": - xpos = position.x + width / 4; + case "right": //position.x is the exact center of the node. Need to add half the width to get to the right edge. Then, subtract renderedHandleSize to get handle position + xpos = position.x + width / 2 - renderedHandleSize; break; case "center": xpos = position.x; @@ -481,19 +491,21 @@ switch (handle.positionY) { case "top": - ypos = position.y - width / 2; + ypos = position.y - height / 2; break; case "center": ypos = position.y; break; case "bottom": - ypos = position.y + width / 2; + ypos = position.y + height / 2; break; } - var offsetX = 0; - var offsetY = 0; - return {x: xpos + offsetX, y: ypos + offsetY}; + //Determine if handle will be too big and require offset to prevent it from covering too much of the node icon (in which case, move it over by 1/2 the renderedHandleSize, so half the handle overlaps). + //Need to use target.width(), which is the size of the node, unrelated to rendered size/zoom + var offsetX = (target.width() < 30) ? renderedHandleSize / 2 : 0; + var offsetY = (target.height() < 30) ? renderedHandleSize /2 : 0; + return {x: xpos + offsetX, y: ypos - offsetY}; }, _getEdgeCSSByHandle: function (handle) { var color = handle.lineColor ? handle.lineColor : handle.color; |