VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(components): Better snippet support in Draft component

Browse source 
The Draft react component would load the snippets that are part of our
plugin bundle. However, any additional snippets that are created by
plugins would not not get added to the `defs` section, and thus not
be rendered.

This changes the behavior by doing two things:

 - in `core` it adds an SVG object to the renderProps, and makes
   sure to run the `preRender` hook on this SVG object prior to
   returning the renderProps. This way, svg.defs now holds all
   defs, including any that may have been added by custom plugins
 - in the `Draft` component, we no longer add a list of predefined
   snippets to the defs section, but instead just use the svg.defs
   section verbatim. This removes any discrepancies in how SVG
   rendering and React rendering handles the defs section of the
   SVG document, and thus displays snippets.
This commit is contained in:
Joost De Cock 2020-11-08 18:19:10 +01:00
parent d493e30f30
commit 1a5b2769aa
10 changed files with 66 additions and 182 deletions
Download patch file Download diff file Expand all files Collapse all files

76
packages/components/src/Draft/Defs/index.js
View file

@ -1,33 +1,71 @@
import React from 'react'
import Markers from './Markers'
import Snippets from './Snippets'
import Grid from './Grid'
const style = ` style="fill: none; stroke: currentColor;" `
const grids = {
imperial: `
<pattern id="grid" height="25.4" width="25.4" patternUnits="userSpaceOnUse" key="grid">
<path class="gridline lg imperial" d="M 0 0 L 0 25.4 L 25.4 25.4" ${style} />
<path
class="gridline lg imperial"
d="M 12.7 0 L 12.7 25.4 M 0 12.7 L 25.4 12.7"
${style}
/>
<path
class="gridline sm imperial"
d="M 3.175 0 L 3.175 25.4 M 6.32 0 L 6.35 25.4 M 9.525 0 L 9.525 25.4 M 15.875 0 L 15.875 25.4 M 19.05 0 L 19.05 25.4 M 22.225 0 L 22.225 25.4"
${style}
/>
<path
class="gridline sm imperial"
d="M 0 3.175 L 25.4 3.175 M 0 6.32 L 25.4 6.35 M 0 9.525 L 25.4 9.525 M 0 15.875 L 25.4 15.875 M 0 19.05 L 25.4 19.05 M 0 22.225 L 25.4 22.225"
${style}
/>
</pattern>
`,
metric: `
<pattern id="grid" height="100" width="100" patternUnits="userSpaceOnUse" key="grid">
<path class="gridline lg metric" d="M 0 0 L 0 100 L 100 100" ${style} />
<path class="gridline metric" d="M 50 0 L 50 100 M 0 50 L 100 50" ${style} />
<path
class="gridline sm metric"
d="M 10 0 L 10 100 M 20 0 L 20 100 M 30 0 L 30 100 M 40 0 L 40 100 M 60 0 L 60 100 M 70 0 L 70 100 M 80 0 L 80 100 M 90 0 L 90 100"
${style}
/>
<path
class="gridline sm metric"
d="M 0 10 L 100 10 M 0 20 L 100 20 M 0 30 L 100 30 M 0 40 L 100 40 M 0 60 L 100 60 M 0 70 L 100 70 M 0 80 L 100 80 M 0 90 L 100 90"
${style}
/>
<path
class="gridline xs metric"
d="M 5 0 L 5 100 M 15 0 L 15 100 M 25 0 L 25 100 M 35 0 L 35 100 M 45 0 L 45 100 M 55 0 L 55 100 M 65 0 L 65 100 M 75 0 L 75 100 M 85 0 L 85 100 M 95 0 L 95 100"
${style}
/>
<path
class="gridline xs metric"
d="M 0 5 L 100 5 M 0 15 L 100 15 M 0 25 L 100 25 M 0 35 L 100 35 M 0 45 L 100 45 M 0 55 L 100 55 M 0 65 L 100 65 M 0 75 L 100 75 M 0 85 L 100 85 M 0 95 L 100 95"
${style}
/>
</pattern>
`
}
const Defs = (props) => {
let paperlessGrids = null
if (props.paperless) {
paperlessGrids = []
let defs = props.svg.defs
if (props.settings.paperless) {
defs += grids[props.settings.units || 'metric']
for (let p in props.parts) {
let anchor = { x: 0, y: 0 }
if (typeof props.parts[p].points.gridAnchor !== 'undefined')
anchor = props.parts[p].points.gridAnchor
else if (typeof props.parts[p].points.anchor !== 'undefined')
anchor = props.parts[p].points.anchor
paperlessGrids.push(
<pattern id={'grid-' + p} key={'grid-' + p} xlinkHref="#grid" x={anchor.x} y={anchor.y} />
)
defs += `<pattern id="grid-${p}" key="grid-${p}" xlink:href="#grid" x="${anchor.x}" y="${anchor.y}" />`
}
}
return (
<defs>
<Markers />
<Snippets />
<Grid units={props.units} />
{paperlessGrids}
{props.extraDefs || '<!-- no extras -->'}
<g></g>
</defs>
)
return <defs dangerouslySetInnerHTML={{ __html: defs }} />
}
export default Defs