get rid SpringValue from props

reaviz · Nov 22, 2024 · 250f78d · 250f78d
1 parent 3adf687
commit 250f78d
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 53 deletions.
diff --git a/docs/demos/Cluster.story.tsx b/docs/demos/Cluster.story.tsx
@@ -482,8 +482,9 @@ export const Custom = () => (
           padding={40}
           normalizedFill={new Color('#075985')}
           normalizedStroke={new Color('#075985')}
-          circleOpacity={opacity}
+          opacity={opacity}
           theme={theme ?? lightTheme}
+          animated
         />
         {label && (
           <a.group position={label.position as any}>

diff --git a/src/symbols/Cluster.tsx b/src/symbols/Cluster.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useMemo, useState } from 'react';
 import { ClusterGroup, animationConfig, useHoverIntent } from '../utils';
-import { useSpring, a, SpringValue } from '@react-spring/three';
-import { Color, DoubleSide } from 'three';
+import { useSpring, a } from '@react-spring/three';
+import { Color } from 'three';
 import { useStore } from '../store';
 import { Label } from './Label';
 import { useCursor } from 'glodrei';
@@ -121,8 +121,8 @@ export const Cluster: FC<ClusterProps> = ({
       : theme.cluster?.inactiveOpacity
     : theme.cluster?.opacity;
 
-  const labelPositionOffset = useMemo(() => {
-    const defaultPosition = [0, -offset, 2];
+  const labelPosition: [number, number, number] = useMemo(() => {
+    const defaultPosition: [number, number, number] = [0, -offset, 2];
     const themeOffset = theme.cluster?.label?.offset;
     if (themeOffset) {
       return [
@@ -135,18 +135,14 @@ export const Cluster: FC<ClusterProps> = ({
     return defaultPosition;
   }, [offset, theme.cluster?.label?.offset]);
 
-  const { circleOpacity, circlePosition, labelPosition } = useSpring({
+  const { circlePosition } = useSpring({
     from: {
-      circlePosition: [center.x, center.y, -1] as [number, number, number],
-      circleOpacity: 0,
-      labelPosition: labelPositionOffset as [number, number, number]
+      circlePosition: [center.x, center.y, -1] as [number, number, number]
     },
     to: {
-      labelPosition: labelPositionOffset as [number, number, number],
       circlePosition: position
         ? ([position.x, position.y, -1] as [number, number, number])
-        : ([0, 0, -1] as [number, number, number]),
-      circleOpacity: opacity
+        : ([0, 0, -1] as [number, number, number])
     },
     config: {
       ...animationConfig,
@@ -249,7 +245,7 @@ export const Cluster: FC<ClusterProps> = ({
                 opacity: opacity,
                 fontUrl: labelFontUrl
               },
-              opacity: circleOpacity,
+              opacity,
               outerRadius: offset,
               innerRadius: rad,
               padding,
@@ -263,11 +259,12 @@ export const Cluster: FC<ClusterProps> = ({
                 padding={padding}
                 normalizedFill={normalizedFill}
                 normalizedStroke={normalizedStroke}
-                circleOpacity={circleOpacity}
+                opacity={opacity}
+                animated={animated}
                 theme={theme}
               />
               {theme.cluster?.label && (
-                <a.group position={labelPosition as any}>
+                <a.group position={labelPosition}>
                   <Label
                     text={label}
                     opacity={opacity}
@@ -290,7 +287,6 @@ export const Cluster: FC<ClusterProps> = ({
       pointerOut,
       offset,
       normalizedFill,
-      circleOpacity,
       rad,
       padding,
       normalizedStroke,
@@ -303,7 +299,8 @@ export const Cluster: FC<ClusterProps> = ({
       nodes,
       bind,
       isDraggingCurrent,
-      onRender
+      onRender,
+      animated
     ]
   );
 

diff --git a/src/symbols/clusters/Ring.tsx b/src/symbols/clusters/Ring.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
-import { a, SpringValue } from '@react-spring/three';
+import { a, useSpring } from '@react-spring/three';
 import { Color, DoubleSide } from 'three';
 
 import { Theme } from '../../themes';
+import { animationConfig } from '../../utils';
 
 export interface RingProps {
   outerRadius: number;
   innerRadius: number;
   padding: number;
   normalizedFill: Color;
   normalizedStroke: Color;
-  circleOpacity: SpringValue<number> | number;
+  opacity: number;
+  animated: boolean;
   theme: Theme;
 }
 
@@ -20,36 +22,48 @@ export const Ring = ({
   padding,
   normalizedFill,
   normalizedStroke,
-  circleOpacity,
+  opacity,
+  animated,
   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>
-  </>
-);
+}: RingProps) => {
+  const { opacity: springOpacity } = useSpring({
+    from: { opacity: 0 },
+    to: { opacity },
+    config: {
+      ...animationConfig,
+      duration: animated ? undefined : 0
+    }
+  });
+
+  return (
+    <>
+      <mesh>
+        <ringGeometry attach="geometry" args={[outerRadius, 0, 128]} />
+        <a.meshBasicMaterial
+          attach="material"
+          color={normalizedFill}
+          transparent={true}
+          depthTest={false}
+          opacity={theme.cluster?.fill ? springOpacity : 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={springOpacity}
+          side={DoubleSide}
+          fog={true}
+        />
+      </mesh>
+    </>
+  );
+};
diff --git a/src/types.ts b/src/types.ts
@@ -271,7 +271,7 @@ export interface ClusterLabel {
   /**
    * Position of the label.
    */
-  position: SpringValue<[number, number, number]> | [number, number, number];
+  position: [number, number, number];
 
   /**
    * Text of the label.
@@ -308,7 +308,7 @@ export interface ClusterRendererProps {
   /**
    * Opacity of the cluster.
    */
-  opacity: SpringValue<number> | number;
+  opacity: number;
 
   /**
    * Label of the cluster.