import { GlobalG6 , registerBehavior , registerEdge , registerLayout , registerNode , utils , ViserGraph } from 'viser-graph' ; import Vue , { ComponentOptions } from 'vue' ; import { cleanUndefined , isAllUndefined , normalizeProps , oneObjectMoreArray } from './utils' ; import { eventProps , graphProps , props } from './typed' ; const rootCharts = [ 'v-graph' ] ; const baseChartComponent = { data ( ) { return { isViser : true , jsonForD2 : { } , } ; } , props , methods : { checkIsContainer ( componentInstance ) { if ( ( componentInstance as any ) . isViser && rootCharts . indexOf ( ( ( componentInstance as any ) . $options as any ) . _componentTag ) > - 1 ) { return true ; } else { return false ; } } , findNearestRootComponent ( componentInstance ) { if ( this . checkIsContainer ( componentInstance ) ) { return componentInstance ; } if ( componentInstance . $parent ) { return this . findNearestRootComponent ( componentInstance . $parent ) ; } return null ; } , createRootD2Json ( ) { const d2Json = { graph : { container : this . $el , ... cleanUndefined ( normalizeProps ( this . _props , graphProps ) ) , } , events : cleanUndefined ( normalizeProps ( this . _props , eventProps ) ) , data : this . _props . data , ... this . jsonForD2 , } ; return d2Json ; } , freshChart ( isUpdate ) { if ( rootCharts . indexOf ( this . $options . _componentTag ) > - 1 ) { const d2Json = this . createRootD2Json ( ) ; if ( ! isUpdate || ! this . chart ) { this . chart = new ViserGraph ( d2Json ) ; this . chart . render ( ) ; } else { this . chart . reRender ( d2Json ) ; } } else { const nearestRootComponent = this . findNearestRootComponent ( this . $parent ) ; if ( ! nearestRootComponent ) { throw Error ( `${ this . $options . _componentTag } must be wrapped into v-chart` ) ; } const rechartName = this . $options . _componentTag . replace ( /-/g , '' ) . slice ( 1 ) ; if ( isAllUndefined ( this . _props ) ) { nearestRootComponent . jsonForD2 [ rechartName ] = true ; } else { oneObjectMoreArray ( nearestRootComponent . jsonForD2 , rechartName , { ... cleanUndefined ( normalizeProps ( this . _props ) ) , componentId : this . _uid , } ) ; } } } , } , created ( ) { } , mounted ( ) { ( this as any ) . freshChart ( false ) ; } , updated ( ) { ( this as any ) . freshChart ( true ) ; } , render ( createElement ) { const isContainer = ( this as any ) . checkIsContainer ( this ) ; if ( isContainer ) { return createElement ( 'div' , null , ( this as any ) . $slots . default ) ; } const props = cleanUndefined ( normalizeProps ( ( this as any ) . _props ) ) ; return createElement ( 'div' , { style : { display : 'none' } } , Object . keys ( props ) . map ( ( key ) => { return '' + key + ':' + JSON . stringify ( props [ key ] ) ; } ) ) ; } , } as ComponentOptions < any > ; export default { install : ( Vue , options ) => { Vue . component ( 'v-graph' , baseChartComponent ) ; Vue . component ( 'v-zoom' , baseChartComponent ) ; Vue . component ( 'v-node' , baseChartComponent ) ; Vue . component ( 'v-edge' , baseChartComponent ) ; } , } ; export { GlobalG6 , registerBehavior , registerEdge , registerLayout , registerNode , utils , } ;