<template>
    <div class="row">
        <div class="col-4">
            <div class="row">
                <div class="col-6"></div>
                <div class="col-3"><q-input filled type="number" class="q-pt-md" @focus="isactivearray[0] = false"
                        :dense="true" v-model="nine[0].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[0] = false" :dense="true"
                        v-model="nine[0].y" label="y" lazy-rules />
                    <q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
                </div>
            </div>
        </div>
        <div class="col-4">

            <div class="row">
                <div class="col-5"></div>
                <div class="col-3"> <q-input filled type="number" class="q-pt-md" @focus="isactivearray[1] = false"
                        :dense="true" v-model="nine[1].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[1] = false" :dense="true"
                        v-model="nine[1].y" label="y" lazy-rules />
                    <q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
                </div>

                <div class="col-3" style="margin-left: 5px;"> <q-input filled type="number" class="q-pt-md"
                        :dense="true" v-model="nine[4].x" label="x" @focus="isactivearray[4] = false" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" :dense="true" v-model="nine[4].y" label="y"
                        @focus="isactivearray[4] = false" lazy-rules />
                    <q-btn color="white" @click="reset(4)" text-color="black" :label="$t('reset')" />
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-4"></div>
                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[2] = false" class="q-pt-md"
                        :dense="true" v-model="nine[2].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[2] = false" :dense="true"
                        v-model="nine[2].y" label="y" lazy-rules />
                    <q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
                </div>
            </div>

        </div>
        <div class="col-2">
            <div class="row" style="margin-top: 10vh;">
                <div class="col-6"></div>
                <div class="col-6"> <q-input filled type="number" @focus="isactivearray[3] = false" class="q-pt-md"
                        :dense="true" v-model="nine[3].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[3] = false" :dense="true"
                        v-model="nine[3].y" label="y" lazy-rules />
                    <q-btn color="white"  @click="reset(3)" text-color="black" :label="$t('reset')" />
                </div>
            </div>

        </div>
        <div class="col-8">
            <div ref="div" style="background-color: #7fffd4;height: 40vh;">
                <div style="position:absolute;">
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[0]" :w="30" :h="20" :x="ninepostion[0].x"
                        :y="ninepostion[0].y" @mousedown="activeMouseDown(0)" :isResizable="false"
                        @moveHandler="moveHandler_1"><span>{{ $t('point') }}1</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[1]" :w="30" :h="20" :x="ninepostion[1].x"
                        :y="ninepostion[1].y" @mousedown="activeMouseDown(1)" :isResizable="false"
                        @moveHandler="moveHandler_2"><span>{{ $t('point') }}2</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[2]" :w="30" :h="20" :x="ninepostion[2].x"
                        :y="ninepostion[2].y" @mousedown="activeMouseDown(2)" :isResizable="false"
                        @moveHandler="moveHandler_3"><span>{{ $t('point') }}3</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[3]" :w="30" :h="20" :x="ninepostion[3].x"
                        :y="ninepostion[3].y" @mousedown="activeMouseDown(3)" :isResizable="false"
                        @moveHandler="moveHandler_4"><span>{{ $t('point') }}4</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[4]" :w="30" :h="20" :x="ninepostion[4].x"
                        :y="ninepostion[4].y" @mousedown="activeMouseDown(4)" :isResizable="false"
                        @moveHandler="moveHandler_5"><span>{{ $t('point') }}5</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[5]" :w="30" :h="20" :x="ninepostion[5].x"
                        :y="ninepostion[5].y" @mousedown="activeMouseDown(5)" :isResizable="false"
                        @moveHandler="moveHandler_6"><span>{{ $t('point') }}6</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[6]" :w="30" :h="20" :x="ninepostion[6].x"
                        :y="ninepostion[6].y" @mousedown="activeMouseDown(6)" :isResizable="false"
                        @moveHandler="moveHandler_7"><span>{{ $t('point') }}7</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[7]" :w="30" :h="20" :x="ninepostion[7].x"
                        :y="ninepostion[7].y" @mousedown="activeMouseDown(7)" :isResizable="false"
                        @moveHandler="moveHandler_8"><span>{{ $t('point') }}8</span> </vue3ResizeDrag>
                    <vue3ResizeDrag :isActive="true" v-if="isshowarray[8]" :w="30" :h="20" :x="ninepostion[8].x"
                        :y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false"
                        @moveHandler="moveHandler_9"><span>{{ $t('point') }}9</span> </vue3ResizeDrag>
                </div>

            </div>
        </div>
        <div class="col-2">
            <div class="row" style="margin-top: 10vh;">
                <div class="col-6"> <q-input filled type="number" @focus="isactivearray[5] = false" class="q-pt-md"
                        :dense="true" v-model="nine[5].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[5] = false" :dense="true"
                        v-model="nine[5].y" label="y" lazy-rules />
                    <q-btn color="white" @click="reset(5)" text-color="black" :label="$t('reset')" />
                </div>
            </div>

        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6"> <q-btn color="white"   @click="resetall" text-color="black"
                        :label="$t('resetall')" /><q-btn color="white" @click="save" text-color="black"
                        :label="$t('save config')" /></div>
                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[6] = false" class="q-pt-md"
                        :dense="true" v-model="nine[6].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[6] = false" :dense="true"
                        v-model="nine[6].y" label="y" lazy-rules />
                    <q-btn color="white" @click="reset(6)" text-color="black" :label="$t('reset')" />
                </div>
            </div>

        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-6"></div>
                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[7] = false" class="q-pt-md"
                        :dense="true" v-model="nine[7].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[7] = false" :dense="true"
                        v-model="nine[7].y" label="y" lazy-rules />
                    <q-btn color="white" @click="reset(7)" text-color="black" :label="$t('reset')" />
                </div>
            </div>

        </div>
        <div class="col-4">
            <div class="row">
                <div class="col-4"></div>
                <div class="col-3"> <q-input filled type="number" @focus="isactivearray[8] = false" class="q-pt-md"
                        :dense="true" v-model="nine[8].x" label="x" lazy-rules />
                    <q-input filled type="number" class="q-pt-md" @focus="isactivearray[8] = false" :dense="true"
                        v-model="nine[8].y" label="y" lazy-rules />
                    <q-btn color="white" @click="reset(8)" text-color="black" :label="$t('reset')" />
                </div>
            </div>

        </div>
    </div>
</template>

<style scoped>

</style>
<script lang="ts">
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
import GlobalData from "src/common/GlobalData";
import { defineComponent, ref, watch, computed, defineProps, withDefaults, onMounted } from "vue";
import { useStore } from "src/store";
import { useI18n } from "vue-i18n";


export default defineComponent({
    name: "ComponentSurfaceCorrection",
    components: {
        vue3ResizeDrag
    },
    setup() {
        let $store = useStore();
        let $t = useI18n();
        const setIndexProjector = () => {
            console.log($store.state.selected_projector);
        };
        let Proportion = ref({ x: 0, y: 0 });
        let centor = ref({ x: 0, y: 0 });
        const div = ref();
        let nine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
        let defaultnine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
        ///
        const activeMouseDown = (index: number) => {
            isactivearray.value[index] = true
        }
        const isshowarray = ref([true, true, true, true, true, true, true, true, true,])
        const isactivearray = ref([true, true, true, true, true, true, true, true, true,])
        let ninepostion: any = ref([{ x: 0, y: 1920 }, { x: 960, y: 1920 }, { x: 1080, y: 1920 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1080, y: 540 }, { x: 0, y: 0 }, { x: 540, y: 0 }, { x: 1080, y: 0 }]);
        let defaultninepostion: any = ref([{ x: 0, y: 1920 }, { x: 960, y: 1920 }, { x: 1080, y: 1920 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1080, y: 540 }, { x: 0, y: 0 }, { x: 540, y: 0 }, { x: 1080, y: 0 }]);
        const moveHandler_1 = (data: any) => {
            let x = Math.ceil((data.left - ninepostion.value[0].x) * Proportion.value.x);
            let y = 1080 - Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);

            nine.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_2 = (data: any) => {
            let x = 960 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x);
            let y = 1080 - Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.y);

            nine.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_3 = (data: any) => {
            let x = 1920 + Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x);
            let y = 1080 - Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);

            nine.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_4 = (data: any) => {
            let x = Math.ceil((data.left - ninepostion.value[3].x) * Proportion.value.x);
            let y = 530 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);

            nine.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_5 = (data: any) => {
            let x = 960 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x);
            let y = 530 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);

            nine.value[4].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[4].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_6 = (data: any) => {
            let x = 1920 + Math.ceil((data.left - ninepostion.value[5].x) * Proportion.value.x);
            let y = 530 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);

            nine.value[5].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[5].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_7 = (data: any) => {
            let x = Math.ceil((data.left - ninepostion.value[6].x) * Proportion.value.x);
            let y = Math.abs(Math.ceil((data.top - ninepostion.value[6].y) * Proportion.value.y));

            nine.value[6].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[6].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_8 = (data: any) => {
            let x = 960 + Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x);
            let y = Math.abs(Math.ceil((data.top - ninepostion.value[7].y) * Proportion.value.y));;

            nine.value[7].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[7].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        const moveHandler_9 = (data: any) => {
            let x = 1920 + Math.ceil((data.left - ninepostion.value[8].x) * Proportion.value.x);
            let y = Math.abs(Math.ceil((data.top - ninepostion.value[8].y) * Proportion.value.y));

            nine.value[8].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
            nine.value[8].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
        }
        onMounted(() => {
            startpostion();

        })
        const startpostion = () => {
            ninepostion.value[0].x = 0
            ninepostion.value[0].y = 0

            ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
            ninepostion.value[1].y = 0

            ninepostion.value[2].x = div.value.offsetWidth - 25
            ninepostion.value[2].y = 0

            ninepostion.value[3].x = 0
            ninepostion.value[3].y = div.value.offsetHeight / 2 - 8

            ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
            ninepostion.value[4].y = div.value.offsetHeight / 2 - 8

            ninepostion.value[5].x = div.value.offsetWidth - 25
            ninepostion.value[5].y = div.value.offsetHeight / 2

            ninepostion.value[6].x = 0
            ninepostion.value[6].y = div.value.offsetHeight - 25

            ninepostion.value[7].x = div.value.offsetWidth / 2 - 8
            ninepostion.value[7].y = div.value.offsetHeight - 25

            ninepostion.value[8].x = div.value.offsetWidth - 25
            ninepostion.value[8].y = div.value.offsetHeight - 25

            Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
            Proportion.value.y = 1080 / (div.value.offsetHeight - 25)

            centor.value.x = 2160 / (div.value.offsetWidth + 25)
            centor.value.y = 3840 / (div.value.offsetHeight + 25)

            for (let index = 0; index < defaultninepostion.value.length; index++) {
                defaultninepostion.value[index].x = ninepostion.value[index].x;
                defaultninepostion.value[index].y = ninepostion.value[index].y;
                defaultnine.value[index].x = nine.value[index].x
                defaultnine.value[index].y = nine.value[index].y
            }


        }
        ///
        const reset = (index: number) => {
            if (index == 0 || index == -1) {
                nine.value[0].x = 0
                nine.value[0].y = 1080
                ninepostion.value[0].x = 0
                ninepostion.value[0].y = 0
            }
            if (index == 1 || index == -1) {
                nine.value[1].x = 960
                nine.value[1].y = 1080
                ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
                ninepostion.value[1].y = 0
            }
            if (index == 2 || index == -1) {
                nine.value[2].x = 1920
                nine.value[2].y = 1080
                ninepostion.value[2].x = div.value.offsetWidth - 25
                ninepostion.value[2].y = 0
            }
            if (index == 3 || index == -1) {
                nine.value[3].x = 0
                nine.value[3].y = 540
                ninepostion.value[3].x = 0
                ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
            }
            if (index == 4 || index == -1) {
                nine.value[4].x = 960
                nine.value[4].y = 540
                ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
                ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
            }
            if (index == 5 || index == -1) {
                nine.value[5].x = 1920
                nine.value[5].y = 540

                ninepostion.value[5].x = div.value.offsetWidth - 25
                ninepostion.value[5].y = div.value.offsetHeight / 2
            }
            if (index == 6 || index == -1) {
                nine.value[6].x = 0
                nine.value[6].y = 0

                ninepostion.value[6].x = 0
                ninepostion.value[6].y = div.value.offsetHeight - 25
            }
            if (index == 7 || index == -1) {
                nine.value[7].x = 960
                nine.value[7].y = 0
                ninepostion.value[7].x = div.value.offsetWidth / 2
                ninepostion.value[7].y = div.value.offsetHeight - 25
            }
            if (index == 8 || index == -1) {
                nine.value[8].x = 1920
                nine.value[8].y = 0

                ninepostion.value[8].x = div.value.offsetWidth - 25
                ninepostion.value[8].y = div.value.offsetHeight - 25
            }
            isshowarray.value[index] = false
            setTimeout(() => {
                isshowarray.value[index] = true
            }, 100);
        }
        const resetall = () => {
            for (let index = 0; index < nine.value.length; index++) {

                ninepostion.value[index].x = defaultninepostion.value[index].x;
                ninepostion.value[index].y = defaultninepostion.value[index].y;
                nine.value[index].x = defaultnine.value[index].x
                nine.value[index].y = defaultnine.value[index].y


                isshowarray.value[index] = false
                setTimeout(() => {
                    isshowarray.value[index] = true
                }, 100);
            }
        }
        ///
        watch(() => nine.value[0], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
            ///
            if (!isactivearray.value[0]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(0, x, y)
            }
            ///
        }, { deep: true })
        watch(() => nine.value[1], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 2, Number(newVal.x), Number(newVal.y));
            ///
            if (!isactivearray.value[1]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(1, x, y)
            }
            ///
        }, { deep: true })
        watch(() => nine.value[2], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 3, Number(newVal.x), Number(newVal.y));
            if (!isactivearray.value[2]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(2, x, y)
            }
        }, { deep: true })
        watch(() => nine.value[3], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 4, Number(newVal.x), Number(newVal.y));
            if (!isactivearray.value[3]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(3, x, y)
            }
        }, { deep: true })
        watch(() => nine.value[4], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
            if (!isactivearray.value[4]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(4, x, y)
            }
        }, { deep: true })
        watch(() => nine.value[5], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
            if (!isactivearray.value[5]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(5, x, y)
            }
        }, { deep: true })
        watch(() => nine.value[6], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
            if (!isactivearray.value[6]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(6, x, y)
            }
        }, { deep: true })
        watch(() => nine.value[7], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
            if (!isactivearray.value[7]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(7, x, y)
            }
        }, { deep: true })
        watch(() => nine.value[8], (newVal, oldVal) => {
            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
            if (!isactivearray.value[8]) {
                let x = Math.ceil(newVal.x / Proportion.value.x);
                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
                setdianposin(8, x, y)
            }
        }, { deep: true })
        ///
        let model = ref(null);
        let options = ref(['10', '20', '30', '40', '50']);
        let set = GlobalData.getInstance().getCurrentClient();
        const setdianposin = (index: number, x: number, y: number) => {
            ninepostion.value[index].x = x
            ninepostion.value[index].y = y
            isshowarray.value[index] = false
            isactivearray.value[index] = false
            setTimeout(() => {
                isshowarray.value[index] = true
            }, 100);



        }
        const save = () => {

        }
        return {
            model,
            options,
            save,
            nine,
            moveHandler_1,
            moveHandler_2,
            moveHandler_3,
            moveHandler_4,
            moveHandler_5,
            moveHandler_6,
            moveHandler_7,
            moveHandler_8,
            moveHandler_9,
            div,
            resetall,
            ninepostion,
            reset,
            isshowarray,
            isactivearray,
            activeMouseDown
        };
    },
});
</script>