mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-14 01:37:26 +00:00
Keep relative screen division while resizing
This commit is contained in:
@@ -18,6 +18,10 @@ export default class TwoUp extends HTMLElement {
|
|||||||
* The position of the split in pixels.
|
* The position of the split in pixels.
|
||||||
*/
|
*/
|
||||||
private _position = 0;
|
private _position = 0;
|
||||||
|
/**
|
||||||
|
* The position of the split in %.
|
||||||
|
*/
|
||||||
|
private _relativePosition = 0.5;
|
||||||
/**
|
/**
|
||||||
* The value of _position when the pointer went down.
|
* The value of _position when the pointer went down.
|
||||||
*/
|
*/
|
||||||
@@ -85,7 +89,8 @@ export default class TwoUp extends HTMLElement {
|
|||||||
// Set the initial position of the handle.
|
// Set the initial position of the handle.
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
const bounds = this.getBoundingClientRect();
|
const bounds = this.getBoundingClientRect();
|
||||||
this._position = (this.orientation === 'vertical' ? bounds.height : bounds.width) / 2;
|
this._position = (this.orientation === 'vertical' ?
|
||||||
|
bounds.height : bounds.width) * this._relativePosition;
|
||||||
this._setPosition();
|
this._setPosition();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -146,6 +151,7 @@ export default class TwoUp extends HTMLElement {
|
|||||||
|
|
||||||
// Clamp position to element bounds.
|
// Clamp position to element bounds.
|
||||||
this._position = Math.max(0, Math.min(this._position, bounds[dimensionAxis]));
|
this._position = Math.max(0, Math.min(this._position, bounds[dimensionAxis]));
|
||||||
|
this._relativePosition = this._position / bounds[dimensionAxis];
|
||||||
this._setPosition();
|
this._setPosition();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user