import * as React from 'react' ; import { Axis } from '../../types' ; const getOffset = ( position ) => ( position >= 0 ? 0 : - position ) ; const getSize = ( position , delta ) => ( position >= 0 ? position + delta : - position ) ; export class Root extends React . PureComponent < Axis . RootProps , Axis . RootState > { ref = React . createRef < SVGGElement > ( ) ; constructor ( props ) { super ( props ) ; this . state = { x : 0 , y : 0 , } ; this . adjust = this . adjust . bind ( this ) ; } componentDidMount ( ) { this . setState ( this . adjust ) ; } componentDidUpdate ( ) { this . setState ( this . adjust ) ; } adjust ( _ , { dx , dy , onSizeChange } ) { const bbox = this . ref . current ! . getBBox ( ) ; const width = dx ? bbox . width : getSize ( bbox . x , bbox . width ) ; const height = dy ? bbox . height : getSize ( bbox . y , bbox . height ) ; const x = dx ? 0 : getOffset ( bbox . x ) ; const y = dy ? 0 : getOffset ( bbox . y ) ; onSizeChange ( { width , height } ) ; return { x , y } ; } render ( ) { const { children , onSizeChange , dx , dy , ... restProps } = this . props ; const { x , y } = this . state ; return ( < g ref = { this . ref } transform = { `translate(${ x } ${ y })` } { ... restProps } > { children } < /g>); } }