akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-24 15:47:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remember colormap

Browse Source
This commit is contained in:
Misode
2022-11-10 03:59:18 +01:00
parent 3dcb1d2352
commit d07196611c
6 changed files with 37 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/components/previews/ColormapSelector.tsx
View File

@@ -1,5 +1,8 @@
import { useCallback } from 'preact/hooks'
import { Analytics } from '../../Analytics.js'
import type { ColormapType } from '../../previews/Colormap.js'
import { ColormapTypes } from '../../previews/Colormap.js'
import { Store } from '../../Store.js'
import { Btn } from '../Btn.jsx'
import { BtnMenu } from '../BtnMenu.jsx'
@@ -8,7 +11,13 @@ interface Props {
onChange: (value: ColormapType) => void,
}
export function ColormapSelector({ value, onChange }: Props) {
const doChange = useCallback((type: ColormapType) => {
Analytics.setColormap(type)
Store.setColormap(type)
onChange(type)
}, [onChange])
return <BtnMenu icon="flame">
{ColormapTypes.map(type => <Btn label={type} onClick={() => onChange(type)} active={value === type} />)}
{ColormapTypes.map(type => <Btn label={type} onClick={() => doChange(type)} active={value === type} />)}
</BtnMenu>
}

3
src/app/components/previews/DensityFunctionPreview.tsx
View File

@@ -3,6 +3,7 @@ import { useLocale, useProject } from '../../contexts/index.js'
import { useCanvas } from '../../hooks/index.js'
import type { ColormapType } from '../../previews/Colormap.js'
import { densityFunction, densityPoint } from '../../previews/index.js'
import { Store } from '../../Store.js'
import { randomSeed } from '../../Utils.js'
import { Btn, BtnMenu } from '../index.js'
import { ColormapSelector } from './ColormapSelector.jsx'
@@ -16,7 +17,7 @@ export const DensityFunctionPreview = ({ data, shown, version }: PreviewProps) =
const [height] = useState(256)
const [autoScroll, setAutoScroll] = useState(false)
const [focused, setFocused] = useState<string[]>([])
const [colormap, setColormap] = useState<ColormapType>('viridis')
const [colormap, setColormap] = useState<ColormapType>(Store.getColormap() ?? 'viridis')
const offset = useRef(0)
const scrollInterval = useRef<number | undefined>(undefined)
const state = JSON.stringify([data])

3
src/app/components/previews/NoisePreview.tsx
View File

@@ -3,6 +3,7 @@ import { useLocale } from '../../contexts/index.js'
import { useCanvas } from '../../hooks/index.js'
import type { ColormapType } from '../../previews/Colormap.js'
import { normalNoise, normalNoisePoint } from '../../previews/index.js'
import { Store } from '../../Store.js'
import { randomSeed } from '../../Utils.js'
import { Btn } from '../index.js'
import { ColormapSelector } from './ColormapSelector.jsx'
@@ -13,7 +14,7 @@ export const NoisePreview = ({ data, shown, version }: PreviewProps) => {
const [seed, setSeed] = useState(randomSeed())
const [scale, setScale] = useState(2)
const [focused, setFocused] = useState<string[]>([])
const [colormap, setColormap] = useState<ColormapType>('viridis')
const [colormap, setColormap] = useState<ColormapType>(Store.getColormap() ?? 'viridis')
const offset = useRef<[number, number]>([0, 0])
const state = JSON.stringify([data])