mutable-div
Version:
Directives to enable moving or resizing a div element.
63 lines • 7.87 kB
JavaScript
import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { ResizeHandlersComponent } from './resize-handlers/resize-handlers.component';
import * as i0 from "@angular/core";
export class ResizableElementDirective {
constructor(el, container) {
this.el = el;
this.container = container;
this.rotate = 0;
this.selected = false;
this.stopped = new EventEmitter();
}
ngOnInit() {
this.addHandlersToElement();
}
ngOnChanges() {
if (this.resizeHandlersComponent) {
this.resizeHandlersComponent.instance.selected = this.selected;
this.resizeHandlersComponent.instance.rotate = this.rotate;
}
}
addHandlersToElement() {
this.resizeHandlersComponent = this.container.createComponent(ResizeHandlersComponent);
this.resizeHandlersComponent.instance.parentElement = this.el;
this.resizeHandlersComponent.instance.rotate = this.rotate;
this.resizeHandlersComponent.instance.selected = this.selected;
this.el.nativeElement.appendChild(this.resizeHandlersComponent.location.nativeElement);
}
onPointerDown() {
this.resizeHandlersComponent.instance.selected = true;
}
onPointerUp() {
this.stopped.emit();
}
onWindowPointerUp(targetEvent) {
if (!this.el.nativeElement.contains(targetEvent)) {
this.resizeHandlersComponent.instance.selected = false;
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableElementDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ResizableElementDirective, selector: "[resizable]", inputs: { rotate: "rotate", selected: "selected" }, outputs: { stopped: "stopped" }, host: { listeners: { "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "window:pointerup": "onWindowPointerUp($event.target)" } }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableElementDirective, decorators: [{
type: Directive,
args: [{
selector: '[resizable]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }]; }, propDecorators: { rotate: [{
type: Input
}], selected: [{
type: Input
}], stopped: [{
type: Output
}], onPointerDown: [{
type: HostListener,
args: ['pointerdown']
}], onPointerUp: [{
type: HostListener,
args: ['pointerup']
}], onWindowPointerUp: [{
type: HostListener,
args: ['window:pointerup', ['$event.target']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXphYmxlLWVsZW1lbnQuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbXV0YWJsZS1kaXYvc3JjL2xpYi9yZXNpemFibGUtZWxlbWVudC5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUdMLFNBQVMsRUFFVCxZQUFZLEVBQ1osWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBR1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNkNBQTZDLENBQUM7O0FBS3RGLE1BQU0sT0FBTyx5QkFBeUI7SUFRcEMsWUFBb0IsRUFBYyxFQUFVLFNBQTJCO1FBQW5ELE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVSxjQUFTLEdBQVQsU0FBUyxDQUFrQjtRQU45RCxXQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ1gsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNoQixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQUltQyxDQUFDO0lBRTNFLFFBQVE7UUFDTixJQUFJLENBQUMsb0JBQW9CLEVBQUUsQ0FBQztJQUM5QixDQUFDO0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLHVCQUF1QixFQUFFO1lBQ2hDLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7WUFDL0QsSUFBSSxDQUFDLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQztTQUM1RDtJQUNILENBQUM7SUFFRCxvQkFBb0I7UUFDbEIsSUFBSSxDQUFDLHVCQUF1QixHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsZUFBZSxDQUFDLHVCQUF1QixDQUFDLENBQUM7UUFDdkYsSUFBSSxDQUFDLHVCQUF1QixDQUFDLFFBQVEsQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQztRQUM5RCxJQUFJLENBQUMsdUJBQXVCLENBQUMsUUFBUSxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQzNELElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUM7UUFDL0QsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDekYsQ0FBQztJQUU0QixhQUFhO1FBQ3hDLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxRQUFRLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztJQUN4RCxDQUFDO0lBRTBCLFdBQVc7UUFDcEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRW9ELGlCQUFpQixDQUFDLFdBQVc7UUFDaEYsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsRUFBRTtZQUNoRCxJQUFJLENBQUMsdUJBQXVCLENBQUMsUUFBUSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDeEQ7SUFDSCxDQUFDO2tJQXpDVSx5QkFBeUI7c0hBQXpCLHlCQUF5Qjs7NEZBQXpCLHlCQUF5QjtrQkFIckMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsYUFBYTtpQkFDeEI7Z0lBR1UsTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTTtnQkF5QnNCLGFBQWE7c0JBQXpDLFlBQVk7dUJBQUMsYUFBYTtnQkFJQSxXQUFXO3NCQUFyQyxZQUFZO3VCQUFDLFdBQVc7Z0JBSTRCLGlCQUFpQjtzQkFBckUsWUFBWTt1QkFBQyxrQkFBa0IsRUFBRSxDQUFDLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIE9uSW5pdCxcbiAgQ29tcG9uZW50UmVmLFxuICBEaXJlY3RpdmUsXG4gIEVsZW1lbnRSZWYsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdExpc3RlbmVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBPbkNoYW5nZXMsXG4gIFZpZXdDb250YWluZXJSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBSZXNpemVIYW5kbGVyc0NvbXBvbmVudCB9IGZyb20gJy4vcmVzaXplLWhhbmRsZXJzL3Jlc2l6ZS1oYW5kbGVycy5jb21wb25lbnQnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbcmVzaXphYmxlXSdcbn0pXG5leHBvcnQgY2xhc3MgUmVzaXphYmxlRWxlbWVudERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcblxuICBASW5wdXQoKSByb3RhdGUgPSAwO1xuICBASW5wdXQoKSBzZWxlY3RlZCA9IGZhbHNlO1xuICBAT3V0cHV0KCkgc3RvcHBlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICByZXNpemVIYW5kbGVyc0NvbXBvbmVudDogQ29tcG9uZW50UmVmPFJlc2l6ZUhhbmRsZXJzQ29tcG9uZW50PjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIGNvbnRhaW5lcjogVmlld0NvbnRhaW5lclJlZikge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmFkZEhhbmRsZXJzVG9FbGVtZW50KCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5yZXNpemVIYW5kbGVyc0NvbXBvbmVudCkge1xuICAgICAgdGhpcy5yZXNpemVIYW5kbGVyc0NvbXBvbmVudC5pbnN0YW5jZS5zZWxlY3RlZCA9IHRoaXMuc2VsZWN0ZWQ7XG4gICAgICB0aGlzLnJlc2l6ZUhhbmRsZXJzQ29tcG9uZW50Lmluc3RhbmNlLnJvdGF0ZSA9IHRoaXMucm90YXRlO1xuICAgIH1cbiAgfVxuXG4gIGFkZEhhbmRsZXJzVG9FbGVtZW50KCkge1xuICAgIHRoaXMucmVzaXplSGFuZGxlcnNDb21wb25lbnQgPSB0aGlzLmNvbnRhaW5lci5jcmVhdGVDb21wb25lbnQoUmVzaXplSGFuZGxlcnNDb21wb25lbnQpO1xuICAgIHRoaXMucmVzaXplSGFuZGxlcnNDb21wb25lbnQuaW5zdGFuY2UucGFyZW50RWxlbWVudCA9IHRoaXMuZWw7XG4gICAgdGhpcy5yZXNpemVIYW5kbGVyc0NvbXBvbmVudC5pbnN0YW5jZS5yb3RhdGUgPSB0aGlzLnJvdGF0ZTtcbiAgICB0aGlzLnJlc2l6ZUhhbmRsZXJzQ29tcG9uZW50Lmluc3RhbmNlLnNlbGVjdGVkID0gdGhpcy5zZWxlY3RlZDtcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuYXBwZW5kQ2hpbGQodGhpcy5yZXNpemVIYW5kbGVyc0NvbXBvbmVudC5sb2NhdGlvbi5uYXRpdmVFbGVtZW50KTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ3BvaW50ZXJkb3duJykgb25Qb2ludGVyRG93bigpIHtcbiAgICB0aGlzLnJlc2l6ZUhhbmRsZXJzQ29tcG9uZW50Lmluc3RhbmNlLnNlbGVjdGVkID0gdHJ1ZTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ3BvaW50ZXJ1cCcpIG9uUG9pbnRlclVwKCkge1xuICAgIHRoaXMuc3RvcHBlZC5lbWl0KCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCd3aW5kb3c6cG9pbnRlcnVwJywgWyckZXZlbnQudGFyZ2V0J10pIG9uV2luZG93UG9pbnRlclVwKHRhcmdldEV2ZW50KSB7XG4gICAgaWYgKCF0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuY29udGFpbnModGFyZ2V0RXZlbnQpKSB7XG4gICAgICB0aGlzLnJlc2l6ZUhhbmRsZXJzQ29tcG9uZW50Lmluc3RhbmNlLnNlbGVjdGVkID0gZmFsc2U7XG4gICAgfVxuICB9XG59XG4iXX0=