#7740 Extra segment UX improvements (#7786)

* convert extraSegment ui to dom from three.js, move it further from start point of a segment

* hide extraSegmentGroup is segment is shorter than 130px in screen space pixels, otherwise UI would be too crammed

* wip re-add mesh for drag interaction

* fmt

* match extraSegment color with line segment color, cleanups

* dont show extrasegment if TangentialArc is length is below threshold

* lint

* circular deps, take1

* Update snapshots

* circular deps, take 2

* fix test: extra segment point moved away so the drag is not creating a new line anymore

* fix png url for playwright

* Update snapshots

* Update snapshots

* make multi profile sketching test match main, this got broken on the PR because of EXTRA_SEGMENT_OFFSET_PX now being 20, but the original test seems very flakey anyway

* Update snapshots

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: andrewvarga

e2e/playwright/sketch-tests.spec.ts

@@ -812,8 +812,7 @@ sketch001 = startSketchOn(XZ)
     await editor.expectEditor.toContain(
       `sketch001 = startSketchOn(XZ)
   |> startProfile(at = [8.41, -9.97])
-  |> line(end = [12.73, -0.09])
-  |> line(end = [1.99, 2.06])
+  |> line(end = [14.72, 1.97])
   |> tangentialArc(endAbsolute = [24.95, -5.38])
   |> close()
   |> revolve(axis = X)`,
@@ -2123,7 +2122,7 @@ profile003 = startProfile(sketch001, at = [206.63, -56.73])
       await page.waitForTimeout(300)
 
       // select end of profile again
-      await endLineStartTanArc()
+      await endArcStartLine()
       await page.waitForTimeout(300)
 
       // Define points for the three-point arc

e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-3-Google-Chrome-linux.png

@@ -44,7 +44,7 @@ export const PROFILE_START = 'profile-start'
 export const DRAFT_DASHED_LINE = 'draft-dashed-line'
 
 // Measurements
-export const EXTRA_SEGMENT_OFFSET_PX = 8
+export const EXTRA_SEGMENT_OFFSET_PX = 20
 export const SEGMENT_WIDTH_PX = 1.6
 export const HIDE_SEGMENT_LENGTH = 75
 export const HIDE_HOVER_SEGMENT_LENGTH = 60
@@ -70,6 +70,10 @@ export const ARC_SEGMENT_TYPES = [
   ARC_SEGMENT,
 ]
 
+// Colors
+export const SEGMENT_YELLOW = 0xffff00
+export const SEGMENT_BLUE = 0x0000ff
+
 // Helper functions
 export function getParentGroup(
   object: any,

public/clientSideSceneAssets/extra-segment-texture-selected.svg

@@ -17,7 +17,6 @@ import {
   OrthographicCamera,
   PerspectiveCamera,
   PlaneGeometry,
-  Points,
   Shape,
   Vector2,
   Vector3,
@@ -67,6 +66,8 @@ import {
   THREE_POINT_ARC_HANDLE3,
   THREE_POINT_ARC_SEGMENT,
   getParentGroup,
+  SEGMENT_BLUE,
+  SEGMENT_YELLOW,
 } from '@src/clientSideScene/sceneConstants'
 import type {
   OnClickCallbackArgs,
@@ -158,6 +159,7 @@ import {
   updateRectangleSketch,
 } from '@src/lib/rectangleTool'
 import type RustContext from '@src/lib/rustContext'
+import { updateExtraSegments } from '@src/lib/selections'
 import type { Selections } from '@src/lib/selections'
 import { getEventForSegmentSelection } from '@src/lib/selections'
 import type { Themes } from '@src/lib/theme'
@@ -861,7 +863,6 @@ export class SceneEntities {
           pathToNode: segPathToNode,
           isDraftSegment,
           scale,
-          texture: this.sceneInfra.extraSegmentTexture,
           theme: this.sceneInfra._theme,
           isSelected,
           sceneInfra: this.sceneInfra,
@@ -2540,14 +2541,14 @@ export class SceneEntities {
 
           const pipeIndex = pathToNode[pathToNodeIndex + 1][0] as number
           if (addingNewSegmentStatus === 'nothing') {
-            const prevSegment = sketch.paths[pipeIndex - 2]
+            const prevSegment = sketch.paths[pipeIndex - 2] // Is undefined when dragging the first segment
             const mod = addNewSketchLn({
               node: this.kclManager.ast,
               variables: this.kclManager.variables,
               input: {
                 type: 'straight-segment',
                 to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
-                from: prevSegment.from,
+                from: prevSegment?.from || [0, 0],
               },
               // TODO assuming it's always a straight segments being added
               // as this is easiest, and we'll need to add "tabbing" behavior
@@ -3346,16 +3347,10 @@ export class SceneEntities {
           this.editorManager.setHighlightRange([
             topLevelRange(node.start, node.end),
           ])
-          const yellow = 0xffff00
-          colorSegment(selected, yellow)
-          const extraSegmentGroup = parent.getObjectByName(EXTRA_SEGMENT_HANDLE)
-          if (extraSegmentGroup) {
-            extraSegmentGroup.traverse((child) => {
-              if (child instanceof Points || child instanceof Mesh) {
-                child.material.opacity = dragSelected ? 0 : 1
-              }
-            })
-          }
+          colorSegment(selected, SEGMENT_YELLOW)
+          const isSelected = parent?.userData?.isSelected
+          updateExtraSegments(parent, 'hoveringLine', true)
+          updateExtraSegments(parent, 'selected', isSelected)
           const orthoFactor = orthoScale(this.sceneInfra.camControls.camera)
 
           let input: SegmentInputs = {
@@ -3504,18 +3499,12 @@ export class SceneEntities {
         colorSegment(
           selected,
           isSelected
-            ? 0x0000ff
+            ? SEGMENT_BLUE
             : parent?.userData?.baseColor ||
                 getThemeColorForThreeJs(this.sceneInfra._theme)
         )
-        const extraSegmentGroup = parent?.getObjectByName(EXTRA_SEGMENT_HANDLE)
-        if (extraSegmentGroup) {
-          extraSegmentGroup.traverse((child) => {
-            if (child instanceof Points || child instanceof Mesh) {
-              child.material.opacity = 0
-            }
-          })
-        }
+        updateExtraSegments(parent, 'hoveringLine', false)
+        updateExtraSegments(parent, 'selected', isSelected)
         if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
           const obj = selected as Mesh
           const mat = obj.material as MeshBasicMaterial
@@ -3812,7 +3801,7 @@ function sketchFromPathToNode({
   return sg
 }
 
-function colorSegment(object: any, color: number) {
+function colorSegment(object: Object3D, color: number) {
   const segmentHead = getParentGroup(object, [ARROWHEAD, PROFILE_START])
   if (segmentHead) {
     segmentHead.traverse((child) => {

public/clientSideSceneAssets/extra-segment-texture.png

@@ -5,7 +5,6 @@ import type {
   MeshBasicMaterial,
   Object3D,
   Object3DEventMap,
-  Texture,
 } from 'three'
 import {
   AmbientLight,
@@ -16,7 +15,6 @@ import {
   OrthographicCamera,
   Raycaster,
   Scene,
-  TextureLoader,
   Vector2,
   Vector3,
   WebGLRenderer,
@@ -105,7 +103,6 @@ export class SceneInfra {
   isFovAnimationInProgress = false
   _baseUnitMultiplier = 1
   _theme: Themes = Themes.System
-  readonly extraSegmentTexture: Texture
   lastMouseState: MouseState = { type: 'idle' }
   onDragStartCallback: (arg: OnDragCallbackArgs) => Voidish = () => {}
   onDragEndCallback: (arg: OnDragCallbackArgs) => Voidish = () => {}
@@ -323,13 +320,6 @@ export class SceneInfra {
     const light = new AmbientLight(0x505050) // soft white light
     this.scene.add(light)
 
-    const textureLoader = new TextureLoader()
-    this.extraSegmentTexture = textureLoader.load(
-      './clientSideSceneAssets/extra-segment-texture.png'
-    )
-    this.extraSegmentTexture.anisotropy =
-      this.renderer?.capabilities?.getMaxAnisotropy?.()
-
     SceneInfra.instance = this
   }