sebse/node-factorio-recipes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added drag to scroll container

Browse Source
This commit is contained in:
Sebastian Seedorf
2022-08-16 22:03:36 +02:00
parent a08478e504
commit 1522962edd
10 changed files with 96 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/home/GroupBox/GroupBox.tsx
View File

@@ -6,7 +6,8 @@ import styles from "./GroupBox.module.css"
import {EntitySpan} from "../EntitySpan/EntitySpan"; import {EntitySpan} from "../EntitySpan/EntitySpan";
import {useGroups} from "../../contexts/GroupProvider"; import {useGroups} from "../../contexts/GroupProvider";
import {calculateInputs} from "../../../src/calculateInputs"; import {calculateInputs} from "../../../src/calculateInputs";
import {uniquify} from "../../../src/utils"; import {fixedEncodeURIComponent, uniquify} from "../../../src/utils";
import Link from "next/link";
interface Props { interface Props {
group: Group group: Group
@@ -81,6 +82,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
> >
{name} {name}
</h3> </h3>
<Link href={`./visualize/${fixedEncodeURIComponent(group.name)}`}>👁</Link>
<button <button
className={styles.quit} className={styles.quit}
onBlur={() => setDeleteConfirm(false)} onBlur={() => setDeleteConfirm(false)}

10
components/shared/ScrollContainer/ScrollContainer.module.css Normal file
View File

@@ -0,0 +1,10 @@
.container {
width: 100vw;
height: 100vh;
}
.inner {
padding: 2em;
width: fit-content;
height: fit-content;
}

25
components/shared/ScrollContainer/ScrollContainer.tsx Normal file
View File

@@ -0,0 +1,25 @@
import {FC, PropsWithChildren, useEffect, useRef} from "react";
import IndianaDragScoll from "react-indiana-drag-scroll";
import styles from './ScrollContainer.module.css'
export const ScrollContainer: FC<PropsWithChildren> = ({children}) => {
const container = useRef<HTMLDivElement>(null);
useEffect(() => {
if (container.current) {
container.current.oncontextmenu = e => e.preventDefault()
}
}, []);
return <IndianaDragScoll
className={styles.container}
buttons={[2]}
innerRef={container}
hideScrollbars={false}
activationDistance={5}
>
<div className={styles.inner}>
{children}
</div>
</IndianaDragScoll>
}

1
package.json
View File

@@ -15,6 +15,7 @@
"pako": "^2.0.4", "pako": "^2.0.4",
"react": "18.2.0", "react": "18.2.0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-indiana-drag-scroll": "^2.2.0",
"react-select": "^5.4.0", "react-select": "^5.4.0",
"react-tooltip": "^4.2.21", "react-tooltip": "^4.2.21",
"seedrandom": "^3.0.5" "seedrandom": "^3.0.5"

4
pages/index.tsx
View File

@@ -4,10 +4,6 @@ import {Home} from "../components/home/Home";
import {useEffect} from "react"; import {useEffect} from "react";
const Page: NextPage = () => { const Page: NextPage = () => {
useEffect(() =>
{
document.body.classList.add("scroll");
});
return ( return (
<> <>
<Head> <Head>

26
pages/visualize/[name].tsx
View File

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

26
pages/visualize/index.tsx
View File

@@ -1,11 +1,13 @@
import type { NextPage } from 'next' import type {NextPage} from 'next'
import Head from 'next/head' import Head from 'next/head'
import {useGroups} from "../../components/contexts/GroupProvider"; import {useGroups} from "../../components/contexts/GroupProvider";
import {useFactories} from "../../src/hooks/useFactories"; import {useFactories} from "../../src/hooks/useFactories";
import {ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph"; import {ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
import {useMemo} from "react"; import {useEffect, useMemo} from "react";
import {calculateInputs} from "../../src/calculateInputs"; import {calculateInputs} from "../../src/calculateInputs";
import {NodeOverview, OverviewGraphNode} from "../../components/visualize/NodeOverview/NodeOverview"; import {NodeOverview, OverviewGraphNode} from "../../components/visualize/NodeOverview/NodeOverview";
import {fixedEncodeURIComponent} from "../../src/utils";
import {ScrollContainer} from "../../components/shared/ScrollContainer/ScrollContainer";
const Page: NextPage = () => { const Page: NextPage = () => {
const { const {
@@ -18,6 +20,11 @@ const Page: NextPage = () => {
findFactory findFactory
} = useFactories() } = useFactories()
useEffect(() => {
document.body.classList.add("scroll");
return () => document.body.classList.remove("scroll")
}, []);
const producingNodes: OverviewGraphNode[] = useMemo(() => { const producingNodes: OverviewGraphNode[] = useMemo(() => {
return Object.values(groups).map(group => ({ return Object.values(groups).map(group => ({
inputs: calculateInputs( inputs: calculateInputs(
@@ -42,20 +49,13 @@ const Page: NextPage = () => {
<link rel="icon" href="/public/favicon.ico" /> <link rel="icon" href="/public/favicon.ico" />
</Head> </Head>
<main> <main>
<h1>Factorio Microservices</h1> <ScrollContainer>
<ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview}></ProducingGraph> <h1>Factorio Microservices</h1>
<ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview}/>
</ScrollContainer>
</main> </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 export default Page

4
src/utils.ts
View File

@@ -34,3 +34,7 @@ export function shuffleInplace<T>(array: T[], rng: PRNG): T[] {
} }
return array return array
} }
export function fixedEncodeURIComponent(str: string): string {
return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16));
}

5
styles/globals.css
View File

@@ -13,8 +13,9 @@ body {
} }
body.scroll { body.scroll {
overflow: auto; width: 100vw;
overflow-scrolling: touch; height: 100vh;
padding: 0;
} }
a { a {

21
yarn.lock
View File

@@ -567,7 +567,7 @@ chalk@^4.0.0:
ansi-styles "^4.1.0" ansi-styles "^4.1.0"
supports-color "^7.1.0" supports-color "^7.1.0"
classnames@^2.3.1: classnames@^2.2.6, classnames@^2.3.1:
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
@@ -643,6 +643,11 @@ damerau-levenshtein@^1.0.8:
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA== integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
debounce@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
debug@^2.6.9: debug@^2.6.9:
version "2.6.9" version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -713,6 +718,11 @@ dom-helpers@^5.0.1:
"@babel/runtime" "^7.8.7" "@babel/runtime" "^7.8.7"
csstype "^3.0.2" csstype "^3.0.2"
easy-bem@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03"
integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A==
emoji-regex@^9.2.2: emoji-regex@^9.2.2:
version "9.2.2" version "9.2.2"
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
@@ -1771,6 +1781,15 @@ react-dom@18.2.0:
loose-envify "^1.1.0" loose-envify "^1.1.0"
scheduler "^0.23.0" scheduler "^0.23.0"
react-indiana-drag-scroll@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.2.0.tgz#657e14bbdf4888cc738e9fa8dc4384d76c348c0b"
integrity sha512-+W/3B2OQV0FrbdnsoIo4dww/xpH0MUQJz6ziQb7H+oBko3OCbXuzDFYnho6v6yhGrYDNWYPuFUewb89IONEl/A==
dependencies:
classnames "^2.2.6"
debounce "^1.2.0"
easy-bem "^1.1.1"
react-is@^16.13.1, react-is@^16.7.0: react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1" version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"