@zoompinch/elements 0.0.26 → 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 +4 -0
- package/dist/zoompinch-elements.es.js +80 -45
- package/dist/zoompinch-elements.umd.js +2 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -53,6 +53,10 @@ npm install @zoompinch/elements
|
|
|
53
53
|
offset-left="0"
|
|
54
54
|
clamp-bounds="false"
|
|
55
55
|
rotation="true"
|
|
56
|
+
zoom-speed="1"
|
|
57
|
+
translate-speed="1"
|
|
58
|
+
zoom-speed-apple-trackpad="1"
|
|
59
|
+
translate-speed-apple-trackpad="1"
|
|
56
60
|
>
|
|
57
61
|
<img width="1536" height="2048" src="https://imagedelivery.net/mudX-CmAqIANL8bxoNCToA/489df5b2-38ce-46e7-32e0-d50170e8d800/public" />
|
|
58
62
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { Zoompinch as
|
|
5
|
-
class
|
|
1
|
+
var E = Object.defineProperty;
|
|
2
|
+
var T = (a, n, i) => n in a ? E(a, n, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[n] = i;
|
|
3
|
+
var S = (a, n, i) => T(a, typeof n != "symbol" ? n + "" : n, i);
|
|
4
|
+
import { Zoompinch as x } from "@zoompinch/core";
|
|
5
|
+
class w extends HTMLElement {
|
|
6
6
|
constructor() {
|
|
7
7
|
super();
|
|
8
|
-
|
|
8
|
+
S(this, "engine");
|
|
9
9
|
this.attachShadow({ mode: "open" });
|
|
10
10
|
}
|
|
11
11
|
get contentEl() {
|
|
@@ -50,25 +50,26 @@ class N extends HTMLElement {
|
|
|
50
50
|
</div>
|
|
51
51
|
</div>
|
|
52
52
|
`;
|
|
53
|
-
const
|
|
54
|
-
this.
|
|
53
|
+
const i = Number(this.getAttribute("translate-x") || "0"), s = Number(this.getAttribute("translate-y") || "0"), e = Number(this.getAttribute("scale") || "1"), b = Number(this.getAttribute("rotate") || "0"), c = Number(this.getAttribute("min-scale")), l = Number(this.getAttribute("max-scale")), h = Number(this.getAttribute("offset-top")), o = Number(this.getAttribute("offset-right")), r = Number(this.getAttribute("offset-bottom")), f = Number(this.getAttribute("offset-left")), A = this.getAttribute("clamp-bounds") === "true", k = this.getAttribute("rotation") === "true", N = Number(this.getAttribute("zoom-speed")), d = Number(this.getAttribute("translate-speed")), p = Number(this.getAttribute("zoom-speed-apple-trackpad")), g = Number(this.getAttribute("translate-speed-apple-trackpad"));
|
|
54
|
+
this.engine = new x(
|
|
55
55
|
this.contentEl,
|
|
56
56
|
{
|
|
57
|
-
top: isNaN(
|
|
57
|
+
top: isNaN(h) ? 100 : h,
|
|
58
58
|
left: isNaN(f) ? 0 : f,
|
|
59
59
|
right: isNaN(o) ? 0 : o,
|
|
60
60
|
bottom: isNaN(r) ? 0 : r
|
|
61
61
|
},
|
|
62
|
-
|
|
62
|
+
i,
|
|
63
63
|
s,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
isNaN(h) ? void 0 : h,
|
|
64
|
+
e,
|
|
65
|
+
b,
|
|
67
66
|
isNaN(c) ? void 0 : c,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
67
|
+
isNaN(l) ? void 0 : l,
|
|
68
|
+
A,
|
|
69
|
+
k
|
|
70
|
+
), isNaN(N) || (this.engine.zoomSpeed = N), isNaN(d) || (this.engine.translateSpeed = d), isNaN(p) || (this.engine.zoomSpeedAppleTrackpad = p), isNaN(g) || (this.engine.translateSpeedAppleTrackpad = g), this.contentEl.addEventListener("wheel", (t) => this.engine.handleWheel(t)), this.contentEl.addEventListener("gesturestart", (t) => this.engine.handleGesturestart(t)), window.addEventListener("gesturechange", (t) => this.engine.handleGesturechange(t)), window.addEventListener("gestureend", (t) => this.engine.handleGestureend(t)), this.contentEl.addEventListener("mousedown", (t) => this.engine.handleMousedown(t)), window.addEventListener("mousemove", (t) => this.engine.handleMousemove(t)), window.addEventListener("mouseup", (t) => this.engine.handleMouseup(t)), this.contentEl.addEventListener("touchstart", (t) => this.engine.handleTouchstart(t)), window.addEventListener("touchmove", (t) => this.engine.handleTouchmove(t)), window.addEventListener("touchend", (t) => this.engine.handleTouchend(t)), this.engine.addEventListener("update", () => {
|
|
71
|
+
const t = this.engine.translateX.toString(), u = this.engine.translateY.toString(), m = this.engine.scale.toString(), v = this.engine.rotate.toString();
|
|
72
|
+
this.getAttribute("translate-x") !== t && this.setAttribute("translate-x", t), this.getAttribute("translate-y") !== u && this.setAttribute("translate-y", u), this.getAttribute("scale") !== m && this.setAttribute("scale", m), this.getAttribute("rotate") !== v && this.setAttribute("rotate", v), this.dispatchEvent(new Event("update"));
|
|
72
73
|
}), this.engine.addEventListener("init", () => {
|
|
73
74
|
this.dispatchEvent(new Event("init"));
|
|
74
75
|
});
|
|
@@ -76,52 +77,69 @@ class N extends HTMLElement {
|
|
|
76
77
|
disconnectedCallback() {
|
|
77
78
|
this.engine.destroy();
|
|
78
79
|
}
|
|
79
|
-
attributeChangedCallback(
|
|
80
|
+
attributeChangedCallback(i, s, e) {
|
|
80
81
|
if (this.engine)
|
|
81
|
-
switch (
|
|
82
|
+
switch (i) {
|
|
82
83
|
case "translate-x":
|
|
83
|
-
const
|
|
84
|
-
this.engine.translateX !==
|
|
84
|
+
const b = Number(e);
|
|
85
|
+
this.engine.translateX !== b && (this.engine.translateX = b, this.engine.update());
|
|
85
86
|
break;
|
|
86
87
|
case "translate-y":
|
|
87
|
-
const
|
|
88
|
-
this.engine.translateY !==
|
|
88
|
+
const c = Number(e);
|
|
89
|
+
this.engine.translateY !== c && (this.engine.translateY = c, this.engine.update());
|
|
89
90
|
break;
|
|
90
91
|
case "scale":
|
|
91
|
-
const
|
|
92
|
-
this.engine.scale !==
|
|
92
|
+
const l = Number(e);
|
|
93
|
+
this.engine.scale !== l && (this.engine.scale = l, this.engine.update());
|
|
93
94
|
break;
|
|
94
95
|
case "rotate":
|
|
95
|
-
const
|
|
96
|
-
this.engine.rotate !==
|
|
96
|
+
const h = Number(e);
|
|
97
|
+
this.engine.rotate !== h && (this.engine.rotate = h, this.engine.update());
|
|
97
98
|
break;
|
|
98
99
|
case "min-scale":
|
|
99
|
-
const o = Number(
|
|
100
|
+
const o = Number(e);
|
|
100
101
|
!isNaN(o) && this.engine.minScale !== o && (this.engine.minScale = o, this.engine.update());
|
|
101
102
|
break;
|
|
102
103
|
case "max-scale":
|
|
103
|
-
const r = Number(
|
|
104
|
+
const r = Number(e);
|
|
104
105
|
!isNaN(r) && this.engine.maxScale !== r && (this.engine.maxScale = r, this.engine.update());
|
|
105
106
|
break;
|
|
106
107
|
case "offset-top":
|
|
107
108
|
case "offset-right":
|
|
108
109
|
case "offset-bottom":
|
|
109
110
|
case "offset-left":
|
|
110
|
-
const f = Number(this.getAttribute("offset-top") || "0"),
|
|
111
|
+
const f = Number(this.getAttribute("offset-top") || "0"), A = Number(this.getAttribute("offset-right") || "0"), k = Number(this.getAttribute("offset-bottom") || "0"), N = Number(this.getAttribute("offset-left") || "0");
|
|
111
112
|
this.engine.offset = {
|
|
112
113
|
top: f,
|
|
113
|
-
right:
|
|
114
|
-
bottom:
|
|
115
|
-
left:
|
|
114
|
+
right: A,
|
|
115
|
+
bottom: k,
|
|
116
|
+
left: N
|
|
116
117
|
}, this.engine.update();
|
|
117
118
|
break;
|
|
118
119
|
case "clamp-bounds":
|
|
119
|
-
const
|
|
120
|
-
this.engine.clampBounds !==
|
|
120
|
+
const d = e === "true";
|
|
121
|
+
this.engine.clampBounds !== d && (this.engine.clampBounds = d, this.engine.setTranslateFromUserGesture(this.engine.translateX, this.engine.translateY), this.engine.update());
|
|
121
122
|
break;
|
|
122
123
|
case "rotation":
|
|
123
|
-
const
|
|
124
|
-
this.engine.rotation !==
|
|
124
|
+
const p = e === "true";
|
|
125
|
+
this.engine.rotation !== p && (this.engine.rotation = p, this.engine.update());
|
|
126
|
+
break;
|
|
127
|
+
case "zoom-speed":
|
|
128
|
+
const g = Number(e);
|
|
129
|
+
isNaN(g) || (this.engine.zoomSpeed = g);
|
|
130
|
+
break;
|
|
131
|
+
case "translate-speed":
|
|
132
|
+
const t = Number(e);
|
|
133
|
+
isNaN(t) || (this.engine.translateSpeed = t);
|
|
134
|
+
break;
|
|
135
|
+
case "zoom-speed-apple-trackpad":
|
|
136
|
+
const u = Number(e);
|
|
137
|
+
isNaN(u) || (this.engine.zoomSpeedAppleTrackpad = u);
|
|
138
|
+
break;
|
|
139
|
+
case "translate-speed-apple-trackpad":
|
|
140
|
+
const m = Number(e);
|
|
141
|
+
isNaN(m) || (this.engine.translateSpeedAppleTrackpad = m);
|
|
142
|
+
break;
|
|
125
143
|
}
|
|
126
144
|
}
|
|
127
145
|
get canvasWidth() {
|
|
@@ -130,15 +148,32 @@ class N extends HTMLElement {
|
|
|
130
148
|
get canvasHeight() {
|
|
131
149
|
return this.engine.canvasBounds.height;
|
|
132
150
|
}
|
|
133
|
-
applyTransform(
|
|
134
|
-
this.engine.applyTransform(
|
|
151
|
+
applyTransform(i, s, e) {
|
|
152
|
+
this.engine.applyTransform(i, s, e);
|
|
135
153
|
}
|
|
136
|
-
normalizeClientCoords(
|
|
137
|
-
return this.engine.normalizeClientCoords(
|
|
154
|
+
normalizeClientCoords(i, s) {
|
|
155
|
+
return this.engine.normalizeClientCoords(i, s);
|
|
138
156
|
}
|
|
139
|
-
composePoint(
|
|
140
|
-
return this.engine.composePoint(
|
|
157
|
+
composePoint(i, s) {
|
|
158
|
+
return this.engine.composePoint(i, s);
|
|
141
159
|
}
|
|
142
160
|
}
|
|
143
|
-
|
|
144
|
-
|
|
161
|
+
S(w, "observedAttributes", [
|
|
162
|
+
"translate-x",
|
|
163
|
+
"translate-y",
|
|
164
|
+
"scale",
|
|
165
|
+
"rotate",
|
|
166
|
+
"min-scale",
|
|
167
|
+
"max-scale",
|
|
168
|
+
"offset-top",
|
|
169
|
+
"offset-right",
|
|
170
|
+
"offset-bottom",
|
|
171
|
+
"offset-left",
|
|
172
|
+
"clamp-bounds",
|
|
173
|
+
"rotation",
|
|
174
|
+
"zoom-speed",
|
|
175
|
+
"translate-speed",
|
|
176
|
+
"zoom-speed-apple-trackpad",
|
|
177
|
+
"translate-speed-apple-trackpad"
|
|
178
|
+
]);
|
|
179
|
+
customElements.get("zoom-pinch") || customElements.define("zoom-pinch", w);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(i
|
|
1
|
+
(function(n,i){typeof exports=="object"&&typeof module<"u"?i(require("@zoompinch/core")):typeof define=="function"&&define.amd?define(["@zoompinch/core"],i):(n=typeof globalThis<"u"?globalThis:n||self,i(n.ZoompinchCore))})(this,(function(n){"use strict";var E=Object.defineProperty;var T=(n,i,c)=>i in n?E(n,i,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[i]=c;var v=(n,i,c)=>T(n,typeof i!="symbol"?i+"":i,c);class i extends HTMLElement{constructor(){super();v(this,"engine");this.attachShadow({mode:"open"})}get contentEl(){return this.shadowRoot.querySelector(".content")}get canvasElement(){return this.shadowRoot.querySelector(".canvas")}connectedCallback(){this.shadowRoot.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
<slot name="matrix"></slot>
|
|
33
33
|
</div>
|
|
34
34
|
</div>
|
|
35
|
-
`;const s=Number(this.getAttribute("translate-x")||"0"),a=Number(this.getAttribute("translate-y")||"0"),
|
|
35
|
+
`;const s=Number(this.getAttribute("translate-x")||"0"),a=Number(this.getAttribute("translate-y")||"0"),e=Number(this.getAttribute("scale")||"1"),b=Number(this.getAttribute("rotate")||"0"),h=Number(this.getAttribute("min-scale")),l=Number(this.getAttribute("max-scale")),d=Number(this.getAttribute("offset-top")),o=Number(this.getAttribute("offset-right")),r=Number(this.getAttribute("offset-bottom")),N=Number(this.getAttribute("offset-left")),k=this.getAttribute("clamp-bounds")==="true",S=this.getAttribute("rotation")==="true",A=Number(this.getAttribute("zoom-speed")),p=Number(this.getAttribute("translate-speed")),u=Number(this.getAttribute("zoom-speed-apple-trackpad")),g=Number(this.getAttribute("translate-speed-apple-trackpad"));this.engine=new n.Zoompinch(this.contentEl,{top:isNaN(d)?100:d,left:isNaN(N)?0:N,right:isNaN(o)?0:o,bottom:isNaN(r)?0:r},s,a,e,b,isNaN(h)?void 0:h,isNaN(l)?void 0:l,k,S),isNaN(A)||(this.engine.zoomSpeed=A),isNaN(p)||(this.engine.translateSpeed=p),isNaN(u)||(this.engine.zoomSpeedAppleTrackpad=u),isNaN(g)||(this.engine.translateSpeedAppleTrackpad=g),this.contentEl.addEventListener("wheel",t=>this.engine.handleWheel(t)),this.contentEl.addEventListener("gesturestart",t=>this.engine.handleGesturestart(t)),window.addEventListener("gesturechange",t=>this.engine.handleGesturechange(t)),window.addEventListener("gestureend",t=>this.engine.handleGestureend(t)),this.contentEl.addEventListener("mousedown",t=>this.engine.handleMousedown(t)),window.addEventListener("mousemove",t=>this.engine.handleMousemove(t)),window.addEventListener("mouseup",t=>this.engine.handleMouseup(t)),this.contentEl.addEventListener("touchstart",t=>this.engine.handleTouchstart(t)),window.addEventListener("touchmove",t=>this.engine.handleTouchmove(t)),window.addEventListener("touchend",t=>this.engine.handleTouchend(t)),this.engine.addEventListener("update",()=>{const t=this.engine.translateX.toString(),m=this.engine.translateY.toString(),f=this.engine.scale.toString(),w=this.engine.rotate.toString();this.getAttribute("translate-x")!==t&&this.setAttribute("translate-x",t),this.getAttribute("translate-y")!==m&&this.setAttribute("translate-y",m),this.getAttribute("scale")!==f&&this.setAttribute("scale",f),this.getAttribute("rotate")!==w&&this.setAttribute("rotate",w),this.dispatchEvent(new Event("update"))}),this.engine.addEventListener("init",()=>{this.dispatchEvent(new Event("init"))})}disconnectedCallback(){this.engine.destroy()}attributeChangedCallback(s,a,e){if(this.engine)switch(s){case"translate-x":const b=Number(e);this.engine.translateX!==b&&(this.engine.translateX=b,this.engine.update());break;case"translate-y":const h=Number(e);this.engine.translateY!==h&&(this.engine.translateY=h,this.engine.update());break;case"scale":const l=Number(e);this.engine.scale!==l&&(this.engine.scale=l,this.engine.update());break;case"rotate":const d=Number(e);this.engine.rotate!==d&&(this.engine.rotate=d,this.engine.update());break;case"min-scale":const o=Number(e);!isNaN(o)&&this.engine.minScale!==o&&(this.engine.minScale=o,this.engine.update());break;case"max-scale":const r=Number(e);!isNaN(r)&&this.engine.maxScale!==r&&(this.engine.maxScale=r,this.engine.update());break;case"offset-top":case"offset-right":case"offset-bottom":case"offset-left":const N=Number(this.getAttribute("offset-top")||"0"),k=Number(this.getAttribute("offset-right")||"0"),S=Number(this.getAttribute("offset-bottom")||"0"),A=Number(this.getAttribute("offset-left")||"0");this.engine.offset={top:N,right:k,bottom:S,left:A},this.engine.update();break;case"clamp-bounds":const p=e==="true";this.engine.clampBounds!==p&&(this.engine.clampBounds=p,this.engine.setTranslateFromUserGesture(this.engine.translateX,this.engine.translateY),this.engine.update());break;case"rotation":const u=e==="true";this.engine.rotation!==u&&(this.engine.rotation=u,this.engine.update());break;case"zoom-speed":const g=Number(e);isNaN(g)||(this.engine.zoomSpeed=g);break;case"translate-speed":const t=Number(e);isNaN(t)||(this.engine.translateSpeed=t);break;case"zoom-speed-apple-trackpad":const m=Number(e);isNaN(m)||(this.engine.zoomSpeedAppleTrackpad=m);break;case"translate-speed-apple-trackpad":const f=Number(e);isNaN(f)||(this.engine.translateSpeedAppleTrackpad=f);break}}get canvasWidth(){return this.engine.canvasBounds.width}get canvasHeight(){return this.engine.canvasBounds.height}applyTransform(s,a,e){this.engine.applyTransform(s,a,e)}normalizeClientCoords(s,a){return this.engine.normalizeClientCoords(s,a)}composePoint(s,a){return this.engine.composePoint(s,a)}}v(i,"observedAttributes",["translate-x","translate-y","scale","rotate","min-scale","max-scale","offset-top","offset-right","offset-bottom","offset-left","clamp-bounds","rotation","zoom-speed","translate-speed","zoom-speed-apple-trackpad","translate-speed-apple-trackpad"]),customElements.get("zoom-pinch")||customElements.define("zoom-pinch",i)}));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zoompinch/elements",
|
|
3
3
|
"description": "Custom elements wrapper 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-elements.umd.js",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"vite": "^6.4.1"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@zoompinch/core": "^0.0.
|
|
41
|
+
"@zoompinch/core": "^0.0.28"
|
|
42
42
|
},
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|