feat: add vue2-axes

[malangfox]

Details

This adds vue2-axes which provides useAxes hook that can be used in vue 2.

Example

<template>
  <div class="App">
    <div id="area" ref="area">
      <div id="box" ref="box" :style="{ transform: `rotateY(${axes.rotateX.value}deg) rotateX(${axes.rotateY.value}deg)` }"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from "@vue/composition-api";
import { PanInput, useAxes } from "../src";

export default defineComponent({
  name: "App",
  setup() {
    const area = ref(null);
    const axes = useAxes(
    {
      rotateX: {
        range: [0, 360],
        circular: true,
        startPos: 40,
      },
      rotateY: {
        range: [0, 360],
        circular: true,
        startPos: 315,
      },
    },
    {
      deceleration: 0.0024,
    });

    onMounted(() => {
      axes.connect("rotateX rotateY", new PanInput(area));
    })

    return {
      area,
      axes,
    };
  },
});
</script>

[daybrush]

It seems pretty and convenient to declare react and vue hooks examples in a spread format if possible.

And there is no need to use value in template.

<div id="box" ref="box" :style="{ transform: `rotateY(${rotateX}deg) rotateX(${rotateY}deg)` }">

const {
    rotateX,
    rotateY,

    connect,
    onHold,
 = useAxes();

return {
   rotateX,
   rotateY,
};