import React , { FC } from 'react' ; import { Group , Provider , EdgeStyleBuilder , BuildEdgeStyle } from '@rediagram/cdk' ; import { DOT } from '@ts-graphviz/react' ; import { EdgeAttributes } from 'ts-graphviz' ; import { resolveAsset } from '../../assets' ; import { AWSContext , StyleOption } from '../../types' ; import { Context } from '../../contexts/Context' ; import { useAWSContext } from '../../hooks/context' ; const icon = resolveAsset ( 'groups/aws.png' ) ; const colorMap = Object . freeze ( { purple : '#5521B8' , lipstickA : '#BF0152' , lipstickB : '#BE0152' , dell : '#33761B' , tiaMaria : '#CD5111' , monza : '#CA0C22' , governorBay : '#2D2FC1' , greenPea : '#1A6955' , } ) ; const randomColor = ( function * ( ) : Generator < string , void , unknown > { function shuffle ( [ ... arr ] ) { let m = arr . length ; while ( m ) { const i = Math . floor ( Math . random ( ) * m -- ) ; [ arr [ m ] , arr [ i ] ] = [ arr [ i ] , arr [ m ] ] ; } return arr ; } while ( true ) { for ( const color of shuffle ( Object . values ( colorMap ) ) ) { yield color ; } } } ) ( ) ; const defaultStyle = Object . freeze ( { fontsize : 12 , color : '#535B63' , fontcolor : '#232F3D' } ) ; const buildStyle = ( option ) => { let style = { } ; if ( option !== undefined ) { switch ( option . color ) { case 'purple' : style = { color : colorMap . purple , ... style } ; break ; case 'lipstickA' : style = { color : colorMap . lipstickA , ... style } ; break ; case 'lipstickB' : style = { color : colorMap . lipstickB , ... style } ; break ; case 'dell' : style = { color : colorMap . dell , ... style } ; break ; case 'tiaMaria' : style = { color : colorMap . tiaMaria , ... style } ; break ; case 'monza' : style = { color : colorMap . monza , ... style } ; break ; case 'governorBay' : style = { color : colorMap . governorBay , ... style } ; break ; case 'greenPea' : style = { color : colorMap . greenPea , ... style } ; break ; case 'auto' : const { value : color } = randomColor . next ( ) ; if ( color ) { style = { color , ... style } ; } break ; default : break ; } switch ( option . style ) { case 'dashed' : style = { style : 'dashed' , ... style } ; break ; default : break ; } } return { ... defaultStyle , ... style } ; } ; export type AWSProps = { title ? : string ; } & AWSContext ; export const AWS = ( { title , children , ... context } ) => { const prevContext = useAWSContext ( ) ; return ( < Provider name = "aws" > < Context . Provider value = { { ... prevContext , ... context } } > < Group name = "aws" font = { { size : 12 } } label = { { content : ( < DOT . TABLE BORDER = "0" CELLBORDER = "0" CELLSPACING = "0" > < DOT . TR > < DOT . TD WIDTH = "25" HEIGHT = "25" FIXEDSIZE > < DOT . IMG SRC = { icon } /> < /DOT.TD> < DOT . TD > { title ?? 'AWS Cloud' } < /DOT.TD> < /DOT.TR> < /DOT.TABLE>), loc : 't' , just : 'l' , } } border = { { color : '#232F3D' } } margin = { 15 } > < EdgeStyleBuilder build = { buildStyle } > { children } < /EdgeStyleBuilder> < /Group> < /Context.Provider> < /Provider>); } ; export const InvizAWS = ( { children , ... context } ) => { const prevContext = useAWSContext ( ) ; return ( < Provider name = "aws" > < Context . Provider value = { { ... prevContext , ... context } } > < EdgeStyleBuilder build = { buildStyle } > { children } < /EdgeStyleBuilder> < /Context.Provider> < /Provider>); } ;