Igor Kulikov
4 years ago
68 changed files with 357 additions and 869 deletions
@ -1,274 +0,0 @@ |
|||
///
|
|||
/// Copyright © 2016-2023 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core'; |
|||
import { MatChipGrid, MatChipRow } from '@angular/material/chips'; |
|||
import Timeout = NodeJS.Timeout; |
|||
|
|||
export interface MatChipDropEvent { |
|||
from: number; |
|||
to: number; |
|||
} |
|||
|
|||
@Directive({ |
|||
selector: 'mat-chip-grid[tb-chip-draggable]', |
|||
}) |
|||
export class MatChipDraggableDirective implements AfterViewInit { |
|||
|
|||
@Output() |
|||
chipDrop = new EventEmitter<MatChipDropEvent>(); |
|||
|
|||
private draggableChips: Array<DraggableChip> = []; |
|||
|
|||
constructor(private chipsList: MatChipGrid, |
|||
private elementRef: ElementRef<HTMLElement>) { |
|||
} |
|||
|
|||
@HostListener('document:mouseup') |
|||
onDocumentMouseUp() { |
|||
this.draggableChips.forEach((draggableChip) => { |
|||
draggableChip.preventDrag = false; |
|||
}); |
|||
} |
|||
|
|||
ngAfterViewInit(): void { |
|||
this.configureDraggableChipList(); |
|||
this.chipsList._chips.changes.subscribe(() => { |
|||
this.configureDraggableChipList(); |
|||
}); |
|||
} |
|||
|
|||
private configureDraggableChipList() { |
|||
const toRemove: Array<DraggableChip> = []; |
|||
this.chipsList._chips.forEach((chip) => { |
|||
const found = this.draggableChips.find((draggableChip) => draggableChip.chip === chip); |
|||
if (!found) { |
|||
this.draggableChips.push(new DraggableChip(chip, |
|||
this.chipsList, |
|||
this.elementRef.nativeElement, |
|||
this.chipDrop)); |
|||
} |
|||
} |
|||
); |
|||
this.draggableChips.forEach((draggableChip) => { |
|||
const found = this.chipsList._chips.find((chip) => chip === draggableChip.chip); |
|||
if (!found) { |
|||
toRemove.push(draggableChip); |
|||
} |
|||
}); |
|||
toRemove.forEach((draggableChip) => { |
|||
const index = this.draggableChips.indexOf(draggableChip); |
|||
this.draggableChips.splice(index, 1); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
const draggingClassName = 'dragging'; |
|||
const droppingClassName = 'dropping'; |
|||
const droppingBeforeClassName = 'dropping-before'; |
|||
const droppingAfterClassName = 'dropping-after'; |
|||
|
|||
let globalDraggingChipList: MatChipGrid = null; |
|||
|
|||
class DraggableChip { |
|||
|
|||
private chipElement: HTMLElement; |
|||
private readonly handle: HTMLElement; |
|||
|
|||
private dragging = false; |
|||
private counter = 0; |
|||
|
|||
private dropPosition: 'after' | 'before'; |
|||
|
|||
private dropTimeout: Timeout; |
|||
|
|||
public preventDrag = false; |
|||
|
|||
private dropHandler = this.onDrop.bind(this); |
|||
private dragOverHandler = this.onDragOver.bind(this); |
|||
|
|||
constructor(public chip: MatChipRow, |
|||
private chipsList: MatChipGrid, |
|||
private chipListElement: HTMLElement, |
|||
private chipDrop: EventEmitter<MatChipDropEvent>) { |
|||
chip._mousedown = () => {}; |
|||
this.chipElement = chip._elementRef.nativeElement; |
|||
this.chipElement.setAttribute('draggable', 'true'); |
|||
this.handle = this.chipElement.getElementsByClassName('tb-chip-drag-handle')[0] as HTMLElement; |
|||
this.chipElement.addEventListener('mousedown', this.onMouseDown.bind(this)); |
|||
this.chipElement.addEventListener('dragstart', this.onDragStart.bind(this)); |
|||
this.chipElement.addEventListener('dragend', this.onDragEnd.bind(this)); |
|||
this.chipElement.addEventListener('dragenter', this.onDragEnter.bind(this)); |
|||
this.chipElement.addEventListener('dragleave', this.onDragLeave.bind(this)); |
|||
} |
|||
|
|||
private onMouseDown(event: MouseEvent) { |
|||
if (event.target !== this.handle) { |
|||
this.preventDrag = true; |
|||
} |
|||
} |
|||
|
|||
private onDragStart(event: Event | any) { |
|||
if (this.preventDrag) { |
|||
event.preventDefault(); |
|||
} else { |
|||
event.stopPropagation(); |
|||
this.dragging = true; |
|||
globalDraggingChipList = this.chipsList; |
|||
this.chipListElement.classList.add(draggingClassName); |
|||
this.chipElement.classList.add(draggingClassName); |
|||
event = (event as any).originalEvent || event; |
|||
const dataTransfer = event.dataTransfer; |
|||
dataTransfer.effectAllowed = 'copyMove'; |
|||
dataTransfer.dropEffect = 'move'; |
|||
dataTransfer.setData('text', this.index() + ''); |
|||
const offset = this.calculateDragImageOffset(event, this.chipElement) || {x: 0, y: 0}; |
|||
(event.dataTransfer as any).setDragImage( this.chipElement, offset.x, offset.y ); |
|||
} |
|||
} |
|||
|
|||
private onDragEnter(event: Event | any) { |
|||
this.counter++; |
|||
if (this.dragging) { |
|||
return; |
|||
} |
|||
this.chipElement.removeEventListener('dragover', this.dragOverHandler); |
|||
this.chipElement.removeEventListener('drop', this.dropHandler); |
|||
|
|||
this.chipElement.addEventListener('dragover', this.dragOverHandler); |
|||
this.chipElement.addEventListener('drop', this.dropHandler); |
|||
} |
|||
|
|||
private onDragLeave(event: Event | any) { |
|||
this.counter--; |
|||
if (this.counter <= 0) { |
|||
this.counter = 0; |
|||
this.chipElement.classList.remove(droppingClassName); |
|||
this.chipElement.classList.remove(droppingAfterClassName); |
|||
this.chipElement.classList.remove(droppingBeforeClassName); |
|||
} |
|||
} |
|||
|
|||
private onDragEnd(event: Event | any) { |
|||
event.stopPropagation(); |
|||
this.dragging = false; |
|||
globalDraggingChipList = null; |
|||
this.chipListElement.classList.remove(draggingClassName); |
|||
this.chipElement.classList.remove(draggingClassName); |
|||
} |
|||
|
|||
private onDragOver(event: Event | any) { |
|||
if (this.dragging) { |
|||
return; |
|||
} |
|||
event.preventDefault(); |
|||
if (globalDraggingChipList !== this.chipsList) { |
|||
return; |
|||
} |
|||
const bounds = this.chipElement.getBoundingClientRect(); |
|||
event = (event as any).originalEvent || event; |
|||
const props = { |
|||
width: bounds.right - bounds.left, |
|||
height: bounds.bottom - bounds.top, |
|||
x: event.clientX - bounds.left, |
|||
y: event.clientY - bounds.top, |
|||
}; |
|||
|
|||
const horizontalOffset = props.x; |
|||
const horizontalMidPoint = props.width / 2; |
|||
|
|||
const verticalOffset = props.y; |
|||
const verticalMidPoint = props.height / 2; |
|||
|
|||
this.chipElement.classList.add(droppingClassName); |
|||
|
|||
this.chipElement.classList.remove(droppingAfterClassName); |
|||
this.chipElement.classList.remove(droppingBeforeClassName); |
|||
|
|||
if (horizontalOffset >= horizontalMidPoint || verticalOffset >= verticalMidPoint) { |
|||
this.dropPosition = 'after'; |
|||
this.chipElement.classList.add(droppingAfterClassName); |
|||
} else { |
|||
this.dropPosition = 'before'; |
|||
this.chipElement.classList.add(droppingBeforeClassName); |
|||
} |
|||
|
|||
} |
|||
|
|||
private onDrop(event: Event | any) { |
|||
this.counter = 0; |
|||
event.preventDefault(); |
|||
if (globalDraggingChipList !== this.chipsList) { |
|||
return; |
|||
} |
|||
event = (event as any).originalEvent || event; |
|||
const droppedItemIndex = parseInt(event.dataTransfer.getData('text'), 10); |
|||
const currentIndex = this.index(); |
|||
let newIndex; |
|||
if (this.dropPosition === 'before') { |
|||
if (droppedItemIndex < currentIndex) { |
|||
newIndex = currentIndex - 1; |
|||
} else { |
|||
newIndex = currentIndex; |
|||
} |
|||
} else { |
|||
if (droppedItemIndex < currentIndex) { |
|||
newIndex = currentIndex; |
|||
} else { |
|||
newIndex = currentIndex + 1; |
|||
} |
|||
} |
|||
if (this.dropTimeout) { |
|||
clearTimeout(this.dropTimeout); |
|||
} |
|||
if (droppedItemIndex !== newIndex) { |
|||
this.dropTimeout = setTimeout(() => { |
|||
this.dropPosition = null; |
|||
|
|||
this.chipElement.classList.remove(droppingClassName); |
|||
this.chipElement.classList.remove(droppingAfterClassName); |
|||
this.chipElement.classList.remove(droppingBeforeClassName); |
|||
|
|||
this.chipElement.removeEventListener('drop', this.dropHandler); |
|||
|
|||
const dropEvent: MatChipDropEvent = { |
|||
from: droppedItemIndex, |
|||
to: newIndex |
|||
}; |
|||
this.chipDrop.emit(dropEvent); |
|||
}, 1000 / 16); |
|||
} |
|||
} |
|||
|
|||
private index(): number { |
|||
return this.chipsList._chips.toArray().indexOf(this.chip); |
|||
} |
|||
|
|||
private calculateDragImageOffset(event: DragEvent, dragImage: Element): { x: number; y: number } { |
|||
|
|||
const dragImageComputedStyle = window.getComputedStyle( dragImage ); |
|||
const paddingTop = parseFloat( dragImageComputedStyle.paddingTop ) || 0; |
|||
const paddingLeft = parseFloat( dragImageComputedStyle.paddingLeft ) || 0; |
|||
const borderTop = parseFloat( dragImageComputedStyle.borderTopWidth ) || 0; |
|||
const borderLeft = parseFloat( dragImageComputedStyle.borderLeftWidth ) || 0; |
|||
|
|||
return { |
|||
x: event.offsetX + paddingLeft + borderLeft, |
|||
y: event.offsetY + paddingTop + borderTop |
|||
}; |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue