From fc36d5b577594dad0a1af2695930b825b7aa1c6a Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Sat, 22 Jul 2023 06:19:16 +0100
Subject: [PATCH] [fix] arrow snapping bug (#1756)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR fixes snapping for arrow shapes. Previously, the middle handle
of an arrow was marked as a vertex, causing the arrow to have to
segments (one of which would be snapped to). In this PR we make the
second handle a "virtual" handle and tweak how we display handles to
preserve the same appearance.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Drag an arrow while snapping.

### Release Notes

- [fix] arrow snapping
---
 packages/editor/editor.css                    | 19 +++++++++----------
 .../default-components/DefaultHandle.tsx      |  5 ++++-
 .../src/lib/shapes/arrow/ArrowShapeUtil.tsx   |  2 +-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index 209ac46fc..693fc1d45 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -534,6 +534,13 @@ input,
 	pointer-events: none;
 }
 
+.tl-handle__create {
+	opacity: 0;
+}
+.tl-handle__create:hover {
+	opacity: 1;
+}
+
 .tl-handle__bg:active {
 	fill: none;
 }
@@ -543,24 +550,16 @@ input,
 	fill: var(--color-selection-fill);
 }
 
-.tl-handle__hint {
-	opacity: 0;
-}
-
-.tl-handle__hint:hover {
-	opacity: 1;
-}
-
 @media (pointer: coarse) {
 	.tl-handle__bg:active {
 		fill: var(--color-selection-fill);
 	}
 
-	.tl-handle__hint {
+	.tl-handle__create {
 		opacity: 1;
 	}
 
-	.tl-handle__hint > .tl-handle__fg {
+	.tl-handle__create > .tl-handle__fg {
 		r: calc(3px * var(--tl-scale));
 	}
 }
diff --git a/packages/editor/src/lib/components/default-components/DefaultHandle.tsx b/packages/editor/src/lib/components/default-components/DefaultHandle.tsx
index d9aed7406..6644c7c62 100644
--- a/packages/editor/src/lib/components/default-components/DefaultHandle.tsx
+++ b/packages/editor/src/lib/components/default-components/DefaultHandle.tsx
@@ -14,7 +14,10 @@ export const DefaultHandle: TLHandleComponent = ({ handle, className }) => {
 		<g
 			className={classNames(
 				'tl-handle',
-				{ 'tl-handle__hint': handle.type !== 'vertex' },
+				{
+					'tl-handle__virtual': handle.type === 'virtual',
+					'tl-handle__create': handle.type === 'create',
+				},
 				className
 			)}
 		>
diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
index f495feadd..b7515e7a8 100644
--- a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
@@ -217,7 +217,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 			},
 			{
 				id: 'middle',
-				type: 'vertex',
+				type: 'virtual',
 				index: 'a2',
 				x: info.middle.x,
 				y: info.middle.y,