Snap to origin and axis behavior for profile starts and segments (#4344)

* Visualize draft point when near axes (only works on XY rn due to quaternion rotation issue)

* Slightly better quaternion rotation

* Actually snap new profiles to the X and Y axis

* Add snapping behavior while dragging

* Fix flickering on non-XY planes

* Add some fixture additions to support click-and-drag tests

* Add new test to verify snapping behavior

* Make the editor test fixture auto-open and close as needed

* All feedback except absolute lines

* Use `lineTo` for lines that have snapped

* Get other existing tests passing after switching to `lineTo` when snapping

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/clientSideScene/segments.ts

@@ -45,6 +45,7 @@ import {
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import {
   ARROWHEAD,
+  DRAFT_POINT,
   SceneInfra,
   SEGMENT_LENGTH_LABEL,
   SEGMENT_LENGTH_LABEL_OFFSET_PX,
@@ -686,19 +687,20 @@ class CircleSegment implements SegmentUtils {
 
 export function createProfileStartHandle({
   from,
-  id,
-  pathToNode,
+  isDraft = false,
   scale = 1,
   theme,
   isSelected,
+  ...rest
 }: {
   from: Coords2d
-  id: string
-  pathToNode: PathToNode
   scale?: number
   theme: Themes
   isSelected?: boolean
-}) {
+} & (
+  | { isDraft: true }
+  | { isDraft: false; id: string; pathToNode: PathToNode }
+)) {
   const group = new Group()
 
   const geometry = new BoxGeometry(12, 12, 12) // in pixels scaled later
@@ -711,13 +713,12 @@ export function createProfileStartHandle({
 
   group.userData = {
     type: PROFILE_START,
-    id,
     from,
-    pathToNode,
     isSelected,
     baseColor,
+    ...rest,
   }
-  group.name = PROFILE_START
+  group.name = isDraft ? DRAFT_POINT : PROFILE_START
   group.position.set(from[0], from[1], 0)
   group.scale.set(scale, scale, scale)
   return group