change the implement of freeze-vertical

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-krpano",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "",
   "main": "dist/vue-krpano.common.js",
   "scripts": {

src/features/freezeVertical.js

@@ -3,64 +3,87 @@
  */
 "use strict";
 
-function touchstart(e) {
-
-    let touch = e.changedTouches[0];
-    this.touchOrigin = {
-        x: touch.clientX,
-        y: touch.clientY
-    };
-}
-
-function touchmove(e) {
-
-    e.stopPropagation();
-
-    let touch = e.changedTouches[0];
-    let current = {
-        x: touch.clientX,
-        y: touch.clientY
-    };
-    let deltaX = this.touchOrigin.x - current.x;
-    let deltaY = this.touchOrigin.y - current.y;
-    window.scrollBy(0, deltaY);
-
-    let vlookat = this.get("view.vlookat");
-    let hlookat = this.get("view.hlookat") + deltaX;
-    this.call(`lookat(${hlookat},${vlookat})`);
-
-    this.touchOrigin = current;
-
-}
-
 let config = {
     props: {
         freezeVertical: {
             type: Boolean,
             default: false
         }
     },
-    methods: {
-        setVerticalFreeze(freeze){
-            if (freeze) {
-                this.krpanoObj.addEventListener("touchstart", touchstart, true);
-                this.krpanoObj.addEventListener("touchmove", touchmove, true);
-                this.log("vertical freeze");
-            } else {
-                this.krpanoObj.removeEventListener("touchstart", touchstart, true);
-                this.krpanoObj.removeEventListener("touchmove", touchmove, true);
-                this.log("vertical release");
-            }
+    data(){
+        return {
+            eventDelegate: undefined
         }
     },
+    methods: {},
     watch: {
         freezeVertical(val){
-            this.setVerticalFreeze(val)
+            if (this.eventDelegate) {
+                if (val) {
+                    this.eventDelegate.style.display = "block";
+                    let hlookat = this.krpanoObj.get("view.hlookat");
+                    this.krpanoObj.call(`lookat(${hlookat},0)`);
+                } else {
+                    this.eventDelegate.style.display = "none";
+                }
+            }
         }
     },
     created(){
-        this.$on("panoCreated", () => {
-            this.setVerticalFreeze(this.freezeVertical);
+        this.$on("panoCreated", krpano => {
+
+            let origin = krpano.firstChild;
+
+            let eventDelegate = document.createElement("DIV");
+            eventDelegate.className = "event-delegate";
+            Object.assign(eventDelegate.style, {
+                display: this.freezeVertical ? "block" : "none",
+                width: "100%",
+                height: "100%",
+                position: "absolute",
+                "user-select": "none",
+                "z-index": 1
+            });
+            krpano.appendChild(eventDelegate);
+            this.eventDelegate = eventDelegate;
+
+            let originTouch;
+
+            eventDelegate.addEventListener("touchstart", function (e) {
+                originTouch = e;
+                Object.defineProperty(e, "cancelable", {value: true});
+                let event = new TouchEvent("touchstart", e);
+                return origin.dispatchEvent(event);
+            });
+
+            eventDelegate.addEventListener("touchend", function (e) {
+                Object.defineProperty(e, "cancelable", {value: true});
+                let event = new TouchEvent("touchend", e);
+                return origin.dispatchEvent(event);
+            });
+
+            eventDelegate.addEventListener("touchmove", function (e) {
+
+                let currentTouch = e.changedTouches[0];
+                let deltaX = originTouch.clientX - currentTouch.clientX;
+                let hlookat = krpano.get("view.hlookat") + deltaX;
+                let vlookat = krpano.get("view.vlookat");
+                krpano.call(`lookat(${hlookat},${vlookat})`);
+
+                originTouch = currentTouch;
+
+                return true;
+            });
+
+            eventDelegate.addEventListener("mousedown", function (e) {
+                Object.defineProperty(e, "cancelable", {value: true});
+                return origin.dispatchEvent(new MouseEvent("mousedown", e));
+            });
+
+            eventDelegate.addEventListener("mousewheel", function (e) {
+                Object.defineProperty(e, "cancelable", {value: true});
+                return origin.dispatchEvent(new MouseEvent("mousewheel", e));
+            });
         });
     }
 };