| import { TextStyle } from '../types'; |
| |
| const STYLE_FIELDS: (keyof TextStyle)[] = [ |
| 'font', |
| 'fontWeight', |
| 'fontStyle', |
| 'fontSize', |
| 'fontFamily', |
| 'letterSpacing', |
| ]; |
| |
| export default function updateTextNode( |
| node: SVGTextElement, |
| { |
| className, |
| style = {}, |
| text, |
| }: { |
| className?: string; |
| style?: TextStyle; |
| text?: string; |
| } = {}, |
| ) { |
| const textNode = node; |
| |
| if (textNode.textContent !== text) { |
| textNode.textContent = typeof text === 'undefined' ? null : text; |
| } |
| if (textNode.getAttribute('class') !== className) { |
| textNode.setAttribute('class', className ?? ''); |
| } |
| |
| // Clear style |
| // Note: multi-word property names are hyphenated and not camel-cased. |
| textNode.style.removeProperty('font'); |
| textNode.style.removeProperty('font-weight'); |
| textNode.style.removeProperty('font-style'); |
| textNode.style.removeProperty('font-size'); |
| textNode.style.removeProperty('font-family'); |
| textNode.style.removeProperty('letter-spacing'); |
| |
| // Apply new style |
| // Note: the font field will auto-populate other font fields when applicable. |
| STYLE_FIELDS.filter( |
| (field: keyof TextStyle) => typeof style[field] !== 'undefined' && style[field] !== null, |
| ).forEach((field: keyof TextStyle) => { |
| textNode.style[field] = `${style[field]}`; |
| }); |
| |
| return textNode; |
| } |