import { IGraph } from '@antv/g6/lib/interface/graph' ; import { INode , IEdge } from '@antv/g6/lib/interface/item' ; import { G6Event , G6KeyboardEvent , EdgeData , NodeData } from '../types' ; export default { getDefaultCfg ( ) { return { multiple : true , keyCode : 18 , } ; } , getEvents ( ) { return { 'node:click' : 'onClick' , 'edge:click' : 'onEdgeClick' , keyup : 'onKeyUp' , keydown : 'onKeyDown' , 'canvas:click' : 'onCanvasClick' , } ; } , clearStates ( ) { const { graph } = this as any ; graph . getNodes ( ) . forEach ( ( node ) => { graph . clearItemStates ( node , [ 'selected' , 'highlight.source' , 'highlight.target' , 'highlight.dark' , 'highlight.light' , ] ) ; } ) ; graph . getEdges ( ) . forEach ( ( edge ) => { graph . clearItemStates ( edge , [ 'selected' ] ) ; } ) ; } , onCanvasClick ( ) { this . clearStates ( ) ; } , onEdgeClick ( e ) { const { graph } = this as any ; const currentEdge = e . item ; const sourceNode = currentEdge . get ( 'source' ) ; const targetNode = currentEdge . get ( 'target' ) ; this . clearStates ( ) ; currentEdge . toFront ( ) ; graph . getNodes ( ) . forEach ( ( node ) => { const id = node . get ( 'id' ) ; if ( id === sourceNode . get ( 'id' ) || id === targetNode . get ( 'id' ) ) { graph . setItemState ( sourceNode , 'highlight.source' , true ) ; graph . setItemState ( targetNode , 'highlight.target' , true ) ; graph . setItemState ( node , 'highlight.dark' , false ) ; graph . setItemState ( node , 'highlight.light' , true ) ; graph . setItemState ( currentEdge , 'selected' , true ) ; } else { graph . setItemState ( node , 'highlight.light' , false ) ; graph . setItemState ( node , 'highlight.dark' , true ) ; } } ) ; } , process ( node ) { const { graph } = this as any ; /** process Edges */ const allEdges = graph . getEdges ( ) ; const relativeEdges = node . getEdges ( ) ; const relativeEdgesIds = relativeEdges . map ( ( edge ) => edge . get ( 'id' ) ) ; const unRelativeEdges = [ ] ; const relativeNodeSet = new Set ( [ node ] ) ; allEdges . forEach ( ( edge ) => { const id = edge . get ( 'id' ) ; const source = edge . get ( 'source' ) ; const target = edge . get ( 'target' ) ; if ( relativeEdgesIds . indexOf ( id ) !== - 1 ) { relativeNodeSet . add ( source ) ; relativeNodeSet . add ( target ) ; } else { unRelativeEdges . push ( edge ) ; } } ) ; /** process Nodes */ const allNodes = graph . getNodes ( ) ; const relativeNodes = [ ... relativeNodeSet ] ; const relativeNodesIds = relativeNodes . map ( ( item ) => item . get ( 'id' ) ) ; const unRelativeNodes = allNodes . filter ( ( item ) => { return relativeNodesIds . indexOf ( item . get ( 'id' ) ) === - 1 ; } ) ; return { relativeEdges , unRelativeEdges , relativeNodes , unRelativeNodes , } ; } , onClick ( e ) { const { keydown , graph } = this as any ; const currentNode = e . item ; const { relativeEdges , unRelativeEdges , relativeNodes , unRelativeNodes , } = this . process ( currentNode as INode ) ; if ( ! keydown ) { this . clearStates ( ) ; relativeNodes . forEach ( ( node ) => { if ( currentNode . get ( 'id' ) === node . get ( 'id' ) ) { graph . setItemState ( currentNode , 'selected' , true ) ; } else { graph . setItemState ( node , 'highlight.dark' , false ) ; graph . setItemState ( node , 'highlight.light' , true ) ; } } ) ; unRelativeNodes . forEach ( ( node ) => { graph . setItemState ( node , 'highlight.light' , false ) ; graph . setItemState ( node , 'highlight.dark' , true ) ; } ) ; relativeEdges . forEach ( ( edge ) => { edge . toFront ( ) ; graph . setItemState ( edge , 'highlight.dark' , false ) ; graph . setItemState ( edge , 'highlight.light' , true ) ; } ) ; unRelativeEdges . forEach ( ( edge ) => { edge . toBack ( ) ; graph . setItemState ( edge , 'highlight.light' , false ) ; graph . setItemState ( edge , 'highlight.dark' , true ) ; } ) ; } else { relativeEdges . forEach ( ( edge ) => { graph . setItemState ( edge , 'highlight.dark' , false ) ; graph . setItemState ( edge , 'highlight.light' , true ) ; } ) ; graph . setItemState ( currentNode , 'highlight.dark' , false ) ; graph . setItemState ( currentNode , 'highlight.light' , true ) ; } } , onKeyDown ( e ) { const ctx = this as any ; const { keyCode } = this as any ; const code = e . keyCode || e . which ; if ( code === keyCode ) { ctx . keydown = true ; } else { ctx . keydown = false ; } } , onKeyUp ( ) { const ctx = this as any ; ctx . keydown = false ; } , } ;