systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
96 lines • 13.1 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import interact from 'interactjs';
import * as i0 from "@angular/core";
export class ResizableDirective {
constructor(element) {
this.element = element;
this.zoom = 1;
this.resizeClick = new EventEmitter();
this.finalSize = new EventEmitter();
this.currentSize = new EventEmitter();
this.currentlyDragged = false;
this.currentlyResizing = false;
}
onClick(event) {
if (!this.currentlyDragged && !this.currentlyResizing) {
this.resizeClick.emit(this.model);
}
}
ngOnInit() {
interact(this.element.nativeElement)
.resizable(Object.assign({}, this.resizableOptions || {}))
.on('resizemove', (event) => this.doResizeMove(event))
.on('dragmove', () => this.doCurrentlyDraggedUpdate(true))
.on('dragend', () => this.doCurrentlyDraggedUpdate(false))
.on('resizeend', (event) => this.doResizeEnd(event));
}
doResizeEnd(event) {
const target = event.target;
target.setAttribute('original-w', 0);
target.setAttribute('original-h', 0);
this.finalSize.emit({ x: target.getAttribute('data-x') || 0, y: target.getAttribute('data-y') || 0 });
setTimeout(() => {
this.currentlyResizing = false;
});
}
doCurrentlyDraggedUpdate(value) {
setTimeout(() => {
this.currentlyDragged = value;
});
}
doResizeMove(event) {
const target = event.target;
this.currentlyResizing = true;
let x = (parseFloat(target.getAttribute('data-x')) || 0);
let y = (parseFloat(target.getAttribute('data-y')) || 0);
let w = (parseFloat(target.getAttribute('original-w')) || 0);
let h = (parseFloat(target.getAttribute('original-h')) || 0);
if (w === 0) {
w = event.target.offsetWidth;
target.setAttribute('original-w', w);
}
if (h === 0) {
h = event.target.offsetHeight;
target.setAttribute('original-h', h);
}
// update the element's style
target.style.width = event.rect.width / this.zoom + 'px';
target.style.height = event.rect.height / this.zoom + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left / this.zoom;
y += event.deltaRect.top / this.zoom;
target.style.transform = 'translate(' + x + 'px,' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
this.currentSize.emit({
w: -w + event.target.offsetWidth || 0,
h: -h + event.target.offsetHeight || 0,
x: target.getAttribute('data-x'),
y: target.getAttribute('data-y')
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ResizableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: ResizableDirective, selector: "[resizable]", inputs: { model: "model", resizableOptions: "resizableOptions", zoom: "zoom" }, outputs: { resizeClick: "resizeClick", finalSize: "finalSize", currentSize: "currentSize" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: ResizableDirective, decorators: [{
type: Directive,
args: [{
selector: '[resizable]'
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { model: [{
type: Input
}], resizableOptions: [{
type: Input
}], zoom: [{
type: Input
}], resizeClick: [{
type: Output
}], finalSize: [{
type: Output
}], currentSize: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXphYmxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9kaXJlY3RpdmVzL3Jlc2l6YWJsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekcsT0FBTyxRQUFRLE1BQU0sWUFBWSxDQUFDOztBQUtsQyxNQUFNLE9BQU8sa0JBQWtCO0lBYTlCLFlBQW9CLE9BQW1CO1FBQW5CLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFUdkIsU0FBSSxHQUFHLENBQUMsQ0FBQztRQUVSLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNqQyxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUMvQixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFFMUMscUJBQWdCLEdBQUcsS0FBSyxDQUFDO1FBQ3pCLHNCQUFpQixHQUFHLEtBQUssQ0FBQztJQUdsQyxDQUFDO0lBR00sT0FBTyxDQUFDLEtBQVU7UUFDeEIsSUFBSSxDQUFDLElBQUksQ0FBQyxnQkFBZ0IsSUFBSSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRTtZQUN0RCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDbEM7SUFDRixDQUFDO0lBRU0sUUFBUTtRQUVkLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQzthQUNsQyxTQUFTLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxDQUFDO2FBQ3pELEVBQUUsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxLQUFL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b3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgaW50ZXJhY3QgZnJvbSAnaW50ZXJhY3Rqcyc7XG5cbkBEaXJlY3RpdmUoe1xuXHRzZWxlY3RvcjogJ1tyZXNpemFibGVdJ1xufSlcbmV4cG9ydCBjbGFzcyBSZXNpemFibGVEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQge1xuXG5cdEBJbnB1dCgpIHB1YmxpYyBtb2RlbDogYW55O1xuXHRASW5wdXQoKSBwdWJsaWMgcmVzaXphYmxlT3B0aW9uczogYW55O1xuXHRASW5wdXQoKSBwdWJsaWMgem9vbSA9IDE7XG5cblx0QE91dHB1dCgpIHB1YmxpYyByZXNpemVDbGljayA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblx0QE91dHB1dCgpIHB1YmxpYyBmaW5hbFNpemUgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cdEBPdXRwdXQoKSBwdWJsaWMgY3VycmVudFNpemUgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0cHJpdmF0ZSBjdXJyZW50bHlEcmFnZ2VkID0gZmFsc2U7XG5cdHByaXZhdGUgY3VycmVudGx5UmVzaXppbmcgPSBmYWxzZTtcblxuXHRjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnQ6IEVsZW1lbnRSZWYpIHtcblx0fVxuXG5cdEBIb3N0TGlzdGVuZXIoJ2NsaWNrJywgWyckZXZlbnQnXSlcblx0cHVibGljIG9uQ2xpY2soZXZlbnQ6IGFueSk6IHZvaWQge1xuXHRcdGlmICghdGhpcy5jdXJyZW50bHlEcmFnZ2VkICYmICF0aGlzLmN1cnJlbnRseVJlc2l6aW5nKSB7XG5cdFx0XHR0aGlzLnJlc2l6ZUNsaWNrLmVtaXQodGhpcy5tb2RlbCk7XG5cdFx0fVxuXHR9XG5cblx0cHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuXG5cdFx0aW50ZXJhY3QodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQpXG5cdFx0XHQucmVzaXphYmxlKE9iamVjdC5hc3NpZ24oe30sIHRoaXMucmVzaXphYmxlT3B0aW9ucyB8fCB7fSkpXG5cdFx0XHQub24oJ3Jlc2l6ZW1vdmUnLCAoZXZlbnQpID0+IHRoaXMuZG9SZXNpemVNb3ZlKGV2ZW50KSlcblx0XHRcdC5vbignZHJhZ21vdmUnLCAoKSA9PiB0aGlzLmRvQ3VycmVudGx5RHJhZ2dlZFVwZGF0ZSh0cnVlKSlcblx0XHRcdC5vbignZHJhZ2VuZCcsICgpID0+IHRoaXMuZG9DdXJyZW50bHlEcmFnZ2VkVXBkYXRlKGZhbHNlKSlcblx0XHRcdC5vbigncmVzaXplZW5kJywgKGV2ZW50KSA9PiB0aGlzLmRvUmVzaXplRW5kKGV2ZW50KSk7XG5cdH1cblxuXHRwcml2YXRlIGRvUmVzaXplRW5kKGV2ZW50KTogdm9pZCB7XG5cdFx0Y29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0O1xuXHRcdHRhcmdldC5zZXRBdHRyaWJ1dGUoJ29yaWdpbmFsLXcnLCAwKTtcblx0XHR0YXJnZXQuc2V0QXR0cmlidXRlKCdvcmlnaW5hbC1oJywgMCk7XG5cdFx0dGhpcy5maW5hbFNpemUuZW1pdCh7eDogdGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS14JykgfHwgMCwgeTogdGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS15JykgfHwgMH0pO1xuXHRcdHNldFRpbWVvdXQoKCkgPT4ge1xuXHRcdFx0dGhpcy5jdXJyZW50bHlSZXNpemluZyA9IGZhbHNlO1xuXHRcdH0pO1xuXHR9XG5cblx0cHJpdmF0ZSBkb0N1cnJlbnRseURyYWdnZWRVcGRhdGUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcblx0XHRzZXRUaW1lb3V0KCgpID0+IHtcblx0XHRcdHRoaXMuY3VycmVudGx5RHJhZ2dlZCA9IHZhbHVlO1xuXHRcdH0pO1xuXHR9XG5cblx0cHJpdmF0ZSBkb1Jlc2l6ZU1vdmUoZXZlbnQpOiB2b2lkIHtcblx0XHRjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQ7XG5cdFx0dGhpcy5jdXJyZW50bHlSZXNpemluZyA9IHRydWU7XG5cdFx0bGV0IHggPSAocGFyc2VGbG9hdCh0YXJnZXQuZ2V0QXR0cmlidXRlKCdkYXRhLXgnKSkgfHwgMCk7XG5cdFx0bGV0IHkgPSAocGFyc2VGbG9hdCh0YXJnZXQuZ2V0QXR0cmlidXRlKCdkYXRhLXknKSkgfHwgMCk7XG5cdFx0bGV0IHcgPSAocGFyc2VGbG9hdCh0YXJnZXQuZ2V0QXR0cmlidXRlKCdvcmlnaW5hbC13JykpIHx8IDApO1xuXHRcdGxldCBoID0gKHBhcnNlRmxvYXQodGFyZ2V0LmdldEF0dHJpYnV0ZSgnb3JpZ2luYWwtaCcpKSB8fCAwKTtcblx0XHRpZiAodyA9PT0gMCkge1xuXHRcdFx0dyA9IGV2ZW50LnRhcmdldC5vZmZzZXRXaWR0aDtcblx0XHRcdHRhcmdldC5zZXRBdHRyaWJ1dGUoJ29yaWdpbmFsLXcnLCB3KTtcblxuXHRcdH1cblx0XHRpZiAoaCA9PT0gMCkge1xuXHRcdFx0aCA9IGV2ZW50LnRhcmdldC5vZmZzZXRIZWlnaHQ7XG5cdFx0XHR0YXJnZXQuc2V0QXR0cmlidXRlKCdvcmlnaW5hbC1oJywgaCk7XG5cblx0XHR9XG5cdFx0Ly8gdXBkYXRlIHRoZSBlbGVtZW50J3Mgc3R5bGVcblx0XHR0YXJnZXQuc3R5bGUud2lkdGggPSBldmVudC5yZWN0LndpZHRoIC8gdGhpcy56b29tICsgJ3B4Jztcblx0XHR0YXJnZXQuc3R5bGUuaGVpZ2h0ID0gZXZlbnQucmVjdC5oZWlnaHQgLyB0aGlzLnpvb20gKyAncHgnO1xuXG5cdFx0Ly8gdHJhbnNsYXRlIHdoZW4gcmVzaXppbmcgZnJvbSB0b3Agb3IgbGVmdCBlZGdlc1xuXHRcdHggKz0gZXZlbnQuZGVsdGFSZWN0LmxlZnQgLyB0aGlzLnpvb207XG5cdFx0eSArPSBldmVudC5kZWx0YVJlY3QudG9wIC8gdGhpcy56b29tO1xuXG5cdFx0dGFyZ2V0LnN0eWxlLnRyYW5zZm9ybSA9ICd0cmFuc2xhdGUoJyArIHggKyAncHgsJyArIHkgKyAncHgpJztcblxuXHRcdHRhcmdldC5zZXRBdHRyaWJ1dGUoJ2RhdGEteCcsIHgpO1xuXHRcdHRhcmdldC5zZXRBdHRyaWJ1dGUoJ2RhdGEteScsIHkpO1xuXHRcdHRoaXMuY3VycmVudFNpemUuZW1pdCh7XG5cdFx0XHR3OiAtdyArIGV2ZW50LnRhcmdldC5vZmZzZXRXaWR0aCB8fCAwLFxuXHRcdFx0aDogLWggKyBldmVudC50YXJnZXQub2Zmc2V0SGVpZ2h0IHx8IDAsXG5cdFx0XHR4OiB0YXJnZXQuZ2V0QXR0cmlidXRlKCdkYXRhLXgnKSxcblx0XHRcdHk6IHRhcmdldC5nZXRBdHRyaWJ1dGUoJ2RhdGEteScpXG5cdFx0fSk7XG5cdH1cbn1cbiJdfQ==