From f2a1bfdd8efc5612efa98b265ec983154823108a Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Mon, 26 Jul 2021 05:30:53 +0200 Subject: added buggy mouse action switcher --- pages/_app.tsx | 2 +- pages/index.tsx | 126 ++++++++++++++++++++++++++++++++++++-------------------- 2 files changed, 83 insertions(+), 45 deletions(-) (limited to 'pages') diff --git a/pages/_app.tsx b/pages/_app.tsx index 3804c64..6d2cefe 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -49,7 +49,7 @@ function MyApp({ Component, pageProps }: AppProps) { black: emacsTheme.fg, gray: { 100: emacsTheme.base1, - 200: d3int.interpolate(emacsTheme.base1, emacsTheme.base3)(0.3), + 200: d3int.interpolate(emacsTheme.base1, emacsTheme.base2)(0.2), 300: emacsTheme.base2, 400: emacsTheme.base3, 500: emacsTheme.base4, diff --git a/pages/index.tsx b/pages/index.tsx index 4451a44..ab78258 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,10 +14,10 @@ import Head from 'next/head' import { useWindowSize } from '@react-hook/window-size' import { useAnimation } from '@lilib/hooks' -import { Button, Box, IconButton, useTheme, useDisclosure } from '@chakra-ui/react' +import { Button, Box, IconButton, useTheme, useDisclosure, Flex } from '@chakra-ui/react' -import { SettingsIcon } from '@chakra-ui/icons' -import { initialPhysics, initialFilter } from '../components/config' +import { ChevronLeftIcon, SettingsIcon } from '@chakra-ui/icons' +import { initialPhysics, initialFilter, initialMouse } from '../components/config' import { Tweaks } from '../components/tweaks' import { Sidebar } from '../components/sidebar' @@ -55,6 +55,7 @@ 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(null) const [emacsNodeId, setEmacsNodeId] = useState(null) const { isOpen, onOpen, onClose } = useDisclosure() @@ -133,13 +134,14 @@ export function GraphPage() { }, [emacsNodeId]) const [threeDim, setThreeDim] = useState(false) + const [openNode, setOpenNode] = useState('') if (!graphData) { return null } return ( - + Org Roam UI - - - - - + + {!isOpen && ( + } + height={100} + aria-label="Open org-viewer" + position="relative" + zIndex="overlay" + colorScheme="purple" + onClick={onOpen} + variant="outline" + marginTop={10} + /> + )} + + + + + ) } @@ -211,10 +213,22 @@ 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 } = props + const { + physics, + graphData, + threeDim, + linksByNodeId, + filter, + emacsNodeId, + nodeById, + mouse, + setOpenNode, + } = props const graph2dRef = useRef(null) const graph3dRef = useRef(null) @@ -227,6 +241,24 @@ export const Graph = function (props: GraphProps) { const [hoverNode, setHoverNode] = useState(null) const [scope, setScope] = useState({ 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 @@ -393,14 +425,17 @@ 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 } - setScope((currentScope) => ({ - ...currentScope, - nodeIds: [...currentScope.nodeIds, node.id as string], - })) + handleMouse(node.id, 2) + console.log(mouse) + /* setScope((currentScope) => ({ + * ...currentScope, + * nodeIds: [...currentScope.nodeIds, node.id as string], + * })) */ return } @@ -627,6 +662,9 @@ export const Graph = function (props: GraphProps) { } setHoverNode(node) }, + onNodeRightClick: (node) => { + handleMouse(node.id, 4) + }, } const bg = theme.colors.alt[100] -- cgit v1.2.3