VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(lab): More dev info on Xray mode

Browse source
This commit is contained in:
Joost De Cock 2022-06-18 18:15:17 +02:00
parent 026c7adcd2
commit 70e0da6ced
6 changed files with 245 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

23
sites/shared/components/workbench/draft/text-on-path/index.js
View file

@ -1,4 +1,15 @@
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'])
@ -16,14 +27,18 @@ const TextOnPath = (props) => {
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
{...props.path.attributes.asPropsIfPrefixIs('data-text-')}
dangerouslySetInnerHTML={{__html: translated}}
/>
<tspan {...attr} dangerouslySetInnerHTML={{__html: translated}} />
</textPath>
{props.gist._state?.xray?.enabled && (
<textPath {...textPathProps}>
<XrayTextOnPath {...props} attr={attr} translated={translated}/>
</textPath>
)}
</text>
)
}