Merge pull request #237 from reaviz/fix/Label-rotation

Fix label rotation
reaviz · Apr 30, 2024 · 81e0cea · 81e0cea
2 parents 9c489c4 + 745bc0b
commit 81e0cea
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/symbols/Edge.tsx b/src/symbols/Edge.tsx
@@ -317,7 +317,7 @@ export const Edge: FC<EdgeProps> = ({
     () =>
       labelVisible &&
       label && (
-        <a.group position={labelPosition as any} rotation={labelRotation}>
+        <a.group position={labelPosition as any}>
           <Label
             text={label}
             ellipsis={15}
@@ -330,6 +330,7 @@ export const Edge: FC<EdgeProps> = ({
             }
             opacity={selectionOpacity}
             fontSize={theme.edge.label.fontSize}
+            rotation={labelRotation}
           />
         </a.group>
       ),

diff --git a/src/symbols/Label.tsx b/src/symbols/Label.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { Billboard, Text } from 'glodrei';
-import { Color, ColorRepresentation } from 'three';
+import { Color, ColorRepresentation, Euler } from 'three';
 import ellipsize from 'ellipsize';
 
 export interface LabelProps {
@@ -44,6 +44,11 @@ export interface LabelProps {
    * Whether the label is active ( dragging, hover, focus ).
    */
   active?: boolean;
+
+  /**
+   * Rotation of the label.
+   */
+  rotation?: Euler | [number, number, number];
 }
 
 export const Label: FC<LabelProps> = ({
@@ -54,7 +59,8 @@ export const Label: FC<LabelProps> = ({
   opacity,
   stroke,
   active,
-  ellipsis
+  ellipsis,
+  rotation
 }) => {
   const shortText = ellipsis && !active ? ellipsize(text, ellipsis) : text;
   const normalizedColor = useMemo(() => new Color(color), [color]);
@@ -76,6 +82,7 @@ export const Label: FC<LabelProps> = ({
         depthOffset={0}
         maxWidth={100}
         overflowWrap="break-word"
+        rotation={rotation}
       >
         {shortText}
       </Text>

diff --git a/src/symbols/edges/Edge.tsx b/src/symbols/edges/Edge.tsx
@@ -147,7 +147,7 @@ export const Edge: FC<EdgeProps> = ({
   return (
     <group>
       {labelVisible && label && (
-        <a.group position={labelPosition as any} rotation={labelRotation}>
+        <a.group position={labelPosition as any}>
           <Label
             text={label}
             ellipsis={15}
@@ -156,6 +156,7 @@ export const Edge: FC<EdgeProps> = ({
             color={color}
             opacity={opacity}
             fontSize={theme.edge.label.fontSize}
+            rotation={labelRotation}
           />
         </a.group>
       )}