Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naver/isometrizer
Isometrizer turns your DOM elements into isometric projection
https://github.com/naver/isometrizer
3d 3d-graphics css css3 dom html html-css html-css-javascript isometric javascript projection typescript
Last synced: 8 days ago
JSON representation
Isometrizer turns your DOM elements into isometric projection
- Host: GitHub
- URL: https://github.com/naver/isometrizer
- Owner: naver
- License: mit
- Created: 2019-05-03T08:18:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-05-07T10:07:39.000Z (over 5 years ago)
- Last Synced: 2024-10-11T00:38:27.056Z (about 1 month ago)
- Topics: 3d, 3d-graphics, css, css3, dom, html, html-css, html-css-javascript, isometric, javascript, projection, typescript
- Language: TypeScript
- Homepage: https://naver.github.io/isometrizer/
- Size: 5.61 MB
- Stars: 48
- Watchers: 11
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Isometrizer
Isometrizer turns your DOM elements into isometric projection
# Introduction
Isometrizer is a Javascript library that has features like
- 4 projection types combining
- `ISO_VERTICAL` or `ISO_HORIZONTAL`
- `ISO_LEFT` or `ISO_RIGHT`
- Hierarchical flotation of childs
- Rotating specific child
- Side / Top plane drawing
# Quick Start
```js
new Isometrizer(
el: HTMLElement | string,
options: {
spacing: number,
orientation: number
}
)
```
- `el` is an DOM element itself or element query string.
- `options` consists of:
- `spacing`: Default spacing for child floatation, in px. (default: 40)
- `orientation`: Element rotate direction. (default: ISO_VERTICAL | ISO_RIGHT)
### Example
```js
const isometrizer = new Isometrizer("#iso", {
spacing: 80,
orientation: Isometrizer.ISO_HORIZONTAL | Isometrizer.ISO_LEFT
});
```
# Methods
Instance of `Isometrizer` provides 3 methods you can use.
#### `on()`
Immediately turns into isometric projection.
#### `off()`
Immediately turns into original projection.
#### `progress(props)`
Progressively turns into isometric projection.
You can combine other libraries like [mojs](https://github.com/legomushroom/mojs), or use `requestAnimationFrame()` to animate projection change.
##### props
All following props are from `0`(off) to `1`(on)
- `normal`: rotate direction `ISO_HORIZONTAL` or `ISO_VERTICAL`
- `side`: rotate direction `ISO_LEFT` or `ISO_RIGHT`
- `scale`: scales from 1 to sqrt(2)
- `float`: floats all childs from 0 to their own spacing
- `childNormal`: rotate direction `ISO_HORIZONTAL` or `ISO_VERTICAL` of childs
- `childSide`: rotate direction `ISO_LEFT` or `ISO_RIGHT` of childs
# DOM Attributes
You can set some attributes per child to manipulate it. Following are available attributes you can set.
#### Child Floating
- `iso-spacing={number}`: Set spacing value from its parent for this element.
- `iso-wrap-spacing={number}`: Set spacing value from its parent for this element, and stop traversing its children to improve performance.
- `iso-no-spacing`: Set spacing valye from its parent to 0, and stop traversing its children to improve performance.
#### Child Rotating
- `iso-rotation="vertical | horizontal | left | right"`: Set projection type for this element. Value can be `vertical`, `horizontal`, `left`, `right`, and can be combined with `"|"`
- So, values can be like `"vertical"`, `"right"`, `"horizontal | right"`
#### Side panels
Setting any of values below will create Top / Side panels.
- `iso-top-background={string}`: Set css `background` property for top plane. You can set color for it like `"#FFFFFF"`, or image like `"url(/images/some_image.png)"`
- `iso-side-background={string}`: Same with `iso-top-background`, but for side panel.
- `iso-side-length={number}`: Set Top / Side panel's length, in px.
#### DOM structure
- `iso-parallel`: Transform parallel DOM structure into nested structure.
```html
1
2
3
```
Above DOM structure will turn into
```html
1
2
3
```
# Contributing
This project uses [gitmoji](https://gitmoji.carloscuesta.me/), try using it!
## Installing
```
npm install
```
## Running the tests
### Linting
```
npm run lint
```
## Building
```
npm run build
npm run demo:build
```