Fix arrow bug

packages/tldraw/src/components/tldraw/tldraw.tsx

@@ -23,7 +23,7 @@ const isHideBoundsShapeSelector = (s: Data) => {
   const { selectedIds } = s.document.pageStates[s.appState.currentPageId]
   return (
     selectedIds.length === 1 &&
-    !selectedIds.every((id) => !TLDR.getShapeUtils(shapes[id].type).hideBounds)
+    selectedIds.every((id) => !TLDR.getShapeUtils(shapes[id].type).hideBounds)
   )
 }
 

packages/tldraw/src/shape-utils/arrow/arrow.tsx

@@ -564,7 +564,7 @@ export class ArrowUtil extends TLDrawShapeUtil<T, E> {
       // then also snap the bend to center
       if (Vec.isEqual(midPoint, getBendPoint(nextHandles, nextBend))) {
         nextBend = 0
-      } else if (Utils.isAngleBetween(angle, angle + Math.PI, angleToBend)) {
+      } else if (isAngleBetween(angle, angle + Math.PI, angleToBend)) {
         // Otherwise, fix the bend direction
         nextBend *= -1
       }
@@ -740,7 +740,7 @@ function getArrowArc(shape: ArrowShape) {
 
   const center = [cx, cy]
 
-  const length = Utils.getArcLength(center, radius, start.point, end.point)
+  const length = getArcLength(center, radius, start.point, end.point)
 
   return { center, radius, length }
 }
@@ -867,3 +867,16 @@ function getArcPoints(shape: ArrowShape) {
 
   return points
 }
+
+function isAngleBetween(a: number, b: number, c: number): boolean {
+  if (c === a || c === b) return true
+  const PI2 = Math.PI * 2
+  const AB = (b - a + PI2) % PI2
+  const AC = (c - a + PI2) % PI2
+  return AB <= Math.PI !== AC > AB
+}
+
+function getArcLength(C: number[], r: number, A: number[], B: number[]): number {
+  const sweep = Utils.getSweep(C, A, B)
+  return r * (2 * Math.PI) * (sweep / (2 * Math.PI))
+}

packages/tldraw/src/state/command/align/align.command.ts

@@ -10,11 +10,13 @@ export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand
 
   const initialShapes = ids.map((id) => TLDR.getShape(data, id, currentPageId))
 
-  const boundsForShapes = initialShapes.map((shape) => ({
-    id: shape.id,
-    point: [...shape.point],
-    bounds: TLDR.getShapeUtils(shape).getBounds(shape),
-  }))
+  const boundsForShapes = initialShapes.map((shape) => {
+    return {
+      id: shape.id,
+      point: [...shape.point],
+      bounds: TLDR.getShapeUtils(shape).getBounds(shape),
+    }
+  })
 
   const commonBounds = Utils.getCommonBounds(boundsForShapes.map(({ bounds }) => bounds))
 
@@ -44,7 +46,10 @@ export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand
   const { before, after } = TLDR.mutateShapes(
     data,
     ids,
-    (shape) => (deltaMap[shape.id] ? { point: deltaMap[shape.id].next } : shape),
+    (shape) => {
+      if (!deltaMap[shape.id]) return shape
+      return { point: deltaMap[shape.id].next }
+    },
     currentPageId
   )