Skip to content

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

Update angular and other thirdparty versions

parent a4157b0e
Show whitespace changes
Inline Side-by-side
Showing with 2302 additions and 1609 deletions
dist/ngx-flowchart/bundles/ngx-flowchart.umd.js
View file @ 7a02f474
......@@ -72,10 +72,11 @@
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
......@@ -113,14 +114,15 @@
}
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
return {
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
......@@ -201,6 +203,21 @@
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, privateMap) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to get private field on non-instance");
}
return privateMap.get(receiver);
}
function __classPrivateFieldSet(receiver, privateMap, value) {
if (!privateMap.has(receiver)) {
throw new TypeError("attempted to set private field on non-instance");
}
privateMap.set(receiver, value);
return value;
}
var FC_NODE_COMPONENT_CONFIG = new core.InjectionToken('fc-node.component.config');
var htmlPrefix = 'fc';
var leftConnectorType = 'leftConnector';
......@@ -1965,7 +1982,7 @@
selector: 'fc-canvas',
template: "<div (click)=\"canvasClick($event)\" class=\"fc-canvas-container\">\n <svg class=\"fc-canvas-svg\">\n <defs>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"gray\" fill=\"gray\" stroke-width=\"1px\"/>\n </marker>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"red\" fill=\"red\" stroke-width=\"1px\"/>\n </marker>\n </defs>\n <g *ngFor=\"let edge of model.edges; let $index = index\">\n <path\n [attr.id]=\"'fc-edge-path-'+$index\"\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||\n flowchartConstants.edgeClass\"\n [attr.d]=\"getEdgeDAttribute(edge)\"\n [attr.marker-end]=\"'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'\">\n </path>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\">\n <path [attr.class]=\"flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass\"\n [attr.d]=\"edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"\n [attr.cx]=\"edgeDraggingService.edgeDragging.dragPoint2.x\"\n [attr.cy]=\"edgeDraggingService.edgeDragging.dragPoint2.y\">\n </circle>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationShadow\"\n class=\"shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}\"\n style=\"display:none\">\n <path d=\"\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"></circle>\n </g>\n </svg>\n <ng-container *ngFor=\"let node of model.nodes\">\n <fc-node\n [selected]=\"modelService.nodes.isSelected(node)\"\n [edit]=\"modelService.nodes.isEdit(node)\"\n [underMouse]=\"node === mouseoverService.mouseoverscope.node\"\n [node]=\"node\"\n [mouseOverConnector]=\"mouseoverService.mouseoverscope.connector\"\n [modelservice]=\"modelService\"\n [dragging]=\"nodeDraggingService.isDraggingNode(node)\"\n [callbacks]=\"callbacks\"\n [userNodeCallbacks]=\"userNodeCallbacks\">\n </fc-node>\n </ng-container>\n <div *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\"\n [attr.class]=\"'fc-noselect ' + flowchartConstants.edgeLabelClass\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'\n }\">\n <div class=\"fc-edge-label-text\">\n <span [attr.id]=\"'fc-edge-label-dragging'\" *ngIf=\"edgeDraggingService.edgeDragging.dragLabel\">{{edgeDraggingService.edgeDragging.dragLabel}}</span>\n </div>\n </div>\n <div\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||\n (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||\n flowchartConstants.edgeLabelClass)\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'\n }\"\n *ngFor=\"let edge of model.edges; let $index = index\">\n <div class=\"fc-edge-label-text\">\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodeedit\" (click)=\"edgeEdit($event, edge)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodedelete\" (click)=\"edgeRemove($event, edge)\">\n &times;\n </div>\n <span [attr.id]=\"'fc-edge-label-'+$index\" *ngIf=\"edge.label\">{{edge.label}}</span>\n </div>\n </div>\n <div id=\"select-rectangle\" class=\"fc-select-rectangle\" hidden>\n </div>\n</div>\n",
changeDetection: core.ChangeDetectionStrategy.OnPush,
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;-webkit-transition:stroke-width .2s;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform-origin:bottom left;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{-webkit-transform:scale(1.25);transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;transition:transform .2s;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
}),
__metadata("design:paramtypes", [core.ElementRef,
core.IterableDiffers,
......@@ -2430,7 +2447,7 @@
core.Component({
selector: 'fc-node',
template: '<ng-template #nodeContent></ng-template>',
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{-webkit-box-align:center;align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:-webkit-box;display:flex;-webkit-box-flex:1;flex-grow:1;height:60px;-webkit-box-pack:center;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:flex;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:flex;flex-grow:1;height:60px;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
}),
__param(0, core.Inject(FC_NODE_COMPONENT_CONFIG)),
__metadata("design:paramtypes", [Object, core.ElementRef,
......@@ -2516,7 +2533,7 @@
core.Component({
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 [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;-webkit-transition:opacity .2s;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align: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}"]
}),
__metadata("design:paramtypes", [])
], DefaultFcNodeComponent);
......
dist/ngx-flowchart/bundles/ngx-flowchart.umd.js.map
View file @ 7a02f474
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 @ 7a02f474
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 @ 7a02f474
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 @ 7a02f474
......@@ -10,7 +10,7 @@ DefaultFcNodeComponent = __decorate([
Component({
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 [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;-webkit-transition:opacity .2s;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align: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}"]
}),
__metadata("design:paramtypes", [])
], DefaultFcNodeComponent);
......
dist/ngx-flowchart/esm2015/lib/ngx-flowchart.component.js
View file @ 7a02f474
......@@ -296,7 +296,7 @@ NgxFlowchartComponent = __decorate([
selector: 'fc-canvas',
template: "<div (click)=\"canvasClick($event)\" class=\"fc-canvas-container\">\n <svg class=\"fc-canvas-svg\">\n <defs>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"gray\" fill=\"gray\" stroke-width=\"1px\"/>\n </marker>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"red\" fill=\"red\" stroke-width=\"1px\"/>\n </marker>\n </defs>\n <g *ngFor=\"let edge of model.edges; let $index = index\">\n <path\n [attr.id]=\"'fc-edge-path-'+$index\"\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||\n flowchartConstants.edgeClass\"\n [attr.d]=\"getEdgeDAttribute(edge)\"\n [attr.marker-end]=\"'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'\">\n </path>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\">\n <path [attr.class]=\"flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass\"\n [attr.d]=\"edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"\n [attr.cx]=\"edgeDraggingService.edgeDragging.dragPoint2.x\"\n [attr.cy]=\"edgeDraggingService.edgeDragging.dragPoint2.y\">\n </circle>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationShadow\"\n class=\"shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}\"\n style=\"display:none\">\n <path d=\"\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"></circle>\n </g>\n </svg>\n <ng-container *ngFor=\"let node of model.nodes\">\n <fc-node\n [selected]=\"modelService.nodes.isSelected(node)\"\n [edit]=\"modelService.nodes.isEdit(node)\"\n [underMouse]=\"node === mouseoverService.mouseoverscope.node\"\n [node]=\"node\"\n [mouseOverConnector]=\"mouseoverService.mouseoverscope.connector\"\n [modelservice]=\"modelService\"\n [dragging]=\"nodeDraggingService.isDraggingNode(node)\"\n [callbacks]=\"callbacks\"\n [userNodeCallbacks]=\"userNodeCallbacks\">\n </fc-node>\n </ng-container>\n <div *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\"\n [attr.class]=\"'fc-noselect ' + flowchartConstants.edgeLabelClass\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'\n }\">\n <div class=\"fc-edge-label-text\">\n <span [attr.id]=\"'fc-edge-label-dragging'\" *ngIf=\"edgeDraggingService.edgeDragging.dragLabel\">{{edgeDraggingService.edgeDragging.dragLabel}}</span>\n </div>\n </div>\n <div\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||\n (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||\n flowchartConstants.edgeLabelClass)\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'\n }\"\n *ngFor=\"let edge of model.edges; let $index = index\">\n <div class=\"fc-edge-label-text\">\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodeedit\" (click)=\"edgeEdit($event, edge)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodedelete\" (click)=\"edgeRemove($event, edge)\">\n &times;\n </div>\n <span [attr.id]=\"'fc-edge-label-'+$index\" *ngIf=\"edge.label\">{{edge.label}}</span>\n </div>\n </div>\n <div id=\"select-rectangle\" class=\"fc-select-rectangle\" hidden>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;-webkit-transition:stroke-width .2s;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform-origin:bottom left;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{-webkit-transform:scale(1.25);transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;transition:transform .2s;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
}),
__metadata("design:paramtypes", [ElementRef,
IterableDiffers,
......
dist/ngx-flowchart/esm2015/lib/node.component.js
View file @ 7a02f474
......@@ -215,7 +215,7 @@ FcNodeContainerComponent = __decorate([
Component({
selector: 'fc-node',
template: '<ng-template #nodeContent></ng-template>',
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{-webkit-box-align:center;align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:-webkit-box;display:flex;-webkit-box-flex:1;flex-grow:1;height:60px;-webkit-box-pack:center;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:flex;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:flex;flex-grow:1;height:60px;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
}),
__param(0, Inject(FC_NODE_COMPONENT_CONFIG)),
__metadata("design:paramtypes", [Object, ElementRef,
......
dist/ngx-flowchart/esm5/lib/default-node.component.js
View file @ 7a02f474
......@@ -10,7 +10,7 @@ var DefaultFcNodeComponent = /** @class */ (function (_super) {
Component({
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 [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;-webkit-transition:opacity .2s;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align: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}"]
}),
__metadata("design:paramtypes", [])
], DefaultFcNodeComponent);
......
dist/ngx-flowchart/esm5/lib/ngx-flowchart.component.js
View file @ 7a02f474
......@@ -317,7 +317,7 @@ var NgxFlowchartComponent = /** @class */ (function () {
selector: 'fc-canvas',
template: "<div (click)=\"canvasClick($event)\" class=\"fc-canvas-container\">\n <svg class=\"fc-canvas-svg\">\n <defs>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"gray\" fill=\"gray\" stroke-width=\"1px\"/>\n </marker>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"red\" fill=\"red\" stroke-width=\"1px\"/>\n </marker>\n </defs>\n <g *ngFor=\"let edge of model.edges; let $index = index\">\n <path\n [attr.id]=\"'fc-edge-path-'+$index\"\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||\n flowchartConstants.edgeClass\"\n [attr.d]=\"getEdgeDAttribute(edge)\"\n [attr.marker-end]=\"'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'\">\n </path>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\">\n <path [attr.class]=\"flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass\"\n [attr.d]=\"edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"\n [attr.cx]=\"edgeDraggingService.edgeDragging.dragPoint2.x\"\n [attr.cy]=\"edgeDraggingService.edgeDragging.dragPoint2.y\">\n </circle>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationShadow\"\n class=\"shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}\"\n style=\"display:none\">\n <path d=\"\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"></circle>\n </g>\n </svg>\n <ng-container *ngFor=\"let node of model.nodes\">\n <fc-node\n [selected]=\"modelService.nodes.isSelected(node)\"\n [edit]=\"modelService.nodes.isEdit(node)\"\n [underMouse]=\"node === mouseoverService.mouseoverscope.node\"\n [node]=\"node\"\n [mouseOverConnector]=\"mouseoverService.mouseoverscope.connector\"\n [modelservice]=\"modelService\"\n [dragging]=\"nodeDraggingService.isDraggingNode(node)\"\n [callbacks]=\"callbacks\"\n [userNodeCallbacks]=\"userNodeCallbacks\">\n </fc-node>\n </ng-container>\n <div *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\"\n [attr.class]=\"'fc-noselect ' + flowchartConstants.edgeLabelClass\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'\n }\">\n <div class=\"fc-edge-label-text\">\n <span [attr.id]=\"'fc-edge-label-dragging'\" *ngIf=\"edgeDraggingService.edgeDragging.dragLabel\">{{edgeDraggingService.edgeDragging.dragLabel}}</span>\n </div>\n </div>\n <div\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||\n (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||\n flowchartConstants.edgeLabelClass)\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'\n }\"\n *ngFor=\"let edge of model.edges; let $index = index\">\n <div class=\"fc-edge-label-text\">\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodeedit\" (click)=\"edgeEdit($event, edge)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodedelete\" (click)=\"edgeRemove($event, edge)\">\n &times;\n </div>\n <span [attr.id]=\"'fc-edge-label-'+$index\" *ngIf=\"edge.label\">{{edge.label}}</span>\n </div>\n </div>\n <div id=\"select-rectangle\" class=\"fc-select-rectangle\" hidden>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;-webkit-transition:stroke-width .2s;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform-origin:bottom left;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{-webkit-transform:scale(1.25);transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;transition:transform .2s;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
}),
__metadata("design:paramtypes", [ElementRef,
IterableDiffers,
......
dist/ngx-flowchart/esm5/lib/node.component.js
View file @ 7a02f474
......@@ -237,7 +237,7 @@ var FcNodeContainerComponent = /** @class */ (function () {
Component({
selector: 'fc-node',
template: '<ng-template #nodeContent></ng-template>',
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{-webkit-box-align:center;align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:-webkit-box;display:flex;-webkit-box-flex:1;flex-grow:1;height:60px;-webkit-box-pack:center;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:flex;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:flex;flex-grow:1;height:60px;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
}),
__param(0, Inject(FC_NODE_COMPONENT_CONFIG)),
__metadata("design:paramtypes", [Object, ElementRef,
......
dist/ngx-flowchart/fesm2015/ngx-flowchart.js
View file @ 7a02f474
......@@ -1598,7 +1598,7 @@ NgxFlowchartComponent = __decorate([
selector: 'fc-canvas',
template: "<div (click)=\"canvasClick($event)\" class=\"fc-canvas-container\">\n <svg class=\"fc-canvas-svg\">\n <defs>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"gray\" fill=\"gray\" stroke-width=\"1px\"/>\n </marker>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"red\" fill=\"red\" stroke-width=\"1px\"/>\n </marker>\n </defs>\n <g *ngFor=\"let edge of model.edges; let $index = index\">\n <path\n [attr.id]=\"'fc-edge-path-'+$index\"\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||\n flowchartConstants.edgeClass\"\n [attr.d]=\"getEdgeDAttribute(edge)\"\n [attr.marker-end]=\"'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'\">\n </path>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\">\n <path [attr.class]=\"flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass\"\n [attr.d]=\"edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"\n [attr.cx]=\"edgeDraggingService.edgeDragging.dragPoint2.x\"\n [attr.cy]=\"edgeDraggingService.edgeDragging.dragPoint2.y\">\n </circle>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationShadow\"\n class=\"shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}\"\n style=\"display:none\">\n <path d=\"\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"></circle>\n </g>\n </svg>\n <ng-container *ngFor=\"let node of model.nodes\">\n <fc-node\n [selected]=\"modelService.nodes.isSelected(node)\"\n [edit]=\"modelService.nodes.isEdit(node)\"\n [underMouse]=\"node === mouseoverService.mouseoverscope.node\"\n [node]=\"node\"\n [mouseOverConnector]=\"mouseoverService.mouseoverscope.connector\"\n [modelservice]=\"modelService\"\n [dragging]=\"nodeDraggingService.isDraggingNode(node)\"\n [callbacks]=\"callbacks\"\n [userNodeCallbacks]=\"userNodeCallbacks\">\n </fc-node>\n </ng-container>\n <div *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\"\n [attr.class]=\"'fc-noselect ' + flowchartConstants.edgeLabelClass\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'\n }\">\n <div class=\"fc-edge-label-text\">\n <span [attr.id]=\"'fc-edge-label-dragging'\" *ngIf=\"edgeDraggingService.edgeDragging.dragLabel\">{{edgeDraggingService.edgeDragging.dragLabel}}</span>\n </div>\n </div>\n <div\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||\n (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||\n flowchartConstants.edgeLabelClass)\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'\n }\"\n *ngFor=\"let edge of model.edges; let $index = index\">\n <div class=\"fc-edge-label-text\">\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodeedit\" (click)=\"edgeEdit($event, edge)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodedelete\" (click)=\"edgeRemove($event, edge)\">\n &times;\n </div>\n <span [attr.id]=\"'fc-edge-label-'+$index\" *ngIf=\"edge.label\">{{edge.label}}</span>\n </div>\n </div>\n <div id=\"select-rectangle\" class=\"fc-select-rectangle\" hidden>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;-webkit-transition:stroke-width .2s;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform-origin:bottom left;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{-webkit-transform:scale(1.25);transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;transition:transform .2s;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
}),
__metadata("design:paramtypes", [ElementRef,
IterableDiffers,
......@@ -2026,7 +2026,7 @@ FcNodeContainerComponent = __decorate([
Component({
selector: 'fc-node',
template: '<ng-template #nodeContent></ng-template>',
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{-webkit-box-align:center;align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:-webkit-box;display:flex;-webkit-box-flex:1;flex-grow:1;height:60px;-webkit-box-pack:center;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:flex;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:flex;flex-grow:1;height:60px;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
}),
__param(0, Inject(FC_NODE_COMPONENT_CONFIG)),
__metadata("design:paramtypes", [Object, ElementRef,
......@@ -2108,7 +2108,7 @@ DefaultFcNodeComponent = __decorate([
Component({
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 [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;-webkit-transition:opacity .2s;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align: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}"]
}),
__metadata("design:paramtypes", [])
], DefaultFcNodeComponent);
......
dist/ngx-flowchart/fesm2015/ngx-flowchart.js.map
View file @ 7a02f474
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/ngx-flowchart/fesm5/ngx-flowchart.js
View file @ 7a02f474
......@@ -1769,7 +1769,7 @@ var NgxFlowchartComponent = /** @class */ (function () {
selector: 'fc-canvas',
template: "<div (click)=\"canvasClick($event)\" class=\"fc-canvas-container\">\n <svg class=\"fc-canvas-svg\">\n <defs>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"gray\" fill=\"gray\" stroke-width=\"1px\"/>\n </marker>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"red\" fill=\"red\" stroke-width=\"1px\"/>\n </marker>\n </defs>\n <g *ngFor=\"let edge of model.edges; let $index = index\">\n <path\n [attr.id]=\"'fc-edge-path-'+$index\"\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||\n flowchartConstants.edgeClass\"\n [attr.d]=\"getEdgeDAttribute(edge)\"\n [attr.marker-end]=\"'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'\">\n </path>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\">\n <path [attr.class]=\"flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass\"\n [attr.d]=\"edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"\n [attr.cx]=\"edgeDraggingService.edgeDragging.dragPoint2.x\"\n [attr.cy]=\"edgeDraggingService.edgeDragging.dragPoint2.y\">\n </circle>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationShadow\"\n class=\"shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}\"\n style=\"display:none\">\n <path d=\"\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"></circle>\n </g>\n </svg>\n <ng-container *ngFor=\"let node of model.nodes\">\n <fc-node\n [selected]=\"modelService.nodes.isSelected(node)\"\n [edit]=\"modelService.nodes.isEdit(node)\"\n [underMouse]=\"node === mouseoverService.mouseoverscope.node\"\n [node]=\"node\"\n [mouseOverConnector]=\"mouseoverService.mouseoverscope.connector\"\n [modelservice]=\"modelService\"\n [dragging]=\"nodeDraggingService.isDraggingNode(node)\"\n [callbacks]=\"callbacks\"\n [userNodeCallbacks]=\"userNodeCallbacks\">\n </fc-node>\n </ng-container>\n <div *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\"\n [attr.class]=\"'fc-noselect ' + flowchartConstants.edgeLabelClass\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'\n }\">\n <div class=\"fc-edge-label-text\">\n <span [attr.id]=\"'fc-edge-label-dragging'\" *ngIf=\"edgeDraggingService.edgeDragging.dragLabel\">{{edgeDraggingService.edgeDragging.dragLabel}}</span>\n </div>\n </div>\n <div\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||\n (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||\n flowchartConstants.edgeLabelClass)\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'\n }\"\n *ngFor=\"let edge of model.edges; let $index = index\">\n <div class=\"fc-edge-label-text\">\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodeedit\" (click)=\"edgeEdit($event, edge)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodedelete\" (click)=\"edgeRemove($event, edge)\">\n &times;\n </div>\n <span [attr.id]=\"'fc-edge-label-'+$index\" *ngIf=\"edge.label\">{{edge.label}}</span>\n </div>\n </div>\n <div id=\"select-rectangle\" class=\"fc-select-rectangle\" hidden>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;-webkit-transition:stroke-width .2s;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform-origin:bottom left;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{-webkit-transform:scale(1.25);transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
styles: [":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;transition:transform .2s;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]
}),
__metadata("design:paramtypes", [ElementRef,
IterableDiffers,
......@@ -2234,7 +2234,7 @@ var FcNodeContainerComponent = /** @class */ (function () {
Component({
selector: 'fc-node',
template: '<ng-template #nodeContent></ng-template>',
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{-webkit-box-align:center;align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:-webkit-box;display:flex;-webkit-box-flex:1;flex-grow:1;height:60px;-webkit-box-pack:center;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
styles: [":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:flex;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:flex;flex-grow:1;height:60px;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]
}),
__param(0, Inject(FC_NODE_COMPONENT_CONFIG)),
__metadata("design:paramtypes", [Object, ElementRef,
......@@ -2320,7 +2320,7 @@ var DefaultFcNodeComponent = /** @class */ (function (_super) {
Component({
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 [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;-webkit-transition:opacity .2s;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align: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}"]
}),
__metadata("design:paramtypes", [])
], DefaultFcNodeComponent);
......
dist/ngx-flowchart/fesm5/ngx-flowchart.js.map
View file @ 7a02f474
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/ngx-flowchart/ngx-flowchart.metadata.json
View file @ 7a02f474
{"__symbolic":"module","version":4,"metadata":{"NgxFlowchartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"fc-canvas","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":19},"member":"OnPush"},"template":"<div (click)=\"canvasClick($event)\" class=\"fc-canvas-container\">\n <svg class=\"fc-canvas-svg\">\n <defs>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"gray\" fill=\"gray\" stroke-width=\"1px\"/>\n </marker>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"red\" fill=\"red\" stroke-width=\"1px\"/>\n </marker>\n </defs>\n <g *ngFor=\"let edge of model.edges; let $index = index\">\n <path\n [attr.id]=\"'fc-edge-path-'+$index\"\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||\n flowchartConstants.edgeClass\"\n [attr.d]=\"getEdgeDAttribute(edge)\"\n [attr.marker-end]=\"'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'\">\n </path>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\">\n <path [attr.class]=\"flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass\"\n [attr.d]=\"edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"\n [attr.cx]=\"edgeDraggingService.edgeDragging.dragPoint2.x\"\n [attr.cy]=\"edgeDraggingService.edgeDragging.dragPoint2.y\">\n </circle>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationShadow\"\n class=\"shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}\"\n style=\"display:none\">\n <path d=\"\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"></circle>\n </g>\n </svg>\n <ng-container *ngFor=\"let node of model.nodes\">\n <fc-node\n [selected]=\"modelService.nodes.isSelected(node)\"\n [edit]=\"modelService.nodes.isEdit(node)\"\n [underMouse]=\"node === mouseoverService.mouseoverscope.node\"\n [node]=\"node\"\n [mouseOverConnector]=\"mouseoverService.mouseoverscope.connector\"\n [modelservice]=\"modelService\"\n [dragging]=\"nodeDraggingService.isDraggingNode(node)\"\n [callbacks]=\"callbacks\"\n [userNodeCallbacks]=\"userNodeCallbacks\">\n </fc-node>\n </ng-container>\n <div *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\"\n [attr.class]=\"'fc-noselect ' + flowchartConstants.edgeLabelClass\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'\n }\">\n <div class=\"fc-edge-label-text\">\n <span [attr.id]=\"'fc-edge-label-dragging'\" *ngIf=\"edgeDraggingService.edgeDragging.dragLabel\">{{edgeDraggingService.edgeDragging.dragLabel}}</span>\n </div>\n </div>\n <div\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||\n (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||\n flowchartConstants.edgeLabelClass)\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'\n }\"\n *ngFor=\"let edge of model.edges; let $index = index\">\n <div class=\"fc-edge-label-text\">\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodeedit\" (click)=\"edgeEdit($event, edge)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodedelete\" (click)=\"edgeRemove($event, edge)\">\n &times;\n </div>\n <span [attr.id]=\"'fc-edge-label-'+$index\" *ngIf=\"edge.label\">{{edge.label}}</span>\n </div>\n </div>\n <div id=\"select-rectangle\" class=\"fc-select-rectangle\" hidden>\n </div>\n</div>\n","styles":[":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;-webkit-transition:stroke-width .2s;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;-webkit-transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-transform-origin:bottom left;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{-webkit-transform:scale(1.25);transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]}]}],"members":{"canvasClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":3},"arguments":["attr.class"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"selectedObjects":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"edgeStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"userCallbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"automaticResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"dragAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"nodeWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"nodeHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"dropTargetId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"modelChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":3}}]}],"fitModelSizeByDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":102,"character":45,"context":{"typeName":"HTMLElement"},"module":"./lib/ngx-flowchart.component"}]},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":103,"character":31},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":106,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":107,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"getEdgeDAttribute":[{"__symbolic":"method"}],"adjustCanvasSize":[{"__symbolic":"method"}],"canvasClick":[{"__symbolic":"method"}],"edgeMouseDown":[{"__symbolic":"method"}],"edgeClick":[{"__symbolic":"method"}],"edgeRemove":[{"__symbolic":"method"}],"edgeEdit":[{"__symbolic":"method"}],"edgeDoubleClick":[{"__symbolic":"method"}],"edgeMouseOver":[{"__symbolic":"method"}],"edgeMouseEnter":[{"__symbolic":"method"}],"edgeMouseLeave":[{"__symbolic":"method"}],"dragover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":282,"character":3},"arguments":["dragover",["$event"]]}]}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":288,"character":3},"arguments":["drop",["$event"]]}]}],"mousedown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":299,"character":3},"arguments":["mousedown",["$event"]]}]}],"mousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":304,"character":3},"arguments":["mousemove",["$event"]]}]}],"mouseup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":309,"character":3},"arguments":["mouseup",["$event"]]}]}]}},"NgxFlowchartModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"entryComponents":[{"__symbolic":"reference","name":"DefaultFcNodeComponent"}],"declarations":[{"__symbolic":"reference","name":"NgxFlowchartComponent"},{"__symbolic":"reference","name":"FcMagnetDirective"},{"__symbolic":"reference","name":"FcConnectorDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"DefaultFcNodeComponent"}],"providers":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"provide":{"__symbolic":"reference","name":"FC_NODE_COMPONENT_CONFIG"},"useValue":{"nodeComponentType":{"__symbolic":"reference","name":"DefaultFcNodeComponent"}}}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":31,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxFlowchartComponent"},{"__symbolic":"reference","name":"FcMagnetDirective"},{"__symbolic":"reference","name":"FcConnectorDirective"},{"__symbolic":"reference","name":"DefaultFcNodeComponent"}]}]}],"members":{}},"FC_NODE_COMPONENT_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":44},"arguments":["fc-node.component.config"]},"FcNodeComponentConfig":{"__symbolic":"interface"},"FlowchartConstants":{"htmlPrefix":"fc","leftConnectorType":"leftConnector","rightConnectorType":"rightConnector","curvedStyle":"curved","lineStyle":"line","dragAnimationRepaint":"repaint","dragAnimationShadow":"shadow","canvasClass":"fc-canvas","selectedClass":"fc-selected","editClass":"fc-edit","activeClass":"fc-active","hoverClass":"fc-hover","draggingClass":"fc-dragging","edgeClass":"fc-edge","edgeLabelClass":"fc-edge-label","connectorClass":"fc-connector","magnetClass":"fc-magnet","nodeClass":"fc-node","nodeOverlayClass":"fc-node-overlay","leftConnectorClass":"fc-leftConnectors","rightConnectorClass":"fc-rightConnectors","canvasResizeThreshold":200,"canvasResizeStep":200},"FcCoords":{"__symbolic":"interface"},"FcRectBox":{"__symbolic":"interface"},"FcConnector":{"__symbolic":"interface"},"FcNode":{"__symbolic":"interface"},"FcNodeRectInfo":{"__symbolic":"interface"},"FcConnectorRectInfo":{"__symbolic":"interface"},"FcEdge":{"__symbolic":"interface"},"FcItemInfo":{"__symbolic":"interface"},"FcModel":{"__symbolic":"interface"},"UserCallbacks":{"__symbolic":"interface"},"UserNodeCallbacks":{"__symbolic":"interface"},"FcCallbacks":{"__symbolic":"interface"},"FcAdjacentList":{"__symbolic":"interface"},"ModelvalidationError":{"__symbolic":"class","extends":{"__symbolic":"error","message":"Reference to non-exported class","line":143,"character":0,"context":{"className":"BaseError"},"module":"./lib/ngx-flowchart.models"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"}]}]}},"fcTopSort":{"__symbolic":"function"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"fc-node","template":"<ng-template #nodeContent></ng-template>","styles":[":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{-webkit-box-align:center;align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:-webkit-box;display:flex;-webkit-box-flex:1;flex-grow:1;height:60px;-webkit-box-pack:center;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]}]}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"userNodeCallbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"edit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"underMouse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"mouseOverConnector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"modelservice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"dragging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"nodeId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":59,"character":3},"arguments":["attr.id"]}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":64,"character":3},"arguments":["style.top"]}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":69,"character":3},"arguments":["style.left"]}]}],"nodeContentContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":3},"arguments":["nodeContent",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":76,"character":35},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":78,"character":15},"arguments":[{"__symbolic":"reference","name":"FC_NODE_COMPONENT_CONFIG"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"FcNodeComponentConfig"},{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":79,"character":45,"context":{"typeName":"HTMLElement"},"module":"./lib/node.component"}]},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":80,"character":48}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"updateNodeClass":[{"__symbolic":"method"}],"updateNodeComponent":[{"__symbolic":"method"}],"toggleClass":[{"__symbolic":"method"}],"mousedown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":158,"character":3},"arguments":["mousedown",["$event"]]}]}],"dragstart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":163,"character":3},"arguments":["dragstart",["$event"]]}]}],"dragend":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":170,"character":3},"arguments":["dragend",["$event"]]}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":177,"character":3},"arguments":["click",["$event"]]}]}],"mouseover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":184,"character":3},"arguments":["mouseover",["$event"]]}]}],"mouseout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":191,"character":3},"arguments":["mouseout",["$event"]]}]}]}},"FcNodeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":200,"character":1}}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":203,"character":3}}]}],"userNodeCallbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":3}}]}],"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":209,"character":3}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":3}}]}],"edit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":215,"character":3}}]}],"underMouse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":3}}]}],"mouseOverConnector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":221,"character":3}}]}],"modelservice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":3}}]}],"dragging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":227,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"FcMagnetDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[fc-magnet]"}]}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"connector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":15,"character":44,"context":{"typeName":"HTMLElement"},"module":"./lib/magnet.directive"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"dragover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":23,"character":3},"arguments":["dragover",["$event"]]}]}],"dragleave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":28,"character":3},"arguments":["dragleave",["$event"]]}]}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":33,"character":3},"arguments":["drop",["$event"]]}]}],"dragend":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":38,"character":3},"arguments":["dragend",["$event"]]}]}]}},"FcConnectorDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[fc-connector]"}]}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"modelservice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"connector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"nodeRectInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"mouseOverConnector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":25,"character":44,"context":{"typeName":"HTMLElement"},"module":"./lib/connector.directive"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"updateConnectorClass":[{"__symbolic":"method"}],"dragover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":68,"character":3},"arguments":["dragover",["$event"]]}]}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":76,"character":3},"arguments":["drop",["$event"]]}]}],"dragend":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":83,"character":3},"arguments":["dragend",["$event"]]}]}],"dragstart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":90,"character":3},"arguments":["dragstart",["$event"]]}]}],"mouseenter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":97,"character":3},"arguments":["mouseenter",["$event"]]}]}],"mouseleave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":104,"character":3},"arguments":["mouseleave",["$event"]]}]}]}},"DefaultFcNodeComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"FcNodeComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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 [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;-webkit-transition:opacity .2s;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align: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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"validateModel":[{"__symbolic":"method"}],"validateNodes":[{"__symbolic":"method"}],"validateNode":[{"__symbolic":"method"}],"_validateEdges":[{"__symbolic":"method"}],"validateEdges":[{"__symbolic":"method"}],"_validateEdge":[{"__symbolic":"method"}],"validateEdge":[{"__symbolic":"method"}],"validateConnector":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getEdgeDAttribute":[{"__symbolic":"method"}],"getEdgeCenter":[{"__symbolic":"method"}],"computeEdgeTangentOffset":[{"__symbolic":"method"}],"computeEdgeSourceTangent":[{"__symbolic":"method"}],"computeEdgeDestinationTangent":[{"__symbolic":"method"}]}}},"origins":{"NgxFlowchartComponent":"./lib/ngx-flowchart.component","NgxFlowchartModule":"./lib/ngx-flowchart.module","FC_NODE_COMPONENT_CONFIG":"./lib/ngx-flowchart.models","FcNodeComponentConfig":"./lib/ngx-flowchart.models","FlowchartConstants":"./lib/ngx-flowchart.models","FcCoords":"./lib/ngx-flowchart.models","FcRectBox":"./lib/ngx-flowchart.models","FcConnector":"./lib/ngx-flowchart.models","FcNode":"./lib/ngx-flowchart.models","FcNodeRectInfo":"./lib/ngx-flowchart.models","FcConnectorRectInfo":"./lib/ngx-flowchart.models","FcEdge":"./lib/ngx-flowchart.models","FcItemInfo":"./lib/ngx-flowchart.models","FcModel":"./lib/ngx-flowchart.models","UserCallbacks":"./lib/ngx-flowchart.models","UserNodeCallbacks":"./lib/ngx-flowchart.models","FcCallbacks":"./lib/ngx-flowchart.models","FcAdjacentList":"./lib/ngx-flowchart.models","ModelvalidationError":"./lib/ngx-flowchart.models","fcTopSort":"./lib/ngx-flowchart.models","ɵa":"./lib/node.component","FcNodeComponent":"./lib/node.component","FcMagnetDirective":"./lib/magnet.directive","FcConnectorDirective":"./lib/connector.directive","DefaultFcNodeComponent":"./lib/default-node.component","ɵb":"./lib/modelvalidation.service","ɵc":"./lib/edge-drawing.service"},"importAs":"ngx-flowchart"}
\ No newline at end of file
{"__symbolic":"module","version":4,"metadata":{"NgxFlowchartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"fc-canvas","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":19},"member":"OnPush"},"template":"<div (click)=\"canvasClick($event)\" class=\"fc-canvas-container\">\n <svg class=\"fc-canvas-svg\">\n <defs>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"gray\" fill=\"gray\" stroke-width=\"1px\"/>\n </marker>\n <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\">\n <polygon points=\"-2,0 -5,5 5,0 -5,-5\" stroke=\"red\" fill=\"red\" stroke-width=\"1px\"/>\n </marker>\n </defs>\n <g *ngFor=\"let edge of model.edges; let $index = index\">\n <path\n [attr.id]=\"'fc-edge-path-'+$index\"\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||\n flowchartConstants.edgeClass\"\n [attr.d]=\"getEdgeDAttribute(edge)\"\n [attr.marker-end]=\"'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'\">\n </path>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\">\n <path [attr.class]=\"flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass\"\n [attr.d]=\"edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"\n [attr.cx]=\"edgeDraggingService.edgeDragging.dragPoint2.x\"\n [attr.cy]=\"edgeDraggingService.edgeDragging.dragPoint2.y\">\n </circle>\n </g>\n <g *ngIf=\"dragAnimation === flowchartConstants.dragAnimationShadow\"\n class=\"shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}\"\n style=\"display:none\">\n <path d=\"\"></path>\n <circle class=\"edge-endpoint\" r=\"4\"></circle>\n </g>\n </svg>\n <ng-container *ngFor=\"let node of model.nodes\">\n <fc-node\n [selected]=\"modelService.nodes.isSelected(node)\"\n [edit]=\"modelService.nodes.isEdit(node)\"\n [underMouse]=\"node === mouseoverService.mouseoverscope.node\"\n [node]=\"node\"\n [mouseOverConnector]=\"mouseoverService.mouseoverscope.connector\"\n [modelservice]=\"modelService\"\n [dragging]=\"nodeDraggingService.isDraggingNode(node)\"\n [callbacks]=\"callbacks\"\n [userNodeCallbacks]=\"userNodeCallbacks\">\n </fc-node>\n </ng-container>\n <div *ngIf=\"dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging\"\n [attr.class]=\"'fc-noselect ' + flowchartConstants.edgeLabelClass\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'\n }\">\n <div class=\"fc-edge-label-text\">\n <span [attr.id]=\"'fc-edge-label-dragging'\" *ngIf=\"edgeDraggingService.edgeDragging.dragLabel\">{{edgeDraggingService.edgeDragging.dragLabel}}</span>\n </div>\n </div>\n <div\n (mousedown)=\"edgeMouseDown($event, edge)\"\n (click)=\"edgeClick($event, edge)\"\n (dblclick)=\"edgeDoubleClick($event, edge)\"\n (mouseover)=\"edgeMouseOver($event, edge)\"\n (mouseenter)=\"edgeMouseEnter($event, edge)\"\n (mouseleave)=\"edgeMouseLeave($event, edge)\"\n [attr.class]=\"'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||\n (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||\n edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||\n edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||\n flowchartConstants.edgeLabelClass)\"\n [ngStyle]=\"{\n top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',\n left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'\n }\"\n *ngFor=\"let edge of model.edges; let $index = index\">\n <div class=\"fc-edge-label-text\">\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodeedit\" (click)=\"edgeEdit($event, edge)\">\n <i class=\"fa fa-pencil\" aria-hidden=\"true\"></i>\n </div>\n <div *ngIf=\"modelService.isEditable()\" class=\"fc-noselect fc-nodedelete\" (click)=\"edgeRemove($event, edge)\">\n &times;\n </div>\n <span [attr.id]=\"'fc-edge-label-'+$index\" *ngIf=\"edge.label\">{{edge.label}}</span>\n </div>\n </div>\n <div id=\"select-rectangle\" class=\"fc-select-rectangle\" hidden>\n </div>\n</div>\n","styles":[":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;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-canvas-container{display:block;position:relative;width:100%;height:100%}:host .fc-canvas-container svg.fc-canvas-svg{display:block;position:relative;width:100%;height:100%}:host .fc-edge{stroke:gray;stroke-width:4;transition:stroke-width .2s;fill:transparent}:host .fc-edge.fc-hover{stroke:gray;stroke-width:6;fill:transparent}:host .fc-edge.fc-selected{stroke:red;stroke-width:4;fill:transparent}:host .fc-edge.fc-active{-webkit-animation:3s linear infinite dash;animation:3s linear infinite dash;stroke-dasharray:20}:host .fc-edge.fc-dragging{pointer-events:none}:host .fc-arrow-marker polygon{stroke:gray;fill:gray}:host .fc-arrow-marker-selected polygon{stroke:red;fill:red}:host .edge-endpoint{fill:gray}:host .fc-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .fc-edge-label{position:absolute;opacity:.8;transition:transform .2s;transform-origin:bottom left;margin:0 auto}:host .fc-edge-label .fc-edge-label-text{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-size:16px}:host .fc-edge-label .fc-edge-label-text span{cursor:default;border:solid #ff3d00;border-radius:10px;color:#ff3d00;background-color:#fff;padding:3px 5px}:host .fc-edge-label .fc-nodeedit{top:-30px;right:14px}:host .fc-edge-label .fc-nodedelete{top:-30px;right:-13px}:host .fc-edge-label.fc-hover{transform:scale(1.25)}:host .fc-edge-label.fc-edit .fc-edge-label-text span,:host .fc-edge-label.fc-selected .fc-edge-label-text span{border:solid red;color:#fff;font-weight:600;background-color:red}:host .fc-select-rectangle{border:2px dashed #5262ff;position:absolute;background:rgba(20,125,255,.1);z-index:2}@-webkit-keyframes dash{from{stroke-dashoffset:500}}@keyframes dash{from{stroke-dashoffset:500}}:host ::ng-deep .fc-nodeedit{display:none;font-size:15px}:host ::ng-deep .fc-nodedelete{display:none;font-size:18px}:host ::ng-deep .fc-edit .fc-nodedelete,:host ::ng-deep .fc-edit .fc-nodeedit{display:block;position:absolute;border:2px solid #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}:host ::ng-deep .fc-edit .fc-nodeedit{top:-24px;right:16px}:host ::ng-deep .fc-edit .fc-nodedelete{top:-24px;right:-13px}"]}]}],"members":{"canvasClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":3},"arguments":["attr.class"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"selectedObjects":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"edgeStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"userCallbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"automaticResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"dragAnimation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"nodeWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"nodeHeight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"dropTargetId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"modelChanged":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":65,"character":3}}]}],"fitModelSizeByDefault":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":102,"character":45,"context":{"typeName":"HTMLElement"},"module":"./lib/ngx-flowchart.component"}]},{"__symbolic":"reference","module":"@angular/core","name":"IterableDiffers","line":103,"character":31},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":106,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":107,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"ngDoCheck":[{"__symbolic":"method"}],"getEdgeDAttribute":[{"__symbolic":"method"}],"adjustCanvasSize":[{"__symbolic":"method"}],"canvasClick":[{"__symbolic":"method"}],"edgeMouseDown":[{"__symbolic":"method"}],"edgeClick":[{"__symbolic":"method"}],"edgeRemove":[{"__symbolic":"method"}],"edgeEdit":[{"__symbolic":"method"}],"edgeDoubleClick":[{"__symbolic":"method"}],"edgeMouseOver":[{"__symbolic":"method"}],"edgeMouseEnter":[{"__symbolic":"method"}],"edgeMouseLeave":[{"__symbolic":"method"}],"dragover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":282,"character":3},"arguments":["dragover",["$event"]]}]}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":288,"character":3},"arguments":["drop",["$event"]]}]}],"mousedown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":299,"character":3},"arguments":["mousedown",["$event"]]}]}],"mousemove":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":304,"character":3},"arguments":["mousemove",["$event"]]}]}],"mouseup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":309,"character":3},"arguments":["mouseup",["$event"]]}]}]}},"NgxFlowchartModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"entryComponents":[{"__symbolic":"reference","name":"DefaultFcNodeComponent"}],"declarations":[{"__symbolic":"reference","name":"NgxFlowchartComponent"},{"__symbolic":"reference","name":"FcMagnetDirective"},{"__symbolic":"reference","name":"FcConnectorDirective"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"DefaultFcNodeComponent"}],"providers":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"provide":{"__symbolic":"reference","name":"FC_NODE_COMPONENT_CONFIG"},"useValue":{"nodeComponentType":{"__symbolic":"reference","name":"DefaultFcNodeComponent"}}}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":31,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxFlowchartComponent"},{"__symbolic":"reference","name":"FcMagnetDirective"},{"__symbolic":"reference","name":"FcConnectorDirective"},{"__symbolic":"reference","name":"DefaultFcNodeComponent"}]}]}],"members":{}},"FC_NODE_COMPONENT_CONFIG":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":4,"character":44},"arguments":["fc-node.component.config"]},"FcNodeComponentConfig":{"__symbolic":"interface"},"FlowchartConstants":{"htmlPrefix":"fc","leftConnectorType":"leftConnector","rightConnectorType":"rightConnector","curvedStyle":"curved","lineStyle":"line","dragAnimationRepaint":"repaint","dragAnimationShadow":"shadow","canvasClass":"fc-canvas","selectedClass":"fc-selected","editClass":"fc-edit","activeClass":"fc-active","hoverClass":"fc-hover","draggingClass":"fc-dragging","edgeClass":"fc-edge","edgeLabelClass":"fc-edge-label","connectorClass":"fc-connector","magnetClass":"fc-magnet","nodeClass":"fc-node","nodeOverlayClass":"fc-node-overlay","leftConnectorClass":"fc-leftConnectors","rightConnectorClass":"fc-rightConnectors","canvasResizeThreshold":200,"canvasResizeStep":200},"FcCoords":{"__symbolic":"interface"},"FcRectBox":{"__symbolic":"interface"},"FcConnector":{"__symbolic":"interface"},"FcNode":{"__symbolic":"interface"},"FcNodeRectInfo":{"__symbolic":"interface"},"FcConnectorRectInfo":{"__symbolic":"interface"},"FcEdge":{"__symbolic":"interface"},"FcItemInfo":{"__symbolic":"interface"},"FcModel":{"__symbolic":"interface"},"UserCallbacks":{"__symbolic":"interface"},"UserNodeCallbacks":{"__symbolic":"interface"},"FcCallbacks":{"__symbolic":"interface"},"FcAdjacentList":{"__symbolic":"interface"},"ModelvalidationError":{"__symbolic":"class","extends":{"__symbolic":"error","message":"Reference to non-exported class","line":143,"character":0,"context":{"className":"BaseError"},"module":"./lib/ngx-flowchart.models"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"string"}]}]}},"fcTopSort":{"__symbolic":"function"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"fc-node","template":"<ng-template #nodeContent></ng-template>","styles":[":host{position:absolute;z-index:1}:host.fc-dragging{z-index:10}:host ::ng-deep .fc-leftConnectors,:host ::ng-deep .fc-rightConnectors{position:absolute;top:0;height:100%;display:flex;flex-direction:column;z-index:-10}:host ::ng-deep .fc-leftConnectors .fc-magnet,:host ::ng-deep .fc-rightConnectors .fc-magnet{align-items:center}:host ::ng-deep .fc-leftConnectors{left:-20px}:host ::ng-deep .fc-rightConnectors{right:-20px}:host ::ng-deep .fc-magnet{display:flex;flex-grow:1;height:60px;justify-content:center}:host ::ng-deep .fc-connector{width:18px;height:18px;border:10px solid transparent;-moz-background-clip:padding;-webkit-background-clip:padding;background-clip:padding-box;border-radius:50%;background-color:#f7a789;color:#fff;pointer-events:all}:host ::ng-deep .fc-connector.fc-hover{background-color:#000}"]}]}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"userNodeCallbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"edit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"underMouse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":3}}]}],"mouseOverConnector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"modelservice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"dragging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"nodeId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":59,"character":3},"arguments":["attr.id"]}]}],"top":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":64,"character":3},"arguments":["style.top"]}]}],"left":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":69,"character":3},"arguments":["style.left"]}]}],"nodeContentContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":76,"character":3},"arguments":["nodeContent",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":76,"character":35},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":78,"character":15},"arguments":[{"__symbolic":"reference","name":"FC_NODE_COMPONENT_CONFIG"}]}],null,null],"parameters":[{"__symbolic":"reference","name":"FcNodeComponentConfig"},{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":79,"character":45,"context":{"typeName":"HTMLElement"},"module":"./lib/node.component"}]},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":80,"character":48}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"updateNodeClass":[{"__symbolic":"method"}],"updateNodeComponent":[{"__symbolic":"method"}],"toggleClass":[{"__symbolic":"method"}],"mousedown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":158,"character":3},"arguments":["mousedown",["$event"]]}]}],"dragstart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":163,"character":3},"arguments":["dragstart",["$event"]]}]}],"dragend":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":170,"character":3},"arguments":["dragend",["$event"]]}]}],"click":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":177,"character":3},"arguments":["click",["$event"]]}]}],"mouseover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":184,"character":3},"arguments":["mouseover",["$event"]]}]}],"mouseout":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":191,"character":3},"arguments":["mouseout",["$event"]]}]}]}},"FcNodeComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":200,"character":1}}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":203,"character":3}}]}],"userNodeCallbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":206,"character":3}}]}],"node":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":209,"character":3}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":212,"character":3}}]}],"edit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":215,"character":3}}]}],"underMouse":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":218,"character":3}}]}],"mouseOverConnector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":221,"character":3}}]}],"modelservice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":224,"character":3}}]}],"dragging":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":227,"character":3}}]}],"ngOnInit":[{"__symbolic":"method"}]}},"FcMagnetDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":3,"character":1},"arguments":[{"selector":"[fc-magnet]"}]}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"connector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":15,"character":44,"context":{"typeName":"HTMLElement"},"module":"./lib/magnet.directive"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"dragover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":23,"character":3},"arguments":["dragover",["$event"]]}]}],"dragleave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":28,"character":3},"arguments":["dragleave",["$event"]]}]}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":33,"character":3},"arguments":["drop",["$event"]]}]}],"dragend":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":38,"character":3},"arguments":["dragend",["$event"]]}]}]}},"FcConnectorDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":4,"character":1},"arguments":[{"selector":"[fc-connector]"}]}],"members":{"callbacks":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"modelservice":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"connector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"nodeRectInfo":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"mouseOverConnector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ElementRef","module":"@angular/core","arguments":[{"__symbolic":"error","message":"Could not resolve type","line":25,"character":44,"context":{"typeName":"HTMLElement"},"module":"./lib/connector.directive"}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"updateConnectorClass":[{"__symbolic":"method"}],"dragover":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":68,"character":3},"arguments":["dragover",["$event"]]}]}],"drop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":76,"character":3},"arguments":["drop",["$event"]]}]}],"dragend":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":83,"character":3},"arguments":["dragend",["$event"]]}]}],"dragstart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":90,"character":3},"arguments":["dragstart",["$event"]]}]}],"mouseenter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":97,"character":3},"arguments":["mouseenter",["$event"]]}]}],"mouseleave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":104,"character":3},"arguments":["mouseleave",["$event"]]}]}]}},"DefaultFcNodeComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"FcNodeComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"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 [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}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"validateModel":[{"__symbolic":"method"}],"validateNodes":[{"__symbolic":"method"}],"validateNode":[{"__symbolic":"method"}],"_validateEdges":[{"__symbolic":"method"}],"validateEdges":[{"__symbolic":"method"}],"_validateEdge":[{"__symbolic":"method"}],"validateEdge":[{"__symbolic":"method"}],"validateConnector":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getEdgeDAttribute":[{"__symbolic":"method"}],"getEdgeCenter":[{"__symbolic":"method"}],"computeEdgeTangentOffset":[{"__symbolic":"method"}],"computeEdgeSourceTangent":[{"__symbolic":"method"}],"computeEdgeDestinationTangent":[{"__symbolic":"method"}]}}},"origins":{"NgxFlowchartComponent":"./lib/ngx-flowchart.component","NgxFlowchartModule":"./lib/ngx-flowchart.module","FC_NODE_COMPONENT_CONFIG":"./lib/ngx-flowchart.models","FcNodeComponentConfig":"./lib/ngx-flowchart.models","FlowchartConstants":"./lib/ngx-flowchart.models","FcCoords":"./lib/ngx-flowchart.models","FcRectBox":"./lib/ngx-flowchart.models","FcConnector":"./lib/ngx-flowchart.models","FcNode":"./lib/ngx-flowchart.models","FcNodeRectInfo":"./lib/ngx-flowchart.models","FcConnectorRectInfo":"./lib/ngx-flowchart.models","FcEdge":"./lib/ngx-flowchart.models","FcItemInfo":"./lib/ngx-flowchart.models","FcModel":"./lib/ngx-flowchart.models","UserCallbacks":"./lib/ngx-flowchart.models","UserNodeCallbacks":"./lib/ngx-flowchart.models","FcCallbacks":"./lib/ngx-flowchart.models","FcAdjacentList":"./lib/ngx-flowchart.models","ModelvalidationError":"./lib/ngx-flowchart.models","fcTopSort":"./lib/ngx-flowchart.models","ɵa":"./lib/node.component","FcNodeComponent":"./lib/node.component","FcMagnetDirective":"./lib/magnet.directive","FcConnectorDirective":"./lib/connector.directive","DefaultFcNodeComponent":"./lib/default-node.component","ɵb":"./lib/modelvalidation.service","ɵc":"./lib/edge-drawing.service"},"importAs":"ngx-flowchart"}
\ No newline at end of file
dist/ngx-flowchart/package.json
View file @ 7a02f474
......@@ -2,9 +2,9 @@
"name": "ngx-flowchart",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^9.0.7",
"@angular/core": "^9.0.7",
"jquery": "^3.4.1",
"@angular/common": "^9.1.3",
"@angular/core": "^9.1.3",
"jquery": "^3.5.0",
"typescript": "^3.7.5",
"tslib": "^1.10.0"
},
......
package-lock.json
View file @ 7a02f474
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 7a02f474
......@@ -11,45 +11,45 @@
},
"private": true,
"peerDependencies": {
"jquery": "^3.4.1"
"jquery": "^3.5.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.7",
"@angular-devkit/build-ng-packagr": "~0.900.7",
"@angular/animations": "^9.0.7",
"@angular/cdk": "^9.1.3",
"@angular/cli": "~9.0.7",
"@angular/common": "^9.0.7",
"@angular/compiler": "~9.0.7",
"@angular/compiler-cli": "~9.0.7",
"@angular/core": "^9.0.7",
"@angular/forms": "~9.0.7",
"@angular/language-service": "~9.0.7",
"@angular/platform-browser": "~9.0.7",
"@angular/platform-browser-dynamic": "~9.0.7",
"@angular/router": "~9.0.7",
"@types/jasmine": "~3.5.3",
"@types/jasminewd2": "~2.0.3",
"@types/jquery": "^3.3.32",
"@types/node": "^13.7.1",
"codelyzer": "^5.2.1",
"@angular-devkit/build-angular": "~0.901.3",
"@angular-devkit/build-ng-packagr": "~0.901.3",
"@angular/animations": "^9.1.3",
"@angular/cdk": "^9.2.1",
"@angular/cli": "~9.1.3",
"@angular/common": "^9.1.3",
"@angular/compiler": "~9.1.3",
"@angular/compiler-cli": "~9.1.3",
"@angular/core": "^9.1.3",
"@angular/forms": "~9.1.3",
"@angular/language-service": "~9.1.3",
"@angular/platform-browser": "~9.1.3",
"@angular/platform-browser-dynamic": "~9.1.3",
"@angular/router": "~9.1.3",
"@types/jasmine": "~3.5.10",
"@types/jasminewd2": "~2.0.8",
"@types/jquery": "^3.3.36",
"@types/node": "^13.13.4",
"codelyzer": "^5.2.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"jquery": "^3.4.1",
"karma": "~4.4.1",
"jasmine-spec-reporter": "~5.0.2",
"jquery": "^3.5.0",
"karma": "~5.0.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.1",
"karma-jasmine": "~3.1.1",
"karma-jasmine-html-reporter": "^1.5.2",
"ng-packagr": "^9.0.0",
"protractor": "~5.4.3",
"rxjs": "~6.5.4",
"ts-node": "~8.6.2",
"tslint": "^6.1.0",
"karma-jasmine-html-reporter": "^1.5.3",
"ng-packagr": "^9.1.1",
"protractor": "~5.4.4",
"rxjs": "~6.5.5",
"ts-node": "~8.9.1",
"tslint": "^6.1.2",
"typescript": "~3.7.5",
"zone.js": "~0.10.2"
"zone.js": "~0.10.3"
},
"dependencies": {
"tslib": "^1.10.0"
"tslib": "^1.11.1"
}
}
projects/ngx-flowchart/package.json
View file @ 7a02f474
......@@ -2,12 +2,12 @@
"name": "ngx-flowchart",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^9.0.7",
"@angular/core": "^9.0.7",
"jquery": "^3.4.1",
"@angular/common": "^9.1.3",
"@angular/core": "^9.1.3",
"jquery": "^3.5.0",
"typescript": "^3.7.5"
},
"devDependencies": {
"@types/jquery": "^3.3.32"
"@types/jquery": "^3.3.36"
}
}
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