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;
})
};
})