103 lines
3 KiB
JavaScript
103 lines
3 KiB
JavaScript
import React, { useState } from 'react'
|
|
import examples from '@freesewing/examples'
|
|
import rendertest from '@freesewing/rendertest'
|
|
import tutorial from '@freesewing/tutorial'
|
|
import Draft from '@freesewing/components/Draft'
|
|
import Icon from 'shared/components/icon'
|
|
//import Design from '../Workbench/Design'
|
|
|
|
const Example = ({
|
|
pattern = 'examples',
|
|
design = true,
|
|
children=null,
|
|
options = {},
|
|
settings,
|
|
part = '',
|
|
sample
|
|
}) => {
|
|
const [designMode, setDesignMode] = useState(false)
|
|
const [focus, setFocus] = useState(null)
|
|
|
|
const raiseEvent = (type, data) => {
|
|
if (type === 'clearFocusAll') return setFocus(null)
|
|
let f = {}
|
|
if (focus !== null) f = { ...focus }
|
|
if (typeof f[data.part] === 'undefined') f[data.part] = { paths: [], points: [], coords: [] }
|
|
if (type === 'point') f[data.part].points.push(data.name)
|
|
else if (type === 'path') f[data.part].paths.push(data.name)
|
|
else if (type === 'coords') f[data.part].coords.push(data.coords)
|
|
else if (type === 'clearFocus') {
|
|
let i = focus[data.part][data.type].indexOf(data.name)
|
|
f[data.part][data.type].splice(i, 1)
|
|
}
|
|
|
|
setFocus(f)
|
|
}
|
|
|
|
let focusCount = 0
|
|
if (focus !== null) {
|
|
for (let p of Object.keys(focus)) {
|
|
for (let i in focus[p].points) focusCount++
|
|
for (let i in focus[p].paths) focusCount++
|
|
for (let i in focus[p].coords) focusCount++
|
|
}
|
|
}
|
|
|
|
const patterns = {
|
|
examples,
|
|
rendertest,
|
|
tutorial
|
|
}
|
|
settings = {
|
|
options: { ...options },
|
|
measurements: { head: 390 },
|
|
...settings
|
|
}
|
|
if (part !== '') settings.only = [part]
|
|
const patternInstance = new patterns[pattern](settings)
|
|
if (sample) patternInstance.sample()
|
|
else patternInstance.draft()
|
|
const patternProps = patternInstance.getRenderProps()
|
|
return (
|
|
<figure className={designMode ? 'design example' : 'example'}>
|
|
<div className="example">
|
|
<div className="actions">
|
|
<button
|
|
disabled={!designMode}
|
|
color="primary"
|
|
onClick={() => raiseEvent('clearFocusAll', null)}
|
|
>
|
|
<Icon icon='settings' />
|
|
</button>
|
|
<div className="p-6 card bordered">
|
|
<div className="form-control">
|
|
<label className="cursor-pointer label">
|
|
<span className="label-text">Design mode</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={designMode}
|
|
className="toggle toggle-primary"
|
|
onChange={() => setDesignMode(!designMode)}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Draft {...patternProps} design={designMode} focus={focus} raiseEvent={raiseEvent} />
|
|
</div>
|
|
<figcaption>{children}</figcaption>
|
|
{designMode && (
|
|
<div className="design">
|
|
<Design
|
|
focus={focus}
|
|
design={designMode}
|
|
raiseEvent={raiseEvent}
|
|
parts={patternProps.parts}
|
|
/>
|
|
</div>
|
|
)}
|
|
</figure>
|
|
)
|
|
}
|
|
|
|
export default Example
|