diff --git a/CHANGELOG.md b/CHANGELOG.md index d1e9b5d..2a6ab3c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,11 +24,13 @@ --> + ## [Unreleased] ### Добавлено - Теперь можно задавать фиксированный размер шрифта в пикселях или пунктах. +- Теперь можно редактировать коэффициент отступа текста в настройках глобального контейнера. ### Исправлено diff --git a/src/lib/App.svelte b/src/lib/App.svelte index f410da9..74a8dac 100644 --- a/src/lib/App.svelte +++ b/src/lib/App.svelte @@ -34,7 +34,10 @@ blocks: [ { id: 'loading-block-placeholder', - container: { type: 'global', value: { maxHeight: 0.9, maxWidth: 0.9, minHeight: 0 } }, + container: { + type: 'global', + value: { maxHeight: 0.9, maxWidth: 0.9, minHeight: 0, textPadding: 2 / 9 } + }, content: { type: 'text', value: { diff --git a/src/lib/BlockConverter.svelte b/src/lib/BlockConverter.svelte index f61b1ca..99a36d1 100644 --- a/src/lib/BlockConverter.svelte +++ b/src/lib/BlockConverter.svelte @@ -23,7 +23,8 @@ block.container.value = { maxWidth: 0.95, maxHeight: 0.4, - minHeight: 0.1 + minHeight: 0.1, + textPadding: 2 / 9 }; } block.container.type = 'global'; @@ -36,7 +37,8 @@ block.container.value = { maxWidth: 0.95, maxHeight: 0.4, - minHeight: 0.1 + minHeight: 0.1, + textPadding: 2 / 9 }; } block.container.type = 'global'; diff --git a/src/lib/ContainerSettings.svelte b/src/lib/ContainerSettings.svelte index 344f19f..e59bf5a 100644 --- a/src/lib/ContainerSettings.svelte +++ b/src/lib/ContainerSettings.svelte @@ -15,7 +15,8 @@ container.value = { maxWidth: 0.95, maxHeight: 0.4, - minHeight: 0.1 + minHeight: 0.1, + textPadding: 2 / 9 }; container.type = 'global'; return; @@ -113,6 +114,19 @@ }} /> + {/if} diff --git a/src/lib/memaker.ts b/src/lib/memaker.ts index 690e3d3..4d223f7 100644 --- a/src/lib/memaker.ts +++ b/src/lib/memaker.ts @@ -236,7 +236,8 @@ export class Memaker { value: { maxWidth: 0.96, maxHeight: 0.4, - minHeight: 0 + minHeight: 0, + textPadding: 2 / 9 } }, content: { @@ -437,7 +438,8 @@ export class Memaker { value: { maxHeight: 1, maxWidth: 1, - minHeight: 1 + minHeight: 1, + textPadding: 2 / 9 } }, content: { @@ -457,7 +459,8 @@ export class Memaker { value: { maxWidth: 0.96, maxHeight: 0.4, - minHeight: 0 + minHeight: 0, + textPadding: 2 / 9 } }, content: { @@ -567,7 +570,10 @@ export class Memaker { backgroundBlock = { ...defaultBlockSettings(), id: this.blockIdGenerator.generate(), - container: { type: 'global', value: { maxHeight: 1, maxWidth: 1, minHeight: 1 } }, + container: { + type: 'global', + value: { maxHeight: 1, maxWidth: 1, minHeight: 1, textPadding: 2 / 9 } + }, content: { type: 'image', value: { diff --git a/src/lib/meme.ts b/src/lib/meme.ts index f4acb3e..9b5f49a 100644 --- a/src/lib/meme.ts +++ b/src/lib/meme.ts @@ -19,6 +19,7 @@ export interface GlobalContainer { maxWidth: number; maxHeight: number; minHeight: number; + textPadding: number; } export type Container = | { @@ -192,7 +193,7 @@ class TextContentRenderer implements ContentRenderer { ) ); const textStencil = this.textService.getTextStencil(text, style, width, height); - const fontShift = 2 / 9; + const fontShift = global.textPadding; const verticalShift = height / 2 + textStencil.info.fontSize * fontShift; const baseline = style.baseline; const y = diff --git a/src/lib/meme_format.ts b/src/lib/meme_format.ts index 96426c6..6039bbf 100644 --- a/src/lib/meme_format.ts +++ b/src/lib/meme_format.ts @@ -1,4 +1,4 @@ -import type { Container, Content, Meme } from '$lib/meme'; +import type { Content, Meme } from '$lib/meme'; import JSZip from 'jszip'; import type { Material, MaterialSettings, MaterialType, ShadowSettings } from './material'; import type { TextAlign, TextBaseline, TextCase } from './text/text'; @@ -53,9 +53,25 @@ interface ImageContentV0_2_3 { crop: Rectangle; } +interface GlobalContainerV0_2_0 { + // percents + maxWidth: number; + maxHeight: number; + minHeight: number; +} +type ContainerV0_2_0 = + | { + type: 'rectangle'; + value: Rectangle; + } + | { + type: 'global'; + value: GlobalContainerV0_2_0; + }; + type BlockV0_2_0 = { id: string; - container: Container; + container: ContainerV0_2_0; content: Content; }; @@ -77,21 +93,21 @@ interface MemeDataV0_2_1 { } type BlockV0_2_2 = { id: string; - container: Container; + container: ContainerV0_2_0; content: Content; effects: { settings: Record }[]; }; type BlockV0_2_3 = { id: string; - container: Container; + container: ContainerV0_2_0; content: Content; effects: { settings: Record }[]; }; type BlockV0_2_4 = { id: string; - container: Container; + container: ContainerV0_2_0; content: Content; effects: { settings: Record }[]; layer: LayerSettingsV0_2_4; @@ -105,7 +121,7 @@ type LayerSettingsV0_2_4 = { type BlockV0_2_5 = { id: string; - container: Container; + container: ContainerV0_2_0; content: Content; effects: { settings: Record }[]; layer: LayerSettingsV0_2_4; @@ -140,9 +156,27 @@ type TextFontSizeStrategyV0_2_6 = type TextContentV0_2_6 = TextContentV0_2_0; +interface GlobalContainerV0_2_6 { + // percents + maxWidth: number; + maxHeight: number; + minHeight: number; + textPadding: number; +} + +type ContainerV0_2_6 = + | { + type: 'rectangle'; + value: Rectangle; + } + | { + type: 'global'; + value: GlobalContainerV0_2_6; + }; + type BlockV0_2_6 = { id: string; - container: Container; + container: ContainerV0_2_6; content: Content; effects: { settings: Record }[]; layer: LayerSettingsV0_2_4; @@ -424,6 +458,34 @@ export class MemeFormat { }; } private static fromV0_2_5ToV0_2_6(data: MemeDataV0_2_5): MemeDataV0_2_6 { + function migrateContent( + content: Content + ): Content { + if (content.type == 'text') { + const oldStrategy = content.value.style.fontSizeStrategy; + return { + ...content, + value: { + ...content.value, + style: { + ...content.value.style, + fontSizeStrategy: { type: oldStrategy } + } + } + }; + } + return content; + } + function migrateContainer(container: ContainerV0_2_0): ContainerV0_2_6 { + if (container.type == 'rectangle') return container; + return { + type: 'global', + value: { + ...container.value, + textPadding: 2 / 9 + } + }; + } return { ...data, version: '0.2.6', @@ -432,23 +494,11 @@ export class MemeFormat { return { ...f, blocks: f.blocks.map((b) => { - if (b.content.type == 'text') { - const oldStrategy = b.content.value.style.fontSizeStrategy; - return { - ...b, - content: { - ...b.content, - value: { - ...b.content.value, - style: { - ...b.content.value.style, - fontSizeStrategy: { type: oldStrategy } - } - } - } - } as BlockV0_2_6; - } - return b as BlockV0_2_6; + return { + ...b, + content: migrateContent(b.content), + container: migrateContainer(b.container) + } as BlockV0_2_6; }) }; })