├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
├── FreeTransform.svelte
├── index.js
└── vector.js
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 | /dist/
4 |
5 | .DS_Store
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 @mononaut
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte-free-transform
2 |
3 | A freely user-transformable container component for Svelte.
4 |
5 | Wraps arbitrary content in a frame for users to drag, resize and rotate via handles or multi-touch gestures.
6 |
7 | [Try out a demo!](https://svelte.dev/repl/528b834fb07f4d1ea5de986e6c728efc?version=3.38.2)
8 |
9 | ## Installation
10 |
11 | ```bash
12 | npm install --save svelte-free-transform
13 | ```
14 |
15 |
16 | ## Usage
17 |
18 | Wrap any components or markup in a `` element. The container element should be _positioned_.
19 |
20 | Set an initial position using the `position` prop.
21 |
22 | ```html
23 |
27 |
28 |
29 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
54 | ```
55 |
56 | We can also wrap the `` element in another div (for example, if we want to apply Svelte animations), and instead transform that wrapper element:
57 |
58 | ```html
59 |
63 |
64 |