angular-resizable-element
Version:
An angular 15.0+ directive that allows an element to be dragged and resized
60 lines • 8.65 kB
JavaScript
/** Creates a deep clone of an element. */
export function deepCloneNode(node) {
const clone = node.cloneNode(true);
const descendantsWithId = clone.querySelectorAll('[id]');
const nodeName = node.nodeName.toLowerCase();
// Remove the `id` to avoid having multiple elements with the same id on the page.
clone.removeAttribute('id');
descendantsWithId.forEach((descendant) => {
descendant.removeAttribute('id');
});
if (nodeName === 'canvas') {
transferCanvasData(node, clone);
}
else if (nodeName === 'input' ||
nodeName === 'select' ||
nodeName === 'textarea') {
transferInputData(node, clone);
}
transferData('canvas', node, clone, transferCanvasData);
transferData('input, textarea, select', node, clone, transferInputData);
return clone;
}
/** Matches elements between an element and its clone and allows for their data to be cloned. */
function transferData(selector, node, clone, callback) {
const descendantElements = node.querySelectorAll(selector);
if (descendantElements.length) {
const cloneElements = clone.querySelectorAll(selector);
for (let i = 0; i < descendantElements.length; i++) {
callback(descendantElements[i], cloneElements[i]);
}
}
}
// Counter for unique cloned radio button names.
let cloneUniqueId = 0;
/** Transfers the data of one input element to another. */
function transferInputData(source, clone) {
// Browsers throw an error when assigning the value of a file input programmatically.
if (clone.type !== 'file') {
clone.value = source.value;
}
// Radio button `name` attributes must be unique for radio button groups
// otherwise original radio buttons can lose their checked state
// once the clone is inserted in the DOM.
if (clone.type === 'radio' && clone.name) {
clone.name = `mat-clone-${clone.name}-${cloneUniqueId++}`;
}
}
/** Transfers the data of one canvas element to another. */
function transferCanvasData(source, clone) {
const context = clone.getContext('2d');
if (context) {
// In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
// We can't do much about it so just ignore the error.
try {
context.drawImage(source, 0, 0);
}
catch { }
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xvbmUtbm9kZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2FuZ3VsYXItcmVzaXphYmxlLWVsZW1lbnQvc3JjL2xpYi91dGlsL2Nsb25lLW5vZGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsMENBQTBDO0FBQzFDLE1BQU0sVUFBVSxhQUFhLENBQUMsSUFBaUI7SUFDN0MsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQWdCLENBQUM7SUFDbEQsTUFBTSxpQkFBaUIsR0FBRyxLQUFLLENBQUMsZ0JBQWdCLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDekQsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUU3QyxrRkFBa0Y7SUFDbEYsS0FBSyxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUU1QixpQkFBaUIsQ0FBQyxPQUFPLENBQUMsQ0FBQyxVQUFVLEVBQUUsRUFBRTtRQUN2QyxVQUFVLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ25DLENBQUMsQ0FBQyxDQUFDO0lBRUgsSUFBSSxRQUFRLEtBQUssUUFBUSxFQUFFO1FBQ3pCLGtCQUFrQixDQUFDLElBQXlCLEVBQUUsS0FBMEIsQ0FBQyxDQUFDO0tBQzNFO1NBQU0sSUFDTCxRQUFRLEtBQUssT0FBTztRQUNwQixRQUFRLEtBQUssUUFBUTtRQUNyQixRQUFRLEtBQUssVUFBVSxFQUN2QjtRQUNBLGlCQUFpQixDQUFDLElBQXdCLEVBQUUsS0FBeUIsQ0FBQyxDQUFDO0tBQ3hFO0lBRUQsWUFBWSxDQUFDLFFBQVEsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLGtCQUFrQixDQUFDLENBQUM7SUFDeEQsWUFBWSxDQUFDLHlCQUF5QixFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsaUJBQWlCLENBQUMsQ0FBQztJQUN4RSxPQUFPLEtBQUssQ0FBQztBQUNmLENBQUM7QUFFRCxnR0FBZ0c7QUFDaEcsU0FBUyxZQUFZLENBQ25CLFFBQWdCLEVBQ2hCLElBQWlCLEVBQ2pCLEtBQWtCLEVBQ2xCLFFBQXVDO0lBRXZDLE1BQU0sa0JBQWtCLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFJLFFBQVEsQ0FBQyxDQUFDO0lBRTlELElBQUksa0JBQWtCLENBQUMsTUFBTSxFQUFFO1FBQzdCLE1BQU0sYUFBYSxHQUFHLEtBQUssQ0FBQyxnQkFBZ0IsQ0FBSSxRQUFRLENBQUMsQ0FBQztRQUUxRCxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsa0JBQWtCLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ2xELFFBQVEsQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLENBQUMsRUFBRSxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNuRDtLQUNGO0FBQ0gsQ0FBQztBQUVELGdEQUFnRDtBQUNoRCxJQUFJLGFBQWEsR0FBRyxDQUFDLENBQUM7QUFFdEIsMERBQTBEO0FBQzFELFNBQVMsaUJBQWlCLENBQ3hCLE1BQW1DLEVBQ25DLEtBQThEO0lBRTlELHFGQUFxRjtJQUNyRixJQUFJLEtBQUssQ0FBQyxJQUFJLEtBQUssTUFBTSxFQUFFO1FBQ3pCLEtBQUssQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUssQ0FBQztLQUM1QjtJQUVELHdFQUF3RTtJQUN4RSxnRUFBZ0U7SUFDaEUseUNBQXlDO0lBQ3pDLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLElBQUksS0FBSyxDQUFDLElBQUksRUFBRTtRQUN4QyxLQUFLLENBQUMsSUFBSSxHQUFHLGFBQWEsS0FBSyxDQUFDLElBQUksSUFBSSxhQUFhLEVBQUUsRUFBRSxDQUFDO0tBQzNEO0FBQ0gsQ0FBQztBQUVELDJEQUEyRDtBQUMzRCxTQUFTLGtCQUFrQixDQUN6QixNQUF5QixFQUN6QixLQUF3QjtJQUV4QixNQUFNLE9BQU8sR0FBRyxLQUFLLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRXZDLElBQUksT0FBTyxFQUFFO1FBQ1gsd0VBQXdFO1FBQ3hFLHNEQUFzRDtRQUN0RCxJQUFJO1lBQ0YsT0FBTyxDQUFDLFNBQVMsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1NBQ2pDO1FBQUMsTUFBTSxHQUFFO0tBQ1g7QUFDSCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqIENyZWF0ZXMgYSBkZWVwIGNsb25lIG9mIGFuIGVsZW1lbnQuICovXG5leHBvcnQgZnVuY3Rpb24gZGVlcENsb25lTm9kZShub2RlOiBIVE1MRWxlbWVudCk6IEhUTUxFbGVtZW50IHtcbiAgY29uc3QgY2xvbmUgPSBub2RlLmNsb25lTm9kZSh0cnVlKSBhcyBIVE1MRWxlbWVudDtcbiAgY29uc3QgZGVzY2VuZGFudHNXaXRoSWQgPSBjbG9uZS5xdWVyeVNlbGVjdG9yQWxsKCdbaWRdJyk7XG4gIGNvbnN0IG5vZGVOYW1lID0gbm9kZS5ub2RlTmFtZS50b0xvd2VyQ2FzZSgpO1xuXG4gIC8vIFJlbW92ZSB0aGUgYGlkYCB0byBhdm9pZCBoYXZpbmcgbXVsdGlwbGUgZWxlbWVudHMgd2l0aCB0aGUgc2FtZSBpZCBvbiB0aGUgcGFnZS5cbiAgY2xvbmUucmVtb3ZlQXR0cmlidXRlKCdpZCcpO1xuXG4gIGRlc2NlbmRhbnRzV2l0aElkLmZvckVhY2goKGRlc2NlbmRhbnQpID0+IHtcbiAgICBkZXNjZW5kYW50LnJlbW92ZUF0dHJpYnV0ZSgnaWQnKTtcbiAgfSk7XG5cbiAgaWYgKG5vZGVOYW1lID09PSAnY2FudmFzJykge1xuICAgIHRyYW5zZmVyQ2FudmFzRGF0YShub2RlIGFzIEhUTUxDYW52YXNFbGVtZW50LCBjbG9uZSBhcyBIVE1MQ2FudmFzRWxlbWVudCk7XG4gIH0gZWxzZSBpZiAoXG4gICAgbm9kZU5hbWUgPT09ICdpbnB1dCcgfHxcbiAgICBub2RlTmFtZSA9PT0gJ3NlbGVjdCcgfHxcbiAgICBub2RlTmFtZSA9PT0gJ3RleHRhcmVhJ1xuICApIHtcbiAgICB0cmFuc2ZlcklucHV0RGF0YShub2RlIGFzIEhUTUxJbnB1dEVsZW1lbnQsIGNsb25lIGFzIEhUTUxJbnB1dEVsZW1lbnQpO1xuICB9XG5cbiAgdHJhbnNmZXJEYXRhKCdjYW52YXMnLCBub2RlLCBjbG9uZSwgdHJhbnNmZXJDYW52YXNEYXRhKTtcbiAgdHJhbnNmZXJEYXRhKCdpbnB1dCwgdGV4dGFyZWEsIHNlbGVjdCcsIG5vZGUsIGNsb25lLCB0cmFuc2ZlcklucHV0RGF0YSk7XG4gIHJldHVybiBjbG9uZTtcbn1cblxuLyoqIE1hdGNoZXMgZWxlbWVudHMgYmV0d2VlbiBhbiBlbGVtZW50IGFuZCBpdHMgY2xvbmUgYW5kIGFsbG93cyBmb3IgdGhlaXIgZGF0YSB0byBiZSBjbG9uZWQuICovXG5mdW5jdGlvbiB0cmFuc2ZlckRhdGE8VCBleHRlbmRzIEVsZW1lbnQ+KFxuICBzZWxlY3Rvcjogc3RyaW5nLFxuICBub2RlOiBIVE1MRWxlbWVudCxcbiAgY2xvbmU6IEhUTUxFbGVtZW50LFxuICBjYWxsYmFjazogKHNvdXJjZTogVCwgY2xvbmU6IFQpID0+IHZvaWRcbikge1xuICBjb25zdCBkZXNjZW5kYW50RWxlbWVudHMgPSBub2RlLnF1ZXJ5U2VsZWN0b3JBbGw8VD4oc2VsZWN0b3IpO1xuXG4gIGlmIChkZXNjZW5kYW50RWxlbWVudHMubGVuZ3RoKSB7XG4gICAgY29uc3QgY2xvbmVFbGVtZW50cyA9IGNsb25lLnF1ZXJ5U2VsZWN0b3JBbGw8VD4oc2VsZWN0b3IpO1xuXG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCBkZXNjZW5kYW50RWxlbWVudHMubGVuZ3RoOyBpKyspIHtcbiAgICAgIGNhbGxiYWNrKGRlc2NlbmRhbnRFbGVtZW50c1tpXSwgY2xvbmVFbGVtZW50c1tpXSk7XG4gICAgfVxuICB9XG59XG5cbi8vIENvdW50ZXIgZm9yIHVuaXF1ZSBjbG9uZWQgcmFkaW8gYnV0dG9uIG5hbWVzLlxubGV0IGNsb25lVW5pcXVlSWQgPSAwO1xuXG4vKiogVHJhbnNmZXJzIHRoZSBkYXRhIG9mIG9uZSBpbnB1dCBlbGVtZW50IHRvIGFub3RoZXIuICovXG5mdW5jdGlvbiB0cmFuc2ZlcklucHV0RGF0YShcbiAgc291cmNlOiBFbGVtZW50ICYgeyB2YWx1ZTogc3RyaW5nIH0sXG4gIGNsb25lOiBFbGVtZW50ICYgeyB2YWx1ZTogc3RyaW5nOyBuYW1lOiBzdHJpbmc7IHR5cGU6IHN0cmluZyB9XG4pIHtcbiAgLy8gQnJvd3NlcnMgdGhyb3cgYW4gZXJyb3Igd2hlbiBhc3NpZ25pbmcgdGhlIHZhbHVlIG9mIGEgZmlsZSBpbnB1dCBwcm9ncmFtbWF0aWNhbGx5LlxuICBpZiAoY2xvbmUudHlwZSAhPT0gJ2ZpbGUnKSB7XG4gICAgY2xvbmUudmFsdWUgPSBzb3VyY2UudmFsdWU7XG4gIH1cblxuICAvLyBSYWRpbyBidXR0b24gYG5hbWVgIGF0dHJpYnV0ZXMgbXVzdCBiZSB1bmlxdWUgZm9yIHJhZGlvIGJ1dHRvbiBncm91cHNcbiAgLy8gb3RoZXJ3aXNlIG9yaWdpbmFsIHJhZGlvIGJ1dHRvbnMgY2FuIGxvc2UgdGhlaXIgY2hlY2tlZCBzdGF0ZVxuICAvLyBvbmNlIHRoZSBjbG9uZSBpcyBpbnNlcnRlZCBpbiB0aGUgRE9NLlxuICBpZiAoY2xvbmUudHlwZSA9PT0gJ3JhZGlvJyAmJiBjbG9uZS5uYW1lKSB7XG4gICAgY2xvbmUubmFtZSA9IGBtYXQtY2xvbmUtJHtjbG9uZS5uYW1lfS0ke2Nsb25lVW5pcXVlSWQrK31gO1xuICB9XG59XG5cbi8qKiBUcmFuc2ZlcnMgdGhlIGRhdGEgb2Ygb25lIGNhbnZhcyBlbGVtZW50IHRvIGFub3RoZXIuICovXG5mdW5jdGlvbiB0cmFuc2ZlckNhbnZhc0RhdGEoXG4gIHNvdXJjZTogSFRNTENhbnZhc0VsZW1lbnQsXG4gIGNsb25lOiBIVE1MQ2FudmFzRWxlbWVudFxuKSB7XG4gIGNvbnN0IGNvbnRleHQgPSBjbG9uZS5nZXRDb250ZXh0KCcyZCcpO1xuXG4gIGlmIChjb250ZXh0KSB7XG4gICAgLy8gSW4gc29tZSBjYXNlcyBgZHJhd0ltYWdlYCBjYW4gdGhyb3cgKGUuZy4gaWYgdGhlIGNhbnZhcyBzaXplIGlzIDB4MCkuXG4gICAgLy8gV2UgY2FuJ3QgZG8gbXVjaCBhYm91dCBpdCBzbyBqdXN0IGlnbm9yZSB0aGUgZXJyb3IuXG4gICAgdHJ5IHtcbiAgICAgIGNvbnRleHQuZHJhd0ltYWdlKHNvdXJjZSwgMCwgMCk7XG4gICAgfSBjYXRjaCB7fVxuICB9XG59XG4iXX0=