Add control on text padding in global container settings

RobolabGs2 · Mar 29, 2024 · 46c9f3e · 46c9f3e
1 parent f2f4f16
commit 46c9f3e
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,11 +24,13 @@
 -->
 
 <!-- ## [Unreleased] -->
+
 ## [Unreleased]
 
 ### Добавлено
 
 - Теперь можно задавать фиксированный размер шрифта в пикселях или пунктах.
+- Теперь можно редактировать коэффициент отступа текста в настройках глобального контейнера.
 
 ### Исправлено
 

diff --git 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
@@ -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
@@ -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 @@
 					}}
 				/>
 			</Label>
+			<Label>
+				Отступ для текста (% от размера шрифта): <NumberInput
+					min={0}
+					max={100}
+					step={0.5}
+					withRange={true}
+					value={container.value.textPadding * 100}
+					on:input={(ev) => {
+						if (container.type !== 'global') return;
+						container.value.textPadding = ev.detail / 100;
+					}}
+				/>
+			</Label>
 		</InputGroup>
 	{/if}
 </article>
diff --git 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
@@ -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<TextContent> {
 				)
 			);
 		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
@@ -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<TextContentV0_2_0, ImageContentV0_2_0>;
 };
 
@@ -77,21 +93,21 @@ interface MemeDataV0_2_1 {
 }
 type BlockV0_2_2 = {
 	id: string;
-	container: Container;
+	container: ContainerV0_2_0;
 	content: Content<TextContentV0_2_0, ImageContentV0_2_0>;
 	effects: { settings: Record<string, unknown> }[];
 };
 
 type BlockV0_2_3 = {
 	id: string;
-	container: Container;
+	container: ContainerV0_2_0;
 	content: Content<TextContentV0_2_0, ImageContentV0_2_3>;
 	effects: { settings: Record<string, unknown> }[];
 };
 
 type BlockV0_2_4 = {
 	id: string;
-	container: Container;
+	container: ContainerV0_2_0;
 	content: Content<TextContentV0_2_0, ImageContentV0_2_3>;
 	effects: { settings: Record<string, unknown> }[];
 	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<TextContentV0_2_5, ImageContentV0_2_3>;
 	effects: { settings: Record<string, unknown> }[];
 	layer: LayerSettingsV0_2_4;
@@ -140,9 +156,27 @@ type TextFontSizeStrategyV0_2_6 =
 
 type TextContentV0_2_6 = TextContentV0_2_0<TextStyleV0_2_6>;
 
+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<TextContentV0_2_6, ImageContentV0_2_3>;
 	effects: { settings: Record<string, unknown> }[];
 	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<TextContentV0_2_5, ImageContentV0_2_3>
+		): Content<TextContentV0_2_6, ImageContentV0_2_3> {
+			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;
 						})
 					};
 				})