File size: 3,951 Bytes
b3f0c1a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | import { useState, useEffect } from 'react';
export function useStaticFontData() {
const [fonts, setFonts] = useState([]);
const [glyphPaths, setGlyphPaths] = useState({}); // Map id -> path d
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const loadData = async () => {
try {
console.log('📦 Loading static font map data...');
// 1. Charger le sprite SVG et extraire les chemins
const paths = {};
try {
let spriteContent = '';
// Essayer d'abord dans /data/
const spriteResponse = await fetch('/data/font-sprite.svg');
if (!spriteResponse.ok) {
console.warn('⚠️ Sprite not found at /data/font-sprite.svg, trying root...');
const rootSpriteResponse = await fetch('/font-sprite.svg');
if (rootSpriteResponse.ok) {
spriteContent = await rootSpriteResponse.text();
}
} else {
spriteContent = await spriteResponse.text();
}
if (spriteContent) {
// Parser le SVG pour extraire les chemins
const parser = new DOMParser();
const doc = parser.parseFromString(spriteContent, 'image/svg+xml');
const symbols = doc.querySelectorAll('symbol');
symbols.forEach(symbol => {
const id = symbol.id;
const path = symbol.querySelector('path');
if (id && path) {
paths[id] = path.getAttribute('d');
}
});
console.log(`🎨 Extracted ${Object.keys(paths).length} glyph paths`);
setGlyphPaths(paths);
}
} catch (e) {
console.warn('⚠️ Error loading/parsing sprite:', e);
}
// 2. Charger les données JSON (font-map.json ou fallback typography_data.json)
let data;
const mapResponse = await fetch('/data/font-map.json');
const mapContentType = mapResponse.headers.get('content-type');
if (mapResponse.ok && mapContentType && mapContentType.includes('application/json')) {
data = await mapResponse.json();
console.log('📍 Loaded from font-map.json');
} else {
console.warn('⚠️ font-map.json not available, falling back to typography_data.json');
const fallbackResponse = await fetch('/data/typography_data.json');
if (!fallbackResponse.ok) {
throw new Error('No font data found. Neither font-map.json nor typography_data.json available.');
}
data = await fallbackResponse.json();
console.log('📍 Loaded from typography_data.json (fallback)');
}
if (!data.fonts || !Array.isArray(data.fonts)) {
throw new Error('Invalid data format: missing fonts array');
}
console.log(`✅ Loaded ${data.fonts.length} fonts from static map`);
setFonts(data.fonts);
setLoading(false);
} catch (err) {
console.error('❌ Error loading static font data:', err);
setError(err.message);
setLoading(false);
}
};
loadData();
}, []);
return {
fonts,
glyphPaths,
loading,
error
};
}
|