Add Delete to right-click context menu of feature tree operations

e2e/playwright/point-click.spec.ts

@@ -5,6 +5,7 @@ import { ToolbarFixture } from './fixtures/toolbarFixture'
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { getUtils } from './test-utils'
+import { Locator } from '@playwright/test'
 
 // test file is for testing point an click code gen functionality that's not sketch mode related
 
@@ -2506,6 +2507,94 @@ extrude002 = extrude(sketch002, length = 50)
     })
   })
 
+  const shellPointAndClickDeletionCases = [
+    { shouldUseKeyboard: true },
+    { shouldUseKeyboard: false },
+  ]
+  shellPointAndClickDeletionCases.forEach(({ shouldUseKeyboard }) => {
+    test(`Shell point-and-click deletion (shouldUseKeyboard: ${shouldUseKeyboard})`, async ({
+      context,
+      page,
+      homePage,
+      scene,
+      editor,
+      toolbar,
+      cmdBar,
+    }) => {
+      const sketchCode = `sketch001 = startSketchOn('XY')
+profile001 = startProfileAt([-20, 20], sketch001)
+    |> xLine(40, %)
+    |> yLine(-60, %)
+    |> xLine(-40, %)
+    |> line(endAbsolute = [profileStartX(%), profileStartY(%)])
+    |> close()
+`
+      const extrudeCode = `extrude001 = extrude(profile001, length = 40)
+`
+      const shellCode = `shell001 = shell(extrude001, faces = ['end'], thickness = 5)
+`
+      const initialCode = sketchCode + extrudeCode + shellCode
+      await context.addInitScript((initialCode) => {
+        localStorage.setItem('persistCode', initialCode)
+      }, initialCode)
+      await page.setBodyDimensions({ width: 1000, height: 500 })
+      await homePage.goToModelingScene()
+      await scene.waitForExecutionDone()
+      await toolbar.openPane('feature-tree')
+
+      // One dumb hardcoded screen pixel value
+      const testPoint = { x: 590, y: 400 }
+      const extrudeColor: [number, number, number] = [100, 100, 100]
+      const sketchColor: [number, number, number] = [140, 140, 140]
+      const defaultPlaneColor: [number, number, number] = [50, 50, 100]
+
+      const deleteOperation = async (operationButton: Locator) => {
+        if (shouldUseKeyboard) {
+          await operationButton.click({ button: 'left' })
+          await page.keyboard.press('Backspace')
+        } else {
+          await operationButton.click({ button: 'right' })
+          const editButton = page.getByTestId('context-menu-delete')
+          await editButton.click()
+        }
+      }
+
+      await test.step(`Look for the grey of the extrude shape`, async () => {
+        await scene.expectPixelColor(extrudeColor, testPoint, 20)
+      })
+
+      await test.step('Delete shell and confirm deletion', async () => {
+        const operationButton = await toolbar.getFeatureTreeOperation(
+          'Shell',
+          0
+        )
+        await deleteOperation(operationButton)
+        await scene.expectPixelColor(extrudeColor, testPoint, 20)
+        await editor.expectEditor.not.toContain(shellCode)
+      })
+
+      await test.step('Delete extrude and confirm deletion', async () => {
+        const operationButton = await toolbar.getFeatureTreeOperation(
+          'Extrude',
+          0
+        )
+        await deleteOperation(operationButton)
+        await editor.expectEditor.not.toContain(extrudeCode)
+        await scene.expectPixelColor(sketchColor, testPoint, 20)
+      })
+
+      await test.step('Delete sketch and confirm empty scene', async () => {
+        const operationButton = await toolbar.getFeatureTreeOperation(
+          'Sketch',
+          0
+        )
+        await deleteOperation(operationButton)
+        await editor.expectEditor.toContain('')
+        await scene.expectPixelColor(defaultPlaneColor, testPoint, 20)
+      })
+    })
+  })
+
   test(`Shell dry-run validation rejects sweeps`, async ({
     context,
     page,

e2e/playwright/sketch-tests.spec.ts

@@ -2029,9 +2029,6 @@ profile003 = circle({ center = [6.92, -4.2], radius = 3.16 }, sketch001)
         await moveToClearToolBarPopover()
         await pointOnSegment({ shouldDbClick: true })
         await page.waitForTimeout(600)
-
-        await toolbar.lineBtn.click()
-        await page.waitForTimeout(100)
       })
 
       await test.step('select and delete code for a profile', async () => {})

public/kcl-samples-manifest-fallback.json

@@ -34,6 +34,13 @@
     "title": "Car Wheel Assembly",
     "description": "A car wheel assembly with a rotor, tire, and lug nuts."
   },
+  {
+    "file": "main.kcl",
+    "pathFromProjectDirectoryToFirstFile": "color-cube/main.kcl",
+    "multipleFiles": false,
+    "title": "Color Cube",
+    "description": "This is a color cube centered about the origin. It is used to help determine orientation in the scene."
+  },
   {
     "file": "main.kcl",
     "pathFromProjectDirectoryToFirstFile": "cycloidal-gear/main.kcl",

src/components/ContextMenu.tsx

@@ -1,7 +1,6 @@
 import toast from 'react-hot-toast'
 import { ActionIcon, ActionIconProps } from './ActionIcon'
 import {
-  MouseEvent,
   RefObject,
   useCallback,
   useEffect,
@@ -148,24 +147,22 @@ interface ContextMenuItemProps {
   onClick?: () => void
   hotkey?: string
   'data-testid'?: string
+  disabled?: boolean
 }
 
 export function ContextMenuItem(props: ContextMenuItemProps) {
-  const { children, icon, onClick, hotkey } = props
+  const { children, icon, onClick, hotkey, disabled } = props
 
   return (
     <button
+      disabled={disabled}
       data-testid={props['data-testid']}
       className="flex items-center gap-2 py-1 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none text-left"
-      onClick={onClick}
+      onClick={disabled ? undefined : onClick}
     >
       {icon && <ActionIcon icon={icon} bgClassName="!bg-transparent" />}
       <div className="flex-1">{children}</div>
-      {hotkey && (
-        <kbd className="px-1.5 py-0.5 rounded bg-primary/10 text-primary dark:bg-chalkboard-80 dark:text-chalkboard-40">
-          {hotkey}
-        </kbd>
-      )}
+      {hotkey && <kbd className="hotkey">{hotkey}</kbd>}
     </button>
   )
 }

src/components/ModelingSidebar/ModelingPanes/FeatureTreePane.tsx

@@ -324,6 +324,20 @@ const OperationItem = (props: {
     }
   }
 
+  function deleteOperation() {
+    if (
+      props.item.type === 'StdLibCall' ||
+      props.item.type === 'UserDefinedFunctionCall'
+    ) {
+      props.send({
+        type: 'deleteOperation',
+        data: {
+          targetSourceRange: sourceRangeFromRust(props.item.sourceRange),
+        },
+      })
+    }
+  }
+
   const menuItems = useMemo(
     () => [
       <ContextMenuItem
@@ -364,14 +378,24 @@ const OperationItem = (props: {
             </ContextMenuItem>,
           ]
         : []),
-      ...(props.item.type === 'StdLibCall' &&
-      stdLibMap[props.item.name]?.prepareToEdit
+      ...(props.item.type === 'StdLibCall'
         ? [
-            <ContextMenuItem onClick={enterEditFlow}>
-              Edit {name}
+            <ContextMenuItem
+              disabled={!stdLibMap[props.item.name]?.prepareToEdit}
+              onClick={enterEditFlow}
+              hotkey="Double click"
+            >
+              Edit
             </ContextMenuItem>,
           ]
         : []),
+      <ContextMenuItem
+        onClick={deleteOperation}
+        hotkey="Delete"
+        data-testid="context-menu-delete"
+      >
+        Delete
+      </ContextMenuItem>,
     ],
     [props.item, props.send]
   )

src/lang/modifyAst/deleteSelection.ts

@@ -0,0 +1,38 @@
+import { Selection } from 'lib/selections'
+import { getFaceDetails } from 'clientSideScene/sceneEntities'
+import { deleteFromSelection } from 'lang/modifyAst'
+import { codeManager, engineCommandManager, kclManager } from 'lib/singletons'
+import { err } from 'lib/trap'
+import { executeAst } from 'lang/langHelpers'
+
+export const deletionErrorMessage =
+  'Unable to delete selection. Please edit manually in code pane.'
+
+export async function deleteSelectionPromise(
+  selection: Selection
+): Promise<Error | void> {
+  let ast = kclManager.ast
+
+  const modifiedAst = await deleteFromSelection(
+    ast,
+    selection,
+    kclManager.variables,
+    engineCommandManager.artifactGraph,
+    getFaceDetails
+  )
+  if (err(modifiedAst)) {
+    return new Error(deletionErrorMessage)
+  }
+
+  const testExecute = await executeAst({
+    ast: modifiedAst,
+    engineCommandManager,
+    isMock: true,
+  })
+  if (testExecute.errors.length) {
+    return new Error(deletionErrorMessage)
+  }
+
+  await kclManager.updateAst(modifiedAst, true)
+  await codeManager.updateEditorWithAstAndWriteToFile(modifiedAst)
+}

src/lib/commandBarConfigs/modelingCommandConfig.ts

@@ -106,6 +106,7 @@ export type ModelingCommandSchema = {
     prompt: string
     selection: Selections
   }
+  'Delete selection': {}
 }
 
 export const modelingMachineCommandConfig: StateMachineCommandSetConfig<