Keep relative screen division while resizing

This commit is contained in:
Ewa Gasperowicz
2018-09-17 13:21:31 +02:00
parent bcd88f6356
commit 1b69c9231d

View File

@@ -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();
} }