Create orthogonal blobs from grouped arrays of rectangles
Example of convex-hull algorithm:
Examples of polygon-union algorithm:
npm install react-blobber --save
import React from 'react';
import Blobber from 'react-blobber';
const groupLabels = [
['Mercury', 'Venus', 'Mars'],
['quarks', 'leptons', 'bosons'],
['heart', 'lungs', 'brain'],
];
const groupColors = ['#D24D57', '#F5D76E', '#19B5FE'];
const groupRectangles = [
[
{ x: 142, y: 154, width: 150, height: 24 },
{ x: 254, y: 102, width: 150, height: 24 },
{ x: 306, y: 294, width: 150, height: 24 },
],
[
{ x: 219, y: 245, width: 150, height: 24 },
{ x: 102, y: 289, width: 150, height: 24 },
{ x: 102, y: 209, width: 150, height: 24 },
],
[
{ x: 310, y: 190, width: 150, height: 24 },
{ x: 393, y: 246, width: 150, height: 24 },
{ x: 392, y: 130, width: 150, height: 24 },
],
];
class Example extends React.Component {
render() {
const exampleBlobs = groupRectangles.map((rectGroup, i) => (
<Blobber
key={i}
rects={rectGroup}
pathOffset={15}
cornerRadius={8}
containerStyle={{ width: '100%', height: '100%' }}
svgStyle={{ fill: groupColors[i], stroke: groupColors[i], opacity: 0.5 }}
algorithm='polygon-union'
/>
));
return (
<div>
{exampleBlobs}
</div>
);
}
}
-
rects
: an array of rectangles for one blob group (example: elements ofgroupRectangles
above). A rectangle object consists ofx
andy
top-left coordinates as well aswidth
andheight
. -
pathOffset
: blob padding, in pixels -
cornerRadius
: blob corner radius, in pixels -
containerStyle
: style object for container div -
svgStyle
: style object for svg paths -
algorithm
: options areconvex-hull
orpolygon-union
. There are minor differences in appearance between the two algorithms.convex-hull
may not produce optimal results for very complex layouts or groupings, due to convexity requirements. The waypolygon-union
creates extensions between elements may make it more amenable to complex groupings.
npm run dev
to start the webpack dev server with hot reloading, then go to http://localhost:3000.
npm run build
Outputs to dist/
.
npm test