VSinerva/freesewing
1
0
Fork 0
Code Activity

print layout renders and remembers changes

Browse source
This commit is contained in:
Enoch Riese 2022-10-28 15:03:04 -05:00
parent 8dfc54e141
commit 2e2cbf70d2
6 changed files with 445 additions and 402 deletions
Download patch file Download diff file Expand all files Collapse all files

69
sites/shared/components/workbench/draft/svg-wrapper.js
View file

@ -1,8 +1,9 @@
import { SizeMe } from 'react-sizeme'
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
import Svg from './svg'
import Defs from './defs'
import Stack from './stack'
import { forwardRef } from 'react'
/* What's with all the wrapping?
*
@ -25,37 +26,45 @@ import Stack from './stack'
* Also still to see how this will work with SSR
*/
const SvgWrapper = props => {
const { patternProps=false, gist, app, updateGist, unsetGist, showInfo } = props
const SvgWrapper = forwardRef((props, ref) => {
const { patternProps = false, gist, updateGist, unsetGist, showInfo, viewBox } = props
if (!patternProps) return null
console.log(props.children)
return <SizeMe>{({ size }) => (
<TransformWrapper
minScale={0.1}
centerZoomedOut={true}
wheel={{ activationKeys: ['Control'] }}
>
<TransformComponent>
<div style={{ width: size.width+'px', }}>
<Svg {...patternProps} embed={gist.embed}>
<Defs {...patternProps} />
<style>{`:root { --pattern-scale: ${gist.scale || 1}} ${patternProps.svg.style}`}</style>
<g>
{Object.keys(patternProps.stacks).map((stackName) => (
<Stack {...{ app, gist, updateGist, unsetGist, showInfo, patternProps }}
key={stackName}
stackName={stackName}
stack={patternProps.stacks[stackName]}
/>
))}
</g>
</Svg>
</div>
</TransformComponent>
</TransformWrapper>
)}</SizeMe>
}
return (
<SizeMe>
{({ size }) => (
<TransformWrapper
minScale={0.1}
centerZoomedOut={true}
wheel={{ activationKeys: ['Control'] }}
>
<TransformComponent>
<div style={{ width: size.width + 'px' }}>
<Svg {...patternProps} viewBox={viewBox} embed={gist.embed} ref={ref}>
<Defs {...patternProps} />
<style>{`:root { --pattern-scale: ${gist.scale || 1}} ${
patternProps.svg.style
}`}</style>
<g>
{props.children ||
Object.keys(patternProps.stacks).map((stackName) => (
<Stack
{...{ gist, updateGist, unsetGist, showInfo, patternProps }}
key={stackName}
stackName={stackName}
stack={patternProps.stacks[stackName]}
/>
))}
</g>
</Svg>
</div>
</TransformComponent>
</TransformWrapper>
)}
</SizeMe>
)
})
export default SvgWrapper