Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

zone-defender

janyajoshi12CC BY-NC1.0.0TypeScript support: included

A non-overlap, auto-layout, grid based layout library.

layout, auto-layout, placement, distribution, non-overlap

readme

Welcome to Zone Defender!

Motivation

This library caters to a rather unique problem. Consider a rectangle, which has some obstacles in between it. Our motive here is to evenly distribute n number of uniform nodes arround the rectangle; with a condition that they should not overlap with obstacles. In essence, you can use this as an auto layout library.

initial board initial board

Installation

This is a Node.js module available through the npm registry.

Before installing, download and install Node.js.

If this is a brand new project, make sure to create a package.json first with the npm init command.

Installation is done using the npm install command:

npm install zone-defender

Parameters

All calculations should start from top left corner

  • gridWidth: horizontal width of outer area
  • gridHeight: vertical height of outer area
  • boxWidth: width of uniform nodes
  • boxHeight: height of uniform nodes
  • forbiddenZones: dimensions of tight rectangular zones encompassing obstacles
  • padding: padding along the border of outer area

Usage

You can use first n coordinates on first-come basis. They are already arranged to make our n nodes evenly distributed

import { getCoordinates } from "zone-defender"

const coordinates = getCoordinates(
    400,
    500,
    50,
    50,
    [{ top: 0, left: 0, width: 57, height: 57 }],
    6
)

//  [
//      { x: 306, y: 6 },   { x: 6, y: 406 },   { x: 306, y: 406 },
//      { x: 256, y: 6 },   { x: 306, y: 56 },  { x: 6, y: 356 },
//      { x: 306, y: 356 }, { x: 56, y: 406 },  { x: 256, y: 406 },
//  ...]

Tests

To run the test suite, first install the dependencies, then run npm run test:

npm install
npm run test