Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alex3165/react-mapping
Projection mapping in React
https://github.com/alex3165/react-mapping
mapping matrix matrix3d projection react
Last synced: about 1 month ago
JSON representation
Projection mapping in React
- Host: GitHub
- URL: https://github.com/alex3165/react-mapping
- Owner: alex3165
- Created: 2017-11-06T21:37:40.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-08T18:22:33.000Z (about 7 years ago)
- Last Synced: 2024-10-12T17:09:13.091Z (about 1 month ago)
- Topics: mapping, matrix, matrix3d, projection, react
- Language: TypeScript
- Homepage: https://alex3165.github.io/react-mapping/
- Size: 434 KB
- Stars: 13
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React-mapping
Video projection mapping library in React.
Contain the following component:
- Layer: Allow you to transform the children element as you wish (3d tranform and translate)
- Grid: Add a background grid to help with accuracy while you are mapping in edit mode
This is a work in progress library.
# Documentation
## Layer
Allow you to transform the children element as you wish (3d tranform and translate)
### How to use
```jsx
```
### Properties
- **style** : `React.CSSProperties` Style applied to the container of the children element
- **anchorStyle** : `React.CSSProperties` Style applied to the anchor component
- **className** : `string` Classes applied to the container of the children element
- **anchorClassName** : `string` Classes applied to the anchor component
- **isEditMode** : `boolean` if true, switch to edit mode and make anchors visible, if false, switch to view mode and anchor are not visible.
- **x** : `number` Initial x position of the child element
- **y** : `number` Initial y position of the child element
------
## Grid
### How to use
```jsx
```
### Properties
- **rows** : `number` number of rows to display
- **columns** : `number` number of columns to display
## TODO
### Layer
- Add layer grid
- Add magnet
- Add reset functionality
- Add more key controls
- Add save to localstorage
- Add layer container style when selecting a layer
## Thanks
This library has been inspired from the following blog posts / library:
- http://franklinta.com/2014/09/08/computing-css-matrix3d-transforms/
- https://bl.ocks.org/mbostock/10571478
- https://github.com/glowbox/maptasticjs