diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-linux.png index 2fe0e102b..22ad3f3e2 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-linux.png differ diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-win32.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-win32.png index 0a4b783b0..d302db830 100644 Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-win32.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-circle-should-look-right-1-Google-Chrome-win32.png differ diff --git a/src/clientSideScene/segments.ts b/src/clientSideScene/segments.ts index 2d37fcd54..0758de58e 100644 --- a/src/clientSideScene/segments.ts +++ b/src/clientSideScene/segments.ts @@ -517,6 +517,12 @@ class CircleSegment implements SegmentUtils { const meshType = isDraftSegment ? CIRCLE_SEGMENT_DASH : CIRCLE_SEGMENT_BODY const arrowGroup = createArrowhead(scale, theme, color) const circleCenterGroup = createCircleCenterHandle(scale, theme, color) + // A radius indicator that appears from the center to the perimeter + const radiusIndicatorGroup = createLengthIndicator({ + from: center, + to: [center[0] + radius, center[1]], + scale, + }) arcMesh.userData.type = meshType arcMesh.name = meshType @@ -535,7 +541,7 @@ class CircleSegment implements SegmentUtils { } group.name = CIRCLE_SEGMENT - group.add(arcMesh, arrowGroup, circleCenterGroup) + group.add(arcMesh, arrowGroup, circleCenterGroup, radiusIndicatorGroup) const updateOverlaysCallback = this.update({ prevSegment, input, @@ -567,6 +573,9 @@ class CircleSegment implements SegmentUtils { group.userData.radius = radius group.userData.prevSegment = prevSegment const arrowGroup = group.getObjectByName(ARROWHEAD) as Group + const radiusLengthIndicator = group.getObjectByName( + SEGMENT_LENGTH_LABEL + ) as Group const circleCenterHandle = group.getObjectByName( CIRCLE_CENTER_HANDLE ) as Group @@ -584,11 +593,14 @@ class CircleSegment implements SegmentUtils { } if (arrowGroup) { - arrowGroup.position.set( - center[0] + Math.cos(Math.PI / 4) * radius, - center[1] + Math.sin(Math.PI / 4) * radius, - 0 - ) + // The arrowhead is placed at the perimeter of the circle, + // pointing up and to the right + const arrowPoint = { + x: center[0] + Math.cos(Math.PI / 4) * radius, + y: center[1] + Math.sin(Math.PI / 4) * radius, + } + + arrowGroup.position.set(arrowPoint.x, arrowPoint.y, 0) const arrowheadAngle = Math.PI / 4 arrowGroup.quaternion.setFromUnitVectors( @@ -599,6 +611,31 @@ class CircleSegment implements SegmentUtils { arrowGroup.visible = isHandlesVisible } + if (radiusLengthIndicator) { + // The radius indicator is placed at the midpoint of the radius, + // at a 45 degree CCW angle from the positive X-axis + const indicatorPoint = { + x: center[0] + (Math.cos(Math.PI / 4) * radius) / 2, + y: center[1] + (Math.sin(Math.PI / 4) * radius) / 2, + } + const labelWrapper = radiusLengthIndicator.getObjectByName( + SEGMENT_LENGTH_LABEL_TEXT + ) as CSS2DObject + const labelWrapperElem = labelWrapper.element as HTMLDivElement + const label = labelWrapperElem.children[0] as HTMLParagraphElement + label.innerText = `${roundOff(radius)}` + label.classList.add(SEGMENT_LENGTH_LABEL_TEXT) + const isPlaneBackFace = center[0] > indicatorPoint.x + label.style.setProperty( + '--degree', + `${isPlaneBackFace ? '45' : '-45'}deg` + ) + label.style.setProperty('--x', `0px`) + label.style.setProperty('--y', `0px`) + labelWrapper.position.set(indicatorPoint.x, indicatorPoint.y, 0) + radiusLengthIndicator.visible = isHandlesVisible + } + if (circleCenterHandle) { circleCenterHandle.position.set(center[0], center[1], 0) circleCenterHandle.scale.set(scale, scale, scale)