From b2fcee3037f6b19471757b4a7b25674c206950fa Mon Sep 17 00:00:00 2001 From: Enoch Riese Date: Tue, 28 Jun 2022 16:13:21 -0500 Subject: [PATCH] consistently set up part transforms --- packages/core/src/part.js | 32 +++++++++ packages/core/src/pattern.js | 67 ++++++++++--------- .../components/workbench/layout/draft/part.js | 25 ++++--- 3 files changed, 80 insertions(+), 44 deletions(-) diff --git a/packages/core/src/part.js b/packages/core/src/part.js index c3f23f8d8b7..289b2d06a3d 100644 --- a/packages/core/src/part.js +++ b/packages/core/src/part.js @@ -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 diff --git a/packages/core/src/pattern.js b/packages/core/src/pattern.js index 9ad86a9cd85..73ab1150fe6 100644 --- a/packages/core/src/pattern.js +++ b/packages/core/src/pattern.js @@ -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) + // } } } } diff --git a/sites/shared/components/workbench/layout/draft/part.js b/sites/shared/components/workbench/layout/draft/part.js index 16c6b13b372..bf0a84248f4 100644 --- a/sites/shared/components/workbench/layout/draft/part.js +++ b/sites/shared/components/workbench/layout/draft/part.js @@ -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' && <>