diff options
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts')
-rw-r--r-- | catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts new file mode 100644 index 0000000000..83bf747501 --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts @@ -0,0 +1,163 @@ +import {EventListenerService, LoaderService} from "app/services"; +import {CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup} from "app/models"; +import {ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects} from "app/utils"; +import {CompositionGraphGeneralUtils} from "./composition-graph-general-utils"; +import {CommonGraphUtils} from "../../common/common-graph-utils"; +import 'angular-dragdrop'; +import {LeftPaletteComponent} from "../../../../models/components/displayComponent"; + +export class CompositionGraphPaletteUtils { + + constructor(private ComponentFactory:ComponentFactory, + private $filter:ng.IFilterService, + private loaderService:LoaderService, + private generalGraphUtils:CompositionGraphGeneralUtils, + private componentInstanceFactory:ComponentInstanceFactory, + private nodesFactory:NodesFactory, + private commonGraphUtils:CommonGraphUtils, + private eventListenerService:EventListenerService) { + } + + /** + * 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:IDragDropEvent, position?:Cy.Position) { + let bbox = <Cy.BoundingBox>{}; + if (!position) { + position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event); + } + 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:IDragDropEvent, component:Component) { + + let componentInstanceToCreate:ComponentInstance = this.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.hideLoader('composition-graph'); + }; + + //on success - update node data + let onSuccessCreatingInstance = (createInstance:ComponentInstance):void => { + + this.loaderService.hideLoader('composition-graph'); + + createInstance.name = this.$filter('resourceName')(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); + let cyNode:Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode); + + //check if node was dropped into a UCPE + let ucpe:Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox()); + if (ucpe.length > 0) { + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false); + } + this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE); + + }; + + this.loaderService.showLoader('composition-graph'); + + // Create the component instance on server + this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => { + component.createComponentInstance(componentInstanceToCreate).then(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:IDragDropEvent, dragElement:JQuery, dragComponent:ComponentInstance) { + + if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop + dragElement.removeClass('red'); + 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, dragComponent)) { + dragElement.removeClass('red'); + } else { + dragElement.addClass('red'); + } + } + + /** + * 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 event + * @param component + */ + public addNodeFromPalette(cy:Cy.Instance, event:IDragDropEvent, component:Component) { + this.loaderService.showLoader('composition-graph'); + + let draggedComponent:LeftPaletteComponent = event.dataTransfer.component; + + 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, event, component); + + } else { + + this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId) + .then((fullComponent:Component) => { + draggedComponent.capabilities = fullComponent.capabilities; + draggedComponent.requirements = fullComponent.requirements; + this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component); + }); + } + } +} + + +CompositionGraphPaletteUtils.$inject = [ + 'ComponentFactory', + '$filter', + 'LoaderService', + 'CompositionGraphGeneralUtils', + 'ComponentInstanceFactory', + 'NodesFactory', + 'CommonGraphUtils', + 'EventListenerService' +]; |