trying new panzoom

not included yet (need to rebranch)

app/package-lock.json

 {
   "name": "nodenogg.in",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1761,6 +1761,11 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@panzoom/panzoom": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@panzoom/panzoom/-/panzoom-4.3.2.tgz",
+      "integrity": "sha512-6D4UDsYXowzMJ/1XSbylRj9BGhCR7mQQ5m/s6MiKx11ThLcEiU4kgq59vhS8+RnOGA789FcdmGvK1/hIxyRD+w=="
+    },
     "@pixi/accessibility": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-5.3.3.tgz",

app/package.json

@@ -9,6 +9,7 @@
     "lint:fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
+    "@panzoom/panzoom": "^4.3.2",
     "core-js": "^3.6.5",
     "file-loader": "^6.1.0",
     "ipfs": "^0.50.0",

app/src/components/PanzoomLayer.vue

+<template>
+  <div>
+    <div v-if="mode == 'move'" style="overflow: hidden">
+      <div id="panzoom-element">
+        <slot />
+      </div>
+    </div>
+
+    <div v-else>
+      <div>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Panzoom from '@panzoom/panzoom'
+import { mapState } from 'vuex'
+
+export default {
+  props: {
+    options: { type: Object, default: () => {} },
+  },
+
+  created() {},
+
+  // FIX: ONLY FIRES ONCE
+  mounted() {
+    this.panzoom = Panzoom(document.getElementById('panzoom-element'))
+    document.addEventListener('wheel', this.panzoom.zoomWithWheel)
+    document.addEventListener('wheel', function (event) {
+      if (!event.shiftKey) return
+      this.panzoom.zoomWithWheel(event)
+    })
+  },
+  computed: {
+    ...mapState({
+      mode: (state) => state.ui.mode,
+    }),
+  },
+  methods: {},
+}
+
+// This demo binds to shift + wheel
+</script>

app/src/views/Home.vue

@@ -28,6 +28,7 @@
 
     <div class="online" v-else>
       <div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
+        <!-- <PanzoomLayer> -->
         <PanZoomContainer
           v-bind:width="width"
           v-bind:height="height"
@@ -75,6 +76,7 @@
             <ConnectionsLayer />
           </div>
           <ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
+          <!-- </PanzoomLayer> -->
         </PanZoomContainer>
         <!-- <ToolBar /> -->
         <ModeToolbar
@@ -102,6 +104,7 @@ import PanZoomContainer from '@/experimental/PanZoomContainer'
 import ConnectionsLayer from '@/components/ConnectionsLayer'
 import NodesLayer from '@/components/NodesLayer'
 import OffLine from '@/components/OffLine'
+// import PanzoomLayer from '@/components/PanzoomLayer'
 // import ToolBar from '@/components/ToolBar'
 import ScribbleLayer from '@/components/ScribbleLayer'
 import UploadLayer from '@/components/UploadLayer'
@@ -220,6 +223,7 @@ export default {
   components: {
     ModeToolbar,
     ViewToolbar,
+    //PanzoomLayer,
     PanZoomContainer,
     // SelectionLayer,
     NodesLayer,