@zoompinch/vue 0.0.24 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -4
- package/package.json +16 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @zoompinch/vue
|
|
2
2
|
|
|
3
|
-
Vue 3
|
|
3
|
+
Vue 3 component for [@zoompinch/core](https://github.com/ElyaConrad/zoompinch) - Apply a pinch-and-zoom experience that’s feels native and communicates the transform reactively and lets you project any layer on top of the transformed canvas.
|
|
4
4
|
|
|
5
5
|
**Play with the demo:** [https://zoompinch.pages.dev](https://zoompinch.pages.dev)
|
|
6
6
|
|
|
@@ -60,7 +60,6 @@ const transform = ref({
|
|
|
60
60
|
scale: 1,
|
|
61
61
|
rotate: 0
|
|
62
62
|
});
|
|
63
|
-
const clickPoint = ref<[number, number] | null>(null);
|
|
64
63
|
|
|
65
64
|
function handleInit() {
|
|
66
65
|
// Center canvas on initialization
|
|
@@ -74,7 +73,7 @@ function handleTransformUpdate(newTransform) {
|
|
|
74
73
|
function handleClick(event: MouseEvent) {
|
|
75
74
|
if (!zoompinchRef.value) return;
|
|
76
75
|
const [x, y] = zoompinchRef.value.normalizeClientCoords(event.clientX, event.clientY);
|
|
77
|
-
|
|
76
|
+
console.log('Cliked at', x, y);
|
|
78
77
|
}
|
|
79
78
|
</script>
|
|
80
79
|
|
|
@@ -87,7 +86,6 @@ function handleClick(event: MouseEvent) {
|
|
|
87
86
|
</style>
|
|
88
87
|
```
|
|
89
88
|
|
|
90
|
-
---
|
|
91
89
|
|
|
92
90
|
## API Reference
|
|
93
91
|
|
|
@@ -371,6 +369,7 @@ MIT
|
|
|
371
369
|
## Related
|
|
372
370
|
|
|
373
371
|
- [@zoompinch/core](https://www.npmjs.com/package/@zoompinch/core) - Core engine
|
|
372
|
+
- [@zoompinch/react](https://www.npmjs.com/package/@zoompinch/react) - React
|
|
374
373
|
- [@zoompinch/elements](https://www.npmjs.com/package/@zoompinch/elements) - Web Components
|
|
375
374
|
|
|
376
375
|
---
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zoompinch/vue",
|
|
3
3
|
"description": "Vue wrapper for ZoomPinch - reactive pinch & zoom component",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.26",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/zoompinch-vue.umd.js",
|
|
@@ -15,6 +15,20 @@
|
|
|
15
15
|
},
|
|
16
16
|
"./style.css": "./dist/style.css"
|
|
17
17
|
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"vue",
|
|
20
|
+
"zoompinch",
|
|
21
|
+
"zoom images",
|
|
22
|
+
"pinch to zoom",
|
|
23
|
+
"image zoom",
|
|
24
|
+
"pan gesture",
|
|
25
|
+
"pan and zoom",
|
|
26
|
+
"panzoom",
|
|
27
|
+
"gesture library",
|
|
28
|
+
"touch gestures",
|
|
29
|
+
"vue3",
|
|
30
|
+
"vuejs"
|
|
31
|
+
],
|
|
18
32
|
"scripts": {
|
|
19
33
|
"dev": "vite",
|
|
20
34
|
"build": "vue-tsc --noEmit && vite build"
|
|
@@ -30,7 +44,7 @@
|
|
|
30
44
|
"vue-tsc": "^3.2.0"
|
|
31
45
|
},
|
|
32
46
|
"dependencies": {
|
|
33
|
-
"@zoompinch/core": "^0.0.
|
|
47
|
+
"@zoompinch/core": "^0.0.25"
|
|
34
48
|
},
|
|
35
49
|
"peerDependencies": {
|
|
36
50
|
"vue": "^3.5.26"
|