vue-pixijs Directives

## Directives

import { RendererElement, App } from "vue";
import { InteractionEvent,DisplayObject } from "pixi.js";

function getDirectives(app: App<RendererElement>): void{
    app.directive('pointerdown', {
        mounted(el: DisplayObject, binding: any) {
            el.interactive = true;
            el.buttonMode = true;
            el.on(
                "pointerdown",
                () => {
                    binding.value(el)
                }
            );
        }
    })
    app.directive('drag', {
        mounted(el: DisplayObject) {
            el.interactive = true;
            el.buttonMode = true;
            let dragFlag = false;
            let startPoint: any;
            el.on("mousedown", (event: InteractionEvent) => {
                dragFlag = true
                startPoint = { x: event.data.global.x, y: event.data.global.y }
            })
            el.on("mousemove", (event: InteractionEvent) => {
                if (dragFlag) {
                    const dx = event.data.global.x - startPoint.x;
                    const dy = event.data.global.y - startPoint.y;
                    el.x += dx;
                    el.y += dy;
                    startPoint = { x: event.data.global.x, y: event.data.global.y }
                }
            })
            el.on("mouseup", () => {
                dragFlag = false
            })
        }
    })
    app.directive('pointRotate', {
        mounted(el: DisplayObject, binding: any) {
            const pivotX = binding.value.pivotX
            const pivotY = binding.value.pivotY
            const x = binding.value.x | el.x
            const y = binding.value.y | el.y
            const radius = binding.value.radius
            el.x = (x - pivotX) * Math.cos(radius) -
                (y - pivotY) * Math.sin(radius) +
                pivotX
            el.y = (x - pivotX) * Math.sin(radius) +
                (y - pivotY) * Math.cos(radius) +
                pivotY
        }
    })
    app.directive('mounted', {
        mounted(el: DisplayObject, binding: any) {
            if(typeof binding.value === "object"){
                Object.values(binding.value).forEach((action:any)=>{
                    action(el)
                })
            }
            if (typeof binding.value === "function"){
                binding.value(el)
            }
        }
    })
}

export default getDirectives