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

Do not propagate click if the event is handled

Browse source
This commit is contained in:
Tusooa Zhu 2021-08-02 20:58:32 -04:00
parent de150c0105
commit fbb4d71b1c
No known key found for this signature in database
GPG key ID: 7B467EDE43A08224
7 changed files with 70 additions and 1 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

13
dist/pinch-zoom.cjs.js vendored
View file

@ -76,6 +76,7 @@ function createPoint() {
const MIN_SCALE = 0.01;
const ALLOW_PAN_MIN_SCALE = -1;
const RESET_TO_MIN_SCALE_LIMIT = -1;
const BUTTON_LEFT = 0;
const roundedCmp = (a, b) => {
return Math.round(a * 100) - Math.round(b * 100);
};
@ -114,6 +115,7 @@ class PinchZoom extends HTMLElement {
},
});
this.addEventListener('wheel', event => this._onWheel(event));
this.addEventListener('click', event => this._onClick(event, pointerTracker));
}
static get observedAttributes() { return [minScaleAttr]; }
attributeChangedCallback(name, oldValue, newValue) {
@ -438,6 +440,17 @@ class PinchZoom extends HTMLElement {
});
}
}
_onClick(event, pointerTracker) {
// We never handle non-left-clicks
if (event.button !== BUTTON_LEFT) {
return;
}
const wasPanning = pointerTracker.currentPointers.length === 0;
const handled = !(wasPanning && !this._allowPan());
if (handled) {
this._maybeStopPropagate(event);
}
}
}
customElements.define('pinch-zoom', PinchZoom);

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

@ -64,5 +64,6 @@ export default class PinchZoom extends HTMLElement {
private _maybeStopPropagate;
private _allowPan;
private _maybeEmitCancel;
private _onClick;
}
export {};

13
dist/pinch-zoom.es.js vendored
View file

@ -72,6 +72,7 @@ function createPoint() {
const MIN_SCALE = 0.01;
const ALLOW_PAN_MIN_SCALE = -1;
const RESET_TO_MIN_SCALE_LIMIT = -1;
const BUTTON_LEFT = 0;
const roundedCmp = (a, b) => {
return Math.round(a * 100) - Math.round(b * 100);
};
@ -110,6 +111,7 @@ class PinchZoom extends HTMLElement {
},
});
this.addEventListener('wheel', event => this._onWheel(event));
this.addEventListener('click', event => this._onClick(event, pointerTracker));
}
static get observedAttributes() { return [minScaleAttr]; }
attributeChangedCallback(name, oldValue, newValue) {
@ -434,6 +436,17 @@ class PinchZoom extends HTMLElement {
});
}
}
_onClick(event, pointerTracker) {
// We never handle non-left-clicks
if (event.button !== BUTTON_LEFT) {
return;
}
const wasPanning = pointerTracker.currentPointers.length === 0;
const handled = !(wasPanning && !this._allowPan());
if (handled) {
this._maybeStopPropagate(event);
}
}
}
customElements.define('pinch-zoom', PinchZoom);

13
dist/pinch-zoom.js vendored
View file

@ -257,6 +257,7 @@ var PinchZoom = (function () {
const MIN_SCALE = 0.01;
const ALLOW_PAN_MIN_SCALE = -1;
const RESET_TO_MIN_SCALE_LIMIT = -1;
const BUTTON_LEFT = 0;
const roundedCmp = (a, b) => {
return Math.round(a * 100) - Math.round(b * 100);
};
@ -295,6 +296,7 @@ var PinchZoom = (function () {
},
});
this.addEventListener('wheel', event => this._onWheel(event));
this.addEventListener('click', event => this._onClick(event, pointerTracker));
}
static get observedAttributes() { return [minScaleAttr]; }
attributeChangedCallback(name, oldValue, newValue) {
@ -619,6 +621,17 @@ var PinchZoom = (function () {
});
}
}
_onClick(event, pointerTracker) {
// We never handle non-left-clicks
if (event.button !== BUTTON_LEFT) {
return;
}
const wasPanning = pointerTracker.currentPointers.length === 0;
const handled = !(wasPanning && !this._allowPan());
if (handled) {
this._maybeStopPropagate(event);
}
}
}
customElements.define('pinch-zoom', PinchZoom);

13
dist/pinch-zoom.mjs vendored
View file

@ -72,6 +72,7 @@ function createPoint() {
const MIN_SCALE = 0.01;
const ALLOW_PAN_MIN_SCALE = -1;
const RESET_TO_MIN_SCALE_LIMIT = -1;
const BUTTON_LEFT = 0;
const roundedCmp = (a, b) => {
return Math.round(a * 100) - Math.round(b * 100);
};
@ -110,6 +111,7 @@ class PinchZoom extends HTMLElement {
},
});
this.addEventListener('wheel', event => this._onWheel(event));
this.addEventListener('click', event => this._onClick(event, pointerTracker));
}
static get observedAttributes() { return [minScaleAttr]; }
attributeChangedCallback(name, oldValue, newValue) {
@ -434,6 +436,17 @@ class PinchZoom extends HTMLElement {
});
}
}
_onClick(event, pointerTracker) {
// We never handle non-left-clicks
if (event.button !== BUTTON_LEFT) {
return;
}
const wasPanning = pointerTracker.currentPointers.length === 0;
const handled = !(wasPanning && !this._allowPan());
if (handled) {
this._maybeStopPropagate(event);
}
}
}
customElements.define('pinch-zoom', PinchZoom);

16
lib/pinch-zoom.ts
View file

@ -91,6 +91,8 @@ const MIN_SCALE = 0.01;
const ALLOW_PAN_MIN_SCALE = -1;
const RESET_TO_MIN_SCALE_LIMIT = -1;
const BUTTON_LEFT = 0;
const roundedCmp = (a: number, b: number) => {
return Math.round(a * 100) - Math.round(b * 100)
}
@ -142,6 +144,7 @@ export default class PinchZoom extends HTMLElement {
});
this.addEventListener('wheel', event => this._onWheel(event));
this.addEventListener('click', event => this._onClick(event, pointerTracker));
}
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
@ -552,4 +555,17 @@ export default class PinchZoom extends HTMLElement {
});
}
}
private _onClick(event: MouseEvent, pointerTracker: PointerTracker) {
// We never handle non-left-clicks
if (event.button !== BUTTON_LEFT) {
return;
}
const wasPanning = pointerTracker.currentPointers.length === 0;
const handled = !(wasPanning && !this._allowPan());
if (handled) {
this._maybeStopPropagate(event);
}
}
}