From 5604903d183729271f124911ed898fe32e301681 Mon Sep 17 00:00:00 2001
From: Adam Procter <adamprocter@researchnot.es>
Date: Thu, 1 Oct 2020 10:47:51 +0100
Subject: [PATCH] trying new panzoom
not included yet (need to rebranch)
---
app/package-lock.json | 7 ++++-
app/package.json | 1 +
app/src/components/PanzoomLayer.vue | 45 +++++++++++++++++++++++++++++
app/src/views/Home.vue | 4 +++
4 files changed, 56 insertions(+), 1 deletion(-)
create mode 100644 app/src/components/PanzoomLayer.vue
diff --git a/app/package-lock.json b/app/package-lock.json
index 86466c4..1a49c77 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1,6 +1,6 @@
{
"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",
diff --git a/app/package.json b/app/package.json
index b7a3ae0..6673c7a 100644
--- a/app/package.json
+++ b/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",
diff --git a/app/src/components/PanzoomLayer.vue b/app/src/components/PanzoomLayer.vue
new file mode 100644
index 0000000..1a01c5e
--- /dev/null
+++ b/app/src/components/PanzoomLayer.vue
@@ -0,0 +1,45 @@
+<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>
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 479be77..1d5d534 100644
--- a/app/src/views/Home.vue
+++ b/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,
--
GitLab