Revert "Bring constraints overlay in front of line labels; leave arrowheads when zooming out"

This reverts commit 251beb5fa6414d3b298d330e41d7ba3d57486f8c.

src/clientSideScene/ClientSideSceneComp.tsx

@@ -233,9 +233,6 @@ const Overlay = ({
       state.matches({ Sketch: 'Rectangle tool' })
     )
 
-  // The constraint overlays need to go over the line labels.
-  const zIndex = 10
-
   return (
     <div className={`absolute w-0 h-0`}>
       <div
@@ -246,7 +243,6 @@ const Overlay = ({
         data-overlay-angle={overlay.angle}
         className="pointer-events-auto absolute w-0 h-0"
         style={{
-          zIndex,
           transform: `translate3d(${overlay.windowCoords[0]}px, ${overlay.windowCoords[1]}px, 0)`,
         }}
       ></div>
@@ -255,7 +251,6 @@ const Overlay = ({
           data-overlay-toolbar-index={overlayIndex}
           className={`px-0 pointer-events-auto absolute flex gap-1`}
           style={{
-            zIndex,
             transform: `translate3d(calc(${
               overlay.windowCoords[0] + xOffset
             }px + ${xAlignment}), calc(${
@@ -297,7 +292,6 @@ const Overlay = ({
           */}
           {callExpression?.callee?.name !== 'circle' && (
             <SegmentMenu
-              style={{ zIndex }}
               verticalPosition={
                 overlay.windowCoords[1] > window.innerHeight / 2
                   ? 'top'
@@ -439,17 +433,15 @@ const SegmentMenu = ({
   verticalPosition,
   pathToNode,
   stdLibFnName,
-  style,
 }: {
   verticalPosition: 'top' | 'bottom'
   pathToNode: PathToNode
   stdLibFnName: string
-  style?: CSSProperties
 }) => {
   const { send } = useModelingContext()
   const dependentSourceRanges = findUsesOfTagInPipe(kclManager.ast, pathToNode)
   return (
-    <Popover className="relative" style={style}>
+    <Popover className="relative">
       {({ open }) => (
         <>
           <Popover.Button

src/clientSideScene/sceneInfra.ts

@@ -52,7 +52,6 @@ export const Y_AXIS = 'yAxis'
 export const AXIS_GROUP = 'axisGroup'
 export const SKETCH_GROUP_SEGMENTS = 'sketch-group-segments'
 export const ARROWHEAD = 'arrowhead'
-export const ADD_SEGMENT_DOT = 'add-segment-dot'
 export const SEGMENT_LENGTH_LABEL = 'segment-length-label'
 export const SEGMENT_LENGTH_LABEL_TEXT = 'segment-length-label-text'
 export const SEGMENT_LENGTH_LABEL_OFFSET_PX = 30

src/clientSideScene/segments.ts

@@ -45,7 +45,6 @@ import {
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import {
   ARROWHEAD,
-  ADD_SEGMENT_DOT,
   SceneInfra,
   SEGMENT_LENGTH_LABEL,
   SEGMENT_LENGTH_LABEL_OFFSET_PX,
@@ -167,8 +166,6 @@ class StraightSegment implements SegmentUtils {
     if (callExpName !== 'close') {
       // an arrowhead that appears at the end of the segment
       const arrowGroup = createArrowhead(scale, theme, color)
-      const dotGroup = createAddNewSegmentDot(scale, theme, color)
-
       // A length indicator that appears at the midpoint of the segment
       const lengthIndicatorGroup = createLengthIndicator({
         from,
@@ -176,7 +173,6 @@ class StraightSegment implements SegmentUtils {
         scale,
       })
       segmentGroup.add(arrowGroup)
-      segmentGroup.add(dotGroup)
       segmentGroup.add(lengthIndicatorGroup)
     }
 
@@ -211,7 +207,6 @@ class StraightSegment implements SegmentUtils {
     shape.moveTo(0, (-SEGMENT_WIDTH_PX / 2) * scale) // The width of the line in px (2.4px in this case)
     shape.lineTo(0, (SEGMENT_WIDTH_PX / 2) * scale)
     const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
-    const dotGroup = group.getObjectByName(ADD_SEGMENT_DOT) as Group
     const labelGroup = group.getObjectByName(SEGMENT_LENGTH_LABEL) as Group
 
     const length = Math.sqrt(
@@ -230,21 +225,9 @@ class StraightSegment implements SegmentUtils {
       isHandlesVisible = !shouldHideHover
     }
 
-    if (dotGroup) {
-      dotGroup.position.set(to[0], to[1], 0)
-      const dir = new Vector3()
-        .subVectors(
-          new Vector3(to[0], to[1], 0),
-          new Vector3(from[0], from[1], 0)
-        )
-        .normalize()
-      dotGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
-      dotGroup.scale.set(scale, scale, scale)
-      dotGroup.visible = isHandlesVisible
-    }
-
     if (arrowGroup) {
       arrowGroup.position.set(to[0], to[1], 0)
+
       const dir = new Vector3()
         .subVectors(
           new Vector3(to[0], to[1], 0),
@@ -253,6 +236,7 @@ class StraightSegment implements SegmentUtils {
         .normalize()
       arrowGroup.quaternion.setFromUnitVectors(new Vector3(0, 1, 0), dir)
       arrowGroup.scale.set(scale, scale, scale)
+      arrowGroup.visible = isHandlesVisible
     }
 
     const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
@@ -357,7 +341,6 @@ class TangentialArcToSegment implements SegmentUtils {
     const body = new MeshBasicMaterial({ color })
     const mesh = new Mesh(geometry, body)
     const arrowGroup = createArrowhead(scale, theme, color)
-    const dotGroup = createAddNewSegmentDot(scale, theme, color)
     const extraSegmentGroup = createExtraSegmentHandle(scale, texture, theme)
 
     group.name = TANGENTIAL_ARC_TO_SEGMENT
@@ -375,7 +358,7 @@ class TangentialArcToSegment implements SegmentUtils {
       baseColor,
     }
 
-    group.add(mesh, arrowGroup, dotGroup, extraSegmentGroup)
+    group.add(mesh, arrowGroup, extraSegmentGroup)
     const updateOverlaysCallback = this.update({
       prevSegment,
       input,
@@ -533,7 +516,6 @@ class CircleSegment implements SegmentUtils {
     const arcMesh = new Mesh(geometry, mat)
     const meshType = isDraftSegment ? CIRCLE_SEGMENT_DASH : CIRCLE_SEGMENT_BODY
     const arrowGroup = createArrowhead(scale, theme, color)
-    const dotGroup = createAddNewSegmentDot(scale, theme, color)
     const circleCenterGroup = createCircleCenterHandle(scale, theme, color)
     // A radius indicator that appears from the center to the perimeter
     const radiusIndicatorGroup = createLengthIndicator({
@@ -559,7 +541,7 @@ class CircleSegment implements SegmentUtils {
     }
     group.name = CIRCLE_SEGMENT
 
-    group.add(arcMesh, arrowGroup, dotGroup, circleCenterGroup)
+    group.add(arcMesh, arrowGroup, circleCenterGroup)
     const updateOverlaysCallback = this.update({
       prevSegment,
       input,
@@ -741,22 +723,6 @@ export function createProfileStartHandle({
   return group
 }
 
-function createAddNewSegmentDot(scale = 1, theme: Themes, color?: number): Group {
-  const baseColor = getThemeColorForThreeJs(theme)
-  const arrowMaterial = new MeshBasicMaterial({
-    color: color || baseColor,
-  })
-  const sphereMesh = new Mesh(new SphereGeometry(4, 12, 12), arrowMaterial)
-
-  const dotGroup = new Group()
-  dotGroup.userData.type = ADD_SEGMENT_DOT
-  dotGroup.name = ADD_SEGMENT_DOT
-  dotGroup.add(sphereMesh)
-  dotGroup.lookAt(new Vector3(0, 1, 0))
-  dotGroup.scale.set(scale, scale, scale)
-  return dotGroup
-}
-
 function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
   const baseColor = getThemeColorForThreeJs(theme)
   const arrowMaterial = new MeshBasicMaterial({
@@ -766,16 +732,16 @@ function createArrowhead(scale = 1, theme: Themes, color?: number): Group {
   // we'll scale the group to the correct size later to match these sizes in screen space
   const arrowheadMesh = new Mesh(new ConeGeometry(4.5, 20, 12), arrowMaterial)
   arrowheadMesh.position.set(0, -9, 0)
+  const sphereMesh = new Mesh(new SphereGeometry(4, 12, 12), arrowMaterial)
 
   const arrowGroup = new Group()
   arrowGroup.userData.type = ARROWHEAD
   arrowGroup.name = ARROWHEAD
-  arrowGroup.add(arrowheadMesh)
+  arrowGroup.add(arrowheadMesh, sphereMesh)
   arrowGroup.lookAt(new Vector3(0, 1, 0))
   arrowGroup.scale.set(scale, scale, scale)
   return arrowGroup
 }
-
 function createCircleCenterHandle(
   scale = 1,
   theme: Themes,