naver / egjs-axes

A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates.
https://naver.github.io/egjs-axes/
MIT License
179 stars 32 forks source link

feat: add vue-axes for vue 3 #194

Closed malangfox closed 2 years ago

malangfox commented 2 years ago

Details

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

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";
import { PanInput, useAxes } from "./vue-axes";

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 commented 2 years ago

The connect method part contains axes. in the readme of all frameworks.