temp commit

Author: AntonJames-Sistence

src/symbols/nodes/Badge.tsx

@@ -7,10 +7,6 @@ import { Color } from 'three';
 import type { NodeRendererProps } from '../../types';
 import { animationConfig } from '../../utils';
 
-// Layout constants
-const CHAR_WIDTH_ESTIMATE = 0.15;
-const ICON_TEXT_GAP = 0.15;
-
 export type BadgePosition =
   | 'top-right'
   | 'top-left'
@@ -20,7 +16,7 @@ export type BadgePosition =
 
 export type IconPosition = 'start' | 'end';
 
-export interface BadgeProps extends NodeRendererProps {
+export interface BadgeProps extends Omit<NodeRendererProps, 'opacity'> {
   /**
    * The text to display in the badge.
    */
@@ -31,6 +27,12 @@ export interface BadgeProps extends NodeRendererProps {
    */
   backgroundColor?: string;
 
+  /**
+   * Opacity of the badge background and stroke (0-1).
+   * Default: 1
+   */
+  opacity?: number;
+
   /**
    * Text color of the badge.
    */
@@ -84,6 +86,30 @@ export interface BadgeProps extends NodeRendererProps {
    *   the text remains centered and only the icon moves to the specified position.
    */
   iconPosition?: IconPosition | [number, number];
+
+  /**
+   * Font size for the badge text.
+   */
+  fontSize?: number;
+
+  /**
+   * Font weight for the badge text (100-900).
+   * Values outside this range will be clamped to the nearest valid value.
+   * Common values: 400 (normal), 700 (bold), 900 (extra bold).
+   */
+  fontWeight?: number;
+
+  /**
+   * Character width estimate for calculating text width.
+   * Default: 0.2
+   */
+  charWidthEstimate?: number;
+
+  /**
+   * Gap between icon and text.
+   * Default: 0.01
+   */
+  iconTextGap?: number;
 }
 
 export const Badge: FC<BadgeProps> = ({
@@ -98,10 +124,14 @@ export const Badge: FC<BadgeProps> = ({
   radius = 0.12,
   badgeSize = 1.5,
   position = 'top-right',
-  padding = 0.3,
+  padding = 0.15,
   icon,
   iconSize = 0.35,
-  iconPosition = 'start'
+  iconPosition = 'start',
+  fontSize = 0.3,
+  fontWeight,
+  charWidthEstimate = 0.2,
+  iconTextGap = 0.01
 }) => {
   const normalizedBgColor = useMemo(
     () => new Color(backgroundColor),
@@ -115,6 +145,13 @@ export const Badge: FC<BadgeProps> = ({
   // Guard for radius
   const normalizedRadius = Math.min(radius, 0.2);
 
+  // Normalize fontWeight to valid CSS range (100-900)
+  const normalizedFontWeight = useMemo(() => {
+    if (fontWeight === undefined) return undefined;
+    // Clamp numeric values to 100-900 range
+    return Math.max(100, Math.min(900, fontWeight));
+  }, [fontWeight]);
+
   // Calculate position based on preset or custom coordinates
   const badgePosition = useMemo((): [number, number, number] => {
     if (Array.isArray(position)) {
@@ -138,37 +175,58 @@ export const Badge: FC<BadgeProps> = ({
     }
   }, [position, size]);
 
+  // Shared text size calculations (used by both badgeDimensions and contentLayout)
+  const textSizeCalculations = useMemo(() => {
+    const fontSizeScale = fontSize / 0.3;
+    const fontWeightMultiplier =
+      normalizedFontWeight && normalizedFontWeight >= 700 ? 1.1 : 1;
+    const adjustedCharWidth =
+      charWidthEstimate * fontSizeScale * fontWeightMultiplier;
+    const estimatedTextWidth = label.length * adjustedCharWidth;
+
+    return {
+      fontSizeScale,
+      fontWeightMultiplier,
+      adjustedCharWidth,
+      estimatedTextWidth
+    };
+  }, [fontSize, normalizedFontWeight, charWidthEstimate, label.length]);
+
   // Calculate dynamic badge dimensions based on text length and icon
   const badgeDimensions = useMemo(() => {
     const baseWidth = 0.5;
     const baseHeight = 0.5;
     const minWidth = baseWidth;
     const minHeight = baseHeight;
 
-    // Estimate text width based on character count
-    const charCount = label.length;
-    let estimatedWidth = Math.max(
-      minWidth,
-      Math.min(charCount * CHAR_WIDTH_ESTIMATE + padding, 2.0 + padding)
-    ); // Add padding to width
+    const { fontSizeScale, estimatedTextWidth } = textSizeCalculations;
 
-    // Add icon width if icon is present
+    // Calculate content width (text + icon + gap, no padding yet)
+    let contentWidth = estimatedTextWidth;
     if (icon) {
-      estimatedWidth += iconSize;
+      contentWidth += iconSize + iconTextGap;
     }
 
+    // Add padding to total width (padding on both left and right sides)
+    const estimatedWidth = Math.max(minWidth, contentWidth + padding * 2);
+
+    // Scale height based on fontSize
+    const charCount = label.length;
     const estimatedHeight = Math.max(
       minHeight,
-      Math.min(charCount * 0.05 + padding * 0.5, 0.8 + padding * 0.5)
-    ); // Add padding to height
+      Math.min(
+        charCount * 0.05 * fontSizeScale + padding * 0.5,
+        0.8 * fontSizeScale + padding * 0.5
+      )
+    );
 
     return {
       width: estimatedWidth,
       height: estimatedHeight
     };
-  }, [label, padding, icon, iconSize]);
+  }, [textSizeCalculations, label.length, padding, icon, iconSize, iconTextGap]);
 
-  const { scale, badgeOpacity } = useSpring({
+  const { scale } = useSpring({
     from: {
       scale: [0.00001, 0.00001, 0.00001],
       badgeOpacity: 0
@@ -204,26 +262,26 @@ export const Badge: FC<BadgeProps> = ({
       };
     }
 
-    const estimatedTextWidth = label.length * CHAR_WIDTH_ESTIMATE;
-    const totalContentWidth = iconSize + estimatedTextWidth;
+    const { estimatedTextWidth } = textSizeCalculations;
+    const totalContentWidth = iconSize + iconTextGap + estimatedTextWidth;
     const startX = -totalContentWidth / 2;
 
     if (iconPosition === 'start') {
       return {
-        iconX: startX + iconSize - 0.5 / 2,
+        iconX: startX + iconSize / 2,
         iconY: 0,
-        textX: startX + iconSize + estimatedTextWidth / 2,
+        textX: startX + iconSize + iconTextGap + estimatedTextWidth / 2,
         textY: 0
       };
     } else {
       return {
         textX: startX + estimatedTextWidth / 2,
         textY: 0,
-        iconX: startX + estimatedTextWidth + ICON_TEXT_GAP + iconSize / 2,
+        iconX: startX + estimatedTextWidth + iconTextGap + iconSize / 2,
         iconY: 0
       };
     }
-  }, [icon, iconSize, iconPosition, label.length]);
+  }, [textSizeCalculations, icon, iconSize, iconPosition, iconTextGap]);
 
   return (
     <Billboard position={badgePosition}>
@@ -241,6 +299,7 @@ export const Badge: FC<BadgeProps> = ({
               smoothness={8}
               material-color={normalizedStrokeColor}
               material-transparent={true}
+              material-opacity={opacity}
             />
           </a.mesh>
         )}
@@ -252,6 +311,7 @@ export const Badge: FC<BadgeProps> = ({
             smoothness={8}
             material-color={normalizedBgColor}
             material-transparent={true}
+            material-opacity={opacity}
           />
         </a.mesh>
         {/* Icon */}
@@ -268,11 +328,11 @@ export const Badge: FC<BadgeProps> = ({
         {/* Text */}
         <Text
           position={[contentLayout.textX, contentLayout.textY, 1.1]}
-          fontSize={0.3}
+          fontSize={fontSize}
+          fontWeight={normalizedFontWeight}
           color={normalizedTextColor}
           anchorX="center"
           anchorY="middle"
-          maxWidth={badgeDimensions.width - 0.2}
           textAlign="center"
           material-depthTest={false}
           material-depthWrite={false}

stories/demos/Badge.story.tsx

@@ -121,7 +121,6 @@ export const WithIconEnd = () => (
           icon={userSvg}
           iconSize={0.3}
           iconPosition="end"
-          padding={0.5}
           strokeColor="#059669"
           strokeWidth={0.1}
           radius={0.15}
@@ -150,10 +149,40 @@ export const WithCustomIconPosition = () => (
           iconSize={0.6}
           iconPosition={[0.7, 0.3]}
           strokeWidth={0.2}
+          padding={0}
           radius={0.15}
           position="bottom-right"
         />
       </group>
     )}
   />
 );
+
+export const WithCustomTextAndColor = () => (
+  <GraphCanvas
+    nodes={simpleNodes}
+    edges={simpleEdges}
+    cameraMode="rotate"
+    renderNode={({ node, ...rest }) => (
+      <group>
+        <Sphere {...rest} node={node} />
+        <Badge
+          {...rest}
+          node={node}
+          label="User"
+          backgroundColor="#f59e0b"
+          strokeColor="red"
+          textColor="#ffffff"
+          icon={userSvg}
+          iconSize={0.35}
+          padding={0.1}
+          radius={0.3}
+          iconPosition="start"
+          position={[0, -10, 0]}
+          opacity={0.6}
+          strokeWidth={0.03}
+        />
+      </group>
+    )}
+  />
+);