@progress/kendo-angular-pivotgrid
Version:
PivotGrid package for Angular
132 lines (131 loc) • 6.52 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, Input, ElementRef, NgZone, Optional, HostBinding, Renderer2 } from '@angular/core';
import { DraggableDirective, isDocumentAvailable } from '@progress/kendo-angular-common';
import { PIVOT_CONFIGURATOR_ACTION } from '@progress/kendo-pivotgrid-common';
import { ConfiguratorService } from './configurator.service';
import { DropCueService } from './drop-cue.service';
import { Subscription } from 'rxjs';
import { tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-common";
import * as i2 from "./configurator.service";
import * as i3 from "./drop-cue.service";
/**
* @hidden
*/
export class DraggableChipDirective {
draggable;
element;
zone;
service;
cue;
renderer;
get pointerEvents() {
return this.drag ? 'none' : undefined;
}
touchActions = 'none';
item;
initialX = {};
initialY = {};
drag;
invalidTarget = false;
subs = new Subscription();
constructor(draggable, element, zone, service, cue, renderer) {
this.draggable = draggable;
this.element = element;
this.zone = zone;
this.service = service;
this.cue = cue;
this.renderer = renderer;
}
ngOnInit() {
this.subs.add(this.draggable.kendoPress
.pipe(tap((e) => {
this.service.closeMenu.emit();
if (e.originalEvent.target.closest('.k-icon-wrapper-host')) {
this.invalidTarget = true;
}
})).subscribe((event) => {
this.zone.runOutsideAngular(() => {
if (isDocumentAvailable() && !this.invalidTarget) {
this.initialX.current = event.clientX;
this.initialY.current = event.clientY;
const element = this.element.nativeElement;
this.renderer.setStyle(element, 'z-index', 1);
this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.setDragItem, payload: this.item });
this.service.draggedElement = {
element,
fromSection: element.closest('.k-chip-list').getAttribute('axes').split('Axes')[0]
};
}
});
}));
this.subs.add(this.draggable.kendoDrag
.subscribe((event) => {
this.zone.runOutsideAngular(() => {
if (isDocumentAvailable() && !this.invalidTarget) {
const isDragging = Math.abs(this.initialX.current - event.clientX) > 5 ||
Math.abs(this.initialY.current - event.clientY) > 5;
if (!isDragging) {
return;
}
this.drag = true;
if (!document.elementFromPoint(event.clientX, event.clientY)?.closest('.k-pivotgrid-configurator')) {
return;
}
this.renderer.setStyle(this.element.nativeElement, 'transform', `translate(${event.clientX - this.initialX.current}px, ${event.clientY - this.initialY.current}px)`);
}
});
}));
this.subs.add(this.draggable.kendoRelease
.subscribe(() => {
this.zone.runOutsideAngular(() => {
this.drag = false;
this.invalidTarget = false;
if (this.service.state.dragItem) {
const element = this.element.nativeElement;
if (isDocumentAvailable()) {
this.renderer.removeStyle(element, 'transform');
this.cue.remove(this.service.cueContainer);
}
this.service.parseConfiguratorState({ type: PIVOT_CONFIGURATOR_ACTION.drop, payload: this.item });
this.service.state.dragItem = null;
this.service.state.dropDirection = null;
this.service.state.dropTarget = null;
this.service.state.dropZone = null;
this.renderer.removeStyle(element, 'z-index');
this.service.draggedElement = null;
if (this.service.dropTargetElement) {
this.renderer.removeStyle(this.service.dropTargetElement, 'cursor');
this.service.dropTargetElement = null;
}
}
});
}));
}
ngOnDestroy() {
this.subs.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableChipDirective, deps: [{ token: i1.DraggableDirective, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i2.ConfiguratorService }, { token: i3.DropCueService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableChipDirective, isStandalone: true, selector: "[kendoChipDraggable]", inputs: { item: "item" }, host: { properties: { "style.pointerEvents": "this.pointerEvents", "style.touch-action": "this.touchActions" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableChipDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoChipDraggable]',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i1.DraggableDirective, decorators: [{
type: Optional
}] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i2.ConfiguratorService }, { type: i3.DropCueService }, { type: i0.Renderer2 }]; }, propDecorators: { pointerEvents: [{
type: HostBinding,
args: ['style.pointerEvents']
}], touchActions: [{
type: HostBinding,
args: ['style.touch-action']
}], item: [{
type: Input
}] } });