feat(visualizator-fe): Add support for rearranging networks ჻

paraspell · Aug 20, 2024 · 27e8e60 · 27e8e60
1 parent 029bf6f
commit 27e8e60
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 91 deletions.
diff --git a/apps/visualizator-fe/src/MainScene.tsx b/apps/visualizator-fe/src/MainScene.tsx
@@ -1,7 +1,7 @@
 import { useRef, useEffect, useState } from 'react';
 import { Vector3 } from 'three';
-import { useFrame } from '@react-three/fiber';
-import { OrbitControls, PerspectiveCamera } from '@react-three/drei';
+import { useFrame, useThree } from '@react-three/fiber';
+import { OrbitControls, PerspectiveCamera, TransformControls } from '@react-three/drei';
 import ParachainsGraphContainer from './components/ParachainsGraph/ParachainsGraph.container';
 import { Ecosystem } from './types/types';
 import { useSelectedParachain } from './context/SelectedParachain/useSelectedParachain';
@@ -18,7 +18,7 @@ interface AngleMap {
 }
 
 const MainScene = () => {
-  const { selectedEcosystem } = useSelectedParachain();
+  const { selectedEcosystem, activeEditParachain } = useSelectedParachain();
 
   const targetAngles = useRef<AngleMap>({});
   const currentAngles = useRef<AngleMap>({});
@@ -27,6 +27,8 @@ const MainScene = () => {
   const initialTargetRef = useRef<Vector3 | null>(null);
   const [_initialized, setInitialized] = useState(false);
 
+  const [channelsUpdateTrigger, setChannelsUpdateTrigger] = useState(0);
+
   useEffect(() => {
     ecosystems.forEach((ecosystem, index) => {
       const targetAngle = (index / totalEcosystems) * 2 * Math.PI;
@@ -60,13 +62,45 @@ const MainScene = () => {
 
   const target = initialTargetRef.current || CAMERA_POSITION;
 
+  const { scene } = useThree();
+
+  const activeEditParachainMesh = activeEditParachain
+    ? scene.getObjectByName(activeEditParachain)
+    : null;
+
+  const onParachainMove = () => {
+    if (activeEditParachainMesh) {
+      setChannelsUpdateTrigger(current => current + 1);
+    }
+  };
+
   return (
     <>
-      <ParachainsGraphContainer ecosystem={Ecosystem.POLKADOT} />
-      <ParachainsGraphContainer ecosystem={Ecosystem.KUSAMA} />
-      <ParachainsGraphContainer ecosystem={Ecosystem.WESTEND} />
-      <ParachainsGraphContainer ecosystem={Ecosystem.ROCOCO} />
-      <OrbitControls enableDamping autoRotate={false} target={target} />
+      {activeEditParachainMesh && (
+        <TransformControls
+          onObjectChange={onParachainMove}
+          object={activeEditParachainMesh}
+          mode="translate"
+          size={0.5}
+        />
+      )}
+      <ParachainsGraphContainer
+        ecosystem={Ecosystem.POLKADOT}
+        updateTrigger={channelsUpdateTrigger}
+      />
+      <ParachainsGraphContainer
+        ecosystem={Ecosystem.KUSAMA}
+        updateTrigger={channelsUpdateTrigger}
+      />
+      <ParachainsGraphContainer
+        ecosystem={Ecosystem.WESTEND}
+        updateTrigger={channelsUpdateTrigger}
+      />
+      <ParachainsGraphContainer
+        ecosystem={Ecosystem.ROCOCO}
+        updateTrigger={channelsUpdateTrigger}
+      />
+      <OrbitControls enableDamping autoRotate={false} target={target} makeDefault />
       <PerspectiveCamera makeDefault position={CAMERA_POSITION} />
     </>
   );

diff --git a/apps/visualizator-fe/src/components/Parachain/Parachain.tsx b/apps/visualizator-fe/src/components/Parachain/Parachain.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { Text } from '@react-three/drei';
 import { useFrame, useLoader } from '@react-three/fiber';
 import { Color, Group, Mesh, MeshStandardMaterial, SphereGeometry, TextureLoader } from 'three';
@@ -15,12 +15,22 @@ type Props = {
   index: number;
   isSelected: boolean;
   onClick: (name: string) => void;
+  onRightClick: (name: string) => void;
   scale: number;
   ecosystem: Ecosystem;
 };
 
-const Parachain: React.FC<Props> = ({ name, index, isSelected, onClick, scale, ecosystem }) => {
-  const position = getParachainPosition(index, ecosystem);
+const Parachain: React.FC<Props> = ({
+  name,
+  index,
+  isSelected,
+  onClick,
+  onRightClick,
+  scale,
+  ecosystem
+}) => {
+  const initialPosition = getParachainPosition(index, ecosystem);
+  const [position] = useState(initialPosition);
   const textRef = useRef<Text>(null);
   const materialRef = useRef<MeshStandardMaterial>(null);
   const groupRef = useRef<Group>(null);
@@ -52,13 +62,24 @@ const Parachain: React.FC<Props> = ({ name, index, isSelected, onClick, scale, e
   const color = getParachainColor(name, ecosystem);
   const lightColor = lightenColor(color, 50);
 
+  const onClickHandler = () => {
+    onClick(name);
+  };
+
+  const onContextMenu = () => {
+    onRightClick(name);
+  };
+
+  const objectName = `${ecosystem};${name}`;
+
   return (
-    <group ref={groupRef} scale={[scale, scale, scale]} position={position}>
+    <group ref={groupRef} name={objectName} scale={[scale, scale, scale]} position={position}>
       <mesh
         castShadow
         ref={sphereRef}
         rotation={[0, Math.PI * 1.5, 0]}
-        onClick={() => onClick(name)}
+        onClick={onClickHandler}
+        onContextMenu={onContextMenu}
       >
         <sphereGeometry args={[0.3, 16, 16]} />
         <meshStandardMaterial
@@ -72,6 +93,7 @@ const Parachain: React.FC<Props> = ({ name, index, isSelected, onClick, scale, e
           roughness={0.3}
         />
       </mesh>
+
       <Text
         ref={textRef}
         position={[0, 0.5, 0]}

diff --git a/apps/visualizator-fe/src/components/ParachainsGraph/ParachainsGraph.container.tsx b/apps/visualizator-fe/src/components/ParachainsGraph/ParachainsGraph.container.tsx
@@ -11,9 +11,10 @@ const now = Date.now();
 
 type Props = {
   ecosystem: Ecosystem;
+  updateTrigger: number;
 };
 
-const ParachainsGraphContainer: FC<Props> = ({ ecosystem }) => {
+const ParachainsGraphContainer: FC<Props> = ({ ecosystem, updateTrigger }) => {
   const { dateRange, channelId, parachainArrangement } = useSelectedParachain();
 
   const [start, end] = dateRange;
@@ -40,6 +41,7 @@ const ParachainsGraphContainer: FC<Props> = ({ ecosystem }) => {
         channels={data.channels}
         totalMessageCounts={totalCountsQuery.data?.totalMessageCounts}
         ecosystem={ecosystem}
+        updateTrigger={updateTrigger}
         selectedChannel={channelQuery.data?.channel}
       />
     );