fixes rotation on drawn shapes

components/canvas/selected.tsx

@@ -1,6 +1,6 @@
 import styled from 'styles'
 import { useSelector } from 'state'
-import { deepCompareArrays, getPage } from 'utils/utils'
+import { deepCompareArrays, getBoundsCenter, getPage } from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 import useShapeEvents from 'hooks/useShapeEvents'
 import { memo, useRef } from 'react'
@@ -38,12 +38,10 @@ export const ShapeOutline = memo(function ShapeOutline({ id }: { id: string }) {
   // to handle parent rotation.
 
   const center = getShapeUtils(shape).getCenter(shape)
-  const bounds = getShapeUtils(shape).getBounds(shape)
 
   const transform = `
-  rotate(${shape.rotation * (180 / Math.PI)}, 
+  rotate(${shape.rotation * (180 / Math.PI)}, ${center})
-  ${center})
+  translate(${shape.point})
-  translate(${bounds.minX},${bounds.minY})
   `
 
   return (

components/canvas/shape.tsx

@@ -2,7 +2,7 @@ import React, { useRef, memo } from 'react'
 import { useSelector } from 'state'
 import styled from 'styles'
 import { getShapeUtils } from 'lib/shape-utils'
-import { getPage } from 'utils/utils'
+import { getBoundsCenter, getPage } from 'utils/utils'
 import { ShapeStyles, ShapeType } from 'types'
 import useShapeEvents from 'hooks/useShapeEvents'
 import * as vec from 'utils/vec'
@@ -30,10 +30,12 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps) {
   const isGroup = shape.type === ShapeType.Group
 
   const center = getShapeUtils(shape).getCenter(shape)
+  const rotation = shape.rotation * (180 / Math.PI)
 
   const transform = `
-  rotate(${shape.rotation * (180 / Math.PI)}, ${vec.sub(center, parentPoint)})
+  translate(${vec.neg(parentPoint)})
-  translate(${vec.sub(shape.point, parentPoint)})
+  rotate(${rotation}, ${center})
+  translate(${shape.point})
   `
 
   const style = getShapeStyle(shape.style)

lib/shape-utils/draw.tsx

@@ -72,21 +72,14 @@ const draw = registerShapeUtils<DrawShape>({
   },
 
   getRotatedBounds(shape) {
-    const rBounds = translateBounds(
+    return translateBounds(
       getBoundsFromPoints(shape.points, shape.rotation),
       shape.point
     )
-
-    const bounds = this.getBounds(shape)
-
-    const delta = vec.sub(getBoundsCenter(bounds), getBoundsCenter(rBounds))
-
-    return translateBounds(rBounds, delta)
   },
 
   getCenter(shape) {
-    const bounds = this.getRotatedBounds(shape)
+    return getBoundsCenter(this.getBounds(shape))
-    return [bounds.minX + bounds.width / 2, bounds.minY + bounds.height / 2]
   },
 
   hitTest(shape, point) {
@@ -131,11 +124,11 @@ const draw = registerShapeUtils<DrawShape>({
     shape.points = initialShape.points.map(([x, y]) => {
       return [
         bounds.width *
-          (scaleX < 0
+          (scaleX < 0 // * sin?
             ? 1 - x / initialShapeBounds.width
             : x / initialShapeBounds.width),
         bounds.height *
-          (scaleY < 0
+          (scaleY < 0 // * cos?
             ? 1 - y / initialShapeBounds.height
             : y / initialShapeBounds.height),
       ]

lib/shape-utils/notes.md

@@ -1 +1,10 @@
 # Shape Utils
+
+## Text
+
+- Click to create a shape, type to add its content
+- Click to select
+- Double click (long press?) to begin editing
+- Deselect to confirm changes
+- Escape to revert changes
+- If confirmed changes and text is empty, delete shape