Move recenter button (#565)

* ci: rolling back this branch to sync with master

* ci: style done, button not working

* ci: removing unused code

* ci: eslint

* ci: button working

* ci: full functionality complete

* ci: prettier

* ci: using material-ui button

* ci: removed hover effects

package.json

@@ -82,7 +82,8 @@
     "cy-comp": "cypress run --component",
     "test:coverage": "npx nyc report --reporter=html --reporter=text-summary",
     "format": "prettier --write --config prettier.config.js ./src",
-    "prettier": "npx prettier --config prettier.config.js --check ./src",
+    "prettier": "npx prettier --config prettier.config.js -w ./src",
+    "prettier:check": "npx prettier --config prettier.config.js --check ./src",
     "postinstall": "husky install",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --max-warnings 24"

src/components/Icons/CameraCenterIcon.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import React from 'react'
+
+const CameraCenterIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="1em" height="1em" viewBox="0 0 18 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <g id="center">
+      <path id="Vector 121" d="M9 4L9 1" stroke="white" stroke-linecap="round" />
+      <path id="Vector 123" d="M14 9H17" stroke="white" stroke-linecap="round" />
+      <path id="Vector 122" d="M9 16L9 14" stroke="white" stroke-linecap="round" />
+      <path id="Vector 124" d="M1 9L4 9" stroke="white" stroke-linecap="round" />
+      <circle id="Ellipse 2" cx="9.00001" cy="9.00001" r="5.02857" stroke="white" />
+    </g>
+  </svg>
+)
+
+export default CameraCenterIcon

src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts

@@ -46,7 +46,7 @@ export const useAutoNavigate = (cameraControlsRef: RefObject<CameraControls | nu
 
     const selected = graphData?.nodes.find((f) => f.ref_id === selectedNode?.ref_id)
 
-    let pos = new Vector3(0, 0, 0)
+    let pos = new Vector3(2000, 2000, 3000)
 
     if (selected && graphData) {
       // find all node children ... is there a better way?
@@ -163,14 +163,12 @@ export const useAutoNavigate = (cameraControlsRef: RefObject<CameraControls | nu
   useFrame((state) => {
     if (cameraControlsRef.current) {
       // do movement animation
-      if (selectedNode) {
-        if (!distanceReached) {
-          moveCameraToNode(destination, state.camera)
-        }
+      if (!distanceReached) {
+        moveCameraToNode(destination, state.camera)
+      }
 
-        if (!lookAtReached) {
-          turnCameraToNode(lookat, state.camera)
-        }
+      if (!lookAtReached) {
+        turnCameraToNode(lookat, state.camera)
       }
     }
   })

src/components/Universe/Overlay/index.tsx

@@ -1,31 +1,24 @@
-import { useEffect } from 'react'
+import { Button } from '@mui/material'
 import styled from 'styled-components'
-import { Button } from '~/components/Button'
-import { useControlStore } from '~/stores/useControlStore'
+import CameraCenterIcon from '~/components/Icons/CameraCenterIcon'
 import { useDataStore } from '~/stores/useDataStore'
 import { Tooltip } from '../Graph/Cubes/Cube/components/Tooltip'
 
 export const Overlay = () => {
-  const [selectedNode, hoveredNode, cameraFocusTrigger, setCameraFocusTrigger] = useDataStore((s) => [
-    s.selectedNode,
+  const [hoveredNode, cameraFocusTrigger, setCameraFocusTrigger] = useDataStore((s) => [
     s.hoveredNode,
     s.cameraFocusTrigger,
     s.setCameraFocusTrigger,
   ])
 
-  const userMovedCamera = useControlStore((s) => s.userMovedCamera)
-
-  useEffect(() => {
-    document.body.style.cursor = hoveredNode ? 'pointer' : 'auto'
-  }, [hoveredNode])
-
   return (
     <OverlayWrap>
-      {!!selectedNode && userMovedCamera && (
-        <Button background="bluePressState" kind="small" onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}>
-          Re-center map
-        </Button>
-      )}
+      <CameraCenterButton
+        href=""
+        onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
+        size="medium"
+        startIcon={<CameraCenterIcon />}
+      />
 
       {hoveredNode && (
         <div id="tooltip-portal">
@@ -36,6 +29,25 @@ export const Overlay = () => {
   )
 }
 
+const CameraCenterButton = styled(Button)`
+  && {
+    position: absolute;
+    right: 20px;
+    bottom: 102px;
+    padding: 0;
+    width: 32px;
+    min-width: auto;
+    justify-content: center;
+    align-items: center;
+    pointer-events: all;
+
+    .MuiButton-startIcon {
+      margin-left: 0;
+      filter: brightness(.65);
+    }
+  }
+`
+
 const OverlayWrap = styled('div')(({ theme }) => ({
   position: 'absolute',
   zIndex: 1,