import { QuerySelector } from '@svgdotjs/svg.js' ; export enum Alignment { LEFT = 'left' , MIDDLE = 'middle' , RIGHT = 'right' } export interface GraphcisElement { width : number ; height : number ; x : number ; y : number ; remove : ( ) => void ; } export abstract class Renderer { protected constructor ( protected container ) { } abstract line ( x1 , y1 , x2 , y2 , strokeWidth , color , classes ? ) ; abstract size ( width , height ) ; abstract clear ( ) ; abstract remove ( ) ; abstract background ( color ) ; abstract text ( text , x , y , fontSize , color , fontFamily , alignment , classes ? , plain ? ) ; abstract circle ( x , y , diameter , strokeWidth , strokeColor , fill ? , classes ? ) ; abstract rect ( x , y , width , height , strokeWidth , strokeColor , classes ? , fill ? , radius ? ) ; abstract triangle ( x , y , size , strokeWidth , strokeColor , classes ? , fill ? ) ; abstract pentagon ( x , y , size , strokeWidth , strokeColor , fill ? , classes ? ) ; protected static trianglePath ( x , y , size ) { return `M${ x + size / 2 } ${ y } L${ x + size } ${ y + size } L${ x } ${ y + size }` ; } protected static ngonPath ( x , y , size , edges ) { let i ; let a ; const degrees = 360 / edges ; const radius = size / 2 ; const points = [ ] ; let curX = x ; let curY = y ; for ( i = 0 ; i < edges ; i += 1 ) { a = i * degrees - 90 ; curX = radius + radius * Math . cos ( ( a * Math . PI ) / 180 ) ; curY = radius + radius * Math . sin ( ( a * Math . PI ) / 180 ) ; points . push ( [ curX , curY ] ) ; } const lines = points . reduce ( ( acc , [ posX , posY ] ) => `${ acc } L${ posX } ${ posY }` , '' ) ; return `M${ curX } ${ curY } ${ lines }` ; } protected static toClassName ( classes ? ) { if ( ! classes ) { return '' ; } return Array . isArray ( classes ) ? classes . join ( ' ' ) : classes ; } }