improves bounds, arrow rotation

components/canvas/bounds/bounding-box.tsx

@@ -51,14 +51,13 @@ export default function Bounds() {
   if (isSingleHandles) return null
 
   const size = (isMobile().any ? 10 : 8) / zoom // Touch target size
+  const center = getBoundsCenter(bounds)
 
   return (
     <g
       pointerEvents={isBrushing ? 'none' : 'all'}
       transform={`
-        rotate(${rotation * (180 / Math.PI)}, 
-        ${(bounds.minX + bounds.maxX) / 2}, 
-        ${(bounds.minY + bounds.maxY) / 2})
+        rotate(${rotation * (180 / Math.PI)},${center})
         translate(${bounds.minX},${bounds.minY})
         rotate(${(bounds.rotation || 0) * (180 / Math.PI)}, 0, 0)`}
     >

components/canvas/bounds/handles.tsx

@@ -23,8 +23,10 @@ export default function Handles() {
 
   if (!shape.handles || !isSelecting) return null
 
+  const center = getShapeUtils(shape).getCenter(shape)
+
   return (
-    <g>
+    <g transform={`rotate(${shape.rotation * (180 / Math.PI)},${center})`}>
       {Object.values(shape.handles).map((handle) => (
         <Handle
           key={handle.id}

lib/shape-utils/arrow.tsx

@@ -170,6 +170,28 @@ const arrow = registerShapeUtils<ArrowShape>({
     )
   },
 
+  rotateTo(shape, rotation, delta) {
+    const { start, end, bend } = shape.handles
+    // const mp = vec.med(start.point, end.point)
+    // start.point = vec.rotWith(start.point, mp, delta)
+    // end.point = vec.rotWith(end.point, mp, delta)
+    // bend.point = vec.rotWith(bend.point, mp, delta)
+    // this.onHandleChange(shape, shape.handles)
+
+    // const bounds = this.getBounds(shape)
+
+    // const offset = vec.sub([bounds.minX, bounds.minY], shape.point)
+
+    // this.translateTo(shape, vec.add(shape.point, offset))
+
+    // start.point = vec.sub(start.point, offset)
+    // end.point = vec.sub(end.point, offset)
+    // bend.point = vec.sub(bend.point, offset)
+
+    shape.rotation = rotation
+    return this
+  },
+
   getBounds(shape) {
     if (!this.boundsCache.has(shape)) {
       const { start, end } = shape.handles

lib/shape-utils/index.tsx

@@ -59,6 +59,7 @@ export interface ShapeUtility<K extends Shape> {
   // Create a new shape.
   create(props: Partial<K>): K
 
+  // Update a shape's styles
   applyStyles(
     this: ShapeUtility<K>,
     shape: Mutable<K>,
@@ -77,6 +78,19 @@ export interface ShapeUtility<K extends Shape> {
     point: number[]
   ): ShapeUtility<K>
 
+  rotateBy(
+    this: ShapeUtility<K>,
+    shape: Mutable<K>,
+    rotation: number
+  ): ShapeUtility<K>
+
+  rotateTo(
+    this: ShapeUtility<K>,
+    shape: Mutable<K>,
+    rotation: number,
+    delta: number
+  ): ShapeUtility<K>
+
   // Transform to fit a new bounding box when more than one shape is selected.
   transform(
     this: ShapeUtility<K>,
@@ -213,6 +227,16 @@ function getDefaultShapeUtil<T extends Shape>(): ShapeUtility<T> {
       return this
     },
 
+    rotateTo(shape, rotation) {
+      shape.rotation = rotation
+      return this
+    },
+
+    rotateBy(shape, rotation) {
+      shape.rotation += rotation
+      return this
+    },
+
     transform(shape, bounds) {
       shape.point = [bounds.minX, bounds.minY]
       return this

state/commands/arrow.ts

@@ -1,10 +1,8 @@
 import Command from './command'
 import history from '../history'
-import { ArrowShape, Data } from 'types'
-import * as vec from 'utils/vec'
+import { Data } from 'types'
 import { getPage } from 'utils/utils'
 import { ArrowSnapshot } from 'state/sessions/arrow-session'
-import { getShapeUtils } from 'lib/shape-utils'
 
 export default function arrowCommand(
   data: Data,

state/commands/rotate.ts

@@ -22,8 +22,8 @@ export default function rotateCommand(
           const shape = shapes[id]
           const utils = getShapeUtils(shape)
           utils
-            .setProperty(shape, 'rotation', rotation)
-            .setProperty(shape, 'point', point)
+            .rotateTo(shape, rotation, rotation - shape.rotation)
+            .translateTo(shape, point)
         }
 
         data.boundsRotation = after.boundsRotation
@@ -35,8 +35,8 @@ export default function rotateCommand(
           const shape = shapes[id]
           const utils = getShapeUtils(shape)
           utils
-            .setProperty(shape, 'rotation', rotation)
-            .setProperty(shape, 'point', point)
+            .rotateTo(shape, rotation, rotation - shape.rotation)
+            .translateTo(shape, point)
         }
 
         data.boundsRotation = before.boundsRotation

state/sessions/rotate-session.ts

@@ -22,6 +22,7 @@ export default class RotateSession extends BaseSession {
   delta = [0, 0]
   origin: number[]
   snapshot: RotateSnapshot
+  prev = 0
 
   constructor(data: Data, point: number[]) {
     super(data)
@@ -38,6 +39,9 @@ export default class RotateSession extends BaseSession {
 
     let rot = a2 - a1
 
+    const delta = rot - this.prev
+    this.prev = rot
+
     if (isLocked) {
       rot = clampToRotationToSegments(rot, 24)
     }
@@ -47,14 +51,12 @@ export default class RotateSession extends BaseSession {
     for (let { id, center, offset, rotation } of initialShapes) {
       const shape = page.shapes[id]
 
-      // const rotationOffset = vec.sub(
-      //   getBoundsCenter(getShapeBounds(shape)),
-      //   getBoundsCenter(getRotatedBounds(shape))
-      // )
-
-      const nextRotation = isLocked
-        ? clampToRotationToSegments(rotation + rot, 24)
-        : rotation + rot
+      const nextRotation =
+        PI2 +
+        ((isLocked
+          ? clampToRotationToSegments(rotation + rot, 24)
+          : rotation + rot) %
+          PI2)
 
       const nextPoint = vec.sub(
         vec.rotWith(center, commonBoundsCenter, rot),
@@ -62,8 +64,8 @@ export default class RotateSession extends BaseSession {
       )
 
       getShapeUtils(shape)
-        .setProperty(shape, 'rotation', (PI2 + nextRotation) % PI2)
-        .setProperty(shape, 'point', nextPoint)
+        .rotateTo(shape, nextRotation, delta)
+        .translateTo(shape, nextPoint)
     }
 
     updateParents(
@@ -79,8 +81,8 @@ export default class RotateSession extends BaseSession {
     for (let { id, point, rotation } of initialShapes) {
       const shape = page.shapes[id]
       getShapeUtils(shape)
-        .setProperty(shape, 'rotation', rotation)
-        .setProperty(shape, 'point', point)
+        .rotateTo(shape, rotation, rotation - shape.rotation)
+        .translateTo(shape, point)
     }
 
     updateParents(

todo.md

@@ -1,6 +1,10 @@
 # Todo
 
-## Groups
+## Done
+
+- fix select indicator placement for arrow
+
+## Todo
 
 - Restore select highlight, fix for children of rotated groups
 - Transforming on rotated shapes