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.

Try out a demo!

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

MIT