wip lit

MauriceConrad · Apr 14, 2024 · 2f7ea95 · 2f7ea95
1 parent 8d09b1b
commit 2f7ea95
Show file tree

Hide file tree

Showing 11 changed files with 380 additions and 204 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,23 @@
 ## Zoompinch
 
+Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively in both directions.
+
+Play around with the [demo here](https://zoompinch.pages.dev)
+
+### Mathematical correct pinch on touch
+
+Unlike other libraries, _Pinchzoom_ does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes rotation
+
+### Matrix Layer on top
+
+You can use a matrix layer on top that projects any virtual point within the canvas to the real absolute coordinates.
+
+### Currently supported platforms:
+
+- [x] Vue 3
+- [ ] Web components (work in progress)
+- [ ] React
+
 ### Install
 
 ```bash
@@ -71,18 +89,6 @@ function handleClickOnLayer(event: MouseEvent) {
 - `wheel`: Boolean value wether wheel events will be connected
 - `gesture`: Boolean value, wether gesture events will be connected
 
-## Scale, Move and Rotate
-
-Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively in both directions.
-
-## Mathematical correct pinch on touch
-
-Unlike other libraries, _Pinchzoom_ does not just uses the center point between two fingers as projection center. The fingers get correctly projected on the virtual canvas. This makes rotation
-
-## Matrix Layer on top
-
-You can use a matrix layer on top that projects any virtual point within the canvas to the real absolute coordinates.
-
 ## Helper functions
 
 Because different use cases need different ways of modifying a transform, there exist a lot of helper functions

diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="root">
-    <nav-bar />
+    <!-- <nav-bar /> -->
     <playground />
   </div>
 </template>

diff --git a/playground/src/components/Playground.vue b/playground/src/components/Playground.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div class="playground">
     <header>
       <section>
@@ -245,11 +245,17 @@ onMounted(() => {
 
     &.small {
       grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+      @media screen and (max-width: 700px) {
+        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+      }
     }
     .field {
       .description {
         font-size: 0.9em;
         opacity: 0.7;
+        @media screen and (max-width: 700px) {
+          font-size: 0.7em;
+        }
       }
       .n-input-number {
         ::v-deep(.n-input__suffix) {
@@ -271,4 +277,35 @@ onMounted(() => {
     }
   }
 }
+</style> -->
+
+<template>
+  <div class="my-container">
+    <zoompinch
+      :width="536"
+      :height="802"
+      :bounds="false"
+      :rotation="true"
+      :offset="{ left: 0, top: 0, bottom: 0, right: 0 }"
+      :min-scale="0.1"
+      :max-scale="10"
+    >
+      <template #canvas>
+        <img src="https://creactive-media.de/images/gallery/DSC05518.jpeg" style="width: 536px; height: 802px" />
+      </template>
+    </zoompinch>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Zoompinch } from 'zoompinch';
+import 'zoompinch/style.css';
+</script>
+
+<style scoped lang="scss">
+.my-container {
+  width: 100%;
+  height: 500px;
+  background-color: #eee;
+}
 </style>
diff --git a/zoompinch-lit/index.html b/zoompinch-lit/index.html
@@ -20,24 +20,41 @@
         font-family: Arial, sans-serif;
       }
       .my-container {
-        width: 800px;
-        height: 600px;
+        width: 100%;
+        height: 500px;
         background-color: #eee;
       }
     </style>
   </head>
   <body>
     <div class="my-container">
-      <pan-cake width="536" height="802">
+      <pan-cake width="536" height="802" translateX="100" translateY="0">
         <div slot="canvas">
           <img src="https://creactive-media.de/images/gallery/DSC05518.jpeg" style="width: 536px; height: 802px" />
         </div>
-        <div slot="matrix">MATRIX</div>
+        <div slot="matrix">
+          <svg xmlns="http://www.org/2000/svg" width="100%" height="100%">
+            <circle id="center-circle" r="5" style="fill: #f00" cx="100" cy="100" />
+          </svg>
+        </div>
       </pan-cake>
     </div>
 
-    <script>
+    <script type="module">
       const panCake = document.querySelector('pan-cake');
+
+      setTimeout(() => {
+        // console.log('FIT');
+        // panCake.applyTransform(1, [0.5, 0.5], [0.5, 0.5], true);
+        // setTimeout(() => {
+        //   panCake.rotateCanvas(0.5, 0.5, Math.PI / 4);
+        // }, 1000);
+
+        const centerCircle = document.getElementById('center-circle');
+        const [cx, cy] = panCake.composePoint(0.5, 0.5);
+        centerCircle.setAttribute('cx', cx.toString());
+        centerCircle.setAttribute('cy', cy.toString());
+      }, 5000);
     </script>
   </body>
 </html>
diff --git a/zoompinch-lit/src/components/PanCake.scss b/zoompinch-lit/src/components/PanCake.scss
@@ -22,4 +22,9 @@
     transform-origin: 0% 0%;
     transform: translate(var(--translate-x), var(--translate-y)) scale(var(--scale)) rotate(var(--rotate));
   }
+  .matrix {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
 }