import cytoscape from 'cytoscape' ; import $ from "jquery" ; import 'jquery-ui-dist/jquery-ui' ; import EditorActionsManager from "../managers/EditorActionsManager" ; export default class DragDropNodeAddPlugin { pathwayHandler : ( pathwayName : string ) => void ; private cy : any ; private editor : EditorActionsManager ; constructor ( editor , cy , pathwayHandler ) { this . editor = editor ; this . cy = cy ; this . pathwayHandler = pathwayHandler ; this . initNodeAdd ( ) ; } initNodeAdd ( ) { var nodeAddClass = this ; var defaults = { height : 30 , width : 30 , padding : 5 , backgroundColorDiv : '#fbfbfb' , borderColorDiv : '#fff' , borderWidthDiv : '0px' , borderRadiusDiv : '5px' , icon : '' , nodeParams : function ( ) { return { } ; } } ; const self = this ; $ . fn . cytoscapeNodeadd = function ( params ) { var options = $ . extend ( true , { } , defaults , params ) ; var fn = params ; var functions = { destroy : function ( ) { var $this = $ ( this ) ; $this . find ( ".ui-cytoscape-nodeadd" ) . remove ( ) ; } , init : function ( ) { return $ ( this ) . each ( function ( ) { var components = options . components ; for ( const component of components ) { var dragContainer = component . container ; var $nodeadd = $ ( '<div class="ui-cytoscape-nodeadd"></div>' ) ; dragContainer . append ( $nodeadd ) ; var $nodeDragHandle = $ ( '<div class="ui-cytoscape-nodeadd-nodediv"> \
                                                <span id="ui-cytoscape-nodeadd-icon" class="draggable" nodeType="' + component . nodeType + '">\
                                                  <img src="' + component . icon + '"</img>\
                                                </span>\
                                              </div>' ) ; $nodeadd . append ( $nodeDragHandle ) ; $nodeDragHandle . bind ( "mousedown" , function ( e ) { e . stopPropagation ( ) ; e . preventDefault ( ) ; } ) ; dragContainer . find ( ".ui-cytoscape-nodeadd-nodediv" ) . css ( { background : options . backgroundColorDiv , border : options . borderWidthDiv + ' solid ' + options . borderColorDiv , 'border-radius' : options . borderRadiusDiv } ) ; dragContainer . find ( "#ui-cytoscape-nodeadd-icon" ) . draggable ( { helper : "clone" , cursor : "pointer" } ) ; } var $container = $ ( this ) ; $container . droppable ( { activeClass : "ui-state-highlight" , drop : function ( event , ui ) { $container . removeClass ( "ui-state-highlight" ) ; var currentOffset = $container . offset ( ) ; var relX = event . pageX - currentOffset . left ; var relY = event . pageY - currentOffset . top ; var nodeType = $ ( ui . helper ) . attr ( 'nodeType' ) . toUpperCase ( ) ; var cy = nodeAddClass . cy ; var nodeMap = { } ; var parentMap = { } ; cy . nodes ( ) . forEach ( function ( node ) { var nodeBbox = node . renderedBoundingBox ( ) ; if ( ( relX <= nodeBbox . x2 && relX >= nodeBbox . x1 ) && ( relY <= nodeBbox . y2 && relY >= nodeBbox . y1 ) && node . data ( ) . type != 'GENE' ) { if ( node . children ( ) . length > 0 ) { parentMap [ node . id ( ) ] = true ; } if ( parentMap [ node . _private . data . parent ] ) { delete nodeMap [ node . _private . data . parent ] ; } nodeMap [ node . id ( ) ] = node ; } } ) ; var parent = nodeMap [ Object . keys ( nodeMap ) [ 0 ] ] ; var nodeData = { w : "0" , h : "100" , parent : 0 , type : nodeType , name : 'New ' + $ ( ui . helper ) . attr ( 'nodeType' ) } ; if ( parent ) { if ( parent . data ( ) . type == "FAMILY" || parent . data ( ) . type == "COMPLEX" ) { if ( nodeType != "COMPARTMENT" && nodeType != "PROCESS" ) { nodeData . parent = parent . id ( ) ; } } else { nodeData . parent = parent . id ( ) ; } } if ( nodeType === "PROCESS" ) { nodeData . w = "100" ; nodeData . h = "35" ; } else { nodeData . w = "150" ; nodeData . h = "52" ; } relX = relX / cy . zoom ( ) + cy . extent ( ) . x1 ; relY = relY / cy . zoom ( ) + cy . extent ( ) . y1 ; nodeAddClass . editor . addNode ( nodeData , { x : relX , y : relY } ) ; self . pathwayHandler ( "Additional Pathway" ) ; } } ) ; } ) ; } } ; if ( functions [ fn ] ) { return functions [ fn ] . apply ( this , Array . prototype . slice . call ( arguments , 1 ) ) ; } else if ( typeof fn == 'object' || ! fn ) { return functions . init . apply ( this , arguments ) ; } else { $ . error ( "No such function `" + fn + "` for jquery.cytoscapenodeadd" ) ; } return $ ( this ) ; } ; $ . fn . cynodeadd = $ . fn . cytoscapeNodeadd ; try { cytoscape ( 'core' , 'nodeadd' , function ( options ) { $ ( this . container ( ) ) . cytoscapeNodeadd ( options ) ; } ) ; } catch ( err ) { console . log ( err ) ; } } }