1
0
Fork 0
freesewing/packages/freesewing.shared/components/mdx/example/DevelopPath/index.js
2021-12-24 17:13:48 +01:00

65 lines
1.4 KiB
JavaScript

import React from 'react'
const DevelopPath = (props) => {
let output = []
let i = 0
let from = null
for (let op of props.path.ops) {
let key = props.part + props.name + i
if (op.type === 'curve') {
output.push(
<path
key={key + 'cp1'}
d={`M ${from.x},${from.y} L ${op.cp1.x},${op.cp1.y}`}
className="develop path cp"
/>
)
i++
output.push(
<path
key={key + 'cp2'}
d={`M ${op.to.x},${op.to.y} L ${op.cp2.x},${op.cp2.y}`}
className="develop path cp"
/>
)
i++
output.push(
<circle
key={key + 'cpcirc1'}
cx={op.cp1.x}
cy={op.cp1.y}
r={3.5}
className="develop path cp"
/>
)
i++
output.push(
<circle
key={key + 'cpcirc2'}
cx={op.cp2.x}
cy={op.cp2.y}
r={3.5}
className="develop path cp"
/>
)
from = op.to
} else if (op.type !== 'close') from = op.to
}
output.push(
<path
key={props.part + props.name + 'dpath'}
d={props.path.asPathstring()}
onClick={() =>
props.raiseEvent('path', {
path: props.path,
name: props.name,
part: props.part
})
}
className="develop hovertrap"
/>
)
return output
}
export default DevelopPath