From 2898f25169460bfe483cda96b3b6ad6a66331a8a Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Wed, 21 Jul 2021 12:43:51 +0200
Subject: added chakra and disabled particles by default

---
 pages/_app.tsx  | 7 ++++++-
 pages/index.tsx | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'pages')

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 945e892..1801159 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,12 @@
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
+import { ChakraProvider } from '@chakra-ui/react'
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <ChakraProvider>
+      <Component {...pageProps} />
+    </ChakraProvider>
+  )
 }
 export default MyApp
diff --git a/pages/index.tsx b/pages/index.tsx
index 9a22128..fb15ddc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -23,7 +23,7 @@ const initialPhysics = {
   collision: true,
   linkStrength: 0.1,
   linkIts: 1,
-  particles: 2,
+  particles: 0,
   linkOpacity: 0.4,
   linkWidth: 1,
   particleWidth: 4,
@@ -289,6 +289,7 @@ export const Graph = function (props: GraphProps) {
           return linkIsHighlighted ? '#a991f1' : 'rgb(50, 50, 50, 0.2)'
         }}
         linkDirectionalParticles={physics.particles}
+        linkDirectionalParticleWidth={physics.particleWidth}
         nodeLabel={(node) => (node as OrgRoamNode).title}
         linkWidth={(link) => {
           const linkIsHighlighted =
@@ -304,7 +305,6 @@ export const Graph = function (props: GraphProps) {
           const highlightSize = highlightedNodes[node.id!] ? 2 : 0
           return basicSize + highlightSize
         }}
-        linkDirectionalParticleWidth={physics.particleWidth}
         nodeCanvasObject={(node, ctx, globalScale) => {
           if (!physics.labels) {
             return
-- 
cgit v1.2.3