1
0
Fork 0

consistently set up part transforms

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

View file

@ -350,4 +350,36 @@ Part.prototype.shorthand = function () {
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

View file

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