From a575d14b6621d5464d33d52ca642f2db70c3e370 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Tue, 27 Sep 2022 15:09:17 +0200 Subject: fix: move a ton of functions to separate files --- util/findNthNeighbour.ts | 42 +++++++++++++++++++++++ util/getLinkColor.ts | 82 +++++++++++++++++++++++++++++++++++++++++++++ util/getLinkNodeColor.ts | 23 +++++++++++++ util/getNodeColor.ts | 75 +++++++++++++++++++++++++++++++++++++++++ util/getNodeColorById.ts | 25 ++++++++++++++ util/getThemeColor.ts | 3 ++ util/hexToRGBA.ts | 11 ++++++ util/isLinkRelatedToNode.ts | 7 ++++ util/nodeSize.ts | 34 +++++++++++++++++++ util/normalizeLinkEnds.ts | 12 +++++++ util/numberWithinRange.ts | 3 ++ 11 files changed, 317 insertions(+) create mode 100644 util/findNthNeighbour.ts create mode 100644 util/getLinkColor.ts create mode 100644 util/getLinkNodeColor.ts create mode 100644 util/getNodeColor.ts create mode 100644 util/getNodeColorById.ts create mode 100644 util/getThemeColor.ts create mode 100644 util/hexToRGBA.ts create mode 100644 util/isLinkRelatedToNode.ts create mode 100644 util/nodeSize.ts create mode 100644 util/normalizeLinkEnds.ts create mode 100644 util/numberWithinRange.ts (limited to 'util') diff --git a/util/findNthNeighbour.ts b/util/findNthNeighbour.ts new file mode 100644 index 0000000..d48adbc --- /dev/null +++ b/util/findNthNeighbour.ts @@ -0,0 +1,42 @@ +import { LinksByNodeId } from '../pages' +import { normalizeLinkEnds } from './normalizeLinkEnds' + +export const findNthNeighbors = ({ + ids, + excludedIds, + n, + linksByNodeId, +}: { + ids: string[] + excludedIds: string[] + n: number + linksByNodeId: LinksByNodeId +}) => { + let queue = [ids[0]] + let todo: string[] = [] + const completed = [ids[0]] + Array.from({ length: n }, () => { + queue.forEach((node) => { + const links = linksByNodeId[node as string] ?? [] + links.forEach((link) => { + const [sourceId, targetId] = normalizeLinkEnds(link) + if (excludedIds.some((id) => [sourceId, targetId].includes(id))) { + return + } + if (!completed.includes(sourceId)) { + todo.push(sourceId) + return + } + if (!completed.includes(targetId)) { + todo.push(targetId) + return + } + return + }) + }) + queue = todo + todo.forEach((neighbor) => neighbor && completed.push(neighbor)) + todo = [] + }) + return completed +} diff --git a/util/getLinkColor.ts b/util/getLinkColor.ts new file mode 100644 index 0000000..33f7094 --- /dev/null +++ b/util/getLinkColor.ts @@ -0,0 +1,82 @@ +import { initialColoring, initialVisuals } from '../components/config' +import { LinksByNodeId } from '../pages' +import { getLinkNodeColor } from './getLinkNodeColor' +import { getThemeColor } from './getThemeColor' + +export const getLinkColor = ({ + sourceId, + targetId, + needsHighlighting, + theme, + visuals, + highlightColors, + opacity, + linksByNodeId, + coloring, + cluster, +}: { + sourceId: string + targetId: string + needsHighlighting: boolean + theme: any + visuals: typeof initialVisuals + highlightColors: Record + opacity: number + linksByNodeId: LinksByNodeId + coloring: typeof initialColoring + cluster: any +}) => { + if (!visuals.linkHighlight && !visuals.linkColorScheme && !needsHighlighting) { + const nodeColor = getLinkNodeColor({ + sourceId, + targetId, + linksByNodeId, + visuals, + coloring, + cluster, + }) + return getThemeColor(nodeColor, theme) + } + + if (!needsHighlighting && !visuals.linkColorScheme) { + const nodeColor = getLinkNodeColor({ + sourceId, + targetId, + linksByNodeId, + visuals, + coloring, + cluster, + }) + return highlightColors[nodeColor][visuals.backgroundColor](visuals.highlightFade * opacity) + } + + if (!needsHighlighting) { + return highlightColors[visuals.linkColorScheme][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) + } + + if (!visuals.linkHighlight && !visuals.linkColorScheme) { + const nodeColor = getLinkNodeColor({ + sourceId, + targetId, + linksByNodeId, + visuals, + coloring, + cluster, + }) + return getThemeColor(nodeColor, theme) + } + + if (!visuals.linkHighlight) { + return getThemeColor(visuals.linkColorScheme, theme) + } + + if (!visuals.linkColorScheme) { + return highlightColors[ + getLinkNodeColor({ sourceId, targetId, linksByNodeId, visuals, coloring, cluster }) + ][visuals.linkHighlight](opacity) + } + + return highlightColors[visuals.linkColorScheme][visuals.linkHighlight](opacity) +} diff --git a/util/getLinkNodeColor.ts b/util/getLinkNodeColor.ts new file mode 100644 index 0000000..86cfa4b --- /dev/null +++ b/util/getLinkNodeColor.ts @@ -0,0 +1,23 @@ +import { initialColoring, initialVisuals } from '../components/config' +import { LinksByNodeId } from '../pages' +import { getNodeColorById } from './getNodeColorById' + +export const getLinkNodeColor = ({ + sourceId, + targetId, + linksByNodeId, + visuals, + coloring, + cluster, +}: { + sourceId: string + targetId: string + linksByNodeId: LinksByNodeId + visuals: typeof initialVisuals + coloring: typeof initialColoring + cluster: any +}) => { + return linksByNodeId[sourceId]!.length > linksByNodeId[targetId]!.length + ? getNodeColorById({ id: sourceId, linksByNodeId, visuals, cluster, coloring }) + : getNodeColorById({ id: targetId, visuals, linksByNodeId, cluster, coloring }) +} diff --git a/util/getNodeColor.ts b/util/getNodeColor.ts new file mode 100644 index 0000000..f25a15b --- /dev/null +++ b/util/getNodeColor.ts @@ -0,0 +1,75 @@ +import { OrgRoamNode } from '../api' +import { initialColoring, initialVisuals } from '../components/config' +import { LinksByNodeId } from '../pages' +import { getNodeColorById } from './getNodeColorById' +import { getThemeColor } from './getThemeColor' + +export const getNodeColor = ({ + node, + theme, + highlightedNodes, + previouslyHighlightedNodes, + visuals, + tagColors, + highlightColors, + opacity, + emacsNodeId, + linksByNodeId, + cluster, + coloring, +}: { + node: OrgRoamNode + theme: any + visuals: typeof initialVisuals + highlightedNodes: Record + previouslyHighlightedNodes: Record + tagColors: Record + highlightColors: Record + opacity: number + emacsNodeId: string | null + linksByNodeId: LinksByNodeId + cluster: any + coloring: typeof initialColoring +}) => { + const needsHighlighting = highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] + //const needsHighlighting = hoverNode?.id === node.id! || lastHoverNode?.current?.id === node.id + // if we are matching the node color and don't have a highlight color + // or we don't have our own scheme and we're not being highlighted + 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 needsHighlighting + ? highlightColors[tagColor][tagColor](visuals.highlightFade * opacity) + : highlightColors[tagColor][visuals.backgroundColor](visuals.highlightFade * opacity) + } + if (visuals.citeNodeColor && node?.properties?.ROAM_REFS && node?.properties?.FILELESS) { + return needsHighlighting + ? getThemeColor(visuals.citeNodeColor, theme) + : highlightColors[visuals.citeNodeColor][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) + } + if (visuals.refNodeColor && node.properties.ROAM_REFS) { + return needsHighlighting + ? getThemeColor(visuals.refNodeColor, theme) + : highlightColors[visuals.refNodeColor][visuals.backgroundColor]( + visuals.highlightFade * opacity, + ) + } + if (!needsHighlighting) { + return highlightColors[ + getNodeColorById({ id: node.id as string, cluster, coloring, linksByNodeId, visuals }) + ][visuals.backgroundColor](visuals.highlightFade * opacity) + } + if (!visuals.nodeHighlight) { + return getThemeColor( + getNodeColorById({ id: node.id as string, cluster, coloring, linksByNodeId, visuals }), + theme, + ) + } + return highlightColors[ + getNodeColorById({ id: node.id as string, cluster, coloring, linksByNodeId, visuals }) + ][visuals.nodeHighlight](opacity) +} diff --git a/util/getNodeColorById.ts b/util/getNodeColorById.ts new file mode 100644 index 0000000..d2c198b --- /dev/null +++ b/util/getNodeColorById.ts @@ -0,0 +1,25 @@ +import { initialColoring, initialVisuals } from '../components/config' +import { LinksByNodeId } from '../pages' +import { numberWithinRange } from './numberWithinRange' + +export const getNodeColorById = ({ + id, + linksByNodeId, + visuals, + coloring, + cluster, +}: { + id: string + linksByNodeId: LinksByNodeId + visuals: typeof initialVisuals + cluster: any + coloring: typeof initialColoring +}) => { + const linklen = linksByNodeId[id!]?.length ?? 0 + if (coloring.method === 'degree') { + return visuals.nodeColorScheme[ + numberWithinRange(linklen, 0, visuals.nodeColorScheme.length - 1) + ] + } + return visuals.nodeColorScheme[linklen && cluster[id] % visuals.nodeColorScheme.length] +} diff --git a/util/getThemeColor.ts b/util/getThemeColor.ts new file mode 100644 index 0000000..1175a52 --- /dev/null +++ b/util/getThemeColor.ts @@ -0,0 +1,3 @@ +export const getThemeColor = (name: string, theme: any) => { + return name.split('.').reduce((o, i) => o[i], theme.colors) +} diff --git a/util/hexToRGBA.ts b/util/hexToRGBA.ts new file mode 100644 index 0000000..bacb601 --- /dev/null +++ b/util/hexToRGBA.ts @@ -0,0 +1,11 @@ +export function hexToRGBA(hex: string, opacity: number) { + return ( + 'rgba(' + + (hex = hex.replace('#', '')) + .match(new RegExp('(.{' + hex.length / 3 + '})', 'g'))! + .map((l) => parseInt(hex.length % 2 ? l + l : l, 16)) + .concat(isFinite(opacity) ? opacity : 1) + .join(',') + + ')' + ) +} diff --git a/util/isLinkRelatedToNode.ts b/util/isLinkRelatedToNode.ts new file mode 100644 index 0000000..eeacab7 --- /dev/null +++ b/util/isLinkRelatedToNode.ts @@ -0,0 +1,7 @@ +import { NodeObject, LinkObject } from 'force-graph' + +export const isLinkRelatedToNode = (link: LinkObject, node: NodeObject | null) => { + return ( + (link.source as NodeObject)?.id! === node?.id! || (link.target as NodeObject)?.id! === node?.id! + ) +} diff --git a/util/nodeSize.ts b/util/nodeSize.ts new file mode 100644 index 0000000..3601c1e --- /dev/null +++ b/util/nodeSize.ts @@ -0,0 +1,34 @@ +import { filter } from '@chakra-ui/react' +import { initialVisuals } from '../components/config' +import { LinksByNodeId } from '../pages' +import { NodeObject } from 'force-graph' + +export const nodeSize = ({ + linksByNodeId, + visuals, + highlightedNodes, + previouslyHighlightedNodes, + opacity, + node, +}: { + node: NodeObject + visuals: typeof initialVisuals + + highlightedNodes: Record + previouslyHighlightedNodes: Record + opacity: number + linksByNodeId: LinksByNodeId +}) => { + const links = linksByNodeId[node.id!] ?? [] + const parentNeighbors = links.length ? links.filter((link) => link.type === 'parent').length : 0 + const basicSize = + 3 + links.length * visuals.nodeSizeLinks - (!filter.parent ? parentNeighbors : 0) + if (visuals.highlightNodeSize === 1) { + return basicSize + } + const highlightSize = + highlightedNodes[node.id!] || previouslyHighlightedNodes[node.id!] + ? 1 + opacity * (visuals.highlightNodeSize - 1) + : 1 + return basicSize * highlightSize +} diff --git a/util/normalizeLinkEnds.ts b/util/normalizeLinkEnds.ts new file mode 100644 index 0000000..43eee9c --- /dev/null +++ b/util/normalizeLinkEnds.ts @@ -0,0 +1,12 @@ +import { OrgRoamLink } from '../api' +import { LinkObject } from 'force-graph' + +export function normalizeLinkEnds(link: OrgRoamLink | LinkObject): [string, string] { + // we need to cover both because force-graph modifies the original data + // but if we supply the original data on each render, the graph will re-render sporadically + const sourceId = + typeof link.source === 'object' ? (link.source.id! as string) : (link.source as string) + const targetId = + typeof link.target === 'object' ? (link.target.id! as string) : (link.target as string) + return [sourceId, targetId] +} diff --git a/util/numberWithinRange.ts b/util/numberWithinRange.ts new file mode 100644 index 0000000..ae435ce --- /dev/null +++ b/util/numberWithinRange.ts @@ -0,0 +1,3 @@ +export const numberWithinRange = (num: number, min: number, max: number) => { + return Math.min(Math.max(num, min), max) +} -- cgit v1.2.3 From fb26ac08618339f113749ea85c88ea69d255402b Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Tue, 27 Sep 2022 15:35:19 +0200 Subject: fix: small bugs --- components/Sidebar/Backlinks.tsx | 2 +- components/Sidebar/Link.tsx | 17 +++++++---------- components/Sidebar/Note.tsx | 2 +- components/Sidebar/OrgImage.tsx | 4 ++-- components/Sidebar/Section.tsx | 16 +++------------- components/Sidebar/Title.tsx | 1 - components/Sidebar/Toolbar.tsx | 12 ++---------- util/processOrg.tsx | 4 ++-- util/uniorg.tsx | 1 - 9 files changed, 18 insertions(+), 41 deletions(-) (limited to 'util') diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx index 0bbf415..5a8f6fc 100644 --- a/components/Sidebar/Backlinks.tsx +++ b/components/Sidebar/Backlinks.tsx @@ -2,7 +2,6 @@ import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index' import { GraphData, NodeObject, LinkObject } from 'force-graph' -import { normalizeLinkEnds } from '../../pages/index' import { VStack, Box, Button, Heading, StackDivider } from '@chakra-ui/react' import React from 'react' import { ProcessedOrg } from '../../util/processOrg' @@ -24,6 +23,7 @@ export interface BacklinksProps { import { PreviewLink } from './Link' import { OrgRoamNode } from '../../api' import { Section } from './Section' +import { normalizeLinkEnds } from '../../util/normalizeLinkEnds' export const Backlinks = (props: BacklinksProps) => { const { diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx index 2f1ad64..73830ce 100644 --- a/components/Sidebar/Link.tsx +++ b/components/Sidebar/Link.tsx @@ -14,17 +14,17 @@ import { Text, useTheme, } from '@chakra-ui/react' -import React, { ReactElement, useContext, useEffect, useMemo, useState } from 'react' +import React, { useContext, useEffect, useMemo, useState } from 'react' import { ProcessedOrg } from '../../util/processOrg' -import unified from 'unified' +// import unified from 'unified' //import createStream from 'unified-stream' -import uniorgParse from 'uniorg-parse' -import uniorg2rehype from 'uniorg-rehype' +// import uniorgParse from 'uniorg-parse' +// import uniorg2rehype from 'uniorg-rehype' //import highlight from 'rehype-highlight' -import katex from 'rehype-katex' +// import katex from 'rehype-katex' import 'katex/dist/katex.css' -import rehype2react from 'rehype-react' +// import rehype2react from 'rehype-react' import { ThemeContext } from '../../util/themecontext' import { LinksByNodeId, NodeByCite, NodeById } from '../../pages' @@ -63,13 +63,10 @@ export interface NormalLinkProps { children: string } -import { hexToRGBA, getThemeColor } from '../../pages/index' import { defaultNoteStyle, viewerNoteStyle, outlineNoteStyle } from './noteStyle' -import { OrgImage } from './OrgImage' import { Scrollbars } from 'react-custom-scrollbars-2' import { ExternalLinkIcon } from '@chakra-ui/icons' -import { Section } from './Section' -import { OrgRoamLink } from '../../api' +import { getThemeColor } from '../../util/getThemeColor' export const NodeLink = (props: NodeLinkProps) => { const { diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx index 638b43a..3d55816 100644 --- a/components/Sidebar/Note.tsx +++ b/components/Sidebar/Note.tsx @@ -1,7 +1,7 @@ import React from 'react' import { NodeObject } from 'force-graph' -import { NodeById, NodeByCite, LinksByNodeId, normalizeLinkEnds } from '../../pages' +import { NodeById, NodeByCite, LinksByNodeId } from '../../pages' import { Box, Flex } from '@chakra-ui/react' import { UniOrg } from '../../util/uniorg' import { Backlinks } from '../../components/Sidebar/Backlinks' diff --git a/components/Sidebar/OrgImage.tsx b/components/Sidebar/OrgImage.tsx index 0922834..f371f49 100644 --- a/components/Sidebar/OrgImage.tsx +++ b/components/Sidebar/OrgImage.tsx @@ -1,5 +1,5 @@ /* eslint-disable @next/next/no-img-element */ -import React, { useEffect, useState } from 'react' +import React, { useState } from 'react' import Image from 'next/image' import path from 'path' import { Container } from '@chakra-ui/react' @@ -13,7 +13,7 @@ export interface OrgImageProps { export const OrgImage = (props: OrgImageProps) => { const { src, file } = props - const [image, setImage] = useState(null) + // const [image, setImage] = useState(null) /* ) * .then((res) => res.blob()) diff --git a/components/Sidebar/Section.tsx b/components/Sidebar/Section.tsx index adaf00e..7e99f4f 100644 --- a/components/Sidebar/Section.tsx +++ b/components/Sidebar/Section.tsx @@ -1,17 +1,7 @@ -import { Box, Collapse, Flex, IconButton } from '@chakra-ui/react' -import React, { - JSXElementConstructor, - ReactChild, - ReactElement, - ReactNode, - useContext, - useEffect, - useState, -} from 'react' -import { BiCaretDownCircle, BiChevronDownCircle, BiCircle } from 'react-icons/bi' -import { ComponentLike, ComponentPropsWithoutNode } from 'rehype-react' +import { Box, Flex, IconButton } from '@chakra-ui/react' +import React, { ReactChild, useContext, useEffect, useState } from 'react' import { VscCircleFilled, VscCircleOutline } from 'react-icons/vsc' -import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@chakra-ui/icons' +import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons' import { NoteContext } from '../../util/NoteContext' export interface SectionProps { diff --git a/components/Sidebar/Title.tsx b/components/Sidebar/Title.tsx index 2c8d8b7..791cbb8 100644 --- a/components/Sidebar/Title.tsx +++ b/components/Sidebar/Title.tsx @@ -1,6 +1,5 @@ import { Flex, Heading } from '@chakra-ui/react' import React from 'react' -import { BiFile } from 'react-icons/bi' import { OrgRoamNode } from '../../api' export interface TitleProps { diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx index 71f3807..f606837 100644 --- a/components/Sidebar/Toolbar.tsx +++ b/components/Sidebar/Toolbar.tsx @@ -1,17 +1,9 @@ import React from 'react' -import { Text, Flex, IconButton, ButtonGroup, Tooltip } from '@chakra-ui/react' -import { - BiAlignJustify, - BiAlignLeft, - BiAlignMiddle, - BiAlignRight, - BiFont, - BiRightIndent, -} from 'react-icons/bi' +import { Flex, IconButton, ButtonGroup, Tooltip } from '@chakra-ui/react' +import { BiAlignJustify, BiAlignLeft, BiAlignMiddle, BiAlignRight } from 'react-icons/bi' import { MdOutlineExpand, MdOutlineCompress } from 'react-icons/md' import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons' import { IoIosListBox, IoMdListBox } from 'react-icons/io' -import { NodeObject } from 'force-graph' export interface ToolbarProps { setJustification: any diff --git a/util/processOrg.tsx b/util/processOrg.tsx index ea868ee..2abc256 100644 --- a/util/processOrg.tsx +++ b/util/processOrg.tsx @@ -26,7 +26,7 @@ import remarkSectionize from 'remark-sectionize' import remarkRehype from 'remark-rehype' import { PreviewLink } from '../components/Sidebar/Link' -import { LinksByNodeId, NodeByCite, NodeById, normalizeLinkEnds } from '../pages' +import { LinksByNodeId, NodeByCite, NodeById } from '../pages' import React, { createContext, ReactNode, useMemo } from 'react' import { OrgImage } from '../components/Sidebar/OrgImage' import { Section } from '../components/Sidebar/Section' @@ -36,6 +36,7 @@ import { OrgRoamLink, OrgRoamNode } from '../api' // @ts-expect-error non-ESM unified means no types import { toString } from 'hast-util-to-string' import { Box, chakra } from '@chakra-ui/react' +import { normalizeLinkEnds } from './normalizeLinkEnds' export interface ProcessedOrgProps { nodeById: NodeById @@ -126,7 +127,6 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => { const isMarkdown = previewNode?.file?.slice(-3) === '.md' const baseProcessor = isMarkdown ? mdProcessor : orgProcessor - console.log(macros) const processor = useMemo( () => baseProcessor diff --git a/util/uniorg.tsx b/util/uniorg.tsx index 4172d7a..8e285e6 100644 --- a/util/uniorg.tsx +++ b/util/uniorg.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useMemo, useState } from 'react' -import { OrgRoamLink, OrgRoamNode } from '../api' import { LinksByNodeId, NodeByCite, NodeById } from '../pages/index' import { ProcessedOrg } from './processOrg' -- cgit v1.2.3