font text barcode not resize

Nobody has claimed this yet.

const LayerBarcode: React.FunctionComponent = ({
uuid,
index,
layerIndex,
blockIndex,
opacity,
layers = [],d3-47b6-90a6-01740e983a9b)
...config
}) => {
const [url, setUrl] = useState()
const layerConfig = config as ILayerBarCodeConfig
const barcodeRef = useRef(null)

useEffect(() => {
if (layerConfig?.barCodeValue) {
setUrl(layerConfig?.barCodeValue?.url)
}
}, [layerConfig?.barCodeValue])
const { width, height } = layerConfig.size || {}

useEffect(() => {
if (barcodeRef.current) {
JsBarcode(barcodeRef.current, url, {
text: layerConfig?.barCodeValue?.url,
format: layerConfig?.barCodeValue?.type,
width: 30,
lineColor: '#000',
height: height * 0.8,
displayValue: true,
background: '#ffffff',
textAlign: 'center',
fontSize: width * 0.1,
font: 'monospace',
})

dispatchUpdateCurrentLayerConfig({ maxWidth: width, fontSize: '100px' })
}
}, [url, layerConfig.size.height, layerConfig?.barCodeValue, height])

return (




)
}


Start from the React barcode component shown in the issue and reproduce the font and barcode sizing behavior while changing the layer dimensions. Trace how the canvas style and JsBarcode options use the configured width and height. Done means the barcode text and bars resize with the layer without breaking existing rendering; no test file is named.

Written by the indexing model from the issue text.