You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
16 lines
58 KiB
JavaScript
16 lines
58 KiB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-flowchart",["exports","@angular/core","rxjs","rxjs/operators","@angular/common"],t):t((e=e||self)["ngx-flowchart"]={},e.ng.core,e.rxjs,e.rxjs.operators,e.ng.common)}(this,(function(e,t,n,o,r){"use strict";
|
|
/*! *****************************************************************************
|
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
this file except in compliance with the License. You may obtain a copy of the
|
|
License at http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
|
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
|
MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
and limitations under the License.
|
|
***************************************************************************** */var i=function(e,t){return(i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function s(e,t){function n(){this.constructor=e}i(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var a=function(){return(a=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e}).apply(this,arguments)};function d(e){var t="function"==typeof Symbol&&e[Symbol.iterator],n=0;return t?t.call(e):{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}}}var l=new t.InjectionToken("fc-node.component.config");var c={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};var g=function(){Error.apply(this,arguments)};g.prototype=new Error;var h=function(e){function t(t){var n=e.call(this)||this;return n.message=t,n}return s(t,e),t}(g);function p(e){var t,n,o,r,i={};e.nodes.forEach((function(e){i[e.id]={incoming:0,outgoing:[]}})),e.edges.forEach((function(t){var n=e.nodes.filter((function(e){return e.connectors.some((function(e){return e.id===t.source}))}))[0],o=e.nodes.filter((function(e){return e.connectors.some((function(e){return e.id===t.destination}))}))[0];i[n.id].outgoing.push(o.id),i[o.id].incoming++}));var s=[],a=[];try{for(var l=d(Object.keys(i)),c=l.next();!c.done;c=l.next()){var g=c.value;0===i[g].incoming&&a.push(g)}}catch(e){t={error:e}}finally{try{c&&!c.done&&(n=l.return)&&n.call(l)}finally{if(t)throw t.error}}for(;0!==a.length;){for(var h=a.pop(),p=0;p<i[h].outgoing.length;p++){var u=i[h].outgoing[p];i[u].incoming--,0===i[u].incoming&&a.push(u),i[h].outgoing.splice(p,1),p--}s.push(h)}var f=!1;try{for(var v=d(Object.keys(i)),m=v.next();!m.done;m=v.next()){g=m.value;0!==i[g].incoming&&(f=!0)}}catch(e){o={error:e}}finally{try{m&&!m.done&&(r=v.return)&&r.call(v)}finally{if(o)throw o.error}}return f?null:s}var u=function(){function e(e,t,r,i,s,d,l,c,g,h,p,u){var f=this;this.connectorsHtmlElements={},this.nodesHtmlElements={},this.canvasHtmlElement=null,this.dragImage=null,this.svgHtmlElement=null,this.debouncer=new n.Subject,this.modelValidation=e,this.model=t,this.modelChanged=r,this.cd=i,this.canvasHtmlElement=p,this.svgHtmlElement=u,this.modelValidation.validateModel(this.model),this.selectedObjects=s,this.dropNode=d||function(){},this.createEdge=l||function(e,t){return n.of(a({},t,{label:"label"}))},this.edgeAddedCallback=c||function(){},this.nodeRemovedCallback=g||function(){},this.edgeRemovedCallback=h||function(){},this.connectors=new v(this),this.nodes=new m(this),this.edges=new y(this),this.debouncer.pipe(o.debounceTime(100)).subscribe((function(){return f.modelChanged.emit()}))}return e.prototype.notifyModelChanged=function(){this.debouncer.next()},e.prototype.detectChanges=function(){var e=this;setTimeout((function(){e.cd.detectChanges()}),0)},e.prototype.selectObject=function(e){this.isEditable()&&-1===this.selectedObjects.indexOf(e)&&this.selectedObjects.push(e)},e.prototype.deselectObject=function(e){if(this.isEditable()){var t=this.selectedObjects.indexOf(e);if(-1===t)throw new Error("Tried to deselect an unselected object");this.selectedObjects.splice(t,1)}},e.prototype.toggleSelectedObject=function(e){this.isSelectedObject(e)?this.deselectObject(e):this.selectObject(e)},e.prototype.isSelectedObject=function(e){return-1!==this.selectedObjects.indexOf(e)},e.prototype.selectAll=function(){var e=this;this.model.nodes.forEach((function(t){t.readonly||e.nodes.select(t)})),this.model.edges.forEach((function(t){e.edges.select(t)})),this.detectChanges()},e.prototype.deselectAll=function(){this.selectedObjects.splice(0,this.selectedObjects.length),this.detectChanges()},e.prototype.isEditObject=function(e){return 1===this.selectedObjects.length&&-1!==this.selectedObjects.indexOf(e)},e.prototype.inRectBox=function(e,t,n){return e>=n.left&&e<=n.right&&t>=n.top&&t<=n.bottom},e.prototype.getItemInfoAtPoint=function(e,t){return{node:this.getNodeAtPoint(e,t),edge:this.getEdgeAtPoint(e,t)}},e.prototype.getNodeAtPoint=function(e,t){var n,o;try{for(var r=d(this.model.nodes),i=r.next();!i.done;i=r.next()){var s=i.value,a=this.nodes.getHtmlElement(s.id).getBoundingClientRect();if(e>=a.left&&e<=a.right&&t>=a.top&&t<=a.bottom)return s}}catch(e){n={error:e}}finally{try{i&&!i.done&&(o=r.return)&&o.call(r)}finally{if(n)throw n.error}}return null},e.prototype.getEdgeAtPoint=function(e,t){var n=document.elementFromPoint(e,t).id,o=-1;return n&&(n.startsWith("fc-edge-path-")?o=Number(n.substring("fc-edge-path-".length)):n.startsWith("fc-edge-label-")&&(o=Number(n.substring("fc-edge-label-".length)))),o>-1?this.model.edges[o]:null},e.prototype.selectAllInRect=function(e){var t=this;this.model.nodes.forEach((function(n){var o=t.nodes.getHtmlElement(n.id).getBoundingClientRect();if(!n.readonly){var r=o.left+o.width/2,i=o.top+o.height/2;t.inRectBox(r,i,e)?t.nodes.select(n):t.nodes.isSelected(n)&&t.nodes.deselect(n)}}));var n=this.canvasHtmlElement.getBoundingClientRect();this.model.edges.forEach((function(o){var r=t.edges.sourceCoord(o),i=t.edges.destCoord(o),s=(r.x+i.x)/2+n.left,a=(r.y+i.y)/2+n.top;t.inRectBox(s,a,e)?t.edges.select(o):t.edges.isSelected(o)&&t.edges.deselect(o)}))},e.prototype.deleteSelected=function(){var e=this;this.edges.getSelectedEdges().forEach((function(t){e.edges.delete(t)})),this.nodes.getSelectedNodes().forEach((function(t){e.nodes.delete(t)}))},e.prototype.isEditable=function(){return void 0===this.dropTargetId},e.prototype.isDropSource=function(){return void 0!==this.dropTargetId},e.prototype.getDragImage=function(){return this.dragImage||(this.dragImage=new Image,this.dragImage.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",this.dragImage.style.visibility="hidden"),this.dragImage},e.prototype.registerCallbacks=function(e,t,n){this.edgeAddedCallback=e,this.nodeRemovedCallback=t,this.edgeRemovedCallback=n},e}();var f=function(){function e(e){this.modelService=e}return e.prototype.select=function(e){this.modelService.selectObject(e)},e.prototype.deselect=function(e){this.modelService.deselectObject(e)},e.prototype.toggleSelected=function(e){this.modelService.toggleSelectedObject(e)},e.prototype.isSelected=function(e){return this.modelService.isSelectedObject(e)},e.prototype.isEdit=function(e){return this.modelService.isEditObject(e)},e}();var v=function(e){function t(t){return e.call(this,t)||this}return s(t,e),t.prototype.getConnector=function(e){var t,n,o,r,i=this.modelService.model;try{for(var s=d(i.nodes),a=s.next();!a.done;a=s.next()){var l=a.value;try{for(var c=(o=void 0,d(l.connectors)),g=c.next();!g.done;g=c.next()){var h=g.value;if(h.id===e)return h}}catch(e){o={error:e}}finally{try{g&&!g.done&&(r=c.return)&&r.call(c)}finally{if(o)throw o.error}}}}catch(e){t={error:e}}finally{try{a&&!a.done&&(n=s.return)&&n.call(s)}finally{if(t)throw t.error}}},t.prototype.getHtmlElement=function(e){return this.modelService.connectorsHtmlElements[e]},t.prototype.setHtmlElement=function(e,t){this.modelService.connectorsHtmlElements[e]=t,this.modelService.detectChanges()},t.prototype._getCoords=function(e,t){var n=this.getHtmlElement(e),o=this.modelService.canvasHtmlElement;if(null==n||null===o)return{x:0,y:0};var r=n.getBoundingClientRect(),i=o.getBoundingClientRect(),s={x:r.left-i.left,y:r.top-i.top};return t&&(s={x:Math.round(s.x+n.offsetWidth/2),y:Math.round(s.y+n.offsetHeight/2)}),s},t.prototype.getCoords=function(e){return this._getCoords(e,!1)},t.prototype.getCenteredCoord=function(e){return this._getCoords(e,!0)},t}(f),m=function(e){function t(t){return e.call(this,t)||this}return s(t,e),t.prototype.getConnectorsByType=function(e,t){return e.connectors.filter((function(e){return e.type===t}))},t.prototype._addConnector=function(e,t){e.connectors.push(t);try{this.modelService.modelValidation.validateNode(e)}catch(n){throw e.connectors.splice(e.connectors.indexOf(t),1),n}},t.prototype.delete=function(e){this.isSelected(e)&&this.deselect(e);var t=this.modelService.model,n=t.nodes.indexOf(e);if(-1===n){if(void 0===e)throw new Error("Passed undefined");throw new Error("Tried to delete not existing node")}for(var o=this.getConnectorIds(e),r=0;r<t.edges.length;r++){var i=t.edges[r];-1===o.indexOf(i.source)&&-1===o.indexOf(i.destination)||(this.modelService.edges.delete(i),r--)}t.nodes.splice(n,1),this.modelService.notifyModelChanged(),this.modelService.nodeRemovedCallback(e)},t.prototype.getSelectedNodes=function(){var e=this;return this.modelService.model.nodes.filter((function(t){return e.modelService.nodes.isSelected(t)}))},t.prototype.handleClicked=function(e,t){t?this.modelService.nodes.toggleSelected(e):(this.modelService.deselectAll(),this.modelService.nodes.select(e))},t.prototype._addNode=function(e){var t=this.modelService.model;try{t.nodes.push(e),this.modelService.modelValidation.validateNodes(t.nodes)}catch(n){throw t.nodes.splice(t.nodes.indexOf(e),1),n}},t.prototype.getConnectorIds=function(e){return e.connectors.map((function(e){return e.id}))},t.prototype.getNodeByConnectorId=function(e){var t,n,o=this.modelService.model;try{for(var r=d(o.nodes),i=r.next();!i.done;i=r.next()){var s=i.value;if(this.getConnectorIds(s).indexOf(e)>-1)return s}}catch(e){t={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}return null},t.prototype.getHtmlElement=function(e){return this.modelService.nodesHtmlElements[e]},t.prototype.setHtmlElement=function(e,t){this.modelService.nodesHtmlElements[e]=t,this.modelService.detectChanges()},t}(f),y=function(e){function t(t){return e.call(this,t)||this}return s(t,e),t.prototype.ready=function(e){var t=this.modelService.connectors.getHtmlElement(e.source),n=this.modelService.connectors.getHtmlElement(e.destination);return void 0!==t&&void 0!==n},t.prototype.sourceCoord=function(e){return this.modelService.connectors.getCenteredCoord(e.source)},t.prototype.destCoord=function(e){return this.modelService.connectors.getCenteredCoord(e.destination)},t.prototype.delete=function(e){var t=this.modelService.model,n=t.edges.indexOf(e);if(-1===n)throw new Error("Tried to delete not existing edge");this.isSelected(e)&&this.deselect(e),t.edges.splice(n,1),this.modelService.notifyModelChanged(),this.modelService.edgeRemovedCallback(e)},t.prototype.getSelectedEdges=function(){var e=this;return this.modelService.model.edges.filter((function(t){return e.modelService.edges.isSelected(t)}))},t.prototype.handleEdgeMouseClick=function(e,t){t?this.modelService.edges.toggleSelected(e):(this.modelService.deselectAll(),this.modelService.edges.select(e))},t.prototype.putEdge=function(e){this.modelService.model.edges.push(e),this.modelService.notifyModelChanged()},t.prototype._addEdge=function(e,t,n,o){var r=this;this.modelService.modelValidation.validateConnector(t),this.modelService.modelValidation.validateConnector(n);var i={};i.source=t.id,i.destination=n.id,i.label=o;var s=this.modelService.model;this.modelService.modelValidation.validateEdges(s.edges.concat([i]),s.nodes),this.modelService.createEdge(e,i).subscribe((function(e){s.edges.push(e),r.modelService.notifyModelChanged(),r.modelService.edgeAddedCallback(e)}))},t}(f),C=function(){function e(){}return e.prototype.validateModel=function(e){return this.validateNodes(e.nodes),this._validateEdges(e.edges,e.nodes),e},e.prototype.validateNodes=function(e){var t=this,n=[];e.forEach((function(e){if(t.validateNode(e),-1!==n.indexOf(e.id))throw new h("Id not unique.");n.push(e.id)}));var o=[];return e.forEach((function(e){e.connectors.forEach((function(e){if(-1!==o.indexOf(e.id))throw new h("Id not unique.");o.push(e.id)}))})),e},e.prototype.validateNode=function(e){var t=this;if(void 0===e.id)throw new h("Id not valid.");if("string"!=typeof e.name)throw new h("Name not valid.");if("number"!=typeof e.x||e.x<0||Math.round(e.x)!==e.x)throw new h("Coordinates not valid.");if("number"!=typeof e.y||e.y<0||Math.round(e.y)!==e.y)throw new h("Coordinates not valid.");if(!Array.isArray(e.connectors))throw new h("Connectors not valid.");return e.connectors.forEach((function(e){t.validateConnector(e)})),e},e.prototype._validateEdges=function(e,t){var n=this;if(e.forEach((function(e){n._validateEdge(e,t)})),e.forEach((function(t,n){e.forEach((function(e,o){if(n!==o&&(t.source===e.source&&t.destination===e.destination||t.source===e.destination&&t.destination===e.source))throw new h("Duplicated edge.")}))})),null===p({nodes:t,edges:e}))throw new h("Graph has a circle.");return e},e.prototype.validateEdges=function(e,t){return this.validateNodes(t),this._validateEdges(e,t)},e.prototype._validateEdge=function(e,t){if(void 0===e.source)throw new h("Source not valid.");if(void 0===e.destination)throw new h("Destination not valid.");if(e.source===e.destination)throw new h("Edge with same source and destination connectors.");var n=t.filter((function(t){return t.connectors.some((function(t){return t.id===e.source}))}))[0];if(void 0===n)throw new h("Source not valid.");var o=t.filter((function(t){return t.connectors.some((function(t){return t.id===e.destination}))}))[0];if(void 0===o)throw new h("Destination not valid.");if(n===o)throw new h("Edge with same source and destination nodes.");return e},e.prototype.validateEdge=function(e,t){return this.validateNodes(t),this._validateEdge(e,t)},e.prototype.validateConnector=function(e){if(void 0===e.id)throw new h("Id not valid.");if(void 0===e.type||null===e.type||"string"!=typeof e.type)throw new h("Type not valid.");return e},e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[]},e}(),S={dropElement:null},b=function(){function e(e,t,n,o){this.nodeDraggingScope={shadowDragStarted:!1,dropElement:null,draggedNodes:[],shadowElements:[]},this.dragOffsets=[],this.draggedElements=[],this.destinationHtmlElements=[],this.oldDisplayStyles=[],this.modelService=e,this.automaticResize=n,this.dragAnimation=o,this.applyFunction=t}return e.prototype.getCoordinate=function(e,t){return e=Math.max(e,0),e=Math.min(e,t)},e.prototype.getXCoordinate=function(e){return this.getCoordinate(e,this.modelService.canvasHtmlElement.offsetWidth)},e.prototype.getYCoordinate=function(e){return this.getCoordinate(e,this.modelService.canvasHtmlElement.offsetHeight)},e.prototype.resizeCanvas=function(e,t){if(this.automaticResize&&!this.modelService.isDropSource()){var n=this.modelService.canvasHtmlElement;n.offsetWidth<e.x+t.offsetWidth+c.canvasResizeThreshold&&(n.style.width=n.offsetWidth+c.canvasResizeStep+"px"),n.offsetHeight<e.y+t.offsetHeight+c.canvasResizeThreshold&&(n.style.height=n.offsetHeight+c.canvasResizeStep+"px")}},e.prototype.isDraggingNode=function(e){return this.nodeDraggingScope.draggedNodes.includes(e)},e.prototype.dragstart=function(e,t){var n,o,r,i;if(!t.readonly){this.dragOffsets.length=0,this.draggedElements.length=0,this.nodeDraggingScope.draggedNodes.length=0,this.nodeDraggingScope.shadowElements.length=0,this.destinationHtmlElements.length=0,this.oldDisplayStyles.length=0;var s=[],a=[];if(this.modelService.nodes.isSelected(t)){var l=this.modelService.nodes.getSelectedNodes();try{for(var g=d(l),h=g.next();!h.done;h=g.next()){var p=h.value,u=$(this.modelService.nodes.getHtmlElement(p.id));s.push(u),a.push(p)}}catch(e){n={error:e}}finally{try{h&&!h.done&&(o=g.return)&&o.call(g)}finally{if(n)throw n.error}}}else s.push($(e.target)),a.push(t);var f=[],v=[];try{for(var m=d(s),y=m.next();!y.done;y=m.next()){u=y.value;f.push(parseInt(u.css("left"),10)-e.clientX),v.push(parseInt(u.css("top"),10)-e.clientY)}}catch(e){r={error:e}}finally{try{y&&!y.done&&(i=m.return)&&i.call(m)}finally{if(r)throw r.error}}var C=e.originalEvent||e;if(this.modelService.isDropSource()){S.dropElement&&(S.dropElement.parentNode.removeChild(S.dropElement),S.dropElement=null),S.dropElement=s[0][0].cloneNode(!0);var b=$(this.modelService.canvasHtmlElement).offset();S.dropElement.offsetInfo={offsetX:Math.round(f[0]+b.left),offsetY:Math.round(v[0]+b.top)},S.dropElement.style.position="absolute",S.dropElement.style.pointerEvents="none",S.dropElement.style.zIndex="9999",document.body.appendChild(S.dropElement);var D={node:t,dropTargetId:this.modelService.dropTargetId,offsetX:Math.round(f[0]+b.left),offsetY:Math.round(v[0]+b.top)};if(C.dataTransfer.setData("text",JSON.stringify(D)),C.dataTransfer.setDragImage)C.dataTransfer.setDragImage(this.modelService.getDragImage(),0,0);else{var E=e.target;this.destinationHtmlElements.push(E),this.oldDisplayStyles.push(E.style.display),E.style.display="none",this.nodeDraggingScope.shadowDragStarted=!0}}else{this.nodeDraggingScope.draggedNodes=a;for(var w=0;w<s.length;w++)this.draggedElements.push(s[w][0]),this.dragOffsets.push({x:f[w],y:v[w]});if(this.dragAnimation===c.dragAnimationShadow)for(w=0;w<this.draggedElements.length;w++){var x=this.dragOffsets[w],k=this.nodeDraggingScope.draggedNodes[w],O=$('<div style="position: absolute; opacity: 0.7; top: '+this.getYCoordinate(x.y+e.clientY)+"px; left: "+this.getXCoordinate(x.x+e.clientX)+'px; "><div class="innerNode"><p style="padding: 0 15px;">'+k.name+"</p> </div></div>"),I=$(this.draggedElements[w]).children()[0];O.children()[0].style.backgroundColor=I.style.backgroundColor,this.nodeDraggingScope.shadowElements.push(O),this.modelService.canvasHtmlElement.appendChild(this.nodeDraggingScope.shadowElements[w][0])}if(C.dataTransfer.setData("text","Just to support firefox"),C.dataTransfer.setDragImage)C.dataTransfer.setDragImage(this.modelService.getDragImage(),0,0);else{for(w=0;w<this.draggedElements.length;w++)this.destinationHtmlElements.push(this.draggedElements[w]),this.oldDisplayStyles.push(this.destinationHtmlElements[w].style.display),this.destinationHtmlElements[w].style.display="none";this.dragAnimation===c.dragAnimationShadow&&(this.nodeDraggingScope.shadowDragStarted=!0)}}}},e.prototype.drop=function(e){var t=this;if(this.modelService.isDropSource())return e.preventDefault(),!1;var n=null,o=(e.originalEvent||e).dataTransfer.getData("text");if(o){var r=null;try{r=JSON.parse(o)}catch(e){}if(r&&r.dropTargetId&&this.modelService.canvasHtmlElement.id&&this.modelService.canvasHtmlElement.id===r.dropTargetId){n=r.node;var i=$(this.modelService.canvasHtmlElement).offset(),s=e.clientX-i.left,a=e.clientY-i.top;n.x=Math.round(this.getXCoordinate(r.offsetX+s)),n.y=Math.round(this.getYCoordinate(r.offsetY+a))}}return n?(this.modelService.dropNode(e,n),e.preventDefault(),!1):this.nodeDraggingScope.draggedNodes.length?this.applyFunction((function(){for(var n=0;n<t.nodeDraggingScope.draggedNodes.length;n++){var o=t.nodeDraggingScope.draggedNodes[n],r=t.dragOffsets[n];o.x=Math.round(t.getXCoordinate(r.x+e.clientX)),o.y=Math.round(t.getYCoordinate(r.y+e.clientY))}return e.preventDefault(),t.modelService.notifyModelChanged(),!1})):void 0},e.prototype.dragover=function(e){var t=this;if(S.dropElement){var n=S.dropElement.offsetInfo;return S.dropElement.style.left=n.offsetX+e.clientX+"px",S.dropElement.style.top=n.offsetY+e.clientY+"px",this.nodeDraggingScope.shadowDragStarted&&this.applyFunction((function(){t.destinationHtmlElements[0].style.display=t.oldDisplayStyles[0],t.nodeDraggingScope.shadowDragStarted=!1})),void e.preventDefault()}if(this.modelService.isDropSource())e.preventDefault();else if(this.nodeDraggingScope.draggedNodes.length){if(this.dragAnimation===c.dragAnimationRepaint){if(this.nodeDraggingScope.draggedNodes.length)return this.applyFunction((function(){for(var n=0;n<t.nodeDraggingScope.draggedNodes.length;n++){var o=t.nodeDraggingScope.draggedNodes[n],r=t.dragOffsets[n];o.x=t.getXCoordinate(r.x+e.clientX),o.y=t.getYCoordinate(r.y+e.clientY),t.resizeCanvas(o,t.draggedElements[n])}return e.preventDefault(),t.modelService.notifyModelChanged(),!1}))}else if(this.dragAnimation===c.dragAnimationShadow&&this.nodeDraggingScope.draggedNodes.length){this.nodeDraggingScope.shadowDragStarted&&this.applyFunction((function(){for(var e=0;e<t.nodeDraggingScope.draggedNodes.length;e++)t.destinationHtmlElements[e].style.display=t.oldDisplayStyles[e];t.nodeDraggingScope.shadowDragStarted=!1}));for(var o=0;o<this.nodeDraggingScope.draggedNodes.length;o++){var r=this.nodeDraggingScope.draggedNodes[o],i=this.dragOffsets[o];this.nodeDraggingScope.shadowElements[o].css("left",this.getXCoordinate(i.x+e.clientX)+"px"),this.nodeDraggingScope.shadowElements[o].css("top",this.getYCoordinate(i.y+e.clientY)+"px"),this.resizeCanvas(r,this.draggedElements[o])}e.preventDefault()}}else e.preventDefault()},e.prototype.dragend=function(e){var t=this;this.applyFunction((function(){if(S.dropElement&&(S.dropElement.parentNode.removeChild(S.dropElement),S.dropElement=null),!t.modelService.isDropSource()){if(t.nodeDraggingScope.shadowElements.length){for(var e=0;e<t.nodeDraggingScope.draggedNodes.length;e++){var n=t.nodeDraggingScope.draggedNodes[e],o=t.nodeDraggingScope.shadowElements[e];n.x=parseInt(o.css("left").replace("px",""),10),n.y=parseInt(o.css("top").replace("px",""),10),t.modelService.canvasHtmlElement.removeChild(o[0])}t.nodeDraggingScope.shadowElements.length=0,t.modelService.notifyModelChanged()}t.nodeDraggingScope.draggedNodes.length&&(t.nodeDraggingScope.draggedNodes.length=0,t.draggedElements.length=0,t.dragOffsets.length=0)}}))},e}();var D=function(){function e(){}return e.prototype.getEdgeDAttribute=function(e,t,n){var o="M "+e.x+", "+e.y+" ";if(n===c.curvedStyle){var r=this.computeEdgeSourceTangent(e,t),i=this.computeEdgeDestinationTangent(e,t);o+="C "+r.x+", "+r.y+" "+(i.x-50)+", "+i.y+" "+t.x+", "+t.y}else o+="L "+t.x+", "+t.y;return o},e.prototype.getEdgeCenter=function(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}},e.prototype.computeEdgeTangentOffset=function(e,t){return(t.y-e.y)/2},e.prototype.computeEdgeSourceTangent=function(e,t){return{x:e.x,y:e.y+this.computeEdgeTangentOffset(e,t)}},e.prototype.computeEdgeDestinationTangent=function(e,t){return{x:t.x,y:t.y-this.computeEdgeTangentOffset(e,t)}},e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[]},e}(),E=function(){function e(e,t,n,o,r,i,s,a){this.edgeDragging={isDragging:!1,dragPoint1:null,dragPoint2:null,shadowDragStarted:!1},this.draggedEdgeSource=null,this.dragOffset={},this.destinationHtmlElement=null,this.oldDisplayStyle="",this.modelValidation=e,this.edgeDrawingService=t,this.modelService=n,this.model=o,this.isValidEdgeCallback=r||function(){return!0},this.applyFunction=i,this.dragAnimation=s,this.edgeStyle=a}return e.prototype.dragstart=function(e,t){var n,o,r,i,s,a=this;if(t.type===c.leftConnectorType){var l=function(e){if(e.destination===t.id)return r=g.modelService.connectors.getConnector(e.source),i=e.label,s=e,g.applyFunction((function(){a.modelService.edges.delete(e)})),"break"},g=this;try{for(var h=d(this.model.edges),p=h.next();!p.done;p=h.next()){if("break"===l(p.value))break}}catch(e){n={error:e}}finally{try{p&&!p.done&&(o=h.return)&&o.call(h)}finally{if(n)throw n.error}}}this.edgeDragging.isDragging=!0,void 0!==r?(this.draggedEdgeSource=r,this.edgeDragging.dragPoint1=this.modelService.connectors.getCenteredCoord(r.id),this.edgeDragging.dragLabel=i,this.edgeDragging.prevEdge=s):(this.draggedEdgeSource=t,this.edgeDragging.dragPoint1=this.modelService.connectors.getCenteredCoord(t.id));var u=this.modelService.canvasHtmlElement;if(!u)throw new Error("No canvas while edgedraggingService found.");this.dragOffset.x=-u.getBoundingClientRect().left,this.dragOffset.y=-u.getBoundingClientRect().top,this.edgeDragging.dragPoint2={x:e.clientX+this.dragOffset.x,y:e.clientY+this.dragOffset.y};var f=e.originalEvent||e;f.dataTransfer.setData("Text","Just to support firefox"),f.dataTransfer.setDragImage?f.dataTransfer.setDragImage(this.modelService.getDragImage(),0,0):(this.destinationHtmlElement=e.target,this.oldDisplayStyle=this.destinationHtmlElement.style.display,this.destinationHtmlElement.style.display="none",this.dragAnimation===c.dragAnimationShadow&&(this.edgeDragging.shadowDragStarted=!0)),this.dragAnimation===c.dragAnimationShadow&&(void 0===this.edgeDragging.gElement&&(this.edgeDragging.gElement=$(document.querySelectorAll(".shadow-svg-class")),this.edgeDragging.pathElement=$(document.querySelectorAll(".shadow-svg-class")).find("path"),this.edgeDragging.circleElement=$(document.querySelectorAll(".shadow-svg-class")).find("circle")),this.edgeDragging.gElement.css("display","block"),this.edgeDragging.pathElement.attr("d",this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1,this.edgeDragging.dragPoint2,this.edgeStyle)),this.edgeDragging.circleElement.attr("cx",this.edgeDragging.dragPoint2.x),this.edgeDragging.circleElement.attr("cy",this.edgeDragging.dragPoint2.y)),e.stopPropagation()},e.prototype.dragover=function(e){var t=this;if(this.edgeDragging.isDragging)if(this.edgeDragging.magnetActive||this.dragAnimation!==c.dragAnimationShadow){if(this.dragAnimation===c.dragAnimationRepaint)return this.applyFunction((function(){null!==t.destinationHtmlElement&&(t.destinationHtmlElement.style.display=t.oldDisplayStyle),t.edgeDragging.dragPoint2={x:e.clientX+t.dragOffset.x,y:e.clientY+t.dragOffset.y}}))}else null!==this.destinationHtmlElement&&(this.destinationHtmlElement.style.display=this.oldDisplayStyle),this.edgeDragging.shadowDragStarted&&this.applyFunction((function(){t.edgeDragging.shadowDragStarted=!1})),this.edgeDragging.dragPoint2={x:e.clientX+this.dragOffset.x,y:e.clientY+this.dragOffset.y},this.edgeDragging.pathElement.attr("d",this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1,this.edgeDragging.dragPoint2,this.edgeStyle)),this.edgeDragging.circleElement.attr("cx",this.edgeDragging.dragPoint2.x),this.edgeDragging.circleElement.attr("cy",this.edgeDragging.dragPoint2.y)},e.prototype.dragoverConnector=function(e,t){if(this.edgeDragging.isDragging){this.dragover(e);try{this.modelValidation.validateEdges(this.model.edges.concat([{source:this.draggedEdgeSource.id,destination:t.id}]),this.model.nodes)}catch(e){if(e instanceof h)return!0;throw e}if(this.isValidEdgeCallback(this.draggedEdgeSource,t))return e.preventDefault(),e.stopPropagation(),!1}},e.prototype.dragleaveMagnet=function(e){this.edgeDragging.magnetActive=!1},e.prototype.dragoverMagnet=function(e,t){var n=this;if(this.edgeDragging.isDragging){this.dragover(e);try{this.modelValidation.validateEdges(this.model.edges.concat([{source:this.draggedEdgeSource.id,destination:t.id}]),this.model.nodes)}catch(e){if(e instanceof h)return!0;throw e}if(this.isValidEdgeCallback(this.draggedEdgeSource,t)){if(this.dragAnimation===c.dragAnimationShadow)return this.edgeDragging.magnetActive=!0,this.edgeDragging.dragPoint2=this.modelService.connectors.getCenteredCoord(t.id),this.edgeDragging.pathElement.attr("d",this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1,this.edgeDragging.dragPoint2,this.edgeStyle)),this.edgeDragging.circleElement.attr("cx",this.edgeDragging.dragPoint2.x),this.edgeDragging.circleElement.attr("cy",this.edgeDragging.dragPoint2.y),e.preventDefault(),e.stopPropagation(),!1;if(this.dragAnimation===c.dragAnimationRepaint)return this.applyFunction((function(){return n.edgeDragging.dragPoint2=n.modelService.connectors.getCenteredCoord(t.id),e.preventDefault(),e.stopPropagation(),!1}))}}},e.prototype.dragend=function(e){var t=this;if(this.edgeDragging.isDragging&&(this.edgeDragging.isDragging=!1,this.edgeDragging.dragPoint1=null,this.edgeDragging.dragPoint2=null,this.edgeDragging.dragLabel=null,e.stopPropagation(),this.dragAnimation===c.dragAnimationShadow&&this.edgeDragging.gElement.css("display","none"),this.edgeDragging.prevEdge)){var n=this.edgeDragging.prevEdge;this.edgeDragging.prevEdge=null,this.applyFunction((function(){t.modelService.edges.putEdge(n)}))}},e.prototype.drop=function(e,t){if(this.edgeDragging.isDragging){try{this.modelValidation.validateEdges(this.model.edges.concat([{source:this.draggedEdgeSource.id,destination:t.id}]),this.model.nodes)}catch(e){if(e instanceof h)return!0;throw e}if(this.isValidEdgeCallback(this.draggedEdgeSource,t))return this.edgeDragging.prevEdge=null,this.modelService.edges._addEdge(e,this.draggedEdgeSource,t,this.edgeDragging.dragLabel),e.stopPropagation(),e.preventDefault(),!1}},e}();var w=function(){function e(e){this.mouseoverscope={connector:null,edge:null,node:null},this.applyFunction=e}return e.prototype.nodeMouseOver=function(e,t){var n=this;return this.applyFunction((function(){n.mouseoverscope.node=t}))},e.prototype.nodeMouseOut=function(e,t){var n=this;return this.applyFunction((function(){n.mouseoverscope.node=null}))},e.prototype.connectorMouseEnter=function(e,t){var n=this;return this.applyFunction((function(){n.mouseoverscope.connector=t}))},e.prototype.connectorMouseLeave=function(e,t){var n=this;return this.applyFunction((function(){n.mouseoverscope.connector=null}))},e.prototype.edgeMouseEnter=function(e,t){this.mouseoverscope.edge=t},e.prototype.edgeMouseLeave=function(e,t){this.mouseoverscope.edge=null},e}();var x=/(auto|scroll)/,k=function(e,t){return getComputedStyle(e,null).getPropertyValue(t)},O=function(e){return x.test(k(e,"overflow")+k(e,"overflow-y")+k(e,"overflow-x"))},I=function(e){return e&&e!==document.body?O(e)?e:I(e.parentNode):document.body};var A=function(){function e(e,t,n){this.selectRect={x1:0,x2:0,y1:0,y2:0},this.modelService=e,this.selectElement=t,this.$canvasElement=$(this.modelService.canvasHtmlElement),this.$scrollParent=$(I(this.modelService.canvasHtmlElement)),this.applyFunction=n}return e.prototype.mousedown=function(e){if(this.modelService.isEditable()&&!e.ctrlKey&&!e.metaKey&&0===e.button&&this.selectElement.hidden){this.selectElement.hidden=!1;var t=this.$canvasElement.offset();this.selectRect.x1=Math.round(e.pageX-t.left),this.selectRect.y1=Math.round(e.pageY-t.top),this.selectRect.x2=this.selectRect.x1,this.selectRect.y2=this.selectRect.y1,this.updateSelectRect()}},e.prototype.mousemove=function(e){if(this.modelService.isEditable()&&!e.ctrlKey&&!e.metaKey&&0===e.button&&!this.selectElement.hidden){var t=this.$canvasElement.offset();this.selectRect.x2=Math.round(e.pageX-t.left),this.selectRect.y2=Math.round(e.pageY-t.top),this.updateScroll(t),this.updateSelectRect()}},e.prototype.updateScroll=function(e){var t=this.$scrollParent[0].getBoundingClientRect(),n=t.bottom-e.top,o=t.right-e.left,r=t.top-e.top,i=t.left-e.left;if(this.selectRect.y2-r<25){var s=25-(this.selectRect.y2-r),a=this.$scrollParent.scrollTop();this.$scrollParent.scrollTop(a-s)}else if(n-this.selectRect.y2<40){var d=40-(n-this.selectRect.y2),l=this.$scrollParent.scrollTop();this.$scrollParent.scrollTop(l+d)}if(this.selectRect.x2-i<25){var c=25-(this.selectRect.x2-i),g=this.$scrollParent.scrollLeft();this.$scrollParent.scrollLeft(g-c)}else if(o-this.selectRect.x2<40){var h=40-(o-this.selectRect.x2),p=this.$scrollParent.scrollLeft();this.$scrollParent.scrollLeft(p+h)}},e.prototype.mouseup=function(e){if(this.modelService.isEditable()&&!e.ctrlKey&&!e.metaKey&&0===e.button&&!this.selectElement.hidden){var t=this.selectElement.getBoundingClientRect();this.selectElement.hidden=!0,this.selectObjects(t)}},e.prototype.updateSelectRect=function(){var e=Math.min(this.selectRect.x1,this.selectRect.x2),t=Math.max(this.selectRect.x1,this.selectRect.x2),n=Math.min(this.selectRect.y1,this.selectRect.y2),o=Math.max(this.selectRect.y1,this.selectRect.y2);this.selectElement.style.left=e+"px",this.selectElement.style.top=n+"px",this.selectElement.style.width=t-e+"px",this.selectElement.style.height=o-n+"px"},e.prototype.selectObjects=function(e){var t=this;this.applyFunction((function(){t.modelService.selectAllInRect(e)}))},e}();var M=function(){function e(e,n,o,r,i,s){this.elementRef=e,this.differs=n,this.modelValidation=o,this.edgeDrawingService=r,this.cd=i,this.zone=s,this.modelChanged=new t.EventEmitter,this.flowchartConstants=c,this.nodesDiffer=this.differs.find([]).create((function(e,t){return t})),this.edgesDiffer=this.differs.find([]).create((function(e,t){return t})),this.arrowDefId="arrow-"+Math.random(),this.arrowDefIdSelected=this.arrowDefId+"-selected"}return Object.defineProperty(e.prototype,"canvasClass",{get:function(){return c.canvasClass},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e,t,n=this;if(!this.dropTargetId&&this.edgeStyle!==c.curvedStyle&&this.edgeStyle!==c.lineStyle)throw new Error("edgeStyle not supported.");this.nodeHeight=this.nodeHeight||200,this.nodeWidth=this.nodeWidth||200,this.dragAnimation=this.dragAnimation||c.dragAnimationRepaint,this.userCallbacks=this.userCallbacks||{},this.automaticResize=this.automaticResize||!1;try{for(var o=d(Object.keys(this.userCallbacks)),r=o.next();!r.done;r=o.next()){var i=r.value;if("function"!=typeof this.userCallbacks[i]&&"nodeCallbacks"!==i)throw new Error("All callbacks should be functions.")}}catch(t){e={error:t}}finally{try{r&&!r.done&&(t=o.return)&&t.call(o)}finally{if(e)throw e.error}}this.userNodeCallbacks=this.userCallbacks.nodeCallbacks;var s=$(this.elementRef.nativeElement);this.modelService=new u(this.modelValidation,this.model,this.modelChanged,this.cd,this.selectedObjects,this.userCallbacks.dropNode,this.userCallbacks.createEdge,this.userCallbacks.edgeAdded,this.userCallbacks.nodeRemoved,this.userCallbacks.edgeRemoved,s[0],s[0].querySelector("svg")),this.dropTargetId&&(this.modelService.dropTargetId=this.dropTargetId);var a=this.zone.run.bind(this.zone);this.nodeDraggingService=new b(this.modelService,a,this.automaticResize,this.dragAnimation),this.edgeDraggingService=new E(this.modelValidation,this.edgeDrawingService,this.modelService,this.model,this.userCallbacks.isValidEdge||null,a,this.dragAnimation,this.edgeStyle),this.mouseoverService=new w(a),this.rectangleSelectService=new A(this.modelService,s[0].querySelector("#select-rectangle"),a),this.callbacks={nodeDragstart:this.nodeDraggingService.dragstart.bind(this.nodeDraggingService),nodeDragend:this.nodeDraggingService.dragend.bind(this.nodeDraggingService),edgeDragstart:this.edgeDraggingService.dragstart.bind(this.edgeDraggingService),edgeDragend:this.edgeDraggingService.dragend.bind(this.edgeDraggingService),edgeDrop:this.edgeDraggingService.drop.bind(this.edgeDraggingService),edgeDragoverConnector:this.edgeDraggingService.dragoverConnector.bind(this.edgeDraggingService),edgeDragoverMagnet:this.edgeDraggingService.dragoverMagnet.bind(this.edgeDraggingService),edgeDragleaveMagnet:this.edgeDraggingService.dragleaveMagnet.bind(this.edgeDraggingService),nodeMouseOver:this.mouseoverService.nodeMouseOver.bind(this.mouseoverService),nodeMouseOut:this.mouseoverService.nodeMouseOut.bind(this.mouseoverService),connectorMouseEnter:this.mouseoverService.connectorMouseEnter.bind(this.mouseoverService),connectorMouseLeave:this.mouseoverService.connectorMouseLeave.bind(this.mouseoverService),nodeClicked:function(e,t){n.modelService.nodes.handleClicked(t,e.ctrlKey),e.stopPropagation(),e.preventDefault()}},this.adjustCanvasSize(!0)},e.prototype.ngDoCheck=function(){if(this.model){var e=this.nodesDiffer.diff(this.model.nodes),t=this.edgesDiffer.diff(this.model.edges),n=!1,o=!1;null!==e&&(e.forEachAddedItem((function(){n=!0})),e.forEachRemovedItem((function(){n=!0}))),null!==t&&(t.forEachAddedItem((function(){o=!0})),t.forEachRemovedItem((function(){o=!0}))),n&&this.adjustCanvasSize(!0),(n||o)&&this.cd.detectChanges()}},e.prototype.getEdgeDAttribute=function(e){return this.edgeDrawingService.getEdgeDAttribute(this.modelService.edges.sourceCoord(e),this.modelService.edges.destCoord(e),this.edgeStyle)},e.prototype.adjustCanvasSize=function(e){var t,n,o=this,r=0,i=0,s=$(this.elementRef.nativeElement);this.model.nodes.forEach((function(e){r=Math.max(e.x+o.nodeWidth,r),i=Math.max(e.y+o.nodeHeight,i)})),e?(t=r,n=i):(t=Math.max(r,s.prop("offsetWidth")),n=Math.max(i,s.prop("offsetHeight"))),s.css("width",t+"px"),s.css("height",n+"px")},e.prototype.canvasClick=function(e){},e.prototype.edgeMouseDown=function(e,t){e.stopPropagation()},e.prototype.edgeClick=function(e,t){this.modelService.edges.handleEdgeMouseClick(t,e.ctrlKey),e.stopPropagation(),e.preventDefault()},e.prototype.edgeRemove=function(e,t){this.modelService.edges.delete(t),e.stopPropagation(),e.preventDefault()},e.prototype.edgeEdit=function(e,t){this.userCallbacks.edgeEdit&&this.userCallbacks.edgeEdit(e,t)},e.prototype.edgeDoubleClick=function(e,t){this.userCallbacks.edgeDoubleClick&&this.userCallbacks.edgeDoubleClick(e,t)},e.prototype.edgeMouseOver=function(e,t){this.userCallbacks.edgeMouseOver&&this.userCallbacks.edgeMouseOver(e,t)},e.prototype.edgeMouseEnter=function(e,t){this.mouseoverService.edgeMouseEnter(e,t)},e.prototype.edgeMouseLeave=function(e,t){this.mouseoverService.edgeMouseLeave(e,t)},e.prototype.dragover=function(e){this.nodeDraggingService.dragover(e),this.edgeDraggingService.dragover(e)},e.prototype.drop=function(e){e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation(),this.nodeDraggingService.drop(e)},e.prototype.mousedown=function(e){this.rectangleSelectService.mousedown(e)},e.prototype.mousemove=function(e){this.rectangleSelectService.mousemove(e)},e.prototype.mouseup=function(e){this.rectangleSelectService.mouseup(e)},e.decorators=[{type:t.Component,args:[{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 ×\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:t.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;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}"]}]}],e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.IterableDiffers},{type:C},{type:D},{type:t.ChangeDetectorRef},{type:t.NgZone}]},e.propDecorators={canvasClass:[{type:t.HostBinding,args:["attr.class"]}],model:[{type:t.Input}],selectedObjects:[{type:t.Input}],edgeStyle:[{type:t.Input}],userCallbacks:[{type:t.Input}],automaticResize:[{type:t.Input}],dragAnimation:[{type:t.Input}],nodeWidth:[{type:t.Input}],nodeHeight:[{type:t.Input}],dropTargetId:[{type:t.Input}],modelChanged:[{type:t.Output}],dragover:[{type:t.HostListener,args:["dragover",["$event"]]}],drop:[{type:t.HostListener,args:["drop",["$event"]]}],mousedown:[{type:t.HostListener,args:["mousedown",["$event"]]}],mousemove:[{type:t.HostListener,args:["mousemove",["$event"]]}],mouseup:[{type:t.HostListener,args:["mouseup",["$event"]]}]},e}();var R=function(){function e(e){this.elementRef=e}return e.prototype.ngOnInit=function(){$(this.elementRef.nativeElement).addClass(c.magnetClass)},e.prototype.dragover=function(e){return this.callbacks.edgeDragoverMagnet(e,this.connector)},e.prototype.dragleave=function(e){this.callbacks.edgeDragleaveMagnet(e)},e.prototype.drop=function(e){return this.callbacks.edgeDrop(e,this.connector)},e.prototype.dragend=function(e){this.callbacks.edgeDragend(e)},e.decorators=[{type:t.Directive,args:[{selector:"[fc-magnet]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={callbacks:[{type:t.Input}],connector:[{type:t.Input}],dragover:[{type:t.HostListener,args:["dragover",["$event"]]}],dragleave:[{type:t.HostListener,args:["dragleave",["$event"]]}],drop:[{type:t.HostListener,args:["drop",["$event"]]}],dragend:[{type:t.HostListener,args:["dragend",["$event"]]}]},e}();var H=function(){function e(e){this.elementRef=e}return e.prototype.ngOnInit=function(){var e=$(this.elementRef.nativeElement);e.addClass(c.connectorClass),this.modelservice.isEditable()&&(e.attr("draggable","true"),this.updateConnectorClass()),this.modelservice.connectors.setHtmlElement(this.connector.id,e[0])},e.prototype.ngOnChanges=function(e){var t,n,o=!1;try{for(var r=d(Object.keys(e)),i=r.next();!i.done;i=r.next()){var s=i.value,a=e[s];a.firstChange||a.currentValue===a.previousValue||"mouseOverConnector"===s&&(o=!0)}}catch(e){t={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}o&&this.modelservice.isEditable()&&this.updateConnectorClass()},e.prototype.updateConnectorClass=function(){var e=$(this.elementRef.nativeElement);this.connector===this.mouseOverConnector?e.addClass(c.hoverClass):e.removeClass(c.hoverClass)},e.prototype.dragover=function(e){},e.prototype.drop=function(e){if(this.modelservice.isEditable())return this.callbacks.edgeDrop(e,this.connector)},e.prototype.dragend=function(e){this.modelservice.isEditable()&&this.callbacks.edgeDragend(e)},e.prototype.dragstart=function(e){this.modelservice.isEditable()&&this.callbacks.edgeDragstart(e,this.connector)},e.prototype.mouseenter=function(e){this.modelservice.isEditable()&&this.callbacks.connectorMouseEnter(e,this.connector)},e.prototype.mouseleave=function(e){this.modelservice.isEditable()&&this.callbacks.connectorMouseLeave(e,this.connector)},e.decorators=[{type:t.Directive,args:[{selector:"[fc-connector]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={callbacks:[{type:t.Input}],modelservice:[{type:t.Input}],connector:[{type:t.Input}],mouseOverConnector:[{type:t.Input}],dragover:[{type:t.HostListener,args:["dragover",["$event"]]}],drop:[{type:t.HostListener,args:["drop",["$event"]]}],dragend:[{type:t.HostListener,args:["dragend",["$event"]]}],dragstart:[{type:t.HostListener,args:["dragstart",["$event"]]}],mouseenter:[{type:t.HostListener,args:["mouseenter",["$event"]]}],mouseleave:[{type:t.HostListener,args:["mouseleave",["$event"]]}]},e}();var N=function(){function e(e,t,n){this.nodeComponentConfig=e,this.elementRef=t,this.componentFactoryResolver=n}return Object.defineProperty(e.prototype,"nodeId",{get:function(){return this.node.id},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"top",{get:function(){return this.node.y+"px"},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"left",{get:function(){return this.node.x+"px"},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.userNodeCallbacks||(this.userNodeCallbacks={}),this.userNodeCallbacks.nodeEdit=this.userNodeCallbacks.nodeEdit||function(){},this.userNodeCallbacks.doubleClick=this.userNodeCallbacks.doubleClick||function(){},this.userNodeCallbacks.mouseDown=this.userNodeCallbacks.mouseDown||function(){},this.userNodeCallbacks.mouseEnter=this.userNodeCallbacks.mouseEnter||function(){},this.userNodeCallbacks.mouseLeave=this.userNodeCallbacks.mouseLeave||function(){};var e=$(this.elementRef.nativeElement);e.addClass(c.nodeClass),this.node.readonly||e.attr("draggable","true"),this.updateNodeClass(),this.modelservice.nodes.setHtmlElement(this.node.id,e[0]),this.nodeContentContainer.clear();var t=this.componentFactoryResolver.resolveComponentFactory(this.nodeComponentConfig.nodeComponentType),n=this.nodeContentContainer.createComponent(t);this.nodeComponent=n.instance,this.nodeComponent.callbacks=this.callbacks,this.nodeComponent.userNodeCallbacks=this.userNodeCallbacks,this.nodeComponent.node=this.node,this.nodeComponent.modelservice=this.modelservice,this.updateNodeComponent()},e.prototype.ngOnChanges=function(e){var t,n,o=!1;try{for(var r=d(Object.keys(e)),i=r.next();!i.done;i=r.next()){var s=i.value,a=e[s];a.firstChange||a.currentValue===a.previousValue||["selected","edit","underMouse","mouseOverConnector","dragging"].includes(s)&&(o=!0)}}catch(e){t={error:e}}finally{try{i&&!i.done&&(n=r.return)&&n.call(r)}finally{if(t)throw t.error}}o&&(this.updateNodeClass(),this.updateNodeComponent())},e.prototype.updateNodeClass=function(){var e=$(this.elementRef.nativeElement);this.toggleClass(e,c.selectedClass,this.selected),this.toggleClass(e,c.editClass,this.edit),this.toggleClass(e,c.hoverClass,this.underMouse),this.toggleClass(e,c.draggingClass,this.dragging)},e.prototype.updateNodeComponent=function(){this.nodeComponent.selected=this.selected,this.nodeComponent.edit=this.edit,this.nodeComponent.underMouse=this.underMouse,this.nodeComponent.mouseOverConnector=this.mouseOverConnector,this.nodeComponent.dragging=this.dragging},e.prototype.toggleClass=function(e,t,n){n?e.addClass(t):e.removeClass(t)},e.prototype.mousedown=function(e){e.stopPropagation()},e.prototype.dragstart=function(e){this.node.readonly||this.callbacks.nodeDragstart(e,this.node)},e.prototype.dragend=function(e){this.node.readonly||this.callbacks.nodeDragend(e)},e.prototype.click=function(e){this.node.readonly||this.callbacks.nodeClicked(e,this.node)},e.prototype.mouseover=function(e){this.node.readonly||this.callbacks.nodeMouseOver(e,this.node)},e.prototype.mouseout=function(e){this.node.readonly||this.callbacks.nodeMouseOut(e,this.node)},e.decorators=[{type:t.Component,args:[{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}"]}]}],e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[l]}]},{type:t.ElementRef},{type:t.ComponentFactoryResolver}]},e.propDecorators={callbacks:[{type:t.Input}],userNodeCallbacks:[{type:t.Input}],node:[{type:t.Input}],selected:[{type:t.Input}],edit:[{type:t.Input}],underMouse:[{type:t.Input}],mouseOverConnector:[{type:t.Input}],modelservice:[{type:t.Input}],dragging:[{type:t.Input}],nodeId:[{type:t.HostBinding,args:["attr.id"]}],top:[{type:t.HostBinding,args:["style.top"]}],left:[{type:t.HostBinding,args:["style.left"]}],nodeContentContainer:[{type:t.ViewChild,args:["nodeContent",{read:t.ViewContainerRef,static:!0}]}],mousedown:[{type:t.HostListener,args:["mousedown",["$event"]]}],dragstart:[{type:t.HostListener,args:["dragstart",["$event"]]}],dragend:[{type:t.HostListener,args:["dragend",["$event"]]}],click:[{type:t.HostListener,args:["click",["$event"]]}],mouseover:[{type:t.HostListener,args:["mouseover",["$event"]]}],mouseout:[{type:t.HostListener,args:["mouseout",["$event"]]}]},e}();var P=function(){function e(){this.flowchartConstants=c}return e.prototype.ngOnInit=function(){},e.propDecorators={callbacks:[{type:t.Input}],userNodeCallbacks:[{type:t.Input}],node:[{type:t.Input}],selected:[{type:t.Input}],edit:[{type:t.Input}],underMouse:[{type:t.Input}],mouseOverConnector:[{type:t.Input}],modelservice:[{type:t.Input}],dragging:[{type:t.Input}]},e}();var j=function(e){function n(){return e.call(this)||this}return s(n,e),n.decorators=[{type:t.Component,args:[{selector:"fc-default-node",template:'<div\n (dblclick)="userNodeCallbacks.doubleClick($event, node)">\n <div class="{{flowchartConstants.nodeOverlayClass}}"></div>\n <div class="innerNode">\n <p>{{ node.name }}</p>\n\n <div class="{{flowchartConstants.leftConnectorClass}}">\n <div fc-magnet [connector]="connector" [callbacks]="callbacks"\n *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">\n <div fc-connector [connector]="connector"\n [mouseOverConnector]="mouseOverConnector"\n [callbacks]="callbacks"\n [modelservice]="modelservice"></div>\n </div>\n </div>\n <div class="{{flowchartConstants.rightConnectorClass}}">\n <div fc-magnet [connector]="connector" [callbacks]="callbacks"\n *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">\n <div fc-connector [connector]="connector"\n [mouseOverConnector]="mouseOverConnector"\n [callbacks]="callbacks"\n [modelservice]="modelservice"></div>\n </div>\n </div>\n </div>\n <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)">\n <i class="fa fa-pencil" aria-hidden="true"></i>\n </div>\n <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" (click)="modelservice.nodes.delete(node)">\n ×\n </div>\n</div>\n',styles:[":host .fc-node-overlay{position:absolute;pointer-events:none;left:0;top:0;right:0;bottom:0;background-color:#000;opacity:0}:host :host-context(.fc-hover) .fc-node-overlay{opacity:.25;transition:opacity .2s}:host :host-context(.fc-selected) .fc-node-overlay{opacity:.25}:host .innerNode{display:flex;justify-content:center;align-items:center;min-width:100px;border-radius:5px;background-color:#f15b26;color:#fff;font-size:16px;pointer-events:none}:host .innerNode p{padding:0 15px;text-align:center}"]}]}],n.ctorParameters=function(){return[]},n}(P),T={nodeComponentType:j},L=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{entryComponents:[j],declarations:[M,R,H,N,j],providers:[C,D,{provide:l,useValue:T}],imports:[r.CommonModule],exports:[M,R,H,j]}]}],e}();e.FC_NODE_COMPONENT_CONFIG=l,e.FcNodeComponent=P,e.FlowchartConstants=c,e.ModelvalidationError=h,e.NgxFlowchartComponent=M,e.NgxFlowchartModule=L,e.fcTopSort=p,e.ɵa=N,e.ɵb=C,e.ɵc=D,e.ɵd=j,e.ɵe=R,e.ɵf=H,Object.defineProperty(e,"__esModule",{value:!0})}));
|
|
//# sourceMappingURL=ngx-flowchart.umd.min.js.map
|