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

Styling

Style the frame border by overriding the --frameBorder CSS variable:

<style>
  .transform-area {
    --frameBorder: 1px solid lime;
  }
</style>

License

MIT