Skip to content

N
ngx-flowchart
Commit c31c1112 authored by Igor Kulikov's avatar Igor Kulikov
Browse files
Options

Performance optimizations

parent a5efa30b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 823 additions and 235 deletions
dist/ngx-flowchart/bundles/ngx-flowchart.umd.js.map
View file @ c31c1112
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/ngx-flowchart/bundles/ngx-flowchart.umd.min.js
View file @ c31c1112
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/ngx-flowchart/bundles/ngx-flowchart.umd.min.js.map
View file @ c31c1112
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/ngx-flowchart/esm2015/lib/default-node.component.js
View file @ c31c1112
......@@ -12,10 +12,10 @@ export class DefaultFcNodeComponent extends FcNodeComponent {
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 &times;\n </div>\n</div>\n",
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 [nodeRectInfo]=\"nodeRectInfo\"\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 [nodeRectInfo]=\"nodeRectInfo\"\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 &times;\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==
\ No newline at end of file
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFPbkQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGVBQWU7SUFFekQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7OztZQVRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQiwwbkRBQTRDOzthQUU3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmNOb2RlQ29tcG9uZW50IH0gZnJvbSAnLi9ub2RlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2ZjLWRlZmF1bHQtbm9kZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEZWZhdWx0RmNOb2RlQ29tcG9uZW50IGV4dGVuZHMgRmNOb2RlQ29tcG9uZW50IHtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbn1cbiJdfQ==
\ No newline at end of file
dist/ngx-flowchart/esm5/lib/default-node.component.js
View file @ c31c1112
......@@ -13,7 +13,7 @@ var DefaultFcNodeComponent = /** @class */ (function (_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 &times;\n </div>\n</div>\n",
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 [nodeRectInfo]=\"nodeRectInfo\"\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 [nodeRectInfo]=\"nodeRectInfo\"\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 &times;\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}"]
}] }
];
......@@ -22,4 +22,4 @@ var DefaultFcNodeComponent = /** @class */ (function (_super) {
return DefaultFcNodeComponent;
}(FcNodeComponent));
export { DefaultFcNodeComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRW5EO0lBSzRDLGtEQUFlO0lBRXpEO2VBQ0UsaUJBQU87SUFDVCxDQUFDOztnQkFURixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsOGhEQUE0Qzs7aUJBRTdDOzs7O0lBT0QsNkJBQUM7Q0FBQSxBQVhELENBSzRDLGVBQWUsR0FNMUQ7U0FOWSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjTm9kZUNvbXBvbmVudCB9IGZyb20gJy4vbm9kZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYy1kZWZhdWx0LW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGVmYXVsdEZjTm9kZUNvbXBvbmVudCBleHRlbmRzIEZjTm9kZUNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG59XG4iXX0=
\ No newline at end of file
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRW5EO0lBSzRDLGtEQUFlO0lBRXpEO2VBQ0UsaUJBQU87SUFDVCxDQUFDOztnQkFURixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsMG5EQUE0Qzs7aUJBRTdDOzs7O0lBT0QsNkJBQUM7Q0FBQSxBQVhELENBSzRDLGVBQWUsR0FNMUQ7U0FOWSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjTm9kZUNvbXBvbmVudCB9IGZyb20gJy4vbm9kZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYy1kZWZhdWx0LW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGVmYXVsdEZjTm9kZUNvbXBvbmVudCBleHRlbmRzIEZjTm9kZUNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG59XG4iXX0=
\ No newline at end of file
dist/ngx-flowchart/fesm5/ngx-flowchart.js
View file @ c31c1112
This diff is collapsed.
dist/ngx-flowchart/lib/connector.directive.d.ts
View file @ c31c1112
import { ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FcCallbacks, FcConnector } from './ngx-flowchart.models';
import { FcCallbacks, FcConnector, FcNodeRectInfo } 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;
nodeRectInfo: FcNodeRectInfo;
mouseOverConnector: FcConnector;
constructor(elementRef: ElementRef<HTMLElement>);
ngOnInit(): void;
......
dist/ngx-flowchart/lib/model.service.d.ts
View file @ c31c1112
import { FcModelValidationService } from './modelvalidation.service';
import { FcConnector, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
import { FcConnector, FcConnectorRectInfo, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
import { Observable, Subject } from 'rxjs';
import { EventEmitter } from '@angular/core';
export declare class FcModelService {
......@@ -7,7 +7,7 @@ export declare class FcModelService {
model: FcModel;
private readonly detectChangesSubject;
selectedObjects: any[];
connectorsHtmlElements: HtmlElementMap;
connectorsRectInfos: ConnectorRectInfoMap;
nodesHtmlElements: HtmlElementMap;
canvasHtmlElement: HTMLElement;
dragImage: HTMLImageElement;
......@@ -46,6 +46,9 @@ export declare class FcModelService {
interface HtmlElementMap {
[id: string]: HTMLElement;
}
interface ConnectorRectInfoMap {
[id: string]: FcConnectorRectInfo;
}
declare abstract class AbstractFcModel<T> {
modelService: FcModelService;
protected constructor(modelService: FcModelService);
......@@ -58,8 +61,8 @@ declare abstract class AbstractFcModel<T> {
declare class ConnectorsModel extends AbstractFcModel<FcConnector> {
constructor(modelService: FcModelService);
getConnector(connectorId: string): FcConnector;
getHtmlElement(connectorId: string): HTMLElement;
setHtmlElement(connectorId: string, element: HTMLElement): void;
getConnectorRectInfo(connectorId: string): FcConnectorRectInfo;
setConnectorRectInfo(connectorId: string, connectorRectInfo: FcConnectorRectInfo): void;
private _getCoords;
getCoords(connectorId: string): FcCoords;
getCenteredCoord(connectorId: string): FcCoords;
......@@ -79,7 +82,6 @@ declare class NodesModel extends AbstractFcModel<FcNode> {
}
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;
......
dist/ngx-flowchart/lib/ngx-flowchart.models.d.ts
View file @ c31c1112
......@@ -51,6 +51,20 @@ export interface FcNode extends FcCoords {
readonly?: boolean;
[key: string]: any;
}
export interface FcNodeRectInfo {
width(): number;
height(): number;
top(): number;
left(): number;
right(): number;
bottom(): number;
}
export interface FcConnectorRectInfo {
type: string;
width: number;
height: number;
nodeRectInfo: FcNodeRectInfo;
}
export interface FcEdge {
label?: string;
source?: string;
......
dist/ngx-flowchart/lib/node.component.d.ts
View file @ c31c1112
import { ComponentFactoryResolver, ElementRef, OnChanges, OnInit, SimpleChanges, ViewContainerRef } from '@angular/core';
import { FcCallbacks, FcConnector, FcNode, FcNodeComponentConfig, UserNodeCallbacks } from './ngx-flowchart.models';
import { AfterViewInit, ComponentFactoryResolver, ElementRef, OnChanges, OnInit, SimpleChanges, ViewContainerRef } from '@angular/core';
import { FcCallbacks, FcConnector, FcNode, FcNodeComponentConfig, FcNodeRectInfo, UserNodeCallbacks } from './ngx-flowchart.models';
import { FcModelService } from './model.service';
export declare class FcNodeContainerComponent implements OnInit, OnChanges {
export declare class FcNodeContainerComponent implements OnInit, AfterViewInit, OnChanges {
private nodeComponentConfig;
private elementRef;
private componentFactoryResolver;
......@@ -21,6 +21,7 @@ export declare class FcNodeContainerComponent implements OnInit, OnChanges {
nodeContentContainer: ViewContainerRef;
constructor(nodeComponentConfig: FcNodeComponentConfig, elementRef: ElementRef<HTMLElement>, componentFactoryResolver: ComponentFactoryResolver);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
private updateNodeClass;
private updateNodeComponent;
......@@ -67,5 +68,8 @@ export declare abstract class FcNodeComponent implements OnInit {
canvasResizeThreshold: number;
canvasResizeStep: number;
};
width: number;
height: number;
nodeRectInfo: FcNodeRectInfo;
ngOnInit(): void;
}
projects/ngx-flowchart/src/lib/connector.directive.ts
View file @ c31c1112
import { Directive, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FcCallbacks, FcConnector, FlowchartConstants } from './ngx-flowchart.models';
import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FcCallbacks, FcConnector, FcConnectorRectInfo, FcNodeRectInfo, FlowchartConstants } from './ngx-flowchart.models';
import { FcModelService } from './model.service';
@Directive({
......@@ -17,6 +17,9 @@ export class FcConnectorDirective implements OnInit, OnChanges {
@Input()
connector: FcConnector;
@Input()
nodeRectInfo: FcNodeRectInfo;
@Input()
mouseOverConnector: FcConnector;
......@@ -30,7 +33,13 @@ export class FcConnectorDirective implements OnInit, OnChanges {
element.attr('draggable', 'true');
this.updateConnectorClass();
}
this.modelservice.connectors.setHtmlElement(this.connector.id, element[0]);
const connectorRectInfo: FcConnectorRectInfo = {
type: this.connector.type,
width: this.elementRef.nativeElement.offsetWidth,
height: this.elementRef.nativeElement.offsetHeight,
nodeRectInfo: this.nodeRectInfo
};
this.modelservice.connectors.setConnectorRectInfo(this.connector.id, connectorRectInfo);
}
ngOnChanges(changes: SimpleChanges): void {
......
projects/ngx-flowchart/src/lib/default-node.component.html
View file @ c31c1112
......@@ -8,6 +8,7 @@
<div fc-magnet [connector]="connector" [callbacks]="callbacks"
*ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
<div fc-connector [connector]="connector"
[nodeRectInfo]="nodeRectInfo"
[mouseOverConnector]="mouseOverConnector"
[callbacks]="callbacks"
[modelservice]="modelservice"></div>
......@@ -17,6 +18,7 @@
<div fc-magnet [connector]="connector" [callbacks]="callbacks"
*ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
<div fc-connector [connector]="connector"
[nodeRectInfo]="nodeRectInfo"
[mouseOverConnector]="mouseOverConnector"
[callbacks]="callbacks"
[modelservice]="modelservice"></div>
......
projects/ngx-flowchart/src/lib/model.service.ts
View file @ c31c1112
import { FcModelValidationService } from './modelvalidation.service';
import { FcConnector, FcCoords, FcEdge, FcItemInfo, FcModel, FcNode, FcRectBox } from './ngx-flowchart.models';
import {
FcConnector,
FcConnectorRectInfo,
FcCoords,
FcEdge,
FcItemInfo,
FcModel,
FcNode,
FcRectBox,
FlowchartConstants
} from './ngx-flowchart.models';
import { Observable, of, Subject } from 'rxjs';
import { ChangeDetectorRef, EventEmitter } from '@angular/core';
import { debounceTime } from 'rxjs/operators';
......@@ -11,7 +21,7 @@ export class FcModelService {
private readonly detectChangesSubject: Subject<any>;
selectedObjects: any[];
connectorsHtmlElements: HtmlElementMap = {};
connectorsRectInfos: ConnectorRectInfoMap = {};
nodesHtmlElements: HtmlElementMap = {};
canvasHtmlElement: HTMLElement = null;
dragImage: HTMLImageElement = null;
......@@ -235,6 +245,8 @@ export class FcModelService {
interface HtmlElementMap { [id: string]: HTMLElement; }
interface ConnectorRectInfoMap { [id: string]: FcConnectorRectInfo; }
abstract class AbstractFcModel<T> {
modelService: FcModelService;
......@@ -281,33 +293,32 @@ class ConnectorsModel extends AbstractFcModel<FcConnector> {
}
}
public getHtmlElement(connectorId: string): HTMLElement {
return this.modelService.connectorsHtmlElements[connectorId];
public getConnectorRectInfo(connectorId: string): FcConnectorRectInfo {
return this.modelService.connectorsRectInfos[connectorId];
}
public setHtmlElement(connectorId: string, element: HTMLElement) {
this.modelService.connectorsHtmlElements[connectorId] = element;
public setConnectorRectInfo(connectorId: string, connectorRectInfo: FcConnectorRectInfo) {
this.modelService.connectorsRectInfos[connectorId] = connectorRectInfo;
this.modelService.detectChanges();
}
private _getCoords(connectorId: string, centered?: boolean): FcCoords {
const element = this.getHtmlElement(connectorId);
const connectorRectInfo = this.getConnectorRectInfo(connectorId);
const canvas = this.modelService.canvasHtmlElement;
if (element === null || element === undefined || canvas === null) {
if (connectorRectInfo === null || connectorRectInfo === 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)
};
let x = connectorRectInfo.type === FlowchartConstants.leftConnectorType ?
connectorRectInfo.nodeRectInfo.left() : connectorRectInfo.nodeRectInfo.right();
let y = connectorRectInfo.nodeRectInfo.top() + connectorRectInfo.nodeRectInfo.height() / 2;
if (!centered) {
x -= connectorRectInfo.width / 2;
y -= connectorRectInfo.height / 2;
}
const coords: FcCoords = {
x: Math.round(x),
y: Math.round(y)
};
return coords;
}
......@@ -428,12 +439,6 @@ class EdgesModel extends AbstractFcModel<FcEdge> {
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);
}
......
projects/ngx-flowchart/src/lib/ngx-flowchart.models.ts
View file @ c31c1112
......@@ -64,6 +64,22 @@ export interface FcNode extends FcCoords {
[key: string]: any;
}
export interface FcNodeRectInfo {
width(): number;
height(): number;
top(): number;
left(): number;
right(): number;
bottom(): number;
}
export interface FcConnectorRectInfo {
type: string;
width: number;
height: number;
nodeRectInfo: FcNodeRectInfo;
}
export interface FcEdge {
label?: string;
source?: string;
......
projects/ngx-flowchart/src/lib/node.component.ts
View file @ c31c1112
import {
AfterViewInit,
Component,
ComponentFactoryResolver, Directive,
ElementRef, HostBinding,
......@@ -16,7 +17,7 @@ import {
FcCallbacks,
FcConnector,
FcNode,
FcNodeComponentConfig,
FcNodeComponentConfig, FcNodeRectInfo,
FlowchartConstants,
UserNodeCallbacks
} from './ngx-flowchart.models';
......@@ -27,7 +28,7 @@ import { FcModelService } from './model.service';
template: '<ng-template #nodeContent></ng-template>',
styleUrls: ['./node.component.scss']
})
export class FcNodeContainerComponent implements OnInit, OnChanges {
export class FcNodeContainerComponent implements OnInit, AfterViewInit, OnChanges {
@Input()
callbacks: FcCallbacks;
......@@ -106,6 +107,13 @@ export class FcNodeContainerComponent implements OnInit, OnChanges {
this.nodeComponent.node = this.node;
this.nodeComponent.modelservice = this.modelservice;
this.updateNodeComponent();
this.nodeComponent.width = this.elementRef.nativeElement.offsetWidth;
this.nodeComponent.height = this.elementRef.nativeElement.offsetHeight;
}
ngAfterViewInit(): void {
this.nodeComponent.width = this.elementRef.nativeElement.offsetWidth;
this.nodeComponent.height = this.elementRef.nativeElement.offsetHeight;
}
ngOnChanges(changes: SimpleChanges): void {
......@@ -221,6 +229,36 @@ export abstract class FcNodeComponent implements OnInit {
flowchartConstants = FlowchartConstants;
width: number;
height: number;
nodeRectInfo: FcNodeRectInfo = {
top: () => {
return this.node.y;
},
left: () => {
return this.node.x;
},
bottom: () => {
return this.node.y + this.height;
},
right: () => {
return this.node.x + this.width;
},
width: () => {
return this.width;
},
height: () => {
return this.height;
}
};
ngOnInit(): void {
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment