fix(renderer): align wheel pointer and labels

renderer/src/remotion/WheelComposition.jsx

@@ -6,6 +6,7 @@ import {
   getFinalWheelRotationDegrees,
   getSliceCenterDegrees,
   getSliceDegrees,
+  rightPointerClipPath,
 } from './wheel-layout.js';
 import {getContrastingTextColor, getRadialLabelLayout} from './wheel-label-layout.js';
 import {getTheme} from './themes.js';
@@ -129,14 +130,14 @@ export const WheelComposition = (props) => {
                     fontSize: label.fontSize,
                     fontWeight: 400,
                     height: label.fontSize * 1.35,
-                    justifyContent: 'flex-end',
+                    justifyContent: 'center',
                     left: label.x,
                     letterSpacing: 0,
                     lineHeight: 1,
                     overflow: 'hidden',
-                    padding: `0 ${Math.max(4, radius * 0.02)}px 0 0`,
+                    padding: `0 ${Math.max(4, radius * 0.02)}px`,
                     position: 'absolute',
-                    textAlign: 'right',
+                    textAlign: 'center',
                     textOverflow: 'ellipsis',
                     top: label.y,
                     transform: `translate(-50%, -50%) rotate(${label.rotation}deg)`,
@@ -167,7 +168,7 @@ export const WheelComposition = (props) => {
             background: theme.pointer,
             border: `2px solid ${theme.pointerStroke}`,
             boxShadow: '0 7px 16px rgba(15, 23, 42, 0.24)',
-            clipPath: 'polygon(100% 50%, 0 0, 0 100%)',
+            clipPath: rightPointerClipPath,
             height: size * 0.085,
             left: center + radius - size * 0.02,
             position: 'absolute',

renderer/src/remotion/wheel-layout.js

@@ -1,4 +1,5 @@
 export const fullTurnDegrees = 360;
+export const rightPointerClipPath = 'polygon(0 50%, 100% 0, 100% 100%)';
 
 /**
  * @param {number} optionCount

renderer/test/wheel-label-layout.test.js

@@ -8,21 +8,26 @@ import {
 } from '../src/remotion/wheel-label-layout.js';
 
 describe('wheel label layout', () => {
-  test('places radial labels so the text track ends near the outer rim', () => {
+  test('centers radial label tracks on the slice center angle', () => {
+    const center = 256;
     const radius = 210;
     const hubRadius = 46;
+    const centerDegrees = 45;
     const layout = getRadialLabelLayout({
-      center: 256,
+      center,
       radius,
       hubRadius,
-      centerDegrees: 0,
+      centerDegrees,
       optionCount: 8,
       text: 'alice',
     });
     const track = getLabelTrack(radius, hubRadius);
+    const radians = (centerDegrees * Math.PI) / 180;
 
-    expect(layout.x + layout.width / 2).toBeCloseTo(256 + track.endRadius);
-    expect(layout.rotation).toBe(0);
+    expect(layout.x).toBeCloseTo(center + Math.cos(radians) * track.midRadius);
+    expect(layout.y).toBeCloseTo(center + Math.sin(radians) * track.midRadius);
+    expect(layout.width).toBe(track.width);
+    expect(layout.rotation).toBe(centerDegrees);
   });
 
   test('keeps left-side text aligned with the slice instead of flipping it upright', () => {

renderer/test/wheel-layout.test.js

@@ -3,6 +3,7 @@ import {
   getFinalWheelRotationDegrees,
   getSliceCenterDegrees,
   getSliceDegrees,
+  rightPointerClipPath,
 } from '../src/remotion/wheel-layout.js';
 
 describe('wheel layout', () => {
@@ -24,4 +25,8 @@ describe('wheel layout', () => {
 
     expect(screenAngle).toBe(0);
   });
+
+  test('defines a right-side pointer that points into the wheel', () => {
+    expect(rightPointerClipPath).toBe('polygon(0 50%, 100% 0, 100% 100%)');
+  });
 });