AkkomaGang/pinch-zoom-element
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add minScale attribute/property (#6)

Browse source
This commit is contained in:
Kenneth Rohde Christiansen 2019-01-16 14:18:09 +01:00 committed by Jake Archibald
parent 43f4e0a84e
commit 713b5d3f89
6 changed files with 76 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/pinch-zoom-min.js vendored
View file

File diff suppressed because one or more lines are too long

3
dist/pinch-zoom.d.ts vendored
View file

@ -22,7 +22,10 @@ export interface ScaleToOpts extends ChangeOptions {
export default class PinchZoom extends HTMLElement {
private _positioningEl?;
private _transform;
static readonly observedAttributes: string[];
constructor();
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
minScale: number;
connectedCallback(): void;
readonly x: number;
readonly y: number;

23
dist/pinch-zoom.js vendored
View file

@ -215,6 +215,7 @@ var PinchZoom = (function () {
var css = "pinch-zoom {\n display: block;\n overflow: hidden;\n touch-action: none;\n --scale: 1;\n --x: 0;\n --y: 0;\n}\n\npinch-zoom > * {\n transform: translate(var(--x), var(--y)) scale(var(--scale));\n transform-origin: 0 0;\n will-change: transform;\n}\n";
styleInject(css);
const minScaleAttr = 'min-scale';
function getDistance(a, b) {
if (!b)
return 0;
@ -274,6 +275,26 @@ var PinchZoom = (function () {
});
this.addEventListener('wheel', event => this._onWheel(event));
}
static get observedAttributes() { return [minScaleAttr]; }
attributeChangedCallback(name, oldValue, newValue) {
if (name === minScaleAttr) {
if (this.scale < this.minScale) {
this.setTransform({ scale: this.minScale });
}
}
}
get minScale() {
const attrValue = this.getAttribute(minScaleAttr);
if (!attrValue)
return MIN_SCALE;
const value = parseFloat(attrValue);
if (Number.isFinite(value))
return Math.max(MIN_SCALE, value);
return MIN_SCALE;
}
set minScale(value) {
this.setAttribute(minScaleAttr, String(value));
}
connectedCallback() {
this._stageElChange();
}
@ -375,7 +396,7 @@ var PinchZoom = (function () {
*/
_updateTransform(scale, x, y, allowChangeEvent) {
// Avoid scaling to zero
if (scale < MIN_SCALE)
if (scale < this.minScale)
return;
// Return if there's no change
if (scale === this.scale &&

23
dist/pinch-zoom.mjs vendored
View file

@ -30,6 +30,7 @@ function styleInject(css, ref) {
var css = "pinch-zoom {\n display: block;\n overflow: hidden;\n touch-action: none;\n --scale: 1;\n --x: 0;\n --y: 0;\n}\n\npinch-zoom > * {\n transform: translate(var(--x), var(--y)) scale(var(--scale));\n transform-origin: 0 0;\n will-change: transform;\n}\n";
styleInject(css);
const minScaleAttr = 'min-scale';
function getDistance(a, b) {
if (!b)
return 0;
@ -89,6 +90,26 @@ class PinchZoom extends HTMLElement {
});
this.addEventListener('wheel', event => this._onWheel(event));
}
static get observedAttributes() { return [minScaleAttr]; }
attributeChangedCallback(name, oldValue, newValue) {
if (name === minScaleAttr) {
if (this.scale < this.minScale) {
this.setTransform({ scale: this.minScale });
}
}
}
get minScale() {
const attrValue = this.getAttribute(minScaleAttr);
if (!attrValue)
return MIN_SCALE;
const value = parseFloat(attrValue);
if (Number.isFinite(value))
return Math.max(MIN_SCALE, value);
return MIN_SCALE;
}
set minScale(value) {
this.setAttribute(minScaleAttr, String(value));
}
connectedCallback() {
this._stageElChange();
}
@ -190,7 +211,7 @@ class PinchZoom extends HTMLElement {
*/
_updateTransform(scale, x, y, allowChangeEvent) {
// Avoid scaling to zero
if (scale < MIN_SCALE)
if (scale < this.minScale)
return;
// Return if there's no change
if (scale === this.scale &&

28
lib/pinch-zoom.ts
View file

@ -29,6 +29,8 @@ interface SetTransformOpts extends ChangeOptions {
type ScaleRelativeToValues = 'container' | 'content';
const minScaleAttr = 'min-scale';
export interface ScaleToOpts extends ChangeOptions {
/** Transform origin. Can be a number, or string percent, eg "50%" */
originX?: number | string;
@ -87,6 +89,8 @@ export default class PinchZoom extends HTMLElement {
// Current transform.
private _transform: SVGMatrix = createMatrix();
static get observedAttributes() { return [minScaleAttr]; }
constructor() {
super();
@ -112,6 +116,28 @@ export default class PinchZoom extends HTMLElement {
this.addEventListener('wheel', event => this._onWheel(event));
}
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
if (name === minScaleAttr) {
if (this.scale < this.minScale) {
this.setTransform({scale: this.minScale});
}
}
}
get minScale(): number {
const attrValue = this.getAttribute(minScaleAttr);
if (!attrValue) return MIN_SCALE;
const value = parseFloat(attrValue);
if (Number.isFinite(value)) return Math.max(MIN_SCALE, value);
return MIN_SCALE;
}
set minScale(value: number) {
this.setAttribute(minScaleAttr, String(value));
}
connectedCallback() {
this._stageElChange();
}
@ -244,7 +270,7 @@ export default class PinchZoom extends HTMLElement {
*/
private _updateTransform(scale: number, x: number, y: number, allowChangeEvent: boolean) {
// Avoid scaling to zero
if (scale < MIN_SCALE) return;
if (scale < this.minScale) return;
// Return if there's no change
if (

3
package-lock.json generated
View file

@ -1481,8 +1481,7 @@
"pointer-tracker": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/pointer-tracker/-/pointer-tracker-2.0.3.tgz",
"integrity": "sha512-PURBF4oc45JPECuguX6oPL3pJU5AlF0Nb/4sZdmqzPNAkV4LGL9MJMqb0smWDtmQ0F0KpbxEJn4/Lf5ugN1keQ==",
"dev": true
"integrity": "sha512-PURBF4oc45JPECuguX6oPL3pJU5AlF0Nb/4sZdmqzPNAkV4LGL9MJMqb0smWDtmQ0F0KpbxEJn4/Lf5ugN1keQ=="
},
"postcss": {
"version": "6.0.23",