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

feat: use typographySettingsStore everywhere for the typography settings

Browse Source
This commit is contained in:
Ilia Mashkov
2026-04-16 08:44:49 +03:00
parent fbeb84270b
commit 8645c7dcc8
9 changed files with 82 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/features/DisplayFont/ui/FontSampler/FontSampler.stories.svelte
View File

@@ -35,7 +35,6 @@ const { Story } = defineMeta({
<script lang="ts">
import type { UnifiedFont } from '$entities/Font';
import { controlManager } from '$features/SetupFont';
// Mock fonts for testing
const mockArial: UnifiedFont = {

26
src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
View File

@@ -8,14 +8,13 @@ import {
FontApplicator,
type UnifiedFont,
} from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import { typographySettingsStore } from '$features/SetupFont/model';
import {
Badge,
ContentEditable,
Divider,
Footnote,
Stat,
StatGroup,
} from '$shared/ui';
import { fly } from 'svelte/transition';
@@ -37,11 +36,6 @@ interface Props {
let { font, text = $bindable(), index = 0 }: Props = $props();
const fontWeight = $derived(controlManager.weight);
const fontSize = $derived(controlManager.renderedSize);
const lineHeight = $derived(controlManager.height);
const letterSpacing = $derived(controlManager.spacing);
// Adjust the property name to match your UnifiedFont type
const fontType = $derived((font as any).type ?? (font as any).category ?? '');
@@ -52,10 +46,10 @@ const providerBadge = $derived(
);
const stats = $derived([
{ label: 'SZ', value: `${fontSize}PX` },
{ label: 'WGT', value: `${fontWeight}` },
{ label: 'LH', value: lineHeight?.toFixed(2) },
{ label: 'LTR', value: `${letterSpacing}` },
{ label: 'SZ', value: `${typographySettingsStore.renderedSize}PX` },
{ label: 'WGT', value: `${typographySettingsStore.weight}` },
{ label: 'LH', value: typographySettingsStore.height?.toFixed(2) },
{ label: 'LTR', value: `${typographySettingsStore.spacing}` },
]);
</script>
@@ -75,7 +69,7 @@ const stats = $derived([
min-h-60
rounded-none
"
style:font-weight={fontWeight}
style:font-weight={typographySettingsStore.weight}
>
<!-- ── Header bar ─────────────────────────────────────────────────── -->
<div
@@ -140,12 +134,12 @@ const stats = $derived([
<!-- ── Main content area ──────────────────────────────────────────── -->
<div class="flex-1 p-4 sm:p-5 md:p-8 flex items-center overflow-hidden bg-paper dark:bg-dark-card relative z-10">
<FontApplicator {font} weight={fontWeight}>
<FontApplicator {font} weight={typographySettingsStore.weight}>
<ContentEditable
bind:text
{fontSize}
{lineHeight}
{letterSpacing}
fontSize={typographySettingsStore.renderedSize}
lineHeight={typographySettingsStore.height}
letterSpacing={typographySettingsStore.spacing}
/>
</FontApplicator>
</div>

27
src/widgets/ComparisonView/model/stores/comparisonStore.svelte.ts
View File

@@ -21,10 +21,7 @@ import {
fontStore,
getFontUrl,
} from '$entities/Font';
import {
DEFAULT_TYPOGRAPHY_CONTROLS_DATA,
createTypographyControlManager,
} from '$features/SetupFont';
import { typographySettingsStore } from '$features/SetupFont/model';
import { createPersistentStore } from '$shared/lib';
import { untrack } from 'svelte';
@@ -68,8 +65,8 @@ export class ComparisonStore {
#side = $state<Side>('A');
/** Slider position for character morphing (0-100) */
#sliderPosition = $state(50);
/** Typography controls for this comparison */
#typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
// /** Typography controls for this comparison */
// #typography = createTypographyControlManager(DEFAULT_TYPOGRAPHY_CONTROLS_DATA, 'glyphdiff:comparison:typography');
/** TanStack Query-backed batch font fetcher */
#batchStore: BatchFontStore;
@@ -99,7 +96,7 @@ export class ComparisonStore {
$effect(() => {
const fa = this.#fontA;
const fb = this.#fontB;
const weight = this.#typography.weight;
const weight = typographySettingsStore.weight;
if (!fa || !fb) return;
@@ -152,8 +149,8 @@ export class ComparisonStore {
return;
}
const weight = this.#typography.weight;
const size = this.#typography.renderedSize;
const weight = typographySettingsStore.weight;
const size = typographySettingsStore.renderedSize;
const fontAName = this.#fontA?.name;
const fontBName = this.#fontB?.name;
@@ -201,12 +198,12 @@ export class ComparisonStore {
};
}
// ── Getters / Setters ─────────────────────────────────────────────────────
// // ── Getters / Setters ─────────────────────────────────────────────────────
/** Typography control manager */
get typography() {
return this.#typography;
}
// /** Typography control manager */
// get typography() {
// return typographySettingsStore;
// }
/** Font for side A */
get fontA() {
@@ -273,7 +270,7 @@ export class ComparisonStore {
this.#fontB = undefined;
this.#batchStore.setIds([]);
storage.clear();
this.#typography.reset();
typographySettingsStore.reset();
}
}

3
src/widgets/ComparisonView/ui/Character/Character.svelte
View File

@@ -3,6 +3,7 @@
Renders a single character with morphing animation
-->
<script lang="ts">
import { typographySettingsStore } from '$features/SetupFont';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { comparisonStore } from '../../model';
@@ -25,7 +26,7 @@ let { char, proximity, isPast }: Props = $props();
const fontA = $derived(comparisonStore.fontA);
const fontB = $derived(comparisonStore.fontB);
const typography = $derived(comparisonStore.typography);
const typography = $derived(typographySettingsStore);
let slot = $state<0 | 1>(0);
let slotFonts = $state<[string, string]>(['', '']);

78
src/widgets/ComparisonView/ui/ComparisonView/ComparisonView.svelte
View File

@@ -15,14 +15,13 @@ import {
getContext,
untrack,
} from 'svelte';
import { comparisonStore } from '../../model';
import FontList from '../FontList/FontList.svelte';
import Header from '../Header/Header.svelte';
import Sidebar from '../Sidebar/Sidebar.svelte';
import SliderArea from '../SliderArea/SliderArea.svelte';
const responsive = getContext<ResponsiveManager>('responsive');
const typography = $derived(comparisonStore.typography);
// const typography = $derived(comparisonStore.typography);
const isMobileOrTabletPortrait = $derived(responsive.isMobile || responsive.isTabletPortrait);
let isSidebarOpen = $state(!isMobileOrTabletPortrait);
@@ -45,50 +44,51 @@ $effect(() => {
{#snippet main()}
<FontList />
{/snippet}
{#snippet controls()}
{#if typography.sizeControl && typography.weightControl && typography.heightControl && typography.spacingControl}
<ControlGroup label="Size">
<Slider
bind:value={typography.sizeControl.value}
min={typography.sizeControl.min}
max={typography.sizeControl.max}
step={typography.sizeControl.step}
/>
</ControlGroup>
<ControlGroup label="Weight">
<Slider
bind:value={typography.weightControl.value}
min={typography.weightControl.min}
max={typography.weightControl.max}
step={typography.weightControl.step}
/>
</ControlGroup>
<div class="grid grid-cols-2 gap-6 mt-4">
<ControlGroup label="Leading" class="border-0 py-0">
<!--
{#snippet controls()}
{#if typography.sizeControl && typography.weightControl && typography.heightControl && typography.spacingControl}
<ControlGroup label="Size">
<Slider
bind:value={typography.heightControl.value}
min={typography.heightControl.min}
max={typography.heightControl.max}
step={typography.heightControl.step}
format={(v => v.toFixed(1))}
bind:value={typography.sizeControl.value}
min={typography.sizeControl.min}
max={typography.sizeControl.max}
step={typography.sizeControl.step}
/>
</ControlGroup>
<ControlGroup label="Tracking" class="border-0 py-0">
<ControlGroup label="Weight">
<Slider
bind:value={typography.spacingControl.value}
min={typography.spacingControl.min}
max={typography.spacingControl.max}
step={typography.spacingControl.step}
format={(v => v.toFixed(2))}
bind:value={typography.weightControl.value}
min={typography.weightControl.min}
max={typography.weightControl.max}
step={typography.weightControl.step}
/>
</ControlGroup>
</div>
{/if}
{/snippet}
<div class="grid grid-cols-2 gap-6 mt-4">
<ControlGroup label="Leading" class="border-0 py-0">
<Slider
bind:value={typography.heightControl.value}
min={typography.heightControl.min}
max={typography.heightControl.max}
step={typography.heightControl.step}
format={(v => v.toFixed(1))}
/>
</ControlGroup>
<ControlGroup label="Tracking" class="border-0 py-0">
<Slider
bind:value={typography.spacingControl.value}
min={typography.spacingControl.min}
max={typography.spacingControl.max}
step={typography.spacingControl.step}
format={(v => v.toFixed(2))}
/>
</ControlGroup>
</div>
{/if}
{/snippet}
-->
</Sidebar>
{/snippet}
</SidebarContainer>

3
src/widgets/ComparisonView/ui/FontList/FontList.svelte
View File

@@ -8,6 +8,7 @@ import {
FontVirtualList,
type UnifiedFont,
} from '$entities/Font';
import { typographySettingsStore } from '$features/SetupFont';
import {
Button,
Label,
@@ -18,7 +19,7 @@ import { crossfade } from 'svelte/transition';
import { comparisonStore } from '../../model';
const side = $derived(comparisonStore.side);
const typography = $derived(comparisonStore.typography);
const typography = $derived(typographySettingsStore);
let prevIndexA: number | null = null;
let prevIndexB: number | null = null;

4
src/widgets/ComparisonView/ui/Line/Line.svelte
View File

@@ -3,8 +3,8 @@
Renders a line of text in the SliderArea
-->
<script lang="ts">
import { typographySettingsStore } from '$features/SetupFont';
import type { Snippet } from 'svelte';
import { comparisonStore } from '../../model';
interface LineChar {
char: string;
@@ -26,7 +26,7 @@ interface Props {
*/
character: Snippet<[{ char: string; index: number }]>;
}
const typography = $derived(comparisonStore.typography);
const typography = $derived(typographySettingsStore);
let { chars, character }: Props = $props();
</script>

17
src/widgets/ComparisonView/ui/SliderArea/SliderArea.svelte
View File

@@ -8,6 +8,8 @@
- Performance optimized using offscreen canvas for measurements and transform-based animations.
-->
<script lang="ts">
import { TypographyMenu } from '$features/SetupFont';
import { typographySettingsStore } from '$features/SetupFont/model';
import {
type ResponsiveManager,
debounce,
@@ -42,7 +44,7 @@ let { isSidebarOpen = false, class: className }: Props = $props();
const fontA = $derived(comparisonStore.fontA);
const fontB = $derived(comparisonStore.fontB);
const isLoading = $derived(comparisonStore.isLoading || !comparisonStore.isReady);
const typography = $derived(comparisonStore.typography);
const typography = $derived(typographySettingsStore);
let container = $state<HTMLElement>();
@@ -179,12 +181,7 @@ const scaleClass = $derived(
The paper div inside scales down when the sidebar opens on desktop.
-->
<div class={cn('flex-1 relative flex items-center justify-center p-0 overflow-hidden bg-surface dark:bg-dark-bg', className)}>
<!--
Paper surface.
Replaces the old glassmorphism card with a clean white/dark sheet.
Scale transition replaces motion.div spring — CSS transition-transform
is smooth enough here; a JS spring would add ~4kb for minimal gain.
-->
<!-- Paper surface -->
<div
class={cn(
'w-full h-full flex flex-col items-center justify-center relative',
@@ -248,4 +245,10 @@ const scaleClass = $derived(
{/if}
</div>
</div>
<TypographyMenu
class={cn(
'absolute bottom-4 sm:bottom-5 right-4 sm:left-1/2 sm:right-[unset] sm:-translate-x-1/2 z-50',
)}
/>
</div>

10
src/widgets/SampleList/ui/SampleList/SampleList.svelte
View File

@@ -14,7 +14,7 @@ import {
import { FontSampler } from '$features/DisplayFont';
import {
TypographyMenu,
controlManager,
typographySettingsStore,
} from '$features/SetupFont';
import { throttle } from '$shared/lib/utils';
import { Skeleton } from '$shared/ui';
@@ -60,11 +60,11 @@ const checkPosition = throttle(() => {
const fontRowHeight = $derived.by(() =>
createFontRowSizeResolver({
getFonts: () => fontStore.fonts,
getWeight: () => controlManager.weight,
getWeight: () => typographySettingsStore.weight,
getPreviewText: () => text,
getContainerWidth: () => containerWidth,
getFontSizePx: () => controlManager.renderedSize,
getLineHeightPx: () => controlManager.height * controlManager.renderedSize,
getFontSizePx: () => typographySettingsStore.renderedSize,
getLineHeightPx: () => typographySettingsStore.height * typographySettingsStore.renderedSize,
getStatus: key => appliedFontsManager.statuses.get(key),
contentHorizontalPadding: SAMPLER_CONTENT_PADDING_X,
chromeHeight: SAMPLER_CHROME_HEIGHT,
@@ -97,7 +97,7 @@ const fontRowHeight = $derived.by(() =>
<FontVirtualList
itemHeight={fontRowHeight}
useWindowScroll={true}
weight={controlManager.weight}
weight={typographySettingsStore.weight}
columns={layoutManager.columns}
gap={layoutManager.gap}
{skeleton}