consistently set up part transforms
This commit is contained in:
parent
6f6a165459
commit
b2fcee3037
3 changed files with 80 additions and 44 deletions
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue