@katoid/angular-grid-layout
Version:
Grid Layout with draggable and resizable items for Angular
57 lines • 8.43 kB
JavaScript
/**
* Client rect utilities.
* This file is taken from Angular Material repository.
*/
/** Gets a mutable version of an element's bounding `ClientRect`. */
export function getMutableClientRect(element) {
const clientRect = element.getBoundingClientRect();
// We need to clone the `clientRect` here, because all the values on it are readonly
// and we need to be able to update them. Also we can't use a spread here, because
// the values on a `ClientRect` aren't own properties. See:
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
return {
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
};
}
/**
* Checks whether some coordinates are within a `ClientRect`.
* @param clientRect ClientRect that is being checked.
* @param x Coordinates along the X axis.
* @param y Coordinates along the Y axis.
*/
export function isInsideClientRect(clientRect, x, y) {
const { top, bottom, left, right } = clientRect;
return y >= top && y <= bottom && x >= left && x <= right;
}
/**
* Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
* @param clientRect `ClientRect` that should be updated.
* @param top Amount to add to the `top` position.
* @param left Amount to add to the `left` position.
*/
export function adjustClientRect(clientRect, top, left) {
clientRect.top += top;
clientRect.bottom = clientRect.top + clientRect.height;
clientRect.left += left;
clientRect.right = clientRect.left + clientRect.width;
}
/**
* Checks whether the pointer coordinates are close to a ClientRect.
* @param rect ClientRect to check against.
* @param threshold Threshold around the ClientRect.
* @param pointerX Coordinates along the X axis.
* @param pointerY Coordinates along the Y axis.
*/
export function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
const { top, right, bottom, left, width, height } = rect;
const xThreshold = width * threshold;
const yThreshold = height * threshold;
return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
pointerX > left - xThreshold && pointerX < right + xThreshold;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpZW50LXJlY3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWdyaWQtbGF5b3V0L3NyYy9saWIvdXRpbHMvY2xpZW50LXJlY3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7OztHQUdHO0FBYUgsb0VBQW9FO0FBQ3BFLE1BQU0sVUFBVSxvQkFBb0IsQ0FBQyxPQUFnQjtJQUNqRCxNQUFNLFVBQVUsR0FBRyxPQUFPLENBQUMscUJBQXFCLEVBQUUsQ0FBQztJQUVuRCxvRkFBb0Y7SUFDcEYsa0ZBQWtGO0lBQ2xGLDJEQUEyRDtJQUMzRCx1RkFBdUY7SUFDdkYsT0FBTztRQUNILEdBQUcsRUFBRSxVQUFVLENBQUMsR0FBRztRQUNuQixLQUFLLEVBQUUsVUFBVSxDQUFDLEtBQUs7UUFDdkIsTUFBTSxFQUFFLFVBQVUsQ0FBQyxNQUFNO1FBQ3pCLElBQUksRUFBRSxVQUFVLENBQUMsSUFBSTtRQUNyQixLQUFLLEVBQUUsVUFBVSxDQUFDLEtBQUs7UUFDdkIsTUFBTSxFQUFFLFVBQVUsQ0FBQyxNQUFNO0tBQzVCLENBQUM7QUFDTixDQUFDO0FBRUQ7Ozs7O0dBS0c7QUFDSCxNQUFNLFVBQVUsa0JBQWtCLENBQUMsVUFBc0IsRUFBRSxDQUFTLEVBQUUsQ0FBUztJQUMzRSxNQUFNLEVBQUMsR0FBRyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFDLEdBQUcsVUFBVSxDQUFDO0lBQzlDLE9BQU8sQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksTUFBTSxJQUFJLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssQ0FBQztBQUM5RCxDQUFDO0FBRUQ7Ozs7O0dBS0c7QUFDSCxNQUFNLFVBQVUsZ0JBQWdCLENBQUMsVUFBeUIsRUFBRSxHQUFXLEVBQUUsSUFBWTtJQUNqRixVQUFVLENBQUMsR0FBRyxJQUFJLEdBQUcsQ0FBQztJQUN0QixVQUFVLENBQUMsTUFBTSxHQUFHLFVBQVUsQ0FBQyxHQUFHLEdBQUcsVUFBVSxDQUFDLE1BQU0sQ0FBQztJQUV2RCxVQUFVLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQztJQUN4QixVQUFVLENBQUMsS0FBSyxHQUFHLFVBQVUsQ0FBQyxJQUFJLEdBQUcsVUFBVSxDQUFDLEtBQUssQ0FBQztBQUMxRCxDQUFDO0FBRUQ7Ozs7OztHQU1HO0FBQ0gsTUFBTSxVQUFVLHVCQUF1QixDQUFDLElBQW1CLEVBQ25CLFNBQWlCLEVBQ2pCLFFBQWdCLEVBQ2hCLFFBQWdCO0lBQ3BELE1BQU0sRUFBQyxHQUFHLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBQyxHQUFHLElBQUksQ0FBQztJQUN2RCxNQUFNLFVBQVUsR0FBRyxLQUFLLEdBQUcsU0FBUyxDQUFDO0lBQ3JDLE1BQU0sVUFBVSxHQUFHLE1BQU0sR0FBRyxTQUFTLENBQUM7SUFFdEMsT0FBTyxRQUFRLEdBQUcsR0FBRyxHQUFHLFVBQVUsSUFBSSxRQUFRLEdBQUcsTUFBTSxHQUFHLFVBQVU7UUFDaEUsUUFBUSxHQUFHLElBQUksR0FBRyxVQUFVLElBQUksUUFBUSxHQUFHLEtBQUssR0FBRyxVQUFVLENBQUM7QUFDdEUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxyXG4gKiBDbGllbnQgcmVjdCB1dGlsaXRpZXMuXHJcbiAqIFRoaXMgZmlsZSBpcyB0YWtlbiBmcm9tIEFuZ3VsYXIgTWF0ZXJpYWwgcmVwb3NpdG9yeS5cclxuICovXHJcblxyXG4vKiBlc2xpbnQtZGlzYWJsZSAqL1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBLdGRDbGllbnRSZWN0IHtcclxuICAgIHRvcDogbnVtYmVyO1xyXG4gICAgYm90dG9tOiBudW1iZXI7XHJcbiAgICBsZWZ0OiBudW1iZXI7XHJcbiAgICByaWdodDogbnVtYmVyO1xyXG4gICAgd2lkdGg6IG51bWJlcjtcclxuICAgIGhlaWdodDogbnVtYmVyO1xyXG59XHJcblxyXG4vKiogR2V0cyBhIG11dGFibGUgdmVyc2lvbiBvZiBhbiBlbGVtZW50J3MgYm91bmRpbmcgYENsaWVudFJlY3RgLiAqL1xyXG5leHBvcnQgZnVuY3Rpb24gZ2V0TXV0YWJsZUNsaWVudFJlY3QoZWxlbWVudDogRWxlbWVudCk6IEt0ZENsaWVudFJlY3Qge1xyXG4gICAgY29uc3QgY2xpZW50UmVjdCA9IGVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XHJcblxyXG4gICAgLy8gV2UgbmVlZCB0byBjbG9uZSB0aGUgYGNsaWVudFJlY3RgIGhlcmUsIGJlY2F1c2UgYWxsIHRoZSB2YWx1ZXMgb24gaXQgYXJlIHJlYWRvbmx5XHJcbiAgICAvLyBhbmQgd2UgbmVlZCB0byBiZSBhYmxlIHRvIHVwZGF0ZSB0aGVtLiBBbHNvIHdlIGNhbid0IHVzZSBhIHNwcmVhZCBoZXJlLCBiZWNhdXNlXHJcbiAgICAvLyB0aGUgdmFsdWVzIG9uIGEgYENsaWVudFJlY3RgIGFyZW4ndCBvd24gcHJvcGVydGllcy4gU2VlOlxyXG4gICAgLy8gaHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvQVBJL0VsZW1lbnQvZ2V0Qm91bmRpbmdDbGllbnRSZWN0I05vdGVzXHJcbiAgICByZXR1cm4ge1xyXG4gICAgICAgIHRvcDogY2xpZW50UmVjdC50b3AsXHJcbiAgICAgICAgcmlnaHQ6IGNsaWVudFJlY3QucmlnaHQsXHJcbiAgICAgICAgYm90dG9tOiBjbGllbnRSZWN0LmJvdHRvbSxcclxuICAgICAgICBsZWZ0OiBjbGllbnRSZWN0LmxlZnQsXHJcbiAgICAgICAgd2lkdGg6IGNsaWVudFJlY3Qud2lkdGgsXHJcbiAgICAgICAgaGVpZ2h0OiBjbGllbnRSZWN0LmhlaWdodFxyXG4gICAgfTtcclxufVxyXG5cclxuLyoqXHJcbiAqIENoZWNrcyB3aGV0aGVyIHNvbWUgY29vcmRpbmF0ZXMgYXJlIHdpdGhpbiBhIGBDbGllbnRSZWN0YC5cclxuICogQHBhcmFtIGNsaWVudFJlY3QgQ2xpZW50UmVjdCB0aGF0IGlzIGJlaW5nIGNoZWNrZWQuXHJcbiAqIEBwYXJhbSB4IENvb3JkaW5hdGVzIGFsb25nIHRoZSBYIGF4aXMuXHJcbiAqIEBwYXJhbSB5IENvb3JkaW5hdGVzIGFsb25nIHRoZSBZIGF4aXMuXHJcbiAqL1xyXG5leHBvcnQgZnVuY3Rpb24gaXNJbnNpZGVDbGllbnRSZWN0KGNsaWVudFJlY3Q6IENsaWVudFJlY3QsIHg6IG51bWJlciwgeTogbnVtYmVyKSB7XHJcbiAgICBjb25zdCB7dG9wLCBib3R0b20sIGxlZnQsIHJpZ2h0fSA9IGNsaWVudFJlY3Q7XHJcbiAgICByZXR1cm4geSA+PSB0b3AgJiYgeSA8PSBib3R0b20gJiYgeCA+PSBsZWZ0ICYmIHggPD0gcmlnaHQ7XHJcbn1cclxuXHJcbi8qKlxyXG4gKiBVcGRhdGVzIHRoZSB0b3AvbGVmdCBwb3NpdGlvbnMgb2YgYSBgQ2xpZW50UmVjdGAsIGFzIHdlbGwgYXMgdGhlaXIgYm90dG9tL3JpZ2h0IGNvdW50ZXJwYXJ0cy5cclxuICogQHBhcmFtIGNsaWVudFJlY3QgYENsaWVudFJlY3RgIHRoYXQgc2hvdWxkIGJlIHVwZGF0ZWQuXHJcbiAqIEBwYXJhbSB0b3AgQW1vdW50IHRvIGFkZCB0byB0aGUgYHRvcGAgcG9zaXRpb24uXHJcbiAqIEBwYXJhbSBsZWZ0IEFtb3VudCB0byBhZGQgdG8gdGhlIGBsZWZ0YCBwb3NpdGlvbi5cclxuICovXHJcbmV4cG9ydCBmdW5jdGlvbiBhZGp1c3RDbGllbnRSZWN0KGNsaWVudFJlY3Q6IEt0ZENsaWVudFJlY3QsIHRvcDogbnVtYmVyLCBsZWZ0OiBudW1iZXIpIHtcclxuICAgIGNsaWVudFJlY3QudG9wICs9IHRvcDtcclxuICAgIGNsaWVudFJlY3QuYm90dG9tID0gY2xpZW50UmVjdC50b3AgKyBjbGllbnRSZWN0LmhlaWdodDtcclxuXHJcbiAgICBjbGllbnRSZWN0LmxlZnQgKz0gbGVmdDtcclxuICAgIGNsaWVudFJlY3QucmlnaHQgPSBjbGllbnRSZWN0LmxlZnQgKyBjbGllbnRSZWN0LndpZHRoO1xyXG59XHJcblxyXG4vKipcclxuICogQ2hlY2tzIHdoZXRoZXIgdGhlIHBvaW50ZXIgY29vcmRpbmF0ZXMgYXJlIGNsb3NlIHRvIGEgQ2xpZW50UmVjdC5cclxuICogQHBhcmFtIHJlY3QgQ2xpZW50UmVjdCB0byBjaGVjayBhZ2FpbnN0LlxyXG4gKiBAcGFyYW0gdGhyZXNob2xkIFRocmVzaG9sZCBhcm91bmQgdGhlIENsaWVudFJlY3QuXHJcbiAqIEBwYXJhbSBwb2ludGVyWCBDb29yZGluYXRlcyBhbG9uZyB0aGUgWCBheGlzLlxyXG4gKiBAcGFyYW0gcG9pbnRlclkgQ29vcmRpbmF0ZXMgYWxvbmcgdGhlIFkgYXhpcy5cclxuICovXHJcbmV4cG9ydCBmdW5jdGlvbiBpc1BvaW50ZXJOZWFyQ2xpZW50UmVjdChyZWN0OiBLdGRDbGllbnRSZWN0LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdGhyZXNob2xkOiBudW1iZXIsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBwb2ludGVyWDogbnVtYmVyLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcG9pbnRlclk6IG51bWJlcik6IGJvb2xlYW4ge1xyXG4gICAgY29uc3Qge3RvcCwgcmlnaHQsIGJvdHRvbSwgbGVmdCwgd2lkdGgsIGhlaWdodH0gPSByZWN0O1xyXG4gICAgY29uc3QgeFRocmVzaG9sZCA9IHdpZHRoICogdGhyZXNob2xkO1xyXG4gICAgY29uc3QgeVRocmVzaG9sZCA9IGhlaWdodCAqIHRocmVzaG9sZDtcclxuXHJcbiAgICByZXR1cm4gcG9pbnRlclkgPiB0b3AgLSB5VGhyZXNob2xkICYmIHBvaW50ZXJZIDwgYm90dG9tICsgeVRocmVzaG9sZCAmJlxyXG4gICAgICAgIHBvaW50ZXJYID4gbGVmdCAtIHhUaHJlc2hvbGQgJiYgcG9pbnRlclggPCByaWdodCArIHhUaHJlc2hvbGQ7XHJcbn1cclxuIl19