import { GPath } from '@/ReactNode/Shape/common' ; type SizeOfShape = { type : string ; width : number ; height : number ; } ; const XYPath = [ 'L' , 'M' , 'C' , 'S' , 'Q' , 'T' , 'V' ] ; const xyPath = XYPath . map ( ( e ) => e . toLocaleLowerCase ( ) ) ; const convertPathToPoints = ( path ) => { const points = [ ] ; path . forEach ( function ( seg ) { const [ command , ... numbers ] = seg ; let [ lastPoint ] = points . slice ( - 1 ) ; if ( ! lastPoint ) { lastPoint = [ 0 , 0 ] ; } if ( XYPath . includes ( command ) ) { const [ x , y ] = numbers . slice ( - 2 ) ; points . push ( [ x , y ] ) ; } else if ( xyPath . includes ( command ) ) { const [ x , y ] = numbers . slice ( - 2 ) ; points . push ( [ x + lastPoint [ 0 ] , y + lastPoint [ 1 ] ] ) ; } else if ( command === 'H' ) { const [ x ] = numbers . slice ( - 1 ) ; points . push ( [ x , lastPoint [ 0 ] ] ) ; } else if ( command === 'h' ) { const [ x ] = numbers . slice ( - 1 ) ; points . push ( [ x + lastPoint [ 0 ] , lastPoint [ 1 ] ] ) ; } else if ( command === 'V' ) { const [ y ] = numbers . slice ( - 1 ) ; points . push ( [ lastPoint [ 0 ] , y ] ) ; } else if ( command === 'v' ) { const [ y ] = numbers . slice ( - 1 ) ; points . push ( [ lastPoint [ 0 ] , lastPoint [ 1 ] + y ] ) ; } } ) ; return points ; } ; const getPointsSize = ( points ) => { let [ xmax , ymax , xmin , ymin ] = [ 0 , 0 , 0 , 0 ] ; points . forEach ( ( [ x , y ] ) => { if ( x > xmax ) { xmax = x ; } if ( y > ymax ) { ymax = y ; } if ( x < xmin ) { xmin = x ; } if ( y < ymin ) { ymin = y ; } } ) ; return [ xmax - xmin , ymax - ymin ] ; } ; const canvasRef = { } ; const getCanvasContext = ( ) => { let context ; if ( canvasRef . context ) { context = canvasRef . context ; } else { const canvas = document ?. createElement ( 'canvas' ) ; if ( ! canvas ) { return null ; } context = canvas . getContext ( '2d' ) ; if ( context ) { canvasRef . canvas = canvas ; canvasRef . context = context ; } } return context ; } ; const getTextSize = ( text , attrs ) => { const textArr = text . split ( '\n' ) ; const height = ( attrs . fontSize || 12 ) * textArr . length * ( attrs . lineHeight || 1 ) ; const context = getCanvasContext ( ) ; if ( context ) { context . font = `${ attrs . fontWeight || 'normal' } ${ attrs . fontSize || 12 }px ${ attrs . fontFamily || '' }` ; let width = 0 ; for ( let i = 0 ; i < textArr . length ; i += 1 ) { width = Math . max ( width , context . measureText ( textArr [ i ] ) . width ) ; } return [ ( width * ( attrs . fontSize || 12 ) ) / 10 , height ] ; } return [ Math . max . apply ( Math , textArr . map ( ( str ) => str . length * ( attrs . fontSize || 12 ) ) ) , height , ] ; } ; const getSizeOfShape = ( type , attrs ) : SizeOfShape => { switch ( type ) { case 'rect' : case 'image' : return { type , width : Number ( attrs . width ) || 0 , height : Number ( attrs . height ) || 0 , } ; case 'circle' : case 'marker' : return { type , width : ( attrs . r || 0 ) * 2 , height : ( attrs . r || 0 ) * 2 , } ; case 'ellipse' : return { type , width : ( attrs . rx || 0 ) * 2 , height : ( attrs . ry || 0 ) * 2 , } ; case 'path' : const pathSize = getPointsSize ( convertPathToPoints ( attrs . path || [ ] ) ) ; return { type , width : pathSize [ 0 ] , height : pathSize [ 1 ] , } ; case 'polygon' : const polygonSize = getPointsSize ( attrs . points || [ ] ) ; return { type , width : polygonSize [ 0 ] , height : polygonSize [ 1 ] , } ; case 'text' : const textSize = getTextSize ( attrs . text || '' , attrs ) ; return { type , width : textSize [ 0 ] , height : textSize [ 1 ] , } ; default : return { type , width : 0 , height : 0 , } ; } } ; export default getSizeOfShape ;