Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move recenter button #565

Merged
merged 13 commits into from
Nov 10, 2023
Merged

Move recenter button #565

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
38f9680
ci: rolling back this branch to sync with master
cosmicpotato137 Oct 18, 2023
34d90c0
Merge branch 'stakwork:master' into master
cosmicpotato137 Oct 23, 2023
02ef296
Merge branch 'master' of github.com:cosmicpotato137/sphinx-nav-fiber
cosmicpotato137 Nov 3, 2023
698754e
ci: style done, button not working
cosmicpotato137 Nov 3, 2023
74aa236
Merge branch 'stakwork:master' into move-recenter-button
cosmicpotato137 Nov 3, 2023
e84ba6c
ci: removing unused code
cosmicpotato137 Nov 3, 2023
a45984b
ci: eslint
cosmicpotato137 Nov 3, 2023
9d97312
ci: button working
cosmicpotato137 Nov 3, 2023
85f0b8f
ci: full functionality complete
cosmicpotato137 Nov 3, 2023
5f838ac
ci: prettier
cosmicpotato137 Nov 3, 2023
92f024f
Merge branch 'stakwork:master' into move-recenter-button
cosmicpotato137 Nov 6, 2023
968b7ce
ci: using material-ui button
cosmicpotato137 Nov 7, 2023
f196843
ci: removed hover effects
cosmicpotato137 Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
9 changes: 9 additions & 0 deletions public/svg-icons/CameraCenterIcon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions src/components/Icons/CameraCenterIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
14 changes: 6 additions & 8 deletions src/components/Universe/Controls/CameraAnimations/useAutoNavigate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down Expand Up @@ -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)
}
}
})
Expand Down
51 changes: 35 additions & 16 deletions src/components/Universe/Overlay/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)}>
kevkevinpal marked this conversation as resolved.
Show resolved Hide resolved
Re-center map
</Button>
)}
<CameraCenterButton
href=""
onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
size="medium"
startIcon={<CameraCenterIcon />}
/>

{hoveredNode && (
<div id="tooltip-portal">
Expand All @@ -36,6 +29,32 @@ export const Overlay = () => {
)
}

const CameraCenterButton = styled(Button)`
&& {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please, use Button from material-ui ?, size="large" is what you need, it has all hover/active effects applied, just change width, border-radius

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was able to get the svg generation to work. However, when using material-ui button I am unable to get it to render properly or to be intractable. This is what I'm trying right now:

import { Button } from '@mui/material'

export const Overlay = () => {
    ...
    <CameraCenterButton
      disabled={false}
      href=""
      onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
      size="large"
      startIcon={<CameraCenterIcon/>}
    />
...
)}

const CameraCenterButton = styled(Button)`
  position: absolute;
  right: 20px;
  top: 102px;
  z-index: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  padding: 8px 8px 9px 8px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;

  background: var(--BG-1, #23252f);
`;

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

import { Button } from '@mui/material'

it is not interactive, because its parent wrapper has pointer-events: none css property, to make it work, just add pointer-events: all to the button styles

Copy link
Collaborator

@Rassl Rassl Nov 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;
}

}
`

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the help! all the changes should be ready, but let me know if I should change anything else. I wasn't seeing any hover effects applied so I added them manually and tried to match the style of the layout change buttons below. If there's a better way to go about this let me know!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hove effects are applied at theme level, so you can remove those here, also background it not required, it is also set on theme options. Just copy past code that I provided, should work fine

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just removed hover effects!

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);
}

:hover {
.MuiButton-startIcon {
filter: brightness(.9);
}
transition: 0.1s;
}
}
`

const OverlayWrap = styled('div')(({ theme }) => ({
position: 'absolute',
zIndex: 1,
Expand Down
Loading