Extracting bounding box code into its own function
This commit is contained in:
parent
754868b9d5
commit
e70705be5f
@ -1,3 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import SVG from 'rendering/SVG/layout';
|
import SVG from 'rendering/SVG/layout';
|
||||||
import Text from 'rendering/Text/layout';
|
import Text from 'rendering/Text/layout';
|
||||||
|
|
||||||
@ -19,4 +22,20 @@ const layout = data => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getBBox = content => {
|
||||||
|
const container = document.createElement('div');
|
||||||
|
document.body.appendChild(container);
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<svg width="0" height="0" viewBox="0 0 0 0">
|
||||||
|
<g>{ content }</g>
|
||||||
|
</svg>, container);
|
||||||
|
|
||||||
|
const box = container.querySelector('svg > g').getBBox();
|
||||||
|
document.body.removeChild(container);
|
||||||
|
|
||||||
|
return box;
|
||||||
|
};
|
||||||
|
|
||||||
export default layout;
|
export default layout;
|
||||||
|
export { getBBox };
|
||||||
|
@ -1,26 +1,14 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
|
|
||||||
|
import { getBBox } from 'layout';
|
||||||
import Text from 'rendering/Text';
|
import Text from 'rendering/Text';
|
||||||
|
|
||||||
const layoutText = data => {
|
const layoutText = data => {
|
||||||
const container = document.createElement('div');
|
const {x, y, width, height } = getBBox(
|
||||||
document.body.appendChild(container);
|
<Text { ...data.props }>{ data.children }</Text>);
|
||||||
|
|
||||||
ReactDOM.render(
|
data.box = { width, height };
|
||||||
<svg width="0" height="0" viewBox="0 0 0 0">
|
data.props.transform = `translate(${ -x } ${ -y })`;
|
||||||
<Text { ...data.props }>{ data.children }</Text>
|
|
||||||
</svg>,
|
|
||||||
container);
|
|
||||||
|
|
||||||
const box = container.querySelector('svg > text').getBBox();
|
|
||||||
document.body.removeChild(container);
|
|
||||||
|
|
||||||
data.box = {
|
|
||||||
width: box.width,
|
|
||||||
height: box.height
|
|
||||||
};
|
|
||||||
data.props.transform = `translate(${ -box.x } ${ -box.y })`;
|
|
||||||
return data;
|
return data;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user