import { Box , Container , QuerySelector , SVG } from '@svgdotjs/svg.js' ; import { Alignment , GraphcisElement , Renderer } from '../renderer' ; import { constants } from '../../constants' ; import { isNode } from '../../utils/is-node' ; export class SvgJsRenderer extends Renderer { private svg : Container ; constructor ( container ) { super ( container ) ; const { width } = constants ; const height = 0 ; if ( isNode ( ) ) { this . svg = SVG ( container ) as Container ; } else { this . svg = SVG ( ) . addTo ( container ) ; } this . svg . attr ( 'preserveAspectRatio' , 'xMidYMid meet' ) . viewbox ( 0 , 0 , width , height ) ; } line ( fromX , fromY , toX , toY , strokeWidth , color ) { this . svg . line ( fromX , fromY , toX , toY ) . stroke ( { color , width : strokeWidth } ) ; } size ( width , height ) { this . svg . viewbox ( 0 , 0 , width , height ) ; } clear ( ) { this . svg . children ( ) . forEach ( ( child ) => child . remove ( ) ) ; } remove ( ) { this . svg . remove ( ) ; } background ( color ) { this . svg . rect ( ) . size ( '100%' , '100%' ) . fill ( color ) ; } text ( text , x , y , fontSize , color , fontFamily , alignment , classes ? , plain ? ) { let element ; if ( plain ) { element = this . svg . plain ( text ) . attr ( { x , y , } ) . font ( { family : fontFamily , size : fontSize , anchor : alignment , 'dominant-baseline' : 'central' , } ) . fill ( color ) . addClass ( Renderer . toClassName ( classes ) ) ; } else { element = this . svg . text ( text ) . move ( x , y ) . font ( { family : fontFamily , size : fontSize , anchor : alignment , } ) . fill ( color ) . addClass ( Renderer . toClassName ( classes ) ) ; } return SvgJsRenderer . boxToElement ( element . bbox ( ) , element . remove . bind ( element ) ) ; } circle ( x , y , diameter , strokeWidth , strokeColor , fill ? , classes ? ) { const element = this . svg . circle ( diameter ) . move ( x , y ) . fill ( fill || 'none' ) . stroke ( { color : strokeColor , width : strokeWidth , } ) . addClass ( Renderer . toClassName ( classes ) ) ; return SvgJsRenderer . boxToElement ( element . bbox ( ) , element . remove . bind ( element ) ) ; } rect ( x , y , width , height , strokeWidth , strokeColor , classes ? , fill ? , radius ? ) { const element = this . svg . rect ( width , height ) . move ( x , y ) . fill ( fill || 'none' ) . stroke ( { width : strokeWidth , color : strokeColor , } ) . radius ( radius || 0 ) . addClass ( Renderer . toClassName ( classes ) ) ; return SvgJsRenderer . boxToElement ( element . bbox ( ) , element . remove . bind ( element ) ) ; } triangle ( x , y , size , strokeWidth , strokeColor , classes ? , fill ? ) { const element = this . svg . path ( Renderer . trianglePath ( x , y , size ) ) . move ( x , y ) . fill ( fill || 'none' ) . stroke ( { width : strokeWidth , color : strokeColor , } ) . addClass ( Renderer . toClassName ( classes ) ) ; return SvgJsRenderer . boxToElement ( element . bbox ( ) , element . remove . bind ( element ) ) ; } pentagon ( x , y , size , strokeWidth , strokeColor , fill , classes ? ) { return this . ngon ( x , y , size , strokeWidth , strokeColor , fill , 5 , classes ) ; } private ngon ( x , y , size , strokeWidth , strokeColor , fill , edges , classes ? ) { const element = this . svg . path ( Renderer . ngonPath ( x , y , size , edges ) ) . move ( x , y ) . fill ( fill || 'none' ) . stroke ( { width : strokeWidth , color : strokeColor , } ) . addClass ( Renderer . toClassName ( classes ) ) ; return SvgJsRenderer . boxToElement ( element . bbox ( ) , element . remove . bind ( element ) ) ; } private static boxToElement ( box , remove ) { return { width : box . width , height : box . height , x : box . x , y : box . y , remove , } ; } } export default SvgJsRenderer ;