VSinerva/freesewing
1
0
Fork 0
Code Activity

consistently set up part transforms

Browse source
This commit is contained in:
Enoch Riese 2022-06-28 16:13:21 -05:00
parent 6f6a165459
commit b2fcee3037
3 changed files with 80 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

32
packages/core/src/part.js
View file

@ -350,4 +350,36 @@ Part.prototype.shorthand = function () {
return shorthand return shorthand
} }
export const generatePartTransform = (x, y, rotate, flipX, flipY, part) => {
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 transforms = [`translate(${x},${y})`]
if (flipX) transforms.push(
'scale(-1, 1)',
)
if (flipY) transforms.push(
'scale(1, -1)',
)
if (rotate) transforms.push(
`rotate(${rotate})`
)
return {
transform: transforms.join(' '),
'transform-origin': `${center.x} ${center.y}`
}
}
Part.prototype.generateTransform = function(transforms) {
const {move, rotate, flipX, flipY} = transforms;
const generated = generatePartTransform(move.x, move.y, rotate, flipX, flipY, this);
for (var t in generated) {
this.attr(t, generated[t], true);
}
}
export default Part export default Part

67
packages/core/src/pattern.js
View file

@ -530,39 +530,40 @@ Pattern.prototype.pack = function () {
// Some parts are added by late-stage plugins // Some parts are added by late-stage plugins
if (this.parts[partId]) { if (this.parts[partId]) {
let transforms = this.settings.layout.parts[partId] let transforms = this.settings.layout.parts[partId]
// Moving this.parts[partId].generateTransform(transforms);
if (typeof transforms.move === 'object') { // // Moving
this.parts[partId].attributes.set( // if (typeof transforms.move === 'object') {
'transform', // this.parts[partId].attributes.set(
'translate(' + transforms.move.x + ', ' + transforms.move.y + ')' // 'transform',
) // 'translate(' + transforms.move.x + ', ' + transforms.move.y + ')'
} // )
// Mirrorring // }
let center = this.parts[partId].topLeft.shiftFractionTowards( // // Mirrorring
this.parts[partId].bottomRight, // let center = this.parts[partId].topLeft.shiftFractionTowards(
0.5 // this.parts[partId].bottomRight,
) // 0.5
let anchor = { x: 0, y: 0 } // )
if (transforms.flipX) { // let anchor = { x: 0, y: 0 }
let dx = anchor.x - center.x // if (transforms.flipX) {
let transform = `translate(${center.x * -1}, ${center.y * -1})` // let dx = anchor.x - center.x
transform += ' scale(-1, 1)' // let transform = `translate(${center.x * -1}, ${center.y * -1})`
transform += ` translate(${center.x * -1 + 2 * dx}, ${center.y})` // transform += ' scale(-1, 1)'
this.parts[partId].attributes.add('transform', transform) // transform += ` translate(${center.x * -1 + 2 * dx}, ${center.y})`
} // this.parts[partId].attributes.add('transform', transform)
if (transforms.flipY) { // }
let dy = anchor.y - center.y // if (transforms.flipY) {
let transform = `translate(${center.x * -1}, ${center.y * -1})` // let dy = anchor.y - center.y
transform += ' scale(1, -1)' // let transform = `translate(${center.x * -1}, ${center.y * -1})`
transform += ` translate(${center.x}, ${center.y * -1 + 2 * dy})` // transform += ' scale(1, -1)'
this.parts[partId].attributes.add('transform', transform) // transform += ` translate(${center.x}, ${center.y * -1 + 2 * dy})`
} // this.parts[partId].attributes.add('transform', transform)
if (transforms.rotate) { // }
let transform = `rotate(${transforms.rotate}, ${center.x - anchor.x}, ${ // if (transforms.rotate) {
center.y - anchor.y // let transform = `rotate(${transforms.rotate}, ${center.x - anchor.x}, ${
})` // center.y - anchor.y
this.parts[partId].attributes.add('transform', transform) // })`
} // this.parts[partId].attributes.add('transform', transform)
// }
} }
} }
} }

25
sites/shared/components/workbench/layout/draft/part.js
View file

@ -2,6 +2,7 @@ import Path from '../../draft/path'
import Point from '../../draft/point' import Point from '../../draft/point'
import Snippet from '../../draft/snippet' import Snippet from '../../draft/snippet'
import {PartInner} from '../../draft/part' import {PartInner} from '../../draft/part'
import {generatePartTransform} from '@freesewing/core/src/part'
import { getProps, angle } from '../../draft/utils' import { getProps, angle } from '../../draft/utils'
import { drag } from 'd3-drag' import { drag } from 'd3-drag'
import { select } from 'd3-selection' import { select } from 'd3-selection'
@ -34,22 +35,18 @@ const Buttons = ({ transform, flip, rotate, setRotate, resetPart }) => {
} }
const generateTransform = (x, y, rot, flipX, flipY, part) => { const generateTransform = (x, y, rot, flipX, flipY, part) => {
const center = { // const center = {
x: part.topLeft.x + (part.bottomRight.x - part.topLeft.x)/2, // x: part.topLeft.x + (part.bottomRight.x - part.topLeft.x)/2,
y: part.topLeft.y + (part.bottomRight.y - part.topLeft.y)/2, // y: part.topLeft.y + (part.bottomRight.y - part.topLeft.y)/2,
} // }
const dx = part.topLeft.x - center.x // const dx = part.topLeft.x - center.x
const dy = part.topLeft.y - center.y // const dy = part.topLeft.y - center.y
const transforms = [`translate(${x},${y})`] const transforms = [`translate(${x},${y})`]
if (flipX) transforms.push( if (flipX) transforms.push(
`translate(${center.x * -1}, ${center.y * -1})`,
'scale(-1, 1)', 'scale(-1, 1)',
`translate(${center.x * -1 + 2 * dx}, ${center.y})`
) )
if (flipY) transforms.push( if (flipY) transforms.push(
`translate(${center.x * -1}, ${center.y * -1})`,
'scale(1, -1)', 'scale(1, -1)',
`translate(${center.x}, ${center.y * -1 + 2 * dy})`,
) )
if (rot) transforms.push( if (rot) transforms.push(
`rotate(${rot}, ${center.x}, ${center.y})` `rotate(${rot}, ${center.x}, ${center.y})`
@ -119,8 +116,13 @@ const Part = props => {
translateX = event.x translateX = event.x
translateY = event.y translateY = event.y
} }
const transforms = generatePartTransform(translateX, translateY, rotation, flipX, flipY, part);
console.log(transforms)
const me = select(this); const me = select(this);
me.attr('transform', generateTransform(translateX, translateY, rotation, flipX, flipY, part)); for (var t in transforms) {
me.attr(t, transforms[t])
}
}) })
.on('end', function(event) { .on('end', function(event) {
updateLayout() updateLayout()
@ -167,6 +169,7 @@ const Part = props => {
id={`part-${name}`} id={`part-${name}`}
ref={props.name === 'pages' ? null : partRef} ref={props.name === 'pages' ? null : partRef}
onClick={toggleDragRotate} onClick={toggleDragRotate}
transform-origin={`${center.x} ${center.y}`}
> >
{PartInner(props)} {PartInner(props)}
{props.name !== 'pages' && <> {props.name !== 'pages' && <>