@zoompinch/vue 0.0.27 → 0.0.28
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 +32 -0
- package/dist/components/Zoompinch.vue.d.ts +4 -0
- package/dist/style.css +1 -1
- package/dist/zoompinch-vue.es.js +78 -66
- package/dist/zoompinch-vue.umd.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -32,6 +32,10 @@ npm install @zoompinch/vue
|
|
|
32
32
|
:max-scale="4"
|
|
33
33
|
:clamp-bounds="false"
|
|
34
34
|
:rotation="true"
|
|
35
|
+
:zoom-speed="1"
|
|
36
|
+
:translate-speed="1"
|
|
37
|
+
:zoom-speed-apple-trackpad="1"
|
|
38
|
+
:translate-speed-apple-trackpad="1"
|
|
35
39
|
:mouse="false"
|
|
36
40
|
:wheel="true"
|
|
37
41
|
:touch="true"
|
|
@@ -104,6 +108,34 @@ function handleClick(event: MouseEvent) {
|
|
|
104
108
|
| `touch` | `boolean` | `true` | Enable touch gestures |
|
|
105
109
|
| `gesture` | `boolean` | `true` | Enable Safari gesture events |
|
|
106
110
|
|
|
111
|
+
|
|
112
|
+
### Speed Multipliers
|
|
113
|
+
|
|
114
|
+
#### The Problem
|
|
115
|
+
Pan and zoom interactions behave differently across input devices:
|
|
116
|
+
- **Apple Trackpads**: Provide smooth, precise scroll values with natural momentum
|
|
117
|
+
- **Mouse Wheels**: Send large, discrete jumps (typically ±100 or ±120 per scroll tick)
|
|
118
|
+
|
|
119
|
+
Without normalization, this causes:
|
|
120
|
+
- Uncomfortably large zoom jumps when using mouse wheels
|
|
121
|
+
- Panning that's either too slow (trackpad-optimized) or too fast (mouse-optimized)
|
|
122
|
+
- Inconsistent user experience across Windows, Mac, and Linux
|
|
123
|
+
|
|
124
|
+
#### The Solution
|
|
125
|
+
The library automatically detects the input device type and applies different speed multipliers:
|
|
126
|
+
- **Trackpad gestures** use base values for smooth, 1:1 response
|
|
127
|
+
- **Mouse wheel actions** use amplified values for comfortable discrete steps
|
|
128
|
+
|
|
129
|
+
You can fine-tune these multipliers for your specific use case using the speed props.
|
|
130
|
+
|
|
131
|
+
| Prop | Type | Default | Description |
|
|
132
|
+
|------|------|---------|-------------|
|
|
133
|
+
| `translate-speed` | `number` | `1` | Pan speed multiplier for mouse wheels |
|
|
134
|
+
| `zoom-speed` | `number` | `1` | Zoom speed multiplier for mouse wheels |
|
|
135
|
+
| `translate-speed-apple-trackpad` | `number` | `1` | Pan speed multiplier for trackpads |
|
|
136
|
+
| `zoom-speed-apple-trackpad` | `number` | `1` | Zoom speed multiplier for trackpads |
|
|
137
|
+
|
|
138
|
+
|
|
107
139
|
**Note:** `min-scale`, `max-scale`, `rotation`, and `clamp-bounds` only apply during user interaction. Programmatic changes via ref methods are unrestricted.
|
|
108
140
|
|
|
109
141
|
### Events
|
|
@@ -16,6 +16,10 @@ type __VLS_Props = {
|
|
|
16
16
|
wheel?: boolean;
|
|
17
17
|
touch?: boolean;
|
|
18
18
|
gesture?: boolean;
|
|
19
|
+
zoomSpeed?: number;
|
|
20
|
+
translateSpeed?: number;
|
|
21
|
+
zoomSpeedAppleTrackpad?: number;
|
|
22
|
+
translateSpeedAppleTrackpad?: number;
|
|
19
23
|
};
|
|
20
24
|
declare function __VLS_template(): {
|
|
21
25
|
attrs: Partial<{}>;
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.zoompinch[data-v-
|
|
1
|
+
.zoompinch[data-v-fbdbcf7c]{touch-action:none;overflow:hidden;width:100%;height:100%;position:relative}.zoompinch>.canvas[data-v-fbdbcf7c]{position:absolute}.zoompinch>.matrix[data-v-fbdbcf7c]{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}
|
package/dist/zoompinch-vue.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { Zoompinch as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as x, ref as r, onMounted as C, watch as n, onUnmounted as M, useSlots as W, createElementBlock as Z, openBlock as b, createElementVNode as A, renderSlot as L, createCommentVNode as N } from "vue";
|
|
2
|
+
import { Zoompinch as P } from "@zoompinch/core";
|
|
3
|
+
const $ = { class: "canvas" }, H = { class: "matrix" }, R = /* @__PURE__ */ x({
|
|
4
4
|
__name: "Zoompinch",
|
|
5
5
|
props: {
|
|
6
6
|
transform: { default: () => ({ translateX: 0, translateY: 0, scale: 1, rotate: 0 }) },
|
|
@@ -12,18 +12,22 @@ const R = { class: "canvas" }, U = { class: "matrix" }, V = /* @__PURE__ */ M({
|
|
|
12
12
|
mouse: { type: Boolean, default: !0 },
|
|
13
13
|
wheel: { type: Boolean, default: !0 },
|
|
14
14
|
touch: { type: Boolean, default: !0 },
|
|
15
|
-
gesture: { type: Boolean, default: !0 }
|
|
15
|
+
gesture: { type: Boolean, default: !0 },
|
|
16
|
+
zoomSpeed: {},
|
|
17
|
+
translateSpeed: {},
|
|
18
|
+
zoomSpeedAppleTrackpad: {},
|
|
19
|
+
translateSpeedAppleTrackpad: {}
|
|
16
20
|
},
|
|
17
21
|
emits: ["update:transform", "init", "dragGestureStart", "dragGestureEnd"],
|
|
18
|
-
setup(
|
|
19
|
-
const a =
|
|
22
|
+
setup(u, { expose: v, emit: s }) {
|
|
23
|
+
const a = u, d = s, p = r(), e = r(), f = r(!1);
|
|
20
24
|
window.zoompinchEngine = e;
|
|
21
|
-
const
|
|
25
|
+
const i = r(() => {
|
|
22
26
|
throw new Error("Not initialized yet");
|
|
23
|
-
}),
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
+
}), c = r(0), m = r(0);
|
|
28
|
+
C(() => {
|
|
29
|
+
p.value && (e.value = new P(p.value, a.offset, a.transform.translateX, a.transform.translateY, a.transform.scale, a.transform.rotate, a.minScale, a.maxScale, a.clampBounds, a.rotation), a.zoomSpeed !== void 0 && (e.value.zoomSpeed = a.zoomSpeed), a.translateSpeed !== void 0 && (e.value.translateSpeed = a.translateSpeed), a.zoomSpeedAppleTrackpad !== void 0 && (e.value.zoomSpeedAppleTrackpad = a.zoomSpeedAppleTrackpad), a.translateSpeedAppleTrackpad !== void 0 && (e.value.translateSpeedAppleTrackpad = a.translateSpeedAppleTrackpad), e.value.addEventListener("init", () => {
|
|
30
|
+
d("init");
|
|
27
31
|
}), e.value.addEventListener("update", () => {
|
|
28
32
|
if (!e.value) return;
|
|
29
33
|
const t = {
|
|
@@ -32,107 +36,115 @@ const R = { class: "canvas" }, U = { class: "matrix" }, V = /* @__PURE__ */ M({
|
|
|
32
36
|
scale: e.value.scale,
|
|
33
37
|
rotate: e.value.rotate
|
|
34
38
|
};
|
|
35
|
-
(t.translateX !== a.transform.translateX || t.translateY !== a.transform.translateY || t.scale !== a.transform.scale || t.rotate !== a.transform.rotate) &&
|
|
39
|
+
(t.translateX !== a.transform.translateX || t.translateY !== a.transform.translateY || t.scale !== a.transform.scale || t.rotate !== a.transform.rotate) && d("update:transform", t), i.value = (o, l) => e.value.composePoint(o, l), c.value = e.value.canvasBounds.width, m.value = e.value.canvasBounds.height;
|
|
36
40
|
}), e.value.addEventListener("init", () => {
|
|
37
|
-
|
|
41
|
+
f.value = !0;
|
|
38
42
|
}));
|
|
39
|
-
}),
|
|
43
|
+
}), n(
|
|
40
44
|
() => a.transform,
|
|
41
45
|
() => {
|
|
42
46
|
e.value && (e.value.translateX !== a.transform.translateX || e.value.translateY !== a.transform.translateY || e.value.scale !== a.transform.scale || e.value.rotate !== a.transform.rotate) && (e.value.translateX = a.transform.translateX, e.value.translateY = a.transform.translateY, e.value.scale = a.transform.scale, e.value.rotate = a.transform.rotate, e.value.update());
|
|
43
47
|
},
|
|
44
48
|
{ deep: !0 }
|
|
45
|
-
),
|
|
49
|
+
), n(
|
|
46
50
|
() => a.offset,
|
|
47
51
|
(t) => {
|
|
48
52
|
e.value && (e.value.offset = t, e.value.update());
|
|
49
53
|
},
|
|
50
54
|
{ deep: !0 }
|
|
51
|
-
),
|
|
55
|
+
), n(
|
|
52
56
|
() => a.minScale,
|
|
53
57
|
(t) => {
|
|
54
58
|
e.value && (e.value.minScale = t, e.value.update());
|
|
55
59
|
}
|
|
56
|
-
),
|
|
60
|
+
), n(
|
|
57
61
|
() => a.maxScale,
|
|
58
62
|
(t) => {
|
|
59
63
|
e.value && (e.value.maxScale = t, e.value.update());
|
|
60
64
|
}
|
|
61
|
-
),
|
|
65
|
+
), n(() => a.clampBounds, (t) => {
|
|
62
66
|
e.value && (e.value.clampBounds = t, e.value.setTranslateFromUserGesture(e.value.translateX, e.value.translateY), e.value.update());
|
|
63
|
-
}),
|
|
67
|
+
}), n(() => a.rotation, (t) => {
|
|
64
68
|
e.value && (e.value.rotation = t, e.value.update());
|
|
69
|
+
}), n(() => a.zoomSpeed, () => {
|
|
70
|
+
!e.value || a.zoomSpeed === void 0 || (e.value.zoomSpeed = a.zoomSpeed);
|
|
71
|
+
}), n(() => a.translateSpeed, () => {
|
|
72
|
+
!e.value || a.translateSpeed === void 0 || (e.value.translateSpeed = a.translateSpeed);
|
|
73
|
+
}), n(() => a.zoomSpeedAppleTrackpad, () => {
|
|
74
|
+
!e.value || a.zoomSpeedAppleTrackpad === void 0 || (e.value.zoomSpeedAppleTrackpad = a.zoomSpeedAppleTrackpad);
|
|
75
|
+
}), n(() => a.translateSpeedAppleTrackpad, () => {
|
|
76
|
+
!e.value || a.translateSpeedAppleTrackpad === void 0 || (e.value.translateSpeedAppleTrackpad = a.translateSpeedAppleTrackpad);
|
|
65
77
|
});
|
|
66
|
-
const
|
|
67
|
-
e.value && (
|
|
68
|
-
},
|
|
78
|
+
const _ = (t, o, l, k) => {
|
|
79
|
+
e.value && (k !== void 0 && (e.value.rotate = k), e.value.applyTransform(t, o, l));
|
|
80
|
+
}, B = (t) => {
|
|
69
81
|
e.value && a.wheel && e.value.handleWheel(t);
|
|
70
|
-
},
|
|
82
|
+
}, y = (t) => {
|
|
71
83
|
e.value && a.gesture && e.value.handleGesturestart(t);
|
|
72
|
-
},
|
|
84
|
+
}, h = (t) => {
|
|
73
85
|
e.value && a.gesture && e.value.handleGesturechange(t);
|
|
74
|
-
},
|
|
86
|
+
}, S = (t) => {
|
|
75
87
|
e.value && a.gesture && e.value.handleGestureend(t);
|
|
76
|
-
},
|
|
88
|
+
}, X = (t) => {
|
|
77
89
|
e.value && a.mouse && e.value.handleMousedown(t);
|
|
78
|
-
},
|
|
90
|
+
}, w = (t) => {
|
|
79
91
|
e.value && a.mouse && e.value.handleMousemove(t);
|
|
80
|
-
},
|
|
92
|
+
}, T = (t) => {
|
|
81
93
|
e.value && a.mouse && e.value.handleMouseup(t);
|
|
82
|
-
},
|
|
94
|
+
}, Y = (t) => {
|
|
83
95
|
e.value && a.touch && e.value.handleTouchstart(t);
|
|
84
|
-
},
|
|
96
|
+
}, z = (t) => {
|
|
85
97
|
e.value && a.touch && e.value.handleTouchmove(t);
|
|
86
|
-
},
|
|
98
|
+
}, g = (t) => {
|
|
87
99
|
e.value && a.touch && e.value.handleTouchend(t);
|
|
88
100
|
};
|
|
89
|
-
window.addEventListener("gesturechange",
|
|
90
|
-
window.removeEventListener("gesturechange",
|
|
101
|
+
window.addEventListener("gesturechange", h), window.addEventListener("gestureend", S), window.addEventListener("mousemove", w), window.addEventListener("mouseup", T), window.addEventListener("touchmove", z), window.addEventListener("touchend", g), M(() => {
|
|
102
|
+
window.removeEventListener("gesturechange", h), window.removeEventListener("gestureend", S), window.removeEventListener("mousemove", w), window.removeEventListener("mouseup", T), window.removeEventListener("touchmove", z), window.removeEventListener("touchend", g);
|
|
91
103
|
});
|
|
92
|
-
const
|
|
104
|
+
const E = (t, o) => {
|
|
93
105
|
if (!e.value)
|
|
94
106
|
throw new Error("Zoompinch engine not initialized");
|
|
95
|
-
return e.value.normalizeClientCoords(t,
|
|
96
|
-
},
|
|
97
|
-
e.value && e.value.rotateCanvas(t,
|
|
107
|
+
return e.value.normalizeClientCoords(t, o);
|
|
108
|
+
}, G = (t, o, l) => {
|
|
109
|
+
e.value && e.value.rotateCanvas(t, o, l);
|
|
98
110
|
};
|
|
99
|
-
return
|
|
100
|
-
applyTransform:
|
|
101
|
-
composePoint:
|
|
102
|
-
normalizeClientCoords:
|
|
111
|
+
return W(), v({
|
|
112
|
+
applyTransform: _,
|
|
113
|
+
composePoint: i,
|
|
114
|
+
normalizeClientCoords: E,
|
|
103
115
|
zoompinchEngine: e,
|
|
104
|
-
canvasWidth:
|
|
105
|
-
canvasHeight:
|
|
106
|
-
rotateCanvas:
|
|
107
|
-
}), (t,
|
|
116
|
+
canvasWidth: c,
|
|
117
|
+
canvasHeight: m,
|
|
118
|
+
rotateCanvas: G
|
|
119
|
+
}), (t, o) => (b(), Z("div", {
|
|
108
120
|
ref_key: "zoompinchRef",
|
|
109
|
-
ref:
|
|
121
|
+
ref: p,
|
|
110
122
|
class: "zoompinch",
|
|
111
|
-
onWheel:
|
|
112
|
-
onGesturestart:
|
|
113
|
-
onMousedown:
|
|
114
|
-
onTouchstart:
|
|
123
|
+
onWheel: B,
|
|
124
|
+
onGesturestart: y,
|
|
125
|
+
onMousedown: X,
|
|
126
|
+
onTouchstart: Y
|
|
115
127
|
}, [
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
A("div", $, [
|
|
129
|
+
L(t.$slots, "default", {}, void 0, !0)
|
|
118
130
|
]),
|
|
119
|
-
|
|
120
|
-
|
|
131
|
+
A("div", H, [
|
|
132
|
+
f.value && i.value ? L(t.$slots, "matrix", {
|
|
121
133
|
key: 0,
|
|
122
|
-
composePoint:
|
|
123
|
-
normalizeClientCoords:
|
|
124
|
-
canvasWidth:
|
|
125
|
-
canvasHeight:
|
|
126
|
-
}, void 0, !0) :
|
|
134
|
+
composePoint: i.value,
|
|
135
|
+
normalizeClientCoords: E,
|
|
136
|
+
canvasWidth: c.value,
|
|
137
|
+
canvasHeight: m.value
|
|
138
|
+
}, void 0, !0) : N("", !0)
|
|
127
139
|
])
|
|
128
140
|
], 544));
|
|
129
141
|
}
|
|
130
|
-
}),
|
|
131
|
-
const
|
|
132
|
-
for (const [a,
|
|
133
|
-
|
|
134
|
-
return
|
|
135
|
-
},
|
|
142
|
+
}), U = (u, v) => {
|
|
143
|
+
const s = u.__vccOpts || u;
|
|
144
|
+
for (const [a, d] of v)
|
|
145
|
+
s[a] = d;
|
|
146
|
+
return s;
|
|
147
|
+
}, I = /* @__PURE__ */ U(R, [["__scopeId", "data-v-fbdbcf7c"]]);
|
|
136
148
|
export {
|
|
137
|
-
|
|
149
|
+
I as Zoompinch
|
|
138
150
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","vue","@zoompinch/core"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.ZoompinchVue={},o.Vue,o.ZoompinchCore))})(this,(function(o,n,
|
|
1
|
+
(function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["exports","vue","@zoompinch/core"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.ZoompinchVue={},o.Vue,o.ZoompinchCore))})(this,(function(o,n,_){"use strict";const y={class:"canvas"},A={class:"matrix"},L=((s,p)=>{const u=s.__vccOpts||s;for(const[a,d]of p)u[a]=d;return u})(n.defineComponent({__name:"Zoompinch",props:{transform:{default:()=>({translateX:0,translateY:0,scale:1,rotate:0})},offset:{default:()=>({left:0,top:0,right:0,bottom:0})},maxScale:{default:10},minScale:{default:.5},clampBounds:{type:Boolean,default:!1},rotation:{type:Boolean,default:!0},mouse:{type:Boolean,default:!0},wheel:{type:Boolean,default:!0},touch:{type:Boolean,default:!0},gesture:{type:Boolean,default:!0},zoomSpeed:{},translateSpeed:{},zoomSpeedAppleTrackpad:{},translateSpeedAppleTrackpad:{}},emits:["update:transform","init","dragGestureStart","dragGestureEnd"],setup(s,{expose:p,emit:u}){const a=s,d=u,c=n.ref(),e=n.ref(),m=n.ref(!1);window.zoompinchEngine=e;const i=n.ref(()=>{throw new Error("Not initialized yet")}),v=n.ref(0),f=n.ref(0);n.onMounted(()=>{c.value&&(e.value=new _.Zoompinch(c.value,a.offset,a.transform.translateX,a.transform.translateY,a.transform.scale,a.transform.rotate,a.minScale,a.maxScale,a.clampBounds,a.rotation),a.zoomSpeed!==void 0&&(e.value.zoomSpeed=a.zoomSpeed),a.translateSpeed!==void 0&&(e.value.translateSpeed=a.translateSpeed),a.zoomSpeedAppleTrackpad!==void 0&&(e.value.zoomSpeedAppleTrackpad=a.zoomSpeedAppleTrackpad),a.translateSpeedAppleTrackpad!==void 0&&(e.value.translateSpeedAppleTrackpad=a.translateSpeedAppleTrackpad),e.value.addEventListener("init",()=>{d("init")}),e.value.addEventListener("update",()=>{if(!e.value)return;const t={translateX:e.value.translateX,translateY:e.value.translateY,scale:e.value.scale,rotate:e.value.rotate};(t.translateX!==a.transform.translateX||t.translateY!==a.transform.translateY||t.scale!==a.transform.scale||t.rotate!==a.transform.rotate)&&d("update:transform",t),i.value=(r,l)=>e.value.composePoint(r,l),v.value=e.value.canvasBounds.width,f.value=e.value.canvasBounds.height}),e.value.addEventListener("init",()=>{m.value=!0}))}),n.watch(()=>a.transform,()=>{e.value&&(e.value.translateX!==a.transform.translateX||e.value.translateY!==a.transform.translateY||e.value.scale!==a.transform.scale||e.value.rotate!==a.transform.rotate)&&(e.value.translateX=a.transform.translateX,e.value.translateY=a.transform.translateY,e.value.scale=a.transform.scale,e.value.rotate=a.transform.rotate,e.value.update())},{deep:!0}),n.watch(()=>a.offset,t=>{e.value&&(e.value.offset=t,e.value.update())},{deep:!0}),n.watch(()=>a.minScale,t=>{e.value&&(e.value.minScale=t,e.value.update())}),n.watch(()=>a.maxScale,t=>{e.value&&(e.value.maxScale=t,e.value.update())}),n.watch(()=>a.clampBounds,t=>{e.value&&(e.value.clampBounds=t,e.value.setTranslateFromUserGesture(e.value.translateX,e.value.translateY),e.value.update())}),n.watch(()=>a.rotation,t=>{e.value&&(e.value.rotation=t,e.value.update())}),n.watch(()=>a.zoomSpeed,()=>{!e.value||a.zoomSpeed===void 0||(e.value.zoomSpeed=a.zoomSpeed)}),n.watch(()=>a.translateSpeed,()=>{!e.value||a.translateSpeed===void 0||(e.value.translateSpeed=a.translateSpeed)}),n.watch(()=>a.zoomSpeedAppleTrackpad,()=>{!e.value||a.zoomSpeedAppleTrackpad===void 0||(e.value.zoomSpeedAppleTrackpad=a.zoomSpeedAppleTrackpad)}),n.watch(()=>a.translateSpeedAppleTrackpad,()=>{!e.value||a.translateSpeedAppleTrackpad===void 0||(e.value.translateSpeedAppleTrackpad=a.translateSpeedAppleTrackpad)});const B=(t,r,l,k)=>{e.value&&(k!==void 0&&(e.value.rotate=k),e.value.applyTransform(t,r,l))},X=t=>{e.value&&a.wheel&&e.value.handleWheel(t)},Y=t=>{e.value&&a.gesture&&e.value.handleGesturestart(t)},h=t=>{e.value&&a.gesture&&e.value.handleGesturechange(t)},w=t=>{e.value&&a.gesture&&e.value.handleGestureend(t)},x=t=>{e.value&&a.mouse&&e.value.handleMousedown(t)},S=t=>{e.value&&a.mouse&&e.value.handleMousemove(t)},T=t=>{e.value&&a.mouse&&e.value.handleMouseup(t)},G=t=>{e.value&&a.touch&&e.value.handleTouchstart(t)},z=t=>{e.value&&a.touch&&e.value.handleTouchmove(t)},E=t=>{e.value&&a.touch&&e.value.handleTouchend(t)};window.addEventListener("gesturechange",h),window.addEventListener("gestureend",w),window.addEventListener("mousemove",S),window.addEventListener("mouseup",T),window.addEventListener("touchmove",z),window.addEventListener("touchend",E),n.onUnmounted(()=>{window.removeEventListener("gesturechange",h),window.removeEventListener("gestureend",w),window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",T),window.removeEventListener("touchmove",z),window.removeEventListener("touchend",E)});const g=(t,r)=>{if(!e.value)throw new Error("Zoompinch engine not initialized");return e.value.normalizeClientCoords(t,r)},C=(t,r,l)=>{e.value&&e.value.rotateCanvas(t,r,l)};return n.useSlots(),p({applyTransform:B,composePoint:i,normalizeClientCoords:g,zoompinchEngine:e,canvasWidth:v,canvasHeight:f,rotateCanvas:C}),(t,r)=>(n.openBlock(),n.createElementBlock("div",{ref_key:"zoompinchRef",ref:c,class:"zoompinch",onWheel:X,onGesturestart:Y,onMousedown:x,onTouchstart:G},[n.createElementVNode("div",y,[n.renderSlot(t.$slots,"default",{},void 0,!0)]),n.createElementVNode("div",A,[m.value&&i.value?n.renderSlot(t.$slots,"matrix",{key:0,composePoint:i.value,normalizeClientCoords:g,canvasWidth:v.value,canvasHeight:f.value},void 0,!0):n.createCommentVNode("",!0)])],544))}}),[["__scopeId","data-v-fbdbcf7c"]]);o.Zoompinch=L,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
|
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.28",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/zoompinch-vue.umd.js",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"vue-tsc": "^3.2.0"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@zoompinch/core": "^0.0.
|
|
47
|
+
"@zoompinch/core": "^0.0.28"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"vue": "^3.5.26"
|