1
0
Fork 0
freesewing/sites/shared/components/workbench/draft/text-on-path/index.js

46 lines
1.5 KiB
JavaScript
Raw Normal View History

2022-02-08 20:49:19 +01:00
import { useTranslation } from 'next-i18next'
2022-06-18 18:15:17 +02:00
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)) }}
/>
)
2022-02-08 20:49:19 +01:00
2022-01-25 11:22:09 +01:00
const TextOnPath = (props) => {
2022-02-08 20:49:19 +01:00
const { t } = useTranslation(['app'])
// Handle translation (and spaces)
2022-01-25 11:22:09 +01:00
let translated = ''
for (let string of props.path.attributes.getAsArray('data-text')) {
2022-02-08 20:49:19 +01:00
translated += t(string).replace(/&quot;/g, '"') + ' '
2022-01-25 11:22:09 +01:00
}
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%'
2022-06-18 18:15:17 +02:00
const attr = props.path.attributes.asPropsIfPrefixIs('data-text-')
2022-01-25 11:22:09 +01:00
return (
<text>
<textPath {...textPathProps}>
2022-06-18 18:15:17 +02:00
<tspan {...attr} dangerouslySetInnerHTML={{__html: translated}} />
2022-01-25 11:22:09 +01:00
</textPath>
2022-06-18 18:15:17 +02:00
{props.gist._state?.xray?.enabled && (
<textPath {...textPathProps}>
<XrayTextOnPath {...props} attr={attr} translated={translated}/>
</textPath>
)}
2022-01-25 11:22:09 +01:00
</text>
)
}
export default TextOnPath