Spaces:
Configuration error
Configuration error
File size: 2,849 Bytes
b700c24 | 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 | import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';
import { useStaticFontData } from '../../hooks/useStaticFontData';
import { useGlyphRendererV2 } from './hooks/useGlyphRendererV2';
import { useZoomV2 } from './hooks/useZoomV2';
import { calculateMappingDimensions } from './utils/mappingUtils';
import './FontMapV2.css';
/**
* FontMapV2 - Clean implementation using DebugUMAP's proven rendering approach
* Phase 1: Just the map with working rendering
*/
const FontMapV2 = ({ darkMode = false }) => {
const svgRef = useRef(null);
const { fonts, glyphPaths, loading, error } = useStaticFontData();
// Calculate mapped coordinates
const mappedFonts = React.useMemo(() => {
if (!fonts || fonts.length === 0) return [];
const { mapX, mapY } = calculateMappingDimensions(fonts);
return fonts.map(font => ({
...font,
x: mapX(font.x),
y: mapY(font.y)
}));
}, [fonts]);
// Initialize SVG and viewport group
useEffect(() => {
if (!svgRef.current) {
console.log('FontMapV2: svgRef not ready');
return;
}
const svg = svgRef.current;
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
svg.style.backgroundColor = darkMode ? '#1a1a1a' : '#ffffff';
// Create viewport group if it doesn't exist
const d3svg = d3.select(svg);
if (d3svg.select('.viewport-group').empty()) {
d3svg.append('g').attr('class', 'viewport-group');
console.log('✅ FontMapV2: Created viewport-group');
} else {
console.log('FontMapV2: viewport-group already exists');
}
}, [darkMode]);
// Setup zoom FIRST (before rendering glyphs)
useZoomV2(svgRef, darkMode);
// Render glyphs AFTER zoom is set up
useGlyphRendererV2({
svgRef,
fonts: mappedFonts,
glyphPaths,
darkMode,
baseGlyphSize: 0.2 // Small base size since we're using 80x80 viewBox
});
if (loading) {
return (
<div className="fontmap-v2-container">
<div className="loading">Loading FontMapV2...</div>
</div>
);
}
if (error) {
return (
<div className="fontmap-v2-container">
<div className="error">Error: {error}</div>
</div>
);
}
return (
<div className="fontmap-v2-container">
<svg ref={svgRef} className="fontmap-v2-svg"></svg>
<div className="info">
<div>FontMapV2 - Phase 1</div>
<div>{fonts.length} fonts loaded</div>
<div>{Object.keys(glyphPaths).length} glyph paths</div>
</div>
</div>
);
};
export default FontMapV2;
|