code review changes

reaviz · Nov 21, 2024 · 3adf687 · 3adf687
1 parent f1349b7
commit 3adf687
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 56 deletions.
diff --git a/docs/demos/Cluster.story.tsx b/docs/demos/Cluster.story.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { Billboard, Svg, Text } from 'glodrei';
 import { Color, DoubleSide } from 'three';
 import { a } from '@react-spring/three';
-import { GraphCanvas, Icon, lightTheme, Sphere } from '../../src';
+import { GraphCanvas, Icon, Label, lightTheme, Sphere } from '../../src';
 import {
   clusterNodes,
   clusterEdges,
@@ -13,6 +13,7 @@ import {
 } from '../assets/demo';
 
 import demonSvg from '../../docs/assets/twitter.svg';
+import { Ring } from '../../src/symbols/clusters/Ring';
 
 export default {
   title: 'Demos/Cluster',
@@ -472,37 +473,29 @@ export const Custom = () => (
       opacity,
       outerRadius,
       innerRadius,
-      padding
+      theme
     }) => (
       <>
-        <mesh>
-          <ringGeometry
-            attach="geometry"
-            args={[outerRadius, innerRadius + padding, 128]}
-          />
-          <a.meshBasicMaterial
-            attach="material"
-            color="gray"
-            transparent={true}
-            depthTest={false}
-            opacity={opacity}
-            side={DoubleSide}
-            fog={true}
-          />
-        </mesh>
+        <Ring
+          outerRadius={outerRadius}
+          innerRadius={innerRadius}
+          padding={40}
+          normalizedFill={new Color('#075985')}
+          normalizedStroke={new Color('#075985')}
+          circleOpacity={opacity}
+          theme={theme ?? lightTheme}
+        />
         {label && (
-          <a.group position={label.position}>
-            <Billboard position={[0, 0, 1]}>
-              <Svg src={demonSvg} />
-              <Text
-                font={label.fontUrl}
-                fontSize={12}
-                color={new Color('#2A6475')}
-                fillOpacity={label.opacity}
-              >
-                Custom {label.text}
-              </Text>
-            </Billboard>
+          <a.group position={label.position as any}>
+            <Label
+              text={label.text}
+              opacity={label.opacity}
+              fontUrl={label.fontUrl}
+              stroke={theme?.cluster?.label?.stroke}
+              active={false}
+              color={new Color('#2A6475')}
+              fontSize={theme?.cluster?.label?.fontSize ?? 12}
+            />
           </a.group>
         )}
       </>

diff --git a/src/symbols/Cluster.tsx b/src/symbols/Cluster.tsx
@@ -10,6 +10,7 @@ import { useDrag } from '../utils/useDrag';
 import { Vector3 } from 'three';
 import { useCameraControls } from '../CameraControls';
 import { ClusterRenderer } from '../types';
+import { Ring } from './clusters/Ring';
 
 export type ClusterEventArgs = Omit<ClusterGroup, 'position'>;
 
@@ -256,33 +257,15 @@ export const Cluster: FC<ClusterProps> = ({
             })
           ) : (
             <>
-              <mesh>
-                <ringGeometry attach="geometry" args={[offset, 0, 128]} />
-                <a.meshBasicMaterial
-                  attach="material"
-                  color={normalizedFill}
-                  transparent={true}
-                  depthTest={false}
-                  opacity={theme.cluster?.fill ? circleOpacity : 0}
-                  side={DoubleSide}
-                  fog={true}
-                />
-              </mesh>
-              <mesh>
-                <ringGeometry
-                  attach="geometry"
-                  args={[offset, rad + padding, 128]}
-                />
-                <a.meshBasicMaterial
-                  attach="material"
-                  color={normalizedStroke}
-                  transparent={true}
-                  depthTest={false}
-                  opacity={circleOpacity}
-                  side={DoubleSide}
-                  fog={true}
-                />
-              </mesh>
+              <Ring
+                outerRadius={offset}
+                innerRadius={rad}
+                padding={padding}
+                normalizedFill={normalizedFill}
+                normalizedStroke={normalizedStroke}
+                circleOpacity={circleOpacity}
+                theme={theme}
+              />
               {theme.cluster?.label && (
                 <a.group position={labelPosition as any}>
                   <Label

diff --git a/src/symbols/clusters/Ring.tsx b/src/symbols/clusters/Ring.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { a, SpringValue } from '@react-spring/three';
+import { Color, DoubleSide } from 'three';
+
+import { Theme } from '../../themes';
+
+export interface RingProps {
+  outerRadius: number;
+  innerRadius: number;
+  padding: number;
+  normalizedFill: Color;
+  normalizedStroke: Color;
+  circleOpacity: SpringValue<number> | number;
+  theme: Theme;
+}
+
+export const Ring = ({
+  outerRadius,
+  innerRadius,
+  padding,
+  normalizedFill,
+  normalizedStroke,
+  circleOpacity,
+  theme
+}: RingProps) => (
+  <>
+    <mesh>
+      <ringGeometry attach="geometry" args={[outerRadius, 0, 128]} />
+      <a.meshBasicMaterial
+        attach="material"
+        color={normalizedFill}
+        transparent={true}
+        depthTest={false}
+        opacity={theme.cluster?.fill ? circleOpacity : 0}
+        side={DoubleSide}
+        fog={true}
+      />
+    </mesh>
+    <mesh>
+      <ringGeometry
+        attach="geometry"
+        args={[outerRadius, innerRadius + padding, 128]}
+      />
+      <a.meshBasicMaterial
+        attach="material"
+        color={normalizedStroke}
+        transparent={true}
+        depthTest={false}
+        opacity={circleOpacity}
+        side={DoubleSide}
+        fog={true}
+      />
+    </mesh>
+  </>
+);
diff --git a/src/symbols/clusters/index.ts b/src/symbols/clusters/index.ts
@@ -0,0 +1 @@
+export * from './Ring';