import { Node , NodeStyle , NodeShapeFunction } from '../../types' ; import iconFont from '../../icons/iconFont' ; const defaultStyle = { nodeSize : 20 , primaryColor : '#9900EF' , fontSize : 12 , fontColor : '#3b3b3b' , dark : '#eee' , fontFamily : 'graphin' , } ; const renderNodeShape = ( node ) => { const mergedStyle = { ... defaultStyle , ... node . style , } ; const { primaryColor , nodeSize , fontColor , fontSize , dark , fontFamily , icon , } = mergedStyle as NodeStyle ; const iconSize = nodeSize ; const fontPosition = nodeSize ! * 1.4 ; return { type : 'CircleNode' , shapeComponents : [ { type : 'circle' , attrs : { id : 'circle-container' , x : 0 , y : 0 , r : nodeSize , fill : '#fff' , stroke : primaryColor , cursor : 'pointer' , lineWidth : 2 , } , } , { type : 'text' , attrs : { id : 'node-icon' , x : 0 , y : 0 , fontSize : iconSize , fill : primaryColor , text : iconFont ( icon || node . data . type || '' , fontFamily ! ) , fontFamily , textAlign : 'center' , textBaseline : 'middle' , cursor : 'pointer' , } , } , { type : 'text' , attrs : { id : 'text-desc' , text : node . label || node . data . label , x : 0 , y : fontPosition , cursor : 'pointer' , fontSize , fill : fontColor , fontWeight : 'lighter' , fontFamily : 'Courier New' , textAlign : 'center' , textBaseline : 'top' , } , } , ] , state : { selected : { 'circle-container' : { stroke : primaryColor , animate : { attrs : { lineWidth : 6 , shadowOffsetX : 0 , shadowOffsetY : 0 , shadowBlur : 2 , shadowColor : '#fff' , repeat : false , } , duration : 200 , easing : 'easeCubic' , callback : null , delay : 0 , } , } , } , 'highlight.dark' : { 'circle-container' : { fill : dark , stroke : dark , } , 'node-icon' : { fill : dark , } , 'text-desc' : { fill : dark , } , } , } , } ; } ; export default renderNodeShape ;