mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-10-14 11:06:39 +00:00
ChuckandClaude Opus 5
e86dc9c27b
Nineteen plugins spell their style elements out longhand instead of declaring them -- football's block is 701 lines for seven elements -- and predate this system entirely. Core now recognises that shape, so they pick up the row-per-element editor and the real font picker on a core update rather than on a plugin release. Checked against every published schema: 21 plugins adopt, and the defaults of each still validate against the schema generated for it. Detection requires *every* field in a block to be one this system understands. A looser "has at least one style field" rule sweeps in baseball's `count`, which carries a text_color beside geometry that means nothing here. That distinction took three attempts to test: the first two assertions passed under both rules, because an over-eager rule leaves a fontless block looking untouched and only surfaces as an extra row in the editor. The hardcoded font enum is replaced rather than extended. Football lists five of the thirty-five installed fonts, which is why a font a user uploads can never appear in one. It is not a curated safe set -- it omits some twenty other faces that fit the declared size cap just as well -- it is the fonts that happened to exist when it was written. Widening it does need a guard, though, and not the one the schema already has: a bitmap font ignores font_size and renders at its size baked into the file, so `maximum: 16` cannot stop a 27px face. The picker now filters out fixed-size fonts taller than the element's own declared ceiling, which drops exactly the four that would overflow a 32px panel and keeps the other thirty. Per-mode overrides stay opt-in: core cannot invent a plugin's display modes, so `x-style-modes` remains the one line that unlocks them. Their layout half covers every positionable element rather than only those with a style block -- the two namespaces do not line up in a hand-written schema, and football positions six things (logos, timeouts, possession) that have no style block at all. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
315 lines
12 KiB
JavaScript
315 lines
12 KiB
JavaScript
/**
|
|
* LEDMatrix Font Selector Widget
|
|
*
|
|
* Dynamic font selector that fetches available fonts from the API.
|
|
* Automatically shows all fonts in assets/fonts/ directory.
|
|
*
|
|
* Schema example:
|
|
* {
|
|
* "font": {
|
|
* "type": "string",
|
|
* "title": "Font Family",
|
|
* "x-widget": "font-selector",
|
|
* "x-options": {
|
|
* "placeholder": "Select a font...",
|
|
* "showPreview": false,
|
|
* "filterTypes": ["ttf", "bdf"]
|
|
* },
|
|
* "default": "PressStart2P-Regular.ttf"
|
|
* }
|
|
* }
|
|
*
|
|
* @module FontSelectorWidget
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
const base = window.BaseWidget ? new window.BaseWidget('FontSelector', '1.0.0') : null;
|
|
|
|
// Cache for font catalog to avoid repeated API calls
|
|
let fontCatalogCache = null;
|
|
let fontCatalogPromise = null;
|
|
|
|
function escapeHtml(text) {
|
|
if (base) return base.escapeHtml(text);
|
|
const div = document.createElement('div');
|
|
div.textContent = String(text);
|
|
return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
|
|
function sanitizeId(id) {
|
|
if (base) return base.sanitizeId(id);
|
|
return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
|
|
}
|
|
|
|
function triggerChange(fieldId, value) {
|
|
if (base) {
|
|
base.triggerChange(fieldId, value);
|
|
} else {
|
|
const event = new CustomEvent('widget-change', {
|
|
detail: { fieldId, value },
|
|
bubbles: true,
|
|
cancelable: true
|
|
});
|
|
document.dispatchEvent(event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generate a human-readable display name from font filename
|
|
* @param {string} filename - Font filename (e.g., "PressStart2P-Regular.ttf")
|
|
* @returns {string} Display name (e.g., "Press Start 2P Regular")
|
|
*/
|
|
function generateDisplayName(filename) {
|
|
if (!filename) return '';
|
|
|
|
// Remove extension
|
|
let name = filename.replace(/\.(ttf|bdf|otf)$/i, '');
|
|
|
|
// Handle common patterns
|
|
// Split on hyphens and underscores
|
|
name = name.replace(/[-_]/g, ' ');
|
|
|
|
// Add space before capital letters (camelCase/PascalCase)
|
|
name = name.replace(/([a-z])([A-Z])/g, '$1 $2');
|
|
|
|
// Add space before numbers that follow letters
|
|
name = name.replace(/([a-zA-Z])(\d)/g, '$1 $2');
|
|
|
|
// Clean up multiple spaces
|
|
name = name.replace(/\s+/g, ' ').trim();
|
|
|
|
return name;
|
|
}
|
|
|
|
/**
|
|
* Fetch font catalog from API (with caching)
|
|
* @returns {Promise<Array>} Array of font objects
|
|
*/
|
|
async function fetchFontCatalog() {
|
|
// Return cached data if available
|
|
if (fontCatalogCache) {
|
|
return fontCatalogCache;
|
|
}
|
|
|
|
// Return existing promise if fetch is in progress
|
|
if (fontCatalogPromise) {
|
|
return fontCatalogPromise;
|
|
}
|
|
|
|
// Fetch from API
|
|
fontCatalogPromise = fetch('/api/v3/fonts/catalog')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch font catalog: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
// Handle different response structures
|
|
let fonts = [];
|
|
|
|
if (data.data && data.data.fonts) {
|
|
// New format: { data: { fonts: [...] } }
|
|
fonts = data.data.fonts;
|
|
} else if (data.data && data.data.catalog) {
|
|
// Alternative format: { data: { catalog: {...} } }
|
|
const catalog = data.data.catalog;
|
|
fonts = Object.entries(catalog).map(([family, info]) => ({
|
|
filename: info.filename || family,
|
|
family: family,
|
|
display_name: info.display_name || generateDisplayName(info.filename || family),
|
|
path: info.path,
|
|
type: info.type || 'unknown'
|
|
}));
|
|
} else if (Array.isArray(data)) {
|
|
// Direct array format
|
|
fonts = data;
|
|
}
|
|
|
|
// Sort fonts alphabetically by display name
|
|
fonts.sort((a, b) => {
|
|
const nameA = (a.display_name || a.filename || '').toLowerCase();
|
|
const nameB = (b.display_name || b.filename || '').toLowerCase();
|
|
return nameA.localeCompare(nameB);
|
|
});
|
|
|
|
fontCatalogCache = fonts;
|
|
fontCatalogPromise = null;
|
|
return fonts;
|
|
})
|
|
.catch(error => {
|
|
console.error('[FontSelectorWidget] Error fetching font catalog:', error);
|
|
fontCatalogPromise = null;
|
|
return [];
|
|
});
|
|
|
|
return fontCatalogPromise;
|
|
}
|
|
|
|
/**
|
|
* Clear the font catalog cache (call when fonts are uploaded/deleted)
|
|
*/
|
|
function clearFontCache() {
|
|
fontCatalogCache = null;
|
|
fontCatalogPromise = null;
|
|
}
|
|
|
|
// Expose cache clearing function globally
|
|
window.clearFontSelectorCache = clearFontCache;
|
|
|
|
// Guard against missing global registry
|
|
if (!window.LEDMatrixWidgets || typeof window.LEDMatrixWidgets.register !== 'function') {
|
|
console.error('[FontSelectorWidget] LEDMatrixWidgets registry not available');
|
|
return;
|
|
}
|
|
|
|
window.LEDMatrixWidgets.register('font-selector', {
|
|
name: 'Font Selector Widget',
|
|
version: '1.0.0',
|
|
|
|
render: async function(container, config, value, options) {
|
|
const fieldId = sanitizeId(options.fieldId || container.id || 'font-select');
|
|
const xOptions = config['x-options'] || config['x_options'] || {};
|
|
const placeholder = xOptions.placeholder || 'Select a font...';
|
|
const filterTypes = xOptions.filterTypes || null; // e.g., ['ttf', 'bdf']
|
|
// Bitmap (BDF) fonts render at the one size baked into the file
|
|
// and ignore the size setting entirely, so a field that caps size
|
|
// at 16 can still be handed a 27px face. maxFixedSize hides the
|
|
// ones that cannot honour the cap, rather than offering a choice
|
|
// that silently overflows the panel.
|
|
const maxFixedSize = Number(xOptions.maxFixedSize) || null;
|
|
const showPreview = xOptions.showPreview === true;
|
|
const disabled = xOptions.disabled === true;
|
|
const required = xOptions.required === true;
|
|
|
|
const currentValue = value !== null && value !== undefined ? String(value) : '';
|
|
|
|
// Show loading state
|
|
container.innerHTML = `
|
|
<div id="${fieldId}_widget" class="font-selector-widget" data-field-id="${fieldId}">
|
|
<select id="${fieldId}_input"
|
|
name="${escapeHtml(options.name || fieldId)}"
|
|
disabled
|
|
class="form-select w-full rounded-md border-gray-300 shadow-sm bg-gray-100 text-black">
|
|
<option value="">Loading fonts...</option>
|
|
</select>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
// Fetch fonts from API
|
|
const fonts = await fetchFontCatalog();
|
|
|
|
// Filter by type if specified
|
|
let filteredFonts = fonts;
|
|
if (filterTypes && Array.isArray(filterTypes)) {
|
|
filteredFonts = fonts.filter(font => {
|
|
const fontType = (font.type || '').toLowerCase();
|
|
return filterTypes.some(t => t.toLowerCase() === fontType);
|
|
});
|
|
}
|
|
if (maxFixedSize) {
|
|
filteredFonts = filteredFonts.filter(font => {
|
|
// A scalable face can always meet the cap.
|
|
if (font.scalable !== false) { return true; }
|
|
// An unknown native size is not evidence it is too
|
|
// big; keep it rather than hiding a usable font.
|
|
if (!font.native_size) { return true; }
|
|
return font.native_size <= maxFixedSize;
|
|
});
|
|
}
|
|
|
|
// Build select HTML
|
|
let html = `<div id="${fieldId}_widget" class="font-selector-widget" data-field-id="${fieldId}">`;
|
|
|
|
html += `
|
|
<select id="${fieldId}_input"
|
|
name="${escapeHtml(options.name || fieldId)}"
|
|
${disabled ? 'disabled' : ''}
|
|
${required ? 'required' : ''}
|
|
onchange="window.LEDMatrixWidgets.getHandlers('font-selector').onChange('${fieldId}')"
|
|
class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black">
|
|
`;
|
|
|
|
// Placeholder option
|
|
if (placeholder && !required) {
|
|
html += `<option value="" ${!currentValue ? 'selected' : ''}>${escapeHtml(placeholder)}</option>`;
|
|
}
|
|
|
|
// Font options
|
|
for (const font of filteredFonts) {
|
|
const fontValue = font.filename || font.family;
|
|
const displayName = font.display_name || generateDisplayName(fontValue);
|
|
const fontType = font.type ? ` (${font.type.toUpperCase()})` : '';
|
|
const isSelected = String(fontValue) === currentValue;
|
|
|
|
html += `<option value="${escapeHtml(String(fontValue))}" ${isSelected ? 'selected' : ''}>${escapeHtml(displayName)}${escapeHtml(fontType)}</option>`;
|
|
}
|
|
|
|
html += '</select>';
|
|
|
|
// Optional preview area
|
|
if (showPreview) {
|
|
html += `
|
|
<div id="${fieldId}_preview" class="mt-2 p-2 bg-gray-800 rounded text-white text-center" style="min-height: 30px;">
|
|
<span style="font-family: monospace;">Preview</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Error message area
|
|
html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
|
|
|
|
html += '</div>';
|
|
|
|
container.innerHTML = html;
|
|
|
|
} catch (error) {
|
|
console.error('[FontSelectorWidget] Error rendering:', error);
|
|
container.innerHTML = `
|
|
<div id="${fieldId}_widget" class="font-selector-widget" data-field-id="${fieldId}">
|
|
<select id="${fieldId}_input"
|
|
name="${escapeHtml(options.name || fieldId)}"
|
|
class="form-select w-full rounded-md border-gray-300 shadow-sm bg-white text-black">
|
|
<option value="${escapeHtml(currentValue)}" selected>${escapeHtml(currentValue || 'Error loading fonts')}</option>
|
|
</select>
|
|
<div class="text-sm text-red-600 mt-1">Failed to load font list</div>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
|
|
getValue: function(fieldId) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
return input ? input.value : '';
|
|
},
|
|
|
|
setValue: function(fieldId, value) {
|
|
const safeId = sanitizeId(fieldId);
|
|
const input = document.getElementById(`${safeId}_input`);
|
|
if (input) {
|
|
input.value = value !== null && value !== undefined ? String(value) : '';
|
|
}
|
|
},
|
|
|
|
handlers: {
|
|
onChange: function(fieldId) {
|
|
const widget = window.LEDMatrixWidgets.get('font-selector');
|
|
triggerChange(fieldId, widget.getValue(fieldId));
|
|
}
|
|
},
|
|
|
|
// Expose utility functions
|
|
utils: {
|
|
clearCache: clearFontCache,
|
|
fetchCatalog: fetchFontCatalog,
|
|
generateDisplayName: generateDisplayName
|
|
}
|
|
});
|
|
|
|
console.log('[FontSelectorWidget] Font selector widget registered');
|
|
})();
|