Added drag to scroll container

pages/visualize/[name].tsx

@@ -3,12 +3,13 @@ import Head from 'next/head'
 import {useGroups} from "../../components/contexts/GroupProvider";
 import {useFactories} from "../../src/hooks/useFactories";
 import {ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
-import {useMemo} from "react";
+import {useEffect, useMemo} from "react";
 import {calculateInputs} from "../../src/calculateInputs";
 import {useRouter} from "next/router";
 import {groupBy, isNonNullable, uniquify} from "../../src/utils";
-import {EnrichedEntity, Recipe} from "../../src/types";
+import {EnrichedEntity} from "../../src/types";
 import {DetailGraphNode, NodeDetails} from "../../components/visualize/NodeDetails/NodeDetails";
+import {ScrollContainer} from "../../components/shared/ScrollContainer/ScrollContainer";
 
 
 
@@ -24,6 +25,11 @@ const Page: NextPage = () => {
     findFactory
   } = useFactories()
 
+  useEffect(() => {
+    document.body.classList.add("scroll");
+    return () => document.body.classList.remove("scroll")
+  }, []);
+
   const group = typeof name === 'string' ? groups[name] : undefined
 
   const [inputFactories, intermediateFactories] = useMemo<ReturnType<typeof calculateInputs>>(() => {
@@ -66,13 +72,15 @@ const Page: NextPage = () => {
         <link rel="icon" href="/public/favicon.ico" />
       </Head>
       <main>
-        <h1>Factorio Microservices</h1>
-        <ProducingGraph
-          nodes={producingNodes}
-          inputs={inputFactories}
-          outputs={group?.exports}
-          childType={NodeDetails}
-          />
+        <ScrollContainer>
+          <h1>{name}</h1>
+          <ProducingGraph
+            nodes={producingNodes}
+            inputs={inputFactories}
+            outputs={group?.exports}
+            childType={NodeDetails}
+            />
+        </ScrollContainer>
       </main>
     </>
   )

pages/visualize/index.tsx

@@ -1,11 +1,13 @@
-import type { NextPage } from 'next'
+import type {NextPage} from 'next'
 import Head from 'next/head'
 import {useGroups} from "../../components/contexts/GroupProvider";
 import {useFactories} from "../../src/hooks/useFactories";
 import {ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
-import {useMemo} from "react";
+import {useEffect, useMemo} from "react";
 import {calculateInputs} from "../../src/calculateInputs";
 import {NodeOverview, OverviewGraphNode} from "../../components/visualize/NodeOverview/NodeOverview";
+import {fixedEncodeURIComponent} from "../../src/utils";
+import {ScrollContainer} from "../../components/shared/ScrollContainer/ScrollContainer";
 
 const Page: NextPage = () => {
   const {
@@ -18,6 +20,11 @@ const Page: NextPage = () => {
     findFactory
   } = useFactories()
 
+  useEffect(() => {
+    document.body.classList.add("scroll");
+    return () => document.body.classList.remove("scroll")
+  }, []);
+
   const producingNodes: OverviewGraphNode[] = useMemo(() => {
     return Object.values(groups).map(group => ({
       inputs: calculateInputs(
@@ -42,20 +49,13 @@ const Page: NextPage = () => {
         <link rel="icon" href="/public/favicon.ico" />
       </Head>
       <main>
-        <h1>Factorio Microservices</h1>
-        <ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview}></ProducingGraph>
+        <ScrollContainer>
+          <h1>Factorio Microservices</h1>
+          <ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview}/>
+        </ScrollContainer>
       </main>
     </>
   )
 }
 
-export async function getStaticProps() {
-  return { props: { bodyClassName: 'scroll' } };
-}
-
-function fixedEncodeURIComponent(str: string): string {
-  return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16));
-}
-
-
 export default Page