VSinerva/freesewing
1
0
Fork 0
Code Activity

movable pattern for print layout

Browse source
This commit is contained in:
Enoch Riese 2023-06-04 23:28:43 -05:00
parent 0e329e195d
commit b879e23018
10 changed files with 591 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

104
packages/react-components/src/pattern/index.mjs
View file

@ -1,4 +1,4 @@
import React from 'react'
import { forwardRef } from 'react'
// Components that can be swizzled
import { Svg as DefaultSvg } from './svg.mjs'
import { Defs as DefaultDefs } from './defs.mjs'
@ -10,6 +10,7 @@ import { Snippet as DefaultSnippet } from './snippet.mjs'
import { Path as DefaultPath } from './path.mjs'
import { Grid as DefaultGrid } from './grid.mjs'
import { Text as DefaultText, TextOnPath as DefaultTextOnPath } from './text.mjs'
import { Circle as DefaultCircle } from './circle.mjs'
/*
* Allow people to swizzle these components
@ -26,55 +27,60 @@ const defaultComponents = {
Grid: DefaultGrid,
Text: DefaultText,
TextOnPath: DefaultTextOnPath,
Circle: DefaultCircle,
}
export const Pattern = ({
renderProps = false,
t = (string) => string,
components = {},
children = false,
className = 'freesewing pattern',
ref = false,
}) => {
if (!renderProps) return null
export const Pattern = forwardRef(
(
{
renderProps = false,
t = (string) => string,
components = {},
children = false,
className = 'freesewing pattern',
},
ref
) => {
if (!renderProps) return null
// Merge default and swizzled components
components = {
...defaultComponents,
...components,
// Merge default and swizzled components
components = {
...defaultComponents,
...components,
}
const { Svg, Defs, Stack, Group } = components
const optionalProps = {}
if (className) optionalProps.className = className
return (
<Svg
viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
embed={renderProps.settings.embed}
{...renderProps}
{...optionalProps}
ref={ref}
>
<Defs {...renderProps} />
<style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
renderProps.svg.style
}`}</style>
<Group>
{children
? children
: Object.keys(renderProps.stacks).map((stackName) => (
<Stack
key={stackName}
stackName={stackName}
stack={renderProps.stacks[stackName]}
settings={renderProps.settings}
components={components}
t={t}
/>
))}
</Group>
</Svg>
)
}
const { Svg, Defs, Stack, Group } = components
const optionalProps = {}
if (ref) optionalProps.ref = ref
if (className) optionalProps.className = className
return (
<Svg
viewBox={`0 0 ${renderProps.width} ${renderProps.height}`}
embed={renderProps.settings.embed}
{...renderProps}
{...optionalProps}
>
<Defs {...renderProps} />
<style>{`:root { --pattern-scale: ${renderProps.settings.scale || 1}} ${
renderProps.svg.style
}`}</style>
<Group>
{children
? children
: Object.keys(renderProps.stacks).map((stackName) => (
<Stack
key={stackName}
stackName={stackName}
stack={renderProps.stacks[stackName]}
settings={renderProps.settings}
components={components}
t={t}
/>
))}
</Group>
</Svg>
)
}
)