|
|
|
|
|
import { getConfig } from '../config/mapConfig.js'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function calculateMappingDimensions(fonts) { |
|
|
const xValues = fonts.map(d => d.x); |
|
|
const yValues = fonts.map(d => d.y); |
|
|
|
|
|
const xMin = Math.min(...xValues); |
|
|
const xMax = Math.max(...xValues); |
|
|
const yMin = Math.min(...yValues); |
|
|
const yMax = Math.max(...yValues); |
|
|
|
|
|
const offset = getConfig('ui.positions.leva.top', 20); |
|
|
const mapX = (x) => ((x - xMin) / (xMax - xMin)) * (window.innerWidth - 2 * offset) + offset; |
|
|
const mapY = (y) => ((yMax - y) / (yMax - yMin)) * (window.innerHeight - 2 * offset) + offset; |
|
|
|
|
|
return { |
|
|
mapX, |
|
|
mapY, |
|
|
dimensions: { xMin, xMax, yMin, yMax, offset } |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function createGlyphTransform(x, y, scale) { |
|
|
return `translate(${x}, ${y}) scale(${scale})`; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export function applyZoomTransform(originalTransform, zoomTransform, baseGlyphSize) { |
|
|
const translateMatch = originalTransform.match(/translate\(([^,]+),([^)]+)\)/); |
|
|
if (!translateMatch) return zoomTransform; |
|
|
|
|
|
const origX = parseFloat(translateMatch[1]); |
|
|
const origY = parseFloat(translateMatch[2]); |
|
|
|
|
|
const newX = zoomTransform.applyX(origX); |
|
|
const newY = zoomTransform.applyY(origY); |
|
|
const inverseScale = zoomTransform.k; |
|
|
|
|
|
return `translate(${newX},${newY}) scale(${baseGlyphSize * inverseScale})`; |
|
|
} |
|
|
|