Right click a feature on the model to center the code pane on it

e2e/playwright/fixtures/sceneFixture.ts

@@ -16,6 +16,7 @@ import { expect } from '@e2e/playwright/zoo-test'
 type MouseParams = {
   pixelDiff?: number
   shouldDbClick?: boolean
+  shouldRightClick?: boolean
   delay?: number
 }
 type MouseDragToParams = MouseParams & {
@@ -137,19 +138,29 @@ export class SceneFixture {
                 ? this.page.mouse.dblclick(resolvedPoint.x, resolvedPoint.y, {
                     delay: clickParams?.delay || 0,
                   })
-                : this.page.mouse.click(resolvedPoint.x, resolvedPoint.y, {
-                    delay: clickParams?.delay || 0,
-                  }),
+                : clickParams?.shouldRightClick
+                  ? this.page.mouse.click(resolvedPoint.x, resolvedPoint.y, {
+                      button: 'right',
+                      delay: clickParams?.delay || 0,
+                    })
+                  : this.page.mouse.click(resolvedPoint.x, resolvedPoint.y, {
+                      delay: clickParams?.delay || 0,
+                    }),
             clickParams.pixelDiff
           )
         }
         return clickParams?.shouldDbClick
           ? this.page.mouse.dblclick(resolvedPoint.x, resolvedPoint.y, {
               delay: clickParams?.delay || 0,
             })
-          : this.page.mouse.click(resolvedPoint.x, resolvedPoint.y, {
-              delay: clickParams?.delay || 0,
-            })
+          : clickParams?.shouldRightClick
+            ? this.page.mouse.click(resolvedPoint.x, resolvedPoint.y, {
+                button: 'right',
+                delay: clickParams?.delay || 0,
+              })
+            : this.page.mouse.click(resolvedPoint.x, resolvedPoint.y, {
+                delay: clickParams?.delay || 0,
+              })
       },
       async (moveParams?: MouseParams) => {
         const resolvedPoint = await this.convertPagePositionToStream(

e2e/playwright/testing-selections.spec.ts

@@ -1,6 +1,7 @@
 import { KCL_DEFAULT_LENGTH } from '@src/lib/constants'
 import { getUtils } from '@e2e/playwright/test-utils'
 import { expect, test } from '@e2e/playwright/zoo-test'
+import { bracket } from '@e2e/playwright/fixtures/bracket'
 
 test.describe('Testing selections', () => {
   test('parent Solid should be select and deletable and uses custom planes to position children', async ({
@@ -400,4 +401,56 @@ profile001 = startProfile(sketch001, at = [7.49, 9.96])
     )
     previousCodeContent = await page.locator('.cm-content').innerText()
   })
+
+  test('"View KCL source code" right click menu in scene', async ({
+    page,
+    homePage,
+    scene,
+    cmdBar,
+  }) => {
+    await page.setBodyDimensions({ width: 1200, height: 500 })
+    const [clickCenter] = scene.makeMouseHelpers(0.45, 0.45, {
+      format: 'ratio',
+    })
+    const [clickTowardsBottom] = scene.makeMouseHelpers(0.5, 0.9, {
+      format: 'ratio',
+    })
+    await page.addInitScript((initialCode) => {
+      localStorage.setItem('persistCode', initialCode)
+    }, bracket)
+
+    await homePage.goToModelingScene()
+    await scene.settled(cmdBar)
+
+    const line = page.getByText(
+      'xLine(length = -shelfMountLength, tag = $seg03)'
+    )
+    const menuItems = page.locator('[data-testid="view-controls-menu"] button')
+    const viewKclSourceCodeOption = menuItems.filter({
+      hasText: 'View KCL source code',
+    })
+
+    await test.step('Empty scene should have disabled "View KCL source code"', async () => {
+      await clickTowardsBottom({ shouldRightClick: true })
+
+      // Verify context menu appears
+      await expect(page.getByTestId('view-controls-menu')).toBeVisible()
+
+      // "View KCL source code" should be disabled in empty scene
+      await expect(viewKclSourceCodeOption).toBeVisible()
+      await expect(viewKclSourceCodeOption).toBeDisabled()
+      await page.keyboard.press('Escape')
+    })
+
+    await test.step('Right click on bracket sample leads to the right place in code', async () => {
+      await expect(line).not.toBeVisible()
+      await clickCenter()
+      await expect(page.getByText('1 face')).toBeVisible()
+      await clickCenter({ shouldRightClick: true })
+      await expect(viewKclSourceCodeOption).toBeVisible()
+      await expect(viewKclSourceCodeOption).toBeEnabled()
+      await viewKclSourceCodeOption.click()
+      await expect(line).toBeVisible()
+    })
+  })
 })

src/components/ViewControlMenu.tsx

@@ -19,6 +19,7 @@
   selectOffsetSketchPlane,
 } from '@src/lib/selections'
 import { getSelectedPlaneId } from '@src/lang/queryAst'
+import toast from 'react-hot-toast'
 
 export function useViewControlMenuItems() {
   const { state: modelingState, send: modelingSend } = useModelingContext()
@@ -30,6 +31,20 @@
   const shouldLockView =
     modelingState.matches('Sketch') &&
     !settings.app.allowOrbitInSketchMode.current
+
+  // Check if there's a valid selection with source range for "View KCL source code"
+  const firstValidSelection = useMemo(() => {
+    return modelingState.context.selectionRanges.graphSelections.find(
+      (selection) => {
+        return (
+          selection.codeRef?.range &&
+          selection.codeRef.range[0] !== undefined &&
+          selection.codeRef.range[1] !== undefined
+        )
+      }
+    )
+  }, [modelingState.context.selectionRanges.graphSelections])
+
   const menuItems = useMemo(
     () => [
       ...Object.entries(VIEW_NAMES_SEMANTIC).map(([axisName, axisSemantic]) => (
@@ -64,6 +79,41 @@
       >
         Center view on selection
       </ContextMenuItem>,
+      <ContextMenuItem
+        onClick={() => {
+          if (firstValidSelection?.codeRef?.range) {
+            // First, open the code pane if it's not already open
+            if (!modelingState.context.store.openPanes.includes('code')) {
+              modelingSend({
+                type: 'Set context',
+                data: {
+                  openPanes: [...modelingState.context.store.openPanes, 'code'],
+                },
+              })
+            }
+
+            // Navigate to the source code location
+            modelingSend({
+              type: 'Set selection',
+              data: {
+                selectionType: 'singleCodeCursor',
+                selection: {
+                  artifact: firstValidSelection.artifact,
+                  codeRef: firstValidSelection.codeRef,
+                },
+                scrollIntoView: true,
+              },
+            })
+          } else {
+            toast.error(
+              'No valid selection with source range found. Please select a valid element.'
+            )
+          }
+        }}
+        disabled={!firstValidSelection}
+      >
+        View KCL source code
+      </ContextMenuItem>,
       <ContextMenuDivider />,
       <ContextMenuItem
         onClick={() => {
@@ -94,7 +144,13 @@
       <ContextMenuItemRefresh />,
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps -- TODO: blanket-ignored fix me!
-    [VIEW_NAMES_SEMANTIC, shouldLockView, selectedPlaneId]
+    [
+      VIEW_NAMES_SEMANTIC,
+      shouldLockView,
+      selectedPlaneId,
+      firstValidSelection,
+      modelingState.context.store.openPanes,
+    ]
   )
   return menuItems
 }