svelte-free-transform
A freely user-transformable container component for Svelte.
Wraps arbitrary content in a frame for users to drag, resize and rotate via handles or multi-touch gestures.
Installation
npm install --save svelte-free-transform
Usage
Wrap any components or markup in a <FreeTransform /> element. The container element should be positioned.
Set an initial position using the position prop.
<script>
import FreeTransform from 'svelte-free-transform';
</script>
<div class="transform-area">
<FreeTransform
position={{
x: 0,
y: 0,
w: 100,
h: 100,
r: 0
}}
handleMode="resize"
rotatorEnabled
rotatorBar
>
<content />
<!-- override corner handle (optional)-->
<div slot="handle" />
<!-- override rotation handle (optional)-->
<div slot="rotator" />
</FreeTransform>
</div>
<style>
.transform-area {
position: relative;
}
</style>
We can also wrap the <FreeTransform /> element in another div (for example, if we want to apply Svelte animations), and instead transform that wrapper element:
<script>
import FreeTransform from 'svelte-free-transform';
</script>
<div class="transform-area">
<div
bind:this={wrapper}
style={myPosition.style}
>
<FreeTransform
bind:position={myPosition}
target={wrapper}
handleMode="resize"
rotatorEnabled
rotatorBar
>
<content />
</FreeTransform>
</div>
</div>
<style>
.transform-area {
position: relative;
}
</style>
Props
| Prop | Type | Possible Values | Default |
|---|---|---|---|
| position | {x, y, w, h, r, style } |
x, y, w, h = position, width and height in pixels. r = rotation in radians. style = css inline style string representing the applied transform | { x: 0, y: 0, w: 100, h: 100, r: 0 } |
| target | DOM Element | the element to transform | this element |
| container | DOM Element | nearest positioned ancestor of the target element | immediate parent of the target element |
| handleMode | String | 'resize' or 'rotate' | 'resize' |
| rotatorEnabled | Boolean | Show a separate handle for rotation? | false |
| rotatorBar | Boolean | Draw a line from the rotation handle to the frame? | false |
| lockAspect | Boolean | Keep a fixed aspect ratio? | false |
| lockTouchResize | Boolean | Allow resizing via multitouch gesture? | false |
Styling
Style the frame border by overriding the --frameBorder CSS variable:
<style>
.transform-area {
--frameBorder: 1px solid lime;
}
</style>
License
