make close segment visually distinct (#1620)

e2e/playwright/flow-tests.spec.ts

@@ -135,8 +135,8 @@ test('Basic sketch', async ({ page }) => {
   |> angledLine([180, segLen('seg01', %)], %)`)
 })
 
-test.skip(process.platform === 'darwin', 'Can moving camera')
 test('Can moving camera', async ({ page, context }) => {
+  test.skip(process.platform === 'darwin', 'Can moving camera')
   const u = getUtils(page)
   await page.setViewportSize({ width: 1200, height: 500 })
   await page.goto('/')

src/clientSideScene/sceneEntities.ts

@@ -342,6 +342,11 @@ class SceneEntities {
       const isDraftSegment =
         draftSegment && index === sketchGroup.value.length - 1
       let seg
+      const callExpName = getNodeFromPath<CallExpression>(
+        kclManager.ast,
+        segPathToNode,
+        'CallExpression'
+      )?.node?.callee?.name
       if (segment.type === 'TangentialArcTo') {
         seg = tangentialArcToSegment({
           prevSegment: sketchGroup.value[index - 1],
@@ -360,6 +365,7 @@ class SceneEntities {
           pathToNode: segPathToNode,
           isDraftSegment,
           scale: factor,
+          callExpName,
         })
       }
       seg.layers.set(SKETCH_LAYER)
@@ -739,6 +745,7 @@ class SceneEntities {
     shape.lineTo(0, 0.08 * scale) // The width of the line
     const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
 
+    if (arrowGroup) {
       arrowGroup.position.set(to[0], to[1], 0)
 
       const dir = new Vector3()
@@ -749,6 +756,7 @@ class SceneEntities {
         .normalize()
       arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
       arrowGroup.scale.set(scale, scale, scale)
+    }
 
     const straightSegmentBody = group.children.find(
       (child) => child.userData.type === STRAIGHT_SEGMENT_BODY
@@ -1117,7 +1125,10 @@ function mouseEnterLeaveCallbacks() {
         PROFILE_START,
       ])
       const isSelected = parent?.userData?.isSelected
-      colorSegment(selected, isSelected ? 0x0000ff : 0xffffff)
+      colorSegment(
+        selected,
+        isSelected ? 0x0000ff : parent?.userData?.baseColor || 0xffffff
+      )
       if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
         const obj = selected as Mesh
         const mat = obj.material as MeshBasicMaterial

src/clientSideScene/segments.ts

@@ -70,6 +70,7 @@ export function straightSegment({
   pathToNode,
   isDraftSegment,
   scale = 1,
+  callExpName,
 }: {
   from: Coords2d
   to: Coords2d
@@ -77,6 +78,7 @@ export function straightSegment({
   pathToNode: PathToNode
   isDraftSegment?: boolean
   scale?: number
+  callExpName: string
 }): Group {
   const group = new Group()
 
@@ -100,7 +102,8 @@ export function straightSegment({
     })
   }
 
-  const body = new MeshBasicMaterial({ color: 0xffffff })
+  const baseColor = callExpName === 'close' ? 0x444444 : 0xffffff
+  const body = new MeshBasicMaterial({ color: baseColor })
   const mesh = new Mesh(geometry, body)
   mesh.userData.type = isDraftSegment
     ? STRAIGHT_SEGMENT_DASH
@@ -114,6 +117,8 @@ export function straightSegment({
     to,
     pathToNode,
     isSelected: false,
+    callExpName,
+    baseColor,
   }
   group.name = STRAIGHT_SEGMENT
 
@@ -124,7 +129,8 @@ export function straightSegment({
     .normalize()
   arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
 
-  group.add(mesh, arrowGroup)
+  group.add(mesh)
+  if (callExpName !== 'close') group.add(arrowGroup)
 
   return group
 }

src/lib/selections.ts

@@ -425,7 +425,9 @@ function updateSceneObjectColors(codeBasedSelections: Selection[]) {
     const groupHasCursor = codeBasedSelections.some((selection) => {
       return isOverlap(selection.range, [node.start, node.end])
     })
-    const color = groupHasCursor ? 0x0000ff : 0xffffff
+    const color = groupHasCursor
+      ? 0x0000ff
+      : segmentGroup?.userData?.baseColor || 0xffffff
     segmentGroup.traverse(
       (child) => child instanceof Mesh && child.material.color.set(color)
     )