[fix] arrow snapping bug (#1756)

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

@@ -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));
 	}
 }

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
 			)}
 		>

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,