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 { ...@@ -12,10 +12,10 @@ export class DefaultFcNodeComponent extends FcNodeComponent {
DefaultFcNodeComponent.decorators = [ DefaultFcNodeComponent.decorators = [
{ type: Component, args: [{ { type: Component, args: [{
selector: 'fc-default-node', 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}"] 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 */ /** @nocollapse */
DefaultFcNodeComponent.ctorParameters = () => []; DefaultFcNodeComponent.ctorParameters = () => [];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFPbkQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGVBQWU7SUFFekQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7OztZQVRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQiw4aERBQTRDOzthQUU3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmNOb2RlQ29tcG9uZW50IH0gZnJvbSAnLi9ub2RlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2ZjLWRlZmF1bHQtbm9kZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEZWZhdWx0RmNOb2RlQ29tcG9uZW50IGV4dGVuZHMgRmNOb2RlQ29tcG9uZW50IHtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbn1cbiJdfQ== //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFPbkQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGVBQWU7SUFFekQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7OztZQVRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsaUJBQWlCO2dCQUMzQiwwbkRBQTRDOzthQUU3QyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmNOb2RlQ29tcG9uZW50IH0gZnJvbSAnLi9ub2RlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2ZjLWRlZmF1bHQtbm9kZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBEZWZhdWx0RmNOb2RlQ29tcG9uZW50IGV4dGVuZHMgRmNOb2RlQ29tcG9uZW50IHtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICB9XG5cbn1cbiJdfQ==
\ No newline at end of file \ 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) { ...@@ -13,7 +13,7 @@ var DefaultFcNodeComponent = /** @class */ (function (_super) {
DefaultFcNodeComponent.decorators = [ DefaultFcNodeComponent.decorators = [
{ type: Component, args: [{ { type: Component, args: [{
selector: 'fc-default-node', 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}"] 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) { ...@@ -22,4 +22,4 @@ var DefaultFcNodeComponent = /** @class */ (function (_super) {
return DefaultFcNodeComponent; return DefaultFcNodeComponent;
}(FcNodeComponent)); }(FcNodeComponent));
export { DefaultFcNodeComponent }; export { DefaultFcNodeComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRW5EO0lBSzRDLGtEQUFlO0lBRXpEO2VBQ0UsaUJBQU87SUFDVCxDQUFDOztnQkFURixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsOGhEQUE0Qzs7aUJBRTdDOzs7O0lBT0QsNkJBQUM7Q0FBQSxBQVhELENBSzRDLGVBQWUsR0FNMUQ7U0FOWSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjTm9kZUNvbXBvbmVudCB9IGZyb20gJy4vbm9kZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYy1kZWZhdWx0LW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGVmYXVsdEZjTm9kZUNvbXBvbmVudCBleHRlbmRzIEZjTm9kZUNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG59XG4iXX0= //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1mbG93Y2hhcnQvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRW5EO0lBSzRDLGtEQUFlO0lBRXpEO2VBQ0UsaUJBQU87SUFDVCxDQUFDOztnQkFURixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsMG5EQUE0Qzs7aUJBRTdDOzs7O0lBT0QsNkJBQUM7Q0FBQSxBQVhELENBSzRDLGVBQWUsR0FNMUQ7U0FOWSxzQkFBc0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjTm9kZUNvbXBvbmVudCB9IGZyb20gJy4vbm9kZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYy1kZWZhdWx0LW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGVmYXVsdEZjTm9kZUNvbXBvbmVudCBleHRlbmRzIEZjTm9kZUNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG59XG4iXX0=
\ No newline at end of file \ 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 { 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'; import { FcModelService } from './model.service';
export declare class FcConnectorDirective implements OnInit, OnChanges { export declare class FcConnectorDirective implements OnInit, OnChanges {
elementRef: ElementRef<HTMLElement>; elementRef: ElementRef<HTMLElement>;
callbacks: FcCallbacks; callbacks: FcCallbacks;
modelservice: FcModelService; modelservice: FcModelService;
connector: FcConnector; connector: FcConnector;
nodeRectInfo: FcNodeRectInfo;
mouseOverConnector: FcConnector; mouseOverConnector: FcConnector;
constructor(elementRef: ElementRef<HTMLElement>); constructor(elementRef: ElementRef<HTMLElement>);
ngOnInit(): void; ngOnInit(): void;
......
dist/ngx-flowchart/lib/model.service.d.ts
View file @ c31c1112
import { FcModelValidationService } from './modelvalidation.service'; 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 { Observable, Subject } from 'rxjs';
import { EventEmitter } from '@angular/core'; import { EventEmitter } from '@angular/core';
export declare class FcModelService { export declare class FcModelService {
...@@ -7,7 +7,7 @@ export declare class FcModelService { ...@@ -7,7 +7,7 @@ export declare class FcModelService {
model: FcModel; model: FcModel;
private readonly detectChangesSubject; private readonly detectChangesSubject;
selectedObjects: any[]; selectedObjects: any[];
connectorsHtmlElements: HtmlElementMap; connectorsRectInfos: ConnectorRectInfoMap;
nodesHtmlElements: HtmlElementMap; nodesHtmlElements: HtmlElementMap;
canvasHtmlElement: HTMLElement; canvasHtmlElement: HTMLElement;
dragImage: HTMLImageElement; dragImage: HTMLImageElement;
...@@ -46,6 +46,9 @@ export declare class FcModelService { ...@@ -46,6 +46,9 @@ export declare class FcModelService {
interface HtmlElementMap { interface HtmlElementMap {
[id: string]: HTMLElement; [id: string]: HTMLElement;
} }
interface ConnectorRectInfoMap {
[id: string]: FcConnectorRectInfo;
}
declare abstract class AbstractFcModel<T> { declare abstract class AbstractFcModel<T> {
modelService: FcModelService; modelService: FcModelService;
protected constructor(modelService: FcModelService); protected constructor(modelService: FcModelService);
...@@ -58,8 +61,8 @@ declare abstract class AbstractFcModel<T> { ...@@ -58,8 +61,8 @@ declare abstract class AbstractFcModel<T> {
declare class ConnectorsModel extends AbstractFcModel<FcConnector> { declare class ConnectorsModel extends AbstractFcModel<FcConnector> {
constructor(modelService: FcModelService); constructor(modelService: FcModelService);
getConnector(connectorId: string): FcConnector; getConnector(connectorId: string): FcConnector;
getHtmlElement(connectorId: string): HTMLElement; getConnectorRectInfo(connectorId: string): FcConnectorRectInfo;
setHtmlElement(connectorId: string, element: HTMLElement): void; setConnectorRectInfo(connectorId: string, connectorRectInfo: FcConnectorRectInfo): void;
private _getCoords; private _getCoords;
getCoords(connectorId: string): FcCoords; getCoords(connectorId: string): FcCoords;
getCenteredCoord(connectorId: string): FcCoords; getCenteredCoord(connectorId: string): FcCoords;
...@@ -79,7 +82,6 @@ declare class NodesModel extends AbstractFcModel<FcNode> { ...@@ -79,7 +82,6 @@ declare class NodesModel extends AbstractFcModel<FcNode> {
} }
declare class EdgesModel extends AbstractFcModel<FcEdge> { declare class EdgesModel extends AbstractFcModel<FcEdge> {
constructor(modelService: FcModelService); constructor(modelService: FcModelService);
ready(edge: FcEdge): boolean;
sourceCoord(edge: FcEdge): FcCoords; sourceCoord(edge: FcEdge): FcCoords;
destCoord(edge: FcEdge): FcCoords; destCoord(edge: FcEdge): FcCoords;
delete(edge: FcEdge): void; 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 { ...@@ -51,6 +51,20 @@ export interface FcNode extends FcCoords {
readonly?: boolean; readonly?: boolean;
[key: string]: any; [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 { export interface FcEdge {
label?: string; label?: string;
source?: 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 { AfterViewInit, ComponentFactoryResolver, ElementRef, OnChanges, OnInit, SimpleChanges, ViewContainerRef } from '@angular/core';
import { FcCallbacks, FcConnector, FcNode, FcNodeComponentConfig, UserNodeCallbacks } from './ngx-flowchart.models'; import { FcCallbacks, FcConnector, FcNode, FcNodeComponentConfig, FcNodeRectInfo, UserNodeCallbacks } from './ngx-flowchart.models';
import { FcModelService } from './model.service'; import { FcModelService } from './model.service';
export declare class FcNodeContainerComponent implements OnInit, OnChanges { export declare class FcNodeContainerComponent implements OnInit, AfterViewInit, OnChanges {
private nodeComponentConfig; private nodeComponentConfig;
private elementRef; private elementRef;
private componentFactoryResolver; private componentFactoryResolver;
...@@ -21,6 +21,7 @@ export declare class FcNodeContainerComponent implements OnInit, OnChanges { ...@@ -21,6 +21,7 @@ export declare class FcNodeContainerComponent implements OnInit, OnChanges {
nodeContentContainer: ViewContainerRef; nodeContentContainer: ViewContainerRef;
constructor(nodeComponentConfig: FcNodeComponentConfig, elementRef: ElementRef<HTMLElement>, componentFactoryResolver: ComponentFactoryResolver); constructor(nodeComponentConfig: FcNodeComponentConfig, elementRef: ElementRef<HTMLElement>, componentFactoryResolver: ComponentFactoryResolver);
ngOnInit(): void; ngOnInit(): void;
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void; ngOnChanges(changes: SimpleChanges): void;
private updateNodeClass; private updateNodeClass;
private updateNodeComponent; private updateNodeComponent;
...@@ -67,5 +68,8 @@ export declare abstract class FcNodeComponent implements OnInit { ...@@ -67,5 +68,8 @@ export declare abstract class FcNodeComponent implements OnInit {
canvasResizeThreshold: number; canvasResizeThreshold: number;
canvasResizeStep: number; canvasResizeStep: number;
}; };
width: number;
height: number;
nodeRectInfo: FcNodeRectInfo;
ngOnInit(): void; 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 { AfterViewInit, Directive, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { FcCallbacks, FcConnector, FlowchartConstants } from './ngx-flowchart.models'; import { FcCallbacks, FcConnector, FcConnectorRectInfo, FcNodeRectInfo, FlowchartConstants } from './ngx-flowchart.models';
import { FcModelService } from './model.service'; import { FcModelService } from './model.service';
@Directive({ @Directive({
...@@ -17,6 +17,9 @@ export class FcConnectorDirective implements OnInit, OnChanges { ...@@ -17,6 +17,9 @@ export class FcConnectorDirective implements OnInit, OnChanges {
@Input() @Input()
connector: FcConnector; connector: FcConnector;
@Input()
nodeRectInfo: FcNodeRectInfo;
@Input() @Input()
mouseOverConnector: FcConnector; mouseOverConnector: FcConnector;
...@@ -30,7 +33,13 @@ export class FcConnectorDirective implements OnInit, OnChanges { ...@@ -30,7 +33,13 @@ export class FcConnectorDirective implements OnInit, OnChanges {
element.attr('draggable', 'true'); element.attr('draggable', 'true');
this.updateConnectorClass(); 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 { ngOnChanges(changes: SimpleChanges): void {
......
projects/ngx-flowchart/src/lib/default-node.component.html
View file @ c31c1112
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<div fc-magnet [connector]="connector" [callbacks]="callbacks" <div fc-magnet [connector]="connector" [callbacks]="callbacks"
*ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)"> *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
<div fc-connector [connector]="connector" <div fc-connector [connector]="connector"
[nodeRectInfo]="nodeRectInfo"
[mouseOverConnector]="mouseOverConnector" [mouseOverConnector]="mouseOverConnector"
[callbacks]="callbacks" [callbacks]="callbacks"
[modelservice]="modelservice"></div> [modelservice]="modelservice"></div>
...@@ -17,6 +18,7 @@ ...@@ -17,6 +18,7 @@
<div fc-magnet [connector]="connector" [callbacks]="callbacks" <div fc-magnet [connector]="connector" [callbacks]="callbacks"
*ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)"> *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
<div fc-connector [connector]="connector" <div fc-connector [connector]="connector"
[nodeRectInfo]="nodeRectInfo"
[mouseOverConnector]="mouseOverConnector" [mouseOverConnector]="mouseOverConnector"
[callbacks]="callbacks" [callbacks]="callbacks"
[modelservice]="modelservice"></div> [modelservice]="modelservice"></div>
......
projects/ngx-flowchart/src/lib/model.service.ts
View file @ c31c1112
import { FcModelValidationService } from './modelvalidation.service'; 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 { Observable, of, Subject } from 'rxjs';
import { ChangeDetectorRef, EventEmitter } from '@angular/core'; import { ChangeDetectorRef, EventEmitter } from '@angular/core';
import { debounceTime } from 'rxjs/operators'; import { debounceTime } from 'rxjs/operators';
...@@ -11,7 +21,7 @@ export class FcModelService { ...@@ -11,7 +21,7 @@ export class FcModelService {
private readonly detectChangesSubject: Subject<any>; private readonly detectChangesSubject: Subject<any>;
selectedObjects: any[]; selectedObjects: any[];
connectorsHtmlElements: HtmlElementMap = {}; connectorsRectInfos: ConnectorRectInfoMap = {};
nodesHtmlElements: HtmlElementMap = {}; nodesHtmlElements: HtmlElementMap = {};
canvasHtmlElement: HTMLElement = null; canvasHtmlElement: HTMLElement = null;
dragImage: HTMLImageElement = null; dragImage: HTMLImageElement = null;
...@@ -235,6 +245,8 @@ export class FcModelService { ...@@ -235,6 +245,8 @@ export class FcModelService {
interface HtmlElementMap { [id: string]: HTMLElement; } interface HtmlElementMap { [id: string]: HTMLElement; }
interface ConnectorRectInfoMap { [id: string]: FcConnectorRectInfo; }
abstract class AbstractFcModel<T> { abstract class AbstractFcModel<T> {
modelService: FcModelService; modelService: FcModelService;
...@@ -281,33 +293,32 @@ class ConnectorsModel extends AbstractFcModel<FcConnector> { ...@@ -281,33 +293,32 @@ class ConnectorsModel extends AbstractFcModel<FcConnector> {
} }
} }
public getHtmlElement(connectorId: string): HTMLElement { public getConnectorRectInfo(connectorId: string): FcConnectorRectInfo {
return this.modelService.connectorsHtmlElements[connectorId]; return this.modelService.connectorsRectInfos[connectorId];
} }
public setHtmlElement(connectorId: string, element: HTMLElement) { public setConnectorRectInfo(connectorId: string, connectorRectInfo: FcConnectorRectInfo) {
this.modelService.connectorsHtmlElements[connectorId] = element; this.modelService.connectorsRectInfos[connectorId] = connectorRectInfo;
this.modelService.detectChanges(); this.modelService.detectChanges();
} }
private _getCoords(connectorId: string, centered?: boolean): FcCoords { private _getCoords(connectorId: string, centered?: boolean): FcCoords {
const element = this.getHtmlElement(connectorId); const connectorRectInfo = this.getConnectorRectInfo(connectorId);
const canvas = this.modelService.canvasHtmlElement; const canvas = this.modelService.canvasHtmlElement;
if (element === null || element === undefined || canvas === null) { if (connectorRectInfo === null || connectorRectInfo === undefined || canvas === null) {
return {x: 0, y: 0}; return {x: 0, y: 0};
} }
const connectorElementBox = element.getBoundingClientRect(); let x = connectorRectInfo.type === FlowchartConstants.leftConnectorType ?
const canvasElementBox = canvas.getBoundingClientRect(); connectorRectInfo.nodeRectInfo.left() : connectorRectInfo.nodeRectInfo.right();
let coords: FcCoords = { let y = connectorRectInfo.nodeRectInfo.top() + connectorRectInfo.nodeRectInfo.height() / 2;
x: connectorElementBox.left - canvasElementBox.left, if (!centered) {
y: connectorElementBox.top - canvasElementBox.top x -= connectorRectInfo.width / 2;
}; y -= connectorRectInfo.height / 2;
if (centered) {
coords = {
x: Math.round(coords.x + element.offsetWidth / 2),
y: Math.round(coords.y + element.offsetHeight / 2)
};
} }
const coords: FcCoords = {
x: Math.round(x),
y: Math.round(y)
};
return coords; return coords;
} }
...@@ -428,12 +439,6 @@ class EdgesModel extends AbstractFcModel<FcEdge> { ...@@ -428,12 +439,6 @@ class EdgesModel extends AbstractFcModel<FcEdge> {
super(modelService); 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 { public sourceCoord(edge: FcEdge): FcCoords {
return this.modelService.connectors.getCenteredCoord(edge.source); 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 { ...@@ -64,6 +64,22 @@ export interface FcNode extends FcCoords {
[key: string]: any; [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 { export interface FcEdge {
label?: string; label?: string;
source?: string; source?: string;
......
projects/ngx-flowchart/src/lib/node.component.ts
View file @ c31c1112
import { import {
AfterViewInit,
Component, Component,
ComponentFactoryResolver, Directive, ComponentFactoryResolver, Directive,
ElementRef, HostBinding, ElementRef, HostBinding,
...@@ -16,7 +17,7 @@ import { ...@@ -16,7 +17,7 @@ import {
FcCallbacks, FcCallbacks,
FcConnector, FcConnector,
FcNode, FcNode,
FcNodeComponentConfig, FcNodeComponentConfig, FcNodeRectInfo,
FlowchartConstants, FlowchartConstants,
UserNodeCallbacks UserNodeCallbacks
} from './ngx-flowchart.models'; } from './ngx-flowchart.models';
...@@ -27,7 +28,7 @@ import { FcModelService } from './model.service'; ...@@ -27,7 +28,7 @@ import { FcModelService } from './model.service';
template: '<ng-template #nodeContent></ng-template>', template: '<ng-template #nodeContent></ng-template>',
styleUrls: ['./node.component.scss'] styleUrls: ['./node.component.scss']
}) })
export class FcNodeContainerComponent implements OnInit, OnChanges { export class FcNodeContainerComponent implements OnInit, AfterViewInit, OnChanges {
@Input() @Input()
callbacks: FcCallbacks; callbacks: FcCallbacks;
...@@ -106,6 +107,13 @@ export class FcNodeContainerComponent implements OnInit, OnChanges { ...@@ -106,6 +107,13 @@ export class FcNodeContainerComponent implements OnInit, OnChanges {
this.nodeComponent.node = this.node; this.nodeComponent.node = this.node;
this.nodeComponent.modelservice = this.modelservice; this.nodeComponent.modelservice = this.modelservice;
this.updateNodeComponent(); 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 { ngOnChanges(changes: SimpleChanges): void {
...@@ -221,6 +229,36 @@ export abstract class FcNodeComponent implements OnInit { ...@@ -221,6 +229,36 @@ export abstract class FcNodeComponent implements OnInit {
flowchartConstants = FlowchartConstants; 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 { 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