2022-01-25 11:22:09 +01:00
|
|
|
import React, { useState } from 'react'
|
|
|
|
import Svg from './svg'
|
|
|
|
import Defs from './defs'
|
|
|
|
import Part from './part'
|
2022-01-28 13:39:07 +01:00
|
|
|
import theme from 'pkgs/plugin-theme/src/index.js'
|
2022-01-25 11:22:09 +01:00
|
|
|
|
|
|
|
const LabDraft = ({ app, pattern, gist, updateGist }) => {
|
|
|
|
|
2022-01-28 13:39:07 +01:00
|
|
|
const patternInstance = new pattern(gist)
|
|
|
|
if (gist?.renderer === 'svg') return <div
|
|
|
|
dangerouslySetInnerHTML={{ __html: patternInstance.use(theme).draft().render()}} />
|
|
|
|
|
|
|
|
const patternProps = patternInstance.draft().getRenderProps()
|
|
|
|
console.log(patternProps)
|
|
|
|
|
2022-01-25 11:22:09 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Svg {...patternProps}>
|
|
|
|
<Defs {...patternProps} />
|
2022-01-27 18:07:37 +01:00
|
|
|
<style>{`:root { --pattern-scale: ${gist.scale || 1}}`}</style>
|
2022-01-25 11:22:09 +01:00
|
|
|
<g>
|
|
|
|
{Object.keys(patternProps.parts).map((name) => (
|
|
|
|
<Part
|
|
|
|
key={name}
|
|
|
|
part={patternProps.parts[name]}
|
2022-01-27 18:07:37 +01:00
|
|
|
locale={gist.locale}
|
|
|
|
paperless={gist.paperless}
|
|
|
|
units={gist.units}
|
2022-01-25 11:22:09 +01:00
|
|
|
name={name}
|
|
|
|
app={app}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</g>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default LabDraft
|