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/hooks/useToolbarGuards.ts

@@ -7,10 +7,13 @@ import { moveValueIntoNewVariable } from 'lang/modifyAst'
 import { isNodeSafeToReplace } from 'lang/queryAst'
 import { useEffect, useState } from 'react'
 import { useModelingContext } from './useModelingContext'
+import { PathToNode, SourceRange, parse, recast } from 'lang/wasm'
+import { useKclContext } from 'lang/KclProvider'
 
-const getModalInfo = createSetVarNameModal(SetVarNameModal)
+export const getVarNameModal = createSetVarNameModal(SetVarNameModal)
 
-export function useConvertToVariable() {
+export function useConvertToVariable(range?: SourceRange) {
+  const { ast } = useKclContext()
   const { context } = useModelingContext()
   const [enable, setEnabled] = useState(false)
 
@@ -20,31 +23,34 @@ export function useConvertToVariable() {
 
   useEffect(() => {
     const { isSafe, value } = isNodeSafeToReplace(
-      kclManager.ast,
-      context.selectionRanges.codeBasedSelections?.[0]?.range || []
+      parse(recast(ast)),
+      range || context.selectionRanges.codeBasedSelections?.[0]?.range || []
     )
     const canReplace = isSafe && value.type !== 'Identifier'
     const isOnlyOneSelection =
-      context.selectionRanges.codeBasedSelections.length === 1
+      !!range || context.selectionRanges.codeBasedSelections.length === 1
 
-    const _enableHorz = canReplace && isOnlyOneSelection
-    setEnabled(_enableHorz)
+    setEnabled(canReplace && isOnlyOneSelection)
   }, [context.selectionRanges])
 
-  const handleClick = async () => {
+  const handleClick = async (
+    valueName?: string
+  ): Promise<PathToNode | undefined> => {
     try {
-      const { variableName } = await getModalInfo({
-        valueName: 'var',
+      const { variableName } = await getVarNameModal({
+        valueName: valueName || 'var',
       })
 
-      const { modifiedAst: _modifiedAst } = moveValueIntoNewVariable(
-        kclManager.ast,
-        kclManager.programMemory,
-        context.selectionRanges.codeBasedSelections[0].range,
-        variableName
-      )
+      const { modifiedAst: _modifiedAst, pathToReplacedNode } =
+        moveValueIntoNewVariable(
+          ast,
+          kclManager.programMemory,
+          range || context.selectionRanges.codeBasedSelections[0].range,
+          variableName
+        )
 
-      kclManager.updateAst(_modifiedAst, true)
+      await kclManager.updateAst(_modifiedAst, true)
+      return pathToReplacedNode
     } catch (e) {
       console.log('error', e)
     }