wip(lab): Working on handling layout
This commit is contained in:
parent
dd5599c5d6
commit
b948904de1
5 changed files with 232 additions and 52 deletions
|
@ -9,40 +9,159 @@ import { drag } from 'd3-drag'
|
|||
import { select } from 'd3-selection'
|
||||
import { event } from 'd3-dispatch'
|
||||
|
||||
const Buttons = ({ transform, flip, rotate, setRotate, resetPart }) => {
|
||||
const letter = 'F'
|
||||
const style = { style: {fill: 'white', fontSize: 18, fontWeight: 'bold', textAnchor: 'middle'} }
|
||||
|
||||
return (
|
||||
<g transform={transform}>
|
||||
{rotate
|
||||
? <circle cx="0" cy="0" r="50" className='stroke-2xl muted' />
|
||||
: <path d="M -50, 0 l 100,0 M 0,-50 l 0,100" className="stroke-2xl muted" />
|
||||
}
|
||||
<g className="svg-layout-button" onClick={resetPart}>
|
||||
<rect x="-10" y="-10" width="20" height="20" />
|
||||
<text x="0" y="10" {...style}>{letter}</text>
|
||||
</g>
|
||||
<g className="svg-layout-button" onClick={() => flip('y')}>
|
||||
<rect x="10" y="-10" width="20" height="20" className="button" />
|
||||
<text x="20" y="10" {...style} transform="scale(1,-1)">{letter}</text>
|
||||
</g>
|
||||
<g className="svg-layout-button" onClick={() => flip('x')}>
|
||||
<rect x="-30" y="-10" width="20" height="20" className="button" />
|
||||
<text x="20" y="10" {...style} transform="scale(-1,1)">{letter}</text>
|
||||
</g>
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
||||
const dx = (pointA, pointB) => pointB.x - pointA.x
|
||||
const dy = (pointA, pointB) => pointB.y - pointA.y
|
||||
const rad2deg = radians => radians * 57.29577951308232
|
||||
const angle = (pointA, pointB) => {
|
||||
let rad = Math.atan2(-1 * dy(pointA, pointB), dx(pointA, pointB))
|
||||
while (rad < 0) rad += 2 * Math.PI
|
||||
|
||||
return rad2deg(rad)
|
||||
}
|
||||
|
||||
|
||||
const generateTransform = (x, y, rot, flipX, flipY, part) => {
|
||||
const anchor = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
const center = {
|
||||
x: part.topLeft.x + (part.bottomRight.x - part.topLeft.x)/2,
|
||||
y: part.topLeft.y + (part.bottomRight.y - part.topLeft.y)/2,
|
||||
}
|
||||
const dx = part.topLeft.x - center.x
|
||||
const dy = part.topLeft.y - center.y
|
||||
const transforms = [`translate(${x},${y})`]
|
||||
if (flipX) transforms.push(
|
||||
`translate(${center.x * -1}, ${center.y * -1})`,
|
||||
'scale(-1, 1)',
|
||||
`translate(${center.x * -1 + 2 * dx}, ${center.y})`
|
||||
)
|
||||
if (flipX) transforms.push(
|
||||
`translate(${center.x * -1}, ${center.y * -1})`,
|
||||
'scale(1, -1)',
|
||||
`translate(${center.x}, ${center.y * -1 + 2 * dy})`,
|
||||
)
|
||||
if (rot) transforms.push(
|
||||
`rotate(${rot}, ${center.x - anchor.x}, ${center.y - anchor.y})`
|
||||
)
|
||||
|
||||
return transforms.join(' ')
|
||||
}
|
||||
|
||||
const Part = props => {
|
||||
if (typeof props.autoLayout?.move?.x === 'undefined') return null
|
||||
console.log('rendering draft')
|
||||
const { layout, gist, updateGist, name, part } = props
|
||||
const partLayout= layout.parts[name]
|
||||
|
||||
const groupRef = useRef(null)
|
||||
const [layout, setLayout] = useState({
|
||||
move: {
|
||||
x: props.autoLayout.move.x,
|
||||
y: props.autoLayout.move.y,
|
||||
},
|
||||
rotate: 0,
|
||||
flipX: false,
|
||||
flipY: false,
|
||||
})
|
||||
// Don't just assume this makes sense
|
||||
if (typeof layout?.parts?.[name]?.move?.x === 'undefined') return null
|
||||
|
||||
// Use a ref for direct DOM manipulation
|
||||
const partRef = useRef(null)
|
||||
const centerRef = useRef(null)
|
||||
|
||||
// State variable to switch between moving or rotating the part
|
||||
const [rotate, setRotate] = useState(false)
|
||||
|
||||
// Initialize drag handler
|
||||
useEffect(() => {
|
||||
handleDrag(select(groupRef.current))
|
||||
}, [])
|
||||
handleDrag(select(partRef.current))
|
||||
}, [rotate])
|
||||
|
||||
// These are kepts as vars because re-rendering on drag would kill performance
|
||||
// Managing the difference between re-render and direct DOM updates makes this
|
||||
// whole thing a bit tricky to wrap your head around
|
||||
let translateX = partLayout.move.x
|
||||
let translateY = partLayout.move.y
|
||||
let rotation = partLayout.rotate || 0
|
||||
let flipX = partLayout.flipX ? true : false
|
||||
let flipY = partLayout.flipY ? true : false
|
||||
let rotStart = { x: 0, y: 0 }
|
||||
|
||||
const center = {
|
||||
x: part.topLeft.x + (part.bottomRight.x - part.topLeft.x)/2,
|
||||
y: part.topLeft.y + (part.bottomRight.y - part.topLeft.y)/2,
|
||||
}
|
||||
|
||||
let translateX = 0;
|
||||
let translateY = 0;
|
||||
const handleDrag = drag()
|
||||
.subject(function() {
|
||||
const me = select(this);
|
||||
return { x: translateX, y: translateY }
|
||||
})
|
||||
.on('start', function(event) {
|
||||
rotStart = { x: event.x, y: event.y }
|
||||
})
|
||||
.on('drag', function(event) {
|
||||
if (rotate) {
|
||||
rotation = angle(rotStart, { x:event.x, y: event.y }) * -1
|
||||
} else {
|
||||
translateX = event.x
|
||||
translateY = event.y
|
||||
}
|
||||
const me = select(this);
|
||||
const transform = `translate(${event.x}, ${event.y})`;
|
||||
translateX = event.x;
|
||||
translateY = event.y;
|
||||
me.attr('transform', transform);
|
||||
});
|
||||
me.attr('transform', generateTransform(translateX, translateY, rotation, flipX, flipY, part))
|
||||
})
|
||||
.on('end', updateLayout)
|
||||
|
||||
const { partName, part, app, gist, updateGist } = props
|
||||
const resetPart = () => {
|
||||
rotation = 0
|
||||
flipX = 0
|
||||
flipY = 0
|
||||
updateLayout()
|
||||
}
|
||||
const toggleDragRotate = () => {
|
||||
updateLayout()
|
||||
setRotate(!rotate)
|
||||
}
|
||||
const updateLayout = () => {
|
||||
console.log('updating layout')
|
||||
props.updateGist(
|
||||
['layout', 'parts', name],
|
||||
{
|
||||
move: {
|
||||
x: translateX,
|
||||
y: translateY,
|
||||
},
|
||||
rotate: rotation,
|
||||
flipX,
|
||||
flipY
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// Method to flip (mirror) the part along the X or Y axis
|
||||
const flip = axis => {
|
||||
if (axis === 'x') flipX = !flipX
|
||||
else flipY = !flipY
|
||||
updateLayout()
|
||||
}
|
||||
|
||||
const grid = gist.paperless ? (
|
||||
<rect
|
||||
|
@ -51,16 +170,21 @@ const Part = props => {
|
|||
width={part.width}
|
||||
height={part.height}
|
||||
className="grid"
|
||||
fill={'url(#grid-' + partName + ')'}
|
||||
fill={'url(#grid-' + eame + ')'}
|
||||
/>
|
||||
) : null
|
||||
|
||||
return (
|
||||
<g {...getProps(part)} id={`part-${partName}`} ref={groupRef}>
|
||||
<g
|
||||
{...getProps(part)}
|
||||
id={`part-${name}`}
|
||||
ref={props.name === 'pages' ? null : partRef}
|
||||
onClick={toggleDragRotate}
|
||||
>
|
||||
{grid}
|
||||
{
|
||||
props.gist?._state?.xray?.enabled &&
|
||||
props.gist?._state?.xray?.reveal?.[partName]
|
||||
props.gist?._state?.xray?.reveal?.[name]
|
||||
&& <XrayPart {...props} />
|
||||
}
|
||||
{Object.keys(part.paths).map((pathName) => (
|
||||
|
@ -91,14 +215,21 @@ const Part = props => {
|
|||
{...props}
|
||||
/>
|
||||
))}
|
||||
<text x={center.x} y={center.y} ref={centerRef} />
|
||||
<rect
|
||||
x={part.topLeft.x}
|
||||
y={part.topLeft.y}
|
||||
width={part.width}
|
||||
height={part.height}
|
||||
className="fill-accent"
|
||||
style={{fillOpacity: 0.1}}
|
||||
className={`layout-rect ${rotate ? 'rotate' : 'move'}`}
|
||||
/>
|
||||
{props.name !== 'pages' && <Buttons
|
||||
transform={`translate(${part.topLeft.x + part.width/2}, ${part.topLeft.y + part.height/2})`}
|
||||
flip={flip}
|
||||
rotate={rotate}
|
||||
setRotate={setRotate}
|
||||
resetPart={resetPart}
|
||||
/>}
|
||||
</g>
|
||||
)
|
||||
}
|
||||
|
@ -106,34 +237,50 @@ const Part = props => {
|
|||
|
||||
const Draft = props => {
|
||||
const { patternProps, gist, app, updateGist, unsetGist, bgProps={} } = props
|
||||
const { layout=false } = gist
|
||||
|
||||
//useEffect(() => {
|
||||
// if (!props.gist.layout) {
|
||||
// //updateGist(['layout'], patternProps.autoLayout)
|
||||
// console.log(patternProps.autoLayout)
|
||||
// }
|
||||
//}, [])
|
||||
useEffect(() => {
|
||||
if (!layout) {
|
||||
// On the initial draft, core does the layout, so we set the layout to the auto-layout
|
||||
// After this, core won't handle layout anymore. It's up to the user from this point onwards
|
||||
// FIXME: Allow use the option to clear the layout again
|
||||
updateGist(['layout'], {
|
||||
...patternProps.autoLayout,
|
||||
width: patternProps.width,
|
||||
height: patternProps.height
|
||||
})
|
||||
}
|
||||
}, [layout])
|
||||
|
||||
if (!patternProps || !layout) return null
|
||||
|
||||
// We need to make sure the `pages` part is at the bottom of the pile
|
||||
// so we can drag-drop all parts on top of it.
|
||||
// Bottom in SVG means we need to draw it first
|
||||
const partList = Object.keys(patternProps.parts)
|
||||
|
||||
console.log(gist)
|
||||
return (
|
||||
<div className="my-8 w-11/12 m-auto">
|
||||
<div className="my-8 w-11/12 m-auto border-2 border-dotted border-base-content shadow">
|
||||
<Svg {...patternProps} embed={gist.embed}>
|
||||
<Defs {...patternProps} />
|
||||
<style>{`:root { --pattern-scale: ${gist.scale || 1}}`}</style>
|
||||
<g>
|
||||
<rect x="0" y="0" width={patternProps.width} height={patternProps.height} {...bgProps} />
|
||||
{Object.keys(patternProps.parts).map((name) => (
|
||||
<Part
|
||||
key={name}
|
||||
partName={name}
|
||||
part={patternProps.parts[name]}
|
||||
autoLayout={patternProps.autoLayout[name]}
|
||||
app={app}
|
||||
gist={gist}
|
||||
updateGist={updateGist}
|
||||
unsetGist={unsetGist}
|
||||
/>
|
||||
))}
|
||||
{[
|
||||
partList.filter(name => name === 'pages'),
|
||||
partList.filter(name => name !== 'pages'),
|
||||
].map(list => list.map(name => (
|
||||
<Part {...{
|
||||
key:name,
|
||||
name,
|
||||
part: patternProps.parts[name],
|
||||
layout,
|
||||
app,
|
||||
gist,
|
||||
updateGist,
|
||||
unsetGist,
|
||||
}}/>
|
||||
)))}
|
||||
</g>
|
||||
</Svg>
|
||||
</div>
|
||||
|
|
|
@ -29,7 +29,7 @@ const PrintLayout = props => {
|
|||
draft.draft()
|
||||
patternProps = draft.getRenderProps()
|
||||
} catch(err) {
|
||||
console.log(err)
|
||||
console.log(err, props.gist)
|
||||
}
|
||||
const bgProps = { fill: "url(#page)" }
|
||||
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
const name = 'Pages Plugin'
|
||||
const version = '1.0.0'
|
||||
const sizes = {
|
||||
|
@ -11,10 +10,6 @@ const sizes = {
|
|||
tabloid: [ 279.4, 431.8 ],
|
||||
}
|
||||
|
||||
const drawPage = (x, y, size, orientation) => {
|
||||
//
|
||||
}
|
||||
|
||||
const pagesPlugin = (size='a4', orientation='portrait') => ({
|
||||
name,
|
||||
version,
|
||||
|
@ -24,6 +19,10 @@ const pagesPlugin = (size='a4', orientation='portrait') => ({
|
|||
pattern.parts.pages = pattern.Part('pages')
|
||||
// Keep part out of layout
|
||||
pattern.parts.pages.layout = false
|
||||
// But add the part to the autoLayout property
|
||||
pattern.autoLayout.parts.pages = {
|
||||
move: { x: 0, y: 0 }
|
||||
}
|
||||
// Add pages
|
||||
const { macro } = pattern.parts.pages.shorthand()
|
||||
const { height, width } = pattern
|
||||
|
@ -70,6 +69,7 @@ const pagesPlugin = (size='a4', orientation='portrait') => ({
|
|||
}
|
||||
// Store page count in part
|
||||
this.pages = { cols, rows, count: cols*rows }
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
@ -58,6 +58,11 @@ const View = props => {
|
|||
title: t('editThing', { thing: 'YAML' }),
|
||||
onClick: () => props.updateGist(['_state', 'view'], 'edit')
|
||||
},
|
||||
{
|
||||
name: 'clear',
|
||||
title: t('clearThing', { thing: 'YAML' }),
|
||||
onClick: () => props.setGist(null)
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
|
|
|
@ -61,6 +61,34 @@ svg.freesewing.pattern {
|
|||
.muted {
|
||||
opacity: 0.15;
|
||||
}
|
||||
/* layout rectangles */
|
||||
.layout-rect {
|
||||
fill: var(--pattern-canvas);
|
||||
fill-opacity: 0.05;
|
||||
}
|
||||
.layout-rect:hover {
|
||||
fill: var(--pattern-lining);
|
||||
fill-opacity: 0.15;
|
||||
}
|
||||
.layout-rect.move:hover {
|
||||
cursor: move;
|
||||
}
|
||||
.layout-rect.rotate:hover {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.svg-layout-button > rect.button {
|
||||
fill: var(--pattern-note);
|
||||
fill-opacity: 0.3;
|
||||
stroke: none;
|
||||
}
|
||||
.svg-layout-button:hover > rect {
|
||||
fill: var(--pattern-lining);
|
||||
stroke: none;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
.svg-layout-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Developer view */
|
||||
g.develop.point {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue