45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
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'])
|
|
// 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
|