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 8 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
9 changes: 9 additions & 0 deletions public/svg-icons/Center Icon.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.
2 changes: 1 addition & 1 deletion src/components/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { ColorName } from '~/utils/colors'

type Props = {
background?: ColorName
children: string | string[]
children?: string | string[]
endIcon?: ReactNode
startIcon?: ReactNode
disabled?: boolean
Expand Down
16 changes: 16 additions & 0 deletions src/components/Icons/CenterCameraIcon.tsx
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

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

Please use svgLibBuilder.js, all icons are generated by script, otherwise your changes will be affected with new Icon update. To use this script, just add desired svg Icon to public/svg-icons with proper name, and run node ./svgLibBuilder.js

Styling of Icon should be though parenst color and font-size

Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/* eslint-disable */
import React from 'react'

const CenterCamera: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Center Icon">
<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 CenterCamera
45 changes: 30 additions & 15 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 styled from 'styled-components'
import { Button } from '~/components/Button'
import { useControlStore } from '~/stores/useControlStore'
import CenterCamera from '~/components/Icons/CenterCameraIcon'
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>
)}
<TestButton
background="bluePressState"
kind="small"
onClick={() => setCameraFocusTrigger(!cameraFocusTrigger)}
startIcon={<CenterCamera/>}
/>

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

const TestButton = styled(Button)`
position: absolute;
right: 20px;
bottom: 102px;

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

&:hover {
background: #121319;
transition: .2s;
}
`;

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