separate print layout from draft layout. add better buttons

packages/core/src/utils.js

@@ -362,25 +362,41 @@ export function pctBasedOn(measurement) {
 
 /** Generates the transform attributes needed for a given part */
 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 = []
+  let xTotal = x || 0;
+  let yTotal = y || 0;
+  let scaleX = 1
+  let scaleY = 1
+
+  if (flipX) {
+    scaleX = -1
+    xTotal += part.topLeft.x * 2 + part.width
+  }
+  if (flipY) {
+    scaleY = -1
+    yTotal += part.topLeft.y * 2 + part.height
   }
 
-  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})`
+  if (scaleX + scaleY < 2) {
+    transforms.push(`scale(${scaleX} ${scaleY})`)
+  }
+
+  if (rotate) {
+    const center = {
+      x: part.topLeft.x + part.width/2,
+      y: part.topLeft.y + part.height/2,
+    }
+
+    transforms.push(`rotate(${rotate} ${center.x} ${center.y})`)
+  }
+
+  if (xTotal > 0 || yTotal > 0) transforms.unshift(
+    `translate(${xTotal} ${yTotal})`
   )
 
   return {
     transform: transforms.join(' '),
-    'transform-origin': `${center.x} ${center.y}`
+    // 'transform-origin': `${center.x} ${center.y}`
   }
 }
-