mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-04-10 13:02:59 +00:00
feat(fonts): add dynamic font selection and font manager improvements (#232)
* feat(fonts): add dynamic font selection and font manager improvements - Add font-selector widget for dynamic font selection in plugin configs - Enhance /api/v3/fonts/catalog with filename, display_name, and type - Add /api/v3/fonts/preview endpoint for server-side font rendering - Add /api/v3/fonts/<family> DELETE endpoint with system font protection - Fix /api/v3/fonts/upload to actually save uploaded font files - Update font manager tab with dynamic dropdowns, server-side preview, and font deletion - Add new BDF fonts: 6x10, 6x12, 6x13, 7x13, 7x14, 8x13, 9x15, 9x18, 10x20 (with bold/oblique variants) - Add tom-thumb, helvR12, clR6x12, texgyre-27 fonts Plugin authors can use x-widget: "font-selector" in schemas to enable dynamic font selection that automatically shows all available fonts. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): security fixes and code quality improvements - Fix README.md typos and add language tags to code fences - Remove duplicate delete_font function causing Flask endpoint collision - Add safe integer parsing for size parameter in preview endpoint - Fix path traversal vulnerability in /fonts/preview endpoint - Fix path traversal vulnerability in /fonts/<family> DELETE endpoint - Fix XSS vulnerability in fonts.html by using DOM APIs instead of innerHTML - Move baseUrl to shared scope to fix ReferenceError in multiple functions Security improvements: - Validate font filenames reject path separators and '..' - Validate paths are within fonts_dir before file operations - Use textContent and data attributes instead of inline onclick handlers - Restrict file extensions to known font types Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): address code issues and XSS vulnerabilities - Move `import re` to module level, remove inline imports - Remove duplicate font_file assignment in upload_font() - Remove redundant validation with inconsistent allowed extensions - Remove redundant PathLib import, use already-imported Path - Fix XSS vulnerabilities in fonts.html by using DOM APIs instead of innerHTML with template literals for user-controlled data Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): add size limits to font preview endpoint Add input validation to prevent DoS via large image generation: - MAX_TEXT_CHARS (100): Limit text input length - MAX_TEXT_LINES (3): Limit number of newlines - MAX_DIM (1024): Limit max width/height - MAX_PIXELS (500000): Limit total pixel count Validates text early before processing and checks computed dimensions after bbox calculation but before image allocation. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): improve error handling, catalog keys, and BDF preview - Add structured logging for cache invalidation failures instead of silent pass (FontUpload, FontDelete, FontCatalog contexts) - Use filename as unique catalog key to prevent collisions when multiple font files share the same family_name from metadata - Return explicit error for BDF font preview instead of showing misleading preview with default font Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): address nitpick issues in font management Frontend (fonts.html): - Remove unused escapeHtml function (dead code) - Add max-attempts guard (50 retries) to initialization loop - Add response.ok checks before JSON parsing in deleteFont, addFontOverride, deleteFontOverride, uploadSelectedFonts - Use is_system flag from API instead of hardcoded client-side list Backend (api_v3.py): - Move SYSTEM_FONTS to module-level frozenset for single source of truth - Add is_system flag to font catalog entries - Simplify delete_font system font check using frozenset lookup Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): align frontend upload validation with backend - Add .otf to accepted file extensions (HTML accept attribute, JS filter) - Update validation regex to allow hyphens (matching backend) - Preserve hyphens in auto-generated font family names - Update UI text to reflect all supported formats Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): fix lint errors and missing variable - Remove unused exception binding in set_cached except block - Define font_family_lower before case-insensitive fallback loop - Add response.ok check to font preview fetch (consistent with other handlers) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): address nitpick code quality issues - Add return type hints to get_font_preview and delete_font endpoints - Catch specific PIL exceptions (IOError/OSError) when loading fonts - Replace innerHTML with DOM APIs for trash icon (consistency) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * fix(fonts): remove unused exception bindings in cache-clearing blocks Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Chuck <chuck@example.com> Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Chuck
298
web_interface/static/v3/js/widgets/font-selector.js
Normal file
298
web_interface/static/v3/js/widgets/font-selector.js
Normal file
@@ -0,0 +1,298 @@
|
||||
/**
|
||||
* 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']
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
// 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');
|
||||
})();
|
||||
Reference in New Issue
Block a user