From 17bb5c2375496b2e5beb941502ddf916c63ac6e1 Mon Sep 17 00:00:00 2001 From: RobolabGs2 Date: Fri, 2 Feb 2024 21:33:16 +0300 Subject: [PATCH] Add fonts, review presets, update docs --- CHANGELOG.md | 29 +++- src/lib/App.svelte | 2 +- src/lib/debug/DevTools.svelte | 161 +++++++++++++++++- src/lib/memaker.ts | 9 +- src/lib/meme.ts | 6 +- .../placeholders/default/empty/3.png | Bin 192896 -> 245679 bytes src/lib/text/TextSettings.svelte | 15 +- src/lib/text/font.ts | 2 +- src/lib/text/fonts_metrics.zip | Bin 97450 -> 177256 bytes src/lib/text/fonts_store.ts | 31 ++-- src/lib/text/metrics.ts | 8 + src/lib/text/presets.ts | 118 +++---------- src/memes/docs.meme | Bin 704069 -> 704190 bytes 13 files changed, 263 insertions(+), 118 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c04b8c8..8e81b08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -29,9 +29,36 @@ ### Добавлено -- Шрифт Raleway. +- Шрифты: + - Bad Script + - JetBrains Mono + - Lora + - Marck Script + - Press Start 2P + - Raleway + - Tektur + - Unbounded - Инструменты разработчика (Ctrl+F12, Shift+F12). +### Изменено + +- Переименованы пресеты + - `TRUE IMPACT` -> `КАНОНИЧНЫЙ ИМПАКТ` + - `post-ironic lobster` -> `постироничный лобстер` + - `Arial bold subtitles` -> `Субтитры` + - `White Helvetica bold` -> `подпись с тенью` + - `Arial subtitles` -> `Arial с обводкой` + - `Black Arial` -> `Обычный текст` +- В персете `Субтитры` теперь тень. +- Обновлены фреймы с демонстрацией шрифтов и пресетов. + +## Удалено + +- Пресеты + - `Helvetica bold subtitles` + - `Black Arial bold` + - `Black Helvetica bold` + ## [0.2.7] - 2024-01-31 ### Добавлено diff --git a/src/lib/App.svelte b/src/lib/App.svelte index 024b1c3..f410da9 100644 --- a/src/lib/App.svelte +++ b/src/lib/App.svelte @@ -149,7 +149,7 @@ Инструменты разработчика - + import Button from '$lib/base/Button.svelte'; - import Select from '$lib/base/Select.svelte'; + import FrameSettings from '$lib/FrameSettings.svelte'; + import { defaultBlockSettings, type Memaker } from '$lib/memaker'; + import type { Block, Container, Frame, TextContent } from '$lib/meme'; import { fontsNames, prepareFontFamilyInterpolationDataZIP } from '$lib/text/fonts_store'; + import { presets, applyStylePreset, defaultStyle } from '$lib/text/presets'; import { CanvasTextMeasurer } from '$lib/text/manager'; - import type { TextMeasurer } from '$lib/text/metrics'; + import { fontSettingsToKey, fontVariations, type TextMeasurer } from '$lib/text/metrics'; import { saveBlob } from '$lib/utils'; + import { deepCopy } from '$lib/state'; + import TextContentSettings from '$lib/text/TextContentSettings.svelte'; + import NumberInput from '$lib/base/NumberInput.svelte'; + export let memaker: Memaker; + let textContent: TextContent = { + text: 'Широкая электрификация южных губерний\nдаст мощный толчок подъёму сельского хозяйства.', + style: deepCopy(defaultStyle) + }; + let frameSettings: Frame = { + id: 'placeholer', + backgroundAlpha: 1, + backgroundColor: '#ffffff', + height: 1080, + width: 1920, + blocks: [] + }; let textMeasurer: TextMeasurer; - let fontFamily = ''; + let columns = 2; function generateData() { if (!textMeasurer) textMeasurer = new CanvasTextMeasurer(); + const fontFamily = textContent.style.font.family; prepareFontFamilyInterpolationDataZIP(textMeasurer, fontFamily).then( saveBlob(`${fontFamily}.zip`) ); } + function addBlocksGrig( + frame: Frame, + rows: number, + columns: number, + newBlock: (container: Container, i: number, row: number, col: number) => Block, + count = rows * columns + ) { + memaker.addFrame(frame); + const frameWidth = frame.width; + const frameHeight = frame.height; + const blockHeight = frameHeight / rows; + const blockWidth = frameWidth / columns; + for (let i = 0; i < count; i++) { + const row = i % rows | 0; + const col = (i / rows) | 0; + const container: Container = { + type: 'rectangle', + value: { + height: blockHeight, + width: 0.9 * blockWidth, + position: { + x: blockWidth / 2 + col * blockWidth, + y: blockHeight / 2 + row * blockHeight + }, + rotation: 0 + } + }; + memaker.cloneBlock(newBlock(container, i, row, col)); + } + } + function fontTestFrame(family = textContent.style.font.family) { + const variations = fontVariations(family); + const rows = Math.ceil(variations.length / columns); + addBlocksGrig( + deepCopy(frameSettings), + rows, + columns, + (container, i) => { + const fontSettings = variations[i]; + const text = `${fontSettingsToKey(fontSettings).replaceAll('_', ' ')}\n${textContent.text}`; + return { + ...defaultBlockSettings(), + id: 'placeholder', + container, + content: { + type: 'text', + value: { + text, + style: { + ...deepCopy(textContent.style), + font: fontSettings + } + } + } + }; + }, + variations.length + ); + } + function fontsTestFrame() { + const fontsCount = $fontsNames.length; + const rows = Math.ceil(fontsCount / columns); + addBlocksGrig( + deepCopy(frameSettings), + rows, + columns, + (container, i) => { + const family = $fontsNames[i]; + const text = `${family}\n${textContent.text}`; + return { + ...defaultBlockSettings(), + id: 'placeholder', + container, + content: { + type: 'text', + value: { + text, + style: { + ...deepCopy(textContent.style), + font: { + ...deepCopy(textContent.style.font), + family + } + } + } + } + }; + }, + fontsCount + ); + } + function presetsTestFrame() { + const presetsCount = $presets.length; + const rows = Math.ceil(presetsCount / columns); + addBlocksGrig( + deepCopy(frameSettings), + rows, + columns, + (container, i) => { + const preset = $presets[i]; + const text = `${preset.name}\n${textContent.text}`; + return { + ...defaultBlockSettings(), + id: 'placeholder', + container, + content: { + type: 'text', + value: { + text, + style: applyStylePreset(preset, deepCopy(textContent.style)) + } + } + }; + }, + presetsCount + ); + }
- + -
+
+ + +
+
+
Колонки:
+ +
+ +