# @apexearth/layout

> A package to manage the creation and usage of layouts like two-dimensional floor plans, maps, etc, using a grid.

Latest version **0.7.3** (published 2017-12-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install @apexearth/layout
pnpm add @apexearth/layout
yarn add @apexearth/layout
bun add @apexearth/layout
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.3 |
| Published | 2017-12-28 |
| First published | 2017-10-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Christopher Jacobs |
| Maintainers | apexearth |
| Keywords | layout, grid, sections, map |

## Links

- npm: https://www.npmjs.com/package/@apexearth/layout
- Repository: https://github.com/apexearth/layout
- Homepage: https://github.com/apexearth/layout#readme
- Issues: https://github.com/apexearth/layout/issues
- npm.io page: https://npm.io/package/@apexearth/layout

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.7.3 (latest) — 2017-12-28
- 0.7.2 — 2017-12-27
- 0.7.1 — 2017-12-26
- 0.7.0 — 2017-12-26
- 0.5.0 — 2017-11-19
- 0.4.4 — 2017-11-07
- 0.4.3 — 2017-11-06
- 0.4.2 — 2017-11-06
- 0.4.1 — 2017-11-05
- 0.3.1 — 2017-10-31
- 0.3.0 — 2017-10-31
- 0.2.0 — 2017-10-30
- 0.1.0 — 2017-10-28
- 0.0.3 — 2017-10-27

## README

<a name="module_@apexearth/layout"></a>

## @apexearth/layout
## Install
```
npm install @apexearth/layout
```

## Usage
```javascript
const Layout = require('@apexearth/layout')
```

<a name="Layout"></a>

## Layout
Class used to create layouts.

**Kind**: global class  

* [Layout](#Layout)
    * [new Layout(autoShrink, overlap)](#new_Layout_new)
    * [.bounds](#Layout+bounds) : <code>Object</code>
    * [.size](#Layout+size) : <code>number</code>
    * [.fillSize](#Layout+fillSize) : <code>number</code>
    * [.sections](#Layout+sections) : <code>Array</code>
    * [.width](#Layout+width) ⇒ <code>number</code>
    * [.height](#Layout+height) ⇒ <code>number</code>
    * [.addSection(left, top, right, bottom, name, data, corner)](#Layout+addSection) ⇒ <code>Section</code>
    * [.deleteAllSections()](#Layout+deleteAllSections)
    * [.deleteSections(x, y)](#Layout+deleteSections)
    * [.deleteSection(section)](#Layout+deleteSection) ⇒ <code>Section</code>
    * [.removeSection(section)](#Layout+removeSection) ⇒ <code>Section</code>
    * [.sectionsAt(x, y, ignoredSection)](#Layout+sectionsAt)
    * [.isEmptyWithin(left, top, right, bottom, ignoredSection)](#Layout+isEmptyWithin)
    * [.toString()](#Layout+toString) ⇒ <code>string</code>
    * [.add(left, top, right, bottom, x, y, width, height, corner, name, data)](#Layout+add) ⇒ <code>Section</code>

<a name="new_Layout_new"></a>

### new Layout(autoShrink, overlap)

| Param | Description |
| --- | --- |
| autoShrink | Whether to automatically shrink the Layout bounds when possible. |
| overlap | Whether to allow Sections to overlap each other. |

<a name="Layout+bounds"></a>

### layout.bounds : <code>Object</code>
The bounds of the Layout.

**Kind**: instance property of [<code>Layout</code>](#Layout)  
<a name="Layout+size"></a>

### layout.size : <code>number</code>
The total area of the Layout. (width * height)

**Kind**: instance property of [<code>Layout</code>](#Layout)  
<a name="Layout+fillSize"></a>

### layout.fillSize : <code>number</code>
The total filled area of the Layout. (Total width * height of all sections)

**Kind**: instance property of [<code>Layout</code>](#Layout)  
<a name="Layout+sections"></a>

### layout.sections : <code>Array</code>
The sections within the Layout.

**Kind**: instance property of [<code>Layout</code>](#Layout)  
<a name="Layout+width"></a>

### layout.width ⇒ <code>number</code>
The width of the Layout.

**Kind**: instance property of [<code>Layout</code>](#Layout)  
<a name="Layout+height"></a>

### layout.height ⇒ <code>number</code>
The height of the Layout.

**Kind**: instance property of [<code>Layout</code>](#Layout)  
<a name="Layout+addSection"></a>

### layout.addSection(left, top, right, bottom, name, data, corner) ⇒ <code>Section</code>
Add a section to the Layout.

**Kind**: instance method of [<code>Layout</code>](#Layout)  

| Param | Type | Description |
| --- | --- | --- |
| left | <code>number</code> | The left bound. |
| top | <code>number</code> | The top bound. |
| right | <code>number</code> | The right bound. |
| bottom | <code>number</code> | The bottom bound. |
| name | <code>string</code> | The name of the Section. |
| data | <code>object</code> | The data to associate with the section. |
| corner | <code>&#x27;top-left&#x27;</code> \| <code>&#x27;top-right&#x27;</code> \| <code>&#x27;bottom-right&#x27;</code> \| <code>&#x27;bottom-left&#x27;</code> \| <code>undefined</code> | Whether the section is a corner. |

<a name="Layout+deleteAllSections"></a>

### layout.deleteAllSections()
Delete all sections within the Layout.

**Kind**: instance method of [<code>Layout</code>](#Layout)  
<a name="Layout+deleteSections"></a>

### layout.deleteSections(x, y)
Delete sections located at coordinates.

**Kind**: instance method of [<code>Layout</code>](#Layout)  

| Param | Type |
| --- | --- |
| x | <code>number</code> | 
| y | <code>number</code> | 

<a name="Layout+deleteSection"></a>

### layout.deleteSection(section) ⇒ <code>Section</code>
Delete a specific section.

**Kind**: instance method of [<code>Layout</code>](#Layout)  

| Param | Description |
| --- | --- |
| section | The section to delete from the Layout. |

<a name="Layout+removeSection"></a>

### layout.removeSection(section) ⇒ <code>Section</code>
Same as deleteSection.

**Kind**: instance method of [<code>Layout</code>](#Layout)  

| Param | Description |
| --- | --- |
| section | The section to delete from the Layout. |

<a name="Layout+sectionsAt"></a>

### layout.sectionsAt(x, y, ignoredSection)
Get all sections at a coordinate.

**Kind**: instance method of [<code>Layout</code>](#Layout)  

| Param | Type |
| --- | --- |
| x | <code>number</code> | 
| y | <code>number</code> | 
| ignoredSection | <code>Section</code> | 

<a name="Layout+isEmptyWithin"></a>

### layout.isEmptyWithin(left, top, right, bottom, ignoredSection)
Check if an area is empty.

**Kind**: instance method of [<code>Layout</code>](#Layout)  

| Param | Type | Description |
| --- | --- | --- |
| left | <code>number</code> |  |
| top | <code>number</code> |  |
| right | <code>number</code> |  |
| bottom | <code>number</code> |  |
| ignoredSection | <code>Section</code> | A section to ignore. |

<a name="Layout+toString"></a>

### layout.toString() ⇒ <code>string</code>
Create an ASCII representation of the Layout.

**Kind**: instance method of [<code>Layout</code>](#Layout)  
<a name="Layout+add"></a>

### layout.add(left, top, right, bottom, x, y, width, height, corner, name, data) ⇒ <code>Section</code>
Add a section to the Layout using more flexible options.

**Kind**: instance method of [<code>Layout</code>](#Layout)  
**Returns**: <code>Section</code> - - The Section added.  

| Param | Type | Description |
| --- | --- | --- |
| left |  | The left bound. |
| top |  | The top bound. |
| right |  | The right bound. |
| bottom |  | The bottom bound. |
| x |  | The left bound. |
| y |  | The right bound. |
| width |  | The right bound, minus x. |
| height |  | The bottom bound, minus y. |
| corner | <code>&#x27;top-left&#x27;</code> \| <code>&#x27;top-right&#x27;</code> \| <code>&#x27;bottom-right&#x27;</code> \| <code>&#x27;bottom-left&#x27;</code> \| <code>undefined</code> | Whether the section is a corner. |
| name |  | The name of the Section. |
| data |  | The data to associate with the Section. |

<a name="Section"></a>

## Section
The Section class.

**Kind**: global class  

* [Section](#Section)
    * [.layout](#Section+layout) : <code>Layout</code>
    * [.name](#Section+name) : <code>string</code>
    * [.left](#Section+left) : <code>number</code>
    * [.top](#Section+top) : <code>number</code>
    * [.right](#Section+right) : <code>number</code>
    * [.bottom](#Section+bottom) : <code>number</code>
    * [.data](#Section+data) : <code>\*</code>
    * [.corner](#Section+corner) : <code>&#x27;top-left&#x27;</code> \| <code>&#x27;top-right&#x27;</code> \| <code>&#x27;bottom-right&#x27;</code> \| <code>&#x27;bottom-left&#x27;</code> \| <code>undefined</code>
    * [.leftSections](#Section+leftSections) : <code>Array</code>
    * [.topSections](#Section+topSections) : <code>Array</code>
    * [.rightSections](#Section+rightSections) : <code>Array</code>
    * [.bottomSections](#Section+bottomSections) : <code>Array</code>

<a name="Section+layout"></a>

### section.layout : <code>Layout</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+name"></a>

### section.name : <code>string</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+left"></a>

### section.left : <code>number</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+top"></a>

### section.top : <code>number</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+right"></a>

### section.right : <code>number</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+bottom"></a>

### section.bottom : <code>number</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+data"></a>

### section.data : <code>\*</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+corner"></a>

### section.corner : <code>&#x27;top-left&#x27;</code> \| <code>&#x27;top-right&#x27;</code> \| <code>&#x27;bottom-right&#x27;</code> \| <code>&#x27;bottom-left&#x27;</code> \| <code>undefined</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+leftSections"></a>

### section.leftSections : <code>Array</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+topSections"></a>

### section.topSections : <code>Array</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+rightSections"></a>

### section.rightSections : <code>Array</code>
**Kind**: instance property of [<code>Section</code>](#Section)  
<a name="Section+bottomSections"></a>

### section.bottomSections : <code>Array</code>
**Kind**: instance property of [<code>Section</code>](#Section)

---
_Source: https://npm.io/package/@apexearth/layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._