diff options
author | ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts')
-rw-r--r-- | catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts new file mode 100644 index 0000000000..1776c2f9b9 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/utils/composition-graph-palette-utils.ts @@ -0,0 +1,233 @@ +/*- + * ============LICENSE_START======================================================= + * SDC + * ================================================================================ + * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END========================================================= + */ + +import {Injectable} from "@angular/core"; +import {CompositionGraphGeneralUtils, RequirementAndCapabilities} from "./composition-graph-general-utils"; +import {CommonGraphUtils} from "../common/common-graph-utils"; +import {EventListenerService} from "../../../../../services/event-listener-service"; +import {ResourceNamePipe} from "app/ng2/pipes/resource-name.pipe"; +import {ComponentInstanceFactory} from "app/utils/component-instance-factory"; +import {GRAPH_EVENTS, GraphUIObjects} from "app/utils/constants"; +import {TopologyTemplateService} from "app/ng2/services/component-services/topology-template.service"; +import {DndDropEvent} from "ngx-drag-drop/ngx-drag-drop"; +import {SdcUiServices} from "onap-ui-angular" +import { Component as TopologyTemplate, NodesFactory, CapabilitiesGroup, RequirementsGroup, + CompositionCiNodeBase, ComponentInstance, LeftPaletteComponent, Point } from "app/models"; +import {CompositionService} from "../../composition.service"; +import {WorkspaceService} from "app/ng2/pages/workspace/workspace.service"; +import { QueueServiceUtils } from "app/ng2/utils/queue-service-utils"; +import {ComponentGenericResponse} from "../../../../services/responses/component-generic-response"; +import {MatchCapabilitiesRequirementsUtils} from "./match-capability-requierment-utils"; +import {CompositionGraphNodesUtils} from "./index"; + +@Injectable() +export class CompositionGraphPaletteUtils { + + constructor(private generalGraphUtils:CompositionGraphGeneralUtils, + private nodesFactory:NodesFactory, + private commonGraphUtils:CommonGraphUtils, + private queueServiceUtils:QueueServiceUtils, + private eventListenerService:EventListenerService, + private topologyTemplateService: TopologyTemplateService, + private loaderService: SdcUiServices.LoaderService, + private compositionService: CompositionService, + private workspaceService: WorkspaceService, + private matchCapabilitiesRequirementsUtils: MatchCapabilitiesRequirementsUtils, + private nodesGraphUtils: CompositionGraphNodesUtils) { + } + + /** + * + * @param Calculate matching nodes, highlight the matching nodes and fade the non matching nodes + * @param leftPaletteComponent + * @param _cy + * @returns void + * @private + */ + + public onComponentHoverIn = (leftPaletteComponent: LeftPaletteComponent, _cy: Cy.Instance) => { + const nodesData = this.nodesGraphUtils.getAllNodesData(_cy.nodes()); + const nodesLinks = this.generalGraphUtils.getAllCompositionCiLinks(_cy); + + if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(leftPaletteComponent.uniqueId)) { + const reqAndCap: RequirementAndCapabilities = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(leftPaletteComponent.uniqueId); + const filteredNodesData = this.matchCapabilitiesRequirementsUtils.findMatchingNodesToComponentInstance( + { uniqueId: leftPaletteComponent.uniqueId, requirements: reqAndCap.requirements, capabilities: reqAndCap.capabilities} as ComponentInstance, nodesData, nodesLinks); + + this.matchCapabilitiesRequirementsUtils.highlightMatchingComponents(filteredNodesData, _cy); + this.matchCapabilitiesRequirementsUtils.fadeNonMachingComponents(filteredNodesData, nodesData, _cy); + } else { + + this.topologyTemplateService.getCapabilitiesAndRequirements(leftPaletteComponent.componentType, leftPaletteComponent.uniqueId).subscribe((response: ComponentGenericResponse) => { + let reqAndCap: RequirementAndCapabilities = { + capabilities: response.capabilities, + requirements: response.requirements + } + this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.setValue(leftPaletteComponent.uniqueId, reqAndCap); + }); + } + } + + /** + * Calculate the dragged element (html element) position on canvas + * @param cy + * @param event + * @param position + * @returns {Cy.BoundingBox} + * @private + */ + private _getNodeBBox(cy:Cy.Instance, event:DragEvent, position?:Cy.Position, eventPosition?: Point) { + let bbox = <Cy.BoundingBox>{}; + if (!position) { + position = event ? this.commonGraphUtils.getCytoscapeNodePosition(cy, event) : eventPosition; + } + let cushionWidth:number = 40; + let cushionHeight:number = 40; + + bbox.x1 = position.x - cushionWidth / 2; + bbox.y1 = position.y - cushionHeight / 2; + bbox.x2 = position.x + cushionWidth / 2; + bbox.y2 = position.y + cushionHeight / 2; + return bbox; + } + + /** + * Create the component instance, update data from parent component in the left palette and notify on_insert_to_ucpe if component was dragg into ucpe + * @param cy + * @param fullComponent + * @param event + * @param component + */ + private _createComponentInstanceOnGraphFromPaletteComponent(cy:Cy.Instance, fullComponent:LeftPaletteComponent, event:DragEvent) { + + let componentInstanceToCreate:ComponentInstance = ComponentInstanceFactory.createComponentInstanceFromComponent(fullComponent); + let cytoscapePosition:Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); + componentInstanceToCreate.posX = cytoscapePosition.x; + componentInstanceToCreate.posY = cytoscapePosition.y; + + let onFailedCreatingInstance:(error:any) => void = (error:any) => { + this.loaderService.deactivate(); + }; + + //on success - update node data + let onSuccessCreatingInstance = (createInstance:ComponentInstance):void => { + + this.loaderService.deactivate(); + this.compositionService.addComponentInstance(createInstance); + createInstance.name = ResourceNamePipe.getDisplayName(createInstance.name); + createInstance.requirements = new RequirementsGroup(createInstance.requirements); + createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities); + createInstance.componentVersion = fullComponent.version; + createInstance.icon = fullComponent.icon; + createInstance.setInstanceRC(); + + let newNode:CompositionCiNodeBase = this.nodesFactory.createNode(createInstance); + this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode); + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE); + }; + + this.queueServiceUtils.addBlockingUIAction(() => { + let uniqueId = this.workspaceService.metadata.uniqueId; + let componentType = this.workspaceService.metadata.componentType; + this.topologyTemplateService.createComponentInstance(componentType, uniqueId, componentInstanceToCreate).subscribe(onSuccessCreatingInstance, onFailedCreatingInstance); + + }); + } + // + // /** + // * Thid function applay red/green background when component dragged from palette + // * @param cy + // * @param event + // * @param dragElement + // * @param dragComponent + // */ + // public onComponentDrag(cy:Cy.Instance, event) { + // let draggedElement = document.getElementById("draggable_element"); + // // event.dataTransfer.setDragImage(draggableElement, 0, 0); + // if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop + // draggedElement.className = 'invalid-drag'; + // event.dataTransfer.setDragImage(draggedElement.cloneNode(true), 0, 0); + // return; + // } + // + // let offsetPosition = { + // x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET, + // y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET + // }; + // let bbox = this._getNodeBBox(cy, event, offsetPosition); + // + // if (this.generalGraphUtils.isPaletteDropValid(cy, bbox)) { + // draggedElement.className = 'valid-drag'; + // event.dataTransfer.setDragImage(draggedElement.cloneNode(true), 0, 0); + // // event.dataTransfer.setDragImage(draggedElement, 0, 0); + // // event.dataTransfer.setDragImage(draggedElement, 0, 0); + // + // } else { + // draggedElement.className = 'invalid-drag'; + // event.dataTransfer.setDragImage(draggedElement.cloneNode(true), 0, 0); + // } + // } + + public isDragValid(cy:Cy.Instance, position: Point):boolean { + if (position.x < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || position.y < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop + return false; + } + + let offsetPosition = { + x: position.x - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET, + y: position.y - GraphUIObjects.DIAGRAM_HEADER_OFFSET + }; + let bbox = this._getNodeBBox(cy, null, offsetPosition, position); + + if (this.generalGraphUtils.isPaletteDropValid(cy, bbox)) { + return true; + } else { + return false; + } + } + /** + * This function is called when after dropping node on canvas + * Check if the capability & requirements fulfilled and if not get from server + * @param cy + * @param dragEvent + * @param component + */ + public addNodeFromPalette(cy:Cy.Instance, dragEvent:DndDropEvent) { + this.loaderService.activate(); + + let draggedComponent:LeftPaletteComponent = dragEvent.data; + + if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) { + let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId); + draggedComponent.capabilities = fullComponent.capabilities; + draggedComponent.requirements = fullComponent.requirements; + this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, dragEvent.event); + + } else { + + this.topologyTemplateService.getFullComponent(draggedComponent.componentType, draggedComponent.uniqueId).subscribe((topologyTemplate:TopologyTemplate) => { + draggedComponent.capabilities = topologyTemplate.capabilities; + draggedComponent.requirements = topologyTemplate.requirements; + this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, dragEvent.event); + }); + } + } +} + |