root/regexper-static
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Extracting bounding box code into its own function

Browse Source
This commit is contained in:
Jeff Avallone 2019-01-27 08:39:49 -05:00
parent 754868b9d5
commit e70705be5f
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/layout.js
View File

@ -1,3 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import SVG from 'rendering/SVG/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 { getBBox };

22
src/rendering/Text/layout.js
View File

@ -1,26 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { getBBox } from 'layout';
import Text from 'rendering/Text';
const layoutText = data => {
const container = document.createElement('div');
document.body.appendChild(container);
const {x, y, width, height } = getBBox(
<Text { ...data.props }>{ data.children }</Text>);
ReactDOM.render(
<svg width="0" height="0" viewBox="0 0 0 0">
<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 })`;
data.box = { width, height };
data.props.transform = `translate(${ -x } ${ -y })`;
return data;
};