glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(SetupFont): rename controlManager to typographySettingsStore for better semantic

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-16 08:22:08 +03:00
parent 46d0d887b1
commit c1ac9b5bc4
7 changed files with 68 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/SetupFont/lib/index.ts
View File

@@ -1,4 +1,4 @@
export { export {
createTypographyControlManager, createTypographySettingsManager,
type TypographyControlManager, type TypographySettingsManager,
} from './controlManager/controlManager.svelte'; } from './settingsManager/settingsManager.svelte';

6
src/features/SetupFont/lib/controlManager/controlManager.svelte.ts → src/features/SetupFont/lib/settingsManager/settingsManager.svelte.ts
View File

@@ -52,7 +52,7 @@ export interface TypographySettings {
* Manages multiple typography controls with persistent storage and * Manages multiple typography controls with persistent storage and
* responsive scaling support for font size. * responsive scaling support for font size.
*/ */
export class TypographyControlManager { export class TypographySettingsManager {
/** Map of controls keyed by ID */ /** Map of controls keyed by ID */
#controls = new SvelteMap<string, Control>(); #controls = new SvelteMap<string, Control>();
/** Responsive multiplier for font size display */ /** Responsive multiplier for font size display */
@@ -242,7 +242,7 @@ export class TypographyControlManager {
* @param storageId - Persistent storage identifier * @param storageId - Persistent storage identifier
* @returns Typography control manager instance * @returns Typography control manager instance
*/ */
export function createTypographyControlManager( export function createTypographySettingsManager(
configs: ControlModel<ControlId>[], configs: ControlModel<ControlId>[],
storageId: string = 'glyphdiff:typography', storageId: string = 'glyphdiff:typography',
) { ) {
@@ -252,5 +252,5 @@ export function createTypographyControlManager(
lineHeight: DEFAULT_LINE_HEIGHT, lineHeight: DEFAULT_LINE_HEIGHT,
letterSpacing: DEFAULT_LETTER_SPACING, letterSpacing: DEFAULT_LETTER_SPACING,
}); });
return new TypographyControlManager(configs, storage); return new TypographySettingsManager(configs, storage);
} }

90
src/features/SetupFont/lib/controlManager/controlManager.test.ts → src/features/SetupFont/lib/settingsManager/settingsManager.test.ts
View File

@@ -15,14 +15,14 @@ import {
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
} from '../../model'; } from '../../model';
import { import {
TypographyControlManager,
type TypographySettings, type TypographySettings,
} from './controlManager.svelte'; TypographySettingsManager,
} from './settingsManager.svelte';
/** /**
* Test Strategy for TypographyControlManager * Test Strategy for TypographySettingsManager
* *
* This test suite validates the TypographyControlManager state management logic. * This test suite validates the TypographySettingsManager state management logic.
* These are unit tests for the manager logic, separate from component rendering. * These are unit tests for the manager logic, separate from component rendering.
* *
* NOTE: Svelte 5's $effect runs in microtasks, so we need to flush effects * NOTE: Svelte 5's $effect runs in microtasks, so we need to flush effects
@@ -45,7 +45,7 @@ async function flushEffects() {
await Promise.resolve(); await Promise.resolve();
} }
describe('TypographyControlManager - Unit Tests', () => { describe('TypographySettingsManager - Unit Tests', () => {
let mockStorage: TypographySettings; let mockStorage: TypographySettings;
let mockPersistentStore: { let mockPersistentStore: {
value: TypographySettings; value: TypographySettings;
@@ -85,7 +85,7 @@ describe('TypographyControlManager - Unit Tests', () => {
describe('Initialization', () => { describe('Initialization', () => {
it('creates manager with default values from storage', () => { it('creates manager with default values from storage', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -105,7 +105,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}; };
mockPersistentStore = createMockPersistentStore(mockStorage); mockPersistentStore = createMockPersistentStore(mockStorage);
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -117,7 +117,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('initializes font size control with base size multiplied by current multiplier (1)', () => { it('initializes font size control with base size multiplied by current multiplier (1)', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -126,7 +126,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('returns all controls via controls getter', () => { it('returns all controls via controls getter', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -142,7 +142,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('returns individual controls via specific getters', () => { it('returns individual controls via specific getters', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -160,7 +160,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('control instances have expected interface', () => { it('control instances have expected interface', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -179,7 +179,7 @@ describe('TypographyControlManager - Unit Tests', () => {
describe('Multiplier System', () => { describe('Multiplier System', () => {
it('has default multiplier of 1', () => { it('has default multiplier of 1', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -188,7 +188,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('updates multiplier when set', () => { it('updates multiplier when set', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -201,7 +201,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('does not update multiplier if set to same value', () => { it('does not update multiplier if set to same value', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -217,7 +217,7 @@ describe('TypographyControlManager - Unit Tests', () => {
mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }; mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
mockPersistentStore = createMockPersistentStore(mockStorage); mockPersistentStore = createMockPersistentStore(mockStorage);
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -241,7 +241,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('updates font size control display value when multiplier increases', () => { it('updates font size control display value when multiplier increases', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -262,7 +262,7 @@ describe('TypographyControlManager - Unit Tests', () => {
describe('Base Size Setter', () => { describe('Base Size Setter', () => {
it('updates baseSize when set directly', () => { it('updates baseSize when set directly', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -273,7 +273,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('updates size control value when baseSize is set', () => { it('updates size control value when baseSize is set', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -284,7 +284,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('applies multiplier to size control when baseSize is set', () => { it('applies multiplier to size control when baseSize is set', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -298,7 +298,7 @@ describe('TypographyControlManager - Unit Tests', () => {
describe('Rendered Size Calculation', () => { describe('Rendered Size Calculation', () => {
it('calculates renderedSize as baseSize * multiplier', () => { it('calculates renderedSize as baseSize * multiplier', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -307,7 +307,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('updates renderedSize when multiplier changes', () => { it('updates renderedSize when multiplier changes', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -320,7 +320,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('updates renderedSize when baseSize changes', () => { it('updates renderedSize when baseSize changes', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -340,7 +340,7 @@ describe('TypographyControlManager - Unit Tests', () => {
// proxy effect behavior should be tested in E2E tests. // proxy effect behavior should be tested in E2E tests.
it('does NOT immediately update baseSize from control change (effect is async)', () => { it('does NOT immediately update baseSize from control change (effect is async)', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -355,7 +355,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('updates baseSize via direct setter (synchronous)', () => { it('updates baseSize via direct setter (synchronous)', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -380,7 +380,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}; };
mockPersistentStore = createMockPersistentStore(mockStorage); mockPersistentStore = createMockPersistentStore(mockStorage);
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -393,7 +393,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('syncs to storage after effect flush (async)', async () => { it('syncs to storage after effect flush (async)', async () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -409,7 +409,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('syncs control changes to storage after effect flush (async)', async () => { it('syncs control changes to storage after effect flush (async)', async () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -422,7 +422,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('syncs height control changes to storage after effect flush (async)', async () => { it('syncs height control changes to storage after effect flush (async)', async () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -434,7 +434,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('syncs spacing control changes to storage after effect flush (async)', async () => { it('syncs spacing control changes to storage after effect flush (async)', async () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -448,7 +448,7 @@ describe('TypographyControlManager - Unit Tests', () => {
describe('Control Value Getters', () => { describe('Control Value Getters', () => {
it('returns current weight value', () => { it('returns current weight value', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -460,7 +460,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('returns current height value', () => { it('returns current height value', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -472,7 +472,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('returns current spacing value', () => { it('returns current spacing value', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -485,7 +485,7 @@ describe('TypographyControlManager - Unit Tests', () => {
it('returns default value when control is not found', () => { it('returns default value when control is not found', () => {
// Create a manager with empty configs (no controls) // Create a manager with empty configs (no controls)
const manager = new TypographyControlManager([], mockPersistentStore); const manager = new TypographySettingsManager([], mockPersistentStore);
expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT); expect(manager.weight).toBe(DEFAULT_FONT_WEIGHT);
expect(manager.height).toBe(DEFAULT_LINE_HEIGHT); expect(manager.height).toBe(DEFAULT_LINE_HEIGHT);
@@ -503,7 +503,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}; };
mockPersistentStore = createMockPersistentStore(mockStorage); mockPersistentStore = createMockPersistentStore(mockStorage);
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -536,7 +536,7 @@ describe('TypographyControlManager - Unit Tests', () => {
clear: clearSpy, clear: clearSpy,
}; };
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -547,7 +547,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('respects multiplier when resetting font size control', () => { it('respects multiplier when resetting font size control', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -565,7 +565,7 @@ describe('TypographyControlManager - Unit Tests', () => {
describe('Complex Scenarios', () => { describe('Complex Scenarios', () => {
it('handles changing multiplier then modifying baseSize', () => { it('handles changing multiplier then modifying baseSize', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -586,7 +586,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('maintains correct renderedSize throughout changes', () => { it('maintains correct renderedSize throughout changes', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -608,7 +608,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('handles multiple control changes in sequence', async () => { it('handles multiple control changes in sequence', async () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -633,7 +633,7 @@ describe('TypographyControlManager - Unit Tests', () => {
mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 }; mockStorage = { fontSize: 48, fontWeight: 400, lineHeight: 1.5, letterSpacing: 0 };
mockPersistentStore = createMockPersistentStore(mockStorage); mockPersistentStore = createMockPersistentStore(mockStorage);
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -645,7 +645,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('handles very small multiplier', () => { it('handles very small multiplier', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -658,7 +658,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('handles large base size with multiplier', () => { it('handles large base size with multiplier', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -671,7 +671,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('handles floating point precision in multiplier', () => { it('handles floating point precision in multiplier', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -690,7 +690,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('handles control methods (increase/decrease)', () => { it('handles control methods (increase/decrease)', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );
@@ -704,7 +704,7 @@ describe('TypographyControlManager - Unit Tests', () => {
}); });
it('handles control boundary conditions', () => { it('handles control boundary conditions', () => {
const manager = new TypographyControlManager( const manager = new TypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA, DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
mockPersistentStore, mockPersistentStore,
); );

4
src/features/SetupFont/model/index.ts
View File

@@ -20,5 +20,5 @@ export {
export { export {
type ControlId, type ControlId,
controlManager, typographySettingsStore,
} from './state/manager.svelte'; } from './state/typographySettingsStore';

6
src/features/SetupFont/model/state/manager.svelte.ts
View File

@@ -1,6 +0,0 @@
import { createTypographyControlManager } from '../../lib';
import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../const/const';
export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';
export const controlManager = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA);

8
src/features/SetupFont/model/state/typographySettingsStore.ts Normal file
View File

@@ -0,0 +1,8 @@
import { createTypographySettingsManager } from '../../lib';
import { DEFAULT_TYPOGRAPHY_CONTROLS_DATA } from '../const/const';
export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';
export const typographySettingsStore = createTypographySettingsManager(
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
'glyphdiff:comparison:typography',
);

15
src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
View File

@@ -9,7 +9,6 @@
import type { ResponsiveManager } from '$shared/lib'; import type { ResponsiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils'; import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { import {
Button,
ComboControl, ComboControl,
ControlGroup, ControlGroup,
Slider, Slider,
@@ -24,7 +23,7 @@ import {
MULTIPLIER_L, MULTIPLIER_L,
MULTIPLIER_M, MULTIPLIER_M,
MULTIPLIER_S, MULTIPLIER_S,
controlManager, typographySettingsStore,
} from '../../model'; } from '../../model';
interface Props { interface Props {
@@ -52,16 +51,16 @@ $effect(() => {
if (!responsive) return; if (!responsive) return;
switch (true) { switch (true) {
case responsive.isMobile: case responsive.isMobile:
controlManager.multiplier = MULTIPLIER_S; typographySettingsStore.multiplier = MULTIPLIER_S;
break; break;
case responsive.isTablet: case responsive.isTablet:
controlManager.multiplier = MULTIPLIER_M; typographySettingsStore.multiplier = MULTIPLIER_M;
break; break;
case responsive.isDesktop: case responsive.isDesktop:
controlManager.multiplier = MULTIPLIER_L; typographySettingsStore.multiplier = MULTIPLIER_L;
break; break;
default: default:
controlManager.multiplier = MULTIPLIER_L; typographySettingsStore.multiplier = MULTIPLIER_L;
} }
}); });
</script> </script>
@@ -133,7 +132,7 @@ $effect(() => {
</div> </div>
<!-- Controls --> <!-- Controls -->
{#each controlManager.controls as control (control.id)} {#each typographySettingsStore.controls as control (control.id)}
<ControlGroup label={control.controlLabel ?? ''}> <ControlGroup label={control.controlLabel ?? ''}>
<Slider <Slider
bind:value={control.instance.value} bind:value={control.instance.value}
@@ -174,7 +173,7 @@ $effect(() => {
</div> </div>
<!-- Controls with dividers between each --> <!-- Controls with dividers between each -->
{#each controlManager.controls as control, i (control.id)} {#each typographySettingsStore.controls as control, i (control.id)}
{#if i > 0} {#if i > 0}
<div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div> <div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
{/if} {/if}