fixed bug

playground/package.json

@@ -9,9 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@vicons/ionicons5": "^0.12.0",
     "naive-ui": "^2.38.1",
     "vue": "^3.2.37",
-    "zoompinch": "^0.0.6"
+    "zoompinch": "^0.0.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",

playground/src/App.vue

@@ -1,10 +1,12 @@
 <template>
   <div class="root">
+    <nav-bar />
     <playground />
   </div>
 </template>
 
 <script setup lang="ts">
+import NavBar from './components/NavBar.vue';
 import Playground from './components/Playground.vue';
 </script>
 
@@ -13,7 +15,9 @@ import Playground from './components/Playground.vue';
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 20px;
+  padding: 0px;
+  display: grid;
+  grid-template-rows: auto 1fr;
 }
 </style>
 

playground/src/components/NavBar.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="nav-bar">
+    <div class="title">
+      <h1>Zoompinch</h1>
+    </div>
+    <div class="actions">
+      <a href="https://github.com/MauriceConrad/zoompinch" target="_blank">
+        <n-icon size="medium">
+          <logo-github />
+        </n-icon>
+        <span> GitHub </span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LogoGithub } from '@vicons/ionicons5';
+import { NIcon } from 'naive-ui';
+</script>
+
+<style scoped lang="scss">
+.nav-bar {
+  border-bottom: 1px solid #ddd;
+  padding: 10px 20px;
+  display: grid;
+  color: #444;
+  grid-template-columns: auto auto;
+  .title {
+    justify-self: center start;
+    place-self: center start;
+    h1 {
+      margin: 0;
+      font-size: 1.6em;
+    }
+  }
+  .actions {
+    justify-self: center end;
+    place-self: center end;
+    a {
+      text-decoration: inherit;
+      color: inherit;
+      display: flex;
+      place-items: center;
+      gap: 5px;
+    }
+  }
+}
+</style>

playground/src/components/Playground.vue

@@ -132,7 +132,7 @@
         :mouse="mouseEvents"
         :touch="touchEvents"
         :wheel="wheelEvents"
-        :gesture="gestureEvents"
+        :gesture="false"
       >
         <template #canvas>
           <img

playground/vite.config.ts

@@ -13,6 +13,6 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
-    exclude: ['projection-layer'],
+    exclude: ['zoompinch'],
   },
 });

zoompinch-lit/index.html

@@ -35,5 +35,9 @@
         <div slot="matrix">MATRIX</div>
       </pan-cake>
     </div>
+
+    <script>
+      const panCake = document.querySelector('pan-cake');
+    </script>
   </body>
 </html>