diff options
| -rw-r--r-- | components/config.ts | 25 | ||||
| -rw-r--r-- | components/tweaks.tsx | 4 | ||||
| -rw-r--r-- | pages/index.tsx | 32 |
3 files changed, 34 insertions, 27 deletions
diff --git a/components/config.ts b/components/config.ts index 2cc4b54..89b6dd0 100644 --- a/components/config.ts +++ b/components/config.ts @@ -12,9 +12,11 @@ for (let type in Easing) { } } +export const algos = algorithms + export const initialPhysics = { enabled: true, - charge: -350, + charge: -500, collision: true, collisionStrength: 20, centering: true, @@ -25,7 +27,7 @@ export const initialPhysics = { alphaTarget: 0, alphaMin: 0, velocityDecay: 0.25, - gravity: 0.5, + gravity: 0.3, gravityOn: true, } @@ -42,21 +44,20 @@ export const initialVisuals = { particles: false, particlesNumber: 0, particlesWidth: 4, - linkOpacity: 0.7, + linkOpacity: 0.8, linkWidth: 1, nodeRel: 4, - nodeOpacity: 0.9, - nodeResolution: 8, + nodeOpacity: 1, + nodeResolution: 12, labels: 2, labelScale: 1.5, highlight: true, highlightNodeSize: 2, highlightLinkSize: 2, - highlightAnim: false, - animationSpeed: 250, - algorithms: algorithms, + highlightAnim: true, + animationSpeed: 700, algorithmOptions: options, - algorithmName: 'CubicOut', + algorithmName: 'BackOut', linkColorScheme: 'gray.500', nodeColorScheme: [ 'red.500', @@ -71,9 +72,9 @@ export const initialVisuals = { nodeHighlight: '', linkHighlight: 'purple.500', backgroundColor: 'white', - emacsNodeColor: '', - labelTextColor: 'white', - labelBackgroundColor: 'black', + emacsNodeColor: 'grey.800', + labelTextColor: 'black', + labelBackgroundColor: 'white', labelBackgroundOpacity: 0.7, } diff --git a/components/tweaks.tsx b/components/tweaks.tsx index e7653df..34421f1 100644 --- a/components/tweaks.tsx +++ b/components/tweaks.tsx @@ -128,7 +128,7 @@ export const Tweaks = (props: TweakProps) => { position="relative" boxShadow="xl" > - <Box display="flex" justifyContent="space-between" alignItems="center"> + <Box display="flex" justifyContent="space-between" alignItems="center" paddingRight={2}> <Tooltip label={'Switch to ' + threeDim ? '2D' : '3D' + ' view'}> <Button onClick={() => setThreeDim(!threeDim)} variant="ghost" zIndex="overlay"> {threeDim ? '3D' : '2D'} @@ -300,7 +300,7 @@ export const Tweaks = (props: TweakProps) => { } /> <EnableSection - label="Keeps nodes centered" + label="Center nodes" value={physics.centering} onChange={() => setPhysics({ ...physics, centering: !physics.centering }) diff --git a/pages/index.tsx b/pages/index.tsx index 75e6b17..a29600d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -29,6 +29,7 @@ import { initialVisuals, initialBehavior, initialMouse, + algos, } from '../components/config' import { Tweaks } from '../components/tweaks' @@ -355,10 +356,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { if (physics.gravityOn) { fg.d3Force('x', d3.forceX().strength(physics.gravity)) fg.d3Force('y', d3.forceY().strength(physics.gravity)) + threeDim && fg.d3Force('z', d3.forceZ().strength(physics.gravity)) } else { fg.d3Force('x', null) fg.d3Force('y', null) - threeDim ? fg.d3Force('z', null) : null + threeDim && fg.d3Force('z', null) } physics.centering ? fg.d3Force('center', d3.forceCenter().strength(physics.centeringStrength)) @@ -385,12 +387,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const [opacity, setOpacity] = useState<number>(1) const [fadeIn, cancel] = useAnimation((x) => setOpacity(x), { duration: visuals.animationSpeed, - algorithm: visuals.algorithms[visuals.algorithmName], - }) - const [fadeOut] = useAnimation((x) => setOpacity(Math.min(opacity, -1 * (x - 1))), { - duration: visuals.animationSpeed, - algorithm: visuals.algorithms[visuals.algorithmName], + algorithm: algos[visuals.algorithmName], }) + const [fadeOut, fadeOutCancel] = useAnimation( + (x) => setOpacity(Math.min(opacity, -1 * (x - 1))), + { + duration: visuals.animationSpeed, + algorithm: algos[visuals.algorithmName], + }, + ) const lastHoverNode = useRef<OrgRoamNode | null>(null) useEffect(() => { @@ -401,7 +406,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { return hoverNode ? setOpacity(1) : setOpacity(0) } if (hoverNode) { - console.log(getNodeColorById(lastHoverNode.current!.id!)) fadeIn() } else { // to prevent fadeout animation from starting at 1 @@ -578,7 +582,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { } const nodeTitle = (node as OrgRoamNode).title! - const label = nodeTitle.substring(0, Math.min(nodeTitle.length, 30)) + const label = nodeTitle.substring(0, Math.min(nodeTitle.length, 40)) // const label = 'label' const fontSize = 12 / globalScale const textWidth = ctx.measureText(label).width @@ -678,6 +682,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { if (!visuals.highlight) { return } + + if (!hoverNode) { + fadeOutCancel() + setOpacity(0) + } setHoverNode(node) }, } @@ -697,13 +706,10 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { if (!visuals.labels) { return } - if (visuals.labels === 2) { - return - } - if (visuals.labels === 1 && !highlightedNodes[node.id!]) { + if (visuals.labels < 3 && !highlightedNodes[node.id!]) { return } - const sprite = new SpriteText(node.title.substring(0, 30)) + const sprite = new SpriteText(node.title.substring(0, 40)) sprite.color = getThemeColor(visuals.labelTextColor) sprite.backgroundColor = getThemeColor(visuals.labelBackgroundColor) sprite.padding = 2 |