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
}
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

67
packages/core/src/pattern.js
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)
// }
}
}
}

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 Snippet from '../../draft/snippet'
import {PartInner} from '../../draft/part'
import {generatePartTransform} from '@freesewing/core/src/part'
import { getProps, angle } from '../../draft/utils'
import { drag } from 'd3-drag'
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 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 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 (flipY) 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}, ${center.y})`
@ -119,8 +116,13 @@ const Part = props => {
translateX = event.x
translateY = event.y
}
const transforms = generatePartTransform(translateX, translateY, rotation, flipX, flipY, part);
console.log(transforms)
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) {
updateLayout()
@ -167,6 +169,7 @@ const Part = props => {
id={`part-${name}`}
ref={props.name === 'pages' ? null : partRef}
onClick={toggleDragRotate}
transform-origin={`${center.x} ${center.y}`}
>
{PartInner(props)}
{props.name !== 'pages' && <>