{"id":18889037,"url":"https://github.com/naver/isometrizer","last_synced_at":"2025-04-14T23:23:48.953Z","repository":{"id":57278076,"uuid":"184721362","full_name":"naver/isometrizer","owner":"naver","description":"Isometrizer turns your DOM elements into isometric projection","archived":false,"fork":false,"pushed_at":"2019-05-07T10:07:39.000Z","size":5882,"stargazers_count":50,"open_issues_count":0,"forks_count":3,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-28T11:21:19.116Z","etag":null,"topics":["3d","3d-graphics","css","css3","dom","html","html-css","html-css-javascript","isometric","javascript","projection","typescript"],"latest_commit_sha":null,"homepage":"https://naver.github.io/isometrizer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-03T08:18:30.000Z","updated_at":"2025-03-14T01:51:28.000Z","dependencies_parsed_at":"2022-09-13T18:52:02.344Z","dependency_job_id":null,"html_url":"https://github.com/naver/isometrizer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fisometrizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fisometrizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fisometrizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fisometrizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naver","download_url":"https://codeload.github.com/naver/isometrizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248976279,"owners_count":21192364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","3d-graphics","css","css3","dom","html","html-css","html-css-javascript","isometric","javascript","projection","typescript"],"created_at":"2024-11-08T07:47:13.608Z","updated_at":"2025-04-14T23:23:48.930Z","avatar_url":"https://github.com/naver.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Isometrizer\nIsometrizer turns your DOM elements into isometric projection\n\n![MAP DEMO](./asset/map.gif)\n\n# Introduction\n\nIsometrizer is a Javascript library that has features like\n\n- 4 projection types combining\n  - `ISO_VERTICAL` or `ISO_HORIZONTAL`\n  - `ISO_LEFT` or `ISO_RIGHT`\n- Hierarchical flotation of childs\n- Rotating specific child\n- Side / Top plane drawing\n\n# Quick Start\n```js\nnew Isometrizer(\n    el: HTMLElement | string,\n    options: {\n        spacing: number,\n        orientation: number\n    }\n)\n```\n- `el` is an DOM element itself or element query string.\n- `options` consists of:\n    - `spacing`: Default spacing for child floatation, in px. (default: 40)\n    - `orientation`: Element rotate direction. (default: ISO_VERTICAL | ISO_RIGHT)\n\n### Example\n```js\nconst isometrizer = new Isometrizer(\"#iso\", {\n    spacing: 80,\n    orientation: Isometrizer.ISO_HORIZONTAL | Isometrizer.ISO_LEFT\n});\n```\n\n# Methods\nInstance of `Isometrizer` provides 3 methods you can use.\n\n#### `on()`\nImmediately turns into isometric projection.\n\n#### `off()`\nImmediately turns into original projection.\n\n#### `progress(props)`\nProgressively turns into isometric projection.\n\nYou can combine other libraries like [mojs](https://github.com/legomushroom/mojs), or use `requestAnimationFrame()` to animate projection change.\n\n##### props\nAll following props are from `0`(off) to `1`(on)\n- `normal`: rotate direction `ISO_HORIZONTAL` or `ISO_VERTICAL`\n- `side`: rotate direction `ISO_LEFT` or `ISO_RIGHT`\n- `scale`: scales from 1 to sqrt(2)\n- `float`: floats all childs from 0 to their own spacing\n- `childNormal`: rotate direction `ISO_HORIZONTAL` or `ISO_VERTICAL` of childs\n- `childSide`: rotate direction `ISO_LEFT` or `ISO_RIGHT` of childs\n\n# DOM Attributes\nYou can set some attributes per child to manipulate it. Following are available attributes you can set.\n\n#### Child Floating\n- `iso-spacing={number}`: Set spacing value from its parent for this element.\n- `iso-wrap-spacing={number}`: Set spacing value from its parent for this element, and stop traversing its children to improve performance.\n- `iso-no-spacing`: Set spacing valye from its parent to 0, and stop traversing its children to improve performance.\n\n#### Child Rotating\n- `iso-rotation=\"vertical | horizontal | left | right\"`: Set projection type for this element. Value can be `vertical`, `horizontal`, `left`, `right`, and can be combined with `\"|\"`\n  - So, values can be like `\"vertical\"`, `\"right\"`, `\"horizontal | right\"`\n\n#### Side panels\nSetting any of values below will create Top / Side panels.\n- `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)\"`\n- `iso-side-background={string}`: Same with `iso-top-background`, but for side panel.\n- `iso-side-length={number}`: Set Top / Side panel's length, in px.\n\n#### DOM structure\n- `iso-parallel`: Transform parallel DOM structure into nested structure.\n```html\n\u003cdiv iso-parallel\u003e\n    \u003cdiv\u003e1\u003c/div\u003e\n    \u003cdiv\u003e2\u003c/div\u003e\n    \u003cdiv\u003e3\u003c/div\u003e\n\u003c/div\u003e\n```\nAbove DOM structure will turn into\n```html\n\u003cdiv iso-parallel\u003e\n    \u003cdiv\u003e\n        1\n        \u003cdiv\u003e\n            2\n            \u003cdiv\u003e\n                3\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n# Contributing\nThis project uses [gitmoji](https://gitmoji.carloscuesta.me/), try using it!\n\n## Installing\n```\nnpm install\n```\n\n## Running the tests\n### Linting\n```\nnpm run lint\n```\n\n## Building\n```\nnpm run build\nnpm run demo:build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaver%2Fisometrizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaver%2Fisometrizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaver%2Fisometrizer/lists"}