more localStorage settings

runsascoded · Sep 27, 2023 · d9b1780 · d9b1780
1 parent 6b25ab3
commit d9b1780
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -262,7 +262,7 @@ export function Links<Val>({ links, cur, setVal, activeVisited, }: {
 }
 
 export default function Page() {
-    const [ logLevel, setLogLevel ] = useState<LogLevel>("info")
+    const [ logLevel, setLogLevel ] = useLocalStorageState<LogLevel>("logLevel", { defaultValue: "info" })
     return <Apvd logLevel={logLevel}>{() => <Body logLevel={logLevel} setLogLevel={setLogLevel} />}</Apvd>
 }
 
@@ -422,6 +422,7 @@ export function Body({ logLevel, setLogLevel, }: { logLevel: LogLevel, setLogLev
     )
 
     const gridState = GridState({
+        localStorage: true,
         center: { x: 0, y: sq3/4, },
         scale: 100,
         width: 800,
@@ -444,20 +445,20 @@ export function Body({ logLevel, setLogLevel, }: { logLevel: LogLevel, setLogLev
     const [ shapesShown, setShapesShown ] = useLocalStorageState("shapesShown", { defaultValue: false, })
     const [ layoutsShown, setLayoutsShown ] = useLocalStorageState("layoutsShown", { defaultValue: false, })
 
-    const [ maxErrorRatioStepSize, setMaxErrorRatioStepSize ] = useState(0.5)
-    const [ maxSteps, setMaxSteps ] = useState(10000)
-    const [ stepBatchSize, setStepBatchSize ] = useState(10)
+    const [ maxErrorRatioStepSize, setMaxErrorRatioStepSize ] = useLocalStorageState("maxErrorRatioStepSize", { defaultValue: 0.5 })
+    const [ maxSteps, setMaxSteps ] = useLocalStorageState("maxSteps", { defaultValue: 10000 })
+    const [ stepBatchSize, setStepBatchSize ] = useLocalStorageState("stepBatchSize", { defaultValue: 10 })
 
     const [ model, setModel ] = useState<Model | null>(null)
     const [ modelStepIdx, setModelStepIdx ] = useState<number | null>(null)
     const [ vStepIdx, setVStepIdx ] = useState<number | null>(null)
     const [ runningState, setRunningState ] = useState<RunningState>("none")
     const [ frameLen, setFrameLen ] = useState(0)
-    const [ autoCenter, setAutoCenter ] = useState(true)
+    const [ autoCenter, setAutoCenter ] = useLocalStorageState("autoCenter", { defaultValue: true })
     const [ autoCenterInterpRate, setAutoCenterInterpRate ] = useState(0.08)
     const [ setLabelDistance, setSetLabelDistance ] = useState(0.15)
     const [ setLabelSize, setSetLabelSize ] = useState(20)
-    const [ showDisjointSets, setShowDisjointSets ] = useState(false)
+    const [ showDisjointSets, setShowDisjointSets ] = useLocalStorageState("showDisjointSets", { defaultValue: false })
     const [ doPanZoomWarp, setDoPanZoomWarp ] = useState(false)
 
     const [ stepIdx, setStepIdx ] = useMemo(
@@ -809,8 +810,8 @@ export function Body({ logLevel, setLogLevel, }: { logLevel: LogLevel, setLogLev
         [ model, stepIdx, plotInitialized, ],
     )
 
-    const [ showSparkLines, setShowSparkLines ] = useState(true)
-    const [ sparkLineLimit, setSparkLineLimit ] = useState(40)
+    const [ showSparkLines, setShowSparkLines ] = useLocalStorageState("showSparkLines", { defaultValue: true })
+    const [ sparkLineLimit, setSparkLineLimit ] = useLocalStorageState("sparkLineLimit", { defaultValue: 40 })
     const [ sparkLineStrokeWidth, setSparkLineStrokeWidth ] = useState(1)
     const [ sparkLineMargin, setSparkLineMargin ] = useState(1)
     const [ sparkLineWidth, setSparkLineWidth ] = useState(80)
@@ -887,7 +888,7 @@ export function Body({ logLevel, setLogLevel, }: { logLevel: LogLevel, setLogLev
         [ sets, scale ],
     )
 
-    const [ showIntersectionPoints, setShowIntersectionPoints ] = useState(false)
+    const [ showIntersectionPoints, setShowIntersectionPoints ] = useLocalStorageState("showIntersectionPoints", { defaultValue: false })
     const intersectionNodes = useMemo(
         () => showIntersectionPoints && <g id={"intersections"}>{
             curStep && ([] as ReactNode[]).concat(...curStep.components.map((component, componentIdx) => component.points.map(({ x, y, }, pointIdx) => {

diff --git a/src/components/grid.tsx b/src/components/grid.tsx
@@ -1,10 +1,11 @@
 import React, {MouseEvent, ReactNode, useCallback, useEffect, useMemo, useRef, useState} from "react";
-import { Resizable } from 'react-resizable';
+import {Resizable} from 'react-resizable';
 import {Point} from "./point";
 import {State} from "../lib/utils";
 import css from "./grid.module.scss"
 import ReactScrollWheelHandler from "react-scroll-wheel-handler";
 import {ceil, floor} from "../lib/math";
+import useLocalStorageState from "use-local-storage-state";
 
 export type GridStateProps = {
     center?: Point
@@ -13,6 +14,7 @@ export type GridStateProps = {
     height: number
     gridSize?: number
     showGrid?: boolean
+    localStorage?: boolean
 }
 export type GridState = {
     center: State<Point>
@@ -22,13 +24,24 @@ export type GridState = {
     gridSize: State<number>
     showGrid: State<boolean>
 }
+
+export function useStateWrapper<V>(key: string, { defaultValue }: { defaultValue: V }): State<V> {
+    return useState(defaultValue)
+}
+
+export function useLocalStorageStateWrapper<V>(key: string, { defaultValue }: { defaultValue: V }): State<V> {
+    const [ v, setter ] = useLocalStorageState(key, { defaultValue })
+    return [ v, setter ]
+}
+
 export function GridState(init: GridStateProps): GridState {
-    const center = useState(init.center || { x: 0, y: 0 })
-    const scale = useState(init.scale)
-    const width = useState(init.width);
-    const height = useState(init.height);
-    const gridSize = useState(init.gridSize || 1)
-    const showGrid = useState(init.showGrid || false)
+    const useFn = init.localStorage ? useLocalStorageStateWrapper : useStateWrapper
+    const center = useFn("center", { defaultValue: init.center || { x: 0, y: 0 } })
+    const scale = useFn("scale", { defaultValue: init.scale })
+    const width = useFn("width", { defaultValue: init.width })
+    const height = useFn("height", { defaultValue: init.height })
+    const gridSize = useFn("gridSize", { defaultValue: init.gridSize || 1 })
+    const showGrid = useFn("showGrid", { defaultValue: init.showGrid || false })
     return {
         center,
         scale,