feat: add svelte-axes

[malangfox]

Details

This adds svelte-axes which provides useAxes that can be used in svelte. Also this changes to use cfcs throughout the project.

Example

<script>
  import { onMount } from "svelte";
  import { useAxes, PanInput } from "./svelte-axes";

  let area;
  const { connect, rotateX, rotateY } = useAxes(
  {
    rotateX: {
      range: [0, 360],
      circular: true,
      startPos: 40,
    },
    rotateY: {
      range: [0, 360],
      circular: true,
      startPos: 315,
    },
  },
  {
    deceleration: 0.0024,
  });

  onMount(() => {
    connect("rotateX rotateY", new PanInput(area));
  });
</script>
<div class="App">
  <div id="area" bind:this={area} style="transform: rotateY({rotateX}deg) rotateX({rotateY}deg)">
    <div id="item"></div>
  </div>
</div>