@ng-doc/ui-kit
Version:
<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>
86 lines (82 loc) • 3.92 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, inject, DOCUMENT, ElementRef, NgZone, DestroyRef, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { fromEvent } from 'rxjs';
import { switchMap, filter, takeUntil, tap } from 'rxjs/operators';
/**
*
* @param event
*/
function isMouseEvent(event) {
return event instanceof MouseEvent;
}
/**
*
* @param event
*/
function isWheelEvent(event) {
return event instanceof WheelEvent;
}
class NgDocMagnifierComponent {
constructor() {
this.x = signal(0);
this.y = signal(0);
this.scale = signal(1);
this.drag = signal(false);
this.document = inject(DOCUMENT);
this.element = inject(ElementRef).nativeElement;
this.ngZone = inject(NgZone);
this.destroyRef = inject(DestroyRef);
this.transform = computed(() => {
const scale = this.scale();
const x = this.x();
const y = this.y();
return `matrix(${scale}, 0, 0, ${scale}, ${x * scale}, ${y * scale})`;
});
}
ngOnInit() {
fromEvent(this.element, 'mousedown')
.pipe(switchMap((event) => {
event.preventDefault();
this.drag.set(true);
return fromEvent(this.document, 'mousemove').pipe(filter(isMouseEvent), takeUntil(fromEvent(this.document, 'mouseup')), tap({ complete: () => this.drag.set(false) }));
}), takeUntilDestroyed(this.destroyRef))
.subscribe((event) => {
this.x.update((x) => x + event.movementX / this.scale());
this.y.update((y) => y + event.movementY / this.scale());
});
fromEvent(this.element, 'wheel')
.pipe(filter(isWheelEvent), takeUntilDestroyed(this.destroyRef))
.subscribe((event) => {
event.preventDefault();
this.scale.update((scale) => Math.max(scale * (1 + event.deltaY / 1000), 1));
});
}
incrementX(x) {
this.x.update((current) => current + x / this.scale());
}
incrementY(y) {
this.y.update((current) => current + y / this.scale());
}
zoom(diff) {
this.scale.update((scale) => Math.max(scale * (1 + diff / 1000), 1));
}
reset() {
this.x.set(0);
this.y.set(0);
this.scale.set(1);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocMagnifierComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: NgDocMagnifierComponent, isStandalone: true, selector: "ng-doc-magnifier", host: { properties: { "attr.data-drag": "drag()" } }, ngImport: i0, template: "<div class=\"ng-doc-magnifier-container\" [style.transform]=\"transform()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;overflow:hidden;cursor:default}:host[data-drag=true]{cursor:move}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocMagnifierComponent, decorators: [{
type: Component,
args: [{ selector: 'ng-doc-magnifier', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[attr.data-drag]': 'drag()',
}, template: "<div class=\"ng-doc-magnifier-container\" [style.transform]=\"transform()\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{display:block;overflow:hidden;cursor:default}:host[data-drag=true]{cursor:move}\n"] }]
}], ctorParameters: () => [] });
/**
* Generated bundle index. Do not edit.
*/
export { NgDocMagnifierComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-magnifier.mjs.map