catalog-ui/src/app/directives/graphs-v2/composition-graph/utils/composition-graph-palette-utils.ts

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * SDC
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ============LICENSE_END=========================================================
  19  */
  20
  21 import { EventListenerService, LoaderService } from "app/services";
  22 import { CapabilitiesGroup, NodesFactory, ComponentInstance, Component, CompositionCiNodeBase, RequirementsGroup } from "app/models";
  23 import { ComponentFactory, ComponentInstanceFactory, GRAPH_EVENTS, GraphUIObjects } from "app/utils";
  24 import { CompositionGraphGeneralUtils } from "./composition-graph-general-utils";
  25 import { CommonGraphUtils } from "../../common/common-graph-utils";
  26 import 'sdc-angular-dragdrop';
  27 import { LeftPaletteComponent } from "../../../../models/components/displayComponent";
  28
  29 export class CompositionGraphPaletteUtils {
  30
  31     constructor(private ComponentFactory: ComponentFactory,
  32         private $filter: ng.IFilterService,
  33         private loaderService: LoaderService,
  34         private generalGraphUtils: CompositionGraphGeneralUtils,
  35         private componentInstanceFactory: ComponentInstanceFactory,
  36         private nodesFactory: NodesFactory,
  37         private commonGraphUtils: CommonGraphUtils,
  38         private eventListenerService: EventListenerService) {
  39     }
  40
  41     /**
  42      * Calculate the dragged element (html element) position on canvas
  43      * @param cy
  44      * @param event
  45      * @param position
  46      * @returns {Cy.BoundingBox}
  47      * @private
  48      */
  49     private _getNodeBBox(cy: Cy.Instance, event: IDragDropEvent, position?: Cy.Position) {
  50         let bbox = <Cy.BoundingBox>{};
  51         if (!position) {
  52             position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
  53         }
  54         let cushionWidth: number = 40;
  55         let cushionHeight: number = 40;
  56
  57         bbox.x1 = position.x - cushionWidth / 2;
  58         bbox.y1 = position.y - cushionHeight / 2;
  59         bbox.x2 = position.x + cushionWidth / 2;
  60         bbox.y2 = position.y + cushionHeight / 2;
  61         return bbox;
  62     }
  63
  64     /**
  65      * 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
  66      * @param cy
  67      * @param fullComponent
  68      * @param event
  69      * @param component
  70      */
  71     private _createComponentInstanceOnGraphFromPaletteComponent(cy: Cy.Instance, fullComponent: LeftPaletteComponent, event: IDragDropEvent, component: Component) {
  72
  73         let componentInstanceToCreate: ComponentInstance = this.componentInstanceFactory.createComponentInstanceFromComponent(fullComponent);
  74         let cytoscapePosition: Cy.Position = this.commonGraphUtils.getCytoscapeNodePosition(cy, event);
  75
  76         componentInstanceToCreate.posX = cytoscapePosition.x;
  77         componentInstanceToCreate.posY = cytoscapePosition.y;
  78
  79
  80         let onFailedCreatingInstance: (error: any) => void = (error: any) => {
  81             this.loaderService.hideLoader('composition-graph');
  82         };
  83
  84         //on success - update node data
  85         let onSuccessCreatingInstance = (createInstance: ComponentInstance): void => {
  86
  87             this.loaderService.hideLoader('composition-graph');
  88
  89             createInstance.name = this.$filter('resourceName')(createInstance.name);
  90             createInstance.requirements = new RequirementsGroup(createInstance.requirements);
  91             createInstance.capabilities = new CapabilitiesGroup(createInstance.capabilities);
  92             createInstance.componentVersion = fullComponent.version;
  93             createInstance.icon = fullComponent.icon;
  94             createInstance.setInstanceRC();
  95
  96             let newNode: CompositionCiNodeBase = this.nodesFactory.createNode(createInstance);
  97             let cyNode: Cy.CollectionNodes = this.commonGraphUtils.addComponentInstanceNodeToGraph(cy, newNode);
  98
  99             //check if node was dropped into a UCPE
 100             let ucpe: Cy.CollectionElements = this.commonGraphUtils.isInUcpe(cy, cyNode.boundingbox());
 101             if (ucpe.length > 0) {
 102                 this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_INSERT_NODE_TO_UCPE, cyNode, ucpe, false);
 103             }
 104             this.eventListenerService.notifyObservers(GRAPH_EVENTS.ON_CREATE_COMPONENT_INSTANCE);
 105
 106         };
 107
 108         this.loaderService.showLoader('composition-graph');
 109
 110         // Create the component instance on server
 111         this.generalGraphUtils.getGraphUtilsServerUpdateQueue().addBlockingUIAction(() => {
 112             component.createComponentInstance(componentInstanceToCreate).then(onSuccessCreatingInstance, onFailedCreatingInstance);
 113         });
 114     }
 115
 116     /**
 117      * Thid function applay red/green background when component dragged from palette
 118      * @param cy
 119      * @param event
 120      * @param dragElement
 121      * @param dragComponent
 122      */
 123     public onComponentDrag(cy: Cy.Instance, event: IDragDropEvent, dragElement: JQuery, dragComponent: ComponentInstance) {
 124
 125         if (event.clientX < GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET || event.clientY < GraphUIObjects.DIAGRAM_HEADER_OFFSET) { //hovering over palette. Dont bother computing validity of drop
 126             dragElement.removeClass('red');
 127             return;
 128         }
 129
 130         let offsetPosition = {
 131             x: event.clientX - GraphUIObjects.DIAGRAM_PALETTE_WIDTH_OFFSET,
 132             y: event.clientY - GraphUIObjects.DIAGRAM_HEADER_OFFSET
 133         };
 134         let bbox = this._getNodeBBox(cy, event, offsetPosition);
 135
 136         if (this.generalGraphUtils.isPaletteDropValid(cy, bbox, dragComponent)) {
 137             dragElement.removeClass('red');
 138         } else {
 139             dragElement.addClass('red');
 140         }
 141     }
 142
 143     /**
 144      *  This function is called when after dropping node on canvas
 145      *  Check if the capability & requirements fulfilled and if not get from server
 146      * @param cy
 147      * @param event
 148      * @param component
 149      */
 150     public addNodeFromPalette(cy: Cy.Instance, event: IDragDropEvent, component: Component) {
 151         this.loaderService.showLoader('composition-graph');
 152
 153         let draggedComponent: LeftPaletteComponent = event.dataTransfer.component;
 154
 155         if (this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.containsKey(draggedComponent.uniqueId)) {
 156             let fullComponent = this.generalGraphUtils.componentRequirementsAndCapabilitiesCaching.getValue(draggedComponent.uniqueId);
 157             draggedComponent.capabilities = fullComponent.capabilities;
 158             draggedComponent.requirements = fullComponent.requirements;
 159             this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
 160
 161         } else {
 162
 163             this.ComponentFactory.getComponentFromServer(draggedComponent.getComponentSubType(), draggedComponent.uniqueId)
 164                 .then((fullComponent: Component) => {
 165                     draggedComponent.capabilities = fullComponent.capabilities;
 166                     draggedComponent.requirements = fullComponent.requirements;
 167                     this._createComponentInstanceOnGraphFromPaletteComponent(cy, draggedComponent, event, component);
 168                 });
 169         }
 170     }
 171 }
 172
 173
 174 CompositionGraphPaletteUtils.$inject = [
 175     'ComponentFactory',
 176     '$filter',
 177     'LoaderService',
 178     'CompositionGraphGeneralUtils',
 179     'ComponentInstanceFactory',
 180     'NodesFactory',
 181     'CommonGraphUtils',
 182     'EventListenerService'
 183 ];