diff options
Diffstat (limited to 'src/lib.ts')
| -rw-r--r-- | src/lib.ts | 125 |
1 files changed, 3 insertions, 122 deletions
@@ -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'; |