shapes-sorter
v1.0.2
Published
Sort shapes (rectangles, polygons, etc) in reading order
Downloads
3
Maintainers
Readme
shape-sorter
Sort shapes like polygon and rectangle in reading order.
Online demo which sorts barcodes.
Include the library
Via CDN:
<script src="https://cdn.jsdelivr.net/npm/shapes-sorter@latest/dist/shape-sorter.umd.js"></script>
Via npm:
npm install shapes-sorter
Usage
Demo:
let rectangles = [
{x:55,y:105,width:50,height:50,mapping:{originalIndex:0}},
{x:20,y:55,width:50,height:50,mapping:{originalIndex:1}},
{x:55,y:55,width:50,height:50,mapping:{originalIndex:2}}
];
let sorter = new ShapeSorter();
let mappings = sorter.sortRectangles(rectangles);
let sorted = [];
for (let index = 0; index < mappings.length; index++) {
const mapping = mappings[index];
sorted.push(rectangles[mapping.originalIndex]);
}
console.log(sorted);
//[
//{x: 20, y: 55, width: 50, height: 50, mapping: {originalIndex:1}},
//{x: 55, y: 55, width: 50, height: 50, mapping: {originalIndex:2}},
//{x: 55, y: 105, width: 50, height: 50, mapping: {originalIndex:0}}
//]
Methods
sortPolygons(polygons: Polygon[]): Mapping[];
sortRectangles(rectangles: Rectangle[]): Mapping[];
Properties
Horizontal: if set to true, cluster shapes in rows. Othersize, cluster shapes in columns.
Interfaces
export interface Point {
x: number;
y: number;
}
export interface Mapping {
originalIndex?: number;
row?: number;
column?: number;
}
export interface Polygon {
points: Point[];
mapping?: Mapping;
}
export interface Rectangle {
x: number;
y: number;
width: number;
height: number;
mapping?: Mapping;
}