Fixes bounds for arrows

components/canvas/bounds/bounding-box.tsx

@@ -34,16 +34,19 @@ export default function Bounds() {
     return selectedIds.every((id) => page.shapes[id]?.isLocked)
   })
 
-  const isAllHandles = useSelector((s) => {
+  const isSingleHandles = useSelector((s) => {
     const page = getPage(s.data)
-    return selectedIds.every((id) => page.shapes[id]?.handles !== undefined)
+    return (
+      selectedIds.length === 1 &&
+      page.shapes[selectedIds[0]]?.handles !== undefined
+    )
   })
 
   if (!bounds) return null
 
   if (!isSelecting) return null
 
-  if (isAllHandles) return null
+  if (isSingleHandles) return null
 
   const size = (isMobile().any ? 10 : 8) / zoom // Touch target size
 

components/canvas/bounds/handles.tsx

@@ -5,6 +5,7 @@ import { useSelector } from 'state'
 import styled from 'styles'
 import { deepCompareArrays, getPage } from 'utils/utils'
 import * as vec from 'utils/vec'
+import { DotCircle } from '../misc'
 
 export default function Handles() {
   const selectedIds = useSelector(
@@ -47,10 +48,6 @@ function Handle({
   const rGroup = useRef<SVGGElement>(null)
   const events = useHandleEvents(id, rGroup)
 
-  const transform = `
-  translate(${point})
-  `
-
   return (
     <g
       key={id}
@@ -60,7 +57,7 @@ function Handle({
       transform={`translate(${point})`}
     >
       <HandleCircleOuter r={8} />
-      <HandleCircle r={4} />
+      <DotCircle r={4} />
     </g>
   )
 }

components/canvas/misc.tsx

@@ -3,6 +3,7 @@ import styled from 'styles'
 export const DotCircle = styled('circle', {
   transform: 'scale(var(--scale))',
   fill: '$canvas',
+  stroke: '$text',
   strokeWidth: '2',
 })
 

lib/shape-utils/arrow.tsx

@@ -145,14 +145,7 @@ const arrow = registerShapeUtils<ArrowShape>({
 
   getBounds(shape) {
     if (!this.boundsCache.has(shape)) {
-      this.boundsCache.set(
-        shape,
-        getBoundsFromPoints([
-          ...shape.points,
-          shape.handles['bend'].point,
-          // vec.sub(shape.handles['bend'].point, shape.point),
-        ])
-      )
+      this.boundsCache.set(shape, getBoundsFromPoints(shape.points))
     }
 
     return translateBounds(this.boundsCache.get(shape), shape.point)
@@ -215,6 +208,8 @@ const arrow = registerShapeUtils<ArrowShape>({
   transform(shape, bounds, { initialShape, scaleX, scaleY }) {
     const initialShapeBounds = this.getBounds(initialShape)
 
+    // console.log([...shape.point], [bounds.minX, bounds.minY])
+
     shape.point = [bounds.minX, bounds.minY]
 
     shape.points = shape.points.map((_, i) => {
@@ -234,6 +229,28 @@ const arrow = registerShapeUtils<ArrowShape>({
       ]
     })
 
+    const { start, end, bend } = shape.handles
+
+    start.point = shape.points[0]
+    end.point = shape.points[1]
+
+    // start.point[0] = initialShape.handles.start.point[0] * scaleX
+    // end.point[0] = initialShape.handles.end.point[0] * scaleX
+
+    // start.point[1] = initialShape.handles.start.point[1] * scaleY
+    // end.point[1] = initialShape.handles.end.point[1] * scaleY
+
+    const bendDist = (vec.dist(start.point, end.point) / 2) * shape.bend
+    const midPoint = vec.med(start.point, end.point)
+    const u = vec.uni(vec.vec(start.point, end.point))
+
+    bend.point =
+      Math.abs(bendDist) > 10
+        ? vec.add(midPoint, vec.mul(vec.per(u), bendDist))
+        : midPoint
+
+    shape.points = [shape.handles.start.point, shape.handles.end.point]
+
     return this
   },
 
@@ -248,6 +265,8 @@ const arrow = registerShapeUtils<ArrowShape>({
   },
 
   onHandleMove(shape, handles) {
+    const { start, end, bend } = shape.handles
+
     for (let id in handles) {
       const handle = handles[id]
 
@@ -257,9 +276,6 @@ const arrow = registerShapeUtils<ArrowShape>({
         shape.points[handle.index] = handle.point
       }
 
-      const { start, end, bend } = shape.handles
-
-      const midPoint = vec.med(start.point, end.point)
       const dist = vec.dist(start.point, end.point)
 
       if (handle.id === 'bend') {
@@ -272,15 +288,17 @@ const arrow = registerShapeUtils<ArrowShape>({
         shape.bend = clamp(distance / (dist / 2), -1, 1)
         if (!vec.clockwise(start.point, bend.point, end.point)) shape.bend *= -1
       }
+    }
 
-      const bendDist = (dist / 2) * shape.bend
-      const u = vec.uni(vec.vec(start.point, end.point))
+    const dist = vec.dist(start.point, end.point)
+    const midPoint = vec.med(start.point, end.point)
+    const bendDist = (dist / 2) * shape.bend
+    const u = vec.uni(vec.vec(start.point, end.point))
 
-      bend.point =
-        Math.abs(bendDist) > 10
-          ? vec.add(midPoint, vec.mul(vec.per(u), bendDist))
-          : midPoint
-    }
+    bend.point =
+      Math.abs(bendDist) > 10
+        ? vec.add(midPoint, vec.mul(vec.per(u), bendDist))
+        : midPoint
 
     return this
   },

state/commands/transform.ts

@@ -17,7 +17,9 @@ export default function transformCommand(
     new Command({
       name: 'translate_shapes',
       category: 'canvas',
-      do(data) {
+      do(data, isInitial) {
+        if (isInitial) return
+
         const { type, shapeBounds } = after
 
         const { shapes } = getPage(data)
@@ -50,8 +52,8 @@ export default function transformCommand(
             type,
             initialShape,
             transformOrigin,
-            scaleX,
-            scaleY,
+            scaleX: scaleX < 0 ? scaleX * -1 : scaleX,
+            scaleY: scaleX < 0 ? scaleX * -1 : scaleX,
           })
         }
       },

state/sessions/arrow-session.ts

@@ -3,7 +3,7 @@ import * as vec from 'utils/vec'
 import BaseSession from './base-session'
 import commands from 'state/commands'
 import { current } from 'immer'
-import { getPage } from 'utils/utils'
+import { getBoundsFromPoints, getPage } from 'utils/utils'
 import { getShapeUtils } from 'lib/shape-utils'
 
 export default class PointsSession extends BaseSession {
@@ -70,6 +70,34 @@ export default class PointsSession extends BaseSession {
   }
 
   complete(data: Data) {
+    const { id, initialShape } = this.snapshot
+
+    const shape = getPage(data).shapes[id] as ArrowShape
+
+    const { start, end, bend } = shape.handles
+
+    // Normalize point and handles
+
+    const bounds = getBoundsFromPoints([start.point, end.point])
+    const corner = [bounds.minX, bounds.minY]
+
+    const newPoint = vec.add(shape.point, corner)
+
+    const nextHandles = {
+      start: { ...start, point: vec.sub(start.point, corner) },
+      end: { ...end, point: vec.sub(end.point, corner) },
+      bend: { ...bend, point: vec.sub(bend.point, corner) },
+    }
+
+    getShapeUtils(shape)
+      .setProperty(shape, 'points', [
+        nextHandles.start.point,
+        nextHandles.end.point,
+      ])
+      .setProperty(shape, 'handles', nextHandles)
+      .translateTo(shape, newPoint)
+      .onHandleMove(shape, nextHandles)
+
     commands.arrow(
       data,
       this.snapshot,