diff --git a/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts b/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts index 3307c4c..474dab1 100644 --- a/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts +++ b/src/features/SetupFont/lib/controlManager/controlManager.svelte.ts @@ -1,7 +1,49 @@ import { type ControlModel, + type TypographyControl, createTypographyControl, } from '$shared/lib'; +import { SvelteMap } from 'svelte/reactivity'; + +export interface Control { + id: string; + increaseLabel?: string; + decreaseLabel?: string; + controlLabel?: string; + instance: TypographyControl; +} + +export class TypographyControlManager { + #controls = new SvelteMap(); + + constructor(configs: ControlModel[]) { + configs.forEach(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => { + this.#controls.set(id, { + id, + increaseLabel, + decreaseLabel, + controlLabel, + instance: createTypographyControl(config), + }); + }); + } + + get controls() { + return this.#controls.values(); + } + + get weight() { + return this.#controls.get('font_weight')?.instance.value ?? 400; + } + + get size() { + return this.#controls.get('font_size')?.instance.value; + } + + get height() { + return this.#controls.get('line_height')?.instance.value; + } +} /** * Creates a typography control manager that handles a collection of typography controls. @@ -10,19 +52,5 @@ import { * @returns - Typography control manager instance. */ export function createTypographyControlManager(configs: ControlModel[]) { - const controls = $state( - configs.map(({ id, increaseLabel, decreaseLabel, controlLabel, ...config }) => ({ - id, - increaseLabel, - decreaseLabel, - controlLabel, - instance: createTypographyControl(config), - })), - ); - - return { - get controls() { - return controls; - }, - }; + return new TypographyControlManager(configs); }