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.
85 lines • 11.5 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import interact from 'interactjs';
import * as i0 from "@angular/core";
export class DraggableDirective {
constructor(element) {
this.element = element;
this.zoom = 1;
this.draggableClick = new EventEmitter();
this.finalPosition = new EventEmitter();
this.currentPosition = new EventEmitter();
this.currentlyDragged = false;
this.currentlyResizing = false;
}
onClick(event) {
if (!this.currentlyDragged && !this.currentlyResizing) {
this.draggableClick.emit(event);
}
}
ngOnInit() {
if (this.draggableOptions.restrictParent) {
this.draggableOptions.modifiers = [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: false
})
];
}
interact(this.element.nativeElement)
.draggable(Object.assign({}, this.draggableOptions || {}))
.on('dragmove', event => this.doDragMove(event))
.on('dragend', event => this.doDragEnd(event))
.on('resizemove', () => this.doCurrentlyResizingUpdate(true))
.on('resizeend', () => this.doCurrentlyResizingUpdate(false));
}
doCurrentlyResizingUpdate(value) {
setTimeout(() => {
this.currentlyResizing = value;
});
}
doDragEnd(event) {
event.target.classList.remove('getting-dragged');
const target = event.target;
this.finalPosition.emit({ x: target.getAttribute('data-x') || 0, y: target.getAttribute('data-y') || 0 });
setTimeout(() => {
window.dragData = null;
this.currentlyDragged = false;
});
}
doDragMove(event) {
const target = event.target;
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx / this.zoom;
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy / this.zoom;
target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
target.classList.add('getting-dragged');
this.currentlyDragged = true;
this.currentPosition.emit({ x: target.getAttribute('data-x') || 0, y: target.getAttribute('data-y') || 0 });
window.dragData = this.model;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DraggableDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.9", type: DraggableDirective, selector: "[draggable]", inputs: { model: "model", draggableOptions: "draggableOptions", zoom: "zoom" }, outputs: { draggableClick: "draggableClick", finalPosition: "finalPosition", currentPosition: "currentPosition" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: DraggableDirective, decorators: [{
type: Directive,
args: [{
selector: '[draggable]'
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { model: [{
type: Input
}], draggableOptions: [{
type: Input
}], zoom: [{
type: Input
}], draggableClick: [{
type: Output
}], finalPosition: [{
type: Output
}], currentPosition: [{
type: Output
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N5c3RlbGFiLWNvbXBvbmVudHMvc3JjL2xpYi9kaXJlY3RpdmVzL2RyYWdnYWJsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekcsT0FBTyxRQUFRLE1BQU0sWUFBWSxDQUFDOztBQUtsQyxNQUFNLE9BQU8sa0JBQWtCO0lBYTlCLFlBQTZCLE9BQW1CO1FBQW5CLFlBQU8sR0FBUCxPQUFPLENBQVk7UUFUaEMsU0FBSSxHQUFHLENBQUMsQ0FBQztRQUVSLG1CQUFjLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUNwQyxrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDbkMsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRTlDLHFCQUFnQixHQUFHLEtBQUssQ0FBQztRQUN6QixzQkFBaUIsR0FBRyxLQUFLLENBQUM7SUFHbEMsQ0FBQztJQUdNLE9BQU8sQ0FBQyxLQUFVO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLElBQUksQ0FBQyxJQUFJLENBQUMsaUJBQWlCLEVBQUU7WUFDdEQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDaEM7SUFDRixDQUFDO0lBRU0sUUFBUTtRQUNkLElBQUksSUFBSSxDQUFDLGdCQUFnQixDQUFDLGNBQWMsRUFBRTtZQUN6QyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxHQUFHO2dCQUNqQyxRQUFRLENBQUMsU0FBUyxDQUFDLFlBQVksQ0FBQztvQkFDL0IsV0FBVyxFQUFFLFFBQVE7b0JBQ3JCLE9BQU8sRUFBTSxLQUFLO2lCQUNsQixDQUFD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QUksQ0FBQyxLQUFLLENBQUM7SUFDdkMsQ0FBQzs4R0FyRVcsa0JBQWtCO2tHQUFsQixrQkFBa0I7OzJGQUFsQixrQkFBa0I7a0JBSDlCLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLGFBQWE7aUJBQ3ZCOytFQUdnQixLQUFLO3NCQUFwQixLQUFLO2dCQUNVLGdCQUFnQjtzQkFBL0IsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUVXLGNBQWM7c0JBQTlCLE1BQU07Z0JBQ1UsYUFBYTtzQkFBN0IsTUFBTTtnQkFDVSxlQUFlO3NCQUEvQixNQUFNO2dCQVNBLE9BQU87c0JBRGIsWUFBWTt1QkFBQyxPQUFPLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCBpbnRlcmFjdCBmcm9tICdpbnRlcmFjdGpzJztcblxuQERpcmVjdGl2ZSh7XG5cdHNlbGVjdG9yOiAnW2RyYWdnYWJsZV0nXG59KVxuZXhwb3J0IGNsYXNzIERyYWdnYWJsZURpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cblx0QElucHV0KCkgcHVibGljIG1vZGVsOiBhbnk7XG5cdEBJbnB1dCgpIHB1YmxpYyBkcmFnZ2FibGVPcHRpb25zOiBhbnk7XG5cdEBJbnB1dCgpIHB1YmxpYyB6b29tID0gMTtcblxuXHRAT3V0cHV0KCkgcHVibGljIGRyYWdnYWJsZUNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXHRAT3V0cHV0KCkgcHVibGljIGZpbmFsUG9zaXRpb24gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cdEBPdXRwdXQoKSBwdWJsaWMgY3VycmVudFBvc2l0aW9uID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG5cdHByaXZhdGUgY3VycmVudGx5RHJhZ2dlZCA9IGZhbHNlO1xuXHRwcml2YXRlIGN1cnJlbnRseVJlc2l6aW5nID0gZmFsc2U7XG5cblx0Y29uc3RydWN0b3IocHJpdmF0ZSByZWFkb25seSBlbGVtZW50OiBFbGVtZW50UmVmKSB7XG5cdH1cblxuXHRASG9zdExpc3RlbmVyKCdjbGljaycsIFsnJGV2ZW50J10pXG5cdHB1YmxpYyBvbkNsaWNrKGV2ZW50OiBhbnkpOiB2b2lkIHtcblx0XHRpZiAoIXRoaXMuY3VycmVudGx5RHJhZ2dlZCAmJiAhdGhpcy5jdXJyZW50bHlSZXNpemluZykge1xuXHRcdFx0dGhpcy5kcmFnZ2FibGVDbGljay5lbWl0KGV2ZW50KTtcblx0XHR9XG5cdH1cblxuXHRwdWJsaWMgbmdPbkluaXQoKTogdm9pZCB7XG5cdFx0aWYgKHRoaXMuZHJhZ2dhYmxlT3B0aW9ucy5yZXN0cmljdFBhcmVudCkge1xuXHRcdFx0dGhpcy5kcmFnZ2FibGVPcHRpb25zLm1vZGlmaWVycyA9IFtcblx0XHRcdFx0aW50ZXJhY3QubW9kaWZpZXJzLnJlc3RyaWN0UmVjdCh7XG5cdFx0XHRcdFx0cmVzdHJpY3Rpb246ICdwYXJlbnQnLFxuXHRcdFx0XHRcdGVuZE9ubHk6ICAgICBmYWxzZVxuXHRcdFx0XHR9KV07XG5cblx0XHR9XG5cdFx0aW50ZXJhY3QodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQpXG5cdFx0XHQuZHJhZ2dhYmxlKE9iamVjdC5hc3NpZ24oe30sIHRoaXMuZHJhZ2dhYmxlT3B0aW9ucyB8fCB7fSkpXG5cdFx0XHQub24oJ2RyYWdtb3ZlJywgZXZlbnQgPT4gdGhpcy5kb0RyYWdNb3ZlKGV2ZW50KSlcblx0XHRcdC5vbignZHJhZ2VuZCcsIGV2ZW50ID0+IHRoaXMuZG9EcmFnRW5kKGV2ZW50KSlcblx0XHRcdC5vbigncmVzaXplbW92ZScsICgpID0+IHRoaXMuZG9DdXJyZW50bHlSZXNpemluZ1VwZGF0ZSh0cnVlKSlcblx0XHRcdC5vbigncmVzaXplZW5kJywgKCkgPT4gdGhpcy5kb0N1cnJlbnRseVJlc2l6aW5nVXBkYXRlKGZhbHNlKSk7XG5cdH1cblxuXHRwcml2YXRlIGRvQ3VycmVudGx5UmVzaXppbmdVcGRhdGUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcblx0XHRzZXRUaW1lb3V0KCgpID0+IHtcblx0XHRcdHRoaXMuY3VycmVudGx5UmVzaXppbmcgPSB2YWx1ZTtcblx0XHR9KTtcblx0fVxuXG5cdHByaXZhdGUgZG9EcmFnRW5kKGV2ZW50KTogdm9pZCB7XG5cdFx0ZXZlbnQudGFyZ2V0LmNsYXNzTGlzdC5yZW1vdmUoJ2dldHRpbmctZHJhZ2dlZCcpO1xuXHRcdGNvbnN0IHRhcmdldCA9IGV2ZW50LnRhcmdldDtcblx0XHR0aGlzLmZpbmFsUG9zaXRpb24uZW1pdCh7eDogdGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS14JykgfHwgMCwgeTogdGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS15JykgfHwgMH0pO1xuXHRcdHNldFRpbWVvdXQoKCkgPT4ge1xuXHRcdFx0KHdpbmRvdyBhcyBhbnkpLmRyYWdEYXRhID0gbnVsbDtcblx0XHRcdHRoaXMuY3VycmVudGx5RHJhZ2dlZCA9IGZhbHNlO1xuXHRcdH0pO1xuXHR9XG5cblx0cHJpdmF0ZSBkb0RyYWdNb3ZlKGV2ZW50KTogdm9pZCB7XG5cdFx0Y29uc3QgdGFyZ2V0ID0gZXZlbnQudGFyZ2V0O1xuXHRcdGNvbnN0IHggPSAocGFyc2VGbG9hdCh0YXJnZXQuZ2V0QXR0cmlidXRlKCdkYXRhLXgnKSkgfHwgMCkgKyBldmVudC5keCAvIHRoaXMuem9vbTtcblx0XHRjb25zdCB5ID0gKHBhcnNlRmxvYXQodGFyZ2V0LmdldEF0dHJpYnV0ZSgnZGF0YS15JykpIHx8IDApICsgZXZlbnQuZHkgLyB0aGlzLnpvb207XG5cblx0XHR0YXJnZXQuc3R5bGUudHJhbnNmb3JtID0gJ3RyYW5zbGF0ZSgnICsgeCArICdweCwgJyArIHkgKyAncHgpJztcblx0XHR0YXJnZXQuc2V0QXR0cmlidXRlKCdkYXRhLXgnLCB4KTtcblx0XHR0YXJnZXQuc2V0QXR0cmlidXRlKCdkYXRhLXknLCB5KTtcblxuXHRcdHRhcmdldC5jbGFzc0xpc3QuYWRkKCdnZXR0aW5nLWRyYWdnZWQnKTtcblx0XHR0aGlzLmN1cnJlbnRseURyYWdnZWQgPSB0cnVlO1xuXHRcdHRoaXMuY3VycmVudFBvc2l0aW9uLmVtaXQoe3g6IHRhcmdldC5nZXRBdHRyaWJ1dGUoJ2RhdGEteCcpIHx8IDAsIHk6IHRhcmdldC5nZXRBdHRyaWJ1dGUoJ2RhdGEteScpIHx8IDB9KTtcblx0XHQod2luZG93IGFzIGFueSkuZHJhZ0RhdGEgPSB0aGlzLm1vZGVsO1xuXHR9XG59XG4iXX0=