#7408 Can not pick sketch plane using the feature tree and related improvements (#7609)

* Add ability to pick default plane in feature tree in 'Sketch no face' mode

* add ability to select deoffset plane where starting a new sketch

* use selectDefaultSketchPlane

* refactor: remove some duplication

* warning cleanups

* feature tree items selectable depedngin on no face sketch mode

* lint

* fix small jump because of border:none when going into and back from 'No face sketch' mode

* grey out items other than offset planes in 'No face sketch' mode

* start sketching on plane in context menu

* sketch on offset plane with context menu

* add ability to right click on default plane and start sketch on it

* default planes in feature tree should be selectable because of right click context menu

* add right click Start sketch option for selected plane on the canvas

* selectDefaultSketchPlane returns error now

* circular deps

* move select functions to lib/selections.ts to avoid circular deps

* add test for clicking on feature tree after starting a new sketch

* graphite suggestion

* fix bug of not being able to create offset plane using another offset plane with command bar

* add ability to select default plane on feature when going through the Offset plane command bar flow

Author: andrewvarga

e2e/playwright/sketch-tests.spec.ts

@@ -187,6 +187,68 @@ sketch001 = startProfile(sketch002, at = [12.34, -12.34])
       page.getByRole('button', { name: 'Start Sketch' })
     ).toBeVisible()
   })
+
+  test('Can select planes in Feature Tree after Start Sketch', async ({
+    page,
+    homePage,
+    toolbar,
+    editor,
+  }) => {
+    // Load the app with empty code
+    await page.addInitScript(async () => {
+      localStorage.setItem(
+        'persistCode',
+        `plane001 = offsetPlane(XZ, offset = 5)`
+      )
+    })
+
+    await page.setBodyDimensions({ width: 1200, height: 500 })
+
+    await homePage.goToModelingScene()
+
+    await test.step('Click Start Sketch button', async () => {
+      await page.getByRole('button', { name: 'Start Sketch' }).click()
+      await expect(
+        page.getByRole('button', { name: 'Exit Sketch' })
+      ).toBeVisible()
+      await expect(page.getByText('select a plane or face')).toBeVisible()
+    })
+
+    await test.step('Open feature tree and select Front plane (XZ)', async () => {
+      await toolbar.openFeatureTreePane()
+
+      await page.getByRole('button', { name: 'Front plane' }).click()
+
+      await page.waitForTimeout(600)
+
+      await expect(toolbar.lineBtn).toBeEnabled()
+      await editor.expectEditor.toContain('startSketchOn(XZ)')
+
+      await page.getByRole('button', { name: 'Exit Sketch' }).click()
+      await expect(
+        page.getByRole('button', { name: 'Start Sketch' })
+      ).toBeVisible()
+    })
+
+    await test.step('Click Start Sketch button again', async () => {
+      await page.getByRole('button', { name: 'Start Sketch' }).click()
+      await expect(
+        page.getByRole('button', { name: 'Exit Sketch' })
+      ).toBeVisible()
+    })
+
+    await test.step('Select the offset plane', async () => {
+      await toolbar.openFeatureTreePane()
+
+      await page.getByRole('button', { name: 'Offset plane' }).click()
+
+      await page.waitForTimeout(600)
+
+      await expect(toolbar.lineBtn).toBeEnabled()
+      await editor.expectEditor.toContain('startSketchOn(plane001)')
+    })
+  })
+
   test('Can edit segments by dragging their handles', () => {
     const doEditSegmentsByDraggingHandle = async (
       page: Page,

src/components/ModelingSidebar/ModelingPanes/FeatureTreePane.tsx

@@ -24,7 +24,12 @@ import {
   getOperationVariableName,
   stdLibMap,
 } from '@src/lib/operations'
-import { editorManager, kclManager, rustContext } from '@src/lib/singletons'
+import {
+  editorManager,
+  kclManager,
+  rustContext,
+  sceneInfra,
+} from '@src/lib/singletons'
 import {
   featureTreeMachine,
   featureTreeMachineDefaultContext,
@@ -34,11 +39,20 @@ import {
   kclEditorActor,
   selectionEventSelector,
 } from '@src/machines/kclEditorMachine'
+import type { Plane } from '@rust/kcl-lib/bindings/Artifact'
+import {
+  selectDefaultSketchPlane,
+  selectOffsetSketchPlane,
+} from '@src/lib/selections'
+import type { DefaultPlaneStr } from '@src/lib/planes'
 
 export const FeatureTreePane = () => {
   const isEditorMounted = useSelector(kclEditorActor, editorIsMountedSelector)
   const lastSelectionEvent = useSelector(kclEditorActor, selectionEventSelector)
   const { send: modelingSend, state: modelingState } = useModelingContext()
+
+  const sketchNoFace = modelingState.matches('Sketch no face')
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_featureTreeState, featureTreeSend] = useMachine(
     featureTreeMachine.provide({
@@ -195,6 +209,7 @@ export const FeatureTreePane = () => {
                   key={key}
                   item={operation}
                   send={featureTreeSend}
+                  sketchNoFace={sketchNoFace}
                 />
               )
             })}
@@ -251,6 +266,7 @@ const OperationItemWrapper = ({
   customSuffix,
   className,
   selectable = true,
+  greyedOut = false,
   ...props
 }: React.HTMLAttributes<HTMLButtonElement> & {
   icon: CustomIconName
@@ -262,18 +278,19 @@ const OperationItemWrapper = ({
   menuItems?: ComponentProps<typeof ContextMenu>['items']
   errors?: Diagnostic[]
   selectable?: boolean
+  greyedOut?: boolean
 }) => {
   const menuRef = useRef<HTMLDivElement>(null)
 
   return (
     <div
       ref={menuRef}
-      className={`flex select-none items-center group/item my-0 py-0.5 px-1 ${selectable ? 'focus-within:bg-primary/10 hover:bg-primary/5' : ''}`}
+      className={`flex select-none items-center group/item my-0 py-0.5 px-1 ${selectable ? 'focus-within:bg-primary/10 hover:bg-primary/5' : ''} ${greyedOut ? 'opacity-50 cursor-not-allowed' : ''}`}
       data-testid="feature-tree-operation-item"
     >
       <button
         {...props}
-        className={`reset !py-0.5 !px-1 flex-1 flex items-center gap-2 text-left text-base ${selectable ? 'border-transparent dark:border-transparent' : 'border-none cursor-default'} ${className}`}
+        className={`reset !py-0.5 !px-1 flex-1 flex items-center gap-2 text-left text-base ${selectable ? 'border-transparent dark:border-transparent' : '!border-transparent cursor-default'} ${className}`}
       >
         <CustomIcon name={icon} className="w-5 h-5 block" />
         <div className="flex flex-1 items-baseline align-baseline">
@@ -311,6 +328,7 @@ const OperationItemWrapper = ({
 const OperationItem = (props: {
   item: Operation
   send: Prop<Actor<typeof featureTreeMachine>, 'send'>
+  sketchNoFace: boolean
 }) => {
   const kclContext = useKclContext()
   const name = getOperationLabel(props.item)
@@ -343,15 +361,22 @@ const OperationItem = (props: {
   }, [kclContext.diagnostics.length])
 
   function selectOperation() {
-    if (props.item.type === 'GroupEnd') {
-      return
+    if (props.sketchNoFace) {
+      if (isOffsetPlane(props.item)) {
+        const artifact = findOperationArtifact(props.item)
+        void selectOffsetSketchPlane(artifact)
+      }
+    } else {
+      if (props.item.type === 'GroupEnd') {
+        return
+      }
+      props.send({
+        type: 'selectOperation',
+        data: {
+          targetSourceRange: sourceRangeFromRust(props.item.sourceRange),
+        },
+      })
     }
-    props.send({
-      type: 'selectOperation',
-      data: {
-        targetSourceRange: sourceRangeFromRust(props.item.sourceRange),
-      },
-    })
   }
 
   /**
@@ -432,6 +457,20 @@ const OperationItem = (props: {
     }
   }
 
+  function startSketchOnOffsetPlane() {
+    if (isOffsetPlane(props.item)) {
+      const artifact = findOperationArtifact(props.item)
+      if (artifact?.id) {
+        sceneInfra.modelingSend({
+          type: 'Enter sketch',
+          data: { forceNewSketch: true },
+        })
+
+        void selectOffsetSketchPlane(artifact)
+      }
+    }
+  }
+
   const menuItems = useMemo(
     () => [
       <ContextMenuItem
@@ -477,6 +516,13 @@ const OperationItem = (props: {
             </ContextMenuItem>,
           ]
         : []),
+      ...(isOffsetPlane(props.item)
+        ? [
+            <ContextMenuItem onClick={startSketchOnOffsetPlane}>
+              Start Sketch
+            </ContextMenuItem>,
+          ]
+        : []),
       ...(props.item.type === 'StdLibCall' ||
       props.item.type === 'VariableDeclaration'
         ? [
@@ -550,22 +596,63 @@ const OperationItem = (props: {
     [props.item, props.send]
   )
 
+  const enabled = !props.sketchNoFace || isOffsetPlane(props.item)
+
   return (
     <OperationItemWrapper
+      selectable={enabled}
       icon={getOperationIcon(props.item)}
       name={name}
       variableName={variableName}
       valueDetail={valueDetail}
       menuItems={menuItems}
       onClick={selectOperation}
-      onDoubleClick={enterEditFlow}
+      onDoubleClick={props.sketchNoFace ? undefined : enterEditFlow} // no double click in "Sketch no face" mode
       errors={errors}
+      greyedOut={!enabled}
     />
   )
 }
 
 const DefaultPlanes = () => {
   const { state: modelingState, send } = useModelingContext()
+  const sketchNoFace = modelingState.matches('Sketch no face')
+
+  const onClickPlane = useCallback(
+    (planeId: string) => {
+      if (sketchNoFace) {
+        selectDefaultSketchPlane(planeId)
+      } else {
+        const foundDefaultPlane =
+          rustContext.defaultPlanes !== null &&
+          Object.entries(rustContext.defaultPlanes).find(
+            ([, plane]) => plane === planeId
+          )
+        if (foundDefaultPlane) {
+          send({
+            type: 'Set selection',
+            data: {
+              selectionType: 'defaultPlaneSelection',
+              selection: {
+                name: foundDefaultPlane[0] as DefaultPlaneStr,
+                id: planeId,
+              },
+            },
+          })
+        }
+      }
+    },
+    [sketchNoFace]
+  )
+
+  const startSketchOnDefaultPlane = useCallback((planeId: string) => {
+    sceneInfra.modelingSend({
+      type: 'Enter sketch',
+      data: { forceNewSketch: true },
+    })
+
+    selectDefaultSketchPlane(planeId)
+  }, [])
 
   const defaultPlanes = rustContext.defaultPlanes
   if (!defaultPlanes) return null
@@ -603,7 +690,15 @@ const DefaultPlanes = () => {
           customSuffix={plane.customSuffix}
           icon={'plane'}
           name={plane.name}
-          selectable={false}
+          selectable={true}
+          onClick={() => onClickPlane(plane.id)}
+          menuItems={[
+            <ContextMenuItem
+              onClick={() => startSketchOnDefaultPlane(plane.id)}
+            >
+              Start Sketch
+            </ContextMenuItem>,
+          ]}
           visibilityToggle={{
             visible: modelingState.context.defaultPlaneVisibility[plane.key],
             onVisibilityChange: () => {
@@ -620,3 +715,17 @@ const DefaultPlanes = () => {
     </div>
   )
 }
+
+type StdLibCallOp = Extract<Operation, { type: 'StdLibCall' }>
+
+const isOffsetPlane = (item: Operation): item is StdLibCallOp => {
+  return item.type === 'StdLibCall' && item.name === 'offsetPlane'
+}
+
+const findOperationArtifact = (item: StdLibCallOp) => {
+  const nodePath = JSON.stringify(item.nodePath)
+  const artifact = [...kclManager.artifactGraph.values()].find(
+    (a) => JSON.stringify((a as Plane).codeRef?.nodePath) === nodePath
+  )
+  return artifact
+}

src/components/ViewControlMenu.tsx

@@ -10,13 +10,22 @@ import {
 import { useModelingContext } from '@src/hooks/useModelingContext'
 import type { AxisNames } from '@src/lib/constants'
 import { VIEW_NAMES_SEMANTIC } from '@src/lib/constants'
-import { sceneInfra } from '@src/lib/singletons'
-import { reportRejection } from '@src/lib/trap'
+import { kclManager, sceneInfra } from '@src/lib/singletons'
+import { err, reportRejection } from '@src/lib/trap'
 import { useSettings } from '@src/lib/singletons'
 import { resetCameraPosition } from '@src/lib/resetCameraPosition'
+import type { Selections } from '@src/lib/selections'
+import {
+  selectDefaultSketchPlane,
+  selectOffsetSketchPlane,
+} from '@src/lib/selections'
 
 export function useViewControlMenuItems() {
   const { state: modelingState, send: modelingSend } = useModelingContext()
+  const selectedPlaneId = getCurrentPlaneId(
+    modelingState.context.selectionRanges
+  )
+
   const settings = useSettings()
   const shouldLockView =
     modelingState.matches('Sketch') &&
@@ -56,9 +65,35 @@ export function useViewControlMenuItems() {
         Center view on selection
       </ContextMenuItem>,
       <ContextMenuDivider />,
+      <ContextMenuItem
+        onClick={() => {
+          if (selectedPlaneId) {
+            sceneInfra.modelingSend({
+              type: 'Enter sketch',
+              data: { forceNewSketch: true },
+            })
+
+            const defaultSketchPlaneSelected =
+              selectDefaultSketchPlane(selectedPlaneId)
+            if (
+              !err(defaultSketchPlaneSelected) &&
+              defaultSketchPlaneSelected
+            ) {
+              return
+            }
+
+            const artifact = kclManager.artifactGraph.get(selectedPlaneId)
+            void selectOffsetSketchPlane(artifact)
+          }
+        }}
+        disabled={!selectedPlaneId}
+      >
+        Start sketch on selection
+      </ContextMenuItem>,
+      <ContextMenuDivider />,
       <ContextMenuItemRefresh />,
     ],
-    [VIEW_NAMES_SEMANTIC, shouldLockView]
+    [VIEW_NAMES_SEMANTIC, shouldLockView, selectedPlaneId]
   )
   return menuItems
 }
@@ -77,3 +112,21 @@ export function ViewControlContextMenu({
     />
   )
 }
+
+function getCurrentPlaneId(selectionRanges: Selections): string | null {
+  const defaultPlane = selectionRanges.otherSelections.find(
+    (selection) => typeof selection === 'object' && 'name' in selection
+  )
+  if (defaultPlane) {
+    return defaultPlane.id
+  }
+
+  const planeSelection = selectionRanges.graphSelections.find(
+    (selection) => selection.artifact?.type === 'plane'
+  )
+  if (planeSelection) {
+    return planeSelection.artifact?.id || null
+  }
+
+  return null
+}