ok

zoompinch-vue/.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+demo
+node_modules
+lib
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

zoompinch-vue/README.md

@@ -0,0 +1,77 @@
+# Projection Layer
+
+This vue component provides a layer that projects any coordinates into the real rendeirng viewbox of the canvas. It also provides a straight forward integration of panzoom.
+
+## Example
+
+
+```html
+<projection-layer :x="0" :y="0" :width="600" :height="400" panzoom>
+  <template #canvas>
+    <img src="this/image/is/400/with/and/600/height.png" style="height: 100%; width: 100%;" />
+  </template>
+  <template #matrix="{ compose, normalizeMatrixCoordinates }">
+    <svg xmlns="http://www.w3.org/2000/svg">
+      <!--
+        This projects a rectangle at 10,10 width 100,100 size over the image.
+      -->
+      <rect :x="compose.x(10)" :y="compose.y(10)" :width="compose.size(100)" :height="compose.size(100)"/>
+    </svg>
+  </template>
+</projection-layer>
+```
+
+## Properties
+
+- `width` & `height`: Width & height of the projecting matrix. Shold be the same as the image you are projecting
+- `x` & `y`: X and Y offset of the projecting matrix (should be `0` in mos of the cases)
+- `panzoom`: Wether to init panzoom wheel events
+
+## Slots
+
+### Canvas
+
+The canvas. The wrapping container of this slot will always have the aspect ratio of `width` / `height`, so the graphic within fill up `100%` and `100%` of it without offsets, otherwise the contenst within `#matrix` it will not be projedcted correctly.
+
+### Matrix
+
+THis wraps the matrix projection and directly give access to `compose` and `normalizeMatrixCoordinates`
+
+#### Variables
+
+- `compose`:
+  `x`: Function that converts a x coordinate within the matrix to the "real" coordinate within the layer
+  `y`: Function that converts a y coordinate within the matrix to the "real" coordinate within the layer
+  `size`: Function that converts a size within the matrix to the "real" size within the layer
+- `normalizeMatrixCoordinates`: Accepts `clientX` and `clientY` coordinates and returns their matrix coordinates
+  - **Example:** `normalizeMatrixCoordinates(event.clientX, event.clientY)`
+
+## Exposed
+
+- `compose`:
+  `x`: Function that converts a x coordinate within the matrix to the "real" coordinate within the layer
+  `y`: Function that converts a y coordinate within the matrix to the "real" coordinate within the layer
+  `size`: Function that converts a size within the matrix to the "real" size within the layer
+
+### `normalizeMatrixCoordinates()`:
+
+Accepts `clientX` and `clientY` coordinates and returns their matrix coordinates
+
+**Example:** `normalizeMatrixCoordinates(event.clientX, event.clientY)`
+
+
+
+### `applyTransform()`
+
+Accepts `x`, `y`, `scale`, `origin` and `anchor` which scales and pans the canvas and the matrix. The `origin` is the origin within the main container while the `anchor` is the internal anchor point of the canvas.
+
+Center the canvas at scale `2`: `applyTransform(0, 0, 2, [0.5, 0.5], [0.5, 0.5])`
+
+### `compose`
+
+Object that contains the compose functions.
+
+- `x`: Function that converts a x coordinate within the matrix to the "real" coordinate within the layer
+- `y`: Function that converts a y coordinate within the matrix to the "real" coordinate within the layer
+- `size`: Function that converts a size within the matrix to the "real" size within the layer
+