summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/tweaks.tsx104
-rw-r--r--pages/_app.tsx2
-rw-r--r--pages/index.tsx93
3 files changed, 18 insertions, 181 deletions
diff --git a/components/tweaks.tsx b/components/tweaks.tsx
index a26d479..43a8ecf 100644
--- a/components/tweaks.tsx
+++ b/components/tweaks.tsx
@@ -12,9 +12,7 @@ import {
AccordionItem,
AccordionPanel,
Box,
- BoxProps,
Button,
- CloseButton,
Flex,
IconButton,
Menu,
@@ -31,14 +29,12 @@ import {
Text,
Tooltip,
VStack,
- useDisclosure,
Heading,
- SlideFade,
Collapse,
} from '@chakra-ui/react'
import React, { useState } from 'react'
import Scrollbars from 'react-custom-scrollbars-2'
-import { initialPhysics, initialFilter, initialMouse } from './config'
+import { initialPhysics, initialFilter } from './config'
export interface TweakProps {
physics: typeof initialPhysics
@@ -47,14 +43,11 @@ export interface TweakProps {
setThreeDim: (newValue: boolean) => void
filter: typeof initialFilter
setFilter: any
- mouse: typeof initialMouse
- setMouse: any
}
export const Tweaks = (props: TweakProps) => {
- const { physics, setPhysics, threeDim, setThreeDim, mouse, setMouse, filter, setFilter } = props
+ const { physics, setPhysics, threeDim, setThreeDim, filter, setFilter } = props
const [showTweaks, setShowTweaks] = useState(true)
- const mouseArray = ['Never', 'Hover', 'Click', 'Double Click', 'Right Click']
return (
<>
@@ -91,7 +84,6 @@ export const Tweaks = (props: TweakProps) => {
colorScheme="purple"
variant={threeDim ? 'solid' : 'outline'}
zIndex="overlay"
- variant="ghost"
>
{threeDim ? '2D' : '3D'}
</Button>
@@ -337,7 +329,7 @@ export const Tweaks = (props: TweakProps) => {
</MenuList>
</Menu>
</Flex>
- <Collapse in={physics.labels > 1} animateOpactiy>
+ <Collapse in={physics.labels > 1} animateOpacity>
<Box paddingLeft={4} paddingTop={2}>
<SliderWithInfo
label="Label Appearance Scale"
@@ -415,11 +407,13 @@ export const Tweaks = (props: TweakProps) => {
setPhysics({ ...physics, algorithmName: v.target.value })
}}
>
- {physics.algorithmOptions.map((opt, i) => (
- <option key={i} value={opt}>
- {opt}
- </option>
- ))}
+ {physics.algorithmOptions.map((opt: string, i: number) => {
+ return (
+ <option key={i} value={opt}>
+ {opt}
+ </option>
+ )
+ })}
</Select>
{/* <DropDownMenu
displayValue={physics.algorithmName}
@@ -447,83 +441,7 @@ export const Tweaks = (props: TweakProps) => {
align="stretch"
paddingLeft={7}
color="gray.800"
- >
- <Flex alignItems="center" justifyContent="space-between">
- <Flex>
- <Text>Open preview window on...</Text>
- <InfoTooltip infoText="Open a drawer with an HTML export of the node. Note, kinda buggy." />
- </Flex>
- <Menu>
- <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
- {mouseArray[mouse.open]}
- </MenuButton>
- <MenuList bgColor="gray.200">
- <MenuItem onClick={() => setMouse({ ...mouse, open: 0 })}>Never</MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, open: 1 })}>Hover</MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, open: 2 })}>Click</MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, open: 3 })}>
- Double Click
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, open: 4 })}>
- Right Click
- </MenuItem>
- </MenuList>
- </Menu>
- </Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Flex>
- <Text>Enter local graph on...</Text>
- <InfoTooltip infoText="View only the node and its direct neighbors" />
- </Flex>
- <Menu>
- <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
- {mouseArray[mouse.local]}
- </MenuButton>
- <MenuList bgColor="gray.200">
- <MenuItem onClick={() => setMouse({ ...mouse, local: 0 })}>
- Never
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, local: 1 })}>
- Hover
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, local: 2 })}>
- Click
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, local: 3 })}>
- Double Click
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, local: 4 })}>
- Right Click
- </MenuItem>
- </MenuList>
- </Menu>
- </Flex>
- <Flex alignItems="center" justifyContent="space-between">
- <Text>Open node in emacs on...</Text>
- <Menu>
- <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
- {mouseArray[mouse.follow]}
- </MenuButton>
- <MenuList bgColor="gray.200">
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 0 })}>
- Never
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 1 })}>
- Hover
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 2 })}>
- Click
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 3 })}>
- Double Click
- </MenuItem>
- <MenuItem onClick={() => setMouse({ ...mouse, follow: 4 })}>
- Right Click
- </MenuItem>
- </MenuList>
- </Menu>
- </Flex>
- </VStack>
+ ></VStack>
</AccordionPanel>
</AccordionItem>
</Accordion>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 1455426..e6332de 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -32,7 +32,7 @@ function MyApp({ Component, pageProps }: AppProps) {
violet: '#a991f1',
yellow: '#FCCE7B',
}
- const [emacsTheme, setEmacsTheme] = useState(initialTheme)
+ const [emacsTheme, setEmacsTheme] = useState<typeof initialTheme>(initialTheme)
useEffect(() => {
const trackTheme = new EventSource('http://127.0.0.1:35901/theme')
trackTheme.addEventListener('message', (e) => {
diff --git a/pages/index.tsx b/pages/index.tsx
index ab78258..00d8473 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,9 +17,8 @@ import { useAnimation } from '@lilib/hooks'
import { Button, Box, IconButton, useTheme, useDisclosure, Flex } from '@chakra-ui/react'
import { ChevronLeftIcon, SettingsIcon } from '@chakra-ui/icons'
-import { initialPhysics, initialFilter, initialMouse } from '../components/config'
+import { initialPhysics, initialFilter } from '../components/config'
import { Tweaks } from '../components/tweaks'
-import { Sidebar } from '../components/sidebar'
// react-force-graph fails on import when server-rendered
// https://github.com/vasturiano/react-force-graph/issues/155
@@ -55,10 +54,8 @@ export default function Home() {
export function GraphPage() {
const [physics, setPhysics] = usePersistantState('physics', initialPhysics)
const [filter, setFilter] = usePersistantState('filter', initialFilter)
- const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
const [graphData, setGraphData] = useState<GraphData | null>(null)
const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
- const { isOpen, onOpen, onClose } = useDisclosure()
const nodeByIdRef = useRef<NodeById>({})
const linksByNodeIdRef = useRef<LinksByNodeId>({})
@@ -134,7 +131,6 @@ export function GraphPage() {
}, [emacsNodeId])
const [threeDim, setThreeDim] = useState(false)
- const [openNode, setOpenNode] = useState('')
if (!graphData) {
return null
@@ -142,50 +138,16 @@ export function GraphPage() {
return (
<Box display="flex" alignItems="flex-start" flexDirection="row" height="100%">
- <Head>
- <title> Org Roam UI </title>
- <script
- async
- src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"
- ></script>
- </Head>
- <Sidebar
- nodeById={nodeByIdRef.current}
- {...{
- isOpen,
- onClose,
- openNode,
- }}
- />
<Tweaks
{...{
physics,
setPhysics,
threeDim,
setThreeDim,
- mouse,
- setMouse,
- initialMouse,
filter,
setFilter,
}}
/>
- <Flex height="100%" flexDirection="column" marginLeft="auto">
- {!isOpen && (
- <IconButton
- icon={<ChevronLeftIcon />}
- height={100}
- aria-label="Open org-viewer"
- position="relative"
- zIndex="overlay"
- colorScheme="purple"
- onClick={onOpen}
- variant="outline"
- marginTop={10}
- />
- )}
- </Flex>
-
<Box position="absolute" alignItems="top">
<Graph
nodeById={nodeByIdRef.current!}
@@ -196,8 +158,6 @@ export function GraphPage() {
threeDim,
emacsNodeId,
filter,
- setOpenNode,
- mouse,
}}
/>
</Box>
@@ -213,22 +173,10 @@ export interface GraphProps {
threeDim: boolean
filter: typeof initialFilter
emacsNodeId: string | null
- mouse: typeof initialMouse
- setOpenNode: any
}
export const Graph = function (props: GraphProps) {
- const {
- physics,
- graphData,
- threeDim,
- linksByNodeId,
- filter,
- emacsNodeId,
- nodeById,
- mouse,
- setOpenNode,
- } = props
+ const { physics, graphData, threeDim, linksByNodeId, filter, emacsNodeId, nodeById } = props
const graph2dRef = useRef<any>(null)
const graph3dRef = useRef<any>(null)
@@ -241,24 +189,6 @@ export const Graph = function (props: GraphProps) {
const [hoverNode, setHoverNode] = useState<NodeObject | null>(null)
const [scope, setScope] = useState<Scope>({ nodeIds: [] })
- const handleMouse = (nodeId: string | number | undefined, num: number) => {
- switch (num) {
- // case mouse.highlight: setHighlightNode(node)
- // case mouse.select: setSelectedNode(node)
- case mouse.open:
- setOpenNode(nodeId as string)
- case mouse.local: {
- setScope((currentScope) => ({
- ...currentScope,
- nodeIds: [...currentScope.nodeIds, nodeId as string],
- }))
- }
- case mouse.follow:
- window.open(('org-protocol://roam-node?node=' + nodeId) as string, '_self')
- default:
- break
- }
- }
useEffect(() => {
if (!emacsNodeId) {
return
@@ -333,9 +263,6 @@ export const Graph = function (props: GraphProps) {
const scopedNodes = useMemo(() => {
return filteredNodes.filter((node) => {
const links = linksByNodeId[node.id as string] ?? []
- /* if (physics.orphans && links.length === 0) {
- * return false
- * } */
return (
scope.nodeIds.includes(node.id as string) ||
links.some((link) => {
@@ -425,18 +352,13 @@ export const Graph = function (props: GraphProps) {
lastNodeClickRef.current = event.timeStamp
if (isDoubleClick) {
- handleMouse(node.id, 3)
window.open('org-protocol://roam-node?node=' + node.id, '_self')
return
}
-
- handleMouse(node.id, 2)
- console.log(mouse)
- /* setScope((currentScope) => ({
- * ...currentScope,
- * nodeIds: [...currentScope.nodeIds, node.id as string],
- * })) */
- return
+ setScope((currentScope) => ({
+ ...currentScope,
+ nodeIds: [...currentScope.nodeIds, nodeId as string],
+ }))
}
const [opacity, setOpacity] = useState<number>(1)
@@ -662,9 +584,6 @@ export const Graph = function (props: GraphProps) {
}
setHoverNode(node)
},
- onNodeRightClick: (node) => {
- handleMouse(node.id, 4)
- },
}
const bg = theme.colors.alt[100]
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-23 18:36:26 +0000