import G6 , { Graph as GraphType } from '@antv/g6' ; import insertCss from 'insert-css' ; import { GraphinProps , ExtendedGraphOptions } from '../types' ; export interface BehaviorModeItem { type : string ; [ key ] : string | number | boolean | undefined ; } interface BehaviorsMode { [ mode ] : ( BehaviorModeItem | string ) [ ] ; } export const initGraphAfterRender = ( props , graphDOM , instance ) => { const { options = { } } = props ; const { pan , zoom } = options ; if ( pan ) instance . moveTo ( pan . x , pan . y ) ; if ( zoom ) instance . zoomTo ( zoom , pan ! ) ; } ; insertCss ( `
  .g6-minimap-container {
    border: 1px solid #e2e2e2;
    position: absolute !important;
    bottom: 16px;
    left: 16px;
    background: #FFFFFF;
    overflow: hidden;
  }
  .g6-minimap-viewport {
    border: 2px solid rgb(25, 128, 255);
  }
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #000;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
` ) ; const initGraph = ( props , graphDOM , behaviorsMode ) => { const { clientWidth , clientHeight } = graphDOM ; /** default options  */ const minimap = new G6 . Minimap ( { size : [ 150 , 100 ] , } ) ; const grid = new G6 . Grid ( ) ; const height = clientHeight - 100 ; const defaultOptions = { container : graphDOM , renderer : 'canvas' , width : clientWidth , height : clientHeight , zoom : 1 , minZoom : 0.2 , maxZoom : 10 , animate : true , animateCfg : { onFrame : undefined , duration : 500 , easing : 'easeLinear' , } , plugins : [ minimap , grid ] , modes : { default : [ ] , } , disablePan : false , disableZoom : false , disableDrag : true , wheelSensitivity : 1 , groupByTypes : false , autoPolyEdge : false , autoLoopEdge : true , } ; /** merged options */ const options = { ... defaultOptions , ... ( props . options || { } ) , } ; /** deconstruct g6 Options */ const { disableZoom , disablePan , disableDrag , disableClick , disableBrush , wheelSensitivity , pan , zoom , modes , ... g6Options } = options as ExtendedGraphOptions ; /** Graphin built-in g6 behaviors */ const innerBehaviors = [ { type : 'drag-canvas' , disable : disablePan , options : { } , } , { type : 'zoom-canvas' , disable : disableZoom , options : { sensitivity : wheelSensitivity , } , } , { type : 'brush-select' , disable : disableBrush , options : { trigger : 'shift' , includeEdges : false , } , } , { type : 'click-select' , disable : disableClick , options : { multiple : true , trigger : 'alt' , } , } , { type : 'drag-node' , disable : disableDrag , options : { } , } , { type : 'drag-combo' , options : { } , } , { type : 'collapse-expand-combo' , options : { } , } , ] ; const defaultModes = innerBehaviors . filter ( ( c ) => { return ! c . disable ; } ) . map ( ( c ) => { return { type : c . type , ... c . options , } ; } ) ; const instance = new G6 . Graph ( { ... g6Options , modes : { ... behaviorsMode , default : [ ... defaultModes , ... modes ! . default ! , ... behaviorsMode . default ] , } , } ) ; instance . get ( 'canvas' ) . set ( 'localRefresh' , false ) ; if ( pan ) instance . moveTo ( pan . x , pan . y ) ; if ( zoom ) instance . zoomTo ( zoom , pan ! ) ; return { options : options || defaultOptions , instance , width : clientWidth , height : clientHeight , } ; } ; export default initGraph ;