Symbols overlay (#2033)

* start of overlay work

* add new icons

* add constraint symbols

* add three dots

* add primary colours

* refactor how we get constraint info for overlays

* refactor how we get constraint info for overlays

* get symbols working for tangential arc too

* extra data on constraint info

* add initial delete

* fix types and circular dep issue after rebase

* fix quirk with horz vert line overlays

* fix setup and tear down of overlays

* remove overlays that are too small

* throttle overlay updates and prove tests selecting html instead of hardcoded px coords

* initial show overaly on segment hover

* remove overlays when tool is equipped

* dounce overlay updates

* tsc

* make higlighting robust to small changes in source ranges

* replace with variable for unconstrained values, and improve styles for popover

* background tweak

* make overlays unconstrain inputs

* fix small regression

* write query for finding related tag references

* make delete segment safe

* typo

* un used imports

* test deleteSegmentFromPipeExpression

* add getConstraintInfo test

* test removeSingleConstraintInfo

* more tests

* tsc

* add tests for overlay buttons

* rename tests

* fmt

* better naming structure

* more reliablity

* more test tweaks

* fix selection test

* add delete segments with overlays tests

* dependant tag tests for segment delet

* typo

* test clean up

* fix some perf issus

* clean up

* clean up

* make things a little more dry

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

* trigger ci

* Make constraint hover popovers readable on light mode

* Touch up the new variable dialog

* Little touch-up to three-dot menu style

* fix highlight issue

* fmt

* use optional chain

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

This reverts commit be3d61e4a3.

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

* disable var panel in sketch mode

* fix overlay tests after mergi in main

* test tweak

* try fix ubuntu

* fmt

* more test tweaks

* tweak

* tweaks

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Frank Noirot <frank@kittycad.io>

src/clientSideScene/sceneInfra.ts

@@ -21,14 +21,15 @@ import {
   TextureLoader,
   Texture,
 } from 'three'
-import { compareVec2Epsilon2 } from 'lang/std/sketch'
+import { Coords2d, compareVec2Epsilon2 } from 'lang/std/sketch'
 import { useModelingContext } from 'hooks/useModelingContext'
 import * as TWEEN from '@tweenjs/tween.js'
 import { Axis } from 'lib/selections'
 import { type BaseUnit } from 'lib/settings/settingsTypes'
 import { CameraControls } from './CameraControls'
 import { EngineCommandManager } from 'lang/std/engineConnection'
-import { MouseState } from 'machines/modelingMachine'
+import { MouseState, SegmentOverlayPayload } from 'machines/modelingMachine'
+import { getAngle, throttle } from 'lib/utils'
 import { Themes } from 'lib/theme'
 
 type SendType = ReturnType<typeof useModelingContext>['send']
@@ -154,8 +155,88 @@ export class SceneInfra {
   }
 
   modelingSend: SendType = (() => {}) as any
+  throttledModelingSend: any = (() => {}) as any
   setSend(send: SendType) {
     this.modelingSend = send
+    this.throttledModelingSend = throttle(send, 100)
+  }
+  overlayTimeout = 0
+  callbacks: (() => SegmentOverlayPayload | null)[] = []
+  _overlayCallbacks(callbacks: (() => SegmentOverlayPayload | null)[]) {
+    const segmentOverlayPayload: SegmentOverlayPayload = {
+      type: 'set-many',
+      overlays: {},
+    }
+    callbacks.forEach((cb) => {
+      const overlay = cb()
+      if (overlay?.type === 'set-one') {
+        segmentOverlayPayload.overlays[overlay.pathToNodeString] = overlay.seg
+      }
+    })
+    this.modelingSend({
+      type: 'Set Segment Overlays',
+      data: segmentOverlayPayload,
+    })
+  }
+  overlayCallbacks(
+    callbacks: (() => SegmentOverlayPayload | null)[],
+    instant = false
+  ) {
+    if (instant) {
+      this._overlayCallbacks(callbacks)
+      return
+    }
+    this.callbacks = callbacks
+    if (this.overlayTimeout) clearTimeout(this.overlayTimeout)
+    this.overlayTimeout = setTimeout(() => {
+      this._overlayCallbacks(this.callbacks)
+    }, 100) as unknown as number
+  }
+
+  overlayThrottleMap: { [pathToNodeString: string]: number } = {}
+  updateOverlayDetails({
+    arrowGroup,
+    group,
+    isHandlesVisible,
+    from,
+    to,
+    angle,
+  }: {
+    arrowGroup: Group
+    group: Group
+    isHandlesVisible: boolean
+    from: Coords2d
+    to: Coords2d
+    angle?: number
+  }): SegmentOverlayPayload | null {
+    if (group.userData.pathToNode && arrowGroup) {
+      const vector = new Vector3(0, 0, 0)
+
+      // Get the position of the object3D in world space
+      // console.log('arrowGroup', arrowGroup)
+      arrowGroup.getWorldPosition(vector)
+
+      // Project that position to screen space
+      vector.project(this.camControls.camera)
+
+      const _angle = typeof angle === 'number' ? angle : getAngle(from, to)
+
+      const x = (vector.x * 0.5 + 0.5) * window.innerWidth
+      const y = (-vector.y * 0.5 + 0.5) * window.innerHeight
+      const pathToNodeString = JSON.stringify(group.userData.pathToNode)
+      return {
+        type: 'set-one',
+        pathToNodeString,
+        seg: {
+          windowCoords: [x, y],
+          angle: _angle,
+          group,
+          pathToNode: group.userData.pathToNode,
+          visible: isHandlesVisible,
+        },
+      }
+    }
+    return null
   }
 
   hoveredObject: null | any = null