From a4367e2a8a3d41ee3e6f8fe5f3ef4860eac95d15 Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Wed, 16 Jul 2025 17:13:05 +0900 Subject: [PATCH 1/4] add autoFontSize --- src/display/data-schema/component-schema.js | 6 ++++++ src/display/mixins/Textstyleable.js | 12 ++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/display/data-schema/component-schema.js b/src/display/data-schema/component-schema.js index 9964a575..9be99373 100644 --- a/src/display/data-schema/component-schema.js +++ b/src/display/data-schema/component-schema.js @@ -70,6 +70,12 @@ export const textSchema = Base.extend({ text: z.string().default(''), style: TextStyle.optional(), split: z.number().int().default(0), + autoFontSize: z + .object({ + min: z.number().positive().default(1), + max: z.number().positive().default(100), + }) + .optional(), }).strict(); export const componentSchema = z.discriminatedUnion('type', [ diff --git a/src/display/mixins/Textstyleable.js b/src/display/mixins/Textstyleable.js index d47bac0f..1aac04c1 100644 --- a/src/display/mixins/Textstyleable.js +++ b/src/display/mixins/Textstyleable.js @@ -1,12 +1,12 @@ import { getColor } from '../../utils/get'; import { FONT_WEIGHT, UPDATE_STAGES } from './constants'; -const KEYS = ['text', 'split', 'style', 'margin']; +const KEYS = ['text', 'split', 'style', 'margin', 'autoFontSize']; export const Textstyleable = (superClass) => { const MixedClass = class extends superClass { _applyTextstyle(relevantChanges) { - const { style, margin } = relevantChanges; + const { style, margin, autoFontSize } = relevantChanges; const { theme } = this.context.theme; for (const key in style) { @@ -15,7 +15,7 @@ export const Textstyleable = (superClass) => { } else if (key === 'fill') { this.style[key] = getColor(theme, style.fill); } else if (key === 'fontSize' && style[key] === 'auto') { - setAutoFontSize(this, margin); + setAutoFontSize(this, margin, autoFontSize); } else { this.style[key] = style[key]; } @@ -30,7 +30,7 @@ export const Textstyleable = (superClass) => { return MixedClass; }; -const setAutoFontSize = (object, margin) => { +const setAutoFontSize = (object, margin, autoFontSize) => { object.visible = false; const { width, height } = object.parent.props.size; const parentSize = { @@ -39,8 +39,8 @@ const setAutoFontSize = (object, margin) => { }; object.visible = true; - let minSize = 1; - let maxSize = 100; + let minSize = autoFontSize?.min ?? 1; + let maxSize = autoFontSize?.max ?? 100; while (minSize <= maxSize) { const fontSize = Math.floor((minSize + maxSize) / 2); From cf26b4ae6fe4296cfccd13f846670de30ca2830e Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Wed, 16 Jul 2025 17:37:23 +0900 Subject: [PATCH 2/4] fix --- src/display/data-schema/component-schema.js | 6 --- src/display/data-schema/data.d.ts | 45 +++++++++++++++++---- src/display/data-schema/primitive-schema.js | 12 +++++- src/display/mixins/Textstyleable.js | 13 +++--- 4 files changed, 55 insertions(+), 21 deletions(-) diff --git a/src/display/data-schema/component-schema.js b/src/display/data-schema/component-schema.js index 9be99373..9964a575 100644 --- a/src/display/data-schema/component-schema.js +++ b/src/display/data-schema/component-schema.js @@ -70,12 +70,6 @@ export const textSchema = Base.extend({ text: z.string().default(''), style: TextStyle.optional(), split: z.number().int().default(0), - autoFontSize: z - .object({ - min: z.number().positive().default(1), - max: z.number().positive().default(100), - }) - .optional(), }).strict(); export const componentSchema = z.discriminatedUnion('type', [ diff --git a/src/display/data-schema/data.d.ts b/src/display/data-schema/data.d.ts index 7a2ca728..baf502c5 100644 --- a/src/display/data-schema/data.d.ts +++ b/src/display/data-schema/data.d.ts @@ -457,19 +457,50 @@ export type RelationsStyle = Record; /** * Defines the text style for a Text component. - * You can pass an object similar to PIXI.TextStyle options. + * You can pass an object with properties similar to PIXI.TextStyleOptions, + * along with custom properties for this library. * * @see {@link https://pixijs.download/release/docs/text.TextStyleOptions.html} * * @example - * const textStyleExample: TextStyle = { - * fontFamily: 'Arial', - * fontSize: 24, - * fill: 'white', - * stroke: { color: 'black', width: 2 } + * // Fixed font size + * const fixedSizeStyle: TextStyle = { fontSize: 24, fill: 'red' }; + * + * @example + * // Font size as a string (delegated to PixiJS) + * const stringSizeStyle: TextStyle = { fontSize: '2px', fill: '#00FF00' }; + * + * @example + * // Auto font size with custom range + * const autoSizeStyle: TextStyle = { + * fontSize: 'auto', + * autoFont: { min: 10, max: 50 }, + * fill: 'blue' * }; */ -export type TextStyle = Record; +export interface TextStyle { + /** + * The font size. Can be a number (in pixels), a string parsable by PixiJS (e.g., '16px'), + * or the keyword 'auto' to enable dynamic sizing based on the `autoFont` options. + */ + fontSize?: number | 'auto' | string; + + /** + * Configuration for the 'auto' font size mode. + * This is only active when `fontSize` is 'auto'. + */ + autoFont?: { + min?: number; + max?: number; + }; + + /** + * Allows any other properties, similar to PIXI.TextStyleOptions. + * This provides flexibility for standard text styling. + * e.g., fill, fontFamily, fontWeight, etc. + */ + [key: string]: unknown; +} /** * Defines a tint color to be applied to a component. diff --git a/src/display/data-schema/primitive-schema.js b/src/display/data-schema/primitive-schema.js index 81cfb39c..14565088 100644 --- a/src/display/data-schema/primitive-schema.js +++ b/src/display/data-schema/primitive-schema.js @@ -189,7 +189,17 @@ export const RelationsStyle = z.record(z.string(), z.unknown()); /** * @see {@link https://pixijs.download/release/docs/text.TextStyleOptions.html} */ -export const TextStyle = z.record(z.string(), z.unknown()); +export const TextStyle = z + .object({ + fontSize: z.union([z.number(), z.literal('auto'), z.string()]).optional(), + autoFont: z + .object({ + min: z.number().positive().default(1), + max: z.number().positive().default(100), + }) + .optional(), + }) + .passthrough(); /** * @see {@link https://pixijs.download/release/docs/color.ColorSource.html} diff --git a/src/display/mixins/Textstyleable.js b/src/display/mixins/Textstyleable.js index 1aac04c1..f0fc2701 100644 --- a/src/display/mixins/Textstyleable.js +++ b/src/display/mixins/Textstyleable.js @@ -1,12 +1,12 @@ import { getColor } from '../../utils/get'; import { FONT_WEIGHT, UPDATE_STAGES } from './constants'; -const KEYS = ['text', 'split', 'style', 'margin', 'autoFontSize']; +const KEYS = ['text', 'split', 'style', 'margin']; export const Textstyleable = (superClass) => { const MixedClass = class extends superClass { _applyTextstyle(relevantChanges) { - const { style, margin, autoFontSize } = relevantChanges; + const { style, margin } = relevantChanges; const { theme } = this.context.theme; for (const key in style) { @@ -15,7 +15,8 @@ export const Textstyleable = (superClass) => { } else if (key === 'fill') { this.style[key] = getColor(theme, style.fill); } else if (key === 'fontSize' && style[key] === 'auto') { - setAutoFontSize(this, margin, autoFontSize); + const range = style.autoFont ?? { min: 1, max: 100 }; + setAutoFontSize(this, margin, range); } else { this.style[key] = style[key]; } @@ -30,7 +31,7 @@ export const Textstyleable = (superClass) => { return MixedClass; }; -const setAutoFontSize = (object, margin, autoFontSize) => { +const setAutoFontSize = (object, margin, range) => { object.visible = false; const { width, height } = object.parent.props.size; const parentSize = { @@ -39,9 +40,7 @@ const setAutoFontSize = (object, margin, autoFontSize) => { }; object.visible = true; - let minSize = autoFontSize?.min ?? 1; - let maxSize = autoFontSize?.max ?? 100; - + let { min: minSize, max: maxSize } = range; while (minSize <= maxSize) { const fontSize = Math.floor((minSize + maxSize) / 2); object.style.fontSize = fontSize; From 64a093f873e272d9069a8679422e1f27107f46fd Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Wed, 16 Jul 2025 17:43:12 +0900 Subject: [PATCH 3/4] fix schema --- src/display/data-schema/primitive-schema.js | 8 ++++++-- src/display/mixins/Textstyleable.js | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/display/data-schema/primitive-schema.js b/src/display/data-schema/primitive-schema.js index 14565088..cf1b971b 100644 --- a/src/display/data-schema/primitive-schema.js +++ b/src/display/data-schema/primitive-schema.js @@ -186,6 +186,7 @@ export const TextureStyle = z */ export const RelationsStyle = z.record(z.string(), z.unknown()); +export const DEFAULT_AUTO_FONT_RANGE = { min: 1, max: 100 }; /** * @see {@link https://pixijs.download/release/docs/text.TextStyleOptions.html} */ @@ -194,8 +195,11 @@ export const TextStyle = z fontSize: z.union([z.number(), z.literal('auto'), z.string()]).optional(), autoFont: z .object({ - min: z.number().positive().default(1), - max: z.number().positive().default(100), + min: z.number().positive().default(DEFAULT_AUTO_FONT_RANGE.min), + max: z.number().positive().default(DEFAULT_AUTO_FONT_RANGE.max), + }) + .refine((data) => data.min <= data.max, { + message: 'autoFont.min must not be greater than autoFont.max', }) .optional(), }) diff --git a/src/display/mixins/Textstyleable.js b/src/display/mixins/Textstyleable.js index f0fc2701..619cebec 100644 --- a/src/display/mixins/Textstyleable.js +++ b/src/display/mixins/Textstyleable.js @@ -1,4 +1,5 @@ import { getColor } from '../../utils/get'; +import { DEFAULT_AUTO_FONT_RANGE } from '../data-schema/primitive-schema'; import { FONT_WEIGHT, UPDATE_STAGES } from './constants'; const KEYS = ['text', 'split', 'style', 'margin']; @@ -15,8 +16,9 @@ export const Textstyleable = (superClass) => { } else if (key === 'fill') { this.style[key] = getColor(theme, style.fill); } else if (key === 'fontSize' && style[key] === 'auto') { - const range = style.autoFont ?? { min: 1, max: 100 }; + const range = style.autoFont ?? DEFAULT_AUTO_FONT_RANGE; setAutoFontSize(this, margin, range); + console.log(this.style.fontSize); } else { this.style[key] = style[key]; } From 7ae67e0c74e9081677e1c7d9616b90a72555355e Mon Sep 17 00:00:00 2001 From: MinHo Lim Date: Wed, 16 Jul 2025 17:47:31 +0900 Subject: [PATCH 4/4] fix typo --- src/display/mixins/Textstyleable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/display/mixins/Textstyleable.js b/src/display/mixins/Textstyleable.js index 619cebec..c3db5ce8 100644 --- a/src/display/mixins/Textstyleable.js +++ b/src/display/mixins/Textstyleable.js @@ -18,7 +18,6 @@ export const Textstyleable = (superClass) => { } else if (key === 'fontSize' && style[key] === 'auto') { const range = style.autoFont ?? DEFAULT_AUTO_FONT_RANGE; setAutoFontSize(this, margin, range); - console.log(this.style.fontSize); } else { this.style[key] = style[key]; }