diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/index.tsx | 56 | ||||
| -rw-r--r-- | pages/slidetest.tsx | 30 |
2 files changed, 32 insertions, 54 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 05142b2..2ecdb9a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -464,7 +464,7 @@ export function GraphPage() { const [windowWidth, windowHeight] = useWindowSize() const contextMenuRef = useRef<any>() - const [contextMenuTarget, setContextMenuTarget] = useState<OrgRoamNode | null>(null) + const [contextMenuTarget, setContextMenuTarget] = useState<OrgRoamNode | string | null>(null) type ContextPos = { left: number | undefined right: number | undefined @@ -487,11 +487,11 @@ export function GraphPage() { }, }) - const openContextMenu = (node: OrgRoamNode, event: any, coords?: ContextPos) => { + const openContextMenu = (target: OrgRoamNode | string, event: any, coords?: ContextPos) => { coords ? setContextPos(coords) : setContextPos({ left: event.pageX, top: event.pageY, right: undefined, bottom: undefined }) - setContextMenuTarget(node) + setContextMenuTarget(target) contextMenu.onOpen() } @@ -525,13 +525,7 @@ export function GraphPage() { } return ( - <Box - display="flex" - alignItems="flex-start" - flexDirection="row" - height="100vh" - overflow="hidden" - > + <Box display="flex" alignItems="flex-start" flexDirection="row" height="100vh" overflow="clip"> <Tweaks {...{ physics, @@ -553,7 +547,7 @@ export function GraphPage() { /> <Box position="absolute"> <Graph - ref={graphRef} + //ref={graphRef} nodeById={nodeByIdRef.current!} linksByNodeId={linksByNodeIdRef.current!} webSocket={WebSocketRef.current} @@ -580,6 +574,7 @@ export function GraphPage() { mainWindowWidth, setMainWindowWidth, setContextMenuTarget, + graphRef, }} /> </Box> @@ -642,6 +637,10 @@ export function GraphPage() { scope, setScope, windowWidth, + tagColors, + setTagColors, + filter, + setFilter, }} nodeById={nodeByIdRef.current!} linksByNodeId={linksByNodeIdRef.current!} @@ -660,6 +659,10 @@ export function GraphPage() { menuClose={contextMenu.onClose.bind(contextMenu)} webSocket={WebSocketRef.current} setPreviewNode={setPreviewNode} + setFilter={setFilter} + filter={filter} + setTagColors={setTagColors} + tagColors={tagColors} /> </div> )} @@ -693,10 +696,12 @@ export interface GraphProps { mainWindowWidth: number setMainWindowWidth: any variables: { [variable: string]: string } + graphRef: any } -export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { +export const Graph = function (props: GraphProps) { const { + graphRef, physics, graphData, threeDim, @@ -814,7 +819,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node } return false } - if (filter.bad && node.properties.bad) { + if (filter?.bad && node?.properties?.bad) { hiddenNodeIdsRef.current = { ...hiddenNodeIdsRef.current, [node.id]: node } return false } @@ -1119,11 +1124,13 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { if (visuals.emacsNodeColor && node.id === emacsNodeId) { return getThemeColor(visuals.emacsNodeColor, theme) } - if (tagColors && node.tags.some((tag) => tagColors[tag])) { - const tagColor = tagColors[node.tags.filter((tag) => tagColors[tag])[0]] - return highlightColors[tagColor][visuals.backgroundColor](visuals.highlightFade * opacity) + if (tagColors && node?.tags.some((tag) => tagColors[tag])) { + const tagColor = tagColors[node?.tags.filter((tag) => tagColors[tag])[0]] + return needsHighlighting + ? highlightColors[tagColor][tagColor](visuals.highlightFade * opacity) + : highlightColors[tagColor][visuals.backgroundColor](visuals.highlightFade * opacity) } - if (visuals.citeNodeColor && node.properties.ROAM_REFS && node.properties.FILELESS) { + if (visuals.citeNodeColor && node?.properties?.ROAM_REFS && node?.properties?.FILELESS) { return needsHighlighting ? getThemeColor(visuals.citeNodeColor, theme) : highlightColors[visuals.citeNodeColor][visuals.backgroundColor]( @@ -1175,21 +1182,22 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const [dragging, setDragging] = useState(false) - const [zoom, setZoom] = useState(1) + const scaleRef = useRef(1) const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = { graphData: scope.nodeIds.length ? scopedGraphData : filteredGraphData, - //width: windowWidth, + width: windowWidth, height: windowHeight, - backgroundColor: theme.colors.gray[visuals.backgroundColor], + backgroundColor: getThemeColor(visuals.backgroundColor, theme), warmupTicks: scope.nodeIds.length === 1 ? 100 : scope.nodeIds.length > 1 ? 20 : 0, - onZoom: ({ k, x, y }) => setZoom(k), + //onZoom: ({ k, x, y }) => setZoom(k), + onZoom: ({ k, x, y }) => (scaleRef.current = k), //nodeLabel: (node) => (node as OrgRoamNode).title, nodeColor: (node) => { return getNodeColor(node as OrgRoamNode, theme) }, nodeRelSize: visuals.nodeRel, nodeVal: (node) => { - return nodeSize(node) / Math.pow(zoom, visuals.nodeZoomSize) + return nodeSize(node) / Math.pow(scaleRef.current, visuals.nodeZoomSize) }, nodeCanvasObject: (node, ctx, globalScale) => { if (!node) { @@ -1376,6 +1384,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { }, } + console.log('hey') return ( <Box overflow="hidden" onClick={contextMenu.onClose}> {threeDim ? ( @@ -1383,7 +1392,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { ref={graphRef} {...graphCommonProps} nodeThreeObjectExtend={true} - backgroundColor={theme.colors.white} nodeOpacity={visuals.nodeOpacity} nodeResolution={visuals.nodeResolution} linkOpacity={visuals.linkOpacity} @@ -1421,7 +1429,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { )} </Box> ) -}) +} function isLinkRelatedToNode(link: LinkObject, node: NodeObject | null) { return ( diff --git a/pages/slidetest.tsx b/pages/slidetest.tsx deleted file mode 100644 index ca39cf9..0000000 --- a/pages/slidetest.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react' -import { Box, Button, Flex, Slide, useDisclosure } from '@chakra-ui/react' -import { Collapse } from '../components/Sidebar/Collapse' - -export default function Test() { - const { isOpen, onClose, onOpen, onToggle } = useDisclosure() - return ( - <> - <Button onClick={onToggle}>togg</Button> - <Flex flexDirection="row" justifyContent="space-between" w="100vw"> - <Box color="blue.500" width="100%"> - a - </Box> - <Collapse - animateOpacity={false} - dimension="width" - in={isOpen} - //style={{ position: 'relative' }} - unmountOnExit - endingSize={500} - startingSize={0} - > - <Box height="100vh" bgColor="red.500"> - Hey - </Box> - </Collapse> - </Flex> - </> - ) -} |