You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
import { Directive, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
|
import { FcCallbacks, FcConnector, FcConnectorRectInfo, FcNodeRectInfo, FlowchartConstants } from './ngx-flowchart.models';
|
|
import { FcModelService } from './model.service';
|
|
|
|
@Directive({
|
|
// tslint:disable-next-line:directive-selector
|
|
selector: '[fc-connector]'
|
|
})
|
|
export class FcConnectorDirective implements OnInit, OnChanges {
|
|
|
|
@Input()
|
|
callbacks: FcCallbacks;
|
|
|
|
@Input()
|
|
modelservice: FcModelService;
|
|
|
|
@Input()
|
|
connector: FcConnector;
|
|
|
|
@Input()
|
|
nodeRectInfo: FcNodeRectInfo;
|
|
|
|
@Input()
|
|
mouseOverConnector: FcConnector;
|
|
|
|
constructor(public elementRef: ElementRef<HTMLElement>) {
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
const element = $(this.elementRef.nativeElement);
|
|
element.addClass(FlowchartConstants.connectorClass);
|
|
if (this.modelservice.isEditable()) {
|
|
element.attr('draggable', 'true');
|
|
this.updateConnectorClass();
|
|
}
|
|
const connectorRectInfo: FcConnectorRectInfo = {
|
|
type: this.connector.type,
|
|
width: this.elementRef.nativeElement.offsetWidth,
|
|
height: this.elementRef.nativeElement.offsetHeight,
|
|
nodeRectInfo: this.nodeRectInfo
|
|
};
|
|
this.modelservice.connectors.setConnectorRectInfo(this.connector.id, connectorRectInfo);
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
let updateConnector = false;
|
|
for (const propName of Object.keys(changes)) {
|
|
const change = changes[propName];
|
|
if (!change.firstChange && change.currentValue !== change.previousValue) {
|
|
if (propName === 'mouseOverConnector') {
|
|
updateConnector = true;
|
|
}
|
|
}
|
|
}
|
|
if (updateConnector && this.modelservice.isEditable()) {
|
|
this.updateConnectorClass();
|
|
}
|
|
}
|
|
|
|
private updateConnectorClass() {
|
|
const element = $(this.elementRef.nativeElement);
|
|
if (this.connector === this.mouseOverConnector) {
|
|
element.addClass(FlowchartConstants.hoverClass);
|
|
} else {
|
|
element.removeClass(FlowchartConstants.hoverClass);
|
|
}
|
|
}
|
|
|
|
@HostListener('dragover', ['$event'])
|
|
dragover(event: Event | any) {
|
|
// Skip - conflict with magnet
|
|
/* if (this.modelservice.isEditable()) {
|
|
return this.callbacks.edgeDragoverConnector(event, this.connector);
|
|
}*/
|
|
}
|
|
|
|
@HostListener('drop', ['$event'])
|
|
drop(event: Event | any) {
|
|
if (this.modelservice.isEditable()) {
|
|
return this.callbacks.edgeDrop(event, this.connector);
|
|
}
|
|
}
|
|
|
|
@HostListener('dragend', ['$event'])
|
|
dragend(event: Event | any) {
|
|
if (this.modelservice.isEditable()) {
|
|
this.callbacks.edgeDragend(event);
|
|
}
|
|
}
|
|
|
|
@HostListener('dragstart', ['$event'])
|
|
dragstart(event: Event | any) {
|
|
if (this.modelservice.isEditable()) {
|
|
this.callbacks.edgeDragstart(event, this.connector);
|
|
}
|
|
}
|
|
|
|
@HostListener('mouseenter', ['$event'])
|
|
mouseenter(event: MouseEvent) {
|
|
if (this.modelservice.isEditable()) {
|
|
this.callbacks.connectorMouseEnter(event, this.connector);
|
|
}
|
|
}
|
|
|
|
@HostListener('mouseleave', ['$event'])
|
|
mouseleave(event: MouseEvent) {
|
|
if (this.modelservice.isEditable()) {
|
|
this.callbacks.connectorMouseLeave(event, this.connector);
|
|
}
|
|
}
|
|
|
|
}
|