Add to tangential arcs

src/clientSideScene/sceneEntities.ts

@@ -630,10 +630,10 @@ export class SceneEntities {
               programMemory: kclManager.programMemory,
               to: [intersectionPoint.twoD.x, intersectionPoint.twoD.y],
               from: [prevSegment.from[0], prevSegment.from[1]],
-              fnName:
-                prevSegment.type === 'TangentialArcTo'
-                  ? 'tangentialArcTo'
-                  : 'line',
+              // TODO assuming it's always a straight segments being added
+              // as this is easiest, and we'll need to add "tabbing" behavior
+              // to support other segment types
+              fnName: 'line',
               pathToNode: pathToNode,
               spliceBetween: true,
             })
@@ -865,6 +865,7 @@ export class SceneEntities {
     group.userData.to = to
     group.userData.prevSegment = prevSegment
     const arrowGroup = group.getObjectByName(ARROWHEAD) as Group
+    const extraSegmentGroup = group.getObjectByName(EXTRA_SEGMENT_HANDLE)
 
     const previousPoint =
       prevSegment?.type === 'TangentialArcTo'
@@ -898,6 +899,24 @@ export class SceneEntities {
       arrowGroup.visible = !shouldHide
     }
 
+    if (extraSegmentGroup) {
+      const circumference = getPxLength(scale, 2 * Math.PI * arcInfo.radius)
+      const extraSegmentAngleDelta = (15 / circumference) * Math.PI * 2
+      const extraSegmentAngle =
+        arcInfo.startAngle + (arcInfo.ccw ? 1 : -1) * extraSegmentAngleDelta
+      const extraSegmentOffset = new Vector2(
+        Math.cos(extraSegmentAngle) * arcInfo.radius,
+        Math.sin(extraSegmentAngle) * arcInfo.radius
+      )
+      extraSegmentGroup.position.set(
+        arcInfo.center[0] + extraSegmentOffset.x,
+        arcInfo.center[1] + extraSegmentOffset.y,
+        0
+      )
+      arrowGroup.scale.set(scale, scale, scale)
+      extraSegmentGroup.visible = !shouldHide
+    }
+
     const tangentialArcToSegmentBody = group.children.find(
       (child) => child.userData.type === TANGENTIAL_ARC_TO_SEGMENT_BODY
     ) as Mesh

src/clientSideScene/segments.ts

@@ -283,19 +283,22 @@ export function tangentialArcToSegment({
   arrowGroup.visible = !shouldHide
 
   const extraSegmentGroup = createExtraSegmentHandle(scale, texture)
-  const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
-    .normalize()
-    .multiplyScalar(1.2 * scale)
+  const circumference = getPxLength(scale, 2 * Math.PI * radius)
+  const extraSegmentAngleDelta = (15 / circumference) * Math.PI * 2
+  const extraSegmentAngle = startAngle + (ccw ? 1 : -1) * extraSegmentAngleDelta
+  const extraSegmentOffset = new Vector2(
+    Math.cos(extraSegmentAngle) * radius,
+    Math.sin(extraSegmentAngle) * radius
+  )
+  extraSegmentGroup.position.set(
+    center[0] + extraSegmentOffset.x,
+    center[1] + extraSegmentOffset.y,
+    0
+  )
 
-  // TODO figure out placement for arc
-  // extraSegmentGroup.position.set(
-  //   from[0] + offsetFromBase.x,
-  //   from[1] + offsetFromBase.y,
-  //   0
-  // )
-  extraSegmentGroup.visible = false // TODO set to true once we figure out above placement
+  extraSegmentGroup.visible = !shouldHide
 
-  group.add(mesh, arrowGroup)
+  group.add(mesh, arrowGroup, extraSegmentGroup)
 
   return group
 }