NgxFlowchart implmenetation
Igor Kulikov
6 years ago
parent
1677d61756
commit
3ff2c79491
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import { Component } from '@angular/core';
|
||||
import { FcNodeComponent } from './node.component';
|
||||
export class DefaultFcNodeComponent extends FcNodeComponent {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
}
|
||||
DefaultFcNodeComponent.decorators = [
|
||||
{ type: Component, args: [{
|
||||
selector: 'fc-default-node',
|
||||
template: "<div\n (dblclick)=\"userNodeCallbacks.doubleClick($event, node)\">\n <div class=\"{{flowchartConstants.nodeOverlayClass}}\"></div>\n <div class=\"innerNode\">\n <p>{{ node.name }}</p>\n\n <div class=\"{{flowchartConstants.leftConnectorClass}}\">\n <div fc-magnet [connector]=\"connector\" [callbacks]=\"callbacks\"\n *ngFor=\"let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)\">\n <div fc-connector [connector]=\"connector\"\n [mouseOverConnector]=\"mouseOverConnector\"\n [callbacks]=\"callbacks\"\n [modelservice]=\"modelservice\"></div>\n </div>\n </div>\n <div class=\"{{flowchartConstants.rightConnectorClass}}\">\n <div fc-magnet [connector]=\"connector\" [callbacks]=\"callbacks\"\n *ngFor=\"let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)\">\n <div fc-connector [connector]=\"connector\"\n [mouseOverConnector]=\"mouseOverConnector\"\n [callbacks]=\"callbacks\"\n [modelservice]=\"modelservice\"></div>\n </div>\n </div>\n </div>\n <div *ngIf=\"modelservice.isEditable() && !node.readonly\" class=\"fc-nodeedit\" (click)=\"userNodeCallbacks.nodeEdit($event, node)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelservice.isEditable() && !node.readonly\" class=\"fc-nodedelete\" (click)=\"modelservice.nodes.delete(node)\">\n ×\n </div>\n</div>\n",
|
||||
styles: [":host .fc-node-overlay{position:absolute;pointer-events:none;left:0;top:0;right:0;bottom:0;background-color:#000;opacity:0}:host :host-context(.fc-hover) .fc-node-overlay{opacity:.25;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:flex;justify-content:center;align-items:center;min-width:100px;border-radius:5px;background-color:#f15b26;color:#fff;font-size:16px;pointer-events:none}:host .innerNode p{padding:0 15px;text-align:center}"]
|
||||
}] }
|
||||
];
|
||||
/** @nocollapse */
|
||||
DefaultFcNodeComponent.ctorParameters = () => [];
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFPbkQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGVBQWU7SUFFekQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7OztZQVRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQiw4aERBQTRDOzthQUU3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmNOb2RlQ29tcG9uZW50IH0gZnJvbSAnLi9ub2RlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2ZjLWRlZmF1bHQtbm9kZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEZWZhdWx0RmNOb2RlQ29tcG9uZW50IGV4dGVuZHMgRmNOb2RlQ29tcG9uZW50IHtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbn1cbiJdfQ==
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,81 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FlowchartConstants } from './ngx-flowchart.models';
|
||||
export class FcEdgeDrawingService {
|
||||
constructor() {
|
||||
}
|
||||
/**
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @param {?} style
|
||||
* @return {?}
|
||||
*/
|
||||
getEdgeDAttribute(pt1, pt2, style) {
|
||||
/** @type {?} */
|
||||
let dAddribute = `M ${pt1.x}, ${pt1.y} `;
|
||||
if (style === FlowchartConstants.curvedStyle) {
|
||||
/** @type {?} */
|
||||
const sourceTangent = this.computeEdgeSourceTangent(pt1, pt2);
|
||||
/** @type {?} */
|
||||
const destinationTangent = this.computeEdgeDestinationTangent(pt1, pt2);
|
||||
dAddribute += `C ${sourceTangent.x}, ${sourceTangent.y} ${(destinationTangent.x - 50)}, ${destinationTangent.y} ${pt2.x}, ${pt2.y}`;
|
||||
}
|
||||
else {
|
||||
dAddribute += `L ${pt2.x}, ${pt2.y}`;
|
||||
}
|
||||
return dAddribute;
|
||||
}
|
||||
/**
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
getEdgeCenter(pt1, pt2) {
|
||||
return {
|
||||
x: (pt1.x + pt2.x) / 2,
|
||||
y: (pt1.y + pt2.y) / 2
|
||||
};
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
computeEdgeTangentOffset(pt1, pt2) {
|
||||
return (pt2.y - pt1.y) / 2;
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
computeEdgeSourceTangent(pt1, pt2) {
|
||||
return {
|
||||
x: pt1.x,
|
||||
y: pt1.y + this.computeEdgeTangentOffset(pt1, pt2)
|
||||
};
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
computeEdgeDestinationTangent(pt1, pt2) {
|
||||
return {
|
||||
x: pt2.x,
|
||||
y: pt2.y - this.computeEdgeTangentOffset(pt1, pt2)
|
||||
};
|
||||
}
|
||||
}
|
||||
FcEdgeDrawingService.decorators = [
|
||||
{ type: Injectable }
|
||||
];
|
||||
/** @nocollapse */
|
||||
FcEdgeDrawingService.ctorParameters = () => [];
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1kcmF3aW5nLnNlcnZpY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtZmxvd2NoYXJ0LyIsInNvdXJjZXMiOlsibGliL2VkZ2UtZHJhd2luZy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBWSxrQkFBa0IsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBR3RFLE1BQU0sT0FBTyxvQkFBb0I7SUFFL0I7SUFDQSxDQUFDOzs7Ozs7O0lBRU0saUJBQWlCLENBQUMsR0FBYSxFQUFFLEdBQWEsRUFBRSxLQUFhOztZQUM5RCxVQUFVLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEdBQUc7UUFDeEMsSUFBSSxLQUFLLEtBQUssa0JBQWtCLENBQUMsV0FBVyxFQUFFOztrQkFDdEMsYUFBYSxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDOztrQkFDdkQsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLDZCQUE2QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUM7WUFDdkUsVUFBVSxJQUFJLEtBQUssYUFBYSxDQUFDLENBQUMsS0FBSyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLGtCQUFrQixDQUFDLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztTQUNySTthQUFNO1lBQ0wsVUFBVSxJQUFJLEtBQUssR0FBRyxDQUFDLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUM7U0FDdEM7UUFDRCxPQUFPLFVBQVUsQ0FBQztJQUNwQixDQUFDOzs7Ozs7SUFFTSxhQUFhLENBQUMsR0FBYSxFQUFFLEdBQWE7UUFDL0MsT0FBTztZQUNMLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7WUFDdEIsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztTQUN2QixDQUFDO0lBQ0osQ0FBQzs7Ozs7OztJQUVPLHdCQUF3QixDQUFDLEdBQWEsRUFBRSxHQUFhO1FBQzNELE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDN0IsQ0FBQzs7Ozs7OztJQUVPLHdCQUF3QixDQUFDLEdBQWEsRUFBRSxHQUFhO1FBQzNELE9BQU87WUFDTCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDUixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQztTQUNuRCxDQUFDO0lBQ0osQ0FBQzs7Ozs7OztJQUVPLDZCQUE2QixDQUFDLEdBQWEsRUFBRSxHQUFhO1FBQ2hFLE9BQU87WUFDTCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDUixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQztTQUNuRCxDQUFDO0lBQ0osQ0FBQzs7O1lBekNGLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGY0Nvb3JkcywgRmxvd2NoYXJ0Q29uc3RhbnRzIH0gZnJvbSAnLi9uZ3gtZmxvd2NoYXJ0Lm1vZGVscyc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBGY0VkZ2VEcmF3aW5nU2VydmljZSB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gIH1cblxuICBwdWJsaWMgZ2V0RWRnZURBdHRyaWJ1dGUocHQxOiBGY0Nvb3JkcywgcHQyOiBGY0Nvb3Jkcywgc3R5bGU6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgbGV0IGRBZGRyaWJ1dGUgPSBgTSAke3B0MS54fSwgJHtwdDEueX0gYDtcbiAgICBpZiAoc3R5bGUgPT09IEZsb3djaGFydENvbnN0YW50cy5jdXJ2ZWRTdHlsZSkge1xuICAgICAgY29uc3Qgc291cmNlVGFuZ2VudCA9IHRoaXMuY29tcHV0ZUVkZ2VTb3VyY2VUYW5nZW50KHB0MSwgcHQyKTtcbiAgICAgIGNvbnN0IGRlc3RpbmF0aW9uVGFuZ2VudCA9IHRoaXMuY29tcHV0ZUVkZ2VEZXN0aW5hdGlvblRhbmdlbnQocHQxLCBwdDIpO1xuICAgICAgZEFkZHJpYnV0ZSArPSBgQyAke3NvdXJjZVRhbmdlbnQueH0sICR7c291cmNlVGFuZ2VudC55fSAkeyhkZXN0aW5hdGlvblRhbmdlbnQueCAtIDUwKX0sICR7ZGVzdGluYXRpb25UYW5nZW50Lnl9ICR7cHQyLnh9LCAke3B0Mi55fWA7XG4gICAgfSBlbHNlIHtcbiAgICAgIGRBZGRyaWJ1dGUgKz0gYEwgJHtwdDIueH0sICR7cHQyLnl9YDtcbiAgICB9XG4gICAgcmV0dXJuIGRBZGRyaWJ1dGU7XG4gIH1cblxuICBwdWJsaWMgZ2V0RWRnZUNlbnRlcihwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzKTogRmNDb29yZHMge1xuICAgIHJldHVybiB7XG4gICAgICB4OiAocHQxLnggKyBwdDIueCkgLyAyLFxuICAgICAgeTogKHB0MS55ICsgcHQyLnkpIC8gMlxuICAgIH07XG4gIH1cblxuICBwcml2YXRlIGNvbXB1dGVFZGdlVGFuZ2VudE9mZnNldChwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzKTogbnVtYmVyIHtcbiAgICByZXR1cm4gKHB0Mi55IC0gcHQxLnkpIC8gMjtcbiAgfVxuXG4gIHByaXZhdGUgY29tcHV0ZUVkZ2VTb3VyY2VUYW5nZW50KHB0MTogRmNDb29yZHMsIHB0MjogRmNDb29yZHMpOiBGY0Nvb3JkcyB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHg6IHB0MS54LFxuICAgICAgeTogcHQxLnkgKyB0aGlzLmNvbXB1dGVFZGdlVGFuZ2VudE9mZnNldChwdDEsIHB0MilcbiAgICB9O1xuICB9XG5cbiAgcHJpdmF0ZSBjb21wdXRlRWRnZURlc3RpbmF0aW9uVGFuZ2VudChwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzKTogRmNDb29yZHMge1xuICAgIHJldHVybiB7XG4gICAgICB4OiBwdDIueCxcbiAgICAgIHk6IHB0Mi55IC0gdGhpcy5jb21wdXRlRWRnZVRhbmdlbnRPZmZzZXQocHQxLCBwdDIpXG4gICAgfTtcbiAgfVxuXG59XG4iXX0=
|
||||
@ -0,0 +1,77 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
|
||||
import { FlowchartConstants } from './ngx-flowchart.models';
|
||||
export class FcMagnetDirective {
|
||||
/**
|
||||
* @param {?} elementRef
|
||||
*/
|
||||
constructor(elementRef) {
|
||||
this.elementRef = elementRef;
|
||||
}
|
||||
/**
|
||||
* @return {?}
|
||||
*/
|
||||
ngOnInit() {
|
||||
/** @type {?} */
|
||||
const element = $(this.elementRef.nativeElement);
|
||||
element.addClass(FlowchartConstants.magnetClass);
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
dragover(event) {
|
||||
return this.callbacks.edgeDragoverMagnet(event, this.connector);
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
dragleave(event) {
|
||||
this.callbacks.edgeDragleaveMagnet(event);
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
drop(event) {
|
||||
return this.callbacks.edgeDrop(event, this.connector);
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
dragend(event) {
|
||||
this.callbacks.edgeDragend(event);
|
||||
}
|
||||
}
|
||||
FcMagnetDirective.decorators = [
|
||||
{ type: Directive, args: [{
|
||||
// tslint:disable-next-line:directive-selector
|
||||
selector: '[fc-magnet]'
|
||||
},] }
|
||||
];
|
||||
/** @nocollapse */
|
||||
FcMagnetDirective.ctorParameters = () => [
|
||||
{ type: ElementRef }
|
||||
];
|
||||
FcMagnetDirective.propDecorators = {
|
||||
callbacks: [{ type: Input }],
|
||||
connector: [{ type: Input }],
|
||||
dragover: [{ type: HostListener, args: ['dragover', ['$event'],] }],
|
||||
dragleave: [{ type: HostListener, args: ['dragleave', ['$event'],] }],
|
||||
drop: [{ type: HostListener, args: ['drop', ['$event'],] }],
|
||||
dragend: [{ type: HostListener, args: ['dragend', ['$event'],] }]
|
||||
};
|
||||
if (false) {
|
||||
/** @type {?} */
|
||||
FcMagnetDirective.prototype.callbacks;
|
||||
/** @type {?} */
|
||||
FcMagnetDirective.prototype.connector;
|
||||
/** @type {?} */
|
||||
FcMagnetDirective.prototype.elementRef;
|
||||
}
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFnbmV0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvbWFnbmV0LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNuRixPQUFPLEVBQTRCLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFNdEYsTUFBTSxPQUFPLGlCQUFpQjs7OztJQVE1QixZQUFtQixVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN0RCxDQUFDOzs7O0lBRUQsUUFBUTs7Y0FDQSxPQUFPLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO1FBQ2hELE9BQU8sQ0FBQyxRQUFRLENBQUMsa0JBQWtCLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDbkQsQ0FBQzs7Ozs7SUFHRCxRQUFRLENBQUMsS0FBZ0I7UUFDdkIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLGtCQUFrQixDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDbEUsQ0FBQzs7Ozs7SUFHRCxTQUFTLENBQUMsS0FBZ0I7UUFDeEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDOzs7OztJQUdELElBQUksQ0FBQyxLQUFnQjtRQUNuQixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDeEQsQ0FBQzs7Ozs7SUFHRCxPQUFPLENBQUMsS0FBZ0I7UUFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7O1lBdENGLFNBQVMsU0FBQzs7Z0JBRVQsUUFBUSxFQUFFLGFBQWE7YUFDeEI7Ozs7WUFObUIsVUFBVTs7O3dCQVMzQixLQUFLO3dCQUdMLEtBQUs7dUJBV0wsWUFBWSxTQUFDLFVBQVUsRUFBRSxDQUFDLFFBQVEsQ0FBQzt3QkFLbkMsWUFBWSxTQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQzttQkFLcEMsWUFBWSxTQUFDLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQztzQkFLL0IsWUFBWSxTQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7OztJQTdCbkMsc0NBQ3VCOztJQUV2QixzQ0FDdUI7O0lBRVgsdUNBQTBDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjQ2FsbGJhY2tzLCBGY0Nvbm5lY3RvciwgRmxvd2NoYXJ0Q29uc3RhbnRzIH0gZnJvbSAnLi9uZ3gtZmxvd2NoYXJ0Lm1vZGVscyc7XG5cbkBEaXJlY3RpdmUoe1xuICAvLyB0c2xpbnQ6ZGlzYWJsZS1uZXh0LWxpbmU6ZGlyZWN0aXZlLXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnW2ZjLW1hZ25ldF0nXG59KVxuZXhwb3J0IGNsYXNzIEZjTWFnbmV0RGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcblxuICBASW5wdXQoKVxuICBjYWxsYmFja3M6IEZjQ2FsbGJhY2tzO1xuXG4gIEBJbnB1dCgpXG4gIGNvbm5lY3RvcjogRmNDb25uZWN0b3I7XG5cbiAgY29uc3RydWN0b3IocHVibGljIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBjb25zdCBlbGVtZW50ID0gJCh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG4gICAgZWxlbWVudC5hZGRDbGFzcyhGbG93Y2hhcnRDb25zdGFudHMubWFnbmV0Q2xhc3MpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJhZ292ZXInLCBbJyRldmVudCddKVxuICBkcmFnb3ZlcihldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgcmV0dXJuIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcmFnb3Zlck1hZ25ldChldmVudCwgdGhpcy5jb25uZWN0b3IpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJhZ2xlYXZlJywgWyckZXZlbnQnXSlcbiAgZHJhZ2xlYXZlKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICB0aGlzLmNhbGxiYWNrcy5lZGdlRHJhZ2xlYXZlTWFnbmV0KGV2ZW50KTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2Ryb3AnLCBbJyRldmVudCddKVxuICBkcm9wKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICByZXR1cm4gdGhpcy5jYWxsYmFja3MuZWRnZURyb3AoZXZlbnQsIHRoaXMuY29ubmVjdG9yKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdlbmQnLCBbJyRldmVudCddKVxuICBkcmFnZW5kKGV2ZW50OiBEcmFnRXZlbnQpIHtcbiAgICB0aGlzLmNhbGxiYWNrcy5lZGdlRHJhZ2VuZChldmVudCk7XG4gIH1cblxufVxuIl19
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,107 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
export class FcMouseOverService {
|
||||
/**
|
||||
* @param {?} applyFunction
|
||||
*/
|
||||
constructor(applyFunction) {
|
||||
this.mouseoverscope = {
|
||||
connector: null,
|
||||
edge: null,
|
||||
node: null
|
||||
};
|
||||
this.applyFunction = applyFunction;
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
nodeMouseOver(event, node) {
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
() => {
|
||||
this.mouseoverscope.node = node;
|
||||
}));
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
nodeMouseOut(event, node) {
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
() => {
|
||||
this.mouseoverscope.node = null;
|
||||
}));
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} connector
|
||||
* @return {?}
|
||||
*/
|
||||
connectorMouseEnter(event, connector) {
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
() => {
|
||||
this.mouseoverscope.connector = connector;
|
||||
}));
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} connector
|
||||
* @return {?}
|
||||
*/
|
||||
connectorMouseLeave(event, connector) {
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
() => {
|
||||
this.mouseoverscope.connector = null;
|
||||
}));
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} edge
|
||||
* @return {?}
|
||||
*/
|
||||
edgeMouseEnter(event, edge) {
|
||||
this.mouseoverscope.edge = edge;
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} edge
|
||||
* @return {?}
|
||||
*/
|
||||
edgeMouseLeave(event, edge) {
|
||||
this.mouseoverscope.edge = null;
|
||||
}
|
||||
}
|
||||
if (false) {
|
||||
/** @type {?} */
|
||||
FcMouseOverService.prototype.mouseoverscope;
|
||||
/**
|
||||
* @type {?}
|
||||
* @private
|
||||
*/
|
||||
FcMouseOverService.prototype.applyFunction;
|
||||
}
|
||||
/**
|
||||
* @record
|
||||
*/
|
||||
export function MouseOverScope() { }
|
||||
if (false) {
|
||||
/** @type {?} */
|
||||
MouseOverScope.prototype.connector;
|
||||
/** @type {?} */
|
||||
MouseOverScope.prototype.edge;
|
||||
/** @type {?} */
|
||||
MouseOverScope.prototype.node;
|
||||
}
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW91c2VvdmVyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtZmxvd2NoYXJ0LyIsInNvdXJjZXMiOlsibGliL21vdXNlb3Zlci5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFFQSxNQUFNLE9BQU8sa0JBQWtCOzs7O0lBVTdCLFlBQVksYUFBa0Q7UUFSOUQsbUJBQWMsR0FBbUI7WUFDL0IsU0FBUyxFQUFFLElBQUk7WUFDZixJQUFJLEVBQUUsSUFBSTtZQUNWLElBQUksRUFBRSxJQUFJO1NBQ1gsQ0FBQztRQUtBLElBQUksQ0FBQyxhQUFhLEdBQUcsYUFBYSxDQUFDO0lBQ3JDLENBQUM7Ozs7OztJQUVNLGFBQWEsQ0FBQyxLQUFpQixFQUFFLElBQVk7UUFDbEQsT0FBTyxJQUFJLENBQUMsYUFBYTs7O1FBQUMsR0FBRyxFQUFFO1lBQzdCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNsQyxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVNLFlBQVksQ0FBQyxLQUFpQixFQUFFLElBQVk7UUFDakQsT0FBTyxJQUFJLENBQUMsYUFBYTs7O1FBQUMsR0FBRyxFQUFFO1lBQzdCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNsQyxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVNLG1CQUFtQixDQUFDLEtBQWlCLEVBQUUsU0FBc0I7UUFDbEUsT0FBTyxJQUFJLENBQUMsYUFBYTs7O1FBQUMsR0FBRyxFQUFFO1lBQzdCLElBQUksQ0FBQyxjQUFjLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQztRQUM1QyxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVNLG1CQUFtQixDQUFDLEtBQWlCLEVBQUUsU0FBc0I7UUFDbEUsT0FBTyxJQUFJLENBQUMsYUFBYTs7O1FBQUMsR0FBRyxFQUFFO1lBQzdCLElBQUksQ0FBQyxjQUFjLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztRQUN2QyxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVNLGNBQWMsQ0FBQyxLQUFpQixFQUFFLElBQVk7UUFDbkQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0lBQ2xDLENBQUM7Ozs7OztJQUVNLGNBQWMsQ0FBQyxLQUFpQixFQUFFLElBQVk7UUFDbkQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0lBQ2xDLENBQUM7Q0FDRjs7O0lBM0NDLDRDQUlFOzs7OztJQUVGLDJDQUFvRTs7Ozs7QUF1Q3RFLG9DQUlDOzs7SUFIQyxtQ0FBdUI7O0lBQ3ZCLDhCQUFhOztJQUNiLDhCQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRmNDb25uZWN0b3IsIEZjRWRnZSwgRmNOb2RlIH0gZnJvbSAnLi9uZ3gtZmxvd2NoYXJ0Lm1vZGVscyc7XG5cbmV4cG9ydCBjbGFzcyBGY01vdXNlT3ZlclNlcnZpY2Uge1xuXG4gIG1vdXNlb3ZlcnNjb3BlOiBNb3VzZU92ZXJTY29wZSA9IHtcbiAgICBjb25uZWN0b3I6IG51bGwsXG4gICAgZWRnZTogbnVsbCxcbiAgICBub2RlOiBudWxsXG4gIH07XG5cbiAgcHJpdmF0ZSByZWFkb25seSBhcHBseUZ1bmN0aW9uOiA8VD4oZm46ICguLi5hcmdzOiBhbnlbXSkgPT4gVCkgPT4gVDtcblxuICBjb25zdHJ1Y3RvcihhcHBseUZ1bmN0aW9uOiA8VD4oZm46ICguLi5hcmdzOiBhbnlbXSkgPT4gVCkgPT4gVCkge1xuICAgIHRoaXMuYXBwbHlGdW5jdGlvbiA9IGFwcGx5RnVuY3Rpb247XG4gIH1cblxuICBwdWJsaWMgbm9kZU1vdXNlT3ZlcihldmVudDogTW91c2VFdmVudCwgbm9kZTogRmNOb2RlKSB7XG4gICAgcmV0dXJuIHRoaXMuYXBwbHlGdW5jdGlvbigoKSA9PiB7XG4gICAgICB0aGlzLm1vdXNlb3ZlcnNjb3BlLm5vZGUgPSBub2RlO1xuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5vZGVNb3VzZU91dChldmVudDogTW91c2VFdmVudCwgbm9kZTogRmNOb2RlKSB7XG4gICAgcmV0dXJuIHRoaXMuYXBwbHlGdW5jdGlvbigoKSA9PiB7XG4gICAgICB0aGlzLm1vdXNlb3ZlcnNjb3BlLm5vZGUgPSBudWxsO1xuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIGNvbm5lY3Rvck1vdXNlRW50ZXIoZXZlbnQ6IE1vdXNlRXZlbnQsIGNvbm5lY3RvcjogRmNDb25uZWN0b3IpIHtcbiAgICByZXR1cm4gdGhpcy5hcHBseUZ1bmN0aW9uKCgpID0+IHtcbiAgICAgIHRoaXMubW91c2VvdmVyc2NvcGUuY29ubmVjdG9yID0gY29ubmVjdG9yO1xuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIGNvbm5lY3Rvck1vdXNlTGVhdmUoZXZlbnQ6IE1vdXNlRXZlbnQsIGNvbm5lY3RvcjogRmNDb25uZWN0b3IpIHtcbiAgICByZXR1cm4gdGhpcy5hcHBseUZ1bmN0aW9uKCgpID0+IHtcbiAgICAgIHRoaXMubW91c2VvdmVyc2NvcGUuY29ubmVjdG9yID0gbnVsbDtcbiAgICB9KTtcbiAgfVxuXG4gIHB1YmxpYyBlZGdlTW91c2VFbnRlcihldmVudDogTW91c2VFdmVudCwgZWRnZTogRmNFZGdlKSB7XG4gICAgdGhpcy5tb3VzZW92ZXJzY29wZS5lZGdlID0gZWRnZTtcbiAgfVxuXG4gIHB1YmxpYyBlZGdlTW91c2VMZWF2ZShldmVudDogTW91c2VFdmVudCwgZWRnZTogRmNFZGdlKSB7XG4gICAgdGhpcy5tb3VzZW92ZXJzY29wZS5lZGdlID0gbnVsbDtcbiAgfVxufVxuXG5leHBvcnQgaW50ZXJmYWNlIE1vdXNlT3ZlclNjb3BlIHtcbiAgY29ubmVjdG9yOiBGY0Nvbm5lY3RvcjtcbiAgZWRnZTogRmNFZGdlO1xuICBub2RlOiBGY05vZGU7XG59XG4iXX0=
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,18 +0,0 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import { Injectable } from '@angular/core';
|
||||
import * as i0 from "@angular/core";
|
||||
export class NgxFlowchartService {
|
||||
constructor() { }
|
||||
}
|
||||
NgxFlowchartService.decorators = [
|
||||
{ type: Injectable, args: [{
|
||||
providedIn: 'root'
|
||||
},] }
|
||||
];
|
||||
/** @nocollapse */
|
||||
NgxFlowchartService.ctorParameters = () => [];
|
||||
/** @nocollapse */ NgxFlowchartService.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function NgxFlowchartService_Factory() { return new NgxFlowchartService(); }, token: NgxFlowchartService, providedIn: "root" });
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWZsb3djaGFydC8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtZmxvd2NoYXJ0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBSzNDLE1BQU0sT0FBTyxtQkFBbUI7SUFFOUIsZ0JBQWdCLENBQUM7OztZQUxsQixVQUFVLFNBQUM7Z0JBQ1YsVUFBVSxFQUFFLE1BQU07YUFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogJ3Jvb3QnXG59KVxuZXhwb3J0IGNsYXNzIE5neEZsb3djaGFydFNlcnZpY2Uge1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG59XG4iXX0=
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
/** @type {?} */
|
||||
const regex = /(auto|scroll)/;
|
||||
/** @type {?} */
|
||||
const style = (/**
|
||||
* @param {?} node
|
||||
* @param {?} prop
|
||||
* @return {?}
|
||||
*/
|
||||
(node, prop) => getComputedStyle(node, null).getPropertyValue(prop));
|
||||
const ɵ0 = style;
|
||||
/** @type {?} */
|
||||
const scroll = (/**
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
(node) => regex.test(style(node, 'overflow') +
|
||||
style(node, 'overflow-y') +
|
||||
style(node, 'overflow-x')));
|
||||
const ɵ1 = scroll;
|
||||
/** @type {?} */
|
||||
const scrollparent = (/**
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
(node) => !node || node === document.body
|
||||
? document.body
|
||||
: scroll(node)
|
||||
? node
|
||||
: scrollparent((/** @type {?} */ (node.parentNode))));
|
||||
const ɵ2 = scrollparent;
|
||||
export default scrollparent;
|
||||
export { ɵ0, ɵ1, ɵ2 };
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xscGFyZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWZsb3djaGFydC8iLCJzb3VyY2VzIjpbImxpYi9zY3JvbGxwYXJlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7TUFBTSxLQUFLLEdBQUcsZUFBZTs7TUFFdkIsS0FBSzs7Ozs7QUFBRyxDQUFDLElBQWEsRUFBRSxJQUFZLEVBQVUsRUFBRSxDQUNwRCxnQkFBZ0IsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLENBQUE7OztNQUUvQyxNQUFNOzs7O0FBQUcsQ0FBQyxJQUFhLEVBQUUsRUFBRSxDQUMvQixLQUFLLENBQUMsSUFBSSxDQUNSLEtBQUssQ0FBQyxJQUFJLEVBQUUsVUFBVSxDQUFDO0lBQ3ZCLEtBQUssQ0FBQyxJQUFJLEVBQUUsWUFBWSxDQUFDO0lBQ3pCLEtBQUssQ0FBQyxJQUFJLEVBQUUsWUFBWSxDQUFDLENBQUMsQ0FBQTs7O01BRXhCLFlBQVk7Ozs7QUFBRyxDQUFDLElBQWlCLEVBQWUsRUFBRSxDQUN0RCxDQUFDLElBQUksSUFBSSxJQUFJLEtBQUssUUFBUSxDQUFDLElBQUk7SUFDN0IsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJO0lBQ2YsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7UUFDZCxDQUFDLENBQUMsSUFBSTtRQUNOLENBQUMsQ0FBQyxZQUFZLENBQUMsbUJBQUEsSUFBSSxDQUFDLFVBQVUsRUFBZSxDQUFDLENBQUE7O0FBRWxELGVBQWUsWUFBWSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgcmVnZXggPSAvKGF1dG98c2Nyb2xsKS87XG5cbmNvbnN0IHN0eWxlID0gKG5vZGU6IEVsZW1lbnQsIHByb3A6IHN0cmluZyk6IHN0cmluZyA9PlxuICBnZXRDb21wdXRlZFN0eWxlKG5vZGUsIG51bGwpLmdldFByb3BlcnR5VmFsdWUocHJvcCk7XG5cbmNvbnN0IHNjcm9sbCA9IChub2RlOiBFbGVtZW50KSA9PlxuICByZWdleC50ZXN0KFxuICAgIHN0eWxlKG5vZGUsICdvdmVyZmxvdycpICtcbiAgICBzdHlsZShub2RlLCAnb3ZlcmZsb3cteScpICtcbiAgICBzdHlsZShub2RlLCAnb3ZlcmZsb3cteCcpKTtcblxuY29uc3Qgc2Nyb2xscGFyZW50ID0gKG5vZGU6IEhUTUxFbGVtZW50KTogSFRNTEVsZW1lbnQgPT5cbiAgIW5vZGUgfHwgbm9kZSA9PT0gZG9jdW1lbnQuYm9keVxuICAgID8gZG9jdW1lbnQuYm9keVxuICAgIDogc2Nyb2xsKG5vZGUpXG4gICAgPyBub2RlXG4gICAgOiBzY3JvbGxwYXJlbnQobm9kZS5wYXJlbnROb2RlIGFzIEhUTUxFbGVtZW50KTtcblxuZXhwb3J0IGRlZmF1bHQgc2Nyb2xscGFyZW50O1xuIl19
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import * as tslib_1 from "tslib";
|
||||
import { Component } from '@angular/core';
|
||||
import { FcNodeComponent } from './node.component';
|
||||
var DefaultFcNodeComponent = /** @class */ (function (_super) {
|
||||
tslib_1.__extends(DefaultFcNodeComponent, _super);
|
||||
function DefaultFcNodeComponent() {
|
||||
return _super.call(this) || this;
|
||||
}
|
||||
DefaultFcNodeComponent.decorators = [
|
||||
{ type: Component, args: [{
|
||||
selector: 'fc-default-node',
|
||||
template: "<div\n (dblclick)=\"userNodeCallbacks.doubleClick($event, node)\">\n <div class=\"{{flowchartConstants.nodeOverlayClass}}\"></div>\n <div class=\"innerNode\">\n <p>{{ node.name }}</p>\n\n <div class=\"{{flowchartConstants.leftConnectorClass}}\">\n <div fc-magnet [connector]=\"connector\" [callbacks]=\"callbacks\"\n *ngFor=\"let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)\">\n <div fc-connector [connector]=\"connector\"\n [mouseOverConnector]=\"mouseOverConnector\"\n [callbacks]=\"callbacks\"\n [modelservice]=\"modelservice\"></div>\n </div>\n </div>\n <div class=\"{{flowchartConstants.rightConnectorClass}}\">\n <div fc-magnet [connector]=\"connector\" [callbacks]=\"callbacks\"\n *ngFor=\"let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)\">\n <div fc-connector [connector]=\"connector\"\n [mouseOverConnector]=\"mouseOverConnector\"\n [callbacks]=\"callbacks\"\n [modelservice]=\"modelservice\"></div>\n </div>\n </div>\n </div>\n <div *ngIf=\"modelservice.isEditable() && !node.readonly\" class=\"fc-nodeedit\" (click)=\"userNodeCallbacks.nodeEdit($event, node)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelservice.isEditable() && !node.readonly\" class=\"fc-nodedelete\" (click)=\"modelservice.nodes.delete(node)\">\n ×\n </div>\n</div>\n",
|
||||
styles: [":host .fc-node-overlay{position:absolute;pointer-events:none;left:0;top:0;right:0;bottom:0;background-color:#000;opacity:0}:host :host-context(.fc-hover) .fc-node-overlay{opacity:.25;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:flex;justify-content:center;align-items:center;min-width:100px;border-radius:5px;background-color:#f15b26;color:#fff;font-size:16px;pointer-events:none}:host .innerNode p{padding:0 15px;text-align:center}"]
|
||||
}] }
|
||||
];
|
||||
/** @nocollapse */
|
||||
DefaultFcNodeComponent.ctorParameters = function () { return []; };
|
||||
return DefaultFcNodeComponent;
|
||||
}(FcNodeComponent));
|
||||
export { DefaultFcNodeComponent };
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRW5EO0lBSzRDLGtEQUFlO0lBRXpEO2VBQ0UsaUJBQU87SUFDVCxDQUFDOztnQkFURixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsOGhEQUE0Qzs7aUJBRTdDOzs7O0lBT0QsNkJBQUM7Q0FBQSxBQVhELENBSzRDLGVBQWUsR0FNMUQ7U0FOWSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjTm9kZUNvbXBvbmVudCB9IGZyb20gJy4vbm9kZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYy1kZWZhdWx0LW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGVmYXVsdEZjTm9kZUNvbXBvbmVudCBleHRlbmRzIEZjTm9kZUNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG59XG4iXX0=
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,112 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FlowchartConstants } from './ngx-flowchart.models';
|
||||
var FcEdgeDrawingService = /** @class */ (function () {
|
||||
function FcEdgeDrawingService() {
|
||||
}
|
||||
/**
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @param {?} style
|
||||
* @return {?}
|
||||
*/
|
||||
FcEdgeDrawingService.prototype.getEdgeDAttribute = /**
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @param {?} style
|
||||
* @return {?}
|
||||
*/
|
||||
function (pt1, pt2, style) {
|
||||
/** @type {?} */
|
||||
var dAddribute = "M " + pt1.x + ", " + pt1.y + " ";
|
||||
if (style === FlowchartConstants.curvedStyle) {
|
||||
/** @type {?} */
|
||||
var sourceTangent = this.computeEdgeSourceTangent(pt1, pt2);
|
||||
/** @type {?} */
|
||||
var destinationTangent = this.computeEdgeDestinationTangent(pt1, pt2);
|
||||
dAddribute += "C " + sourceTangent.x + ", " + sourceTangent.y + " " + (destinationTangent.x - 50) + ", " + destinationTangent.y + " " + pt2.x + ", " + pt2.y;
|
||||
}
|
||||
else {
|
||||
dAddribute += "L " + pt2.x + ", " + pt2.y;
|
||||
}
|
||||
return dAddribute;
|
||||
};
|
||||
/**
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
FcEdgeDrawingService.prototype.getEdgeCenter = /**
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
function (pt1, pt2) {
|
||||
return {
|
||||
x: (pt1.x + pt2.x) / 2,
|
||||
y: (pt1.y + pt2.y) / 2
|
||||
};
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
FcEdgeDrawingService.prototype.computeEdgeTangentOffset = /**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
function (pt1, pt2) {
|
||||
return (pt2.y - pt1.y) / 2;
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
FcEdgeDrawingService.prototype.computeEdgeSourceTangent = /**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
function (pt1, pt2) {
|
||||
return {
|
||||
x: pt1.x,
|
||||
y: pt1.y + this.computeEdgeTangentOffset(pt1, pt2)
|
||||
};
|
||||
};
|
||||
/**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
FcEdgeDrawingService.prototype.computeEdgeDestinationTangent = /**
|
||||
* @private
|
||||
* @param {?} pt1
|
||||
* @param {?} pt2
|
||||
* @return {?}
|
||||
*/
|
||||
function (pt1, pt2) {
|
||||
return {
|
||||
x: pt2.x,
|
||||
y: pt2.y - this.computeEdgeTangentOffset(pt1, pt2)
|
||||
};
|
||||
};
|
||||
FcEdgeDrawingService.decorators = [
|
||||
{ type: Injectable }
|
||||
];
|
||||
/** @nocollapse */
|
||||
FcEdgeDrawingService.ctorParameters = function () { return []; };
|
||||
return FcEdgeDrawingService;
|
||||
}());
|
||||
export { FcEdgeDrawingService };
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1kcmF3aW5nLnNlcnZpY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtZmxvd2NoYXJ0LyIsInNvdXJjZXMiOlsibGliL2VkZ2UtZHJhd2luZy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBWSxrQkFBa0IsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBRXRFO0lBR0U7SUFDQSxDQUFDOzs7Ozs7O0lBRU0sZ0RBQWlCOzs7Ozs7SUFBeEIsVUFBeUIsR0FBYSxFQUFFLEdBQWEsRUFBRSxLQUFhOztZQUM5RCxVQUFVLEdBQUcsT0FBSyxHQUFHLENBQUMsQ0FBQyxVQUFLLEdBQUcsQ0FBQyxDQUFDLE1BQUc7UUFDeEMsSUFBSSxLQUFLLEtBQUssa0JBQWtCLENBQUMsV0FBVyxFQUFFOztnQkFDdEMsYUFBYSxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDOztnQkFDdkQsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLDZCQUE2QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUM7WUFDdkUsVUFBVSxJQUFJLE9BQUssYUFBYSxDQUFDLENBQUMsVUFBSyxhQUFhLENBQUMsQ0FBQyxTQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxVQUFLLGtCQUFrQixDQUFDLENBQUMsU0FBSSxHQUFHLENBQUMsQ0FBQyxVQUFLLEdBQUcsQ0FBQyxDQUFHLENBQUM7U0FDckk7YUFBTTtZQUNMLFVBQVUsSUFBSSxPQUFLLEdBQUcsQ0FBQyxDQUFDLFVBQUssR0FBRyxDQUFDLENBQUcsQ0FBQztTQUN0QztRQUNELE9BQU8sVUFBVSxDQUFDO0lBQ3BCLENBQUM7Ozs7OztJQUVNLDRDQUFhOzs7OztJQUFwQixVQUFxQixHQUFhLEVBQUUsR0FBYTtRQUMvQyxPQUFPO1lBQ0wsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztZQUN0QixDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDO1NBQ3ZCLENBQUM7SUFDSixDQUFDOzs7Ozs7O0lBRU8sdURBQXdCOzs7Ozs7SUFBaEMsVUFBaUMsR0FBYSxFQUFFLEdBQWE7UUFDM0QsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM3QixDQUFDOzs7Ozs7O0lBRU8sdURBQXdCOzs7Ozs7SUFBaEMsVUFBaUMsR0FBYSxFQUFFLEdBQWE7UUFDM0QsT0FBTztZQUNMLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUNSLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDO1NBQ25ELENBQUM7SUFDSixDQUFDOzs7Ozs7O0lBRU8sNERBQTZCOzs7Ozs7SUFBckMsVUFBc0MsR0FBYSxFQUFFLEdBQWE7UUFDaEUsT0FBTztZQUNMLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUNSLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyx3QkFBd0IsQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDO1NBQ25ELENBQUM7SUFDSixDQUFDOztnQkF6Q0YsVUFBVTs7OztJQTJDWCwyQkFBQztDQUFBLEFBM0NELElBMkNDO1NBMUNZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjQ29vcmRzLCBGbG93Y2hhcnRDb25zdGFudHMgfSBmcm9tICcuL25neC1mbG93Y2hhcnQubW9kZWxzJztcblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIEZjRWRnZURyYXdpbmdTZXJ2aWNlIHtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgfVxuXG4gIHB1YmxpYyBnZXRFZGdlREF0dHJpYnV0ZShwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzLCBzdHlsZTogc3RyaW5nKTogc3RyaW5nIHtcbiAgICBsZXQgZEFkZHJpYnV0ZSA9IGBNICR7cHQxLnh9LCAke3B0MS55fSBgO1xuICAgIGlmIChzdHlsZSA9PT0gRmxvd2NoYXJ0Q29uc3RhbnRzLmN1cnZlZFN0eWxlKSB7XG4gICAgICBjb25zdCBzb3VyY2VUYW5nZW50ID0gdGhpcy5jb21wdXRlRWRnZVNvdXJjZVRhbmdlbnQocHQxLCBwdDIpO1xuICAgICAgY29uc3QgZGVzdGluYXRpb25UYW5nZW50ID0gdGhpcy5jb21wdXRlRWRnZURlc3RpbmF0aW9uVGFuZ2VudChwdDEsIHB0Mik7XG4gICAgICBkQWRkcmlidXRlICs9IGBDICR7c291cmNlVGFuZ2VudC54fSwgJHtzb3VyY2VUYW5nZW50Lnl9ICR7KGRlc3RpbmF0aW9uVGFuZ2VudC54IC0gNTApfSwgJHtkZXN0aW5hdGlvblRhbmdlbnQueX0gJHtwdDIueH0sICR7cHQyLnl9YDtcbiAgICB9IGVsc2Uge1xuICAgICAgZEFkZHJpYnV0ZSArPSBgTCAke3B0Mi54fSwgJHtwdDIueX1gO1xuICAgIH1cbiAgICByZXR1cm4gZEFkZHJpYnV0ZTtcbiAgfVxuXG4gIHB1YmxpYyBnZXRFZGdlQ2VudGVyKHB0MTogRmNDb29yZHMsIHB0MjogRmNDb29yZHMpOiBGY0Nvb3JkcyB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHg6IChwdDEueCArIHB0Mi54KSAvIDIsXG4gICAgICB5OiAocHQxLnkgKyBwdDIueSkgLyAyXG4gICAgfTtcbiAgfVxuXG4gIHByaXZhdGUgY29tcHV0ZUVkZ2VUYW5nZW50T2Zmc2V0KHB0MTogRmNDb29yZHMsIHB0MjogRmNDb29yZHMpOiBudW1iZXIge1xuICAgIHJldHVybiAocHQyLnkgLSBwdDEueSkgLyAyO1xuICB9XG5cbiAgcHJpdmF0ZSBjb21wdXRlRWRnZVNvdXJjZVRhbmdlbnQocHQxOiBGY0Nvb3JkcywgcHQyOiBGY0Nvb3Jkcyk6IEZjQ29vcmRzIHtcbiAgICByZXR1cm4ge1xuICAgICAgeDogcHQxLngsXG4gICAgICB5OiBwdDEueSArIHRoaXMuY29tcHV0ZUVkZ2VUYW5nZW50T2Zmc2V0KHB0MSwgcHQyKVxuICAgIH07XG4gIH1cblxuICBwcml2YXRlIGNvbXB1dGVFZGdlRGVzdGluYXRpb25UYW5nZW50KHB0MTogRmNDb29yZHMsIHB0MjogRmNDb29yZHMpOiBGY0Nvb3JkcyB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHg6IHB0Mi54LFxuICAgICAgeTogcHQyLnkgLSB0aGlzLmNvbXB1dGVFZGdlVGFuZ2VudE9mZnNldChwdDEsIHB0MilcbiAgICB9O1xuICB9XG5cbn1cbiJdfQ==
|
||||
@ -0,0 +1,95 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
|
||||
import { FlowchartConstants } from './ngx-flowchart.models';
|
||||
var FcMagnetDirective = /** @class */ (function () {
|
||||
function FcMagnetDirective(elementRef) {
|
||||
this.elementRef = elementRef;
|
||||
}
|
||||
/**
|
||||
* @return {?}
|
||||
*/
|
||||
FcMagnetDirective.prototype.ngOnInit = /**
|
||||
* @return {?}
|
||||
*/
|
||||
function () {
|
||||
/** @type {?} */
|
||||
var element = $(this.elementRef.nativeElement);
|
||||
element.addClass(FlowchartConstants.magnetClass);
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
FcMagnetDirective.prototype.dragover = /**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
function (event) {
|
||||
return this.callbacks.edgeDragoverMagnet(event, this.connector);
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
FcMagnetDirective.prototype.dragleave = /**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
function (event) {
|
||||
this.callbacks.edgeDragleaveMagnet(event);
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
FcMagnetDirective.prototype.drop = /**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
function (event) {
|
||||
return this.callbacks.edgeDrop(event, this.connector);
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
FcMagnetDirective.prototype.dragend = /**
|
||||
* @param {?} event
|
||||
* @return {?}
|
||||
*/
|
||||
function (event) {
|
||||
this.callbacks.edgeDragend(event);
|
||||
};
|
||||
FcMagnetDirective.decorators = [
|
||||
{ type: Directive, args: [{
|
||||
// tslint:disable-next-line:directive-selector
|
||||
selector: '[fc-magnet]'
|
||||
},] }
|
||||
];
|
||||
/** @nocollapse */
|
||||
FcMagnetDirective.ctorParameters = function () { return [
|
||||
{ type: ElementRef }
|
||||
]; };
|
||||
FcMagnetDirective.propDecorators = {
|
||||
callbacks: [{ type: Input }],
|
||||
connector: [{ type: Input }],
|
||||
dragover: [{ type: HostListener, args: ['dragover', ['$event'],] }],
|
||||
dragleave: [{ type: HostListener, args: ['dragleave', ['$event'],] }],
|
||||
drop: [{ type: HostListener, args: ['drop', ['$event'],] }],
|
||||
dragend: [{ type: HostListener, args: ['dragend', ['$event'],] }]
|
||||
};
|
||||
return FcMagnetDirective;
|
||||
}());
|
||||
export { FcMagnetDirective };
|
||||
if (false) {
|
||||
/** @type {?} */
|
||||
FcMagnetDirective.prototype.callbacks;
|
||||
/** @type {?} */
|
||||
FcMagnetDirective.prototype.connector;
|
||||
/** @type {?} */
|
||||
FcMagnetDirective.prototype.elementRef;
|
||||
}
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFnbmV0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvbWFnbmV0LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUNuRixPQUFPLEVBQTRCLGtCQUFrQixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFdEY7SUFZRSwyQkFBbUIsVUFBbUM7UUFBbkMsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7SUFDdEQsQ0FBQzs7OztJQUVELG9DQUFROzs7SUFBUjs7WUFDUSxPQUFPLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDO1FBQ2hELE9BQU8sQ0FBQyxRQUFRLENBQUMsa0JBQWtCLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDbkQsQ0FBQzs7Ozs7SUFHRCxvQ0FBUTs7OztJQURSLFVBQ1MsS0FBZ0I7UUFDdkIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLGtCQUFrQixDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDbEUsQ0FBQzs7Ozs7SUFHRCxxQ0FBUzs7OztJQURULFVBQ1UsS0FBZ0I7UUFDeEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDOzs7OztJQUdELGdDQUFJOzs7O0lBREosVUFDSyxLQUFnQjtRQUNuQixPQUFPLElBQUksQ0FBQyxTQUFTLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDeEQsQ0FBQzs7Ozs7SUFHRCxtQ0FBTzs7OztJQURQLFVBQ1EsS0FBZ0I7UUFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7Z0JBdENGLFNBQVMsU0FBQzs7b0JBRVQsUUFBUSxFQUFFLGFBQWE7aUJBQ3hCOzs7O2dCQU5tQixVQUFVOzs7NEJBUzNCLEtBQUs7NEJBR0wsS0FBSzsyQkFXTCxZQUFZLFNBQUMsVUFBVSxFQUFFLENBQUMsUUFBUSxDQUFDOzRCQUtuQyxZQUFZLFNBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDO3VCQUtwQyxZQUFZLFNBQUMsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDOzBCQUsvQixZQUFZLFNBQUMsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDOztJQUtyQyx3QkFBQztDQUFBLEFBeENELElBd0NDO1NBcENZLGlCQUFpQjs7O0lBRTVCLHNDQUN1Qjs7SUFFdkIsc0NBQ3VCOztJQUVYLHVDQUEwQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGY0NhbGxiYWNrcywgRmNDb25uZWN0b3IsIEZsb3djaGFydENvbnN0YW50cyB9IGZyb20gJy4vbmd4LWZsb3djaGFydC5tb2RlbHMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmRpcmVjdGl2ZS1zZWxlY3RvclxuICBzZWxlY3RvcjogJ1tmYy1tYWduZXRdJ1xufSlcbmV4cG9ydCBjbGFzcyBGY01hZ25ldERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KClcbiAgY2FsbGJhY2tzOiBGY0NhbGxiYWNrcztcblxuICBASW5wdXQoKVxuICBjb25uZWN0b3I6IEZjQ29ubmVjdG9yO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgY29uc3QgZWxlbWVudCA9ICQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpO1xuICAgIGVsZW1lbnQuYWRkQ2xhc3MoRmxvd2NoYXJ0Q29uc3RhbnRzLm1hZ25ldENsYXNzKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdvdmVyJywgWyckZXZlbnQnXSlcbiAgZHJhZ292ZXIoZXZlbnQ6IERyYWdFdmVudCkge1xuICAgIHJldHVybiB0aGlzLmNhbGxiYWNrcy5lZGdlRHJhZ292ZXJNYWduZXQoZXZlbnQsIHRoaXMuY29ubmVjdG9yKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdsZWF2ZScsIFsnJGV2ZW50J10pXG4gIGRyYWdsZWF2ZShldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgdGhpcy5jYWxsYmFja3MuZWRnZURyYWdsZWF2ZU1hZ25ldChldmVudCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkcm9wJywgWyckZXZlbnQnXSlcbiAgZHJvcChldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgcmV0dXJuIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcm9wKGV2ZW50LCB0aGlzLmNvbm5lY3Rvcik7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkcmFnZW5kJywgWyckZXZlbnQnXSlcbiAgZHJhZ2VuZChldmVudDogRHJhZ0V2ZW50KSB7XG4gICAgdGhpcy5jYWxsYmFja3MuZWRnZURyYWdlbmQoZXZlbnQpO1xuICB9XG5cbn1cbiJdfQ==
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,140 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
var FcMouseOverService = /** @class */ (function () {
|
||||
function FcMouseOverService(applyFunction) {
|
||||
this.mouseoverscope = {
|
||||
connector: null,
|
||||
edge: null,
|
||||
node: null
|
||||
};
|
||||
this.applyFunction = applyFunction;
|
||||
}
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
FcMouseOverService.prototype.nodeMouseOver = /**
|
||||
* @param {?} event
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
function (event, node) {
|
||||
var _this = this;
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
function () {
|
||||
_this.mouseoverscope.node = node;
|
||||
}));
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
FcMouseOverService.prototype.nodeMouseOut = /**
|
||||
* @param {?} event
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
function (event, node) {
|
||||
var _this = this;
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
function () {
|
||||
_this.mouseoverscope.node = null;
|
||||
}));
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} connector
|
||||
* @return {?}
|
||||
*/
|
||||
FcMouseOverService.prototype.connectorMouseEnter = /**
|
||||
* @param {?} event
|
||||
* @param {?} connector
|
||||
* @return {?}
|
||||
*/
|
||||
function (event, connector) {
|
||||
var _this = this;
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
function () {
|
||||
_this.mouseoverscope.connector = connector;
|
||||
}));
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} connector
|
||||
* @return {?}
|
||||
*/
|
||||
FcMouseOverService.prototype.connectorMouseLeave = /**
|
||||
* @param {?} event
|
||||
* @param {?} connector
|
||||
* @return {?}
|
||||
*/
|
||||
function (event, connector) {
|
||||
var _this = this;
|
||||
return this.applyFunction((/**
|
||||
* @return {?}
|
||||
*/
|
||||
function () {
|
||||
_this.mouseoverscope.connector = null;
|
||||
}));
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} edge
|
||||
* @return {?}
|
||||
*/
|
||||
FcMouseOverService.prototype.edgeMouseEnter = /**
|
||||
* @param {?} event
|
||||
* @param {?} edge
|
||||
* @return {?}
|
||||
*/
|
||||
function (event, edge) {
|
||||
this.mouseoverscope.edge = edge;
|
||||
};
|
||||
/**
|
||||
* @param {?} event
|
||||
* @param {?} edge
|
||||
* @return {?}
|
||||
*/
|
||||
FcMouseOverService.prototype.edgeMouseLeave = /**
|
||||
* @param {?} event
|
||||
* @param {?} edge
|
||||
* @return {?}
|
||||
*/
|
||||
function (event, edge) {
|
||||
this.mouseoverscope.edge = null;
|
||||
};
|
||||
return FcMouseOverService;
|
||||
}());
|
||||
export { FcMouseOverService };
|
||||
if (false) {
|
||||
/** @type {?} */
|
||||
FcMouseOverService.prototype.mouseoverscope;
|
||||
/**
|
||||
* @type {?}
|
||||
* @private
|
||||
*/
|
||||
FcMouseOverService.prototype.applyFunction;
|
||||
}
|
||||
/**
|
||||
* @record
|
||||
*/
|
||||
export function MouseOverScope() { }
|
||||
if (false) {
|
||||
/** @type {?} */
|
||||
MouseOverScope.prototype.connector;
|
||||
/** @type {?} */
|
||||
MouseOverScope.prototype.edge;
|
||||
/** @type {?} */
|
||||
MouseOverScope.prototype.node;
|
||||
}
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW91c2VvdmVyLnNlcnZpY2UuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZ3gtZmxvd2NoYXJ0LyIsInNvdXJjZXMiOlsibGliL21vdXNlb3Zlci5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFFQTtJQVVFLDRCQUFZLGFBQWtEO1FBUjlELG1CQUFjLEdBQW1CO1lBQy9CLFNBQVMsRUFBRSxJQUFJO1lBQ2YsSUFBSSxFQUFFLElBQUk7WUFDVixJQUFJLEVBQUUsSUFBSTtTQUNYLENBQUM7UUFLQSxJQUFJLENBQUMsYUFBYSxHQUFHLGFBQWEsQ0FBQztJQUNyQyxDQUFDOzs7Ozs7SUFFTSwwQ0FBYTs7Ozs7SUFBcEIsVUFBcUIsS0FBaUIsRUFBRSxJQUFZO1FBQXBELGlCQUlDO1FBSEMsT0FBTyxJQUFJLENBQUMsYUFBYTs7O1FBQUM7WUFDeEIsS0FBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO1FBQ2xDLENBQUMsRUFBQyxDQUFDO0lBQ0wsQ0FBQzs7Ozs7O0lBRU0seUNBQVk7Ozs7O0lBQW5CLFVBQW9CLEtBQWlCLEVBQUUsSUFBWTtRQUFuRCxpQkFJQztRQUhDLE9BQU8sSUFBSSxDQUFDLGFBQWE7OztRQUFDO1lBQ3hCLEtBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztRQUNsQyxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVNLGdEQUFtQjs7Ozs7SUFBMUIsVUFBMkIsS0FBaUIsRUFBRSxTQUFzQjtRQUFwRSxpQkFJQztRQUhDLE9BQU8sSUFBSSxDQUFDLGFBQWE7OztRQUFDO1lBQ3hCLEtBQUksQ0FBQyxjQUFjLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQztRQUM1QyxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVNLGdEQUFtQjs7Ozs7SUFBMUIsVUFBMkIsS0FBaUIsRUFBRSxTQUFzQjtRQUFwRSxpQkFJQztRQUhDLE9BQU8sSUFBSSxDQUFDLGFBQWE7OztRQUFDO1lBQ3hCLEtBQUksQ0FBQyxjQUFjLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztRQUN2QyxDQUFDLEVBQUMsQ0FBQztJQUNMLENBQUM7Ozs7OztJQUVNLDJDQUFjOzs7OztJQUFyQixVQUFzQixLQUFpQixFQUFFLElBQVk7UUFDbkQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0lBQ2xDLENBQUM7Ozs7OztJQUVNLDJDQUFjOzs7OztJQUFyQixVQUFzQixLQUFpQixFQUFFLElBQVk7UUFDbkQsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDO0lBQ2xDLENBQUM7SUFDSCx5QkFBQztBQUFELENBQUMsQUE3Q0QsSUE2Q0M7Ozs7SUEzQ0MsNENBSUU7Ozs7O0lBRUYsMkNBQW9FOzs7OztBQXVDdEUsb0NBSUM7OztJQUhDLG1DQUF1Qjs7SUFDdkIsOEJBQWE7O0lBQ2IsOEJBQWEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBGY0Nvbm5lY3RvciwgRmNFZGdlLCBGY05vZGUgfSBmcm9tICcuL25neC1mbG93Y2hhcnQubW9kZWxzJztcblxuZXhwb3J0IGNsYXNzIEZjTW91c2VPdmVyU2VydmljZSB7XG5cbiAgbW91c2VvdmVyc2NvcGU6IE1vdXNlT3ZlclNjb3BlID0ge1xuICAgIGNvbm5lY3RvcjogbnVsbCxcbiAgICBlZGdlOiBudWxsLFxuICAgIG5vZGU6IG51bGxcbiAgfTtcblxuICBwcml2YXRlIHJlYWRvbmx5IGFwcGx5RnVuY3Rpb246IDxUPihmbjogKC4uLmFyZ3M6IGFueVtdKSA9PiBUKSA9PiBUO1xuXG4gIGNvbnN0cnVjdG9yKGFwcGx5RnVuY3Rpb246IDxUPihmbjogKC4uLmFyZ3M6IGFueVtdKSA9PiBUKSA9PiBUKSB7XG4gICAgdGhpcy5hcHBseUZ1bmN0aW9uID0gYXBwbHlGdW5jdGlvbjtcbiAgfVxuXG4gIHB1YmxpYyBub2RlTW91c2VPdmVyKGV2ZW50OiBNb3VzZUV2ZW50LCBub2RlOiBGY05vZGUpIHtcbiAgICByZXR1cm4gdGhpcy5hcHBseUZ1bmN0aW9uKCgpID0+IHtcbiAgICAgIHRoaXMubW91c2VvdmVyc2NvcGUubm9kZSA9IG5vZGU7XG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgbm9kZU1vdXNlT3V0KGV2ZW50OiBNb3VzZUV2ZW50LCBub2RlOiBGY05vZGUpIHtcbiAgICByZXR1cm4gdGhpcy5hcHBseUZ1bmN0aW9uKCgpID0+IHtcbiAgICAgIHRoaXMubW91c2VvdmVyc2NvcGUubm9kZSA9IG51bGw7XG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgY29ubmVjdG9yTW91c2VFbnRlcihldmVudDogTW91c2VFdmVudCwgY29ubmVjdG9yOiBGY0Nvbm5lY3Rvcikge1xuICAgIHJldHVybiB0aGlzLmFwcGx5RnVuY3Rpb24oKCkgPT4ge1xuICAgICAgdGhpcy5tb3VzZW92ZXJzY29wZS5jb25uZWN0b3IgPSBjb25uZWN0b3I7XG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgY29ubmVjdG9yTW91c2VMZWF2ZShldmVudDogTW91c2VFdmVudCwgY29ubmVjdG9yOiBGY0Nvbm5lY3Rvcikge1xuICAgIHJldHVybiB0aGlzLmFwcGx5RnVuY3Rpb24oKCkgPT4ge1xuICAgICAgdGhpcy5tb3VzZW92ZXJzY29wZS5jb25uZWN0b3IgPSBudWxsO1xuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIGVkZ2VNb3VzZUVudGVyKGV2ZW50OiBNb3VzZUV2ZW50LCBlZGdlOiBGY0VkZ2UpIHtcbiAgICB0aGlzLm1vdXNlb3ZlcnNjb3BlLmVkZ2UgPSBlZGdlO1xuICB9XG5cbiAgcHVibGljIGVkZ2VNb3VzZUxlYXZlKGV2ZW50OiBNb3VzZUV2ZW50LCBlZGdlOiBGY0VkZ2UpIHtcbiAgICB0aGlzLm1vdXNlb3ZlcnNjb3BlLmVkZ2UgPSBudWxsO1xuICB9XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTW91c2VPdmVyU2NvcGUge1xuICBjb25uZWN0b3I6IEZjQ29ubmVjdG9yO1xuICBlZGdlOiBGY0VkZ2U7XG4gIG5vZGU6IEZjTm9kZTtcbn1cbiJdfQ==
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,21 +0,0 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
import { Injectable } from '@angular/core';
|
||||
import * as i0 from "@angular/core";
|
||||
var NgxFlowchartService = /** @class */ (function () {
|
||||
function NgxFlowchartService() {
|
||||
}
|
||||
NgxFlowchartService.decorators = [
|
||||
{ type: Injectable, args: [{
|
||||
providedIn: 'root'
|
||||
},] }
|
||||
];
|
||||
/** @nocollapse */
|
||||
NgxFlowchartService.ctorParameters = function () { return []; };
|
||||
/** @nocollapse */ NgxFlowchartService.ngInjectableDef = i0.ɵɵdefineInjectable({ factory: function NgxFlowchartService_Factory() { return new NgxFlowchartService(); }, token: NgxFlowchartService, providedIn: "root" });
|
||||
return NgxFlowchartService;
|
||||
}());
|
||||
export { NgxFlowchartService };
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWZsb3djaGFydC8iLCJzb3VyY2VzIjpbImxpYi9uZ3gtZmxvd2NoYXJ0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBRTNDO0lBS0U7SUFBZ0IsQ0FBQzs7Z0JBTGxCLFVBQVUsU0FBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkI7Ozs7OzhCQUpEO0NBUUMsQUFORCxJQU1DO1NBSFksbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdyb290J1xufSlcbmV4cG9ydCBjbGFzcyBOZ3hGbG93Y2hhcnRTZXJ2aWNlIHtcblxuICBjb25zdHJ1Y3RvcigpIHsgfVxufVxuIl19
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,43 @@
|
||||
/**
|
||||
* @fileoverview added by tsickle
|
||||
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
|
||||
*/
|
||||
/** @type {?} */
|
||||
var regex = /(auto|scroll)/;
|
||||
/** @type {?} */
|
||||
var style = (/**
|
||||
* @param {?} node
|
||||
* @param {?} prop
|
||||
* @return {?}
|
||||
*/
|
||||
function (node, prop) {
|
||||
return getComputedStyle(node, null).getPropertyValue(prop);
|
||||
});
|
||||
var ɵ0 = style;
|
||||
/** @type {?} */
|
||||
var scroll = (/**
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
function (node) {
|
||||
return regex.test(style(node, 'overflow') +
|
||||
style(node, 'overflow-y') +
|
||||
style(node, 'overflow-x'));
|
||||
});
|
||||
var ɵ1 = scroll;
|
||||
/** @type {?} */
|
||||
var scrollparent = (/**
|
||||
* @param {?} node
|
||||
* @return {?}
|
||||
*/
|
||||
function (node) {
|
||||
return !node || node === document.body
|
||||
? document.body
|
||||
: scroll(node)
|
||||
? node
|
||||
: scrollparent((/** @type {?} */ (node.parentNode)));
|
||||
});
|
||||
var ɵ2 = scrollparent;
|
||||
export default scrollparent;
|
||||
export { ɵ0, ɵ1, ɵ2 };
|
||||
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xscGFyZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LWZsb3djaGFydC8iLCJzb3VyY2VzIjpbImxpYi9zY3JvbGxwYXJlbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7SUFBTSxLQUFLLEdBQUcsZUFBZTs7SUFFdkIsS0FBSzs7Ozs7QUFBRyxVQUFDLElBQWEsRUFBRSxJQUFZO0lBQ3hDLE9BQUEsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQztBQUFuRCxDQUFtRCxDQUFBOzs7SUFFL0MsTUFBTTs7OztBQUFHLFVBQUMsSUFBYTtJQUMzQixPQUFBLEtBQUssQ0FBQyxJQUFJLENBQ1IsS0FBSyxDQUFDLElBQUksRUFBRSxVQUFVLENBQUM7UUFDdkIsS0FBSyxDQUFDLElBQUksRUFBRSxZQUFZLENBQUM7UUFDekIsS0FBSyxDQUFDLElBQUksRUFBRSxZQUFZLENBQUMsQ0FBQztBQUg1QixDQUc0QixDQUFBOzs7SUFFeEIsWUFBWTs7OztBQUFHLFVBQUMsSUFBaUI7SUFDckMsT0FBQSxDQUFDLElBQUksSUFBSSxJQUFJLEtBQUssUUFBUSxDQUFDLElBQUk7UUFDN0IsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJO1FBQ2YsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7WUFDZCxDQUFDLENBQUMsSUFBSTtZQUNOLENBQUMsQ0FBQyxZQUFZLENBQUMsbUJBQUEsSUFBSSxDQUFDLFVBQVUsRUFBZSxDQUFDO0FBSmhELENBSWdELENBQUE7O0FBRWxELGVBQWUsWUFBWSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiY29uc3QgcmVnZXggPSAvKGF1dG98c2Nyb2xsKS87XG5cbmNvbnN0IHN0eWxlID0gKG5vZGU6IEVsZW1lbnQsIHByb3A6IHN0cmluZyk6IHN0cmluZyA9PlxuICBnZXRDb21wdXRlZFN0eWxlKG5vZGUsIG51bGwpLmdldFByb3BlcnR5VmFsdWUocHJvcCk7XG5cbmNvbnN0IHNjcm9sbCA9IChub2RlOiBFbGVtZW50KSA9PlxuICByZWdleC50ZXN0KFxuICAgIHN0eWxlKG5vZGUsICdvdmVyZmxvdycpICtcbiAgICBzdHlsZShub2RlLCAnb3ZlcmZsb3cteScpICtcbiAgICBzdHlsZShub2RlLCAnb3ZlcmZsb3cteCcpKTtcblxuY29uc3Qgc2Nyb2xscGFyZW50ID0gKG5vZGU6IEhUTUxFbGVtZW50KTogSFRNTEVsZW1lbnQgPT5cbiAgIW5vZGUgfHwgbm9kZSA9PT0gZG9jdW1lbnQuYm9keVxuICAgID8gZG9jdW1lbnQuYm9keVxuICAgIDogc2Nyb2xsKG5vZGUpXG4gICAgPyBub2RlXG4gICAgOiBzY3JvbGxwYXJlbnQobm9kZS5wYXJlbnROb2RlIGFzIEhUTUxFbGVtZW50KTtcblxuZXhwb3J0IGRlZmF1bHQgc2Nyb2xscGFyZW50O1xuIl19
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,20 @@
|
||||
import { ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { FcCallbacks, FcConnector } from './ngx-flowchart.models';
|
||||
import { FcModelService } from './model.service';
|
||||
export declare class FcConnectorDirective implements OnInit, OnChanges {
|
||||
elementRef: ElementRef<HTMLElement>;
|
||||
callbacks: FcCallbacks;
|
||||
modelservice: FcModelService;
|
||||
connector: FcConnector;
|
||||
mouseOverConnector: FcConnector;
|
||||
constructor(elementRef: ElementRef<HTMLElement>);
|
||||
ngOnInit(): void;
|
||||
ngOnChanges(changes: SimpleChanges): void;
|
||||
private updateConnectorClass;
|
||||
dragover(event: DragEvent): void;
|
||||
drop(event: DragEvent): boolean;
|
||||
dragend(event: DragEvent): void;
|
||||
dragstart(event: DragEvent): void;
|
||||
mouseenter(event: MouseEvent): void;
|
||||
mouseleave(event: MouseEvent): void;
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
import { FcNodeComponent } from './node.component';
|
||||
export declare class DefaultFcNodeComponent extends FcNodeComponent {
|
||||
constructor();
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
/// <reference types="jquery" />
|
||||
import { FcModelService } from './model.service';
|
||||
import { FcConnector, FcCoords, FcEdge, FcModel } from './ngx-flowchart.models';
|
||||
import { FcEdgeDrawingService } from './edge-drawing.service';
|
||||
import { FcModelValidationService } from './modelvalidation.service';
|
||||
export declare class FcEdgeDraggingService {
|
||||
edgeDragging: EdgeDragging;
|
||||
private draggedEdgeSource;
|
||||
private dragOffset;
|
||||
private destinationHtmlElement;
|
||||
private oldDisplayStyle;
|
||||
private readonly modelValidation;
|
||||
private readonly edgeDrawingService;
|
||||
private readonly modelService;
|
||||
private readonly model;
|
||||
private readonly isValidEdgeCallback;
|
||||
private readonly applyFunction;
|
||||
private readonly dragAnimation;
|
||||
private readonly edgeStyle;
|
||||
constructor(modelValidation: FcModelValidationService, edgeDrawingService: FcEdgeDrawingService, modelService: FcModelService, model: FcModel, isValidEdgeCallback: (source: FcConnector, destination: FcConnector) => boolean, applyFunction: <T>(fn: (...args: any[]) => T) => T, dragAnimation: string, edgeStyle: string);
|
||||
dragstart(event: DragEvent, connector: FcConnector): void;
|
||||
dragover(event: DragEvent): void;
|
||||
dragoverConnector(event: DragEvent, connector: FcConnector): boolean;
|
||||
dragleaveMagnet(event: DragEvent): void;
|
||||
dragoverMagnet(event: DragEvent, connector: FcConnector): boolean;
|
||||
dragend(event: DragEvent): void;
|
||||
drop(event: DragEvent, targetConnector: FcConnector): boolean;
|
||||
}
|
||||
export interface EdgeDragging {
|
||||
isDragging: boolean;
|
||||
shadowDragStarted: boolean;
|
||||
dragPoint1: FcCoords;
|
||||
dragPoint2: FcCoords;
|
||||
dragLabel?: string;
|
||||
prevEdge?: FcEdge;
|
||||
magnetActive?: boolean;
|
||||
gElement?: JQuery<Element>;
|
||||
pathElement?: JQuery<Element>;
|
||||
circleElement?: JQuery<Element>;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
import { FcCoords } from './ngx-flowchart.models';
|
||||
export declare class FcEdgeDrawingService {
|
||||
constructor();
|
||||
getEdgeDAttribute(pt1: FcCoords, pt2: FcCoords, style: string): string;
|
||||
getEdgeCenter(pt1: FcCoords, pt2: FcCoords): FcCoords;
|
||||
private computeEdgeTangentOffset;
|
||||
private computeEdgeSourceTangent;
|
||||
private computeEdgeDestinationTangent;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import { ElementRef, OnInit } from '@angular/core';
|
||||
import { FcCallbacks, FcConnector } from './ngx-flowchart.models';
|
||||
export declare class FcMagnetDirective implements OnInit {
|
||||
elementRef: ElementRef<HTMLElement>;
|
||||
callbacks: FcCallbacks;
|
||||
connector: FcConnector;
|
||||
constructor(elementRef: ElementRef<HTMLElement>);
|
||||
ngOnInit(): void;
|
||||
dragover(event: DragEvent): boolean;
|
||||
dragleave(event: DragEvent): void;
|
||||
drop(event: DragEvent): boolean;
|
||||
dragend(event: DragEvent): void;
|
||||
}
|
||||
@ -0,0 +1,89 @@
|
||||
import { FcModelValidationService } from './modelvalidation.service';
|
||||
import { FcConnector, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ChangeDetectorRef } from '@angular/core';
|
||||
export declare class FcModelService {
|
||||
modelValidation: FcModelValidationService;
|
||||
model: FcModel;
|
||||
cd: ChangeDetectorRef;
|
||||
selectedObjects: any[];
|
||||
connectorsHtmlElements: HtmlElementMap;
|
||||
nodesHtmlElements: HtmlElementMap;
|
||||
canvasHtmlElement: HTMLElement;
|
||||
dragImage: HTMLImageElement;
|
||||
svgHtmlElement: SVGElement;
|
||||
dropNode: (event: Event, node: FcNode) => void;
|
||||
createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>;
|
||||
edgeAddedCallback: (edge: FcEdge) => void;
|
||||
nodeRemovedCallback: (node: FcNode) => void;
|
||||
edgeRemovedCallback: (edge: FcEdge) => void;
|
||||
dropTargetId: string;
|
||||
connectors: ConnectorsModel;
|
||||
nodes: NodesModel;
|
||||
edges: EdgesModel;
|
||||
constructor(modelValidation: FcModelValidationService, model: FcModel, cd: ChangeDetectorRef, selectedObjects: any[], dropNode: (event: Event, node: FcNode) => void, createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>, edgeAddedCallback: (edge: FcEdge) => void, nodeRemovedCallback: (node: FcNode) => void, edgeRemovedCallback: (edge: FcEdge) => void, canvasHtmlElement: HTMLElement, svgHtmlElement: SVGElement);
|
||||
detectChanges(): void;
|
||||
selectObject(object: any): void;
|
||||
deselectObject(object: any): void;
|
||||
toggleSelectedObject(object: any): void;
|
||||
isSelectedObject(object: any): boolean;
|
||||
selectAll(): void;
|
||||
deselectAll(): void;
|
||||
isEditObject(object: any): boolean;
|
||||
private inRectBox;
|
||||
getItemInfoAtPoint(x: number, y: number): FcItemInfo;
|
||||
getNodeAtPoint(x: number, y: number): FcNode;
|
||||
getEdgeAtPoint(x: number, y: number): FcEdge;
|
||||
selectAllInRect(rectBox: FcRectBox): void;
|
||||
deleteSelected(): void;
|
||||
isEditable(): boolean;
|
||||
isDropSource(): boolean;
|
||||
getDragImage(): HTMLImageElement;
|
||||
registerCallbacks(edgeAddedCallback: (edge: FcEdge) => void, nodeRemovedCallback: (node: FcNode) => void, edgeRemovedCallback: (edge: FcEdge) => void): void;
|
||||
}
|
||||
interface HtmlElementMap {
|
||||
[id: string]: HTMLElement;
|
||||
}
|
||||
declare abstract class AbstractFcModel<T> {
|
||||
modelService: FcModelService;
|
||||
protected constructor(modelService: FcModelService);
|
||||
select(object: T): void;
|
||||
deselect(object: T): void;
|
||||
toggleSelected(object: T): void;
|
||||
isSelected(object: T): boolean;
|
||||
isEdit(object: T): boolean;
|
||||
}
|
||||
declare class ConnectorsModel extends AbstractFcModel<FcConnector> {
|
||||
constructor(modelService: FcModelService);
|
||||
getConnector(connectorId: string): FcConnector;
|
||||
getHtmlElement(connectorId: string): HTMLElement;
|
||||
setHtmlElement(connectorId: string, element: HTMLElement): void;
|
||||
private _getCoords;
|
||||
getCoords(connectorId: string): FcCoords;
|
||||
getCenteredCoord(connectorId: string): FcCoords;
|
||||
}
|
||||
declare class NodesModel extends AbstractFcModel<FcNode> {
|
||||
constructor(modelService: FcModelService);
|
||||
getConnectorsByType(node: FcNode, type: string): Array<FcConnector>;
|
||||
private _addConnector;
|
||||
delete(node: FcNode): void;
|
||||
getSelectedNodes(): Array<FcNode>;
|
||||
handleClicked(node: FcNode, ctrlKey?: boolean): void;
|
||||
private _addNode;
|
||||
getConnectorIds(node: FcNode): Array<string>;
|
||||
getNodeByConnectorId(connectorId: string): FcNode;
|
||||
getHtmlElement(nodeId: string): HTMLElement;
|
||||
setHtmlElement(nodeId: string, element: HTMLElement): void;
|
||||
}
|
||||
declare class EdgesModel extends AbstractFcModel<FcEdge> {
|
||||
constructor(modelService: FcModelService);
|
||||
ready(edge: FcEdge): boolean;
|
||||
sourceCoord(edge: FcEdge): FcCoords;
|
||||
destCoord(edge: FcEdge): FcCoords;
|
||||
delete(edge: FcEdge): void;
|
||||
getSelectedEdges(): Array<FcEdge>;
|
||||
handleEdgeMouseClick(edge: FcEdge, ctrlKey?: boolean): void;
|
||||
putEdge(edge: FcEdge): void;
|
||||
_addEdge(event: Event, sourceConnector: FcConnector, destConnector: FcConnector, label: string): void;
|
||||
}
|
||||
export {};
|
||||
@ -0,0 +1,12 @@
|
||||
import { FcConnector, FcEdge, FcModel, FcNode } from './ngx-flowchart.models';
|
||||
export declare class FcModelValidationService {
|
||||
constructor();
|
||||
validateModel(model: FcModel): FcModel;
|
||||
validateNodes(nodes: Array<FcNode>): Array<FcNode>;
|
||||
validateNode(node: FcNode): FcNode;
|
||||
private _validateEdges;
|
||||
validateEdges(edges: Array<FcEdge>, nodes: Array<FcNode>): Array<FcEdge>;
|
||||
private _validateEdge;
|
||||
validateEdge(edge: FcEdge, nodes: Array<FcNode>): FcEdge;
|
||||
validateConnector(connector: FcConnector): FcConnector;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import { FcConnector, FcEdge, FcNode } from './ngx-flowchart.models';
|
||||
export declare class FcMouseOverService {
|
||||
mouseoverscope: MouseOverScope;
|
||||
private readonly applyFunction;
|
||||
constructor(applyFunction: <T>(fn: (...args: any[]) => T) => T);
|
||||
nodeMouseOver(event: MouseEvent, node: FcNode): void;
|
||||
nodeMouseOut(event: MouseEvent, node: FcNode): void;
|
||||
connectorMouseEnter(event: MouseEvent, connector: FcConnector): void;
|
||||
connectorMouseLeave(event: MouseEvent, connector: FcConnector): void;
|
||||
edgeMouseEnter(event: MouseEvent, edge: FcEdge): void;
|
||||
edgeMouseLeave(event: MouseEvent, edge: FcEdge): void;
|
||||
}
|
||||
export interface MouseOverScope {
|
||||
connector: FcConnector;
|
||||
edge: FcEdge;
|
||||
node: FcNode;
|
||||
}
|
||||
@ -1,5 +1,82 @@
|
||||
import { OnInit } from '@angular/core';
|
||||
export declare class NgxFlowchartComponent implements OnInit {
|
||||
constructor();
|
||||
import { ChangeDetectorRef, DoCheck, ElementRef, IterableDiffers, NgZone, OnInit } from '@angular/core';
|
||||
import { FcCallbacks, FcEdge, FcModel, UserCallbacks, UserNodeCallbacks } from './ngx-flowchart.models';
|
||||
import { FcModelService } from './model.service';
|
||||
import { FcModelValidationService } from './modelvalidation.service';
|
||||
import { FcNodeDraggingService } from './node-dragging.service';
|
||||
import { FcEdgeDrawingService } from './edge-drawing.service';
|
||||
import { FcEdgeDraggingService } from './edge-dragging.service';
|
||||
import { FcMouseOverService } from './mouseover.service';
|
||||
import { FcRectangleSelectService } from './rectangleselect.service';
|
||||
export declare class NgxFlowchartComponent implements OnInit, DoCheck {
|
||||
private elementRef;
|
||||
private differs;
|
||||
private modelValidation;
|
||||
edgeDrawingService: FcEdgeDrawingService;
|
||||
private cd;
|
||||
private zone;
|
||||
readonly canvasClass: string;
|
||||
model: FcModel;
|
||||
selectedObjects: any[];
|
||||
edgeStyle: string;
|
||||
userCallbacks: UserCallbacks;
|
||||
automaticResize: boolean;
|
||||
dragAnimation: string;
|
||||
nodeWidth: number;
|
||||
nodeHeight: number;
|
||||
dropTargetId: string;
|
||||
callbacks: FcCallbacks;
|
||||
userNodeCallbacks: UserNodeCallbacks;
|
||||
modelService: FcModelService;
|
||||
nodeDraggingService: FcNodeDraggingService;
|
||||
edgeDraggingService: FcEdgeDraggingService;
|
||||
mouseoverService: FcMouseOverService;
|
||||
rectangleSelectService: FcRectangleSelectService;
|
||||
arrowDefId: string;
|
||||
arrowDefIdSelected: string;
|
||||
flowchartConstants: {
|
||||
htmlPrefix: string;
|
||||
leftConnectorType: string;
|
||||
rightConnectorType: string;
|
||||
curvedStyle: string;
|
||||
lineStyle: string;
|
||||
dragAnimationRepaint: string;
|
||||
dragAnimationShadow: string;
|
||||
canvasClass: string;
|
||||
selectedClass: string;
|
||||
editClass: string;
|
||||
activeClass: string;
|
||||
hoverClass: string;
|
||||
draggingClass: string;
|
||||
edgeClass: string;
|
||||
edgeLabelClass: string;
|
||||
connectorClass: string;
|
||||
magnetClass: string;
|
||||
nodeClass: string;
|
||||
nodeOverlayClass: string;
|
||||
leftConnectorClass: string;
|
||||
rightConnectorClass: string;
|
||||
canvasResizeThreshold: number;
|
||||
canvasResizeStep: number;
|
||||
};
|
||||
private nodesDiffer;
|
||||
private edgesDiffer;
|
||||
constructor(elementRef: ElementRef<HTMLElement>, differs: IterableDiffers, modelValidation: FcModelValidationService, edgeDrawingService: FcEdgeDrawingService, cd: ChangeDetectorRef, zone: NgZone);
|
||||
ngOnInit(): void;
|
||||
ngDoCheck(): void;
|
||||
getEdgeDAttribute(edge: FcEdge): string;
|
||||
adjustCanvasSize(fit?: boolean): void;
|
||||
canvasClick(event: MouseEvent): void;
|
||||
edgeMouseDown(event: MouseEvent, edge: FcEdge): void;
|
||||
edgeClick(event: MouseEvent, edge: FcEdge): void;
|
||||
edgeRemove(event: Event, edge: FcEdge): void;
|
||||
edgeEdit(event: Event, edge: FcEdge): void;
|
||||
edgeDoubleClick(event: MouseEvent, edge: FcEdge): void;
|
||||
edgeMouseOver(event: MouseEvent, edge: FcEdge): void;
|
||||
edgeMouseEnter(event: MouseEvent, edge: FcEdge): void;
|
||||
edgeMouseLeave(event: MouseEvent, edge: FcEdge): void;
|
||||
dragover(event: DragEvent): void;
|
||||
drop(event: DragEvent): void;
|
||||
mousedown(event: MouseEvent): void;
|
||||
mousemove(event: MouseEvent): void;
|
||||
mouseup(event: MouseEvent): void;
|
||||
}
|
||||
|
||||
@ -0,0 +1,115 @@
|
||||
import { Observable } from 'rxjs';
|
||||
import { InjectionToken, Type } from '@angular/core';
|
||||
import { FcNodeComponent } from './node.component';
|
||||
export declare const FC_NODE_COMPONENT_CONFIG: InjectionToken<FcNodeComponentConfig>;
|
||||
export interface FcNodeComponentConfig {
|
||||
nodeComponentType: Type<FcNodeComponent>;
|
||||
}
|
||||
export declare const FlowchartConstants: {
|
||||
htmlPrefix: string;
|
||||
leftConnectorType: string;
|
||||
rightConnectorType: string;
|
||||
curvedStyle: string;
|
||||
lineStyle: string;
|
||||
dragAnimationRepaint: string;
|
||||
dragAnimationShadow: string;
|
||||
canvasClass: string;
|
||||
selectedClass: string;
|
||||
editClass: string;
|
||||
activeClass: string;
|
||||
hoverClass: string;
|
||||
draggingClass: string;
|
||||
edgeClass: string;
|
||||
edgeLabelClass: string;
|
||||
connectorClass: string;
|
||||
magnetClass: string;
|
||||
nodeClass: string;
|
||||
nodeOverlayClass: string;
|
||||
leftConnectorClass: string;
|
||||
rightConnectorClass: string;
|
||||
canvasResizeThreshold: number;
|
||||
canvasResizeStep: number;
|
||||
};
|
||||
export interface FcCoords {
|
||||
x?: number;
|
||||
y?: number;
|
||||
}
|
||||
export interface FcOffset {
|
||||
top: number;
|
||||
left: number;
|
||||
}
|
||||
export interface FcRectBox {
|
||||
top: number;
|
||||
left: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
}
|
||||
export interface FcConnector {
|
||||
id: string;
|
||||
type: string;
|
||||
}
|
||||
export interface FcNode extends FcCoords {
|
||||
id: string;
|
||||
name: string;
|
||||
connectors: Array<FcConnector>;
|
||||
readonly?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
export interface FcEdge {
|
||||
label?: string;
|
||||
source?: string;
|
||||
destination?: string;
|
||||
active?: boolean;
|
||||
}
|
||||
export interface FcItemInfo {
|
||||
node?: FcNode;
|
||||
edge?: FcEdge;
|
||||
}
|
||||
export interface FcModel {
|
||||
nodes: Array<FcNode>;
|
||||
edges: Array<FcEdge>;
|
||||
}
|
||||
export interface UserCallbacks {
|
||||
dropNode?: (event: Event, node: FcNode) => void;
|
||||
createEdge?: (event: Event, edge: FcEdge) => Observable<FcEdge>;
|
||||
edgeAdded?: (edge: FcEdge) => void;
|
||||
nodeRemoved?: (node: FcNode) => void;
|
||||
edgeRemoved?: (edge: FcEdge) => void;
|
||||
edgeDoubleClick?: (event: MouseEvent, edge: FcEdge) => void;
|
||||
edgeMouseOver?: (event: MouseEvent, edge: FcEdge) => void;
|
||||
isValidEdge?: (source: FcConnector, destination: FcConnector) => boolean;
|
||||
edgeEdit?: (event: Event, edge: FcEdge) => void;
|
||||
nodeCallbacks?: UserNodeCallbacks;
|
||||
}
|
||||
export interface UserNodeCallbacks {
|
||||
nodeEdit?: (event: MouseEvent, node: FcNode) => void;
|
||||
doubleClick?: (event: MouseEvent, node: FcNode) => void;
|
||||
mouseDown?: (event: MouseEvent, node: FcNode) => void;
|
||||
mouseEnter?: (event: MouseEvent, node: FcNode) => void;
|
||||
mouseLeave?: (event: MouseEvent, node: FcNode) => void;
|
||||
}
|
||||
export interface FcCallbacks {
|
||||
nodeDragstart: (event: DragEvent, node: FcNode) => void;
|
||||
nodeDragend: (event: DragEvent) => void;
|
||||
edgeDragstart: (event: DragEvent, connector: FcConnector) => void;
|
||||
edgeDragend: (event: DragEvent) => void;
|
||||
edgeDrop: (event: DragEvent, targetConnector: FcConnector) => boolean;
|
||||
edgeDragoverConnector: (event: DragEvent, connector: FcConnector) => boolean;
|
||||
edgeDragoverMagnet: (event: DragEvent, connector: FcConnector) => boolean;
|
||||
edgeDragleaveMagnet: (event: DragEvent) => void;
|
||||
nodeMouseOver: (event: MouseEvent, node: FcNode) => void;
|
||||
nodeMouseOut: (event: MouseEvent, node: FcNode) => void;
|
||||
connectorMouseEnter: (event: MouseEvent, connector: FcConnector) => void;
|
||||
connectorMouseLeave: (event: MouseEvent, connector: FcConnector) => void;
|
||||
nodeClicked: (event: MouseEvent, node: FcNode) => void;
|
||||
}
|
||||
export interface FcAdjacentList {
|
||||
[id: string]: {
|
||||
incoming: number;
|
||||
outgoing: Array<string>;
|
||||
};
|
||||
}
|
||||
export declare class ModelvalidationError extends Error {
|
||||
constructor(message: string);
|
||||
}
|
||||
export declare function fcTopSort(graph: FcModel): Array<string> | null;
|
||||
@ -1,3 +0,0 @@
|
||||
export declare class NgxFlowchartService {
|
||||
constructor();
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
/// <reference types="jquery" />
|
||||
import { FcModelService } from './model.service';
|
||||
import { FcNode } from './ngx-flowchart.models';
|
||||
export declare class FcNodeDraggingService {
|
||||
nodeDraggingScope: NodeDraggingScope;
|
||||
private dragOffsets;
|
||||
private draggedElements;
|
||||
private destinationHtmlElements;
|
||||
private oldDisplayStyles;
|
||||
private readonly modelService;
|
||||
private readonly automaticResize;
|
||||
private readonly dragAnimation;
|
||||
private readonly applyFunction;
|
||||
constructor(modelService: FcModelService, applyFunction: <T>(fn: (...args: any[]) => T) => T, automaticResize: boolean, dragAnimation: string);
|
||||
private getCoordinate;
|
||||
private getXCoordinate;
|
||||
private getYCoordinate;
|
||||
private resizeCanvas;
|
||||
isDraggingNode(node: FcNode): boolean;
|
||||
dragstart(event: DragEvent, node: FcNode): void;
|
||||
drop(event: DragEvent): boolean;
|
||||
dragover(event: DragEvent): boolean;
|
||||
dragend(event: DragEvent): void;
|
||||
}
|
||||
export interface NodeDraggingScope {
|
||||
draggedNodes: Array<FcNode>;
|
||||
shadowElements: Array<JQuery<HTMLElement>>;
|
||||
shadowDragStarted: boolean;
|
||||
dropElement: HTMLElement;
|
||||
}
|
||||
export interface NodeDropElement extends HTMLElement {
|
||||
offsetInfo?: {
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
};
|
||||
}
|
||||
export interface NodeDropScope {
|
||||
dropElement: NodeDropElement;
|
||||
}
|
||||
export interface DropNodeInfo {
|
||||
node: FcNode;
|
||||
dropTargetId: string;
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
}
|
||||
@ -0,0 +1,71 @@
|
||||
import { ComponentFactoryResolver, ElementRef, OnChanges, OnInit, SimpleChanges, ViewContainerRef } from '@angular/core';
|
||||
import { FcCallbacks, FcConnector, FcNode, FcNodeComponentConfig, UserNodeCallbacks } from './ngx-flowchart.models';
|
||||
import { FcModelService } from './model.service';
|
||||
export declare class FcNodeContainerComponent implements OnInit, OnChanges {
|
||||
private nodeComponentConfig;
|
||||
private elementRef;
|
||||
private componentFactoryResolver;
|
||||
callbacks: FcCallbacks;
|
||||
userNodeCallbacks: UserNodeCallbacks;
|
||||
node: FcNode;
|
||||
selected: boolean;
|
||||
edit: boolean;
|
||||
underMouse: boolean;
|
||||
mouseOverConnector: FcConnector;
|
||||
modelservice: FcModelService;
|
||||
dragging: boolean;
|
||||
readonly nodeId: string;
|
||||
readonly top: string;
|
||||
readonly left: string;
|
||||
nodeComponent: FcNodeComponent;
|
||||
nodeContentContainer: ViewContainerRef;
|
||||
constructor(nodeComponentConfig: FcNodeComponentConfig, elementRef: ElementRef<HTMLElement>, componentFactoryResolver: ComponentFactoryResolver);
|
||||
ngOnInit(): void;
|
||||
ngOnChanges(changes: SimpleChanges): void;
|
||||
private updateNodeClass;
|
||||
private updateNodeComponent;
|
||||
private toggleClass;
|
||||
mousedown(event: MouseEvent): void;
|
||||
dragstart(event: DragEvent): void;
|
||||
dragend(event: DragEvent): void;
|
||||
click(event: MouseEvent): void;
|
||||
mouseover(event: MouseEvent): void;
|
||||
mouseout(event: MouseEvent): void;
|
||||
}
|
||||
export declare abstract class FcNodeComponent implements OnInit {
|
||||
callbacks: FcCallbacks;
|
||||
userNodeCallbacks: UserNodeCallbacks;
|
||||
node: FcNode;
|
||||
selected: boolean;
|
||||
edit: boolean;
|
||||
underMouse: boolean;
|
||||
mouseOverConnector: FcConnector;
|
||||
modelservice: FcModelService;
|
||||
dragging: boolean;
|
||||
flowchartConstants: {
|
||||
htmlPrefix: string;
|
||||
leftConnectorType: string;
|
||||
rightConnectorType: string;
|
||||
curvedStyle: string;
|
||||
lineStyle: string;
|
||||
dragAnimationRepaint: string;
|
||||
dragAnimationShadow: string;
|
||||
canvasClass: string;
|
||||
selectedClass: string;
|
||||
editClass: string;
|
||||
activeClass: string;
|
||||
hoverClass: string;
|
||||
draggingClass: string;
|
||||
edgeClass: string;
|
||||
edgeLabelClass: string;
|
||||
connectorClass: string;
|
||||
magnetClass: string;
|
||||
nodeClass: string;
|
||||
nodeOverlayClass: string;
|
||||
leftConnectorClass: string;
|
||||
rightConnectorClass: string;
|
||||
canvasResizeThreshold: number;
|
||||
canvasResizeStep: number;
|
||||
};
|
||||
ngOnInit(): void;
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
import { FcModelService } from './model.service';
|
||||
export declare class FcRectangleSelectService {
|
||||
private readonly selectRect;
|
||||
private readonly modelService;
|
||||
private readonly selectElement;
|
||||
private readonly $canvasElement;
|
||||
private readonly $scrollParent;
|
||||
private readonly applyFunction;
|
||||
constructor(modelService: FcModelService, selectElement: HTMLElement, applyFunction: <T>(fn: (...args: any[]) => T) => T);
|
||||
mousedown(e: MouseEvent): void;
|
||||
mousemove(e: MouseEvent): void;
|
||||
private updateScroll;
|
||||
mouseup(e: MouseEvent): void;
|
||||
private updateSelectRect;
|
||||
private selectObjects;
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
declare const scrollparent: (node: HTMLElement) => HTMLElement;
|
||||
export default scrollparent;
|
||||
File diff suppressed because one or more lines are too long
@ -1,3 +1,4 @@
|
||||
export * from './lib/ngx-flowchart.service';
|
||||
export * from './lib/ngx-flowchart.component';
|
||||
export * from './lib/ngx-flowchart.module';
|
||||
export * from './lib/ngx-flowchart.models';
|
||||
export { FcNodeComponent } from './lib/node.component';
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,103 @@
|
||||
import { Directive, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { FcCallbacks, FcConnector, 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()
|
||||
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();
|
||||
}
|
||||
this.modelservice.connectors.setHtmlElement(this.connector.id, element[0]);
|
||||
}
|
||||
|
||||
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: DragEvent) {
|
||||
// Skip - conflict with magnet
|
||||
/* if (this.modelservice.isEditable()) {
|
||||
return this.callbacks.edgeDragoverConnector(event, this.connector);
|
||||
}*/
|
||||
}
|
||||
|
||||
@HostListener('drop', ['$event'])
|
||||
drop(event: DragEvent) {
|
||||
if (this.modelservice.isEditable()) {
|
||||
return this.callbacks.edgeDrop(event, this.connector);
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('dragend', ['$event'])
|
||||
dragend(event: DragEvent) {
|
||||
if (this.modelservice.isEditable()) {
|
||||
this.callbacks.edgeDragend(event);
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('dragstart', ['$event'])
|
||||
dragstart(event: DragEvent) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
<div
|
||||
(dblclick)="userNodeCallbacks.doubleClick($event, node)">
|
||||
<div class="{{flowchartConstants.nodeOverlayClass}}"></div>
|
||||
<div class="innerNode">
|
||||
<p>{{ node.name }}</p>
|
||||
|
||||
<div class="{{flowchartConstants.leftConnectorClass}}">
|
||||
<div fc-magnet [connector]="connector" [callbacks]="callbacks"
|
||||
*ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
|
||||
<div fc-connector [connector]="connector"
|
||||
[mouseOverConnector]="mouseOverConnector"
|
||||
[callbacks]="callbacks"
|
||||
[modelservice]="modelservice"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="{{flowchartConstants.rightConnectorClass}}">
|
||||
<div fc-magnet [connector]="connector" [callbacks]="callbacks"
|
||||
*ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
|
||||
<div fc-connector [connector]="connector"
|
||||
[mouseOverConnector]="mouseOverConnector"
|
||||
[callbacks]="callbacks"
|
||||
[modelservice]="modelservice"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" (click)="modelservice.nodes.delete(node)">
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,40 @@
|
||||
:host {
|
||||
|
||||
.fc-node-overlay {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:host-context(.fc-hover) .fc-node-overlay {
|
||||
opacity: 0.25;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
:host-context(.fc-selected) .fc-node-overlay {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.innerNode {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 100px;
|
||||
border-radius: 5px;
|
||||
|
||||
background-color: #F15B26;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
pointer-events: none;
|
||||
|
||||
p {
|
||||
padding: 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FcNodeComponent } from './node.component';
|
||||
|
||||
@Component({
|
||||
selector: 'fc-default-node',
|
||||
templateUrl: './default-node.component.html',
|
||||
styleUrls: ['./default-node.component.scss']
|
||||
})
|
||||
export class DefaultFcNodeComponent extends FcNodeComponent {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,278 @@
|
||||
import { FcModelService } from './model.service';
|
||||
import { FcConnector, FcCoords, FcEdge, FcModel, FlowchartConstants, ModelvalidationError } from './ngx-flowchart.models';
|
||||
import { FcEdgeDrawingService } from './edge-drawing.service';
|
||||
import { FcModelValidationService } from './modelvalidation.service';
|
||||
|
||||
export class FcEdgeDraggingService {
|
||||
|
||||
edgeDragging: EdgeDragging = {
|
||||
isDragging: false,
|
||||
dragPoint1: null,
|
||||
dragPoint2: null,
|
||||
shadowDragStarted: false
|
||||
};
|
||||
|
||||
private draggedEdgeSource: FcConnector = null;
|
||||
private dragOffset: FcCoords = {};
|
||||
private destinationHtmlElement: HTMLElement = null;
|
||||
private oldDisplayStyle = '';
|
||||
|
||||
private readonly modelValidation: FcModelValidationService;
|
||||
private readonly edgeDrawingService: FcEdgeDrawingService;
|
||||
private readonly modelService: FcModelService;
|
||||
private readonly model: FcModel;
|
||||
private readonly isValidEdgeCallback: (source: FcConnector, destination: FcConnector) => boolean;
|
||||
private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
|
||||
private readonly dragAnimation: string;
|
||||
private readonly edgeStyle: string;
|
||||
|
||||
constructor(modelValidation: FcModelValidationService,
|
||||
edgeDrawingService: FcEdgeDrawingService,
|
||||
modelService: FcModelService,
|
||||
model: FcModel,
|
||||
isValidEdgeCallback: (source: FcConnector, destination: FcConnector) => boolean,
|
||||
applyFunction: <T>(fn: (...args: any[]) => T) => T,
|
||||
dragAnimation: string,
|
||||
edgeStyle: string) {
|
||||
this.modelValidation = modelValidation;
|
||||
this.edgeDrawingService = edgeDrawingService;
|
||||
this.modelService = modelService;
|
||||
this.model = model;
|
||||
this.isValidEdgeCallback = isValidEdgeCallback || (() => true);
|
||||
this.applyFunction = applyFunction;
|
||||
this.dragAnimation = dragAnimation;
|
||||
this.edgeStyle = edgeStyle;
|
||||
}
|
||||
|
||||
public dragstart(event: DragEvent, connector: FcConnector) {
|
||||
let swapConnector: FcConnector;
|
||||
let dragLabel: string;
|
||||
let prevEdge: FcEdge;
|
||||
if (connector.type === FlowchartConstants.leftConnectorType) {
|
||||
for (const edge of this.model.edges) {
|
||||
if (edge === connector.id) {
|
||||
swapConnector = this.modelService.connectors.getConnector(edge.source);
|
||||
dragLabel = edge.label;
|
||||
prevEdge = edge;
|
||||
this.applyFunction(() => {
|
||||
this.modelService.edges.delete(edge);
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.edgeDragging.isDragging = true;
|
||||
if (swapConnector !== undefined) {
|
||||
this.draggedEdgeSource = swapConnector;
|
||||
this.edgeDragging.dragPoint1 = this.modelService.connectors.getCenteredCoord(swapConnector.id);
|
||||
this.edgeDragging.dragLabel = dragLabel;
|
||||
this.edgeDragging.prevEdge = prevEdge;
|
||||
} else {
|
||||
this.draggedEdgeSource = connector;
|
||||
this.edgeDragging.dragPoint1 = this.modelService.connectors.getCenteredCoord(connector.id);
|
||||
}
|
||||
const canvas = this.modelService.canvasHtmlElement;
|
||||
if (!canvas) {
|
||||
throw new Error('No canvas while edgedraggingService found.');
|
||||
}
|
||||
this.dragOffset.x = -canvas.getBoundingClientRect().left;
|
||||
this.dragOffset.y = -canvas.getBoundingClientRect().top;
|
||||
|
||||
this.edgeDragging.dragPoint2 = {
|
||||
x: event.clientX + this.dragOffset.x,
|
||||
y: event.clientY + this.dragOffset.y
|
||||
};
|
||||
const originalEvent: DragEvent = (event as any).originalEvent || event;
|
||||
|
||||
originalEvent.dataTransfer.setData('Text', 'Just to support firefox');
|
||||
if (originalEvent.dataTransfer.setDragImage) {
|
||||
originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
|
||||
} else {
|
||||
this.destinationHtmlElement = event.target as HTMLElement;
|
||||
this.oldDisplayStyle = this.destinationHtmlElement.style.display;
|
||||
this.destinationHtmlElement.style.display = 'none';
|
||||
if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
this.edgeDragging.shadowDragStarted = true;
|
||||
}
|
||||
}
|
||||
if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
if (this.edgeDragging.gElement === undefined) {
|
||||
this.edgeDragging.gElement = $(document.querySelectorAll('.shadow-svg-class'));
|
||||
this.edgeDragging.pathElement = $(document.querySelectorAll('.shadow-svg-class')).find('path');
|
||||
this.edgeDragging.circleElement = $(document.querySelectorAll('.shadow-svg-class')).find('circle');
|
||||
}
|
||||
|
||||
this.edgeDragging.gElement.css('display', 'block');
|
||||
this.edgeDragging.pathElement.attr('d',
|
||||
this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1, this.edgeDragging.dragPoint2, this.edgeStyle));
|
||||
this.edgeDragging.circleElement.attr('cx', this.edgeDragging.dragPoint2.x);
|
||||
this.edgeDragging.circleElement.attr('cy', this.edgeDragging.dragPoint2.y);
|
||||
}
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
public dragover(event: DragEvent) {
|
||||
if (this.edgeDragging.isDragging) {
|
||||
if (!this.edgeDragging.magnetActive && this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
if (this.destinationHtmlElement !== null) {
|
||||
this.destinationHtmlElement.style.display = this.oldDisplayStyle;
|
||||
}
|
||||
|
||||
if (this.edgeDragging.shadowDragStarted) {
|
||||
this.applyFunction(() => {
|
||||
this.edgeDragging.shadowDragStarted = false;
|
||||
});
|
||||
}
|
||||
|
||||
this.edgeDragging.dragPoint2 = {
|
||||
x: event.clientX + this.dragOffset.x,
|
||||
y: event.clientY + this.dragOffset.y
|
||||
};
|
||||
|
||||
this.edgeDragging.pathElement.attr('d',
|
||||
this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1, this.edgeDragging.dragPoint2, this.edgeStyle));
|
||||
this.edgeDragging.circleElement.attr('cx', this.edgeDragging.dragPoint2.x);
|
||||
this.edgeDragging.circleElement.attr('cy', this.edgeDragging.dragPoint2.y);
|
||||
|
||||
} else if (this.dragAnimation === FlowchartConstants.dragAnimationRepaint) {
|
||||
return this.applyFunction(() => {
|
||||
if (this.destinationHtmlElement !== null) {
|
||||
this.destinationHtmlElement.style.display = this.oldDisplayStyle;
|
||||
}
|
||||
|
||||
this.edgeDragging.dragPoint2 = {
|
||||
x: event.clientX + this.dragOffset.x,
|
||||
y: event.clientY + this.dragOffset.y
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public dragoverConnector(event: DragEvent, connector: FcConnector): boolean {
|
||||
if (this.edgeDragging.isDragging) {
|
||||
this.dragover(event);
|
||||
try {
|
||||
this.modelValidation.validateEdges(this.model.edges.concat([{
|
||||
source: this.draggedEdgeSource.id,
|
||||
destination: connector.id
|
||||
}]), this.model.nodes);
|
||||
} catch (error) {
|
||||
if (error instanceof ModelvalidationError) {
|
||||
return true;
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
if (this.isValidEdgeCallback(this.draggedEdgeSource, connector)) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public dragleaveMagnet(event: DragEvent) {
|
||||
this.edgeDragging.magnetActive = false;
|
||||
}
|
||||
|
||||
public dragoverMagnet(event: DragEvent, connector: FcConnector): boolean {
|
||||
if (this.edgeDragging.isDragging) {
|
||||
this.dragover(event);
|
||||
try {
|
||||
this.modelValidation.validateEdges(this.model.edges.concat([{
|
||||
source: this.draggedEdgeSource.id,
|
||||
destination: connector.id
|
||||
}]), this.model.nodes);
|
||||
} catch (error) {
|
||||
if (error instanceof ModelvalidationError) {
|
||||
return true;
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
if (this.isValidEdgeCallback(this.draggedEdgeSource, connector)) {
|
||||
if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
|
||||
this.edgeDragging.magnetActive = true;
|
||||
|
||||
this.edgeDragging.dragPoint2 = this.modelService.connectors.getCenteredCoord(connector.id);
|
||||
this.edgeDragging.pathElement.attr('d',
|
||||
this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1, this.edgeDragging.dragPoint2, this.edgeStyle));
|
||||
this.edgeDragging.circleElement.attr('cx', this.edgeDragging.dragPoint2.x);
|
||||
this.edgeDragging.circleElement.attr('cy', this.edgeDragging.dragPoint2.y);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
} else if (this.dragAnimation === FlowchartConstants.dragAnimationRepaint) {
|
||||
return this.applyFunction(() => {
|
||||
this.edgeDragging.dragPoint2 = this.modelService.connectors.getCenteredCoord(connector.id);
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public dragend(event: DragEvent) {
|
||||
if (this.edgeDragging.isDragging) {
|
||||
this.edgeDragging.isDragging = false;
|
||||
this.edgeDragging.dragPoint1 = null;
|
||||
this.edgeDragging.dragPoint2 = null;
|
||||
this.edgeDragging.dragLabel = null;
|
||||
event.stopPropagation();
|
||||
|
||||
if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
this.edgeDragging.gElement.css('display', 'none');
|
||||
}
|
||||
if (this.edgeDragging.prevEdge) {
|
||||
const edge = this.edgeDragging.prevEdge;
|
||||
this.edgeDragging.prevEdge = null;
|
||||
this.applyFunction(() => {
|
||||
this.modelService.edges.putEdge(edge);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public drop(event: DragEvent, targetConnector: FcConnector): boolean {
|
||||
if (this.edgeDragging.isDragging) {
|
||||
try {
|
||||
this.modelValidation.validateEdges(this.model.edges.concat([{
|
||||
source: this.draggedEdgeSource.id,
|
||||
destination: targetConnector.id
|
||||
}]), this.model.nodes);
|
||||
} catch (error) {
|
||||
if (error instanceof ModelvalidationError) {
|
||||
return true;
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isValidEdgeCallback(this.draggedEdgeSource, targetConnector)) {
|
||||
this.edgeDragging.prevEdge = null;
|
||||
this.modelService.edges._addEdge(event, this.draggedEdgeSource, targetConnector, this.edgeDragging.dragLabel);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export interface EdgeDragging {
|
||||
isDragging: boolean;
|
||||
shadowDragStarted: boolean;
|
||||
dragPoint1: FcCoords;
|
||||
dragPoint2: FcCoords;
|
||||
dragLabel?: string;
|
||||
prevEdge?: FcEdge;
|
||||
magnetActive?: boolean;
|
||||
gElement?: JQuery<Element>;
|
||||
pathElement?: JQuery<Element>;
|
||||
circleElement?: JQuery<Element>;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FcCoords, FlowchartConstants } from './ngx-flowchart.models';
|
||||
|
||||
@Injectable()
|
||||
export class FcEdgeDrawingService {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
|
||||
public getEdgeDAttribute(pt1: FcCoords, pt2: FcCoords, style: string): string {
|
||||
let dAddribute = `M ${pt1.x}, ${pt1.y} `;
|
||||
if (style === FlowchartConstants.curvedStyle) {
|
||||
const sourceTangent = this.computeEdgeSourceTangent(pt1, pt2);
|
||||
const destinationTangent = this.computeEdgeDestinationTangent(pt1, pt2);
|
||||
dAddribute += `C ${sourceTangent.x}, ${sourceTangent.y} ${(destinationTangent.x - 50)}, ${destinationTangent.y} ${pt2.x}, ${pt2.y}`;
|
||||
} else {
|
||||
dAddribute += `L ${pt2.x}, ${pt2.y}`;
|
||||
}
|
||||
return dAddribute;
|
||||
}
|
||||
|
||||
public getEdgeCenter(pt1: FcCoords, pt2: FcCoords): FcCoords {
|
||||
return {
|
||||
x: (pt1.x + pt2.x) / 2,
|
||||
y: (pt1.y + pt2.y) / 2
|
||||
};
|
||||
}
|
||||
|
||||
private computeEdgeTangentOffset(pt1: FcCoords, pt2: FcCoords): number {
|
||||
return (pt2.y - pt1.y) / 2;
|
||||
}
|
||||
|
||||
private computeEdgeSourceTangent(pt1: FcCoords, pt2: FcCoords): FcCoords {
|
||||
return {
|
||||
x: pt1.x,
|
||||
y: pt1.y + this.computeEdgeTangentOffset(pt1, pt2)
|
||||
};
|
||||
}
|
||||
|
||||
private computeEdgeDestinationTangent(pt1: FcCoords, pt2: FcCoords): FcCoords {
|
||||
return {
|
||||
x: pt2.x,
|
||||
y: pt2.y - this.computeEdgeTangentOffset(pt1, pt2)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';
|
||||
import { FcCallbacks, FcConnector, FlowchartConstants } from './ngx-flowchart.models';
|
||||
|
||||
@Directive({
|
||||
// tslint:disable-next-line:directive-selector
|
||||
selector: '[fc-magnet]'
|
||||
})
|
||||
export class FcMagnetDirective implements OnInit {
|
||||
|
||||
@Input()
|
||||
callbacks: FcCallbacks;
|
||||
|
||||
@Input()
|
||||
connector: FcConnector;
|
||||
|
||||
constructor(public elementRef: ElementRef<HTMLElement>) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
const element = $(this.elementRef.nativeElement);
|
||||
element.addClass(FlowchartConstants.magnetClass);
|
||||
}
|
||||
|
||||
@HostListener('dragover', ['$event'])
|
||||
dragover(event: DragEvent) {
|
||||
return this.callbacks.edgeDragoverMagnet(event, this.connector);
|
||||
}
|
||||
|
||||
@HostListener('dragleave', ['$event'])
|
||||
dragleave(event: DragEvent) {
|
||||
this.callbacks.edgeDragleaveMagnet(event);
|
||||
}
|
||||
|
||||
@HostListener('drop', ['$event'])
|
||||
drop(event: DragEvent) {
|
||||
return this.callbacks.edgeDrop(event, this.connector);
|
||||
}
|
||||
|
||||
@HostListener('dragend', ['$event'])
|
||||
dragend(event: DragEvent) {
|
||||
this.callbacks.edgeDragend(event);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,489 @@
|
||||
import { FcModelValidationService } from './modelvalidation.service';
|
||||
import { FcConnector, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { ChangeDetectorRef } from '@angular/core';
|
||||
|
||||
export class FcModelService {
|
||||
|
||||
modelValidation: FcModelValidationService;
|
||||
model: FcModel;
|
||||
cd: ChangeDetectorRef;
|
||||
selectedObjects: any[];
|
||||
|
||||
connectorsHtmlElements: HtmlElementMap = {};
|
||||
nodesHtmlElements: HtmlElementMap = {};
|
||||
canvasHtmlElement: HTMLElement = null;
|
||||
dragImage: HTMLImageElement = null;
|
||||
svgHtmlElement: SVGElement = null;
|
||||
|
||||
dropNode: (event: Event, node: FcNode) => void;
|
||||
createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>;
|
||||
edgeAddedCallback: (edge: FcEdge) => void;
|
||||
nodeRemovedCallback: (node: FcNode) => void;
|
||||
edgeRemovedCallback: (edge: FcEdge) => void;
|
||||
|
||||
dropTargetId: string;
|
||||
|
||||
connectors: ConnectorsModel;
|
||||
nodes: NodesModel;
|
||||
edges: EdgesModel;
|
||||
|
||||
constructor(modelValidation: FcModelValidationService,
|
||||
model: FcModel,
|
||||
cd: ChangeDetectorRef,
|
||||
selectedObjects: any[],
|
||||
dropNode: (event: Event, node: FcNode) => void,
|
||||
createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>,
|
||||
edgeAddedCallback: (edge: FcEdge) => void,
|
||||
nodeRemovedCallback: (node: FcNode) => void,
|
||||
edgeRemovedCallback: (edge: FcEdge) => void,
|
||||
canvasHtmlElement: HTMLElement,
|
||||
svgHtmlElement: SVGElement) {
|
||||
|
||||
this.modelValidation = modelValidation;
|
||||
this.model = model;
|
||||
this.cd = cd;
|
||||
this.canvasHtmlElement = canvasHtmlElement;
|
||||
this.svgHtmlElement = svgHtmlElement;
|
||||
this.modelValidation.validateModel(this.model);
|
||||
this.selectedObjects = selectedObjects;
|
||||
|
||||
this.dropNode = dropNode || (() => {});
|
||||
this.createEdge = createEdge || (() => of({label: 'label'}));
|
||||
this.edgeAddedCallback = edgeAddedCallback || (() => {});
|
||||
this.nodeRemovedCallback = nodeRemovedCallback || (() => {});
|
||||
this.edgeRemovedCallback = edgeRemovedCallback || (() => {});
|
||||
|
||||
this.connectors = new ConnectorsModel(this);
|
||||
this.nodes = new NodesModel(this);
|
||||
this.edges = new EdgesModel(this);
|
||||
}
|
||||
|
||||
public detectChanges() {
|
||||
setTimeout(() => {
|
||||
this.cd.detectChanges();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
public selectObject(object: any) {
|
||||
if (this.isEditable()) {
|
||||
if (this.selectedObjects.indexOf(object) === -1) {
|
||||
this.selectedObjects.push(object);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public deselectObject(object: any) {
|
||||
if (this.isEditable()) {
|
||||
const index = this.selectedObjects.indexOf(object);
|
||||
if (index === -1) {
|
||||
throw new Error('Tried to deselect an unselected object');
|
||||
}
|
||||
this.selectedObjects.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
public toggleSelectedObject(object: any) {
|
||||
if (this.isSelectedObject(object)) {
|
||||
this.deselectObject(object);
|
||||
} else {
|
||||
this.selectObject(object);
|
||||
}
|
||||
}
|
||||
|
||||
public isSelectedObject(object: any): boolean {
|
||||
return this.selectedObjects.indexOf(object) !== -1;
|
||||
}
|
||||
|
||||
public selectAll() {
|
||||
this.model.nodes.forEach(node => {
|
||||
if (!node.readonly) {
|
||||
this.nodes.select(node);
|
||||
}
|
||||
});
|
||||
this.model.edges.forEach(edge => {
|
||||
this.edges.select(edge);
|
||||
});
|
||||
this.detectChanges();
|
||||
}
|
||||
|
||||
public deselectAll() {
|
||||
this.selectedObjects.splice(0, this.selectedObjects.length);
|
||||
this.detectChanges();
|
||||
}
|
||||
|
||||
public isEditObject(object: any): boolean {
|
||||
return this.selectedObjects.length === 1 &&
|
||||
this.selectedObjects.indexOf(object) !== -1;
|
||||
}
|
||||
|
||||
private inRectBox(x: number, y: number, rectBox: FcRectBox): boolean {
|
||||
return x >= rectBox.left && x <= rectBox.right &&
|
||||
y >= rectBox.top && y <= rectBox.bottom;
|
||||
}
|
||||
|
||||
public getItemInfoAtPoint(x: number, y: number): FcItemInfo {
|
||||
return {
|
||||
node: this.getNodeAtPoint(x, y),
|
||||
edge: this.getEdgeAtPoint(x, y)
|
||||
};
|
||||
}
|
||||
|
||||
public getNodeAtPoint(x: number, y: number): FcNode {
|
||||
for (const node of this.model.nodes) {
|
||||
const element = this.nodes.getHtmlElement(node.id);
|
||||
const nodeElementBox = element.getBoundingClientRect();
|
||||
if (x >= nodeElementBox.left && x <= nodeElementBox.right
|
||||
&& y >= nodeElementBox.top && y <= nodeElementBox.bottom) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public getEdgeAtPoint(x: number, y: number): FcEdge {
|
||||
const element = document.elementFromPoint(x, y);
|
||||
const id = element.id;
|
||||
let edgeIndex = -1;
|
||||
if (id) {
|
||||
if (id.startsWith('fc-edge-path-')) {
|
||||
edgeIndex = Number(id.substring('fc-edge-path-'.length));
|
||||
} else if (id.startsWith('fc-edge-label-')) {
|
||||
edgeIndex = Number(id.substring('fc-edge-label-'.length));
|
||||
}
|
||||
}
|
||||
if (edgeIndex > -1) {
|
||||
return this.model.edges[edgeIndex];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public selectAllInRect(rectBox: FcRectBox) {
|
||||
this.model.nodes.forEach((value) => {
|
||||
const element = this.nodes.getHtmlElement(value.id);
|
||||
const nodeElementBox = element.getBoundingClientRect();
|
||||
if (!value.readonly) {
|
||||
const x = nodeElementBox.left + nodeElementBox.width / 2;
|
||||
const y = nodeElementBox.top + nodeElementBox.height / 2;
|
||||
if (this.inRectBox(x, y, rectBox)) {
|
||||
this.nodes.select(value);
|
||||
} else {
|
||||
if (this.nodes.isSelected(value)) {
|
||||
this.nodes.deselect(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
const canvasElementBox = this.canvasHtmlElement.getBoundingClientRect();
|
||||
this.model.edges.forEach((value) => {
|
||||
const start = this.edges.sourceCoord(value);
|
||||
const end = this.edges.destCoord(value);
|
||||
const x = (start.x + end.x) / 2 + canvasElementBox.left;
|
||||
const y = (start.y + end.y) / 2 + canvasElementBox.top;
|
||||
if (this.inRectBox(x, y, rectBox)) {
|
||||
this.edges.select(value);
|
||||
} else {
|
||||
if (this.edges.isSelected(value)) {
|
||||
this.edges.deselect(value);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public deleteSelected() {
|
||||
const edgesToDelete = this.edges.getSelectedEdges();
|
||||
edgesToDelete.forEach((edge) => {
|
||||
this.edges.delete(edge);
|
||||
});
|
||||
const nodesToDelete = this.nodes.getSelectedNodes();
|
||||
nodesToDelete.forEach((node) => {
|
||||
this.nodes.delete(node);
|
||||
});
|
||||
}
|
||||
|
||||
public isEditable(): boolean {
|
||||
return this.dropTargetId === undefined;
|
||||
}
|
||||
|
||||
public isDropSource(): boolean {
|
||||
return this.dropTargetId !== undefined;
|
||||
}
|
||||
|
||||
public getDragImage(): HTMLImageElement {
|
||||
if (!this.dragImage) {
|
||||
this.dragImage = new Image();
|
||||
this.dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||||
this.dragImage.style.visibility = 'hidden';
|
||||
}
|
||||
return this.dragImage;
|
||||
}
|
||||
|
||||
public registerCallbacks(edgeAddedCallback: (edge: FcEdge) => void,
|
||||
nodeRemovedCallback: (node: FcNode) => void,
|
||||
edgeRemovedCallback: (edge: FcEdge) => void) {
|
||||
this.edgeAddedCallback = edgeAddedCallback;
|
||||
this.nodeRemovedCallback = nodeRemovedCallback;
|
||||
this.edgeRemovedCallback = edgeRemovedCallback;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
interface HtmlElementMap { [id: string]: HTMLElement; }
|
||||
|
||||
abstract class AbstractFcModel<T> {
|
||||
|
||||
modelService: FcModelService;
|
||||
|
||||
protected constructor(modelService: FcModelService) {
|
||||
this.modelService = modelService;
|
||||
}
|
||||
|
||||
public select(object: T) {
|
||||
this.modelService.selectObject(object);
|
||||
}
|
||||
|
||||
public deselect(object: T) {
|
||||
this.modelService.deselectObject(object);
|
||||
}
|
||||
|
||||
public toggleSelected(object: T) {
|
||||
this.modelService.toggleSelectedObject(object);
|
||||
}
|
||||
|
||||
public isSelected(object: T): boolean {
|
||||
return this.modelService.isSelectedObject(object);
|
||||
}
|
||||
|
||||
public isEdit(object: T): boolean {
|
||||
return this.modelService.isEditObject(object);
|
||||
}
|
||||
}
|
||||
|
||||
class ConnectorsModel extends AbstractFcModel<FcConnector> {
|
||||
|
||||
constructor(modelService: FcModelService) {
|
||||
super(modelService);
|
||||
}
|
||||
|
||||
public getConnector(connectorId: string): FcConnector {
|
||||
const model = this.modelService.model;
|
||||
for (const node of model.nodes) {
|
||||
for (const connector of node.connectors) {
|
||||
if (connector.id === connectorId) {
|
||||
return connector;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public getHtmlElement(connectorId: string): HTMLElement {
|
||||
return this.modelService.connectorsHtmlElements[connectorId];
|
||||
}
|
||||
|
||||
public setHtmlElement(connectorId: string, element: HTMLElement) {
|
||||
this.modelService.connectorsHtmlElements[connectorId] = element;
|
||||
this.modelService.detectChanges();
|
||||
}
|
||||
|
||||
private _getCoords(connectorId: string, centered?: boolean): FcCoords {
|
||||
const element = this.getHtmlElement(connectorId);
|
||||
const canvas = this.modelService.canvasHtmlElement;
|
||||
if (element === null || element === undefined || canvas === null) {
|
||||
return {x: 0, y: 0};
|
||||
}
|
||||
const connectorElementBox = element.getBoundingClientRect();
|
||||
const canvasElementBox = canvas.getBoundingClientRect();
|
||||
let coords: FcCoords = {
|
||||
x: connectorElementBox.left - canvasElementBox.left,
|
||||
y: connectorElementBox.top - canvasElementBox.top
|
||||
};
|
||||
if (centered) {
|
||||
coords = {
|
||||
x: Math.round(coords.x + element.offsetWidth / 2),
|
||||
y: Math.round(coords.y + element.offsetHeight / 2)
|
||||
};
|
||||
}
|
||||
return coords;
|
||||
}
|
||||
|
||||
public getCoords(connectorId: string): FcCoords {
|
||||
return this._getCoords(connectorId, false);
|
||||
}
|
||||
|
||||
public getCenteredCoord(connectorId: string): FcCoords {
|
||||
return this._getCoords(connectorId, true);
|
||||
}
|
||||
}
|
||||
|
||||
class NodesModel extends AbstractFcModel<FcNode> {
|
||||
|
||||
constructor(modelService: FcModelService) {
|
||||
super(modelService);
|
||||
}
|
||||
|
||||
public getConnectorsByType(node: FcNode, type: string): Array<FcConnector> {
|
||||
return node.connectors.filter((connector) => {
|
||||
return connector.type === type;
|
||||
});
|
||||
}
|
||||
|
||||
private _addConnector(node: FcNode, connector: FcConnector) {
|
||||
node.connectors.push(connector);
|
||||
try {
|
||||
this.modelService.modelValidation.validateNode(node);
|
||||
} catch (error) {
|
||||
node.connectors.splice(node.connectors.indexOf(connector), 1);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public delete(node: FcNode) {
|
||||
if (this.isSelected(node)) {
|
||||
this.deselect(node);
|
||||
}
|
||||
const model = this.modelService.model;
|
||||
const index = model.nodes.indexOf(node);
|
||||
if (index === -1) {
|
||||
if (node === undefined) {
|
||||
throw new Error('Passed undefined');
|
||||
}
|
||||
throw new Error('Tried to delete not existing node');
|
||||
}
|
||||
const connectorIds = this.getConnectorIds(node);
|
||||
for (let i = 0; i < model.edges.length; i++) {
|
||||
const edge = model.edges[i];
|
||||
if (connectorIds.indexOf(edge.source) !== -1 || connectorIds.indexOf(edge.destination) !== -1) {
|
||||
this.modelService.edges.delete(edge);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
model.nodes.splice(index, 1);
|
||||
this.modelService.nodeRemovedCallback(node);
|
||||
}
|
||||
|
||||
public getSelectedNodes(): Array<FcNode> {
|
||||
const model = this.modelService.model;
|
||||
return model.nodes.filter((node) => {
|
||||
return this.modelService.nodes.isSelected(node);
|
||||
});
|
||||
}
|
||||
|
||||
public handleClicked(node: FcNode, ctrlKey?: boolean) {
|
||||
if (ctrlKey) {
|
||||
this.modelService.nodes.toggleSelected(node);
|
||||
} else {
|
||||
this.modelService.deselectAll();
|
||||
this.modelService.nodes.select(node);
|
||||
}
|
||||
}
|
||||
|
||||
private _addNode(node: FcNode) {
|
||||
const model = this.modelService.model;
|
||||
try {
|
||||
model.nodes.push(node);
|
||||
this.modelService.modelValidation.validateNodes(model.nodes);
|
||||
} catch (error) {
|
||||
model.nodes.splice(model.nodes.indexOf(node), 1);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
public getConnectorIds(node: FcNode): Array<string> {
|
||||
return node.connectors.map((connector) => {
|
||||
return connector.id;
|
||||
});
|
||||
}
|
||||
|
||||
public getNodeByConnectorId(connectorId: string): FcNode {
|
||||
const model = this.modelService.model;
|
||||
for (const node of model.nodes) {
|
||||
const connectorIds = this.getConnectorIds(node);
|
||||
if (connectorIds.indexOf(connectorId) > -1) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
public getHtmlElement(nodeId: string): HTMLElement {
|
||||
return this.modelService.nodesHtmlElements[nodeId];
|
||||
}
|
||||
|
||||
public setHtmlElement(nodeId: string, element: HTMLElement) {
|
||||
this.modelService.nodesHtmlElements[nodeId] = element;
|
||||
this.modelService.detectChanges();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class EdgesModel extends AbstractFcModel<FcEdge> {
|
||||
|
||||
constructor(modelService: FcModelService) {
|
||||
super(modelService);
|
||||
}
|
||||
|
||||
public ready(edge: FcEdge): boolean {
|
||||
const source = this.modelService.connectors.getHtmlElement(edge.source);
|
||||
const destination = this.modelService.connectors.getHtmlElement(edge.destination);
|
||||
return source !== undefined && destination !== undefined;
|
||||
}
|
||||
|
||||
public sourceCoord(edge: FcEdge): FcCoords {
|
||||
return this.modelService.connectors.getCenteredCoord(edge.source);
|
||||
}
|
||||
|
||||
public destCoord(edge: FcEdge): FcCoords {
|
||||
return this.modelService.connectors.getCenteredCoord(edge.destination);
|
||||
}
|
||||
|
||||
public delete(edge: FcEdge) {
|
||||
const model = this.modelService.model;
|
||||
const index = model.edges.indexOf(edge);
|
||||
if (index === -1) {
|
||||
throw new Error('Tried to delete not existing edge');
|
||||
}
|
||||
if (this.isSelected(edge)) {
|
||||
this.deselect(edge);
|
||||
}
|
||||
model.edges.splice(index, 1);
|
||||
this.modelService.edgeRemovedCallback(edge);
|
||||
}
|
||||
|
||||
public getSelectedEdges(): Array<FcEdge> {
|
||||
const model = this.modelService.model;
|
||||
return model.edges.filter((edge) => {
|
||||
return this.modelService.edges.isSelected(edge);
|
||||
});
|
||||
}
|
||||
|
||||
public handleEdgeMouseClick(edge: FcEdge, ctrlKey?: boolean) {
|
||||
if (ctrlKey) {
|
||||
this.modelService.edges.toggleSelected(edge);
|
||||
} else {
|
||||
this.modelService.deselectAll();
|
||||
this.modelService.edges.select(edge);
|
||||
}
|
||||
}
|
||||
|
||||
public putEdge(edge: FcEdge) {
|
||||
const model = this.modelService.model;
|
||||
model.edges.push(edge);
|
||||
}
|
||||
|
||||
public _addEdge(event: Event, sourceConnector: FcConnector, destConnector: FcConnector, label: string) {
|
||||
this.modelService.modelValidation.validateConnector(sourceConnector);
|
||||
this.modelService.modelValidation.validateConnector(destConnector);
|
||||
const edge: FcEdge = {};
|
||||
edge.source = sourceConnector.id;
|
||||
edge.destination = destConnector.id;
|
||||
edge.label = label;
|
||||
const model = this.modelService.model;
|
||||
this.modelService.modelValidation.validateEdges(model.edges.concat([edge]), model.nodes);
|
||||
this.modelService.createEdge(event, edge).subscribe(
|
||||
(created) => {
|
||||
model.edges.push(created);
|
||||
this.modelService.edgeAddedCallback(created);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { FcConnector, FcEdge, FcModel, FcNode, fcTopSort, ModelvalidationError } from './ngx-flowchart.models';
|
||||
|
||||
@Injectable()
|
||||
export class FcModelValidationService {
|
||||
|
||||
constructor() { }
|
||||
|
||||
public validateModel(model: FcModel): FcModel {
|
||||
this.validateNodes(model.nodes);
|
||||
this._validateEdges(model.edges, model.nodes);
|
||||
return model;
|
||||
}
|
||||
|
||||
public validateNodes(nodes: Array<FcNode>): Array<FcNode> {
|
||||
const ids: string[] = [];
|
||||
nodes.forEach((node) => {
|
||||
this.validateNode(node);
|
||||
if (ids.indexOf(node.id) !== -1) {
|
||||
throw new ModelvalidationError('Id not unique.');
|
||||
}
|
||||
ids.push(node.id);
|
||||
});
|
||||
const connectorIds: string[] = [];
|
||||
nodes.forEach((node) => {
|
||||
node.connectors.forEach((connector) => {
|
||||
if (connectorIds.indexOf(connector.id) !== -1) {
|
||||
throw new ModelvalidationError('Id not unique.');
|
||||
}
|
||||
connectorIds.push(connector.id);
|
||||
});
|
||||
});
|
||||
return nodes;
|
||||
}
|
||||
|
||||
public validateNode(node: FcNode): FcNode {
|
||||
if (node.id === undefined) {
|
||||
throw new ModelvalidationError('Id not valid.');
|
||||
}
|
||||
if (typeof node.name !== 'string') {
|
||||
throw new ModelvalidationError('Name not valid.');
|
||||
}
|
||||
if (typeof node.x !== 'number' || node.x < 0 || Math.round(node.x) !== node.x) {
|
||||
throw new ModelvalidationError('Coordinates not valid.');
|
||||
}
|
||||
if (typeof node.y !== 'number' || node.y < 0 || Math.round(node.y) !== node.y) {
|
||||
throw new ModelvalidationError('Coordinates not valid.');
|
||||
}
|
||||
if (!Array.isArray(node.connectors)) {
|
||||
throw new ModelvalidationError('Connectors not valid.');
|
||||
}
|
||||
node.connectors.forEach((connector) => {
|
||||
this.validateConnector(connector);
|
||||
});
|
||||
return node;
|
||||
}
|
||||
|
||||
private _validateEdges(edges: Array<FcEdge>, nodes: Array<FcNode>): Array<FcEdge> {
|
||||
edges.forEach((edge) => {
|
||||
this._validateEdge(edge, nodes);
|
||||
});
|
||||
edges.forEach((edge1, index1) => {
|
||||
edges.forEach((edge2, index2) => {
|
||||
if (index1 !== index2) {
|
||||
if ((edge1.source === edge2.source && edge1.destination === edge2.destination) ||
|
||||
(edge1.source === edge2.destination && edge1.destination === edge2.source)) {
|
||||
throw new ModelvalidationError('Duplicated edge.');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
if (fcTopSort({nodes, edges}) === null) {
|
||||
throw new ModelvalidationError('Graph has a circle.');
|
||||
}
|
||||
return edges;
|
||||
}
|
||||
|
||||
public validateEdges(edges: Array<FcEdge>, nodes: Array<FcNode>): Array<FcEdge> {
|
||||
this.validateNodes(nodes);
|
||||
return this._validateEdges(edges, nodes);
|
||||
}
|
||||
|
||||
private _validateEdge(edge: FcEdge, nodes: Array<FcNode>): FcEdge {
|
||||
if (edge.source === undefined) {
|
||||
throw new ModelvalidationError('Source not valid.');
|
||||
}
|
||||
if (edge.destination === undefined) {
|
||||
throw new ModelvalidationError('Destination not valid.');
|
||||
}
|
||||
if (edge.source === edge.destination) {
|
||||
throw new ModelvalidationError('Edge with same source and destination connectors.');
|
||||
}
|
||||
const sourceNode = nodes.filter((node) => node.connectors.some((connector) => connector.id === edge.source))[0];
|
||||
if (sourceNode === undefined) {
|
||||
throw new ModelvalidationError('Source not valid.');
|
||||
}
|
||||
const destinationNode = nodes.filter((node) => node.connectors.some((connector) => connector.id === edge.destination))[0];
|
||||
if (destinationNode === undefined) {
|
||||
throw new ModelvalidationError('Destination not valid.');
|
||||
}
|
||||
if (sourceNode === destinationNode) {
|
||||
throw new ModelvalidationError('Edge with same source and destination nodes.');
|
||||
}
|
||||
return edge;
|
||||
}
|
||||
|
||||
public validateEdge(edge: FcEdge, nodes: Array<FcNode>): FcEdge {
|
||||
this.validateNodes(nodes);
|
||||
return this._validateEdge(edge, nodes);
|
||||
}
|
||||
|
||||
public validateConnector(connector: FcConnector): FcConnector {
|
||||
if (connector.id === undefined) {
|
||||
throw new ModelvalidationError('Id not valid.');
|
||||
}
|
||||
if (connector.type === undefined || connector.type === null || typeof connector.type !== 'string') {
|
||||
throw new ModelvalidationError('Type not valid.');
|
||||
}
|
||||
return connector;
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import { FcConnector, FcEdge, FcNode } from './ngx-flowchart.models';
|
||||
|
||||
export class FcMouseOverService {
|
||||
|
||||
mouseoverscope: MouseOverScope = {
|
||||
connector: null,
|
||||
edge: null,
|
||||
node: null
|
||||
};
|
||||
|
||||
private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
|
||||
|
||||
constructor(applyFunction: <T>(fn: (...args: any[]) => T) => T) {
|
||||
this.applyFunction = applyFunction;
|
||||
}
|
||||
|
||||
public nodeMouseOver(event: MouseEvent, node: FcNode) {
|
||||
return this.applyFunction(() => {
|
||||
this.mouseoverscope.node = node;
|
||||
});
|
||||
}
|
||||
|
||||
public nodeMouseOut(event: MouseEvent, node: FcNode) {
|
||||
return this.applyFunction(() => {
|
||||
this.mouseoverscope.node = null;
|
||||
});
|
||||
}
|
||||
|
||||
public connectorMouseEnter(event: MouseEvent, connector: FcConnector) {
|
||||
return this.applyFunction(() => {
|
||||
this.mouseoverscope.connector = connector;
|
||||
});
|
||||
}
|
||||
|
||||
public connectorMouseLeave(event: MouseEvent, connector: FcConnector) {
|
||||
return this.applyFunction(() => {
|
||||
this.mouseoverscope.connector = null;
|
||||
});
|
||||
}
|
||||
|
||||
public edgeMouseEnter(event: MouseEvent, edge: FcEdge) {
|
||||
this.mouseoverscope.edge = edge;
|
||||
}
|
||||
|
||||
public edgeMouseLeave(event: MouseEvent, edge: FcEdge) {
|
||||
this.mouseoverscope.edge = null;
|
||||
}
|
||||
}
|
||||
|
||||
export interface MouseOverScope {
|
||||
connector: FcConnector;
|
||||
edge: FcEdge;
|
||||
node: FcNode;
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
<div (click)="canvasClick($event)" class="fc-canvas-container">
|
||||
<svg class="fc-canvas-svg">
|
||||
<defs>
|
||||
<marker class="fc-arrow-marker" [attr.id]="arrowDefId" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
|
||||
<polygon points="-2,0 -5,5 5,0 -5,-5" stroke="gray" fill="gray" stroke-width="1px"/>
|
||||
</marker>
|
||||
<marker class="fc-arrow-marker-selected" [attr.id]="arrowDefIdSelected" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
|
||||
<polygon points="-2,0 -5,5 5,0 -5,-5" stroke="red" fill="red" stroke-width="1px"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<g *ngFor="let edge of model.edges; let $index = index">
|
||||
<path
|
||||
[attr.id]="'fc-edge-path-'+$index"
|
||||
(mousedown)="edgeMouseDown($event, edge)"
|
||||
(click)="edgeClick($event, edge)"
|
||||
(dblclick)="edgeDoubleClick($event, edge)"
|
||||
(mouseover)="edgeMouseOver($event, edge)"
|
||||
(mouseenter)="edgeMouseEnter($event, edge)"
|
||||
(mouseleave)="edgeMouseLeave($event, edge)"
|
||||
[attr.class]="(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||
|
||||
edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||
|
||||
edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||
|
||||
flowchartConstants.edgeClass"
|
||||
[attr.d]="getEdgeDAttribute(edge)"
|
||||
[attr.marker-end]="'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'">
|
||||
</path>
|
||||
</g>
|
||||
<g *ngIf="dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging">
|
||||
<path [attr.class]="flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass"
|
||||
[attr.d]="edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)"></path>
|
||||
<circle class="edge-endpoint" r="4"
|
||||
[attr.cx]="edgeDraggingService.edgeDragging.dragPoint2.x"
|
||||
[attr.cy]="edgeDraggingService.edgeDragging.dragPoint2.y">
|
||||
</circle>
|
||||
</g>
|
||||
<g *ngIf="dragAnimation === flowchartConstants.dragAnimationShadow"
|
||||
class="shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}"
|
||||
style="display:none">
|
||||
<path d=""></path>
|
||||
<circle class="edge-endpoint" r="4"></circle>
|
||||
</g>
|
||||
</svg>
|
||||
<ng-container *ngFor="let node of model.nodes">
|
||||
<fc-node
|
||||
[selected]="modelService.nodes.isSelected(node)"
|
||||
[edit]="modelService.nodes.isEdit(node)"
|
||||
[underMouse]="node === mouseoverService.mouseoverscope.node"
|
||||
[node]="node"
|
||||
[mouseOverConnector]="mouseoverService.mouseoverscope.connector"
|
||||
[modelservice]="modelService"
|
||||
[dragging]="nodeDraggingService.isDraggingNode(node)"
|
||||
[callbacks]="callbacks"
|
||||
[userNodeCallbacks]="userNodeCallbacks">
|
||||
</fc-node>
|
||||
</ng-container>
|
||||
<div *ngIf="dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging"
|
||||
[attr.class]="'fc-noselect ' + flowchartConstants.edgeLabelClass"
|
||||
[ngStyle]="{
|
||||
top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',
|
||||
left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'
|
||||
}">
|
||||
<div class="fc-edge-label-text">
|
||||
<span [attr.id]="'fc-edge-label-dragging'" *ngIf="edgeDraggingService.edgeDragging.dragLabel">{{edgeDraggingService.edgeDragging.dragLabel}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
(mousedown)="edgeMouseDown($event, edge)"
|
||||
(click)="edgeClick($event, edge)"
|
||||
(dblclick)="edgeDoubleClick($event, edge)"
|
||||
(mouseover)="edgeMouseOver($event, edge)"
|
||||
(mouseenter)="edgeMouseEnter($event, edge)"
|
||||
(mouseleave)="edgeMouseLeave($event, edge)"
|
||||
[attr.class]="'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||
|
||||
(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||
|
||||
edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||
|
||||
edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||
|
||||
flowchartConstants.edgeLabelClass)"
|
||||
[ngStyle]="{
|
||||
top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',
|
||||
left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'
|
||||
}"
|
||||
*ngFor="let edge of model.edges; let $index = index">
|
||||
<div class="fc-edge-label-text">
|
||||
<div *ngIf="modelService.isEditable()" class="fc-noselect fc-nodeedit" (click)="edgeEdit($event, edge)">
|
||||
<i class="fa fa-pencil" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div *ngIf="modelService.isEditable()" class="fc-noselect fc-nodedelete" (click)="edgeRemove($event, edge)">
|
||||
×
|
||||
</div>
|
||||
<span [attr.id]="'fc-edge-label-'+$index" *ngIf="edge.label">{{edge.label}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="select-rectangle" class="fc-select-rectangle" hidden>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,182 @@
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 25px 25px;
|
||||
background-image: linear-gradient(to right, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .1) 1px, transparent 1px);
|
||||
background-color: transparent;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
.fc-canvas-container {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
svg.fc-canvas-svg {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-edge {
|
||||
stroke: gray;
|
||||
stroke-width: 4;
|
||||
transition: stroke-width .2s;
|
||||
fill: transparent;
|
||||
&.fc-hover {
|
||||
stroke: gray;
|
||||
stroke-width: 6;
|
||||
fill: transparent;
|
||||
}
|
||||
&.fc-selected {
|
||||
stroke: red;
|
||||
stroke-width: 4;
|
||||
fill: transparent;
|
||||
}
|
||||
&.fc-active {
|
||||
animation: dash 3s linear infinite;
|
||||
stroke-dasharray: 20;
|
||||
}
|
||||
&.fc-dragging {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-arrow-marker polygon {
|
||||
stroke: gray;
|
||||
fill: gray;
|
||||
}
|
||||
|
||||
.fc-arrow-marker-selected polygon {
|
||||
stroke: red;
|
||||
fill: red;
|
||||
}
|
||||
|
||||
.edge-endpoint {
|
||||
fill: gray;
|
||||
}
|
||||
|
||||
.fc-noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome and Opera */
|
||||
}
|
||||
|
||||
.fc-edge-label {
|
||||
position: absolute;
|
||||
opacity: 0.8;
|
||||
transition: transform .2s;
|
||||
transform-origin: bottom left;
|
||||
margin: 0 auto;
|
||||
.fc-edge-label-text {
|
||||
position: absolute;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
span {
|
||||
cursor: default;
|
||||
border: solid #ff3d00;
|
||||
border-radius: 10px;
|
||||
color: #ff3d00;
|
||||
background-color: #fff;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
}
|
||||
.fc-nodeedit {
|
||||
top: -30px;
|
||||
right: 14px;
|
||||
}
|
||||
.fc-nodedelete {
|
||||
top: -30px;
|
||||
right: -13px;
|
||||
}
|
||||
&.fc-hover {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
&.fc-selected,
|
||||
&.fc-edit {
|
||||
.fc-edge-label-text {
|
||||
span {
|
||||
border: solid red;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
background-color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-select-rectangle {
|
||||
border: 2px dashed #5262ff;
|
||||
position: absolute;
|
||||
background: rgba(20,125,255,0.1);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
from {
|
||||
stroke-dashoffset: 500;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep {
|
||||
|
||||
.fc-nodeedit {
|
||||
display: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.fc-nodedelete {
|
||||
display: none;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.fc-edit {
|
||||
.fc-nodeedit,
|
||||
.fc-nodedelete {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: solid 2px #eee;
|
||||
|
||||
border-radius: 50%;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
|
||||
height: 20px;
|
||||
padding-top: 2px;
|
||||
width: 22px;
|
||||
|
||||
background: #494949;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
.fc-nodeedit {
|
||||
top: -24px;
|
||||
right: 16px;
|
||||
}
|
||||
.fc-nodedelete {
|
||||
top: -24px;
|
||||
right: -13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NgxFlowchartComponent } from './ngx-flowchart.component';
|
||||
|
||||
describe('NgxFlowchartComponent', () => {
|
||||
let component: NgxFlowchartComponent;
|
||||
let fixture: ComponentFixture<NgxFlowchartComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ NgxFlowchartComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NgxFlowchartComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,19 +1,294 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {
|
||||
ChangeDetectionStrategy, ChangeDetectorRef,
|
||||
Component,
|
||||
DoCheck,
|
||||
ElementRef,
|
||||
HostBinding,
|
||||
HostListener,
|
||||
Input,
|
||||
IterableDiffer,
|
||||
IterableDiffers,
|
||||
NgZone,
|
||||
OnInit
|
||||
} from '@angular/core';
|
||||
import { FcCallbacks, FcEdge, FcModel, FcNode, FlowchartConstants, UserCallbacks, UserNodeCallbacks } from './ngx-flowchart.models';
|
||||
import { FcModelService } from './model.service';
|
||||
import { FcModelValidationService } from './modelvalidation.service';
|
||||
import { FcNodeDraggingService } from './node-dragging.service';
|
||||
import { FcEdgeDrawingService } from './edge-drawing.service';
|
||||
import { FcEdgeDraggingService } from './edge-dragging.service';
|
||||
import { FcMouseOverService } from './mouseover.service';
|
||||
import { FcRectangleSelectService } from './rectangleselect.service';
|
||||
|
||||
@Component({
|
||||
selector: 'fc-canvas',
|
||||
template: `
|
||||
<p>
|
||||
ngx-flowchart works!
|
||||
</p>
|
||||
`,
|
||||
styles: []
|
||||
templateUrl: './ngx-flowchart.component.html',
|
||||
styleUrls: ['./ngx-flowchart.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class NgxFlowchartComponent implements OnInit {
|
||||
export class NgxFlowchartComponent implements OnInit, DoCheck {
|
||||
|
||||
constructor() { }
|
||||
@HostBinding('attr.class')
|
||||
get canvasClass(): string {
|
||||
return FlowchartConstants.canvasClass;
|
||||
}
|
||||
|
||||
@Input()
|
||||
model: FcModel;
|
||||
|
||||
@Input()
|
||||
selectedObjects: any[];
|
||||
|
||||
@Input()
|
||||
edgeStyle: string;
|
||||
|
||||
@Input()
|
||||
userCallbacks: UserCallbacks;
|
||||
|
||||
@Input()
|
||||
automaticResize: boolean;
|
||||
|
||||
@Input()
|
||||
dragAnimation: string;
|
||||
|
||||
@Input()
|
||||
nodeWidth: number;
|
||||
|
||||
@Input()
|
||||
nodeHeight: number;
|
||||
|
||||
@Input()
|
||||
dropTargetId: string;
|
||||
|
||||
callbacks: FcCallbacks;
|
||||
|
||||
userNodeCallbacks: UserNodeCallbacks;
|
||||
|
||||
modelService: FcModelService;
|
||||
nodeDraggingService: FcNodeDraggingService;
|
||||
edgeDraggingService: FcEdgeDraggingService;
|
||||
mouseoverService: FcMouseOverService;
|
||||
rectangleSelectService: FcRectangleSelectService;
|
||||
|
||||
arrowDefId: string;
|
||||
arrowDefIdSelected: string;
|
||||
|
||||
flowchartConstants = FlowchartConstants;
|
||||
|
||||
private nodesDiffer: IterableDiffer<FcNode> = this.differs.find([]).create<FcNode>((index, item) => {
|
||||
return item;
|
||||
});
|
||||
|
||||
private edgesDiffer: IterableDiffer<FcEdge> = this.differs.find([]).create<FcEdge>((index, item) => {
|
||||
return item;
|
||||
});
|
||||
|
||||
constructor(private elementRef: ElementRef<HTMLElement>,
|
||||
private differs: IterableDiffers,
|
||||
private modelValidation: FcModelValidationService,
|
||||
public edgeDrawingService: FcEdgeDrawingService,
|
||||
private cd: ChangeDetectorRef,
|
||||
private zone: NgZone) {
|
||||
this.arrowDefId = 'arrow-' + Math.random();
|
||||
this.arrowDefIdSelected = this.arrowDefId + '-selected';
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
if (!this.dropTargetId && this.edgeStyle !== FlowchartConstants.curvedStyle && this.edgeStyle !== FlowchartConstants.lineStyle) {
|
||||
throw new Error('edgeStyle not supported.');
|
||||
}
|
||||
this.nodeHeight = this.nodeHeight || 200;
|
||||
this.nodeWidth = this.nodeWidth || 200;
|
||||
this.dragAnimation = this.dragAnimation || FlowchartConstants.dragAnimationRepaint;
|
||||
this.userCallbacks = this.userCallbacks || {};
|
||||
this.automaticResize = this.automaticResize || false;
|
||||
|
||||
for (const key of Object.keys(this.userCallbacks)) {
|
||||
const callback = this.userCallbacks[key];
|
||||
if (typeof callback !== 'function' && key !== 'nodeCallbacks') {
|
||||
throw new Error('All callbacks should be functions.');
|
||||
}
|
||||
}
|
||||
|
||||
this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
|
||||
|
||||
const element = $(this.elementRef.nativeElement);
|
||||
|
||||
this.modelService = new FcModelService(this.modelValidation, this.model, this.cd, this.selectedObjects,
|
||||
this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved,
|
||||
this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
|
||||
|
||||
if (this.dropTargetId) {
|
||||
this.modelService.dropTargetId = this.dropTargetId;
|
||||
}
|
||||
|
||||
const applyFunction = this.zone.run.bind(this.zone);
|
||||
|
||||
this.nodeDraggingService = new FcNodeDraggingService(this.modelService, applyFunction,
|
||||
this.automaticResize, this.dragAnimation);
|
||||
|
||||
this.edgeDraggingService = new FcEdgeDraggingService(this.modelValidation, this.edgeDrawingService, this.modelService,
|
||||
this.model, this.userCallbacks.isValidEdge || null, applyFunction,
|
||||
this.dragAnimation, this.edgeStyle);
|
||||
|
||||
this.mouseoverService = new FcMouseOverService(applyFunction);
|
||||
|
||||
this.rectangleSelectService = new FcRectangleSelectService(this.modelService,
|
||||
element[0].querySelector('#select-rectangle'), applyFunction);
|
||||
|
||||
this.callbacks = {
|
||||
nodeDragstart: this.nodeDraggingService.dragstart.bind(this.nodeDraggingService),
|
||||
nodeDragend: this.nodeDraggingService.dragend.bind(this.nodeDraggingService),
|
||||
edgeDragstart: this.edgeDraggingService.dragstart.bind(this.edgeDraggingService),
|
||||
edgeDragend: this.edgeDraggingService.dragend.bind(this.edgeDraggingService),
|
||||
edgeDrop: this.edgeDraggingService.drop.bind(this.edgeDraggingService),
|
||||
edgeDragoverConnector: this.edgeDraggingService.dragoverConnector.bind(this.edgeDraggingService),
|
||||
edgeDragoverMagnet: this.edgeDraggingService.dragoverMagnet.bind(this.edgeDraggingService),
|
||||
edgeDragleaveMagnet: this.edgeDraggingService.dragleaveMagnet.bind(this.edgeDraggingService),
|
||||
nodeMouseOver: this.mouseoverService.nodeMouseOver.bind(this.mouseoverService),
|
||||
nodeMouseOut: this.mouseoverService.nodeMouseOut.bind(this.mouseoverService),
|
||||
connectorMouseEnter: this.mouseoverService.connectorMouseEnter.bind(this.mouseoverService),
|
||||
connectorMouseLeave: this.mouseoverService.connectorMouseLeave.bind(this.mouseoverService),
|
||||
nodeClicked: (event, node) => {
|
||||
this.modelService.nodes.handleClicked(node, event.ctrlKey);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
this.adjustCanvasSize(true);
|
||||
}
|
||||
|
||||
ngDoCheck(): void {
|
||||
if (this.model) {
|
||||
const nodesChange = this.nodesDiffer.diff(this.model.nodes);
|
||||
const edgesChange = this.edgesDiffer.diff(this.model.edges);
|
||||
let nodesChanged = false;
|
||||
let edgesChanged = false;
|
||||
if (nodesChange !== null) {
|
||||
nodesChange.forEachAddedItem(() => {
|
||||
nodesChanged = true;
|
||||
});
|
||||
nodesChange.forEachRemovedItem(() => {
|
||||
nodesChanged = true;
|
||||
});
|
||||
}
|
||||
if (edgesChange !== null) {
|
||||
edgesChange.forEachAddedItem(() => {
|
||||
edgesChanged = true;
|
||||
});
|
||||
edgesChange.forEachRemovedItem(() => {
|
||||
edgesChanged = true;
|
||||
});
|
||||
}
|
||||
if (nodesChanged) {
|
||||
this.adjustCanvasSize(true);
|
||||
}
|
||||
if (nodesChanged || edgesChanged) {
|
||||
this.cd.detectChanges();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getEdgeDAttribute(edge: FcEdge): string {
|
||||
return this.edgeDrawingService.getEdgeDAttribute(this.modelService.edges.sourceCoord(edge),
|
||||
this.modelService.edges.destCoord(edge), this.edgeStyle);
|
||||
}
|
||||
|
||||
public adjustCanvasSize(fit?: boolean) {
|
||||
let maxX = 0;
|
||||
let maxY = 0;
|
||||
const element = $(this.elementRef.nativeElement);
|
||||
this.model.nodes.forEach((node) => {
|
||||
maxX = Math.max(node.x + this.nodeWidth, maxX);
|
||||
maxY = Math.max(node.y + this.nodeHeight, maxY);
|
||||
});
|
||||
let width;
|
||||
let height;
|
||||
if (fit) {
|
||||
width = maxX;
|
||||
height = maxY;
|
||||
} else {
|
||||
width = Math.max(maxX, element.prop('offsetWidth'));
|
||||
height = Math.max(maxY, element.prop('offsetHeight'));
|
||||
}
|
||||
element.css('width', width + 'px');
|
||||
element.css('height', height + 'px');
|
||||
}
|
||||
|
||||
canvasClick(event: MouseEvent) {}
|
||||
|
||||
edgeMouseDown(event: MouseEvent, edge: FcEdge) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
edgeClick(event: MouseEvent, edge: FcEdge) {
|
||||
this.modelService.edges.handleEdgeMouseClick(edge, event.ctrlKey);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
edgeRemove(event: Event, edge: FcEdge) {
|
||||
this.modelService.edges.delete(edge);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
edgeEdit(event: Event, edge: FcEdge) {
|
||||
if (this.userCallbacks.edgeEdit) {
|
||||
this.userCallbacks.edgeEdit(event, edge);
|
||||
}
|
||||
}
|
||||
|
||||
edgeDoubleClick(event: MouseEvent, edge: FcEdge) {
|
||||
if (this.userCallbacks.edgeDoubleClick) {
|
||||
this.userCallbacks.edgeDoubleClick(event, edge);
|
||||
}
|
||||
}
|
||||
|
||||
edgeMouseOver(event: MouseEvent, edge: FcEdge) {
|
||||
if (this.userCallbacks.edgeMouseOver) {
|
||||
this.userCallbacks.edgeMouseOver(event, edge);
|
||||
}
|
||||
}
|
||||
|
||||
edgeMouseEnter(event: MouseEvent, edge: FcEdge) {
|
||||
this.mouseoverService.edgeMouseEnter(event, edge);
|
||||
}
|
||||
|
||||
edgeMouseLeave(event: MouseEvent, edge: FcEdge) {
|
||||
this.mouseoverService.edgeMouseLeave(event, edge);
|
||||
}
|
||||
|
||||
@HostListener('dragover', ['$event'])
|
||||
dragover(event: DragEvent) {
|
||||
this.nodeDraggingService.dragover(event);
|
||||
this.edgeDraggingService.dragover(event);
|
||||
}
|
||||
|
||||
@HostListener('drop', ['$event'])
|
||||
drop(event: DragEvent) {
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
this.nodeDraggingService.drop(event);
|
||||
}
|
||||
|
||||
@HostListener('mousedown', ['$event'])
|
||||
mousedown(event: MouseEvent) {
|
||||
this.rectangleSelectService.mousedown(event);
|
||||
}
|
||||
|
||||
@HostListener('mousemove', ['$event'])
|
||||
mousemove(event: MouseEvent) {
|
||||
this.rectangleSelectService.mousemove(event);
|
||||
}
|
||||
|
||||
@HostListener('mouseup', ['$event'])
|
||||
mouseup(event: MouseEvent) {
|
||||
this.rectangleSelectService.mouseup(event);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,191 @@
|
||||
import { Observable } from 'rxjs';
|
||||
import { InjectionToken, Type } from '@angular/core';
|
||||
import { FcNodeComponent } from './node.component';
|
||||
|
||||
export const FC_NODE_COMPONENT_CONFIG = new InjectionToken<FcNodeComponentConfig>('fc-node.component.config');
|
||||
|
||||
export interface FcNodeComponentConfig {
|
||||
nodeComponentType: Type<FcNodeComponent>;
|
||||
}
|
||||
|
||||
const htmlPrefix = 'fc';
|
||||
const leftConnectorType = 'leftConnector';
|
||||
const rightConnectorType = 'rightConnector';
|
||||
|
||||
export const FlowchartConstants = {
|
||||
htmlPrefix,
|
||||
leftConnectorType,
|
||||
rightConnectorType,
|
||||
curvedStyle: 'curved',
|
||||
lineStyle: 'line',
|
||||
dragAnimationRepaint: 'repaint',
|
||||
dragAnimationShadow: 'shadow',
|
||||
canvasClass: htmlPrefix + '-canvas',
|
||||
selectedClass: htmlPrefix + '-selected',
|
||||
editClass: htmlPrefix + '-edit',
|
||||
activeClass: htmlPrefix + '-active',
|
||||
hoverClass: htmlPrefix + '-hover',
|
||||
draggingClass: htmlPrefix + '-dragging',
|
||||
edgeClass: htmlPrefix + '-edge',
|
||||
edgeLabelClass: htmlPrefix + '-edge-label',
|
||||
connectorClass: htmlPrefix + '-connector',
|
||||
magnetClass: htmlPrefix + '-magnet',
|
||||
nodeClass: htmlPrefix + '-node',
|
||||
nodeOverlayClass: htmlPrefix + '-node-overlay',
|
||||
leftConnectorClass: htmlPrefix + '-' + leftConnectorType + 's',
|
||||
rightConnectorClass: htmlPrefix + '-' + rightConnectorType + 's',
|
||||
canvasResizeThreshold: 200,
|
||||
canvasResizeStep: 200
|
||||
};
|
||||
|
||||
|
||||
export interface FcCoords {
|
||||
x?: number;
|
||||
y?: number;
|
||||
}
|
||||
|
||||
export interface FcOffset {
|
||||
top: number;
|
||||
left: number;
|
||||
}
|
||||
|
||||
export interface FcRectBox {
|
||||
top: number;
|
||||
left: number;
|
||||
right: number;
|
||||
bottom: number;
|
||||
}
|
||||
|
||||
export interface FcConnector {
|
||||
id: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export interface FcNode extends FcCoords {
|
||||
id: string;
|
||||
name: string;
|
||||
connectors: Array<FcConnector>;
|
||||
readonly?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface FcEdge {
|
||||
label?: string;
|
||||
source?: string;
|
||||
destination?: string;
|
||||
active?: boolean;
|
||||
}
|
||||
|
||||
export interface FcItemInfo {
|
||||
node?: FcNode;
|
||||
edge?: FcEdge;
|
||||
}
|
||||
|
||||
export interface FcModel {
|
||||
nodes: Array<FcNode>;
|
||||
edges: Array<FcEdge>;
|
||||
}
|
||||
|
||||
export interface UserCallbacks {
|
||||
dropNode?: (event: Event, node: FcNode) => void;
|
||||
createEdge?: (event: Event, edge: FcEdge) => Observable<FcEdge>;
|
||||
edgeAdded?: (edge: FcEdge) => void;
|
||||
nodeRemoved?: (node: FcNode) => void;
|
||||
edgeRemoved?: (edge: FcEdge) => void;
|
||||
edgeDoubleClick?: (event: MouseEvent, edge: FcEdge) => void;
|
||||
edgeMouseOver?: (event: MouseEvent, edge: FcEdge) => void;
|
||||
isValidEdge?: (source: FcConnector, destination: FcConnector) => boolean;
|
||||
edgeEdit?: (event: Event, edge: FcEdge) => void;
|
||||
nodeCallbacks?: UserNodeCallbacks;
|
||||
}
|
||||
|
||||
export interface UserNodeCallbacks {
|
||||
nodeEdit?: (event: MouseEvent, node: FcNode) => void;
|
||||
doubleClick?: (event: MouseEvent, node: FcNode) => void;
|
||||
mouseDown?: (event: MouseEvent, node: FcNode) => void;
|
||||
mouseEnter?: (event: MouseEvent, node: FcNode) => void;
|
||||
mouseLeave?: (event: MouseEvent, node: FcNode) => void;
|
||||
}
|
||||
|
||||
export interface FcCallbacks {
|
||||
nodeDragstart: (event: DragEvent, node: FcNode) => void;
|
||||
nodeDragend: (event: DragEvent) => void;
|
||||
edgeDragstart: (event: DragEvent, connector: FcConnector) => void;
|
||||
edgeDragend: (event: DragEvent) => void;
|
||||
edgeDrop: (event: DragEvent, targetConnector: FcConnector) => boolean;
|
||||
edgeDragoverConnector: (event: DragEvent, connector: FcConnector) => boolean;
|
||||
edgeDragoverMagnet: (event: DragEvent, connector: FcConnector) => boolean;
|
||||
edgeDragleaveMagnet: (event: DragEvent) => void;
|
||||
nodeMouseOver: (event: MouseEvent, node: FcNode) => void;
|
||||
nodeMouseOut: (event: MouseEvent, node: FcNode) => void;
|
||||
connectorMouseEnter: (event: MouseEvent, connector: FcConnector) => void;
|
||||
connectorMouseLeave: (event: MouseEvent, connector: FcConnector) => void;
|
||||
nodeClicked: (event: MouseEvent, node: FcNode) => void;
|
||||
}
|
||||
|
||||
export interface FcAdjacentList {
|
||||
[id: string]: {
|
||||
incoming: number;
|
||||
outgoing: Array<string>;
|
||||
};
|
||||
}
|
||||
|
||||
export class ModelvalidationError extends Error {
|
||||
constructor(message: string) {
|
||||
super(message);
|
||||
}
|
||||
}
|
||||
|
||||
export function fcTopSort(graph: FcModel): Array<string> | null {
|
||||
const adjacentList: FcAdjacentList = {};
|
||||
graph.nodes.forEach((node) => {
|
||||
adjacentList[node.id] = {incoming: 0, outgoing: []};
|
||||
});
|
||||
graph.edges.forEach((edge) => {
|
||||
const sourceNode = graph.nodes.filter((node) => {
|
||||
return node.connectors.some((connector) => {
|
||||
return connector.id === edge.source;
|
||||
});
|
||||
})[0];
|
||||
const destinationNode = graph.nodes.filter((node) => {
|
||||
return node.connectors.some((connector) => {
|
||||
return connector.id === edge.destination;
|
||||
});
|
||||
})[0];
|
||||
adjacentList[sourceNode.id].outgoing.push(destinationNode.id);
|
||||
adjacentList[destinationNode.id].incoming++;
|
||||
});
|
||||
const orderedNodes: string[] = [];
|
||||
const sourceNodes: string[] = [];
|
||||
for (const node of Object.keys(adjacentList)) {
|
||||
const edges = adjacentList[node];
|
||||
if (edges.incoming === 0) {
|
||||
sourceNodes.push(node);
|
||||
}
|
||||
}
|
||||
while (sourceNodes.length !== 0) {
|
||||
const sourceNode = sourceNodes.pop();
|
||||
for (let i = 0; i < adjacentList[sourceNode].outgoing.length; i++) {
|
||||
const destinationNode = adjacentList[sourceNode].outgoing[i];
|
||||
adjacentList[destinationNode].incoming--;
|
||||
if (adjacentList[destinationNode].incoming === 0) {
|
||||
sourceNodes.push(destinationNode);
|
||||
}
|
||||
adjacentList[sourceNode].outgoing.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
orderedNodes.push(sourceNode);
|
||||
}
|
||||
let hasEdges = false;
|
||||
for (const node of Object.keys(adjacentList)) {
|
||||
const edges = adjacentList[node];
|
||||
if (edges.incoming !== 0) {
|
||||
hasEdges = true;
|
||||
}
|
||||
}
|
||||
if (hasEdges) {
|
||||
return null;
|
||||
} else {
|
||||
return orderedNodes;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,39 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { NgxFlowchartComponent } from './ngx-flowchart.component';
|
||||
import { FcModelValidationService } from './modelvalidation.service';
|
||||
import { FcEdgeDrawingService } from './edge-drawing.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FcMagnetDirective } from './magnet.directive';
|
||||
import { FcConnectorDirective } from './connector.directive';
|
||||
import { FcNodeContainerComponent } from './node.component';
|
||||
import { FC_NODE_COMPONENT_CONFIG } from './ngx-flowchart.models';
|
||||
import { DefaultFcNodeComponent } from './default-node.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [NgxFlowchartComponent],
|
||||
entryComponents: [
|
||||
DefaultFcNodeComponent
|
||||
],
|
||||
declarations: [NgxFlowchartComponent,
|
||||
FcMagnetDirective,
|
||||
FcConnectorDirective,
|
||||
FcNodeContainerComponent,
|
||||
DefaultFcNodeComponent],
|
||||
providers: [
|
||||
FcModelValidationService,
|
||||
FcEdgeDrawingService,
|
||||
{
|
||||
provide: FC_NODE_COMPONENT_CONFIG,
|
||||
useValue: {
|
||||
nodeComponentType: DefaultFcNodeComponent
|
||||
}
|
||||
}
|
||||
],
|
||||
imports: [
|
||||
CommonModule
|
||||
],
|
||||
exports: [NgxFlowchartComponent]
|
||||
exports: [NgxFlowchartComponent,
|
||||
FcMagnetDirective,
|
||||
FcConnectorDirective,
|
||||
DefaultFcNodeComponent]
|
||||
})
|
||||
export class NgxFlowchartModule { }
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import { TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NgxFlowchartService } from './ngx-flowchart.service';
|
||||
|
||||
describe('NgxFlowchartService', () => {
|
||||
beforeEach(() => TestBed.configureTestingModule({}));
|
||||
|
||||
it('should be created', () => {
|
||||
const service: NgxFlowchartService = TestBed.get(NgxFlowchartService);
|
||||
expect(service).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,9 +0,0 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class NgxFlowchartService {
|
||||
|
||||
constructor() { }
|
||||
}
|
||||
@ -0,0 +1,326 @@
|
||||
import { FcModelService } from './model.service';
|
||||
import { FcCoords, FcNode, FlowchartConstants } from './ngx-flowchart.models';
|
||||
|
||||
const nodeDropScope: NodeDropScope = {
|
||||
dropElement: null
|
||||
};
|
||||
|
||||
export class FcNodeDraggingService {
|
||||
|
||||
nodeDraggingScope: NodeDraggingScope = {
|
||||
shadowDragStarted: false,
|
||||
dropElement: null,
|
||||
draggedNodes: [],
|
||||
shadowElements: []
|
||||
};
|
||||
|
||||
private dragOffsets: FcCoords[] = [];
|
||||
private draggedElements: HTMLElement[] = [];
|
||||
|
||||
private destinationHtmlElements: HTMLElement[] = [];
|
||||
private oldDisplayStyles: string[] = [];
|
||||
|
||||
private readonly modelService: FcModelService;
|
||||
private readonly automaticResize: boolean;
|
||||
private readonly dragAnimation: string;
|
||||
private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
|
||||
|
||||
constructor(modelService: FcModelService,
|
||||
applyFunction: <T>(fn: (...args: any[]) => T) => T,
|
||||
automaticResize: boolean, dragAnimation: string) {
|
||||
this.modelService = modelService;
|
||||
this.automaticResize = automaticResize;
|
||||
this.dragAnimation = dragAnimation;
|
||||
this.applyFunction = applyFunction;
|
||||
}
|
||||
|
||||
private getCoordinate(coordinate: number, max: number): number {
|
||||
coordinate = Math.max(coordinate, 0);
|
||||
coordinate = Math.min(coordinate, max);
|
||||
return coordinate;
|
||||
}
|
||||
|
||||
private getXCoordinate(x: number): number {
|
||||
return this.getCoordinate(x, this.modelService.canvasHtmlElement.offsetWidth);
|
||||
}
|
||||
|
||||
private getYCoordinate(y: number): number {
|
||||
return this.getCoordinate(y, this.modelService.canvasHtmlElement.offsetHeight);
|
||||
}
|
||||
|
||||
private resizeCanvas(draggedNode: FcNode, nodeElement: HTMLElement) {
|
||||
if (this.automaticResize && !this.modelService.isDropSource()) {
|
||||
const canvasElement = this.modelService.canvasHtmlElement;
|
||||
if (canvasElement.offsetWidth < draggedNode.x + nodeElement.offsetWidth + FlowchartConstants.canvasResizeThreshold) {
|
||||
canvasElement.style.width = canvasElement.offsetWidth + FlowchartConstants.canvasResizeStep + 'px';
|
||||
}
|
||||
if (canvasElement.offsetHeight < draggedNode.y + nodeElement.offsetHeight + FlowchartConstants.canvasResizeThreshold) {
|
||||
canvasElement.style.height = canvasElement.offsetHeight + FlowchartConstants.canvasResizeStep + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public isDraggingNode(node: FcNode): boolean {
|
||||
return this.nodeDraggingScope.draggedNodes.includes(node);
|
||||
}
|
||||
|
||||
public dragstart(event: DragEvent, node: FcNode) {
|
||||
if (node.readonly) {
|
||||
return;
|
||||
}
|
||||
this.dragOffsets.length = 0;
|
||||
this.draggedElements.length = 0;
|
||||
this.nodeDraggingScope.draggedNodes.length = 0;
|
||||
this.nodeDraggingScope.shadowElements.length = 0;
|
||||
this.destinationHtmlElements.length = 0;
|
||||
this.oldDisplayStyles.length = 0;
|
||||
const elements: Array<JQuery<HTMLElement>> = [];
|
||||
const nodes: Array<FcNode> = [];
|
||||
if (this.modelService.nodes.isSelected(node)) {
|
||||
const selectedNodes = this.modelService.nodes.getSelectedNodes();
|
||||
for (const selectedNode of selectedNodes) {
|
||||
const element = $(this.modelService.nodes.getHtmlElement(selectedNode.id));
|
||||
elements.push(element);
|
||||
nodes.push(selectedNode);
|
||||
}
|
||||
} else {
|
||||
elements.push($(event.target as HTMLElement));
|
||||
nodes.push(node);
|
||||
}
|
||||
const offsetsX: number[] = [];
|
||||
const offsetsY: number[] = [];
|
||||
for (const element of elements) {
|
||||
offsetsX.push(parseInt(element.css('left'), 10) - event.clientX);
|
||||
offsetsY.push(parseInt(element.css('top'), 10) - event.clientY);
|
||||
}
|
||||
const originalEvent: DragEvent = (event as any).originalEvent || event;
|
||||
if (this.modelService.isDropSource()) {
|
||||
if (nodeDropScope.dropElement) {
|
||||
nodeDropScope.dropElement.parentNode.removeChild(nodeDropScope.dropElement);
|
||||
nodeDropScope.dropElement = null;
|
||||
}
|
||||
nodeDropScope.dropElement = elements[0][0].cloneNode(true) as NodeDropElement;
|
||||
const offset = $(this.modelService.canvasHtmlElement).offset();
|
||||
nodeDropScope.dropElement.offsetInfo = {
|
||||
offsetX: Math.round(offsetsX[0] + offset.left),
|
||||
offsetY: Math.round(offsetsY[0] + offset.top)
|
||||
};
|
||||
nodeDropScope.dropElement.style.position = 'absolute';
|
||||
nodeDropScope.dropElement.style.pointerEvents = 'none';
|
||||
nodeDropScope.dropElement.style.zIndex = '9999';
|
||||
|
||||
document.body.appendChild(nodeDropScope.dropElement);
|
||||
const dropNodeInfo: DropNodeInfo = {
|
||||
node,
|
||||
dropTargetId: this.modelService.dropTargetId,
|
||||
offsetX: Math.round(offsetsX[0] + offset.left),
|
||||
offsetY: Math.round(offsetsY[0] + offset.top)
|
||||
};
|
||||
originalEvent.dataTransfer.setData('text', JSON.stringify(dropNodeInfo));
|
||||
|
||||
if (originalEvent.dataTransfer.setDragImage) {
|
||||
originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
|
||||
} else {
|
||||
const target: HTMLElement = event.target as HTMLElement;
|
||||
this.destinationHtmlElements.push(target);
|
||||
this.oldDisplayStyles.push(target.style.display);
|
||||
target.style.display = 'none';
|
||||
this.nodeDraggingScope.shadowDragStarted = true;
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.nodeDraggingScope.draggedNodes = nodes;
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
this.draggedElements.push(elements[i][0]);
|
||||
this.dragOffsets.push(
|
||||
{
|
||||
x: offsetsX[i],
|
||||
y: offsetsY[i]
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
for (let i = 0; i < this.draggedElements.length; i++) {
|
||||
const dragOffset = this.dragOffsets[i];
|
||||
const draggedNode = this.nodeDraggingScope.draggedNodes[i];
|
||||
const shadowElement = $(`<div style="position: absolute; opacity: 0.7; ` +
|
||||
`top: ${this.getYCoordinate(dragOffset.y + event.clientY)}px; ` +
|
||||
`left: ${this.getXCoordinate(dragOffset.x + event.clientX)}px; ">` +
|
||||
`<div class="innerNode"><p style="padding: 0 15px;">${draggedNode.name}</p> </div></div>`);
|
||||
const targetInnerNode = $(this.draggedElements[i]).children()[0];
|
||||
shadowElement.children()[0].style.backgroundColor = targetInnerNode.style.backgroundColor;
|
||||
this.nodeDraggingScope.shadowElements.push(shadowElement);
|
||||
this.modelService.canvasHtmlElement.appendChild(this.nodeDraggingScope.shadowElements[i][0]);
|
||||
}
|
||||
}
|
||||
originalEvent.dataTransfer.setData('text', 'Just to support firefox');
|
||||
if (originalEvent.dataTransfer.setDragImage) {
|
||||
originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
|
||||
} else {
|
||||
for (let i = 0; i < this.draggedElements.length; i++) {
|
||||
this.destinationHtmlElements.push(this.draggedElements[i]);
|
||||
this.oldDisplayStyles.push(this.destinationHtmlElements[i].style.display);
|
||||
this.destinationHtmlElements[i].style.display = 'none';
|
||||
}
|
||||
if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
this.nodeDraggingScope.shadowDragStarted = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public drop(event: DragEvent): boolean {
|
||||
if (this.modelService.isDropSource()) {
|
||||
event.preventDefault();
|
||||
return false;
|
||||
}
|
||||
let dropNode: FcNode = null;
|
||||
const originalEvent: DragEvent = (event as any).originalEvent || event;
|
||||
const infoText = originalEvent.dataTransfer.getData('text');
|
||||
if (infoText) {
|
||||
let dropNodeInfo: DropNodeInfo = null;
|
||||
try {
|
||||
dropNodeInfo = JSON.parse(infoText);
|
||||
} catch (e) {}
|
||||
if (dropNodeInfo && dropNodeInfo.dropTargetId) {
|
||||
if (this.modelService.canvasHtmlElement.id &&
|
||||
this.modelService.canvasHtmlElement.id === dropNodeInfo.dropTargetId) {
|
||||
dropNode = dropNodeInfo.node;
|
||||
const offset = $(this.modelService.canvasHtmlElement).offset();
|
||||
const x = event.clientX - offset.left;
|
||||
const y = event.clientY - offset.top;
|
||||
dropNode.x = Math.round(this.getXCoordinate(dropNodeInfo.offsetX + x));
|
||||
dropNode.y = Math.round(this.getYCoordinate(dropNodeInfo.offsetY + y));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (dropNode) {
|
||||
this.modelService.dropNode(event, dropNode);
|
||||
event.preventDefault();
|
||||
return false;
|
||||
} else if (this.nodeDraggingScope.draggedNodes.length) {
|
||||
return this.applyFunction(() => {
|
||||
for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
|
||||
const draggedNode = this.nodeDraggingScope.draggedNodes[i];
|
||||
const dragOffset = this.dragOffsets[i];
|
||||
draggedNode.x = Math.round(this.getXCoordinate(dragOffset.x + event.clientX));
|
||||
draggedNode.y = Math.round(this.getYCoordinate(dragOffset.y + event.clientY));
|
||||
}
|
||||
event.preventDefault();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
public dragover(event: DragEvent) {
|
||||
if (nodeDropScope.dropElement) {
|
||||
const offsetInfo = nodeDropScope.dropElement.offsetInfo;
|
||||
nodeDropScope.dropElement.style.left = (offsetInfo.offsetX + event.clientX) + 'px';
|
||||
nodeDropScope.dropElement.style.top = (offsetInfo.offsetY + event.clientY) + 'px';
|
||||
if (this.nodeDraggingScope.shadowDragStarted) {
|
||||
this.applyFunction(() => {
|
||||
this.destinationHtmlElements[0].style.display = this.oldDisplayStyles[0];
|
||||
this.nodeDraggingScope.shadowDragStarted = false;
|
||||
});
|
||||
}
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (this.modelService.isDropSource()) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (!this.nodeDraggingScope.draggedNodes.length) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (this.dragAnimation === FlowchartConstants.dragAnimationRepaint) {
|
||||
if (this.nodeDraggingScope.draggedNodes.length) {
|
||||
return this.applyFunction(() => {
|
||||
for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
|
||||
const draggedNode = this.nodeDraggingScope.draggedNodes[i];
|
||||
const dragOffset = this.dragOffsets[i];
|
||||
draggedNode.x = this.getXCoordinate(dragOffset.x + event.clientX);
|
||||
draggedNode.y = this.getYCoordinate(dragOffset.y + event.clientY);
|
||||
this.resizeCanvas(draggedNode, this.draggedElements[i]);
|
||||
}
|
||||
event.preventDefault();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
} else if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
|
||||
if (this.nodeDraggingScope.draggedNodes.length) {
|
||||
if (this.nodeDraggingScope.shadowDragStarted) {
|
||||
this.applyFunction(() => {
|
||||
for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
|
||||
this.destinationHtmlElements[i].style.display = this.oldDisplayStyles[i];
|
||||
}
|
||||
this.nodeDraggingScope.shadowDragStarted = false;
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
|
||||
const draggedNode = this.nodeDraggingScope.draggedNodes[i];
|
||||
const dragOffset = this.dragOffsets[i];
|
||||
this.nodeDraggingScope.shadowElements[i].css('left', this.getXCoordinate(dragOffset.x + event.clientX) + 'px');
|
||||
this.nodeDraggingScope.shadowElements[i].css('top', this.getYCoordinate(dragOffset.y + event.clientY) + 'px');
|
||||
this.resizeCanvas(draggedNode, this.draggedElements[i]);
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public dragend(event: DragEvent) {
|
||||
this.applyFunction(() => {
|
||||
if (nodeDropScope.dropElement) {
|
||||
nodeDropScope.dropElement.parentNode.removeChild(nodeDropScope.dropElement);
|
||||
nodeDropScope.dropElement = null;
|
||||
}
|
||||
if (this.modelService.isDropSource()) {
|
||||
return;
|
||||
}
|
||||
if (this.nodeDraggingScope.shadowElements.length) {
|
||||
for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
|
||||
const draggedNode = this.nodeDraggingScope.draggedNodes[i];
|
||||
const shadowElement = this.nodeDraggingScope.shadowElements[i];
|
||||
draggedNode.x = parseInt(shadowElement.css('left').replace('px', ''), 10);
|
||||
draggedNode.y = parseInt(shadowElement.css('top').replace('px', ''), 10);
|
||||
this.modelService.canvasHtmlElement.removeChild(shadowElement[0]);
|
||||
}
|
||||
this.nodeDraggingScope.shadowElements.length = 0;
|
||||
}
|
||||
|
||||
if (this.nodeDraggingScope.draggedNodes.length) {
|
||||
this.nodeDraggingScope.draggedNodes.length = 0;
|
||||
this.draggedElements.length = 0;
|
||||
this.dragOffsets.length = 0;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export interface NodeDraggingScope {
|
||||
draggedNodes: Array<FcNode>;
|
||||
shadowElements: Array<JQuery<HTMLElement>>;
|
||||
shadowDragStarted: boolean;
|
||||
dropElement: HTMLElement;
|
||||
}
|
||||
|
||||
export interface NodeDropElement extends HTMLElement {
|
||||
offsetInfo?: {
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface NodeDropScope {
|
||||
dropElement: NodeDropElement;
|
||||
}
|
||||
|
||||
export interface DropNodeInfo {
|
||||
node: FcNode;
|
||||
dropTargetId: string;
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
:host {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
&.fc-dragging {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep {
|
||||
.fc-leftConnectors, .fc-rightConnectors {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
z-index: -10;
|
||||
.fc-magnet {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-leftConnectors {
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.fc-rightConnectors {
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.fc-magnet {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
height: 60px;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fc-connector {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
border: 10px solid transparent;
|
||||
-moz-background-clip: padding; /* Firefox 3.6 */
|
||||
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
|
||||
background-clip: padding-box;
|
||||
border-radius: 50% 50%;
|
||||
background-color: #F7A789;
|
||||
color: #fff;
|
||||
pointer-events: all;
|
||||
|
||||
&.fc-hover {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,227 @@
|
||||
import {
|
||||
Component,
|
||||
ComponentFactoryResolver, Directive,
|
||||
ElementRef, HostBinding,
|
||||
HostListener,
|
||||
Inject,
|
||||
Input,
|
||||
OnChanges,
|
||||
OnInit,
|
||||
SimpleChanges,
|
||||
ViewChild,
|
||||
ViewContainerRef
|
||||
} from '@angular/core';
|
||||
import {
|
||||
FC_NODE_COMPONENT_CONFIG,
|
||||
FcCallbacks,
|
||||
FcConnector,
|
||||
FcNode,
|
||||
FcNodeComponentConfig,
|
||||
FlowchartConstants,
|
||||
UserNodeCallbacks
|
||||
} from './ngx-flowchart.models';
|
||||
import { FcModelService } from './model.service';
|
||||
|
||||
@Component({
|
||||
selector: 'fc-node',
|
||||
template: '<ng-template #nodeContent></ng-template>',
|
||||
styleUrls: ['./node.component.scss']
|
||||
})
|
||||
export class FcNodeContainerComponent implements OnInit, OnChanges {
|
||||
|
||||
@Input()
|
||||
callbacks: FcCallbacks;
|
||||
|
||||
@Input()
|
||||
userNodeCallbacks: UserNodeCallbacks;
|
||||
|
||||
@Input()
|
||||
node: FcNode;
|
||||
|
||||
@Input()
|
||||
selected: boolean;
|
||||
|
||||
@Input()
|
||||
edit: boolean;
|
||||
|
||||
@Input()
|
||||
underMouse: boolean;
|
||||
|
||||
@Input()
|
||||
mouseOverConnector: FcConnector;
|
||||
|
||||
@Input()
|
||||
modelservice: FcModelService;
|
||||
|
||||
@Input()
|
||||
dragging: boolean;
|
||||
|
||||
@HostBinding('attr.id')
|
||||
get nodeId(): string {
|
||||
return this.node.id;
|
||||
}
|
||||
|
||||
@HostBinding('style.top')
|
||||
get top(): string {
|
||||
return this.node.y + 'px';
|
||||
}
|
||||
|
||||
@HostBinding('style.left')
|
||||
get left(): string {
|
||||
return this.node.x + 'px';
|
||||
}
|
||||
|
||||
nodeComponent: FcNodeComponent;
|
||||
|
||||
@ViewChild('nodeContent', {read: ViewContainerRef, static: true}) nodeContentContainer: ViewContainerRef;
|
||||
|
||||
constructor(@Inject(FC_NODE_COMPONENT_CONFIG) private nodeComponentConfig: FcNodeComponentConfig,
|
||||
private elementRef: ElementRef<HTMLElement>,
|
||||
private componentFactoryResolver: ComponentFactoryResolver) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
if (!this.userNodeCallbacks) {
|
||||
this.userNodeCallbacks = {};
|
||||
}
|
||||
this.userNodeCallbacks.nodeEdit = this.userNodeCallbacks.nodeEdit || (() => {});
|
||||
this.userNodeCallbacks.doubleClick = this.userNodeCallbacks.doubleClick || (() => {});
|
||||
this.userNodeCallbacks.mouseDown = this.userNodeCallbacks.mouseDown || (() => {});
|
||||
this.userNodeCallbacks.mouseEnter = this.userNodeCallbacks.mouseEnter || (() => {});
|
||||
this.userNodeCallbacks.mouseLeave = this.userNodeCallbacks.mouseLeave || (() => {});
|
||||
|
||||
const element = $(this.elementRef.nativeElement);
|
||||
element.addClass(FlowchartConstants.nodeClass);
|
||||
if (!this.node.readonly) {
|
||||
element.attr('draggable', 'true');
|
||||
}
|
||||
this.updateNodeClass();
|
||||
this.modelservice.nodes.setHtmlElement(this.node.id, element[0]);
|
||||
this.nodeContentContainer.clear();
|
||||
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.nodeComponentConfig.nodeComponentType);
|
||||
const componentRef = this.nodeContentContainer.createComponent(componentFactory);
|
||||
this.nodeComponent = componentRef.instance;
|
||||
this.nodeComponent.callbacks = this.callbacks;
|
||||
this.nodeComponent.userNodeCallbacks = this.userNodeCallbacks;
|
||||
this.nodeComponent.node = this.node;
|
||||
this.nodeComponent.modelservice = this.modelservice;
|
||||
this.updateNodeComponent();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges): void {
|
||||
let updateNode = false;
|
||||
for (const propName of Object.keys(changes)) {
|
||||
const change = changes[propName];
|
||||
if (!change.firstChange && change.currentValue !== change.previousValue) {
|
||||
if (['selected', 'edit', 'underMouse', 'mouseOverConnector', 'dragging'].includes(propName)) {
|
||||
updateNode = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (updateNode) {
|
||||
this.updateNodeClass();
|
||||
this.updateNodeComponent();
|
||||
}
|
||||
}
|
||||
|
||||
private updateNodeClass() {
|
||||
const element = $(this.elementRef.nativeElement);
|
||||
this.toggleClass(element, FlowchartConstants.selectedClass, this.selected);
|
||||
this.toggleClass(element, FlowchartConstants.editClass, this.edit);
|
||||
this.toggleClass(element, FlowchartConstants.hoverClass, this.underMouse);
|
||||
this.toggleClass(element, FlowchartConstants.draggingClass, this.dragging);
|
||||
}
|
||||
|
||||
private updateNodeComponent() {
|
||||
this.nodeComponent.selected = this.selected;
|
||||
this.nodeComponent.edit = this.edit;
|
||||
this.nodeComponent.underMouse = this.underMouse;
|
||||
this.nodeComponent.mouseOverConnector = this.mouseOverConnector;
|
||||
this.nodeComponent.dragging = this.dragging;
|
||||
}
|
||||
|
||||
private toggleClass(element: JQuery<HTMLElement>, clazz: string, set: boolean) {
|
||||
if (set) {
|
||||
element.addClass(clazz);
|
||||
} else {
|
||||
element.removeClass(clazz);
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('mousedown', ['$event'])
|
||||
mousedown(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
@HostListener('dragstart', ['$event'])
|
||||
dragstart(event: DragEvent) {
|
||||
if (!this.node.readonly) {
|
||||
this.callbacks.nodeDragstart(event, this.node);
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('dragend', ['$event'])
|
||||
dragend(event: DragEvent) {
|
||||
if (!this.node.readonly) {
|
||||
this.callbacks.nodeDragend(event);
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('click', ['$event'])
|
||||
click(event: MouseEvent) {
|
||||
if (!this.node.readonly) {
|
||||
this.callbacks.nodeClicked(event, this.node);
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('mouseover', ['$event'])
|
||||
mouseover(event: MouseEvent) {
|
||||
if (!this.node.readonly) {
|
||||
this.callbacks.nodeMouseOver(event, this.node);
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('mouseout', ['$event'])
|
||||
mouseout(event: MouseEvent) {
|
||||
if (!this.node.readonly) {
|
||||
this.callbacks.nodeMouseOut(event, this.node);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export abstract class FcNodeComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
callbacks: FcCallbacks;
|
||||
|
||||
@Input()
|
||||
userNodeCallbacks: UserNodeCallbacks;
|
||||
|
||||
@Input()
|
||||
node: FcNode;
|
||||
|
||||
@Input()
|
||||
selected: boolean;
|
||||
|
||||
@Input()
|
||||
edit: boolean;
|
||||
|
||||
@Input()
|
||||
underMouse: boolean;
|
||||
|
||||
@Input()
|
||||
mouseOverConnector: FcConnector;
|
||||
|
||||
@Input()
|
||||
modelservice: FcModelService;
|
||||
|
||||
@Input()
|
||||
dragging: boolean;
|
||||
|
||||
flowchartConstants = FlowchartConstants;
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,114 @@
|
||||
import { FcModelService } from './model.service';
|
||||
import { FcRectBox } from 'ngx-flowchart-dev';
|
||||
import scrollparent from './scrollparent';
|
||||
|
||||
interface Rectangle {
|
||||
x1: number;
|
||||
x2: number;
|
||||
y1: number;
|
||||
y2: number;
|
||||
}
|
||||
|
||||
export class FcRectangleSelectService {
|
||||
|
||||
private readonly selectRect: Rectangle = {
|
||||
x1: 0,
|
||||
x2: 0,
|
||||
y1: 0,
|
||||
y2: 0
|
||||
};
|
||||
|
||||
private readonly modelService: FcModelService;
|
||||
private readonly selectElement: HTMLElement;
|
||||
private readonly $canvasElement: JQuery<HTMLElement>;
|
||||
private readonly $scrollParent: JQuery<HTMLElement>;
|
||||
private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
|
||||
|
||||
constructor(modelService: FcModelService,
|
||||
selectElement: HTMLElement,
|
||||
applyFunction: <T>(fn: (...args: any[]) => T) => T) {
|
||||
this.modelService = modelService;
|
||||
this.selectElement = selectElement;
|
||||
this.$canvasElement = $(this.modelService.canvasHtmlElement);
|
||||
this.$scrollParent = $(scrollparent(this.modelService.canvasHtmlElement));
|
||||
this.applyFunction = applyFunction;
|
||||
}
|
||||
|
||||
public mousedown(e: MouseEvent) {
|
||||
if (this.modelService.isEditable() && !e.ctrlKey && !e.metaKey && e.button === 0
|
||||
&& this.selectElement.hidden) {
|
||||
this.selectElement.hidden = false;
|
||||
const offset = this.$canvasElement.offset();
|
||||
this.selectRect.x1 = Math.round(e.pageX - offset.left);
|
||||
this.selectRect.y1 = Math.round(e.pageY - offset.top);
|
||||
this.selectRect.x2 = this.selectRect.x1;
|
||||
this.selectRect.y2 = this.selectRect.y1;
|
||||
this.updateSelectRect();
|
||||
}
|
||||
}
|
||||
|
||||
public mousemove(e: MouseEvent) {
|
||||
if (this.modelService.isEditable() && !e.ctrlKey && !e.metaKey && e.button === 0
|
||||
&& !this.selectElement.hidden) {
|
||||
const offset = this.$canvasElement.offset();
|
||||
this.selectRect.x2 = Math.round(e.pageX - offset.left);
|
||||
this.selectRect.y2 = Math.round(e.pageY - offset.top);
|
||||
this.updateScroll(offset);
|
||||
this.updateSelectRect();
|
||||
}
|
||||
}
|
||||
|
||||
private updateScroll(offset: JQuery.Coordinates) {
|
||||
const rect = this.$scrollParent[0].getBoundingClientRect();
|
||||
const bottom = rect.bottom - offset.top;
|
||||
const right = rect.right - offset.left;
|
||||
const top = rect.top - offset.top;
|
||||
const left = rect.left - offset.left;
|
||||
if (this.selectRect.y2 - top < 25) {
|
||||
const topScroll = 25 - (this.selectRect.y2 - top);
|
||||
const scroll = this.$scrollParent.scrollTop();
|
||||
this.$scrollParent.scrollTop(scroll - topScroll);
|
||||
} else if (bottom - this.selectRect.y2 < 40) {
|
||||
const bottomScroll = 40 - (bottom - this.selectRect.y2);
|
||||
const scroll = this.$scrollParent.scrollTop();
|
||||
this.$scrollParent.scrollTop(scroll + bottomScroll);
|
||||
}
|
||||
if (this.selectRect.x2 - left < 25) {
|
||||
const leftScroll = 25 - (this.selectRect.x2 - left);
|
||||
const scroll = this.$scrollParent.scrollLeft();
|
||||
this.$scrollParent.scrollLeft(scroll - leftScroll);
|
||||
} else if (right - this.selectRect.x2 < 40) {
|
||||
const rightScroll = 40 - (right - this.selectRect.x2);
|
||||
const scroll = this.$scrollParent.scrollLeft();
|
||||
this.$scrollParent.scrollLeft(scroll + rightScroll);
|
||||
}
|
||||
}
|
||||
|
||||
public mouseup(e: MouseEvent) {
|
||||
if (this.modelService.isEditable() && !e.ctrlKey && !e.metaKey && e.button === 0
|
||||
&& !this.selectElement.hidden) {
|
||||
const rectBox = this.selectElement.getBoundingClientRect() as FcRectBox;
|
||||
this.selectElement.hidden = true;
|
||||
this.selectObjects(rectBox);
|
||||
}
|
||||
}
|
||||
|
||||
private updateSelectRect() {
|
||||
const x3 = Math.min(this.selectRect.x1, this.selectRect.x2);
|
||||
const x4 = Math.max(this.selectRect.x1, this.selectRect.x2);
|
||||
const y3 = Math.min(this.selectRect.y1, this.selectRect.y2);
|
||||
const y4 = Math.max(this.selectRect.y1, this.selectRect.y2);
|
||||
this.selectElement.style.left = x3 + 'px';
|
||||
this.selectElement.style.top = y3 + 'px';
|
||||
this.selectElement.style.width = x4 - x3 + 'px';
|
||||
this.selectElement.style.height = y4 - y3 + 'px';
|
||||
}
|
||||
|
||||
private selectObjects(rectBox: FcRectBox) {
|
||||
this.applyFunction(() => {
|
||||
this.modelService.selectAllInRect(rectBox);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
const regex = /(auto|scroll)/;
|
||||
|
||||
const style = (node: Element, prop: string): string =>
|
||||
getComputedStyle(node, null).getPropertyValue(prop);
|
||||
|
||||
const scroll = (node: Element) =>
|
||||
regex.test(
|
||||
style(node, 'overflow') +
|
||||
style(node, 'overflow-y') +
|
||||
style(node, 'overflow-x'));
|
||||
|
||||
const scrollparent = (node: HTMLElement): HTMLElement =>
|
||||
!node || node === document.body
|
||||
? document.body
|
||||
: scroll(node)
|
||||
? node
|
||||
: scrollparent(node.parentNode as HTMLElement);
|
||||
|
||||
export default scrollparent;
|
||||
@ -1,10 +1,31 @@
|
||||
<!--The content below is only a placeholder and can be replaced.-->
|
||||
<div style="text-align:center">
|
||||
<h1>
|
||||
Welcome to {{ title }}!
|
||||
</h1>
|
||||
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
|
||||
</div>
|
||||
<div>
|
||||
<fc-canvas></fc-canvas>
|
||||
<div class="fc-container">
|
||||
<div class="fc-left-pane">
|
||||
<fc-canvas [model]="nodeTypesModel" [selectedObjects]="nodeTypesFlowchartselected"
|
||||
[automaticResize]="false"
|
||||
[dropTargetId]="'fc-target-canvas'">
|
||||
</fc-canvas>
|
||||
</div>
|
||||
<div class="fc-divider" style="background-color: gray;">
|
||||
</div>
|
||||
<div class="fc-right-pane">
|
||||
<div class="button-overlay">
|
||||
<button (click)="addNewNode()" title="Add a new node to then chart">Add Node</button>
|
||||
<button (click)="deleteSelected()"
|
||||
[disabled]="fcCanvas.modelService.nodes.getSelectedNodes().length === 0 &&
|
||||
fcCanvas.modelService.edges.getSelectedEdges().length === 0"
|
||||
title="Delete selected nodes and connections">Delete Selected</button>
|
||||
<button (click)="activateWorkflow()">
|
||||
Activate Workflow
|
||||
</button>
|
||||
</div>
|
||||
<fc-canvas #fcCanvas
|
||||
id="fc-target-canvas"
|
||||
[model]="model"
|
||||
[selectedObjects]="flowchartselected"
|
||||
[edgeStyle]="flowchartConstants.curvedStyle"
|
||||
[userCallbacks]="callbacks"
|
||||
[automaticResize]="true"
|
||||
[dragAnimation]="flowchartConstants.dragAnimationRepaint">
|
||||
</fc-canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
|
||||
.fc-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fc-left-pane {
|
||||
flex: 0.15;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.fc-divider {
|
||||
flex: 0.01;
|
||||
}
|
||||
|
||||
.fc-right-pane {
|
||||
flex: 0.84;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.button-overlay {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.button-overlay button {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
background-color: #F15B26;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.button-overlay button:hover:not(:disabled) {
|
||||
border: 4px solid #b03911;
|
||||
border-radius: 5px;
|
||||
margin: -4px;
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.button-overlay button:disabled {
|
||||
-webkit-filter: brightness(70%);
|
||||
filter: brightness(70%);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
import { TestBed, async } from '@angular/core/testing';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
describe('AppComponent', () => {
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [
|
||||
AppComponent
|
||||
],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it(`should have as title 'ngx-flowchart'`, () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
const app = fixture.debugElement.componentInstance;
|
||||
expect(app.title).toEqual('ngx-flowchart');
|
||||
});
|
||||
|
||||
it('should render title in a h1 tag', () => {
|
||||
const fixture = TestBed.createComponent(AppComponent);
|
||||
fixture.detectChanges();
|
||||
const compiled = fixture.debugElement.nativeElement;
|
||||
expect(compiled.querySelector('h1').textContent).toContain('Welcome to ngx-flowchart!');
|
||||
});
|
||||
});
|
||||
@ -1,10 +1,280 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { AfterViewInit, Component, HostBinding, HostListener, ViewChild, ViewContainerRef } from '@angular/core';
|
||||
import { FcModel, FcNode, FlowchartConstants, NgxFlowchartComponent, UserCallbacks } from 'ngx-flowchart-dev';
|
||||
import { of } from 'rxjs';
|
||||
import { A, CONTROL, DELETE, ESCAPE } from '@angular/cdk/keycodes';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'ngx-flowchart';
|
||||
export class AppComponent implements AfterViewInit {
|
||||
|
||||
@HostBinding('attr.tabindex')
|
||||
get tabindex(): string {
|
||||
return '0';
|
||||
}
|
||||
|
||||
flowchartConstants = FlowchartConstants;
|
||||
|
||||
nodeTypesFlowchartselected = [];
|
||||
nodeTypesModel: FcModel = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
|
||||
flowchartselected = [];
|
||||
model: FcModel = {
|
||||
nodes: [],
|
||||
edges: []
|
||||
};
|
||||
nextNodeID = 10;
|
||||
nextConnectorID = 20;
|
||||
|
||||
callbacks: UserCallbacks = {
|
||||
edgeDoubleClick: (event, edge) => {
|
||||
console.log('Edge double clicked.');
|
||||
},
|
||||
edgeEdit: (event, edge) => {
|
||||
const label = prompt('Enter a link label:', edge.label);
|
||||
if (label) {
|
||||
edge.label = label;
|
||||
}
|
||||
},
|
||||
edgeMouseOver: event => {
|
||||
console.log('mouserover');
|
||||
},
|
||||
isValidEdge: (source, destination) => {
|
||||
return source.type === FlowchartConstants.rightConnectorType && destination.type === FlowchartConstants.leftConnectorType;
|
||||
},
|
||||
createEdge: (event, edge) => {
|
||||
if (!edge.label) {
|
||||
const label = prompt('Enter a link label:', 'New label');
|
||||
edge.label = label;
|
||||
}
|
||||
return of(edge);
|
||||
},
|
||||
dropNode: (event, node) => {
|
||||
const name = prompt('Enter a node name:', node.name);
|
||||
if (name) {
|
||||
node.name = name;
|
||||
node.id = (this.nextNodeID++) + '';
|
||||
node.connectors = [
|
||||
{
|
||||
id: (this.nextConnectorID++) + '',
|
||||
type: FlowchartConstants.leftConnectorType
|
||||
},
|
||||
{
|
||||
id: (this.nextConnectorID++) + '',
|
||||
type: FlowchartConstants.rightConnectorType
|
||||
}
|
||||
];
|
||||
this.model.nodes.push(node);
|
||||
}
|
||||
},
|
||||
edgeAdded: edge => {
|
||||
console.log('edge added');
|
||||
console.log(edge);
|
||||
},
|
||||
nodeRemoved: node => {
|
||||
console.log('node removed');
|
||||
console.log(node);
|
||||
},
|
||||
edgeRemoved: edge => {
|
||||
console.log('edge removed');
|
||||
console.log(edge);
|
||||
},
|
||||
nodeCallbacks: {
|
||||
doubleClick: event => {
|
||||
console.log('Node was doubleclicked.');
|
||||
},
|
||||
nodeEdit: (event, node) => {
|
||||
const name = prompt('Enter a node name:', node.name);
|
||||
if (name) {
|
||||
node.name = name;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ViewChild('fcCanvas', {static: true}) fcCanvas: NgxFlowchartComponent;
|
||||
|
||||
constructor() {
|
||||
this.initData();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
console.log(this.fcCanvas.modelService);
|
||||
}
|
||||
|
||||
private initData() {
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const node: FcNode = {
|
||||
name: 'type' + i,
|
||||
id: (i + 1) + '',
|
||||
x: 50,
|
||||
y: 100 * (i + 1),
|
||||
connectors: [
|
||||
{
|
||||
type: FlowchartConstants.leftConnectorType,
|
||||
id: (i * 2 + 1) + ''
|
||||
},
|
||||
{
|
||||
type: FlowchartConstants.rightConnectorType,
|
||||
id: (i * 2 + 2) + ''
|
||||
}
|
||||
]
|
||||
};
|
||||
this.nodeTypesModel.nodes.push(node);
|
||||
}
|
||||
this.model.nodes.push(...
|
||||
[
|
||||
{
|
||||
name: 'ngxFlowchart',
|
||||
readonly: true,
|
||||
id: '2',
|
||||
x: 300,
|
||||
y: 100,
|
||||
color: '#000',
|
||||
borderColor: '#000',
|
||||
connectors: [
|
||||
{
|
||||
type: FlowchartConstants.leftConnectorType,
|
||||
id: '1'
|
||||
},
|
||||
{
|
||||
type: FlowchartConstants.rightConnectorType,
|
||||
id: '2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Implemented with Angular',
|
||||
id: '3',
|
||||
x: 600,
|
||||
y: 100,
|
||||
color: '#F15B26',
|
||||
connectors: [
|
||||
{
|
||||
type: FlowchartConstants.leftConnectorType,
|
||||
id: '3'
|
||||
},
|
||||
{
|
||||
type: FlowchartConstants.rightConnectorType,
|
||||
id: '4'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Easy Integration',
|
||||
id: '4',
|
||||
x: 1000,
|
||||
y: 100,
|
||||
color: '#000',
|
||||
borderColor: '#000',
|
||||
connectors: [
|
||||
{
|
||||
type: FlowchartConstants.leftConnectorType,
|
||||
id: '5'
|
||||
},
|
||||
{
|
||||
type: FlowchartConstants.rightConnectorType,
|
||||
id: '6'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Customizable templates',
|
||||
id: '5',
|
||||
x: 1300,
|
||||
y: 100,
|
||||
color: '#000',
|
||||
borderColor: '#000',
|
||||
connectors: [
|
||||
{
|
||||
type: FlowchartConstants.leftConnectorType,
|
||||
id: '7'
|
||||
},
|
||||
{
|
||||
type: FlowchartConstants.rightConnectorType,
|
||||
id: '8'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
);
|
||||
this.model.edges.push(...
|
||||
[
|
||||
{
|
||||
source: '2',
|
||||
destination: '3',
|
||||
label: 'label1'
|
||||
},
|
||||
{
|
||||
source: '4',
|
||||
destination: '5',
|
||||
label: 'label2'
|
||||
},
|
||||
{
|
||||
source: '6',
|
||||
destination: '7',
|
||||
label: 'label3'
|
||||
}
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
@HostListener('keydown.control.a', ['$event'])
|
||||
public onCtrlA(event: KeyboardEvent) {
|
||||
this.fcCanvas.modelService.selectAll();
|
||||
}
|
||||
|
||||
@HostListener('keydown.esc', ['$event'])
|
||||
public onEsc(event: KeyboardEvent) {
|
||||
this.fcCanvas.modelService.deselectAll();
|
||||
}
|
||||
|
||||
@HostListener('keydown', ['$event'])
|
||||
public onKeydown(event: KeyboardEvent) {
|
||||
if (event.keyCode === DELETE) {
|
||||
this.fcCanvas.modelService.deleteSelected();
|
||||
}
|
||||
}
|
||||
|
||||
public addNewNode() {
|
||||
const nodeName = prompt('Enter a node name:', 'New node');
|
||||
if (!nodeName) {
|
||||
return;
|
||||
}
|
||||
|
||||
const newNode: FcNode = {
|
||||
name: nodeName,
|
||||
id: (this.nextNodeID++) + '',
|
||||
x: 200,
|
||||
y: 100,
|
||||
color: '#F15B26',
|
||||
connectors: [
|
||||
{
|
||||
id: (this.nextConnectorID++) + '',
|
||||
type: FlowchartConstants.leftConnectorType
|
||||
},
|
||||
{
|
||||
id: (this.nextConnectorID++) + '',
|
||||
type: FlowchartConstants.rightConnectorType
|
||||
}
|
||||
]
|
||||
};
|
||||
this.model.nodes.push(newNode);
|
||||
}
|
||||
|
||||
public activateWorkflow() {
|
||||
this.model.edges.forEach((edge) => {
|
||||
edge.active = !edge.active;
|
||||
});
|
||||
this.fcCanvas.modelService.detectChanges();
|
||||
}
|
||||
|
||||
public deleteSelected() {
|
||||
this.fcCanvas.modelService.deleteSelected();
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,4 @@
|
||||
<div
|
||||
(dblclick)="userNodeCallbacks.doubleClick($event, node)">
|
||||
{{ node | json }}
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FcNodeComponent } from 'ngx-flowchart-dev';
|
||||
|
||||
@Component({
|
||||
selector: 'app-default-node',
|
||||
templateUrl: './test-node.component.html',
|
||||
styleUrls: []
|
||||
})
|
||||
export class TestFcNodeComponent extends FcNodeComponent {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue