chore: follow the general comments style
This commit is contained in:
@@ -30,9 +30,12 @@ import { SvelteMap } from 'svelte/reactivity';
|
||||
type ControlOnlyFields<T extends string = string> = Omit<ControlModel<T>, keyof ControlDataModel>;
|
||||
|
||||
/**
|
||||
* A control with its instance
|
||||
* A control with its associated instance
|
||||
*/
|
||||
export interface Control extends ControlOnlyFields<ControlId> {
|
||||
/**
|
||||
* The reactive typography control instance
|
||||
*/
|
||||
instance: TypographyControl;
|
||||
}
|
||||
|
||||
@@ -40,9 +43,21 @@ export interface Control extends ControlOnlyFields<ControlId> {
|
||||
* Storage schema for typography settings
|
||||
*/
|
||||
export interface TypographySettings {
|
||||
/**
|
||||
* Base font size (User preference, unscaled)
|
||||
*/
|
||||
fontSize: number;
|
||||
/**
|
||||
* Numeric font weight (100-900)
|
||||
*/
|
||||
fontWeight: number;
|
||||
/**
|
||||
* Line height multiplier (e.g. 1.5)
|
||||
*/
|
||||
lineHeight: number;
|
||||
/**
|
||||
* Letter spacing in em/px
|
||||
*/
|
||||
letterSpacing: number;
|
||||
}
|
||||
|
||||
@@ -53,13 +68,21 @@ export interface TypographySettings {
|
||||
* responsive scaling support for font size.
|
||||
*/
|
||||
export class TypographySettingsManager {
|
||||
/** Map of controls keyed by ID */
|
||||
/**
|
||||
* Internal map of reactive controls keyed by their identifier
|
||||
*/
|
||||
#controls = new SvelteMap<string, Control>();
|
||||
/** Responsive multiplier for font size display */
|
||||
/**
|
||||
* Global multiplier for responsive font size scaling
|
||||
*/
|
||||
#multiplier = $state(1);
|
||||
/** Persistent storage for settings */
|
||||
/**
|
||||
* LocalStorage-backed storage for persistence
|
||||
*/
|
||||
#storage: PersistentStore<TypographySettings>;
|
||||
/** Base font size (user preference, unscaled) */
|
||||
/**
|
||||
* The underlying font size before responsive scaling is applied
|
||||
*/
|
||||
#baseSize = $state(DEFAULT_FONT_SIZE);
|
||||
|
||||
constructor(configs: ControlModel<ControlId>[], storage: PersistentStore<TypographySettings>) {
|
||||
@@ -131,16 +154,15 @@ export class TypographySettingsManager {
|
||||
return 0;
|
||||
}
|
||||
|
||||
/** Current multiplier for responsive scaling */
|
||||
/**
|
||||
* Active scaling factor for the rendered font size
|
||||
*/
|
||||
get multiplier() {
|
||||
return this.#multiplier;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the multiplier and update font size display
|
||||
*
|
||||
* When multiplier changes, the font size control's display value
|
||||
* is updated to reflect the new scale while preserving base size.
|
||||
* Updates the multiplier and recalculates dependent control values
|
||||
*/
|
||||
set multiplier(value: number) {
|
||||
if (this.#multiplier === value) return;
|
||||
@@ -154,14 +176,15 @@ export class TypographySettingsManager {
|
||||
}
|
||||
|
||||
/**
|
||||
* The scaled size for CSS usage
|
||||
* Returns baseSize * multiplier for actual rendering
|
||||
* The actual pixel value for CSS font-size (baseSize * multiplier)
|
||||
*/
|
||||
get renderedSize() {
|
||||
return this.#baseSize * this.#multiplier;
|
||||
}
|
||||
|
||||
/** The base size (User Preference) */
|
||||
/**
|
||||
* The raw font size preference before scaling
|
||||
*/
|
||||
get baseSize() {
|
||||
return this.#baseSize;
|
||||
}
|
||||
@@ -173,45 +196,63 @@ export class TypographySettingsManager {
|
||||
}
|
||||
|
||||
/**
|
||||
* Getters for controls
|
||||
* List of all managed typography controls
|
||||
*/
|
||||
get controls() {
|
||||
return Array.from(this.#controls.values());
|
||||
}
|
||||
|
||||
/**
|
||||
* Reactive instance for weight manipulation
|
||||
*/
|
||||
get weightControl() {
|
||||
return this.#controls.get('font_weight')?.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reactive instance for size manipulation
|
||||
*/
|
||||
get sizeControl() {
|
||||
return this.#controls.get('font_size')?.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reactive instance for line-height manipulation
|
||||
*/
|
||||
get heightControl() {
|
||||
return this.#controls.get('line_height')?.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reactive instance for letter-spacing manipulation
|
||||
*/
|
||||
get spacingControl() {
|
||||
return this.#controls.get('letter_spacing')?.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Getters for values (besides font-size)
|
||||
* Current numeric font weight (reactive)
|
||||
*/
|
||||
get weight() {
|
||||
return this.#controls.get('font_weight')?.instance.value ?? DEFAULT_FONT_WEIGHT;
|
||||
}
|
||||
|
||||
/**
|
||||
* Current numeric line height (reactive)
|
||||
*/
|
||||
get height() {
|
||||
return this.#controls.get('line_height')?.instance.value ?? DEFAULT_LINE_HEIGHT;
|
||||
}
|
||||
|
||||
/**
|
||||
* Current numeric letter spacing (reactive)
|
||||
*/
|
||||
get spacing() {
|
||||
return this.#controls.get('letter_spacing')?.instance.value ?? DEFAULT_LETTER_SPACING;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset all controls to default values
|
||||
* Reset all controls to project-defined defaults
|
||||
*/
|
||||
reset() {
|
||||
this.#storage.clear();
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
/** @vitest-environment jsdom */
|
||||
/**
|
||||
* @vitest-environment jsdom
|
||||
*/
|
||||
import {
|
||||
DEFAULT_FONT_SIZE,
|
||||
DEFAULT_FONT_WEIGHT,
|
||||
|
||||
Reference in New Issue
Block a user