diff options
Diffstat (limited to 'catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts')
| -rw-r--r-- | catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts | 349 |
1 files changed, 349 insertions, 0 deletions
diff --git a/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts new file mode 100644 index 0000000000..4bfbe5270e --- /dev/null +++ b/catalog-ui/src/app/directives/graphs-v2/palette/palette.directive.ts @@ -0,0 +1,349 @@ +import { + Component, + IAppMenu, + LeftPanelModel, + NodesFactory, + LeftPaletteComponent, + CompositionCiNodeBase, + ComponentInstance +} from "app/models"; +import {CompositionGraphGeneralUtils} from "../composition-graph/utils/composition-graph-general-utils"; +import {EventListenerService} from "app/services"; +import {ResourceType, GRAPH_EVENTS, EVENTS, ComponentInstanceFactory, ModalsHandler} from "app/utils"; +import 'angular-dragdrop'; +import {LeftPaletteLoaderService} from "../../../services/components/utils/composition-left-palette-service"; + +interface IPaletteScope { + components:Array<LeftPaletteComponent>; + currentComponent:Component; + model:any; + displaySortedCategories:any; + expandedSection:string; + dragElement:JQuery; + dragbleNode:{ + event:JQueryEventObject, + components:LeftPaletteComponent, + ui:any + } + + sectionClick:(section:string)=>void; + searchComponents:(searchText:string)=>void; + onMouseOver:(displayComponent:LeftPaletteComponent)=>void; + onMouseOut:(displayComponent:LeftPaletteComponent)=>void; + dragStartCallback:(event:JQueryEventObject, ui, displayComponent:LeftPaletteComponent)=>void; + dragStopCallback:()=>void; + onDragCallback:(event:JQueryEventObject) => void; + + setElementTemplate:(e:JQueryEventObject)=>void; + + isOnDrag:boolean; + isDragable:boolean; + isLoading:boolean; + isViewOnly:boolean; +} + +export class Palette implements ng.IDirective { + constructor(private $log:ng.ILogService, + private LeftPaletteLoaderService: LeftPaletteLoaderService, + private sdcConfig, + private ComponentFactory, + private ComponentInstanceFactory:ComponentInstanceFactory, + private NodesFactory:NodesFactory, + private CompositionGraphGeneralUtils:CompositionGraphGeneralUtils, + private EventListenerService:EventListenerService, + private sdcMenu:IAppMenu, + private ModalsHandler:ModalsHandler) { + + } + + private fetchingComponentFromServer:boolean = false; + private nodeHtmlSubstitute:JQuery; + + scope = { + currentComponent: '=', + isViewOnly: '=', + isLoading: '=' + }; + restrict = 'E'; + template = require('./palette.html'); + + link = (scope:IPaletteScope, el:JQuery) => { + this.nodeHtmlSubstitute = $('<div class="node-substitute"><span></span><img /></div>'); + el.append(this.nodeHtmlSubstitute); + this.registerEventListenerForLeftPalette(scope); + // this.LeftPaletteLoaderService.loadLeftPanel(scope.currentComponent.componentType); + + this.initComponents(scope); + this.initEvents(scope); + this.initDragEvents(scope); + this._initExpandedSection(scope, ''); + el.on('$destroy', ()=> { + //remove listener of download event + this.unRegisterEventListenerForLeftPalette(scope); + }); + }; + + private registerEventListenerForLeftPalette = (scope:IPaletteScope):void => { + if (scope.currentComponent.isResource()) { + this.EventListenerService.registerObserverCallback(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT, () => { + this.updateLeftPanelDisplay(scope); + }); + } + if (scope.currentComponent.isService()) { + this.EventListenerService.registerObserverCallback(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT, () => { + this.updateLeftPanelDisplay(scope); + }); + } + if (scope.currentComponent.isProduct()) { + this.EventListenerService.registerObserverCallback(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT, () => { + this.updateLeftPanelDisplay(scope); + }); + } + }; + + private unRegisterEventListenerForLeftPalette = (scope:IPaletteScope):void => { + if (scope.currentComponent.isResource()) { + this.EventListenerService.unRegisterObserver(EVENTS.RESOURCE_LEFT_PALETTE_UPDATE_EVENT); + } + if (scope.currentComponent.isService()) { + this.EventListenerService.unRegisterObserver(EVENTS.SERVICE_LEFT_PALETTE_UPDATE_EVENT); + } + if (scope.currentComponent.isProduct()) { + this.EventListenerService.unRegisterObserver(EVENTS.PRODUCT_LEFT_PALETTE_UPDATE_EVENT); + } + }; + + private leftPanelResourceFilter(resourcesNotAbstract:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):Array<LeftPaletteComponent> { + let filterResources = _.filter(resourcesNotAbstract, (component) => { + return resourceFilterTypes.indexOf(component.getComponentSubType()) > -1; + }); + return filterResources; + } + + private initLeftPanel(leftPanelComponents:Array<LeftPaletteComponent>, resourceFilterTypes:Array<string>):LeftPanelModel { + let leftPanelModel = new LeftPanelModel(); + + if (resourceFilterTypes && resourceFilterTypes.length) { + leftPanelComponents = this.leftPanelResourceFilter(leftPanelComponents, resourceFilterTypes); + } + leftPanelModel.numberOfElements = leftPanelComponents && leftPanelComponents.length || 0; + + if (leftPanelComponents && leftPanelComponents.length) { + + let categories:any = _.groupBy(leftPanelComponents, 'mainCategory'); + for (let category in categories) + categories[category] = _.groupBy(categories[category], 'subCategory'); + + leftPanelModel.sortedCategories = categories; + } + return leftPanelModel; + } + + + private initEvents(scope:IPaletteScope) { + /** + * + * @param section + */ + scope.sectionClick = (section:string) => { + if (section === scope.expandedSection) { + scope.expandedSection = ''; + return; + } + scope.expandedSection = section; + }; + + scope.onMouseOver = (displayComponent:LeftPaletteComponent) => { + if (scope.isOnDrag) { + return; + } + scope.isOnDrag = true; + + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_IN, displayComponent); + this.$log.debug('palette::onMouseOver:: fired'); + // + // if (this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.containsKey(displayComponent.uniqueId)) { + // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} found in cache`); + // let cacheComponent:Component = this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.getValue(displayComponent.uniqueId); + // + // //TODO: Danny: fire event to highlight matching nodes + // //showMatchingNodes(cacheComponent); + // return; + // } + // + // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} not found in cache, initiating server get`); + // // This will bring the component from the server including requirements and capabilities + // // Check that we do not fetch many times, because only in the success we add the component to componentRequirementsAndCapabilitiesCaching + // if (this.fetchingComponentFromServer) { + // return; + // } + // + // this.fetchingComponentFromServer = true; + // this.ComponentFactory.getComponentFromServer(displayComponent.componentSubType, displayComponent.uniqueId) + // .then((component:Component) => { + // this.$log.debug(`palette::onMouseOver:: component id ${displayComponent.uniqueId} fetch success`); + // // this.LeftPaletteLoaderService.updateSpecificComponentLeftPalette(component, scope.currentComponent.componentType); + // this.CompositionGraphGeneralUtils.componentRequirementsAndCapabilitiesCaching.setValue(component.uniqueId, component); + // this.fetchingComponentFromServer = false; + // + // //TODO: Danny: fire event to highlight matching nodes + // //showMatchingNodes(component); + // }) + // .catch(() => { + // this.$log.debug('palette::onMouseOver:: component id fetch error'); + // this.fetchingComponentFromServer = false; + // }); + + + }; + + scope.onMouseOut = () => { + scope.isOnDrag = false; + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_HOVER_OUT); + } + } + + private initComponents(scope:IPaletteScope) { + scope.searchComponents = (searchText:any):void => { + scope.displaySortedCategories = this._searchComponents(searchText, scope.model.sortedCategories); + this._initExpandedSection(scope, searchText); + }; + + scope.isDragable = scope.currentComponent.isComplex(); + this.updateLeftPanelDisplay(scope); + } + + private updateLeftPanelDisplay(scope:IPaletteScope) { + let entityType:string = scope.currentComponent.componentType.toLowerCase(); + let resourceFilterTypes:Array<string> = this.sdcConfig.resourceTypesFilter[entityType]; + scope.components = this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType); + scope.model = this.initLeftPanel(scope.components, resourceFilterTypes); + scope.displaySortedCategories = angular.copy(scope.model.sortedCategories); + }; + + private _initExpandedSection(scope:IPaletteScope, searchText:string):void { + if (searchText == '') { + let isContainingCategory:boolean = false; + let categoryToExpand:string; + if (scope.currentComponent && scope.currentComponent.categories && scope.currentComponent.categories[0]) { + categoryToExpand = this.sdcMenu.categoriesDictionary[scope.currentComponent.categories[0].name]; + for (let category in scope.model.sortedCategories) { + if (categoryToExpand == category) { + isContainingCategory = true; + break; + } + } + } + isContainingCategory ? scope.expandedSection = categoryToExpand : scope.expandedSection = 'Generic'; + } + else { + scope.expandedSection = Object.keys(scope.displaySortedCategories).sort()[0]; + } + }; + + private initDragEvents(scope:IPaletteScope) { + scope.dragStartCallback = (event:IDragDropEvent, ui, displayComponent:LeftPaletteComponent):void => { + if (scope.isLoading || !scope.isDragable || scope.isViewOnly) { + return; + } + + let component = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType), (componentFullData:LeftPaletteComponent) => { + return displayComponent.uniqueId === componentFullData.uniqueId; + }); + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_START, scope.dragElement, component); + + scope.isOnDrag = true; + + // this.graphUtils.showMatchingNodes(component, myDiagram, scope.sdcConfig.imagesPath); + // document.addEventListener('mousemove', moveOnDocument); + event.dataTransfer.component = component; + }; + + scope.dragStopCallback = () => { + scope.isOnDrag = false; + }; + + scope.onDragCallback = (event:IDragDropEvent):void => { + this.EventListenerService.notifyObservers(GRAPH_EVENTS.ON_PALETTE_COMPONENT_DRAG_ACTION, event); + }; + scope.setElementTemplate = (e) => { + let dragComponent:LeftPaletteComponent = _.find(this.LeftPaletteLoaderService.getLeftPanelComponentsForDisplay(scope.currentComponent.componentType), + (fullComponent:LeftPaletteComponent) => { + return (<any>angular.element(e.currentTarget).scope()).component.uniqueId === fullComponent.uniqueId; + }); + let componentInstance:ComponentInstance = this.ComponentInstanceFactory.createComponentInstanceFromComponent(dragComponent); + let node:CompositionCiNodeBase = this.NodesFactory.createNode(componentInstance); + + // myDiagram.dragFromPalette = node; + this.nodeHtmlSubstitute.find("img").attr('src', node.img); + scope.dragElement = this.nodeHtmlSubstitute.clone().show(); + + return scope.dragElement; + }; + } + + private _searchComponents = (searchText:string, categories:any):void => { + let displaySortedCategories = angular.copy(categories); + if (searchText != '') { + angular.forEach(categories, function (category:any, categoryKey) { + + angular.forEach(category, function (subcategory:Array<LeftPaletteComponent>, subcategoryKey) { + let filteredResources = []; + angular.forEach(subcategory, function (component:LeftPaletteComponent) { + + let resourceFilterTerm:string = component.searchFilterTerms; + if (resourceFilterTerm.indexOf(searchText.toLowerCase()) >= 0) { + filteredResources.push(component); + } + }); + if (filteredResources.length > 0) { + displaySortedCategories[categoryKey][subcategoryKey] = filteredResources; + } + else { + delete displaySortedCategories[categoryKey][subcategoryKey]; + } + }); + if (!(Object.keys(displaySortedCategories[categoryKey]).length > 0)) { + delete displaySortedCategories[categoryKey]; + } + + }); + } + return displaySortedCategories; + }; + + public static factory = ($log, + LeftPaletteLoaderService, + sdcConfig, + ComponentFactory, + ComponentInstanceFactory, + NodesFactory, + CompositionGraphGeneralUtils, + EventListenerService, + sdcMenu, + ModalsHandler) => { + return new Palette($log, + LeftPaletteLoaderService, + sdcConfig, + ComponentFactory, + ComponentInstanceFactory, + NodesFactory, + CompositionGraphGeneralUtils, + EventListenerService, + sdcMenu, + ModalsHandler); + }; +} + +Palette.factory.$inject = [ + '$log', + 'LeftPaletteLoaderService', + 'sdcConfig', + 'ComponentFactory', + 'ComponentInstanceFactory', + 'NodesFactory', + 'CompositionGraphGeneralUtils', + 'EventListenerService', + 'sdcMenu', + 'ModalsHandler' +]; |