Remember colormap

index.html

@@ -13,6 +13,7 @@
 			locale: localStorage.getItem('language') || 'en',
 			prefers_color_scheme: matchMedia('(prefers-color-scheme: light)').matches ? 'light' : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'none',
 			tree_view_mode: localStorage.getItem('misode_tree_view_mode') || 'default',
+			colormap: localStorage.getItem('misode_colormap') || 'default',
 		});
 	</script>
 	<script>

src/app/Analytics.ts

@@ -1,3 +1,4 @@
+import type { ColormapType } from './previews/Colormap.js'
 import type { VersionId } from './services/index.js'
 
 type Method = 'menu' | 'hotkey'
@@ -110,6 +111,12 @@ export namespace Analytics {
 		})
 	}
 
+	export function setColormap(colormap: ColormapType) {
+		gtag('set', {
+			colormap,
+		})
+	}
+
 	export function resetGenerator(file_type: string, history: number, method: Method) {
 		event(ID_GENERATOR, 'reset')
 		gtag('event', 'reset_generator', {

src/app/Store.ts

@@ -1,5 +1,7 @@
 import type { Project } from './contexts/index.js'
 import { DRAFT_PROJECT } from './contexts/index.js'
+import type { ColormapType } from './previews/Colormap.js'
+import { ColormapTypes } from './previews/Colormap.js'
 import type { VersionId } from './services/index.js'
 import { VersionIds } from './services/index.js'
 
@@ -17,6 +19,7 @@ export namespace Store {
 	export const ID_PROJECT_PANEL_OPEN = 'misode_project_panel_open'
 	export const ID_OPEN_PROJECT = 'misode_open_project'
 	export const ID_TREE_VIEW_MODE = 'misode_tree_view_mode'
+	export const ID_COLORMAP = 'misode_colormap'
 	export const ID_GENERATOR_HISTORY = 'misode_generator_history'
 
 	export function getLanguage() {
@@ -92,6 +95,14 @@ export namespace Store {
 		return localStorage.getItem(ID_TREE_VIEW_MODE) ?? 'resources'
 	}
 
+	export function getColormap(): ColormapType | undefined {
+		const value = localStorage.getItem(ID_COLORMAP)
+		if (value === null || !ColormapTypes.includes(value as ColormapType)) {
+			return undefined
+		}
+		return value as ColormapType
+	}
+
 	export function getGeneratorHistory(): string[] {
 		return JSON.parse(localStorage.getItem(ID_GENERATOR_HISTORY) ?? '[]')
 	}
@@ -166,6 +177,10 @@ export namespace Store {
 		if (mode) localStorage.setItem(ID_TREE_VIEW_MODE, mode)
 	}
 
+	export function setColormap(colormap: ColormapType | undefined) {
+		if (colormap) localStorage.setItem(ID_COLORMAP, colormap)
+	}
+
 	export function visitGenerator(id: string) {
 		const history = getGeneratorHistory()
 		history.push(id)

src/app/components/previews/ColormapSelector.tsx

@@ -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>
 }

src/app/components/previews/DensityFunctionPreview.tsx

@@ -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])

src/app/components/previews/NoisePreview.tsx

@@ -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])