Browse Source

fixes rotation on drawn shapes

main
Steve Ruiz 4 years ago
parent
commit
45fd645885
4 changed files with 21 additions and 19 deletions
  1. 3
    5
      components/canvas/selected.tsx
  2. 5
    3
      components/canvas/shape.tsx
  3. 4
    11
      lib/shape-utils/draw.tsx
  4. 9
    0
      lib/shape-utils/notes.md

+ 3
- 5
components/canvas/selected.tsx View File

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

+ 5
- 3
components/canvas/shape.tsx View File

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

+ 4
- 11
lib/shape-utils/draw.tsx View File

@@ -72,21 +72,14 @@ const draw = registerShapeUtils<DrawShape>({
72 72
   },
73 73
 
74 74
   getRotatedBounds(shape) {
75
-    const rBounds = translateBounds(
75
+    return translateBounds(
76 76
       getBoundsFromPoints(shape.points, shape.rotation),
77 77
       shape.point
78 78
     )
79
-
80
-    const bounds = this.getBounds(shape)
81
-
82
-    const delta = vec.sub(getBoundsCenter(bounds), getBoundsCenter(rBounds))
83
-
84
-    return translateBounds(rBounds, delta)
85 79
   },
86 80
 
87 81
   getCenter(shape) {
88
-    const bounds = this.getRotatedBounds(shape)
89
-    return [bounds.minX + bounds.width / 2, bounds.minY + bounds.height / 2]
82
+    return getBoundsCenter(this.getBounds(shape))
90 83
   },
91 84
 
92 85
   hitTest(shape, point) {
@@ -131,11 +124,11 @@ const draw = registerShapeUtils<DrawShape>({
131 124
     shape.points = initialShape.points.map(([x, y]) => {
132 125
       return [
133 126
         bounds.width *
134
-          (scaleX < 0
127
+          (scaleX < 0 // * sin?
135 128
             ? 1 - x / initialShapeBounds.width
136 129
             : x / initialShapeBounds.width),
137 130
         bounds.height *
138
-          (scaleY < 0
131
+          (scaleY < 0 // * cos?
139 132
             ? 1 - y / initialShapeBounds.height
140 133
             : y / initialShapeBounds.height),
141 134
       ]

+ 9
- 0
lib/shape-utils/notes.md View File

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

Loading…
Cancel
Save