From 6874b54fb4dae28f7401805e4bebe1d084a9e9ee Mon Sep 17 00:00:00 2001
From: Ivan Alexandrov <ivan@alexandrov.online>
Date: Tue, 27 Apr 2021 17:40:50 +0200
Subject: [PATCH] Refactor tabletop zoom

---
 package-lock.json           | 213 ------------------------------------
 package.json                |   1 -
 src/components/Tabletop.vue |  85 ++++++--------
 3 files changed, 36 insertions(+), 263 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12d21af..c02574d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
         "core-js": "^3.6.5",
         "firebase": "^8.4.2",
         "interactjs": "^1.10.11",
-        "pan-zoom": "^3.5.2",
         "shortid": "^2.2.16",
         "shuffle-array": "^1.0.1",
         "vue": "^2.6.11",
@@ -5888,11 +5887,6 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
-    "node_modules/dprop": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dprop/-/dprop-1.0.0.tgz",
-      "integrity": "sha1-X0WmCmD6OsHQ9otrQ1gx8v9mVGg="
-    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -6504,14 +6498,6 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true
     },
-    "node_modules/events": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/eventsource": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
@@ -7401,11 +7387,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "node_modules/gl-vec2": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/gl-vec2/-/gl-vec2-1.3.0.tgz",
-      "integrity": "sha512-YiqaAuNsheWmUV0Sa8k94kBB0D6RWjwZztyO+trEYS8KzJ6OQB/4686gdrf59wld4hHFIvaxynO3nRxpk1Ij/A=="
-    },
     "node_modules/glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -7665,14 +7646,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/has-passive-events": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-passive-events/-/has-passive-events-1.0.0.tgz",
-      "integrity": "sha512-2vSj6IeIsgvsRMyeQ0JaCX5Q3lX4zMn5HpoVc7MEhQ6pv8Iq9rsXjsp+E5ZwaT7T0xhMT0KmU8gtt1EFVdbJiw==",
-      "dependencies": {
-        "is-browser": "^2.0.1"
-      }
-    },
     "node_modules/has-symbol-support-x": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
@@ -8244,14 +8217,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/impetus": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/impetus/-/impetus-0.8.8.tgz",
-      "integrity": "sha512-7ejVjFxRAiBlnZQbdNGzUGgxMvLjVke/QNP2TFN/VK8baASsuRiE8YuSbD0qyiU8Pae+w95De4ZYz+rxSo5FJw==",
-      "engines": {
-        "npm": ">=2.13.0"
-      }
-    },
     "node_modules/import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -8703,11 +8668,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-browser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-browser/-/is-browser-2.1.0.tgz",
-      "integrity": "sha512-F5rTJxDQ2sW81fcfOR1GnCXT6sVJC104fCyfj+mjpwNEwaPYSn5fte5jiHmBg3DHsIoL/l8Kvw5VN5SsTRcRFQ=="
-    },
     "node_modules/is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -9991,21 +9951,6 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/mouse-event-offset": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mouse-event-offset/-/mouse-event-offset-3.0.2.tgz",
-      "integrity": "sha1-39hqbiSMa6jK1TuQXVA3ogY+mYQ="
-    },
-    "node_modules/mouse-wheel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mouse-wheel/-/mouse-wheel-1.2.0.tgz",
-      "integrity": "sha1-bSkDseqPtI5h8bU7kDZ3PwQs21w=",
-      "dependencies": {
-        "right-now": "^1.0.0",
-        "signum": "^1.0.0",
-        "to-px": "^1.0.1"
-      }
-    },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10850,18 +10795,6 @@
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
-    "node_modules/pan-zoom": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/pan-zoom/-/pan-zoom-3.5.2.tgz",
-      "integrity": "sha512-6lrRfTo04RHxbk6rfuu0C9yrLaof6FOTkcBETr+PWw2czGJV+8JraQE1bU2NwM15B0tWxYTzKD1abxIH57rf4Q==",
-      "dependencies": {
-        "has-passive-events": "^1.0.0",
-        "impetus": "^0.8.8",
-        "mouse-wheel": "^1.2.0",
-        "touch-pinch": "^1.0.1",
-        "touch-position": "^2.0.0"
-      }
-    },
     "node_modules/parallel-transform": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
@@ -10929,11 +10862,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/parse-unit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz",
-      "integrity": "sha1-fhu21b7zh0wo45JSaiVBFwKR7s8="
-    },
     "node_modules/parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -12555,11 +12483,6 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
-    "node_modules/right-now": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/right-now/-/right-now-1.0.0.tgz",
-      "integrity": "sha1-bolgne69fc2vja7Mmuo5z1haCRg="
-    },
     "node_modules/rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -13073,11 +12996,6 @@
       "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
       "dev": true
     },
-    "node_modules/signum": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/signum/-/signum-1.0.0.tgz",
-      "integrity": "sha1-dKfSvyogtA66FqkrFSEk8dVZ+nc="
-    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -14196,14 +14114,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/to-px": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/to-px/-/to-px-1.1.0.tgz",
-      "integrity": "sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==",
-      "dependencies": {
-        "parse-unit": "^1.0.1"
-      }
-    },
     "node_modules/to-regex": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
@@ -14247,26 +14157,6 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
-    "node_modules/touch-pinch": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/touch-pinch/-/touch-pinch-1.0.1.tgz",
-      "integrity": "sha1-UvKu7iYxOXMFcNDM341EOpKzs20=",
-      "dependencies": {
-        "dprop": "^1.0.0",
-        "events": "^1.0.2",
-        "gl-vec2": "^1.0.0",
-        "mouse-event-offset": "^3.0.2"
-      }
-    },
-    "node_modules/touch-position": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/touch-position/-/touch-position-2.0.0.tgz",
-      "integrity": "sha1-26fMf26PoZKIFS0inhW33FyCQoY=",
-      "dependencies": {
-        "events": "^1.0.2",
-        "mouse-event-offset": "^3.0.2"
-      }
-    },
     "node_modules/tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -21337,11 +21227,6 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
-    "dprop": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dprop/-/dprop-1.0.0.tgz",
-      "integrity": "sha1-X0WmCmD6OsHQ9otrQ1gx8v9mVGg="
-    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -21814,11 +21699,6 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true
     },
-    "events": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
-      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
-    },
     "eventsource": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
@@ -22537,11 +22417,6 @@
         "assert-plus": "^1.0.0"
       }
     },
-    "gl-vec2": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/gl-vec2/-/gl-vec2-1.3.0.tgz",
-      "integrity": "sha512-YiqaAuNsheWmUV0Sa8k94kBB0D6RWjwZztyO+trEYS8KzJ6OQB/4686gdrf59wld4hHFIvaxynO3nRxpk1Ij/A=="
-    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -22749,14 +22624,6 @@
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
-    "has-passive-events": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-passive-events/-/has-passive-events-1.0.0.tgz",
-      "integrity": "sha512-2vSj6IeIsgvsRMyeQ0JaCX5Q3lX4zMn5HpoVc7MEhQ6pv8Iq9rsXjsp+E5ZwaT7T0xhMT0KmU8gtt1EFVdbJiw==",
-      "requires": {
-        "is-browser": "^2.0.1"
-      }
-    },
     "has-symbol-support-x": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
@@ -23205,11 +23072,6 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
-    "impetus": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/impetus/-/impetus-0.8.8.tgz",
-      "integrity": "sha512-7ejVjFxRAiBlnZQbdNGzUGgxMvLjVke/QNP2TFN/VK8baASsuRiE8YuSbD0qyiU8Pae+w95De4ZYz+rxSo5FJw=="
-    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -23553,11 +23415,6 @@
         "call-bind": "^1.0.0"
       }
     },
-    "is-browser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-browser/-/is-browser-2.1.0.tgz",
-      "integrity": "sha512-F5rTJxDQ2sW81fcfOR1GnCXT6sVJC104fCyfj+mjpwNEwaPYSn5fte5jiHmBg3DHsIoL/l8Kvw5VN5SsTRcRFQ=="
-    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -24571,21 +24428,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "mouse-event-offset": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/mouse-event-offset/-/mouse-event-offset-3.0.2.tgz",
-      "integrity": "sha1-39hqbiSMa6jK1TuQXVA3ogY+mYQ="
-    },
-    "mouse-wheel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mouse-wheel/-/mouse-wheel-1.2.0.tgz",
-      "integrity": "sha1-bSkDseqPtI5h8bU7kDZ3PwQs21w=",
-      "requires": {
-        "right-now": "^1.0.0",
-        "signum": "^1.0.0",
-        "to-px": "^1.0.1"
-      }
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -25257,18 +25099,6 @@
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
-    "pan-zoom": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/pan-zoom/-/pan-zoom-3.5.2.tgz",
-      "integrity": "sha512-6lrRfTo04RHxbk6rfuu0C9yrLaof6FOTkcBETr+PWw2czGJV+8JraQE1bU2NwM15B0tWxYTzKD1abxIH57rf4Q==",
-      "requires": {
-        "has-passive-events": "^1.0.0",
-        "impetus": "^0.8.8",
-        "mouse-wheel": "^1.2.0",
-        "touch-pinch": "^1.0.1",
-        "touch-position": "^2.0.0"
-      }
-    },
     "parallel-transform": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
@@ -25329,11 +25159,6 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
-    "parse-unit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz",
-      "integrity": "sha1-fhu21b7zh0wo45JSaiVBFwKR7s8="
-    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
@@ -26702,11 +26527,6 @@
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
       "dev": true
     },
-    "right-now": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/right-now/-/right-now-1.0.0.tgz",
-      "integrity": "sha1-bolgne69fc2vja7Mmuo5z1haCRg="
-    },
     "rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -27122,11 +26942,6 @@
       "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
       "dev": true
     },
-    "signum": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/signum/-/signum-1.0.0.tgz",
-      "integrity": "sha1-dKfSvyogtA66FqkrFSEk8dVZ+nc="
-    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -28066,14 +27881,6 @@
         }
       }
     },
-    "to-px": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/to-px/-/to-px-1.1.0.tgz",
-      "integrity": "sha512-bfg3GLYrGoEzrGoE05TAL/Uw+H/qrf2ptr9V3W7U0lkjjyYnIfgxmVLUfhQ1hZpIQwin81uxhDjvUkDYsC0xWw==",
-      "requires": {
-        "parse-unit": "^1.0.1"
-      }
-    },
     "to-regex": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
@@ -28108,26 +27915,6 @@
       "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk=",
       "dev": true
     },
-    "touch-pinch": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/touch-pinch/-/touch-pinch-1.0.1.tgz",
-      "integrity": "sha1-UvKu7iYxOXMFcNDM341EOpKzs20=",
-      "requires": {
-        "dprop": "^1.0.0",
-        "events": "^1.0.2",
-        "gl-vec2": "^1.0.0",
-        "mouse-event-offset": "^3.0.2"
-      }
-    },
-    "touch-position": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/touch-position/-/touch-position-2.0.0.tgz",
-      "integrity": "sha1-26fMf26PoZKIFS0inhW33FyCQoY=",
-      "requires": {
-        "events": "^1.0.2",
-        "mouse-event-offset": "^3.0.2"
-      }
-    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
diff --git a/package.json b/package.json
index f05125a..1180438 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,6 @@
     "core-js": "^3.6.5",
     "firebase": "^8.4.2",
     "interactjs": "^1.10.11",
-    "pan-zoom": "^3.5.2",
     "shortid": "^2.2.16",
     "shuffle-array": "^1.0.1",
     "vue": "^2.6.11",
diff --git a/src/components/Tabletop.vue b/src/components/Tabletop.vue
index 7ccb9b0..4251c69 100644
--- a/src/components/Tabletop.vue
+++ b/src/components/Tabletop.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tabletop" :style="tabletopStyle">
+  <div class="tabletop" ref="tabletop" :style="tabletopStyle">
     <template v-for="(object, i) in game.objects">
       <!-- card -->
       <div
@@ -123,14 +123,26 @@ export default {
             backgroundImage: this.game.background
               ? `url(${this.game.background.tabletop_url})`
               : "none",
-            transform: "scale(1)",
+            width: this.width + "px",
+            height: this.height + "px",
+            transform: `scale(${this.scale})`,
+            marginLeft: this.left + "px",
+            marginTop: this.top + "px",
+            transformOrigin: `${this.originX}px ${this.originY}px`,
           }
         : {};
     },
   },
   data() {
     return {
-      tabletopCanvas: undefined,
+      tabletopCanvas: null,
+      width: 3000,
+      height: 2000,
+      scale: 1,
+      top: 0,
+      left: 0,
+      originX: 0,
+      originY: 0,
     };
   },
   asyncMethods: {
@@ -154,7 +166,7 @@ export default {
         mutation: "moveObject",
         params: {
           event,
-          scale: this.getTabletopScale(),
+          scale: this.scale,
         },
       });
     },
@@ -192,47 +204,19 @@ export default {
       EventBus.$emit("toggleCardPreview", url);
     },
     tabletopScroll(e) {
-      if (this.tabletopCanvas.options.drag.enabled) {
-        let target = document.querySelector(".tabletop");
-
-        e.preventDefault();
-        let delta = e.ds === undefined ? e.deltaY * -0.001 : e.ds;
-        let scale = this.getTabletopScale();
-        scale += delta;
-        // console.log(scale);
-        if (scale > 0.1 && scale < 3) {
-          let coords = this.getTabletopCoords();
-          target.style.transform = "scale(" + scale + ")";
-          target.style.marginLeft = coords.x + delta * 1500 + "px";
-          target.style.marginTop = coords.y + delta * 1000 + "px";
-        }
+      const wheel = e.deltaY < 0 ? 1 : -1;
+      if ((wheel < 0 && this.scale > 0.3) || (wheel > 0 && this.scale < 5)) {
+        this.originX = e.pageX;
+        this.originY = e.pageY;
+        this.scale += wheel * 0.1;
       }
     },
-    dragTabletop(event) {
-      var target = document.querySelector(".tabletop"),
-        coords = this.getTabletopCoords(),
-        x = coords.x + event.dx,
-        y = coords.y + event.dy;
-      target.style.marginLeft = x + "px";
-      target.style.marginTop = y + "px";
-    },
-    getTabletopScale() {
-      let transform = document.querySelector(".tabletop").style.transform;
-      if (transform === "") transform = "scale(1)";
-      return parseFloat(transform.match(/[\w.-]+/g)[1]);
-    },
-    getTabletopCoords() {
-      let tabletop = document.querySelector(".tabletop");
-      return {
-        x: parseInt(tabletop.style.marginLeft.slice(0, -2) || 0),
-        y: parseInt(tabletop.style.marginTop.slice(0, -2) || 0),
-        rect: tabletop.getBoundingClientRect(),
-      };
+    dragTabletop(e) {
+      this.left += e.dx;
+      this.top += e.dy;
     },
   },
   mounted() {
-    let self = this;
-
     interact(".draggable").draggable({
       ignoreFrom: ".pinned",
       inertia: {
@@ -250,15 +234,15 @@ export default {
     interact(".deck").dropzone({
       accept: ".card",
       overlap: 0.1, //% of element
-      ondragenter: function (event) {
+      ondragenter: (event) => {
         event.target.classList.add("drop-target");
         event.relatedTarget.classList.add("drop-relatedTarget");
       },
-      ondragleave: function (event) {
+      ondragleave: (event) => {
         event.relatedTarget.classList.remove("drop-relatedTarget");
         event.target.classList.remove("drop-target");
       },
-      ondrop: function (event) {
+      ondrop: (event) => {
         event.relatedTarget.classList.remove("drop-relatedTarget");
         event.target.classList.remove("drop-target");
 
@@ -266,16 +250,15 @@ export default {
         let deck = event.target.getAttribute("data-id");
         // self.$store.commit('moveCardToDeck', [card,deck]);
 
-        self.$store.dispatch("lobbyCommitMutation", {
+        this.$store.dispatch("lobbyCommitMutation", {
           mutation: "moveCardToDeck",
           params: [card, deck],
         });
       },
     });
 
-    document
-      .querySelector(".tabletop")
-      .addEventListener("wheel", this.tabletopScroll);
+    document.body.addEventListener("wheel", this.tabletopScroll);
+
     this.tabletopCanvas = interact(".tabletop")
       .draggable({
         ignoreFrom: ".draggable",
@@ -286,13 +269,17 @@ export default {
         onmove: this.tabletopScroll,
       });
   },
+  beforeUnmount() {
+    interact(".tabletop").unset();
+    interact(".deck").unset();
+    interact(".draggable").unset();
+    document.body.removeEventListener("wheel", this.tabletopScroll);
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .tabletop {
-  width: 3000px;
-  height: 2000px;
   box-shadow: 0 0 20px 8px rgba(0, 0, 0, 0.1);
   border-radius: 7px;
   user-select: none;