import { useTranslation } from 'next-i18next' import { pathInfo } from '../path/index' const XrayTextOnPath = props => ( <tspan {...props.attr} dangerouslySetInnerHTML={{__html: props.translated}} className={`${props.attr.className} no-fill stroke-transparent stroke-4xl opacity-10 hover:cursor-pointer hover:stroke-secondary`} style={{strokeOpacity: 0.25}} onClick={(evt) => { evt.stopPropagation(); props.showInfo(pathInfo(props)) }} /> ) const TextOnPath = (props) => { const { t } = useTranslation(['app']) const text = [] // Handle translation (and spaces) let translated = '' for (let string of props.path.attributes.getAsArray('data-text')) { translated += t(string).replace(/"/g, '"') + ' ' } const textPathProps = { xlinkHref: '#' + props.pathId, startOffset: '0%' } const align = props.path.attributes.get('data-text-class') if (align && align.indexOf('center') > -1) textPathProps.startOffset = '50%' else if (align && align.indexOf('right') > -1) textPathProps.startOffset = '100%' const attr = props.path.attributes.asPropsIfPrefixIs('data-text-') return ( <text> <textPath {...textPathProps}> <tspan {...attr} dangerouslySetInnerHTML={{__html: translated}} /> </textPath> {props.gist._state?.xray?.enabled && ( <textPath {...textPathProps}> <XrayTextOnPath {...props} attr={attr} translated={translated}/> </textPath> )} </text> ) } export default TextOnPath