Use Pinia to store user settings, palette colors, etc

Move uiOpts and lytOpts to store.ts
Add 'const's to *.ts

1 files changed, 3 insertions, 122 deletions

diff --git a/src/lib.ts b/src/lib.ts
index d82965f..e262e05 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -3,20 +3,18 @@
  */
 
 import {TolNode} from './tol';
-import {LayoutOptions} from './layout';
-import {getBreakpoint, Breakpoint, getScrollBarWidth, onTouchDevice} from './util';
 
 // For server requests
 const SERVER_DATA_URL = (new URL(window.location.href)).origin + '/data/'
 const SERVER_IMG_PATH = '/tol_data/img/'
 export async function queryServer(params: URLSearchParams){
 	// Construct URL
-	let url = new URL(SERVER_DATA_URL);
+	const url = new URL(SERVER_DATA_URL);
 	url.search = params.toString();
 	// Query server
 	let responseObj;
 	try {
-		let response = await fetch(url.toString());
+		const response = await fetch(url.toString());
 		responseObj = await response.json();
 	} catch (error){
 		console.log(`Error with querying ${url.toString()}: ${error}`);
@@ -62,124 +60,7 @@ export type InfoResponse = {
 	subNodesInfo: [] | [NodeInfo | null, NodeInfo | null],
 };
 
-// Used by auto-mode and tutorial
+// Used by auto-mode and tutorial-pane
 export type Action =
 	'expand' | 'collapse' | 'expandToView' | 'unhideAncestor' |
 	'tileInfo' | 'search' | 'autoMode' | 'settings' | 'help';
-
-// Project-wide configurable options (supersets the user-configurable settings)
-export type UiOptions = {
-	// Shared coloring/sizing
-	textColor: string, // CSS color
-	textColorAlt: string,
-	bgColor: string,
-	bgColorLight: string,
-	bgColorDark: string,
-	bgColorLight2: string,
-	bgColorDark2: string,
-	bgColorAlt: string,
-	bgColorAltDark: string,
-	altColor: string,
-	altColorDark: string,
-	borderRadius: number, // CSS border-radius value, in px
-	shadowNormal: string, // CSS box-shadow value
-	shadowHovered: string,
-	shadowFocused: string,
-	// Component coloring
-	childQtyColors: [number, string][],
-		// Specifies, for an increasing sequence of minimum-child-quantity values, CSS colors to use
-		//eg: [[1, 'green'], [10, 'orange'], [100, 'red']]
-	nonleafBgColors: string[],
-		// Specifies CSS colors to use at various tree depths
-		// With N strings, tiles at depth M use the color at index M % N
-	nonleafHeaderColor: string, // CSS color
-	ancestryBarBgColor: string,
-	// Component sizing
-	ancestryBarBreadth: number, // px (fixed value needed for transitions)
-	tutPaneSz: number, // px (fixed value needed for transitions)
-	scrollGap: number, // Size of scroll bar, in px
-	// Timing related
-	clickHoldDuration: number, // Time after mousedown when a click-and-hold is recognised, in ms
-	transitionDuration: number, // ms
-	animationDelay: number, // Time between updates during transitions/resizes/etc, in ms
-	autoActionDelay: number, // Time between auto-mode actions (incl transitions), in ms
-	// Device-info-like
-	touchDevice: boolean,
-	breakpoint: Breakpoint,
-	// Other
-	tree: 'trimmed' | 'images' | 'picked',
-	searchSuggLimit: number, // Max number of search suggestions
-	searchJumpMode: boolean,
-	tutorialSkip: boolean,
-	disabledActions: Set<Action>,
-	autoHide: boolean, // Upon a leaf-click fail, hide an ancestor and try again
-	disableShortcuts: boolean,
-};
-// Option defaults
-export function getDefaultLytOpts(): LayoutOptions {
-	let screenSz = getBreakpoint();
-	return {
-		tileSpacing: screenSz == 'sm' ? 6 : 9, //px
-		headerSz: 22, // px
-		minTileSz: screenSz == 'sm' ? 50 : 80, // px
-		maxTileSz: 200, // px
-		// Layout-algorithm related
-		layoutType: 'sweep', // 'sqr' | 'rect' | 'sweep'
-		rectMode: 'auto first-row', // 'horz' | 'vert' | 'linear' | 'auto' | 'auto first-row'
-		rectSensitivity: 0.9, // Between 0 and 1
-		sweepMode: 'left', // 'left' | 'top' | 'shorter' | 'auto'
-		sweptNodesPrio: 'sqrt', // 'linear' | 'sqrt' | 'pow-2/3'
-		sweepToParent: screenSz == 'sm' ? 'prefer' : 'fallback', // 'none' | 'prefer' | 'fallback'
-	};
-}
-export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions {
-	let screenSz = getBreakpoint();
-	// Reused option values
-		// Note: For scrollbar colors on chrome, edit ./index.css
-	let textColor = '#fafaf9', textColorAlt = '#1c1917';
-	let bgColor = '#292524',
-		bgColorLight = '#44403c', bgColorDark = '#1c1917',
-		bgColorLight2 = '#57534e', bgColorDark2 = '#0e0c0b',
-		bgColorAlt = '#f5f5f4', bgColorAltDark = '#d6d3d1';
-	let altColor = '#a3e623', altColorDark = '#65a30d';
-	let accentColor = '#f59e0b';
-	let scrollGap = getScrollBarWidth();
-	//
-	return {
-		// Shared coloring/sizing
-		textColor, textColorAlt,
-		bgColor, bgColorLight, bgColorDark, bgColorLight2, bgColorDark2, bgColorAlt, bgColorAltDark,
-		altColor, altColorDark,
-		borderRadius: 5, // px
-		shadowNormal: '0 0 2px black',
-		shadowHovered: '0 0 1px 2px ' + altColor,
-		shadowFocused: '0 0 1px 2px ' + accentColor,
-		// Component coloring
-		childQtyColors: [[1, 'greenyellow'], [10, 'orange'], [100, 'red']],
-		nonleafBgColors: [bgColorLight, bgColorLight2],
-		nonleafHeaderColor: bgColorDark,
-		ancestryBarBgColor: bgColorLight,
-		// Component sizing
-		ancestryBarBreadth: (screenSz == 'sm' ? 80 : 100) + lytOpts.tileSpacing*2, // px
-		tutPaneSz: 180, // px
-		scrollGap,
-		// Timing related
-		clickHoldDuration: 400, // ms
-		transitionDuration: 300, // ms
-		animationDelay: 100, // ms
-		autoActionDelay: 500, // ms
-		// Device-info-like
-		touchDevice: onTouchDevice(),
-		breakpoint: getBreakpoint(),
-		// Other
-		tree: 'images',
-		searchSuggLimit: 10,
-		searchJumpMode: false,
-		tutorialSkip: false,
-		disabledActions: new Set() as Set<Action>,
-		autoHide: true,
-		disableShortcuts: false,
-	};
-}
-// Used in Settings.vue, and when saving to localStorage
-export type OptionType = 'LYT' | 'UI';