@web-atoms/web-controls 2.4.41 → 2.4.43
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/dist/basic/PinchZoomView.d.ts.map +1 -1
- package/dist/basic/PinchZoomView.js +8 -4
- package/dist/basic/PinchZoomView.js.map +1 -1
- package/dist/basic/ZoomView.d.ts +21 -0
- package/dist/basic/ZoomView.d.ts.map +1 -0
- package/dist/basic/ZoomView.js +241 -0
- package/dist/basic/ZoomView.js.map +1 -0
- package/dist/basic/styles/pinch-zoom-view-style.js +9 -1
- package/dist/basic/styles/pinch-zoom-view-style.js.map +1 -1
- package/dist/basic/styles/zoom-view-style.d.ts +2 -0
- package/dist/basic/styles/zoom-view-style.d.ts.map +1 -0
- package/dist/basic/styles/zoom-view-style.js +82 -0
- package/dist/basic/styles/zoom-view-style.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/basic/PinchZoomView.tsx +15 -3
- package/src/basic/ZoomView.tsx +270 -0
- package/src/basic/styles/pinch-zoom-view-style.ts +11 -1
- package/src/basic/styles/zoom-view-style.ts +73 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PinchZoomView.d.ts","sourceRoot":"","sources":["../../src/basic/PinchZoomView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,gCAAgC,CAAC;AAoBxC,MAAM,WAAW,KAAK;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,WAAW;IAG3C,IAAI,EAAE,KAAK,CAAC;IAGZ,MAAM,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,OAAO,CAAU;IAEzB,OAAO,CAAC,KAAK,CAAmB;IAEhC,OAAO,CAAC,cAAc,CAAiB;IAEvC,SAAS,CAAC,SAAS;
|
|
1
|
+
{"version":3,"file":"PinchZoomView.d.ts","sourceRoot":"","sources":["../../src/basic/PinchZoomView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,gCAAgC,CAAC;AAoBxC,MAAM,WAAW,KAAK;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,WAAW;IAG3C,IAAI,EAAE,KAAK,CAAC;IAGZ,MAAM,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,OAAO,CAAU;IAEzB,OAAO,CAAC,KAAK,CAAmB;IAEhC,OAAO,CAAC,cAAc,CAAiB;IAEvC,SAAS,CAAC,SAAS;IAiMnB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;CAwCrB"}
|
|
@@ -45,6 +45,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
|
|
|
45
45
|
y: 0
|
|
46
46
|
};
|
|
47
47
|
this.element.dataset.pinchZoom = "true";
|
|
48
|
+
this.element.draggable = false;
|
|
48
49
|
this.render(XNode.create("div", null, XNode.create("div", {
|
|
49
50
|
class: "image-container"
|
|
50
51
|
}, XNode.create("img", {
|
|
@@ -58,7 +59,7 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
|
|
|
58
59
|
class: Bind.oneWay(() => this.loading ? "spinner fa-duotone fa-spinner fa-spin" : "hide")
|
|
59
60
|
}), XNode.create("i", {
|
|
60
61
|
"event-click": () => this.updateZoom(),
|
|
61
|
-
class: Bind.oneWay(() => this.zoom.scale ? "scale
|
|
62
|
+
class: Bind.oneWay(() => this.zoom.scale ? "scale" : "hide"),
|
|
62
63
|
title: "Display entire image"
|
|
63
64
|
})));
|
|
64
65
|
this.imageContainer = this.element.firstElementChild;
|
|
@@ -71,9 +72,6 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
|
|
|
71
72
|
previous = center(evs);
|
|
72
73
|
let previousDistance = undefined;
|
|
73
74
|
touchMoveDisposable !== null && touchMoveDisposable !== void 0 ? touchMoveDisposable : touchMoveDisposable = this.bindEvent(scrollView, "touchmove", ev => {
|
|
74
|
-
var _a;
|
|
75
|
-
ev.preventDefault();
|
|
76
|
-
(_a = ev.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(ev);
|
|
77
75
|
let {
|
|
78
76
|
x,
|
|
79
77
|
y,
|
|
@@ -82,6 +80,8 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
|
|
|
82
80
|
scale
|
|
83
81
|
} = this.zoom;
|
|
84
82
|
if (ev.touches.length === 2) {
|
|
83
|
+
ev.preventDefault();
|
|
84
|
+
ev.stopImmediatePropagation();
|
|
85
85
|
const rect = this.element.getBoundingClientRect();
|
|
86
86
|
const first = ev.touches[0];
|
|
87
87
|
const second = ev.touches[1];
|
|
@@ -131,6 +131,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
|
|
|
131
131
|
});
|
|
132
132
|
let mouseMoveDisposable;
|
|
133
133
|
let mouseUpDisposable;
|
|
134
|
+
this.bindEvent(scrollView, "dragstart", ev => {
|
|
135
|
+
ev.preventDefault();
|
|
136
|
+
ev.stopImmediatePropagation();
|
|
137
|
+
});
|
|
134
138
|
this.bindEvent(scrollView, "mousedown", ev => {
|
|
135
139
|
this.element.dataset.state = "grabbing";
|
|
136
140
|
previous = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["PinchZoomView","center","distance","_export","setters","_tslib","Bind","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreBindableProperty","BindableProperty","_webAtomsCoreDistCoreXNode","XNode","_webAtomsCoreDistWebControlsAtomControl","AtomControl","_stylesPinchZoomViewStyle","execute","ev","touch","touches","x","clientX","y","clientY","first","second","Math","hypot","pageX","pageY","preCreate","element","title","loading","zoom","scale","anchorX","anchorY","dataset","pinchZoom","render","create","class","src","oneWay","getSource","source","event-load","updateZoom","event-click","imageContainer","firstElementChild","image","scrollView","previous","touchMoveDisposable","touchEndDisposable","bindEvent","evs","previousDistance","undefined","
|
|
1
|
+
{"version":3,"names":["PinchZoomView","center","distance","_export","setters","_tslib","Bind","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreBindableProperty","BindableProperty","_webAtomsCoreDistCoreXNode","XNode","_webAtomsCoreDistWebControlsAtomControl","AtomControl","_stylesPinchZoomViewStyle","execute","ev","touch","touches","x","clientX","y","clientY","first","second","Math","hypot","pageX","pageY","preCreate","element","title","loading","zoom","scale","anchorX","anchorY","dataset","pinchZoom","draggable","render","create","class","src","oneWay","getSource","source","event-load","updateZoom","event-click","imageContainer","firstElementChild","image","scrollView","previous","touchMoveDisposable","touchEndDisposable","bindEvent","evs","previousDistance","undefined","length","preventDefault","stopImmediatePropagation","rect","getBoundingClientRect","left","top","newScale","cp","dispose","mouseMoveDisposable","mouseUpDisposable","state","e","_a","call","target","currentTarget","deltaY","offsetX","offsetY","passive","text","naturalHeight","maxHeight","clientWidth","clientHeight","s","naturalWidth","newWidth","newHeight","style","maxWidth","transform","scaleFactor","transformOrigin","__decorate"],"sources":["../../src/basic/PinchZoomView.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
|
|
2
|
+
import "./styles/zoom-view-style";
|
|
3
|
+
export interface IZoom {
|
|
4
|
+
anchorX: number;
|
|
5
|
+
anchorY: number;
|
|
6
|
+
x: number;
|
|
7
|
+
y: number;
|
|
8
|
+
scale: number;
|
|
9
|
+
}
|
|
10
|
+
export default class ZoomView extends AtomControl {
|
|
11
|
+
zoom: IZoom;
|
|
12
|
+
source: string;
|
|
13
|
+
private loading;
|
|
14
|
+
private image;
|
|
15
|
+
private scrollDiv;
|
|
16
|
+
private imageContainer;
|
|
17
|
+
protected preCreate(): void;
|
|
18
|
+
private getSource;
|
|
19
|
+
private updateZoom;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=ZoomView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ZoomView.d.ts","sourceRoot":"","sources":["../../src/basic/ZoomView.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,0BAA0B,CAAC;AAoBlC,MAAM,WAAW,KAAK;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,WAAW;IAGtC,IAAI,EAAE,KAAK,CAAC;IAGZ,MAAM,EAAE,MAAM,CAAC;IAGtB,OAAO,CAAC,OAAO,CAAU;IAEzB,OAAO,CAAC,KAAK,CAAmB;IAEhC,OAAO,CAAC,SAAS,CAAiB;IAElC,OAAO,CAAC,cAAc,CAAiB;IAEvC,SAAS,CAAC,SAAS;IAoKnB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;CAgDrB"}
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dist/core/BindableProperty", "@web-atoms/core/dist/core/XNode", "@web-atoms/core/dist/web/controls/AtomControl", "./styles/zoom-view-style"], function (_export, _context) {
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var __decorate, __metadata, Bind, BindableProperty, XNode, AtomControl, ZoomView, center, distance;
|
|
5
|
+
_export("default", void 0);
|
|
6
|
+
return {
|
|
7
|
+
setters: [function (_tslib) {
|
|
8
|
+
__decorate = _tslib.__decorate;
|
|
9
|
+
__metadata = _tslib.__metadata;
|
|
10
|
+
}, function (_webAtomsCoreDistCoreBind) {
|
|
11
|
+
Bind = _webAtomsCoreDistCoreBind.default;
|
|
12
|
+
}, function (_webAtomsCoreDistCoreBindableProperty) {
|
|
13
|
+
BindableProperty = _webAtomsCoreDistCoreBindableProperty.BindableProperty;
|
|
14
|
+
}, function (_webAtomsCoreDistCoreXNode) {
|
|
15
|
+
XNode = _webAtomsCoreDistCoreXNode.default;
|
|
16
|
+
}, function (_webAtomsCoreDistWebControlsAtomControl) {
|
|
17
|
+
AtomControl = _webAtomsCoreDistWebControlsAtomControl.AtomControl;
|
|
18
|
+
}, function (_stylesZoomViewStyle) {}],
|
|
19
|
+
execute: function () {
|
|
20
|
+
center = ev => {
|
|
21
|
+
const touch = ev.touches[0];
|
|
22
|
+
if (touch) {
|
|
23
|
+
return {
|
|
24
|
+
x: touch.clientX,
|
|
25
|
+
y: touch.clientY
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
return {
|
|
29
|
+
x: 0,
|
|
30
|
+
y: 0
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
distance = (first, second) => {
|
|
34
|
+
return Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY);
|
|
35
|
+
};
|
|
36
|
+
_export("default", ZoomView = class ZoomView extends AtomControl {
|
|
37
|
+
preCreate() {
|
|
38
|
+
this.element.title = "Use mouse wheel to zoom";
|
|
39
|
+
this.loading = false;
|
|
40
|
+
this.zoom = {
|
|
41
|
+
scale: 0,
|
|
42
|
+
anchorX: 0,
|
|
43
|
+
anchorY: 0,
|
|
44
|
+
x: 0,
|
|
45
|
+
y: 0
|
|
46
|
+
};
|
|
47
|
+
this.element.setAttribute("data-zoom-view", "zoom-view");
|
|
48
|
+
this.element.draggable = false;
|
|
49
|
+
this.render(XNode.create("div", null, XNode.create("div", {
|
|
50
|
+
class: "scroll"
|
|
51
|
+
}, XNode.create("img", {
|
|
52
|
+
class: "image-container",
|
|
53
|
+
src: Bind.oneWay(() => this.getSource(this.source)),
|
|
54
|
+
"style-opacity": Bind.oneWay(() => this.loading ? "0.3" : "1"),
|
|
55
|
+
"event-load": () => {
|
|
56
|
+
this.loading = false;
|
|
57
|
+
this.updateZoom(this.zoom);
|
|
58
|
+
}
|
|
59
|
+
})), XNode.create("i", {
|
|
60
|
+
class: Bind.oneWay(() => this.loading ? "spinner fa-duotone fa-spinner fa-spin" : "hide")
|
|
61
|
+
}), XNode.create("i", {
|
|
62
|
+
"event-click": () => this.updateZoom(),
|
|
63
|
+
class: Bind.oneWay(() => this.zoom.scale ? "scale" : "hide"),
|
|
64
|
+
title: "Display entire image"
|
|
65
|
+
})));
|
|
66
|
+
this.scrollDiv = this.element.firstElementChild;
|
|
67
|
+
this.imageContainer = this.scrollDiv.firstElementChild;
|
|
68
|
+
this.image = this.imageContainer;
|
|
69
|
+
const scrollView = this.element;
|
|
70
|
+
let previous;
|
|
71
|
+
let touchMoveDisposable;
|
|
72
|
+
let touchEndDisposable;
|
|
73
|
+
this.bindEvent(scrollView, "touchstart", evs => {
|
|
74
|
+
previous = center(evs);
|
|
75
|
+
let previousDistance = undefined;
|
|
76
|
+
touchMoveDisposable !== null && touchMoveDisposable !== void 0 ? touchMoveDisposable : touchMoveDisposable = this.bindEvent(scrollView, "touchmove", ev => {
|
|
77
|
+
let {
|
|
78
|
+
x,
|
|
79
|
+
y,
|
|
80
|
+
anchorX,
|
|
81
|
+
anchorY,
|
|
82
|
+
scale
|
|
83
|
+
} = this.zoom;
|
|
84
|
+
if (ev.touches.length === 2) {
|
|
85
|
+
ev.preventDefault();
|
|
86
|
+
ev.stopImmediatePropagation();
|
|
87
|
+
const rect = this.element.getBoundingClientRect();
|
|
88
|
+
const first = ev.touches[0];
|
|
89
|
+
const second = ev.touches[1];
|
|
90
|
+
anchorX = (first.clientX + second.clientX) / 2 - rect.left;
|
|
91
|
+
anchorY = (first.clientY + second.clientY) / 2 - rect.top;
|
|
92
|
+
const newScale = distance(first, second);
|
|
93
|
+
if (previousDistance === void 0) {
|
|
94
|
+
previousDistance = newScale;
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
if (previousDistance === newScale) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
scale += newScale - previousDistance;
|
|
101
|
+
previousDistance = newScale;
|
|
102
|
+
this.updateZoom({
|
|
103
|
+
anchorX,
|
|
104
|
+
anchorY,
|
|
105
|
+
x,
|
|
106
|
+
y,
|
|
107
|
+
scale
|
|
108
|
+
});
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
touchEndDisposable !== null && touchEndDisposable !== void 0 ? touchEndDisposable : touchEndDisposable = this.bindEvent(scrollView, "touchend", ev => {
|
|
113
|
+
touchMoveDisposable === null || touchMoveDisposable === void 0 ? void 0 : touchMoveDisposable.dispose();
|
|
114
|
+
touchEndDisposable === null || touchEndDisposable === void 0 ? void 0 : touchEndDisposable.dispose();
|
|
115
|
+
touchMoveDisposable = undefined;
|
|
116
|
+
touchEndDisposable = undefined;
|
|
117
|
+
previousDistance = undefined;
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
let mouseMoveDisposable;
|
|
121
|
+
let mouseUpDisposable;
|
|
122
|
+
this.bindEvent(scrollView, "dragstart", ev => {
|
|
123
|
+
ev.preventDefault();
|
|
124
|
+
ev.stopImmediatePropagation();
|
|
125
|
+
});
|
|
126
|
+
this.bindEvent(scrollView, "mousedown", ev => {
|
|
127
|
+
this.element.dataset.state = "grabbing";
|
|
128
|
+
previous = {
|
|
129
|
+
x: ev.clientX,
|
|
130
|
+
y: ev.clientY
|
|
131
|
+
};
|
|
132
|
+
mouseMoveDisposable !== null && mouseMoveDisposable !== void 0 ? mouseMoveDisposable : mouseMoveDisposable = this.bindEvent(scrollView, "mousemove", e => {
|
|
133
|
+
var _a;
|
|
134
|
+
e.preventDefault();
|
|
135
|
+
(_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
|
|
136
|
+
const cp = {
|
|
137
|
+
x: e.clientX,
|
|
138
|
+
y: e.clientY
|
|
139
|
+
};
|
|
140
|
+
const diffX = previous.x - cp.x;
|
|
141
|
+
const diffY = previous.y - cp.y;
|
|
142
|
+
previous = cp;
|
|
143
|
+
this.scrollDiv.scrollBy(diffX, diffY);
|
|
144
|
+
});
|
|
145
|
+
mouseUpDisposable !== null && mouseUpDisposable !== void 0 ? mouseUpDisposable : mouseUpDisposable = this.bindEvent(scrollView, "mouseup", e => {
|
|
146
|
+
var _a;
|
|
147
|
+
e.preventDefault();
|
|
148
|
+
(_a = e.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(e);
|
|
149
|
+
this.element.dataset.state = "";
|
|
150
|
+
previous = null;
|
|
151
|
+
mouseMoveDisposable.dispose();
|
|
152
|
+
mouseUpDisposable.dispose();
|
|
153
|
+
mouseMoveDisposable = undefined;
|
|
154
|
+
mouseUpDisposable = undefined;
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
this.bindEvent(scrollView, "wheel", ev => {
|
|
158
|
+
var _a;
|
|
159
|
+
ev.preventDefault();
|
|
160
|
+
(_a = ev.stopImmediatePropagation) === null || _a === void 0 ? void 0 : _a.call(ev);
|
|
161
|
+
const newScale = this.zoom.scale - (ev.deltaY < 0 ? -50 : 50);
|
|
162
|
+
const anchorX = ev.offsetX;
|
|
163
|
+
const anchorY = ev.offsetY;
|
|
164
|
+
const {
|
|
165
|
+
x,
|
|
166
|
+
y
|
|
167
|
+
} = this.zoom;
|
|
168
|
+
this.updateZoom({
|
|
169
|
+
anchorX,
|
|
170
|
+
anchorY,
|
|
171
|
+
x,
|
|
172
|
+
y,
|
|
173
|
+
scale: newScale < 0 ? 0 : newScale
|
|
174
|
+
});
|
|
175
|
+
}, undefined, {
|
|
176
|
+
passive: false
|
|
177
|
+
});
|
|
178
|
+
}
|
|
179
|
+
getSource(text) {
|
|
180
|
+
if (text) {
|
|
181
|
+
this.loading = true;
|
|
182
|
+
}
|
|
183
|
+
return text;
|
|
184
|
+
}
|
|
185
|
+
updateZoom(zoom = {
|
|
186
|
+
x: 0,
|
|
187
|
+
y: 0,
|
|
188
|
+
anchorX: 0,
|
|
189
|
+
anchorY: 0,
|
|
190
|
+
scale: 0
|
|
191
|
+
}) {
|
|
192
|
+
const {
|
|
193
|
+
anchorX,
|
|
194
|
+
anchorY,
|
|
195
|
+
x,
|
|
196
|
+
y
|
|
197
|
+
} = zoom;
|
|
198
|
+
let {
|
|
199
|
+
scale
|
|
200
|
+
} = zoom;
|
|
201
|
+
this.zoom = zoom;
|
|
202
|
+
const image = this.image;
|
|
203
|
+
if (!image.naturalHeight) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
const maxHeight = this.element.clientWidth > this.element.clientHeight;
|
|
207
|
+
const s = maxHeight ? this.element.clientWidth / image.naturalWidth : this.element.clientHeight / image.naturalHeight;
|
|
208
|
+
if (scale <= 0) {
|
|
209
|
+
scale = 0;
|
|
210
|
+
}
|
|
211
|
+
const {
|
|
212
|
+
clientWidth,
|
|
213
|
+
clientHeight
|
|
214
|
+
} = this.element;
|
|
215
|
+
if (scale <= 0) {
|
|
216
|
+
this.element.scrollTo(0, 0);
|
|
217
|
+
this.imageContainer.style.transform = ``;
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
const scaleFactor = (clientWidth + scale) / clientWidth;
|
|
221
|
+
this.imageContainer.style.transformOrigin = `${anchorX}px ${anchorY}px`;
|
|
222
|
+
this.imageContainer.style.transform = `scale(${scaleFactor})`;
|
|
223
|
+
const e = this.imageContainer.getBoundingClientRect();
|
|
224
|
+
const left = -e.left;
|
|
225
|
+
const top = -e.top;
|
|
226
|
+
this.imageContainer.style.transformOrigin = "0 0";
|
|
227
|
+
const de = this.imageContainer.getBoundingClientRect();
|
|
228
|
+
this.scrollDiv.scrollTo({
|
|
229
|
+
left: left + de.left,
|
|
230
|
+
top: top + de.top,
|
|
231
|
+
behavior: "instant"
|
|
232
|
+
});
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
__decorate([BindableProperty, __metadata("design:type", Object)], ZoomView.prototype, "zoom", void 0);
|
|
236
|
+
__decorate([BindableProperty, __metadata("design:type", String)], ZoomView.prototype, "source", void 0);
|
|
237
|
+
__decorate([BindableProperty, __metadata("design:type", Boolean)], ZoomView.prototype, "loading", void 0);
|
|
238
|
+
}
|
|
239
|
+
};
|
|
240
|
+
});
|
|
241
|
+
//# sourceMappingURL=ZoomView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["ZoomView","center","distance","_export","setters","_tslib","Bind","_webAtomsCoreDistCoreBind","default","_webAtomsCoreDistCoreBindableProperty","BindableProperty","_webAtomsCoreDistCoreXNode","XNode","_webAtomsCoreDistWebControlsAtomControl","AtomControl","_stylesZoomViewStyle","execute","ev","touch","touches","x","clientX","y","clientY","first","second","Math","hypot","pageX","pageY","preCreate","element","title","loading","zoom","scale","anchorX","anchorY","setAttribute","draggable","render","create","class","src","oneWay","getSource","source","event-load","updateZoom","event-click","scrollDiv","firstElementChild","imageContainer","image","scrollView","previous","touchMoveDisposable","touchEndDisposable","bindEvent","evs","previousDistance","undefined","length","preventDefault","stopImmediatePropagation","rect","getBoundingClientRect","left","top","newScale","dispose","mouseMoveDisposable","mouseUpDisposable","dataset","state","e","_a","call","cp","diffX","diffY","scrollBy","deltaY","offsetX","offsetY","passive","text","naturalHeight","maxHeight","clientWidth","clientHeight","s","naturalWidth","scrollTo","style","transform","scaleFactor","transformOrigin","de","behavior","__decorate"],"sources":["../../src/basic/ZoomView.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
|
-
var styled;
|
|
4
|
+
var styled, svgAsCssDataUrl, svg;
|
|
5
5
|
return {
|
|
6
6
|
setters: [function (_webAtomsCoreDistStyleStyled) {
|
|
7
7
|
styled = _webAtomsCoreDistStyleStyled.default;
|
|
8
|
+
svgAsCssDataUrl = _webAtomsCoreDistStyleStyled.svgAsCssDataUrl;
|
|
8
9
|
}],
|
|
9
10
|
execute: function () {
|
|
11
|
+
svg = svgAsCssDataUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M502.6 54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L336 130.7 336 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 128c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-50.7 0L502.6 54.6zM80 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l50.7 0L9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L176 381.3l0 50.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128c0-17.7-14.3-32-32-32L80 272z"/></svg>`);
|
|
10
12
|
styled.css`
|
|
11
13
|
position: relative;
|
|
12
14
|
overflow: hidden;
|
|
@@ -25,6 +27,12 @@ System.register(["@web-atoms/core/dist/style/styled"], function (_export, _conte
|
|
|
25
27
|
background-color: white;
|
|
26
28
|
padding: 4px;
|
|
27
29
|
color: black;
|
|
30
|
+
width: 30px;
|
|
31
|
+
height: 30px;
|
|
32
|
+
background-image: ${svg};
|
|
33
|
+
background-position: 2px 2px;
|
|
34
|
+
background-size: 20px 20px;
|
|
35
|
+
background-repeat: no-repeat;
|
|
28
36
|
}
|
|
29
37
|
|
|
30
38
|
& > .image-container {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["styled","_webAtomsCoreDistStyleStyled","default","execute","css","installGlobal"],"sources":["../../../src/basic/styles/pinch-zoom-view-style.ts"],"sourcesContent":[null],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"names":["styled","_webAtomsCoreDistStyleStyled","default","svgAsCssDataUrl","execute","svg","css","installGlobal"],"sources":["../../../src/basic/styles/pinch-zoom-view-style.ts"],"sourcesContent":[null],"mappings":";;;;;;MACOA,MAAM,GAAAC,4BAAA,CAAAC,OAAA;MAAIC,eAAe,GAAAF,4BAAA,CAAfE,eAAe;IAAA;IAAAC,OAAA,WAAAA,CAAA;MAE1BC,GAAG,GAAGF,eAAe,CAAC,8nBAA8nB,CAAC;MAGvpBH,MAAM,CAACM,GAAI;;;;;;;;;;;;;;;;;;;;gCAoBiBD,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkC9B,CAACE,aAAa,CAAC,sBAAsB,CAAC;IAAC;EAAA;AAAA","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zoom-view-style.d.ts","sourceRoot":"","sources":["../../../src/basic/styles/zoom-view-style.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
System.register(["@web-atoms/core/dist/style/styled"], function (_export, _context) {
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
var styled, svgAsCssDataUrl, svg;
|
|
5
|
+
return {
|
|
6
|
+
setters: [function (_webAtomsCoreDistStyleStyled) {
|
|
7
|
+
styled = _webAtomsCoreDistStyleStyled.default;
|
|
8
|
+
svgAsCssDataUrl = _webAtomsCoreDistStyleStyled.svgAsCssDataUrl;
|
|
9
|
+
}],
|
|
10
|
+
execute: function () {
|
|
11
|
+
svg = svgAsCssDataUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M502.6 54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L336 130.7 336 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 128c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-50.7 0L502.6 54.6zM80 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l50.7 0L9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L176 381.3l0 50.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128c0-17.7-14.3-32-32-32L80 272z"/></svg>`);
|
|
12
|
+
styled.css`
|
|
13
|
+
position: relative;
|
|
14
|
+
cursor: grab;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
|
|
17
|
+
&[data-state=grabbing] {
|
|
18
|
+
cursor: grabbing;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
& > div {
|
|
22
|
+
|
|
23
|
+
position: absolute;
|
|
24
|
+
left: 0;
|
|
25
|
+
top: 0;
|
|
26
|
+
right: 0;
|
|
27
|
+
bottom: 0;
|
|
28
|
+
scrollbar-width: none;
|
|
29
|
+
overflow: auto;
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
& > .image-container {
|
|
33
|
+
position: absolute;
|
|
34
|
+
left: 0;
|
|
35
|
+
top: 0;
|
|
36
|
+
right: 0;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
object-fit: contain;
|
|
40
|
+
width: 100%;
|
|
41
|
+
height: 100%;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
& > .scale {
|
|
47
|
+
position: absolute;
|
|
48
|
+
right: 10px;
|
|
49
|
+
top: 10px;
|
|
50
|
+
border: solid 2px darkgray;
|
|
51
|
+
border-radius: 4px;
|
|
52
|
+
background-color: white;
|
|
53
|
+
padding: 4px;
|
|
54
|
+
color: black;
|
|
55
|
+
width: 30px;
|
|
56
|
+
height: 30px;
|
|
57
|
+
background-image: ${svg};
|
|
58
|
+
background-position: 2px 2px;
|
|
59
|
+
background-size: 20px 20px;
|
|
60
|
+
background-repeat: no-repeat;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
& > .spinner {
|
|
64
|
+
position: absolute;
|
|
65
|
+
left: 0;
|
|
66
|
+
top: 0;
|
|
67
|
+
right: 0;
|
|
68
|
+
bottom: 0;
|
|
69
|
+
display: inline-grid;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-items: center;
|
|
72
|
+
z-index: 10;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
& > .hide {
|
|
76
|
+
display: none;
|
|
77
|
+
}
|
|
78
|
+
`.installGlobal("div[data-zoom-view]");
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
});
|
|
82
|
+
//# sourceMappingURL=zoom-view-style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["styled","_webAtomsCoreDistStyleStyled","default","svgAsCssDataUrl","execute","svg","css","installGlobal"],"sources":["../../../src/basic/styles/zoom-view-style.ts"],"sourcesContent":[null],"mappings":";;;;;;MACOA,MAAM,GAAAC,4BAAA,CAAAC,OAAA;MAAIC,eAAe,GAAAF,4BAAA,CAAfE,eAAe;IAAA;IAAAC,OAAA,WAAAA,CAAA;MAE1BC,GAAG,GAAGF,eAAe,CAAC,8nBAA8nB,CAAC;MAGvpBH,MAAM,CAACM,GAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA6CiBD,GAAG;;;;;;;;;;;;;;;;;;;;;KAqB9B,CAACE,aAAa,CAAC,qBAAqB,CAAC;IAAC;EAAA;AAAA","ignoreList":[]}
|