import React , { CSSProperties } from "react" ; import { calcSuperEllipsePath , getSuperEllipsePathAsDataUri , Preset } from "superellipsejs" ; import useMeasure from 'react-use-measure' ; export interface SuperEllipseProps { r1 ? : number ; r2 ? : number ; p1 ? : number ; p2 ? : number ; } interface Bounds { readonly width : number ; readonly height : number ; } function SuperEllipse ( props ) { const [ ref , bounds ] = useMeasure ( ) ; return < div { ... props } ref = { ref } style = { { ... props . style , ... getMaskStyle ( bounds , props ) } } > { props . children } < /div>; } export function getMaskStyle ( bounds , props ) { const w = bounds . width ; const h = bounds . height ; const { r1 = Preset . iOS . r1 , r2 = Preset . iOS . r2 , p1 , p2 } = props ; const { dataUri } = getSuperEllipsePathAsDataUri ( w , h , p1 !== undefined ? p1 : r1 * Math . min ( w , h ) , p2 !== undefined ? p2 : r2 * Math . min ( w , h ) ) ; return { maskImage : `url("${ dataUri }")` , maskPosition : 'center' , maskRepeat : 'no-repeat' , WebkitMaskImage : `url("${ dataUri }")` , WebkitMaskPosition : 'center' , WebkitMaskRepeat : 'no-repeat' , } ; } export interface SuperEllipseImgProps { width : number ; height : number ; href : string ; style ? : CSSProperties ; r1 ? : number ; r2 ? : number ; backgroundColor ? : string ; strokeColor ? : string ; strokeWidth ? : number ; } export const SuperEllipseImg = ( props ) => { const w = props . width ; const h = props . height ; const { r1 = Preset . iOS . r1 , r2 = Preset . iOS . r2 } = props ; const { strokeWidth = 0 , strokeColor = 'rgba(255,255,255,0.5)' , backgroundColor } = props ; const path = calcSuperEllipsePath ( w , h , r1 * Math . min ( w , h ) , r2 * Math . min ( w , h ) ) ; const id = `super-ellipse-${ w }-${ h }-${ r1 }-${ r2 }` ; return < svg width = { w } height = { h } viewBox = { `0 0 ${ w } ${ h }` } style = { props . style } > < defs > < clipPath id = { id } > < path fill = "#000" stroke = "none" d = { path } / > < /clipPath> < /defs> < g clipPath = { `url(#${ id })` } > { backgroundColor && < rect width = { w } height = { h } fill = { backgroundColor } / > } < image href = { props . href } width = { w } height = { h } preserveAspectRatio = "none" / > { strokeWidth > 0 && < path stroke = { strokeColor } strokeWidth = { strokeWidth * 2 } fill = "none" d = { path } / > } < /g> < /svg>; } ; export { Preset } ; export default SuperEllipse ;