fix single selection angle constraint (#2555)

* fix single selection angle constraint

* fix angle for multi selections

* make test more robust for makos

e2e/playwright/flow-tests.spec.ts

@@ -2440,6 +2440,186 @@ test('Extrude from command bar selects extrude line after', async ({
 })
 
 test.describe('Testing constraints', () => {
+  test.describe('Test Angle constraint double segment selection', () => {
+    const cases = [
+      {
+        testName: 'Add variable',
+        addVariable: true,
+        axisSelect: false,
+        value: "segAng('seg01', %) + angle001",
+      },
+      {
+        testName: 'No variable',
+        addVariable: false,
+        axisSelect: false,
+        value: "segAng('seg01', %) + 22.69",
+      },
+      {
+        testName: 'Add variable, selecting axis',
+        addVariable: true,
+        axisSelect: true,
+        value: 'QUARTER_TURN - angle001',
+      },
+      {
+        testName: 'No variable, selecting axis',
+        addVariable: false,
+        axisSelect: true,
+        value: 'QUARTER_TURN - 7',
+      },
+    ] as const
+    for (const { testName, addVariable, value, axisSelect } of cases) {
+      test(`${testName}`, async ({ page }) => {
+        await page.addInitScript(async () => {
+          localStorage.setItem(
+            'persistCode',
+            `const yo = 5
+const part001 = startSketchOn('XZ')
+  |> startProfileAt([-7.54, -26.74], %)
+  |> line([74.36, 130.4], %)
+  |> line([78.92, -120.11], %)
+  |> line([9.16, 77.79], %)
+  |> line([41.19, 28.97], %)
+const part002 = startSketchOn('XZ')
+  |> startProfileAt([299.05, 231.45], %)
+  |> xLine(-425.34, %, 'seg-what')
+  |> yLine(-264.06, %)
+  |> xLine(segLen('seg-what', %), %)
+  |> lineTo([profileStartX(%), profileStartY(%)], %)`
+          )
+        })
+        const u = await getUtils(page)
+        await page.setViewportSize({ width: 1200, height: 500 })
+        await page.goto('/')
+        await u.waitForAuthSkipAppStart()
+
+        await page.getByText('line([74.36, 130.4], %)').click()
+        await page.getByRole('button', { name: 'Edit Sketch' }).click()
+
+        const [line1, line3] = await Promise.all([
+          u.getSegmentBodyCoords(`[data-overlay-index="${0}"]`),
+          u.getSegmentBodyCoords(`[data-overlay-index="${2}"]`),
+        ])
+
+        if (axisSelect) {
+          await page.mouse.click(600, 130)
+        } else {
+          await page.mouse.click(line1.x, line1.y)
+        }
+        await page.keyboard.down('Shift')
+        await page.mouse.click(line3.x, line3.y)
+        await page.waitForTimeout(100) // this wait is needed for webkit - not sure why
+        await page.keyboard.up('Shift')
+        await page
+          .getByRole('button', {
+            name: 'Constrain',
+          })
+          .click()
+        await page.getByTestId('angle').click()
+
+        const createNewVariableCheckbox = page.getByTestId(
+          'create-new-variable-checkbox'
+        )
+        const isChecked = await createNewVariableCheckbox.isChecked()
+        ;((isChecked && !addVariable) || (!isChecked && addVariable)) &&
+          (await createNewVariableCheckbox.click())
+
+        await page
+          .getByRole('button', { name: 'Add constraining value' })
+          .click()
+
+        // checking activeLines assures the cursors are where they should be
+        const codeAfter = [
+          "|> line([74.36, 130.4], %, 'seg01')",
+          `|> angledLine([${value}, 78.33], %)`,
+        ]
+        if (axisSelect) codeAfter.shift()
+
+        const activeLinesContent = await page.locator('.cm-activeLine').all()
+        await Promise.all(
+          activeLinesContent.map(async (line, i) => {
+            await expect(page.locator('.cm-content')).toContainText(
+              codeAfter[i]
+            )
+            // if the code is an active line then the cursor should be on that line
+            await expect(line).toHaveText(codeAfter[i])
+          })
+        )
+
+        // checking the count of the overlays is a good proxy check that the client sketch scene is in a good state
+        await expect(page.getByTestId('segment-overlay')).toHaveCount(4)
+      })
+    }
+  })
+  test.describe('Test Angle constraint single selection', () => {
+    const cases = [
+      {
+        testName: 'Add variable',
+        addVariable: true,
+        value: 'angle001',
+      },
+      {
+        testName: 'No variable',
+        addVariable: false,
+        value: '83',
+      },
+    ] as const
+    for (const { testName, addVariable, value } of cases) {
+      test(`${testName}`, async ({ page }) => {
+        await page.addInitScript(async () => {
+          localStorage.setItem(
+            'persistCode',
+            `const yo = 5
+    const part001 = startSketchOn('XZ')
+      |> startProfileAt([-7.54, -26.74], %)
+      |> line([74.36, 130.4], %)
+      |> line([78.92, -120.11], %)
+      |> line([9.16, 77.79], %)
+      |> line([41.19, 28.97], %)
+    const part002 = startSketchOn('XZ')
+      |> startProfileAt([299.05, 231.45], %)
+      |> xLine(-425.34, %, 'seg-what')
+      |> yLine(-264.06, %)
+      |> xLine(segLen('seg-what', %), %)
+      |> lineTo([profileStartX(%), profileStartY(%)], %)`
+          )
+        })
+        const u = await getUtils(page)
+        await page.setViewportSize({ width: 1200, height: 500 })
+        await page.goto('/')
+        await u.waitForAuthSkipAppStart()
+
+        await page.getByText('line([74.36, 130.4], %)').click()
+        await page.getByRole('button', { name: 'Edit Sketch' }).click()
+
+        const line3 = await u.getSegmentBodyCoords(
+          `[data-overlay-index="${2}"]`
+        )
+
+        await page.mouse.click(line3.x, line3.y)
+        await page
+          .getByRole('button', {
+            name: 'Constrain',
+          })
+          .click()
+        await page.getByTestId('angle').click()
+
+        if (!addVariable) {
+          await page.getByTestId('create-new-variable-checkbox').click()
+        }
+        await page
+          .getByRole('button', { name: 'Add constraining value' })
+          .click()
+
+        const changedCode = `|> angledLine([${value}, 78.33], %)`
+        await expect(page.locator('.cm-content')).toContainText(changedCode)
+        // checking active assures the cursor is where it should be
+        await expect(page.locator('.cm-activeLine')).toHaveText(changedCode)
+
+        // checking the count of the overlays is a good proxy check that the client sketch scene is in a good state
+        await expect(page.getByTestId('segment-overlay')).toHaveCount(4)
+      })
+    }
+  })
   test.describe('Many segments - no modal constraints', () => {
     const cases = [
       {

e2e/playwright/test-utils.ts

@@ -132,6 +132,19 @@ export async function getUtils(page: Page) {
     },
     waitForCmdReceive: (commandType: string) =>
       waitForCmdReceive(page, commandType),
+    getSegmentBodyCoords: async (locator: string, px = 30) => {
+      const overlay = page.locator(locator)
+      const bbox = await overlay
+        .boundingBox()
+        .then((box) => ({ ...box, x: box?.x || 0, y: box?.y || 0 }))
+      const angle = Number(await overlay.getAttribute('data-overlay-angle'))
+      const angleXOffset = Math.cos(((angle - 180) * Math.PI) / 180) * px
+      const angleYOffset = Math.sin(((angle - 180) * Math.PI) / 180) * px
+      return {
+        x: bbox.x + angleXOffset,
+        y: bbox.y - angleYOffset,
+      }
+    },
     getBoundingBox: async (locator: string) =>
       page
         .locator(locator)

src/clientSideScene/ClientSideSceneComp.tsx

@@ -531,8 +531,7 @@ const ConstraintSymbol = ({
     varNameMap[_type as LineInputsType]?.implicitConstraintDesc
 
   const node = useMemo(
-    () =>
+    () => getNodeFromPath<Value>(kclManager.ast, pathToNode).node,
-      getNodeFromPath<Value>(parse(recast(kclManager.ast)), pathToNode).node,
     [kclManager.ast, pathToNode]
   )
   const range: SourceRange = node ? [node.start, node.end] : [0, 0]

src/components/ActionButtonDropdown.tsx

@@ -39,6 +39,7 @@ export function ActionButtonDropdown({
               onClick={item.onClick}
               className="block px-3 py-1 hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 text-sm w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
               disabled={item.disabled}
+              data-testid={item.label}
             >
               <span className="capitalize">{item.label}</span>
               {item.shortcut && (

src/components/AvailableVarsHelpers.tsx

@@ -214,13 +214,17 @@ export const CreateNewVariable = ({
 }) => {
   return (
     <>
-      <label htmlFor="create-new-variable" className="block mt-3 font-mono">
+      <label
+        htmlFor="create-new-variable"
+        className="block mt-3 font-mono text-chalkboard-90"
+      >
         Create new variable
       </label>
       <div className="mt-1 flex gap-2 items-center">
         {showCheckbox && (
           <input
             type="checkbox"
+            data-testid="create-new-variable-checkbox"
             checked={shouldCreateVariable}
             onChange={(e) => {
               setShouldCreateVariable(e.target.checked)

src/components/ModelingMachineProvider.tsx

@@ -11,7 +11,10 @@ import {
 import { SetSelections, modelingMachine } from 'machines/modelingMachine'
 import { useSetupEngineManager } from 'hooks/useSetupEngineManager'
 import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
-import { isCursorInSketchCommandRange } from 'lang/util'
+import {
+  isCursorInSketchCommandRange,
+  updatePathToNodeFromMap,
+} from 'lang/util'
 import {
   kclManager,
   sceneInfra,
@@ -34,7 +37,6 @@ import {
   handleSelectionBatch,
   isSelectionLastLine,
   isSketchPipe,
-  updateSelections,
 } from 'lib/selections'
 import { applyConstraintIntersect } from './Toolbar/Intersect'
 import { applyConstraintAbsDistance } from './Toolbar/SetAbsDistance'
@@ -54,7 +56,6 @@ import {
 } from 'lang/modifyAst'
 import {
   Program,
-  Value,
   VariableDeclaration,
   coreDump,
   parse,
@@ -75,7 +76,6 @@ import { useSearchParams } from 'react-router-dom'
 import { letEngineAnimateAndSyncCamAfter } from 'clientSideScene/CameraControls'
 import { getVarNameModal } from 'hooks/useToolbarGuards'
 import useHotkeyWrapper from 'lib/hotkeyWrapper'
-import { applyConstraintEqualAngle } from './Toolbar/EqualAngle'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -221,7 +221,7 @@ export const ModelingMachineProvider = ({
               }
             : {}
         ),
-        'Set selection': assign(({ selectionRanges }, event) => {
+        'Set selection': assign(({ selectionRanges, sketchDetails }, event) => {
           const setSelections = event.data as SetSelections // this was needed for ts after adding 'Set selection' action to on done modal events
           if (!editorManager.editorView) return {}
           const dispatchSelection = (selection?: EditorSelection) => {
@@ -311,9 +311,20 @@ export const ModelingMachineProvider = ({
           }
           if (setSelections.selectionType === 'completeSelection') {
             editorManager.selectRange(setSelections.selection)
+            if (!sketchDetails)
               return {
                 selectionRanges: setSelections.selection,
               }
+            return {
+              selectionRanges: setSelections.selection,
+              sketchDetails: {
+                ...sketchDetails,
+                sketchPathToNode:
+                  setSelections.updatedPathToNode ||
+                  sketchDetails?.sketchPathToNode ||
+                  [],
+              },
+            }
           }
 
           return {}
@@ -533,6 +544,7 @@ export const ModelingMachineProvider = ({
         },
         'Get angle info': async ({
           selectionRanges,
+          sketchDetails,
         }): Promise<SetSelections> => {
           const { modifiedAst, pathToNodeMap } = await (angleBetweenInfo({
             selectionRanges,
@@ -544,14 +556,27 @@ export const ModelingMachineProvider = ({
                 selectionRanges,
                 angleOrLength: 'setAngle',
               }))
-          await kclManager.updateAst(modifiedAst, true)
+          const _modifiedAst = parse(recast(modifiedAst))
+          if (!sketchDetails) throw new Error('No sketch details')
+          const updatedPathToNode = updatePathToNodeFromMap(
+            sketchDetails.sketchPathToNode,
+            pathToNodeMap
+          )
+          await sceneEntitiesManager.updateAstAndRejigSketch(
+            updatedPathToNode,
+            _modifiedAst,
+            sketchDetails.zAxis,
+            sketchDetails.yAxis,
+            sketchDetails.origin
+          )
           return {
             selectionType: 'completeSelection',
             selection: pathMapToSelections(
-              kclManager.ast,
+              _modifiedAst,
               selectionRanges,
               pathToNodeMap
             ),
+            updatedPathToNode,
           }
         },
         'Get length info': async ({

src/components/Toolbar/SetAngleBetween.tsx

@@ -98,7 +98,11 @@ export async function applyConstraintAngleBetween({
     value: valueUsedInTransform,
     initialVariableName: 'angle',
   } as any)
-  if (segName === tagInfo?.tag && Number(value) === valueUsedInTransform) {
+  if (
+    segName === tagInfo?.tag &&
+    Number(value) === valueUsedInTransform &&
+    !variableName
+  ) {
     return {
       modifiedAst,
       pathToNodeMap,
@@ -128,6 +132,10 @@ export async function applyConstraintAngleBetween({
       createVariableDeclaration(variableName, valueNode)
     )
     _modifiedAst.body = newBody
+    Object.values(_pathToNodeMap).forEach((pathToNode) => {
+      const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
+      pathToNode[index][0] = Number(pathToNode[index][0]) + 1
+    })
   }
   return {
     modifiedAst: _modifiedAst,

src/components/Toolbar/setAngleLength.tsx

@@ -138,6 +138,10 @@ export async function applyConstraintAngleLength({
         createVariableDeclaration(variableName, valueNode)
       )
       _modifiedAst.body = newBody
+      Object.values(pathToNodeMap).forEach((pathToNode) => {
+        const index = pathToNode.findIndex((a) => a[0] === 'body') + 1
+        pathToNode[index][0] = Number(pathToNode[index][0]) + 1
+      })
     }
     return {
       modifiedAst: _modifiedAst,

src/lang/util.ts

@@ -26,6 +26,22 @@ export function pathMapToSelections(
   return newSelections
 }
 
+export function updatePathToNodeFromMap(
+  oldPath: PathToNode,
+  pathToNodeMap: { [key: number]: PathToNode }
+): PathToNode {
+  const updatedPathToNode = JSON.parse(JSON.stringify(oldPath))
+  let max = 0
+  Object.values(pathToNodeMap).forEach((path) => {
+    const index = Number(path[1][0])
+    if (index > max) {
+      max = index
+    }
+  })
+  updatedPathToNode[1][0] = max
+  return updatedPathToNode
+}
+
 export function isCursorInSketchCommandRange(
   artifactMap: ArtifactMap,
   selectionRanges: Selections

src/machines/modelingMachine.ts

@@ -64,6 +64,7 @@ export type SetSelections =
   | {
       selectionType: 'completeSelection'
       selection: Selections
+      updatedPathToNode?: PathToNode
     }
   | {
       selectionType: 'mirrorCodeMirrorSelections'