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

src/clientSideScene/ClientSideSceneComp.tsx

@@ -233,6 +233,9 @@ 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
@@ -243,6 +246,7 @@ 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>
@@ -251,6 +255,7 @@ 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(${
@@ -292,6 +297,7 @@ const Overlay = ({
           */}
           {callExpression?.callee?.name !== 'circle' && (
             <SegmentMenu
+              style={{ zIndex }}
               verticalPosition={
                 overlay.windowCoords[1] > window.innerHeight / 2
                   ? 'top'
@@ -433,15 +439,17 @@ 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">
+    <Popover className="relative" style={style}>
       {({ open }) => (
         <>
           <Popover.Button

src/clientSideScene/sceneInfra.ts

@@ -52,6 +52,7 @@ 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,6 +45,7 @@ import {
 import { getTangentPointFromPreviousArc } from 'lib/utils2d'
 import {
   ARROWHEAD,
+  ADD_SEGMENT_DOT,
   SceneInfra,
   SEGMENT_LENGTH_LABEL,
   SEGMENT_LENGTH_LABEL_OFFSET_PX,
@@ -166,6 +167,8 @@ 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,
@@ -173,6 +176,7 @@ class StraightSegment implements SegmentUtils {
         scale,
       })
       segmentGroup.add(arrowGroup)
+      segmentGroup.add(dotGroup)
       segmentGroup.add(lengthIndicatorGroup)
     }
 
@@ -207,6 +211,7 @@ 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(
@@ -225,9 +230,21 @@ 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),
@@ -236,7 +253,6 @@ 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)
@@ -341,6 +357,7 @@ 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
@@ -358,7 +375,7 @@ class TangentialArcToSegment implements SegmentUtils {
       baseColor,
     }
 
-    group.add(mesh, arrowGroup, extraSegmentGroup)
+    group.add(mesh, arrowGroup, dotGroup, extraSegmentGroup)
     const updateOverlaysCallback = this.update({
       prevSegment,
       input,
@@ -516,6 +533,7 @@ 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({
@@ -541,7 +559,7 @@ class CircleSegment implements SegmentUtils {
     }
     group.name = CIRCLE_SEGMENT
 
-    group.add(arcMesh, arrowGroup, circleCenterGroup, radiusIndicatorGroup)
+    group.add(arcMesh, arrowGroup, dotGroup, circleCenterGroup)
     const updateOverlaysCallback = this.update({
       prevSegment,
       input,
@@ -723,6 +741,22 @@ 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({
@@ -732,16 +766,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, sphereMesh)
+  arrowGroup.add(arrowheadMesh)
   arrowGroup.lookAt(new Vector3(0, 1, 0))
   arrowGroup.scale.set(scale, scale, scale)
   return arrowGroup
 }
+
 function createCircleCenterHandle(
   scale = 1,
   theme: Themes,