Release 1.0.0

Set ver to 1.0.0
Angular 12 migration
121 changed files with 2130 additions and 21174 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -1,13 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
--- a/.gitignore
+++ b/.gitignore
@ -1,45 +0,0 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/tmp
-/out-tsc
-# Only exists if Bazel was run
-/bazel-out
-
-# dependencies
-/node_modules
-
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
-
-# IDEs and editors
-/.idea
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# IDE - VSCode
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
-npm-debug.log
-yarn-error.log
-testem.log
-/typings
-
-# System Files
-.DS_Store
-Thumbs.db
--- a/201
+++ b/201
@ -1,201 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "{}"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright 2016 The Thingsboard Authors
-
-   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
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
--- a/README.md
+++ b/README.md
@ -1,26 +1,23 @@
 # NgxFlowchart

-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.1.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.3.

 ## Code scaffolding

-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+Run `ng generate component component-name --project ngx-flowchart` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-flowchart`.
+> Note: Don't forget to add `--project ngx-flowchart` or else it will be added to the default project in your `angular.json` file. 

 ## Build

-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+Run `ng build ngx-flowchart` to build the project. The build artifacts will be stored in the `dist/` directory.

-## Running unit tests
+## Publishing

-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+After building your library with `ng build ngx-flowchart`, go to the dist folder `cd dist/ngx-flowchart` and run `npm publish`.

-## Running end-to-end tests
+## Running unit tests

-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Run `ng test ngx-flowchart` to execute the unit tests via [Karma](https://karma-runner.github.io).

 ## Further help

--- a/angular.json
+++ b/angular.json
@ -1,171 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ngx-flowchart-demo": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "aot": true,
-            "outputPath": "dist/ngx-flowchart-demo",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "node_modules/jquery/dist/jquery.min.js"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "ngx-flowchart-demo:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "ngx-flowchart-demo:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "ngx-flowchart-demo:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": []
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "tsconfig.app.json",
-              "tsconfig.spec.json",
-              "e2e/tsconfig.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "ngx-flowchart-demo:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "ngx-flowchart-demo:serve:production"
-            }
-          }
-        }
-      }
-    },
-    "ngx-flowchart": {
-      "projectType": "library",
-      "root": "projects/ngx-flowchart",
-      "sourceRoot": "projects/ngx-flowchart/src",
-      "prefix": "fc",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "projects/ngx-flowchart/tsconfig.lib.json",
-            "project": "projects/ngx-flowchart/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/ngx-flowchart/tsconfig.lib.prod.json",
-              "project": "projects/ngx-flowchart/ng-package.prod.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "projects/ngx-flowchart/src/test.ts",
-            "tsConfig": "projects/ngx-flowchart/tsconfig.spec.json",
-            "karmaConfig": "projects/ngx-flowchart/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/ngx-flowchart/tsconfig.lib.json",
-              "projects/ngx-flowchart/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    }},
-  "defaultProject": "ngx-flowchart-demo"
-}
--- a/12
+++ b/12
@ -1,12 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
--- a/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js
+++ b/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js
--- a/bundles/ngx-flowchart.umd.js.map
+++ b/bundles/ngx-flowchart.umd.js.map
--- a/dist/ngx-flowchart/README.md
+++ b/dist/ngx-flowchart/README.md
@ -1,24 +0,0 @@
-# NgxFlowchart
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.3.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project ngx-flowchart` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-flowchart`.
-> Note: Don't forget to add `--project ngx-flowchart` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build ngx-flowchart` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build ngx-flowchart`, go to the dist folder `cd dist/ngx-flowchart` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test ngx-flowchart` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js.map
+++ b/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js.map
--- a/dist/ngx-flowchart/bundles/ngx-flowchart.umd.min.js
+++ b/dist/ngx-flowchart/bundles/ngx-flowchart.umd.min.js
--- a/dist/ngx-flowchart/bundles/ngx-flowchart.umd.min.js.map
+++ b/dist/ngx-flowchart/bundles/ngx-flowchart.umd.min.js.map
--- a/dist/ngx-flowchart/esm2015/lib/connector.directive.js
+++ b/dist/ngx-flowchart/esm2015/lib/connector.directive.js
--- a/dist/ngx-flowchart/esm2015/lib/default-node.component.js
+++ b/dist/ngx-flowchart/esm2015/lib/default-node.component.js
@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { FcNodeComponent } from './node.component';
-export class DefaultFcNodeComponent extends FcNodeComponent {
-    constructor() {
-        super();
-    }
-}
-DefaultFcNodeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'fc-default-node',
-                template: "<div\n  (dblclick)=\"userNodeCallbacks.doubleClick($event, node)\">\n  <div class=\"{{flowchartConstants.nodeOverlayClass}}\"></div>\n  <div class=\"innerNode\">\n    <p>{{ node.name }}</p>\n\n    <div class=\"{{flowchartConstants.leftConnectorClass}}\">\n      <div fc-magnet [connector]=\"connector\" [callbacks]=\"callbacks\"\n           *ngFor=\"let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)\">\n        <div fc-connector [connector]=\"connector\"\n             [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{background-color:#000;bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top: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{align-items:center;background-color:#f15b26;border-radius:5px;color:#fff;display:flex;font-size:16px;justify-content:center;min-width:100px;pointer-events:none}:host .innerNode p{padding:0 15px;text-align:center}"]
-            },] }
-];
-DefaultFcNodeComponent.ctorParameters = () => [];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mbG93Y2hhcnQvc3JjL2xpYi9kZWZhdWx0LW5vZGUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBT25ELE1BQU0sT0FBTyxzQkFBdUIsU0FBUSxlQUFlO0lBRXpEO1FBQ0UsS0FBSyxFQUFFLENBQUM7SUFDVixDQUFDOzs7WUFURixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsMG5EQUE0Qzs7YUFFN0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZjTm9kZUNvbXBvbmVudCB9IGZyb20gJy4vbm9kZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmYy1kZWZhdWx0LW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGVmYXVsdEZjTm9kZUNvbXBvbmVudCBleHRlbmRzIEZjTm9kZUNvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG59XG4iXX0=
--- a/dist/ngx-flowchart/esm2015/lib/edge-drawing.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/edge-drawing.service.js
@ -1,44 +0,0 @@
-import { Injectable } from '@angular/core';
-import { FlowchartConstants } from './ngx-flowchart.models';
-export class FcEdgeDrawingService {
-    constructor() {
-    }
-    getEdgeDAttribute(pt1, pt2, style) {
-        let dAddribute = `M ${pt1.x}, ${pt1.y} `;
-        if (style === FlowchartConstants.curvedStyle) {
-            const sourceTangent = this.computeEdgeSourceTangent(pt1, pt2);
-            const destinationTangent = this.computeEdgeDestinationTangent(pt1, pt2);
-            dAddribute += `C ${sourceTangent.x}, ${sourceTangent.y} ${(destinationTangent.x - 50)}, ${destinationTangent.y} ${pt2.x}, ${pt2.y}`;
-        }
-        else {
-            dAddribute += `L ${pt2.x}, ${pt2.y}`;
-        }
-        return dAddribute;
-    }
-    getEdgeCenter(pt1, pt2) {
-        return {
-            x: (pt1.x + pt2.x) / 2,
-            y: (pt1.y + pt2.y) / 2
-        };
-    }
-    computeEdgeTangentOffset(pt1, pt2) {
-        return (pt2.y - pt1.y) / 2;
-    }
-    computeEdgeSourceTangent(pt1, pt2) {
-        return {
-            x: pt1.x,
-            y: pt1.y + this.computeEdgeTangentOffset(pt1, pt2)
-        };
-    }
-    computeEdgeDestinationTangent(pt1, pt2) {
-        return {
-            x: pt2.x,
-            y: pt2.y - this.computeEdgeTangentOffset(pt1, pt2)
-        };
-    }
-}
-FcEdgeDrawingService.decorators = [
-    { type: Injectable }
-];
-FcEdgeDrawingService.ctorParameters = () => [];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1kcmF3aW5nLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZmxvd2NoYXJ0L3NyYy9saWIvZWRnZS1kcmF3aW5nLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQVksa0JBQWtCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUd0RSxNQUFNLE9BQU8sb0JBQW9CO0lBRS9CO0lBQ0EsQ0FBQztJQUVNLGlCQUFpQixDQUFDLEdBQWEsRUFBRSxHQUFhLEVBQUUsS0FBYTtRQUNsRSxJQUFJLFVBQVUsR0FBRyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDO1FBQ3pDLElBQUksS0FBSyxLQUFLLGtCQUFrQixDQUFDLFdBQVcsRUFBRTtZQUM1QyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQzlELE1BQU0sa0JBQWtCLEdBQUcsSUFBSSxDQUFDLDZCQUE2QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUN4RSxVQUFVLElBQUksS0FBSyxhQUFhLENBQUMsQ0FBQyxLQUFLLGFBQWEsQ0FBQyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDLEdBQUcsRUFBRSxDQUFDLEtBQUssa0JBQWtCLENBQUMsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDO1NBQ3JJO2FBQU07WUFDTCxVQUFVLElBQUksS0FBSyxHQUFHLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztTQUN0QztRQUNELE9BQU8sVUFBVSxDQUFDO0lBQ3BCLENBQUM7SUFFTSxhQUFhLENBQUMsR0FBYSxFQUFFLEdBQWE7UUFDL0MsT0FBTztZQUNMLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7WUFDdEIsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztTQUN2QixDQUFDO0lBQ0osQ0FBQztJQUVPLHdCQUF3QixDQUFDLEdBQWEsRUFBRSxHQUFhO1FBQzNELE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVPLHdCQUF3QixDQUFDLEdBQWEsRUFBRSxHQUFhO1FBQzNELE9BQU87WUFDTCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDUixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQztTQUNuRCxDQUFDO0lBQ0osQ0FBQztJQUVPLDZCQUE2QixDQUFDLEdBQWEsRUFBRSxHQUFhO1FBQ2hFLE9BQU87WUFDTCxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDUixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsR0FBRyxFQUFFLEdBQUcsQ0FBQztTQUNuRCxDQUFDO0lBQ0osQ0FBQzs7O1lBekNGLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGY0Nvb3JkcywgRmxvd2NoYXJ0Q29uc3RhbnRzIH0gZnJvbSAnLi9uZ3gtZmxvd2NoYXJ0Lm1vZGVscyc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBGY0VkZ2VEcmF3aW5nU2VydmljZSB7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gIH1cblxuICBwdWJsaWMgZ2V0RWRnZURBdHRyaWJ1dGUocHQxOiBGY0Nvb3JkcywgcHQyOiBGY0Nvb3Jkcywgc3R5bGU6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgbGV0IGRBZGRyaWJ1dGUgPSBgTSAke3B0MS54fSwgJHtwdDEueX0gYDtcbiAgICBpZiAoc3R5bGUgPT09IEZsb3djaGFydENvbnN0YW50cy5jdXJ2ZWRTdHlsZSkge1xuICAgICAgY29uc3Qgc291cmNlVGFuZ2VudCA9IHRoaXMuY29tcHV0ZUVkZ2VTb3VyY2VUYW5nZW50KHB0MSwgcHQyKTtcbiAgICAgIGNvbnN0IGRlc3RpbmF0aW9uVGFuZ2VudCA9IHRoaXMuY29tcHV0ZUVkZ2VEZXN0aW5hdGlvblRhbmdlbnQocHQxLCBwdDIpO1xuICAgICAgZEFkZHJpYnV0ZSArPSBgQyAke3NvdXJjZVRhbmdlbnQueH0sICR7c291cmNlVGFuZ2VudC55fSAkeyhkZXN0aW5hdGlvblRhbmdlbnQueCAtIDUwKX0sICR7ZGVzdGluYXRpb25UYW5nZW50Lnl9ICR7cHQyLnh9LCAke3B0Mi55fWA7XG4gICAgfSBlbHNlIHtcbiAgICAgIGRBZGRyaWJ1dGUgKz0gYEwgJHtwdDIueH0sICR7cHQyLnl9YDtcbiAgICB9XG4gICAgcmV0dXJuIGRBZGRyaWJ1dGU7XG4gIH1cblxuICBwdWJsaWMgZ2V0RWRnZUNlbnRlcihwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzKTogRmNDb29yZHMge1xuICAgIHJldHVybiB7XG4gICAgICB4OiAocHQxLnggKyBwdDIueCkgLyAyLFxuICAgICAgeTogKHB0MS55ICsgcHQyLnkpIC8gMlxuICAgIH07XG4gIH1cblxuICBwcml2YXRlIGNvbXB1dGVFZGdlVGFuZ2VudE9mZnNldChwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzKTogbnVtYmVyIHtcbiAgICByZXR1cm4gKHB0Mi55IC0gcHQxLnkpIC8gMjtcbiAgfVxuXG4gIHByaXZhdGUgY29tcHV0ZUVkZ2VTb3VyY2VUYW5nZW50KHB0MTogRmNDb29yZHMsIHB0MjogRmNDb29yZHMpOiBGY0Nvb3JkcyB7XG4gICAgcmV0dXJuIHtcbiAgICAgIHg6IHB0MS54LFxuICAgICAgeTogcHQxLnkgKyB0aGlzLmNvbXB1dGVFZGdlVGFuZ2VudE9mZnNldChwdDEsIHB0MilcbiAgICB9O1xuICB9XG5cbiAgcHJpdmF0ZSBjb21wdXRlRWRnZURlc3RpbmF0aW9uVGFuZ2VudChwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzKTogRmNDb29yZHMge1xuICAgIHJldHVybiB7XG4gICAgICB4OiBwdDIueCxcbiAgICAgIHk6IHB0Mi55IC0gdGhpcy5jb21wdXRlRWRnZVRhbmdlbnRPZmZzZXQocHQxLCBwdDIpXG4gICAgfTtcbiAgfVxuXG59XG4iXX0=
--- a/dist/ngx-flowchart/esm2015/lib/magnet.directive.js
+++ b/dist/ngx-flowchart/esm2015/lib/magnet.directive.js
@ -1,41 +0,0 @@
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-import { FlowchartConstants } from './ngx-flowchart.models';
-export class FcMagnetDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngOnInit() {
-        const element = $(this.elementRef.nativeElement);
-        element.addClass(FlowchartConstants.magnetClass);
-    }
-    dragover(event) {
-        return this.callbacks.edgeDragoverMagnet(event, this.connector);
-    }
-    dragleave(event) {
-        this.callbacks.edgeDragleaveMagnet(event);
-    }
-    drop(event) {
-        return this.callbacks.edgeDrop(event, this.connector);
-    }
-    dragend(event) {
-        this.callbacks.edgeDragend(event);
-    }
-}
-FcMagnetDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line:directive-selector
-                selector: '[fc-magnet]'
-            },] }
-];
-FcMagnetDirective.ctorParameters = () => [
-    { type: ElementRef }
-];
-FcMagnetDirective.propDecorators = {
-    callbacks: [{ type: Input }],
-    connector: [{ type: Input }],
-    dragover: [{ type: HostListener, args: ['dragover', ['$event'],] }],
-    dragleave: [{ type: HostListener, args: ['dragleave', ['$event'],] }],
-    drop: [{ type: HostListener, args: ['drop', ['$event'],] }],
-    dragend: [{ type: HostListener, args: ['dragend', ['$event'],] }]
-};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFnbmV0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mbG93Y2hhcnQvc3JjL2xpYi9tYWduZXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0UsT0FBTyxFQUE0QixrQkFBa0IsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBTXRGLE1BQU0sT0FBTyxpQkFBaUI7SUFRNUIsWUFBbUIsVUFBbUM7UUFBbkMsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7SUFDdEQsQ0FBQztJQUVELFFBQVE7UUFDTixNQUFNLE9BQU8sR0FBRyxDQUFDLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNqRCxPQUFPLENBQUMsUUFBUSxDQUFDLGtCQUFrQixDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFHRCxRQUFRLENBQUMsS0FBa0I7UUFDekIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLGtCQUFrQixDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDbEUsQ0FBQztJQUdELFNBQVMsQ0FBQyxLQUFrQjtRQUMxQixJQUFJLENBQUMsU0FBUyxDQUFDLG1CQUFtQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzVDLENBQUM7SUFHRCxJQUFJLENBQUMsS0FBa0I7UUFDckIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLFFBQVEsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFHRCxPQUFPLENBQUMsS0FBa0I7UUFDeEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDcEMsQ0FBQzs7O1lBdENGLFNBQVMsU0FBQztnQkFDVCw4Q0FBOEM7Z0JBQzlDLFFBQVEsRUFBRSxhQUFhO2FBQ3hCOzs7WUFObUIsVUFBVTs7O3dCQVMzQixLQUFLO3dCQUdMLEtBQUs7dUJBV0wsWUFBWSxTQUFDLFVBQVUsRUFBRSxDQUFDLFFBQVEsQ0FBQzt3QkFLbkMsWUFBWSxTQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQzttQkFLcEMsWUFBWSxTQUFDLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQztzQkFLL0IsWUFBWSxTQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGY0NhbGxiYWNrcywgRmNDb25uZWN0b3IsIEZsb3djaGFydENvbnN0YW50cyB9IGZyb20gJy4vbmd4LWZsb3djaGFydC5tb2RlbHMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmRpcmVjdGl2ZS1zZWxlY3RvclxuICBzZWxlY3RvcjogJ1tmYy1tYWduZXRdJ1xufSlcbmV4cG9ydCBjbGFzcyBGY01hZ25ldERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KClcbiAgY2FsbGJhY2tzOiBGY0NhbGxiYWNrcztcblxuICBASW5wdXQoKVxuICBjb25uZWN0b3I6IEZjQ29ubmVjdG9yO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgY29uc3QgZWxlbWVudCA9ICQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpO1xuICAgIGVsZW1lbnQuYWRkQ2xhc3MoRmxvd2NoYXJ0Q29uc3RhbnRzLm1hZ25ldENsYXNzKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdvdmVyJywgWyckZXZlbnQnXSlcbiAgZHJhZ292ZXIoZXZlbnQ6IEV2ZW50IHwgYW55KSB7XG4gICAgcmV0dXJuIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcmFnb3Zlck1hZ25ldChldmVudCwgdGhpcy5jb25uZWN0b3IpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJhZ2xlYXZlJywgWyckZXZlbnQnXSlcbiAgZHJhZ2xlYXZlKGV2ZW50OiBFdmVudCB8IGFueSkge1xuICAgIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcmFnbGVhdmVNYWduZXQoZXZlbnQpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJvcCcsIFsnJGV2ZW50J10pXG4gIGRyb3AoZXZlbnQ6IEV2ZW50IHwgYW55KSB7XG4gICAgcmV0dXJuIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcm9wKGV2ZW50LCB0aGlzLmNvbm5lY3Rvcik7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkcmFnZW5kJywgWyckZXZlbnQnXSlcbiAgZHJhZ2VuZChldmVudDogRXZlbnQgfCBhbnkpIHtcbiAgICB0aGlzLmNhbGxiYWNrcy5lZGdlRHJhZ2VuZChldmVudCk7XG4gIH1cblxufVxuIl19
--- a/dist/ngx-flowchart/esm2015/lib/modelvalidation.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/modelvalidation.service.js
--- a/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.component.js
+++ b/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.component.js
--- a/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.module.js
+++ b/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.module.js
@ -1,44 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NgxFlowchartComponent } from './ngx-flowchart.component';
-import { FcModelValidationService } from './modelvalidation.service';
-import { FcEdgeDrawingService } from './edge-drawing.service';
-import { CommonModule } from '@angular/common';
-import { FcMagnetDirective } from './magnet.directive';
-import { FcConnectorDirective } from './connector.directive';
-import { FcNodeContainerComponent } from './node.component';
-import { FC_NODE_COMPONENT_CONFIG } from './ngx-flowchart.models';
-import { DefaultFcNodeComponent } from './default-node.component';
-const ɵ0 = {
-    nodeComponentType: DefaultFcNodeComponent
-};
-export class NgxFlowchartModule {
-}
-NgxFlowchartModule.decorators = [
-    { type: NgModule, args: [{
-                entryComponents: [
-                    DefaultFcNodeComponent
-                ],
-                declarations: [NgxFlowchartComponent,
-                    FcMagnetDirective,
-                    FcConnectorDirective,
-                    FcNodeContainerComponent,
-                    DefaultFcNodeComponent],
-                providers: [
-                    FcModelValidationService,
-                    FcEdgeDrawingService,
-                    {
-                        provide: FC_NODE_COMPONENT_CONFIG,
-                        useValue: ɵ0
-                    }
-                ],
-                imports: [
-                    CommonModule
-                ],
-                exports: [NgxFlowchartComponent,
-                    FcMagnetDirective,
-                    FcConnectorDirective,
-                    DefaultFcNodeComponent]
-            },] }
-];
-export { ɵ0 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZmxvd2NoYXJ0L3NyYy9saWIvbmd4LWZsb3djaGFydC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM5RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDdkQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDN0QsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDNUQsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7V0FnQmxEO0lBQ1IsaUJBQWlCLEVBQUUsc0JBQXNCO0NBQzFDO0FBV1AsTUFBTSxPQUFPLGtCQUFrQjs7O1lBM0I5QixRQUFRLFNBQUM7Z0JBQ1IsZUFBZSxFQUFFO29CQUNmLHNCQUFzQjtpQkFDdkI7Z0JBQ0QsWUFBWSxFQUFFLENBQUMscUJBQXFCO29CQUNsQyxpQkFBaUI7b0JBQ2pCLG9CQUFvQjtvQkFDcEIsd0JBQXdCO29CQUN4QixzQkFBc0IsQ0FBQztnQkFDekIsU0FBUyxFQUFFO29CQUNULHdCQUF3QjtvQkFDeEIsb0JBQW9CO29CQUNwQjt3QkFDRSxPQUFPLEVBQUUsd0JBQXdCO3dCQUNqQyxRQUFRLElBRVA7cUJBQ0Y7aUJBQ0Y7Z0JBQ0QsT0FBTyxFQUFFO29CQUNQLFlBQVk7aUJBQ2I7Z0JBQ0QsT0FBTyxFQUFFLENBQUMscUJBQXFCO29CQUM3QixpQkFBaUI7b0JBQ2pCLG9CQUFvQjtvQkFDcEIsc0JBQXNCLENBQUM7YUFDMUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmd4Rmxvd2NoYXJ0Q29tcG9uZW50IH0gZnJvbSAnLi9uZ3gtZmxvd2NoYXJ0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGY01vZGVsVmFsaWRhdGlvblNlcnZpY2UgfSBmcm9tICcuL21vZGVsdmFsaWRhdGlvbi5zZXJ2aWNlJztcbmltcG9ydCB7IEZjRWRnZURyYXdpbmdTZXJ2aWNlIH0gZnJvbSAnLi9lZGdlLWRyYXdpbmcuc2VydmljZSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRmNNYWduZXREaXJlY3RpdmUgfSBmcm9tICcuL21hZ25ldC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgRmNDb25uZWN0b3JEaXJlY3RpdmUgfSBmcm9tICcuL2Nvbm5lY3Rvci5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgRmNOb2RlQ29udGFpbmVyQ29tcG9uZW50IH0gZnJvbSAnLi9ub2RlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGQ19OT0RFX0NPTVBPTkVOVF9DT05GSUcgfSBmcm9tICcuL25neC1mbG93Y2hhcnQubW9kZWxzJztcbmltcG9ydCB7IERlZmF1bHRGY05vZGVDb21wb25lbnQgfSBmcm9tICcuL2RlZmF1bHQtbm9kZS5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBlbnRyeUNvbXBvbmVudHM6IFtcbiAgICBEZWZhdWx0RmNOb2RlQ29tcG9uZW50XG4gIF0sXG4gIGRlY2xhcmF0aW9uczogW05neEZsb3djaGFydENvbXBvbmVudCxcbiAgICBGY01hZ25ldERpcmVjdGl2ZSxcbiAgICBGY0Nvbm5lY3RvckRpcmVjdGl2ZSxcbiAgICBGY05vZGVDb250YWluZXJDb21wb25lbnQsXG4gICAgRGVmYXVsdEZjTm9kZUNvbXBvbmVudF0sXG4gIHByb3ZpZGVyczogW1xuICAgIEZjTW9kZWxWYWxpZGF0aW9uU2VydmljZSxcbiAgICBGY0VkZ2VEcmF3aW5nU2VydmljZSxcbiAgICB7XG4gICAgICBwcm92aWRlOiBGQ19OT0RFX0NPTVBPTkVOVF9DT05GSUcsXG4gICAgICB1c2VWYWx1ZToge1xuICAgICAgICBub2RlQ29tcG9uZW50VHlwZTogRGVmYXVsdEZjTm9kZUNvbXBvbmVudFxuICAgICAgfVxuICAgIH1cbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZVxuICBdLFxuICBleHBvcnRzOiBbTmd4Rmxvd2NoYXJ0Q29tcG9uZW50LFxuICAgIEZjTWFnbmV0RGlyZWN0aXZlLFxuICAgIEZjQ29ubmVjdG9yRGlyZWN0aXZlLFxuICAgIERlZmF1bHRGY05vZGVDb21wb25lbnRdXG59KVxuZXhwb3J0IGNsYXNzIE5neEZsb3djaGFydE1vZHVsZSB7IH1cbiJdfQ==
--- a/dist/ngx-flowchart/esm2015/lib/node.component.js
+++ b/dist/ngx-flowchart/esm2015/lib/node.component.js
--- a/dist/ngx-flowchart/esm2015/lib/scrollparent.js
+++ b/dist/ngx-flowchart/esm2015/lib/scrollparent.js
@ -1,16 +0,0 @@
-const regex = /(auto|scroll)/;
-const style = (node, prop) => getComputedStyle(node, null).getPropertyValue(prop);
-const ɵ0 = style;
-const scroll = (node) => regex.test(style(node, 'overflow') +
-    style(node, 'overflow-y') +
-    style(node, 'overflow-x'));
-const ɵ1 = scroll;
-const scrollparent = (node) => !node || node === document.body
-    ? document.body
-    : scroll(node)
-        ? node
-        : scrollparent(node.parentNode);
-const ɵ2 = scrollparent;
-export default scrollparent;
-export { ɵ0, ɵ1, ɵ2 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xscGFyZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZsb3djaGFydC9zcmMvbGliL3Njcm9sbHBhcmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLEtBQUssR0FBRyxlQUFlLENBQUM7QUFFOUIsTUFBTSxLQUFLLEdBQUcsQ0FBQyxJQUFhLEVBQUUsSUFBWSxFQUFVLEVBQUUsQ0FDcEQsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxDQUFDOztBQUV0RCxNQUFNLE1BQU0sR0FBRyxDQUFDLElBQWEsRUFBRSxFQUFFLENBQy9CLEtBQUssQ0FBQyxJQUFJLENBQ1IsS0FBSyxDQUFDLElBQUksRUFBRSxVQUFVLENBQUM7SUFDdkIsS0FBSyxDQUFDLElBQUksRUFBRSxZQUFZLENBQUM7SUFDekIsS0FBSyxDQUFDLElBQUksRUFBRSxZQUFZLENBQUMsQ0FBQyxDQUFDOztBQUUvQixNQUFNLFlBQVksR0FBRyxDQUFDLElBQWlCLEVBQWUsRUFBRSxDQUN0RCxDQUFDLElBQUksSUFBSSxJQUFJLEtBQUssUUFBUSxDQUFDLElBQUk7SUFDN0IsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxJQUFJO0lBQ2YsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7UUFDZCxDQUFDLENBQUMsSUFBSTtRQUNOLENBQUMsQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFVBQXlCLENBQUMsQ0FBQzs7QUFFbkQsZUFBZSxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCByZWdleCA9IC8oYXV0b3xzY3JvbGwpLztcblxuY29uc3Qgc3R5bGUgPSAobm9kZTogRWxlbWVudCwgcHJvcDogc3RyaW5nKTogc3RyaW5nID0+XG4gIGdldENvbXB1dGVkU3R5bGUobm9kZSwgbnVsbCkuZ2V0UHJvcGVydHlWYWx1ZShwcm9wKTtcblxuY29uc3Qgc2Nyb2xsID0gKG5vZGU6IEVsZW1lbnQpID0+XG4gIHJlZ2V4LnRlc3QoXG4gICAgc3R5bGUobm9kZSwgJ292ZXJmbG93JykgK1xuICAgIHN0eWxlKG5vZGUsICdvdmVyZmxvdy15JykgK1xuICAgIHN0eWxlKG5vZGUsICdvdmVyZmxvdy14JykpO1xuXG5jb25zdCBzY3JvbGxwYXJlbnQgPSAobm9kZTogSFRNTEVsZW1lbnQpOiBIVE1MRWxlbWVudCA9PlxuICAhbm9kZSB8fCBub2RlID09PSBkb2N1bWVudC5ib2R5XG4gICAgPyBkb2N1bWVudC5ib2R5XG4gICAgOiBzY3JvbGwobm9kZSlcbiAgICA/IG5vZGVcbiAgICA6IHNjcm9sbHBhcmVudChub2RlLnBhcmVudE5vZGUgYXMgSFRNTEVsZW1lbnQpO1xuXG5leHBvcnQgZGVmYXVsdCBzY3JvbGxwYXJlbnQ7XG4iXX0=
--- a/dist/ngx-flowchart/esm2015/ngx-flowchart.js
+++ b/dist/ngx-flowchart/esm2015/ngx-flowchart.js
@ -1,8 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-export { FcEdgeDrawingService as ɵc } from './lib/edge-drawing.service';
-export { FcModelValidationService as ɵb } from './lib/modelvalidation.service';
-export { FcNodeContainerComponent as ɵa } from './lib/node.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1mbG93Y2hhcnQvc3JjL25neC1mbG93Y2hhcnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQztBQUU3QixPQUFPLEVBQUMsb0JBQW9CLElBQUksRUFBRSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDdEUsT0FBTyxFQUFDLHdCQUF3QixJQUFJLEVBQUUsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQzdFLE9BQU8sRUFBQyx3QkFBd0IsSUFBSSxFQUFFLEVBQUMsTUFBTSxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcblxuZXhwb3J0IHtGY0VkZ2VEcmF3aW5nU2VydmljZSBhcyDJtWN9IGZyb20gJy4vbGliL2VkZ2UtZHJhd2luZy5zZXJ2aWNlJztcbmV4cG9ydCB7RmNNb2RlbFZhbGlkYXRpb25TZXJ2aWNlIGFzIMm1Yn0gZnJvbSAnLi9saWIvbW9kZWx2YWxpZGF0aW9uLnNlcnZpY2UnO1xuZXhwb3J0IHtGY05vZGVDb250YWluZXJDb21wb25lbnQgYXMgybVhfSBmcm9tICcuL2xpYi9ub2RlLmNvbXBvbmVudCc7Il19
--- a/dist/ngx-flowchart/fesm2015/ngx-flowchart.js.map
+++ b/dist/ngx-flowchart/fesm2015/ngx-flowchart.js.map
--- a/dist/ngx-flowchart/lib/default-node.component.d.ts
+++ b/dist/ngx-flowchart/lib/default-node.component.d.ts
@ -1,4 +0,0 @@
-import { FcNodeComponent } from './node.component';
-export declare class DefaultFcNodeComponent extends FcNodeComponent {
-    constructor();
-}
--- a/dist/ngx-flowchart/lib/ngx-flowchart.module.d.ts
+++ b/dist/ngx-flowchart/lib/ngx-flowchart.module.d.ts
@ -1,2 +0,0 @@
-export declare class NgxFlowchartModule {
-}
--- a/dist/ngx-flowchart/ngx-flowchart.d.ts
+++ b/dist/ngx-flowchart/ngx-flowchart.d.ts
@ -1,7 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-export { FcEdgeDrawingService as ɵc } from './lib/edge-drawing.service';
-export { FcModelValidationService as ɵb } from './lib/modelvalidation.service';
-export { FcNodeContainerComponent as ɵa } from './lib/node.component';
--- a/dist/ngx-flowchart/ngx-flowchart.metadata.json
+++ b/dist/ngx-flowchart/ngx-flowchart.metadata.json
--- a/dist/ngx-flowchart/package.json
+++ b/dist/ngx-flowchart/package.json
@ -1,21 +0,0 @@
-{
-  "name": "ngx-flowchart",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^9.1.3",
-    "@angular/core": "^9.1.3",
-    "jquery": "^3.5.0",
-    "typescript": "^3.7.5"
-  },
-  "main": "bundles/ngx-flowchart.umd.js",
-  "module": "fesm2015/ngx-flowchart.js",
-  "es2015": "fesm2015/ngx-flowchart.js",
-  "esm2015": "esm2015/ngx-flowchart.js",
-  "fesm2015": "fesm2015/ngx-flowchart.js",
-  "typings": "ngx-flowchart.d.ts",
-  "metadata": "ngx-flowchart.metadata.json",
-  "sideEffects": false,
-  "dependencies": {
-    "tslib": "^2.0.0"
-  }
-}
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
@ -1,32 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to ngx-flowchart!');
-  });
-
-  afterEach(async () => {
-    // Assert that there are no errors emitted from the browser
-    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-    expect(logs).not.toContain(jasmine.objectContaining({
-      level: logging.Level.SEVERE,
-    } as logging.Entry));
-  });
-});
--- a/e2e/src/app.po.ts
+++ b/e2e/src/app.po.ts
@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
-  }
-
-  getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
-  }
-}
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@ -1,13 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
--- a/esm2015/lib/connector.directive.js
+++ b/esm2015/lib/connector.directive.js
--- a/esm2015/lib/default-node.component.js
+++ b/esm2015/lib/default-node.component.js
@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { FcNodeComponent } from './node.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./magnet.directive";
+import * as i3 from "./connector.directive";
+export class DefaultFcNodeComponent extends FcNodeComponent {
+    constructor() {
+        super();
+    }
+}
+DefaultFcNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: DefaultFcNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DefaultFcNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: DefaultFcNodeComponent, selector: "fc-default-node", usesInheritance: true, ngImport: i0, 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}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.FcMagnetDirective, selector: "[fc-magnet]", inputs: ["callbacks", "connector"] }, { type: i3.FcConnectorDirective, selector: "[fc-connector]", inputs: ["callbacks", "modelservice", "connector", "nodeRectInfo", "mouseOverConnector"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: DefaultFcNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fc-default-node',
+                    templateUrl: './default-node.component.html',
+                    styleUrls: ['./default-node.component.scss']
+                }]
+        }], ctorParameters: function () { return []; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mbG93Y2hhcnQvc3JjL2xpYi9kZWZhdWx0LW5vZGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZsb3djaGFydC9zcmMvbGliL2RlZmF1bHQtbm9kZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7Ozs7QUFPbkQsTUFBTSxPQUFPLHNCQUF1QixTQUFRLGVBQWU7SUFFekQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7O29IQUpVLHNCQUFzQjt3R0FBdEIsc0JBQXNCLDhFQ1JuQyxnbkRBa0NBOzRGRDFCYSxzQkFBc0I7a0JBTGxDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtvQkFDM0IsV0FBVyxFQUFFLCtCQUErQjtvQkFDNUMsU0FBUyxFQUFFLENBQUMsK0JBQStCLENBQUM7aUJBQzdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGY05vZGVDb21wb25lbnQgfSBmcm9tICcuL25vZGUuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnZmMtZGVmYXVsdC1ub2RlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2RlZmF1bHQtbm9kZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2RlZmF1bHQtbm9kZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERlZmF1bHRGY05vZGVDb21wb25lbnQgZXh0ZW5kcyBGY05vZGVDb21wb25lbnQge1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gIH1cblxufVxuIiwiPGRpdlxuICAoZGJsY2xpY2spPVwidXNlck5vZGVDYWxsYmFja3MuZG91YmxlQ2xpY2soJGV2ZW50LCBub2RlKVwiPlxuICA8ZGl2IGNsYXNzPVwie3tmbG93Y2hhcnRDb25zdGFudHMubm9kZU92ZXJsYXlDbGFzc319XCI+PC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJpbm5lck5vZGVcIj5cbiAgICA8cD57eyBub2RlLm5hbWUgfX08L3A+XG5cbiAgICA8ZGl2IGNsYXNzPVwie3tmbG93Y2hhcnRDb25zdGFudHMubGVmdENvbm5lY3RvckNsYXNzfX1cIj5cbiAgICAgIDxkaXYgZmMtbWFnbmV0IFtjb25uZWN0b3JdPVwiY29ubmVjdG9yXCIgW2NhbGxiYWNrc109XCJjYWxsYmFja3NcIlxuICAgICAgICAgICAqbmdGb3I9XCJsZXQgY29ubmVjdG9yIG9mIG1vZGVsc2VydmljZS5ub2Rlcy5nZXRDb25uZWN0b3JzQnlUeXBlKG5vZGUsIGZsb3djaGFydENvbnN0YW50cy5sZWZ0Q29ubmVjdG9yVHlwZSlcIj5cbiAgICAgICAgPGRpdiBmYy1jb25uZWN0b3IgW2Nvbm5lY3Rvcl09XCJjb25uZWN0b3JcIlxuICAgICAgICAgICAgIFtub2RlUmVjdEluZm9dPVwibm9kZVJlY3RJbmZvXCJcbiAgICAgICAgICAgICBbbW91c2VPdmVyQ29ubmVjdG9yXT1cIm1vdXNlT3ZlckNvbm5lY3RvclwiXG4gICAgICAgICAgICAgW2NhbGxiYWNrc109XCJjYWxsYmFja3NcIlxuICAgICAgICAgICAgIFttb2RlbHNlcnZpY2VdPVwibW9kZWxzZXJ2aWNlXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwie3tmbG93Y2hhcnRDb25zdGFudHMucmlnaHRDb25uZWN0b3JDbGFzc319XCI+XG4gICAgICA8ZGl2IGZjLW1hZ25ldCBbY29ubmVjdG9yXT1cImNvbm5lY3RvclwiIFtjYWxsYmFja3NdPVwiY2FsbGJhY2tzXCJcbiAgICAgICAgICAgKm5nRm9yPVwibGV0IGNvbm5lY3RvciBvZiBtb2RlbHNlcnZpY2Uubm9kZXMuZ2V0Q29ubmVjdG9yc0J5VHlwZShub2RlLCBmbG93Y2hhcnRDb25zdGFudHMucmlnaHRDb25uZWN0b3JUeXBlKVwiPlxuICAgICAgICA8ZGl2IGZjLWNvbm5lY3RvciBbY29ubmVjdG9yXT1cImNvbm5lY3RvclwiXG4gICAgICAgICAgICAgW25vZGVSZWN0SW5mb109XCJub2RlUmVjdEluZm9cIlxuICAgICAgICAgICAgIFttb3VzZU92ZXJDb25uZWN0b3JdPVwibW91c2VPdmVyQ29ubmVjdG9yXCJcbiAgICAgICAgICAgICBbY2FsbGJhY2tzXT1cImNhbGxiYWNrc1wiXG4gICAgICAgICAgICAgW21vZGVsc2VydmljZV09XCJtb2RlbHNlcnZpY2VcIj48L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cIm1vZGVsc2VydmljZS5pc0VkaXRhYmxlKCkgJiYgIW5vZGUucmVhZG9ubHlcIiBjbGFzcz1cImZjLW5vZGVlZGl0XCIgKGNsaWNrKT1cInVzZXJOb2RlQ2FsbGJhY2tzLm5vZGVFZGl0KCRldmVudCwgbm9kZSlcIj5cbiAgICA8aSBjbGFzcz1cImZhIGZhLXBlbmNpbFwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvaT5cbiAgPC9kaXY+XG4gIDxkaXYgKm5nSWY9XCJtb2RlbHNlcnZpY2UuaXNFZGl0YWJsZSgpICYmICFub2RlLnJlYWRvbmx5XCIgY2xhc3M9XCJmYy1ub2RlZGVsZXRlXCIgKGNsaWNrKT1cIm1vZGVsc2VydmljZS5ub2Rlcy5kZWxldGUobm9kZSlcIj5cbiAgICAmdGltZXM7XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
--- a/dist/ngx-flowchart/esm2015/lib/edge-dragging.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/edge-dragging.service.js
--- a/esm2015/lib/edge-drawing.service.js
+++ b/esm2015/lib/edge-drawing.service.js
@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { FlowchartConstants } from './ngx-flowchart.models';
+import * as i0 from "@angular/core";
+export class FcEdgeDrawingService {
+    constructor() {
+    }
+    getEdgeDAttribute(pt1, pt2, style) {
+        let dAddribute = `M ${pt1.x}, ${pt1.y} `;
+        if (style === FlowchartConstants.curvedStyle) {
+            const sourceTangent = this.computeEdgeSourceTangent(pt1, pt2);
+            const destinationTangent = this.computeEdgeDestinationTangent(pt1, pt2);
+            dAddribute += `C ${sourceTangent.x}, ${sourceTangent.y} ${(destinationTangent.x - 50)}, ${destinationTangent.y} ${pt2.x}, ${pt2.y}`;
+        }
+        else {
+            dAddribute += `L ${pt2.x}, ${pt2.y}`;
+        }
+        return dAddribute;
+    }
+    getEdgeCenter(pt1, pt2) {
+        return {
+            x: (pt1.x + pt2.x) / 2,
+            y: (pt1.y + pt2.y) / 2
+        };
+    }
+    computeEdgeTangentOffset(pt1, pt2) {
+        return (pt2.y - pt1.y) / 2;
+    }
+    computeEdgeSourceTangent(pt1, pt2) {
+        return {
+            x: pt1.x,
+            y: pt1.y + this.computeEdgeTangentOffset(pt1, pt2)
+        };
+    }
+    computeEdgeDestinationTangent(pt1, pt2) {
+        return {
+            x: pt2.x,
+            y: pt2.y - this.computeEdgeTangentOffset(pt1, pt2)
+        };
+    }
+}
+FcEdgeDrawingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: FcEdgeDrawingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FcEdgeDrawingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: FcEdgeDrawingService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: FcEdgeDrawingService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRnZS1kcmF3aW5nLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZmxvd2NoYXJ0L3NyYy9saWIvZWRnZS1kcmF3aW5nLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQVksa0JBQWtCLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQzs7QUFHdEUsTUFBTSxPQUFPLG9CQUFvQjtJQUUvQjtJQUNBLENBQUM7SUFFTSxpQkFBaUIsQ0FBQyxHQUFhLEVBQUUsR0FBYSxFQUFFLEtBQWE7UUFDbEUsSUFBSSxVQUFVLEdBQUcsS0FBSyxHQUFHLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQztRQUN6QyxJQUFJLEtBQUssS0FBSyxrQkFBa0IsQ0FBQyxXQUFXLEVBQUU7WUFDNUMsTUFBTSxhQUFhLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUMsQ0FBQztZQUM5RCxNQUFNLGtCQUFrQixHQUFHLElBQUksQ0FBQyw2QkFBNkIsQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDLENBQUM7WUFDeEUsVUFBVSxJQUFJLEtBQUssYUFBYSxDQUFDLENBQUMsS0FBSyxhQUFhLENBQUMsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxLQUFLLGtCQUFrQixDQUFDLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQztTQUNySTthQUFNO1lBQ0wsVUFBVSxJQUFJLEtBQUssR0FBRyxDQUFDLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUM7U0FDdEM7UUFDRCxPQUFPLFVBQVUsQ0FBQztJQUNwQixDQUFDO0lBRU0sYUFBYSxDQUFDLEdBQWEsRUFBRSxHQUFhO1FBQy9DLE9BQU87WUFDTCxDQUFDLEVBQUUsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDO1lBQ3RCLENBQUMsRUFBRSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUM7U0FDdkIsQ0FBQztJQUNKLENBQUM7SUFFTyx3QkFBd0IsQ0FBQyxHQUFhLEVBQUUsR0FBYTtRQUMzRCxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzdCLENBQUM7SUFFTyx3QkFBd0IsQ0FBQyxHQUFhLEVBQUUsR0FBYTtRQUMzRCxPQUFPO1lBQ0wsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQ1IsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUM7U0FDbkQsQ0FBQztJQUNKLENBQUM7SUFFTyw2QkFBNkIsQ0FBQyxHQUFhLEVBQUUsR0FBYTtRQUNoRSxPQUFPO1lBQ0wsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQ1IsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLHdCQUF3QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUM7U0FDbkQsQ0FBQztJQUNKLENBQUM7O2tIQXhDVSxvQkFBb0I7c0hBQXBCLG9CQUFvQjs0RkFBcEIsb0JBQW9CO2tCQURoQyxVQUFVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmNDb29yZHMsIEZsb3djaGFydENvbnN0YW50cyB9IGZyb20gJy4vbmd4LWZsb3djaGFydC5tb2RlbHMnO1xuXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgRmNFZGdlRHJhd2luZ1NlcnZpY2Uge1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICB9XG5cbiAgcHVibGljIGdldEVkZ2VEQXR0cmlidXRlKHB0MTogRmNDb29yZHMsIHB0MjogRmNDb29yZHMsIHN0eWxlOiBzdHJpbmcpOiBzdHJpbmcge1xuICAgIGxldCBkQWRkcmlidXRlID0gYE0gJHtwdDEueH0sICR7cHQxLnl9IGA7XG4gICAgaWYgKHN0eWxlID09PSBGbG93Y2hhcnRDb25zdGFudHMuY3VydmVkU3R5bGUpIHtcbiAgICAgIGNvbnN0IHNvdXJjZVRhbmdlbnQgPSB0aGlzLmNvbXB1dGVFZGdlU291cmNlVGFuZ2VudChwdDEsIHB0Mik7XG4gICAgICBjb25zdCBkZXN0aW5hdGlvblRhbmdlbnQgPSB0aGlzLmNvbXB1dGVFZGdlRGVzdGluYXRpb25UYW5nZW50KHB0MSwgcHQyKTtcbiAgICAgIGRBZGRyaWJ1dGUgKz0gYEMgJHtzb3VyY2VUYW5nZW50Lnh9LCAke3NvdXJjZVRhbmdlbnQueX0gJHsoZGVzdGluYXRpb25UYW5nZW50LnggLSA1MCl9LCAke2Rlc3RpbmF0aW9uVGFuZ2VudC55fSAke3B0Mi54fSwgJHtwdDIueX1gO1xuICAgIH0gZWxzZSB7XG4gICAgICBkQWRkcmlidXRlICs9IGBMICR7cHQyLnh9LCAke3B0Mi55fWA7XG4gICAgfVxuICAgIHJldHVybiBkQWRkcmlidXRlO1xuICB9XG5cbiAgcHVibGljIGdldEVkZ2VDZW50ZXIocHQxOiBGY0Nvb3JkcywgcHQyOiBGY0Nvb3Jkcyk6IEZjQ29vcmRzIHtcbiAgICByZXR1cm4ge1xuICAgICAgeDogKHB0MS54ICsgcHQyLngpIC8gMixcbiAgICAgIHk6IChwdDEueSArIHB0Mi55KSAvIDJcbiAgICB9O1xuICB9XG5cbiAgcHJpdmF0ZSBjb21wdXRlRWRnZVRhbmdlbnRPZmZzZXQocHQxOiBGY0Nvb3JkcywgcHQyOiBGY0Nvb3Jkcyk6IG51bWJlciB7XG4gICAgcmV0dXJuIChwdDIueSAtIHB0MS55KSAvIDI7XG4gIH1cblxuICBwcml2YXRlIGNvbXB1dGVFZGdlU291cmNlVGFuZ2VudChwdDE6IEZjQ29vcmRzLCBwdDI6IEZjQ29vcmRzKTogRmNDb29yZHMge1xuICAgIHJldHVybiB7XG4gICAgICB4OiBwdDEueCxcbiAgICAgIHk6IHB0MS55ICsgdGhpcy5jb21wdXRlRWRnZVRhbmdlbnRPZmZzZXQocHQxLCBwdDIpXG4gICAgfTtcbiAgfVxuXG4gIHByaXZhdGUgY29tcHV0ZUVkZ2VEZXN0aW5hdGlvblRhbmdlbnQocHQxOiBGY0Nvb3JkcywgcHQyOiBGY0Nvb3Jkcyk6IEZjQ29vcmRzIHtcbiAgICByZXR1cm4ge1xuICAgICAgeDogcHQyLngsXG4gICAgICB5OiBwdDIueSAtIHRoaXMuY29tcHV0ZUVkZ2VUYW5nZW50T2Zmc2V0KHB0MSwgcHQyKVxuICAgIH07XG4gIH1cblxufVxuIl19
--- a/esm2015/lib/magnet.directive.js
+++ b/esm2015/lib/magnet.directive.js
@ -0,0 +1,50 @@
+import { Directive, ElementRef, HostListener, Input } from '@angular/core';
+import { FlowchartConstants } from './ngx-flowchart.models';
+import * as i0 from "@angular/core";
+export class FcMagnetDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() {
+        const element = $(this.elementRef.nativeElement);
+        element.addClass(FlowchartConstants.magnetClass);
+    }
+    dragover(event) {
+        return this.callbacks.edgeDragoverMagnet(event, this.connector);
+    }
+    dragleave(event) {
+        this.callbacks.edgeDragleaveMagnet(event);
+    }
+    drop(event) {
+        return this.callbacks.edgeDrop(event, this.connector);
+    }
+    dragend(event) {
+        this.callbacks.edgeDragend(event);
+    }
+}
+FcMagnetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: FcMagnetDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FcMagnetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: FcMagnetDirective, selector: "[fc-magnet]", inputs: { callbacks: "callbacks", connector: "connector" }, host: { listeners: { "dragover": "dragover($event)", "dragleave": "dragleave($event)", "drop": "drop($event)", "dragend": "dragend($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: FcMagnetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // tslint:disable-next-line:directive-selector
+                    selector: '[fc-magnet]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { callbacks: [{
+                type: Input
+            }], connector: [{
+                type: Input
+            }], dragover: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], dragleave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], drop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], dragend: [{
+                type: HostListener,
+                args: ['dragend', ['$event']]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFnbmV0LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mbG93Y2hhcnQvc3JjL2xpYi9tYWduZXQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDbkYsT0FBTyxFQUE0QixrQkFBa0IsRUFBRSxNQUFNLHdCQUF3QixDQUFDOztBQU10RixNQUFNLE9BQU8saUJBQWlCO0lBUTVCLFlBQW1CLFVBQW1DO1FBQW5DLGVBQVUsR0FBVixVQUFVLENBQXlCO0lBQ3RELENBQUM7SUFFRCxRQUFRO1FBQ04sTUFBTSxPQUFPLEdBQUcsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDakQsT0FBTyxDQUFDLFFBQVEsQ0FBQyxrQkFBa0IsQ0FBQyxXQUFXLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBR0QsUUFBUSxDQUFDLEtBQWtCO1FBQ3pCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxrQkFBa0IsQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFHRCxTQUFTLENBQUMsS0FBa0I7UUFDMUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxtQkFBbUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QyxDQUFDO0lBR0QsSUFBSSxDQUFDLEtBQWtCO1FBQ3JCLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUN4RCxDQUFDO0lBR0QsT0FBTyxDQUFDLEtBQWtCO1FBQ3hCLElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7OytHQWxDVSxpQkFBaUI7bUdBQWpCLGlCQUFpQjs0RkFBakIsaUJBQWlCO2tCQUo3QixTQUFTO21CQUFDO29CQUNULDhDQUE4QztvQkFDOUMsUUFBUSxFQUFFLGFBQWE7aUJBQ3hCO2lHQUlDLFNBQVM7c0JBRFIsS0FBSztnQkFJTixTQUFTO3NCQURSLEtBQUs7Z0JBWU4sUUFBUTtzQkFEUCxZQUFZO3VCQUFDLFVBQVUsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFNcEMsU0FBUztzQkFEUixZQUFZO3VCQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFNckMsSUFBSTtzQkFESCxZQUFZO3VCQUFDLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFNaEMsT0FBTztzQkFETixZQUFZO3VCQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGY0NhbGxiYWNrcywgRmNDb25uZWN0b3IsIEZsb3djaGFydENvbnN0YW50cyB9IGZyb20gJy4vbmd4LWZsb3djaGFydC5tb2RlbHMnO1xuXG5ARGlyZWN0aXZlKHtcbiAgLy8gdHNsaW50OmRpc2FibGUtbmV4dC1saW5lOmRpcmVjdGl2ZS1zZWxlY3RvclxuICBzZWxlY3RvcjogJ1tmYy1tYWduZXRdJ1xufSlcbmV4cG9ydCBjbGFzcyBGY01hZ25ldERpcmVjdGl2ZSBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KClcbiAgY2FsbGJhY2tzOiBGY0NhbGxiYWNrcztcblxuICBASW5wdXQoKVxuICBjb25uZWN0b3I6IEZjQ29ubmVjdG9yO1xuXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50Pikge1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgY29uc3QgZWxlbWVudCA9ICQodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQpO1xuICAgIGVsZW1lbnQuYWRkQ2xhc3MoRmxvd2NoYXJ0Q29uc3RhbnRzLm1hZ25ldENsYXNzKTtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2RyYWdvdmVyJywgWyckZXZlbnQnXSlcbiAgZHJhZ292ZXIoZXZlbnQ6IEV2ZW50IHwgYW55KSB7XG4gICAgcmV0dXJuIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcmFnb3Zlck1hZ25ldChldmVudCwgdGhpcy5jb25uZWN0b3IpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJhZ2xlYXZlJywgWyckZXZlbnQnXSlcbiAgZHJhZ2xlYXZlKGV2ZW50OiBFdmVudCB8IGFueSkge1xuICAgIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcmFnbGVhdmVNYWduZXQoZXZlbnQpO1xuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZHJvcCcsIFsnJGV2ZW50J10pXG4gIGRyb3AoZXZlbnQ6IEV2ZW50IHwgYW55KSB7XG4gICAgcmV0dXJuIHRoaXMuY2FsbGJhY2tzLmVkZ2VEcm9wKGV2ZW50LCB0aGlzLmNvbm5lY3Rvcik7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkcmFnZW5kJywgWyckZXZlbnQnXSlcbiAgZHJhZ2VuZChldmVudDogRXZlbnQgfCBhbnkpIHtcbiAgICB0aGlzLmNhbGxiYWNrcy5lZGdlRHJhZ2VuZChldmVudCk7XG4gIH1cblxufVxuIl19
--- a/dist/ngx-flowchart/esm2015/lib/model.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/model.service.js
--- a/esm2015/lib/modelvalidation.service.js
+++ b/esm2015/lib/modelvalidation.service.js
--- a/dist/ngx-flowchart/esm2015/lib/mouseover.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/mouseover.service.js
--- a/esm2015/lib/ngx-flowchart.component.js
+++ b/esm2015/lib/ngx-flowchart.component.js
--- a/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.models.js
+++ b/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.models.js
--- a/esm2015/lib/ngx-flowchart.module.js
+++ b/esm2015/lib/ngx-flowchart.module.js
@ -0,0 +1,65 @@
+import { NgModule } from '@angular/core';
+import { NgxFlowchartComponent } from './ngx-flowchart.component';
+import { FcModelValidationService } from './modelvalidation.service';
+import { FcEdgeDrawingService } from './edge-drawing.service';
+import { CommonModule } from '@angular/common';
+import { FcMagnetDirective } from './magnet.directive';
+import { FcConnectorDirective } from './connector.directive';
+import { FcNodeContainerComponent } from './node.component';
+import { FC_NODE_COMPONENT_CONFIG } from './ngx-flowchart.models';
+import { DefaultFcNodeComponent } from './default-node.component';
+import * as i0 from "@angular/core";
+export class NgxFlowchartModule {
+}
+NgxFlowchartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: NgxFlowchartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+NgxFlowchartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: NgxFlowchartModule, declarations: [NgxFlowchartComponent,
+        FcMagnetDirective,
+        FcConnectorDirective,
+        FcNodeContainerComponent,
+        DefaultFcNodeComponent], imports: [CommonModule], exports: [NgxFlowchartComponent,
+        FcMagnetDirective,
+        FcConnectorDirective,
+        DefaultFcNodeComponent] });
+NgxFlowchartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: NgxFlowchartModule, providers: [
+        FcModelValidationService,
+        FcEdgeDrawingService,
+        {
+            provide: FC_NODE_COMPONENT_CONFIG,
+            useValue: {
+                nodeComponentType: DefaultFcNodeComponent
+            }
+        }
+    ], imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: NgxFlowchartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    entryComponents: [
+                        DefaultFcNodeComponent
+                    ],
+                    declarations: [NgxFlowchartComponent,
+                        FcMagnetDirective,
+                        FcConnectorDirective,
+                        FcNodeContainerComponent,
+                        DefaultFcNodeComponent],
+                    providers: [
+                        FcModelValidationService,
+                        FcEdgeDrawingService,
+                        {
+                            provide: FC_NODE_COMPONENT_CONFIG,
+                            useValue: {
+                                nodeComponentType: DefaultFcNodeComponent
+                            }
+                        }
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [NgxFlowchartComponent,
+                        FcMagnetDirective,
+                        FcConnectorDirective,
+                        DefaultFcNodeComponent]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZmxvd2NoYXJ0L3NyYy9saWIvbmd4LWZsb3djaGFydC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNsRSxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUNyRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUM5RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDdkQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDN0QsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDNUQsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDbEUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7O0FBNkJsRSxNQUFNLE9BQU8sa0JBQWtCOztnSEFBbEIsa0JBQWtCO2lIQUFsQixrQkFBa0IsaUJBdkJkLHFCQUFxQjtRQUNsQyxpQkFBaUI7UUFDakIsb0JBQW9CO1FBQ3BCLHdCQUF3QjtRQUN4QixzQkFBc0IsYUFZdEIsWUFBWSxhQUVKLHFCQUFxQjtRQUM3QixpQkFBaUI7UUFDakIsb0JBQW9CO1FBQ3BCLHNCQUFzQjtpSEFFYixrQkFBa0IsYUFsQmxCO1FBQ1Qsd0JBQXdCO1FBQ3hCLG9CQUFvQjtRQUNwQjtZQUNFLE9BQU8sRUFBRSx3QkFBd0I7WUFDakMsUUFBUSxFQUFFO2dCQUNSLGlCQUFpQixFQUFFLHNCQUFzQjthQUMxQztTQUNGO0tBQ0YsWUFDUTtZQUNQLFlBQVk7U0FDYjs0RkFNVSxrQkFBa0I7a0JBM0I5QixRQUFRO21CQUFDO29CQUNSLGVBQWUsRUFBRTt3QkFDZixzQkFBc0I7cUJBQ3ZCO29CQUNELFlBQVksRUFBRSxDQUFDLHFCQUFxQjt3QkFDbEMsaUJBQWlCO3dCQUNqQixvQkFBb0I7d0JBQ3BCLHdCQUF3Qjt3QkFDeEIsc0JBQXNCLENBQUM7b0JBQ3pCLFNBQVMsRUFBRTt3QkFDVCx3QkFBd0I7d0JBQ3hCLG9CQUFvQjt3QkFDcEI7NEJBQ0UsT0FBTyxFQUFFLHdCQUF3Qjs0QkFDakMsUUFBUSxFQUFFO2dDQUNSLGlCQUFpQixFQUFFLHNCQUFzQjs2QkFDMUM7eUJBQ0Y7cUJBQ0Y7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFFLENBQUMscUJBQXFCO3dCQUM3QixpQkFBaUI7d0JBQ2pCLG9CQUFvQjt3QkFDcEIsc0JBQXNCLENBQUM7aUJBQzFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5neEZsb3djaGFydENvbXBvbmVudCB9IGZyb20gJy4vbmd4LWZsb3djaGFydC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRmNNb2RlbFZhbGlkYXRpb25TZXJ2aWNlIH0gZnJvbSAnLi9tb2RlbHZhbGlkYXRpb24uc2VydmljZSc7XG5pbXBvcnQgeyBGY0VkZ2VEcmF3aW5nU2VydmljZSB9IGZyb20gJy4vZWRnZS1kcmF3aW5nLnNlcnZpY2UnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEZjTWFnbmV0RGlyZWN0aXZlIH0gZnJvbSAnLi9tYWduZXQuZGlyZWN0aXZlJztcbmltcG9ydCB7IEZjQ29ubmVjdG9yRGlyZWN0aXZlIH0gZnJvbSAnLi9jb25uZWN0b3IuZGlyZWN0aXZlJztcbmltcG9ydCB7IEZjTm9kZUNvbnRhaW5lckNvbXBvbmVudCB9IGZyb20gJy4vbm9kZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgRkNfTk9ERV9DT01QT05FTlRfQ09ORklHIH0gZnJvbSAnLi9uZ3gtZmxvd2NoYXJ0Lm1vZGVscyc7XG5pbXBvcnQgeyBEZWZhdWx0RmNOb2RlQ29tcG9uZW50IH0gZnJvbSAnLi9kZWZhdWx0LW5vZGUuY29tcG9uZW50JztcblxuQE5nTW9kdWxlKHtcbiAgZW50cnlDb21wb25lbnRzOiBbXG4gICAgRGVmYXVsdEZjTm9kZUNvbXBvbmVudFxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtOZ3hGbG93Y2hhcnRDb21wb25lbnQsXG4gICAgRmNNYWduZXREaXJlY3RpdmUsXG4gICAgRmNDb25uZWN0b3JEaXJlY3RpdmUsXG4gICAgRmNOb2RlQ29udGFpbmVyQ29tcG9uZW50LFxuICAgIERlZmF1bHRGY05vZGVDb21wb25lbnRdLFxuICBwcm92aWRlcnM6IFtcbiAgICBGY01vZGVsVmFsaWRhdGlvblNlcnZpY2UsXG4gICAgRmNFZGdlRHJhd2luZ1NlcnZpY2UsXG4gICAge1xuICAgICAgcHJvdmlkZTogRkNfTk9ERV9DT01QT05FTlRfQ09ORklHLFxuICAgICAgdXNlVmFsdWU6IHtcbiAgICAgICAgbm9kZUNvbXBvbmVudFR5cGU6IERlZmF1bHRGY05vZGVDb21wb25lbnRcbiAgICAgIH1cbiAgICB9XG4gIF0sXG4gIGltcG9ydHM6IFtcbiAgICBDb21tb25Nb2R1bGVcbiAgXSxcbiAgZXhwb3J0czogW05neEZsb3djaGFydENvbXBvbmVudCxcbiAgICBGY01hZ25ldERpcmVjdGl2ZSxcbiAgICBGY0Nvbm5lY3RvckRpcmVjdGl2ZSxcbiAgICBEZWZhdWx0RmNOb2RlQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hGbG93Y2hhcnRNb2R1bGUgeyB9XG4iXX0=
--- a/dist/ngx-flowchart/esm2015/lib/node-dragging.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/node-dragging.service.js
--- a/esm2015/lib/node.component.js
+++ b/esm2015/lib/node.component.js
--- a/dist/ngx-flowchart/esm2015/lib/rectangleselect.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/rectangleselect.service.js
--- a/esm2015/lib/scrollparent.js
+++ b/esm2015/lib/scrollparent.js
@ -0,0 +1,12 @@
+const regex = /(auto|scroll)/;
+const style = (node, prop) => getComputedStyle(node, null).getPropertyValue(prop);
+const scroll = (node) => regex.test(style(node, 'overflow') +
+    style(node, 'overflow-y') +
+    style(node, 'overflow-x'));
+const scrollparent = (node) => !node || node === document.body
+    ? document.body
+    : scroll(node)
+        ? node
+        : scrollparent(node.parentNode);
+export default scrollparent;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2Nyb2xscGFyZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWZsb3djaGFydC9zcmMvbGliL3Njcm9sbHBhcmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLEtBQUssR0FBRyxlQUFlLENBQUM7QUFFOUIsTUFBTSxLQUFLLEdBQUcsQ0FBQyxJQUFhLEVBQUUsSUFBWSxFQUFVLEVBQUUsQ0FDcEQsZ0JBQWdCLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxDQUFDO0FBRXRELE1BQU0sTUFBTSxHQUFHLENBQUMsSUFBYSxFQUFFLEVBQUUsQ0FDL0IsS0FBSyxDQUFDLElBQUksQ0FDUixLQUFLLENBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQztJQUN2QixLQUFLLENBQUMsSUFBSSxFQUFFLFlBQVksQ0FBQztJQUN6QixLQUFLLENBQUMsSUFBSSxFQUFFLFlBQVksQ0FBQyxDQUFDLENBQUM7QUFFL0IsTUFBTSxZQUFZLEdBQUcsQ0FBQyxJQUFpQixFQUFlLEVBQUUsQ0FDdEQsQ0FBQyxJQUFJLElBQUksSUFBSSxLQUFLLFFBQVEsQ0FBQyxJQUFJO0lBQzdCLENBQUMsQ0FBQyxRQUFRLENBQUMsSUFBSTtJQUNmLENBQUMsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDO1FBQ2QsQ0FBQyxDQUFDLElBQUk7UUFDTixDQUFDLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxVQUF5QixDQUFDLENBQUM7QUFFbkQsZUFBZSxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCByZWdleCA9IC8oYXV0b3xzY3JvbGwpLztcblxuY29uc3Qgc3R5bGUgPSAobm9kZTogRWxlbWVudCwgcHJvcDogc3RyaW5nKTogc3RyaW5nID0+XG4gIGdldENvbXB1dGVkU3R5bGUobm9kZSwgbnVsbCkuZ2V0UHJvcGVydHlWYWx1ZShwcm9wKTtcblxuY29uc3Qgc2Nyb2xsID0gKG5vZGU6IEVsZW1lbnQpID0+XG4gIHJlZ2V4LnRlc3QoXG4gICAgc3R5bGUobm9kZSwgJ292ZXJmbG93JykgK1xuICAgIHN0eWxlKG5vZGUsICdvdmVyZmxvdy15JykgK1xuICAgIHN0eWxlKG5vZGUsICdvdmVyZmxvdy14JykpO1xuXG5jb25zdCBzY3JvbGxwYXJlbnQgPSAobm9kZTogSFRNTEVsZW1lbnQpOiBIVE1MRWxlbWVudCA9PlxuICAhbm9kZSB8fCBub2RlID09PSBkb2N1bWVudC5ib2R5XG4gICAgPyBkb2N1bWVudC5ib2R5XG4gICAgOiBzY3JvbGwobm9kZSlcbiAgICA/IG5vZGVcbiAgICA6IHNjcm9sbHBhcmVudChub2RlLnBhcmVudE5vZGUgYXMgSFRNTEVsZW1lbnQpO1xuXG5leHBvcnQgZGVmYXVsdCBzY3JvbGxwYXJlbnQ7XG4iXX0=
--- a/esm2015/ngx-flowchart.js
+++ b/esm2015/ngx-flowchart.js
@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWZsb3djaGFydC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL25neC1mbG93Y2hhcnQvc3JjL25neC1mbG93Y2hhcnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLGNBQWMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9wdWJsaWMtYXBpJztcbiJdfQ==
--- a/dist/ngx-flowchart/esm2015/public-api.js
+++ b/dist/ngx-flowchart/esm2015/public-api.js
--- a/dist/ngx-flowchart/fesm2015/ngx-flowchart.js
+++ b/dist/ngx-flowchart/fesm2015/ngx-flowchart.js
--- a/fesm2015/ngx-flowchart.js.map
+++ b/fesm2015/ngx-flowchart.js.map
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/ngx-flowchart'),
-      reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};
--- a/dist/ngx-flowchart/lib/connector.directive.d.ts
+++ b/dist/ngx-flowchart/lib/connector.directive.d.ts
@ -1,7 +1,7 @@
-import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { ElementRef, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { FcCallbacks, FcConnector, FcNodeRectInfo } from './ngx-flowchart.models';
 import { FcModelService } from './model.service';
+import * as i0 from "@angular/core";
 export declare class FcConnectorDirective implements OnInit, OnChanges {
    elementRef: ElementRef<HTMLElement>;
    callbacks: FcCallbacks;
@ -19,4 +19,6 @@ export declare class FcConnectorDirective implements OnInit, OnChanges {
    dragstart(event: Event | any): void;
    mouseenter(event: MouseEvent): void;
    mouseleave(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FcConnectorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FcConnectorDirective, "[fc-connector]", never, { "callbacks": "callbacks"; "modelservice": "modelservice"; "connector": "connector"; "nodeRectInfo": "nodeRectInfo"; "mouseOverConnector": "mouseOverConnector"; }, {}, never>;
 }
--- a/lib/default-node.component.d.ts
+++ b/lib/default-node.component.d.ts
@ -0,0 +1,7 @@
+import { FcNodeComponent } from './node.component';
+import * as i0 from "@angular/core";
+export declare class DefaultFcNodeComponent extends FcNodeComponent {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DefaultFcNodeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DefaultFcNodeComponent, "fc-default-node", never, {}, {}, never, never>;
+}
--- a/dist/ngx-flowchart/lib/edge-dragging.service.d.ts
+++ b/dist/ngx-flowchart/lib/edge-dragging.service.d.ts
--- a/dist/ngx-flowchart/lib/edge-drawing.service.d.ts
+++ b/dist/ngx-flowchart/lib/edge-drawing.service.d.ts
@ -1,4 +1,5 @@
 import { FcCoords } from './ngx-flowchart.models';
+import * as i0 from "@angular/core";
 export declare class FcEdgeDrawingService {
    constructor();
    getEdgeDAttribute(pt1: FcCoords, pt2: FcCoords, style: string): string;
@ -6,4 +7,6 @@ export declare class FcEdgeDrawingService {
    private computeEdgeTangentOffset;
    private computeEdgeSourceTangent;
    private computeEdgeDestinationTangent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FcEdgeDrawingService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FcEdgeDrawingService>;
 }
--- a/dist/ngx-flowchart/lib/magnet.directive.d.ts
+++ b/dist/ngx-flowchart/lib/magnet.directive.d.ts
@ -1,6 +1,6 @@
-import { OnInit } from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { ElementRef, OnInit } from '@angular/core';
 import { FcCallbacks, FcConnector } from './ngx-flowchart.models';
+import * as i0 from "@angular/core";
 export declare class FcMagnetDirective implements OnInit {
    elementRef: ElementRef<HTMLElement>;
    callbacks: FcCallbacks;
@ -11,4 +11,6 @@ export declare class FcMagnetDirective implements OnInit {
    dragleave(event: Event | any): void;
    drop(event: Event | any): boolean;
    dragend(event: Event | any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FcMagnetDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FcMagnetDirective, "[fc-magnet]", never, { "callbacks": "callbacks"; "connector": "connector"; }, {}, never>;
 }
--- a/dist/ngx-flowchart/lib/model.service.d.ts
+++ b/dist/ngx-flowchart/lib/model.service.d.ts
--- a/dist/ngx-flowchart/lib/modelvalidation.service.d.ts
+++ b/dist/ngx-flowchart/lib/modelvalidation.service.d.ts
@ -1,4 +1,5 @@
 import { FcConnector, FcEdge, FcModel, FcNode } from './ngx-flowchart.models';
+import * as i0 from "@angular/core";
 export declare class FcModelValidationService {
    constructor();
    validateModel(model: FcModel): FcModel;
@ -9,4 +10,6 @@ export declare class FcModelValidationService {
    private _validateEdge;
    validateEdge(edge: FcEdge, nodes: Array<FcNode>): FcEdge;
    validateConnector(connector: FcConnector): FcConnector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FcModelValidationService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<FcModelValidationService>;
 }
--- a/dist/ngx-flowchart/lib/mouseover.service.d.ts
+++ b/dist/ngx-flowchart/lib/mouseover.service.d.ts
--- a/dist/ngx-flowchart/lib/ngx-flowchart.component.d.ts
+++ b/dist/ngx-flowchart/lib/ngx-flowchart.component.d.ts
@ -1,5 +1,4 @@
-import { DoCheck, OnInit } from '@angular/core';
-import { ChangeDetectorRef, ElementRef, EventEmitter, IterableDiffers, NgZone } from '@angular/core';
+import { ChangeDetectorRef, DoCheck, ElementRef, EventEmitter, IterableDiffers, NgZone, OnInit } from '@angular/core';
 import { FcCallbacks, FcEdge, FcModel, UserCallbacks, UserNodeCallbacks } from './ngx-flowchart.models';
 import { FcModelService } from './model.service';
 import { FcModelValidationService } from './modelvalidation.service';
@ -8,6 +7,7 @@ import { FcEdgeDrawingService } from './edge-drawing.service';
 import { FcEdgeDraggingService } from './edge-dragging.service';
 import { FcMouseOverService } from './mouseover.service';
 import { FcRectangleSelectService } from './rectangleselect.service';
+import * as i0 from "@angular/core";
 export declare class NgxFlowchartComponent implements OnInit, DoCheck {
    private elementRef;
    private differs;
@ -85,4 +85,6 @@ export declare class NgxFlowchartComponent implements OnInit, DoCheck {
    mousedown(event: MouseEvent): void;
    mousemove(event: MouseEvent): void;
    mouseup(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFlowchartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxFlowchartComponent, "fc-canvas", never, { "model": "model"; "selectedObjects": "selectedObjects"; "edgeStyle": "edgeStyle"; "userCallbacks": "userCallbacks"; "automaticResize": "automaticResize"; "dragAnimation": "dragAnimation"; "nodeWidth": "nodeWidth"; "nodeHeight": "nodeHeight"; "dropTargetId": "dropTargetId"; "fitModelSizeByDefault": "fitModelSizeByDefault"; }, { "modelChanged": "modelChanged"; }, never, never>;
 }
--- a/dist/ngx-flowchart/lib/ngx-flowchart.models.d.ts
+++ b/dist/ngx-flowchart/lib/ngx-flowchart.models.d.ts
--- a/lib/ngx-flowchart.module.d.ts
+++ b/lib/ngx-flowchart.module.d.ts
@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./ngx-flowchart.component";
+import * as i2 from "./magnet.directive";
+import * as i3 from "./connector.directive";
+import * as i4 from "./node.component";
+import * as i5 from "./default-node.component";
+import * as i6 from "@angular/common";
+export declare class NgxFlowchartModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgxFlowchartModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxFlowchartModule, [typeof i1.NgxFlowchartComponent, typeof i2.FcMagnetDirective, typeof i3.FcConnectorDirective, typeof i4.FcNodeContainerComponent, typeof i5.DefaultFcNodeComponent], [typeof i6.CommonModule], [typeof i1.NgxFlowchartComponent, typeof i2.FcMagnetDirective, typeof i3.FcConnectorDirective, typeof i5.DefaultFcNodeComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NgxFlowchartModule>;
+}
--- a/dist/ngx-flowchart/lib/node-dragging.service.d.ts
+++ b/dist/ngx-flowchart/lib/node-dragging.service.d.ts
--- a/dist/ngx-flowchart/lib/node.component.d.ts
+++ b/dist/ngx-flowchart/lib/node.component.d.ts
@ -1,7 +1,7 @@
-import { AfterViewInit, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ComponentFactoryResolver, ElementRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ComponentFactoryResolver, ElementRef, OnChanges, OnInit, SimpleChanges, ViewContainerRef } from '@angular/core';
 import { FcCallbacks, FcConnector, FcNode, FcNodeComponentConfig, FcNodeRectInfo, UserNodeCallbacks } from './ngx-flowchart.models';
 import { FcModelService } from './model.service';
+import * as i0 from "@angular/core";
 export declare class FcNodeContainerComponent implements OnInit, AfterViewInit, OnChanges {
    private nodeComponentConfig;
    private elementRef;
@ -33,6 +33,8 @@ export declare class FcNodeContainerComponent implements OnInit, AfterViewInit,
    click(event: MouseEvent): void;
    mouseover(event: MouseEvent): void;
    mouseout(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FcNodeContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FcNodeContainerComponent, "fc-node", never, { "callbacks": "callbacks"; "userNodeCallbacks": "userNodeCallbacks"; "node": "node"; "selected": "selected"; "edit": "edit"; "underMouse": "underMouse"; "mouseOverConnector": "mouseOverConnector"; "modelservice": "modelservice"; "dragging": "dragging"; }, {}, never, never>;
 }
 export declare abstract class FcNodeComponent implements OnInit {
    callbacks: FcCallbacks;
@ -73,4 +75,6 @@ export declare abstract class FcNodeComponent implements OnInit {
    height: number;
    nodeRectInfo: FcNodeRectInfo;
    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FcNodeComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<FcNodeComponent, never, never, { "callbacks": "callbacks"; "userNodeCallbacks": "userNodeCallbacks"; "node": "node"; "selected": "selected"; "edit": "edit"; "underMouse": "underMouse"; "mouseOverConnector": "mouseOverConnector"; "modelservice": "modelservice"; "dragging": "dragging"; }, {}, never>;
 }
--- a/dist/ngx-flowchart/lib/rectangleselect.service.d.ts
+++ b/dist/ngx-flowchart/lib/rectangleselect.service.d.ts
--- a/dist/ngx-flowchart/lib/scrollparent.d.ts
+++ b/dist/ngx-flowchart/lib/scrollparent.d.ts
--- a/ngx-flowchart.d.ts
+++ b/ngx-flowchart.d.ts
@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="ngx-flowchart" />
+export * from './public-api';
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,55 +1,20 @@
 {
-  "name": "ngx-flowchart-demo",
-  "version": "0.0.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve --host 0.0.0.0 --open --port 4300",
-    "build": "ng build ngx-flowchart --prod",
-    "test": "ng test ngx-flowchart",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
+  "name": "ngx-flowchart",
+  "version": "0.0.1",
  "peerDependencies": {
-    "jquery": "^3.5.1"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1000.6",
-    "@angular-devkit/build-ng-packagr": "^0.1000.6",
-    "@angular/animations": "^10.0.9",
-    "@angular/cdk": "^10.1.3",
-    "@angular/cli": "^10.0.6",
-    "@angular/common": "^10.0.9",
-    "@angular/compiler": "^10.0.9",
-    "@angular/compiler-cli": "^10.0.9",
-    "@angular/core": "^10.0.9",
-    "@angular/forms": "^10.0.9",
-    "@angular/language-service": "^10.0.9",
-    "@angular/platform-browser": "^10.0.9",
-    "@angular/platform-browser-dynamic": "^10.0.9",
-    "@angular/router": "^10.0.9",
-    "@types/jasmine": "^3.5.12",
-    "@types/jasminewd2": "~2.0.8",
-    "@types/jquery": "^3.5.1",
-    "@types/node": "^14.0.27",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.2",
-    "jquery": "^3.5.1",
-    "karma": "^5.1.1",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
-    "ng-packagr": "^10.0.4",
-    "protractor": "~7.0.0",
-    "rxjs": "~6.6.2",
-    "ts-node": "^8.10.2",
-    "tslint": "^6.1.3",
-    "typescript": "~3.9.7",
-    "zone.js": "~0.10.3"
+    "@angular/common": "^12.2.13",
+    "@angular/core": "^12.2.13",
+    "jquery": "^3.6.0",
+    "typescript": "~4.3.5"
  },
+  "main": "bundles/ngx-flowchart.umd.js",
+  "module": "fesm2015/ngx-flowchart.js",
+  "es2015": "fesm2015/ngx-flowchart.js",
+  "esm2015": "esm2015/ngx-flowchart.js",
+  "fesm2015": "fesm2015/ngx-flowchart.js",
+  "typings": "ngx-flowchart.d.ts",
+  "sideEffects": false,
  "dependencies": {
-    "tslib": "^1.13.0"
+    "tslib": "^2.2.0"
  }
 }
--- a/projects/ngx-flowchart/README.md
+++ b/projects/ngx-flowchart/README.md
@ -1,24 +0,0 @@
-# NgxFlowchart
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.0.3.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project ngx-flowchart` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-flowchart`.
-> Note: Don't forget to add `--project ngx-flowchart` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build ngx-flowchart` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build ngx-flowchart`, go to the dist folder `cd dist/ngx-flowchart` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test ngx-flowchart` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- a/projects/ngx-flowchart/karma.conf.js
+++ b/projects/ngx-flowchart/karma.conf.js
@ -1,32 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, '../../coverage/ngx-flowchart'),
-      reports: ['html', 'lcovonly'],
-      fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};
--- a/projects/ngx-flowchart/ng-package.json
+++ b/projects/ngx-flowchart/ng-package.json
@ -1,8 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-flowchart",
-  "deleteDestPath": false,
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}
--- a/projects/ngx-flowchart/ng-package.prod.json
+++ b/projects/ngx-flowchart/ng-package.prod.json
@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-flowchart",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}
--- a/projects/ngx-flowchart/package.json
+++ b/projects/ngx-flowchart/package.json
@ -1,13 +0,0 @@
-{
-  "name": "ngx-flowchart",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@angular/common": "^9.1.3",
-    "@angular/core": "^9.1.3",
-    "jquery": "^3.5.0",
-    "typescript": "^3.7.5"
-  },
-  "devDependencies": {
-    "@types/jquery": "^3.3.36"
-  }
-}
--- a/projects/ngx-flowchart/src/lib/connector.directive.ts
+++ b/projects/ngx-flowchart/src/lib/connector.directive.ts
@ -1,113 +0,0 @@
-import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { Directive, Input, HostListener, ElementRef } from '@angular/core';
-import { FcCallbacks, FcConnector, FcConnectorRectInfo, FcNodeRectInfo, FlowchartConstants } from './ngx-flowchart.models';
-import { FcModelService } from './model.service';
-
-@Directive({
-  // tslint:disable-next-line:directive-selector
-  selector: '[fc-connector]'
-})
-export class FcConnectorDirective implements OnInit, OnChanges {
-
-  @Input()
-  callbacks: FcCallbacks;
-
-  @Input()
-  modelservice: FcModelService;
-
-  @Input()
-  connector: FcConnector;
-
-  @Input()
-  nodeRectInfo: FcNodeRectInfo;
-
-  @Input()
-  mouseOverConnector: FcConnector;
-
-  constructor(public elementRef: ElementRef<HTMLElement>) {
-  }
-
-  ngOnInit(): void {
-    const element = $(this.elementRef.nativeElement);
-    element.addClass(FlowchartConstants.connectorClass);
-    if (this.modelservice.isEditable()) {
-      element.attr('draggable', 'true');
-      this.updateConnectorClass();
-    }
-    const connectorRectInfo: FcConnectorRectInfo = {
-      type: this.connector.type,
-      width: this.elementRef.nativeElement.offsetWidth,
-      height: this.elementRef.nativeElement.offsetHeight,
-      nodeRectInfo: this.nodeRectInfo
-    };
-    this.modelservice.connectors.setConnectorRectInfo(this.connector.id, connectorRectInfo);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    let updateConnector = false;
-    for (const propName of Object.keys(changes)) {
-      const change = changes[propName];
-      if (!change.firstChange && change.currentValue !== change.previousValue) {
-        if (propName === 'mouseOverConnector') {
-          updateConnector = true;
-        }
-      }
-    }
-    if (updateConnector && this.modelservice.isEditable()) {
-      this.updateConnectorClass();
-    }
-  }
-
-  private updateConnectorClass() {
-    const element = $(this.elementRef.nativeElement);
-    if (this.connector === this.mouseOverConnector) {
-      element.addClass(FlowchartConstants.hoverClass);
-    } else {
-      element.removeClass(FlowchartConstants.hoverClass);
-    }
-  }
-
-  @HostListener('dragover', ['$event'])
-  dragover(event: Event | any) {
-    // Skip - conflict with magnet
-    /* if (this.modelservice.isEditable()) {
-      return this.callbacks.edgeDragoverConnector(event, this.connector);
-    }*/
-  }
-
-  @HostListener('drop', ['$event'])
-  drop(event: Event | any) {
-    if (this.modelservice.isEditable()) {
-      return this.callbacks.edgeDrop(event, this.connector);
-    }
-  }
-
-  @HostListener('dragend', ['$event'])
-  dragend(event: Event | any) {
-    if (this.modelservice.isEditable()) {
-      this.callbacks.edgeDragend(event);
-    }
-  }
-
-  @HostListener('dragstart', ['$event'])
-  dragstart(event: Event | any) {
-    if (this.modelservice.isEditable()) {
-      this.callbacks.edgeDragstart(event, this.connector);
-    }
-  }
-
-  @HostListener('mouseenter', ['$event'])
-  mouseenter(event: MouseEvent) {
-    if (this.modelservice.isEditable()) {
-      this.callbacks.connectorMouseEnter(event, this.connector);
-    }
-  }
-
-  @HostListener('mouseleave', ['$event'])
-  mouseleave(event: MouseEvent) {
-    if (this.modelservice.isEditable()) {
-      this.callbacks.connectorMouseLeave(event, this.connector);
-    }
-  }
-
-}
--- a/projects/ngx-flowchart/src/lib/default-node.component.html
+++ b/projects/ngx-flowchart/src/lib/default-node.component.html
@ -1,34 +0,0 @@
-<div
-  (dblclick)="userNodeCallbacks.doubleClick($event, node)">
-  <div class="{{flowchartConstants.nodeOverlayClass}}"></div>
-  <div class="innerNode">
-    <p>{{ node.name }}</p>
-
-    <div class="{{flowchartConstants.leftConnectorClass}}">
-      <div fc-magnet [connector]="connector" [callbacks]="callbacks"
-           *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.leftConnectorType)">
-        <div fc-connector [connector]="connector"
-             [nodeRectInfo]="nodeRectInfo"
-             [mouseOverConnector]="mouseOverConnector"
-             [callbacks]="callbacks"
-             [modelservice]="modelservice"></div>
-      </div>
-    </div>
-    <div class="{{flowchartConstants.rightConnectorClass}}">
-      <div fc-magnet [connector]="connector" [callbacks]="callbacks"
-           *ngFor="let connector of modelservice.nodes.getConnectorsByType(node, flowchartConstants.rightConnectorType)">
-        <div fc-connector [connector]="connector"
-             [nodeRectInfo]="nodeRectInfo"
-             [mouseOverConnector]="mouseOverConnector"
-             [callbacks]="callbacks"
-             [modelservice]="modelservice"></div>
-      </div>
-    </div>
-  </div>
-  <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodeedit" (click)="userNodeCallbacks.nodeEdit($event, node)">
-    <i class="fa fa-pencil" aria-hidden="true"></i>
-  </div>
-  <div *ngIf="modelservice.isEditable() && !node.readonly" class="fc-nodedelete" (click)="modelservice.nodes.delete(node)">
-    &times;
-  </div>
-</div>
--- a/projects/ngx-flowchart/src/lib/default-node.component.scss
+++ b/projects/ngx-flowchart/src/lib/default-node.component.scss
@ -1,40 +0,0 @@
-:host {
-
-  .fc-node-overlay {
-    position: absolute;
-    pointer-events: none;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #000;
-    opacity: 0;
-  }
-
-  :host-context(.fc-hover) .fc-node-overlay {
-    opacity: 0.25;
-    transition: opacity .2s;
-  }
-
-  :host-context(.fc-selected) .fc-node-overlay {
-    opacity: 0.25;
-  }
-
-  .innerNode {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 100px;
-    border-radius: 5px;
-
-    background-color: #F15B26;
-    color: #fff;
-    font-size: 16px;
-    pointer-events: none;
-
-    p {
-      padding: 0 15px;
-      text-align: center;
-    }
-  }
-}
--- a/projects/ngx-flowchart/src/lib/default-node.component.ts
+++ b/projects/ngx-flowchart/src/lib/default-node.component.ts
@ -1,15 +0,0 @@
-import { Component } from '@angular/core';
-import { FcNodeComponent } from './node.component';
-
-@Component({
-  selector: 'fc-default-node',
-  templateUrl: './default-node.component.html',
-  styleUrls: ['./default-node.component.scss']
-})
-export class DefaultFcNodeComponent extends FcNodeComponent {
-
-  constructor() {
-    super();
-  }
-
-}
--- a/projects/ngx-flowchart/src/lib/edge-dragging.service.ts
+++ b/projects/ngx-flowchart/src/lib/edge-dragging.service.ts
@ -1,278 +0,0 @@
-import { FcModelService } from './model.service';
-import { FcConnector, FcCoords, FcEdge, FcModel, FlowchartConstants, ModelvalidationError } from './ngx-flowchart.models';
-import { FcEdgeDrawingService } from './edge-drawing.service';
-import { FcModelValidationService } from './modelvalidation.service';
-
-export class FcEdgeDraggingService {
-
-  edgeDragging: EdgeDragging = {
-    isDragging: false,
-    dragPoint1: null,
-    dragPoint2: null,
-    shadowDragStarted: false
-  };
-
-  private draggedEdgeSource: FcConnector = null;
-  private dragOffset: FcCoords = {};
-  private destinationHtmlElement: HTMLElement = null;
-  private oldDisplayStyle = '';
-
-  private readonly modelValidation: FcModelValidationService;
-  private readonly edgeDrawingService: FcEdgeDrawingService;
-  private readonly modelService: FcModelService;
-  private readonly model: FcModel;
-  private readonly isValidEdgeCallback: (source: FcConnector, destination: FcConnector) => boolean;
-  private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
-  private readonly dragAnimation: string;
-  private readonly edgeStyle: string;
-
-  constructor(modelValidation: FcModelValidationService,
-              edgeDrawingService: FcEdgeDrawingService,
-              modelService: FcModelService,
-              model: FcModel,
-              isValidEdgeCallback: (source: FcConnector, destination: FcConnector) => boolean,
-              applyFunction: <T>(fn: (...args: any[]) => T) => T,
-              dragAnimation: string,
-              edgeStyle: string) {
-    this.modelValidation = modelValidation;
-    this.edgeDrawingService = edgeDrawingService;
-    this.modelService = modelService;
-    this.model = model;
-    this.isValidEdgeCallback = isValidEdgeCallback || (() => true);
-    this.applyFunction = applyFunction;
-    this.dragAnimation = dragAnimation;
-    this.edgeStyle = edgeStyle;
-  }
-
-  public dragstart(event: Event | any, connector: FcConnector) {
-    let swapConnector: FcConnector;
-    let dragLabel: string;
-    let prevEdge: FcEdge;
-    if (connector.type === FlowchartConstants.leftConnectorType) {
-      for (const edge of this.model.edges) {
-        if (edge.destination === connector.id) {
-          swapConnector = this.modelService.connectors.getConnector(edge.source);
-          dragLabel = edge.label;
-          prevEdge = edge;
-          this.applyFunction(() => {
-            this.modelService.edges.delete(edge);
-          });
-          break;
-        }
-      }
-    }
-    this.edgeDragging.isDragging = true;
-    if (swapConnector !== undefined) {
-      this.draggedEdgeSource = swapConnector;
-      this.edgeDragging.dragPoint1 = this.modelService.connectors.getCenteredCoord(swapConnector.id);
-      this.edgeDragging.dragLabel = dragLabel;
-      this.edgeDragging.prevEdge = prevEdge;
-    } else {
-      this.draggedEdgeSource = connector;
-      this.edgeDragging.dragPoint1 = this.modelService.connectors.getCenteredCoord(connector.id);
-    }
-    const canvas = this.modelService.canvasHtmlElement;
-    if (!canvas) {
-      throw new Error('No canvas while edgedraggingService found.');
-    }
-    this.dragOffset.x = -canvas.getBoundingClientRect().left;
-    this.dragOffset.y = -canvas.getBoundingClientRect().top;
-
-    this.edgeDragging.dragPoint2 = {
-      x: event.clientX + this.dragOffset.x,
-      y: event.clientY + this.dragOffset.y
-    };
-    const originalEvent: Event | any = (event as any).originalEvent || event;
-
-    originalEvent.dataTransfer.setData('Text', 'Just to support firefox');
-    if (originalEvent.dataTransfer.setDragImage) {
-      originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
-    } else {
-      this.destinationHtmlElement = event.target as HTMLElement;
-      this.oldDisplayStyle = this.destinationHtmlElement.style.display;
-      this.destinationHtmlElement.style.display = 'none';
-      if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-        this.edgeDragging.shadowDragStarted = true;
-      }
-    }
-    if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-      if (this.edgeDragging.gElement === undefined) {
-        this.edgeDragging.gElement = $(document.querySelectorAll('.shadow-svg-class'));
-        this.edgeDragging.pathElement = $(document.querySelectorAll('.shadow-svg-class')).find('path');
-        this.edgeDragging.circleElement = $(document.querySelectorAll('.shadow-svg-class')).find('circle');
-      }
-
-      this.edgeDragging.gElement.css('display', 'block');
-      this.edgeDragging.pathElement.attr('d',
-        this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1, this.edgeDragging.dragPoint2, this.edgeStyle));
-      this.edgeDragging.circleElement.attr('cx', this.edgeDragging.dragPoint2.x);
-      this.edgeDragging.circleElement.attr('cy', this.edgeDragging.dragPoint2.y);
-    }
-    event.stopPropagation();
-  }
-
-  public dragover(event: Event | any) {
-    if (this.edgeDragging.isDragging) {
-      if (!this.edgeDragging.magnetActive && this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-        if (this.destinationHtmlElement !== null) {
-          this.destinationHtmlElement.style.display = this.oldDisplayStyle;
-        }
-
-        if (this.edgeDragging.shadowDragStarted) {
-          this.applyFunction(() => {
-            this.edgeDragging.shadowDragStarted = false;
-          });
-        }
-
-        this.edgeDragging.dragPoint2 = {
-          x: event.clientX + this.dragOffset.x,
-          y: event.clientY + this.dragOffset.y
-        };
-
-        this.edgeDragging.pathElement.attr('d',
-          this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1, this.edgeDragging.dragPoint2, this.edgeStyle));
-        this.edgeDragging.circleElement.attr('cx', this.edgeDragging.dragPoint2.x);
-        this.edgeDragging.circleElement.attr('cy', this.edgeDragging.dragPoint2.y);
-
-      } else if (this.dragAnimation === FlowchartConstants.dragAnimationRepaint) {
-        return this.applyFunction(() => {
-          if (this.destinationHtmlElement !== null) {
-            this.destinationHtmlElement.style.display = this.oldDisplayStyle;
-          }
-
-          this.edgeDragging.dragPoint2 = {
-            x: event.clientX + this.dragOffset.x,
-            y: event.clientY + this.dragOffset.y
-          };
-        });
-      }
-    }
-  }
-
-  public dragoverConnector(event: Event | any, connector: FcConnector): boolean {
-    if (this.edgeDragging.isDragging) {
-      this.dragover(event);
-      try {
-        this.modelValidation.validateEdges(this.model.edges.concat([{
-          source: this.draggedEdgeSource.id,
-          destination: connector.id
-        }]), this.model.nodes);
-      } catch (error) {
-        if (error instanceof ModelvalidationError) {
-          return true;
-        } else {
-          throw error;
-        }
-      }
-      if (this.isValidEdgeCallback(this.draggedEdgeSource, connector)) {
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      }
-    }
-  }
-
-  public dragleaveMagnet(event: Event | any) {
-    this.edgeDragging.magnetActive = false;
-  }
-
-  public dragoverMagnet(event: Event | any, connector: FcConnector): boolean {
-    if (this.edgeDragging.isDragging) {
-      this.dragover(event);
-      try {
-        this.modelValidation.validateEdges(this.model.edges.concat([{
-          source: this.draggedEdgeSource.id,
-          destination: connector.id
-        }]), this.model.nodes);
-      } catch (error) {
-        if (error instanceof ModelvalidationError) {
-          return true;
-        } else {
-          throw error;
-        }
-      }
-      if (this.isValidEdgeCallback(this.draggedEdgeSource, connector)) {
-        if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-
-          this.edgeDragging.magnetActive = true;
-
-          this.edgeDragging.dragPoint2 = this.modelService.connectors.getCenteredCoord(connector.id);
-          this.edgeDragging.pathElement.attr('d',
-            this.edgeDrawingService.getEdgeDAttribute(this.edgeDragging.dragPoint1, this.edgeDragging.dragPoint2, this.edgeStyle));
-          this.edgeDragging.circleElement.attr('cx', this.edgeDragging.dragPoint2.x);
-          this.edgeDragging.circleElement.attr('cy', this.edgeDragging.dragPoint2.y);
-
-          event.preventDefault();
-          event.stopPropagation();
-          return false;
-        } else if (this.dragAnimation === FlowchartConstants.dragAnimationRepaint) {
-          return this.applyFunction(() => {
-            this.edgeDragging.dragPoint2 = this.modelService.connectors.getCenteredCoord(connector.id);
-            event.preventDefault();
-            event.stopPropagation();
-            return false;
-          });
-        }
-      }
-    }
-  }
-
-  public dragend(event: Event | any) {
-    if (this.edgeDragging.isDragging) {
-      this.edgeDragging.isDragging = false;
-      this.edgeDragging.dragPoint1 = null;
-      this.edgeDragging.dragPoint2 = null;
-      this.edgeDragging.dragLabel = null;
-      event.stopPropagation();
-
-      if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-        this.edgeDragging.gElement.css('display', 'none');
-      }
-      if (this.edgeDragging.prevEdge) {
-        const edge = this.edgeDragging.prevEdge;
-        this.edgeDragging.prevEdge = null;
-        this.applyFunction(() => {
-          this.modelService.edges.putEdge(edge);
-        });
-      }
-    }
-  }
-
-  public drop(event: Event | any, targetConnector: FcConnector): boolean {
-    if (this.edgeDragging.isDragging) {
-      try {
-        this.modelValidation.validateEdges(this.model.edges.concat([{
-          source: this.draggedEdgeSource.id,
-          destination: targetConnector.id
-        }]), this.model.nodes);
-      } catch (error) {
-        if (error instanceof ModelvalidationError) {
-          return true;
-        } else {
-          throw error;
-        }
-      }
-
-      if (this.isValidEdgeCallback(this.draggedEdgeSource, targetConnector)) {
-        this.edgeDragging.prevEdge = null;
-        this.modelService.edges._addEdge(event, this.draggedEdgeSource, targetConnector, this.edgeDragging.dragLabel);
-        event.stopPropagation();
-        event.preventDefault();
-        return false;
-      }
-    }
-  }
-}
-
-export interface EdgeDragging {
-  isDragging: boolean;
-  shadowDragStarted: boolean;
-  dragPoint1: FcCoords;
-  dragPoint2: FcCoords;
-  dragLabel?: string;
-  prevEdge?: FcEdge;
-  magnetActive?: boolean;
-  gElement?: JQuery<Element>;
-  pathElement?: JQuery<Element>;
-  circleElement?: JQuery<Element>;
-}
--- a/projects/ngx-flowchart/src/lib/edge-drawing.service.ts
+++ b/projects/ngx-flowchart/src/lib/edge-drawing.service.ts
@ -1,47 +0,0 @@
-import { Injectable } from '@angular/core';
-import { FcCoords, FlowchartConstants } from './ngx-flowchart.models';
-
-@Injectable()
-export class FcEdgeDrawingService {
-
-  constructor() {
-  }
-
-  public getEdgeDAttribute(pt1: FcCoords, pt2: FcCoords, style: string): string {
-    let dAddribute = `M ${pt1.x}, ${pt1.y} `;
-    if (style === FlowchartConstants.curvedStyle) {
-      const sourceTangent = this.computeEdgeSourceTangent(pt1, pt2);
-      const destinationTangent = this.computeEdgeDestinationTangent(pt1, pt2);
-      dAddribute += `C ${sourceTangent.x}, ${sourceTangent.y} ${(destinationTangent.x - 50)}, ${destinationTangent.y} ${pt2.x}, ${pt2.y}`;
-    } else {
-      dAddribute += `L ${pt2.x}, ${pt2.y}`;
-    }
-    return dAddribute;
-  }
-
-  public getEdgeCenter(pt1: FcCoords, pt2: FcCoords): FcCoords {
-    return {
-      x: (pt1.x + pt2.x) / 2,
-      y: (pt1.y + pt2.y) / 2
-    };
-  }
-
-  private computeEdgeTangentOffset(pt1: FcCoords, pt2: FcCoords): number {
-    return (pt2.y - pt1.y) / 2;
-  }
-
-  private computeEdgeSourceTangent(pt1: FcCoords, pt2: FcCoords): FcCoords {
-    return {
-      x: pt1.x,
-      y: pt1.y + this.computeEdgeTangentOffset(pt1, pt2)
-    };
-  }
-
-  private computeEdgeDestinationTangent(pt1: FcCoords, pt2: FcCoords): FcCoords {
-    return {
-      x: pt2.x,
-      y: pt2.y - this.computeEdgeTangentOffset(pt1, pt2)
-    };
-  }
-
-}
--- a/projects/ngx-flowchart/src/lib/magnet.directive.ts
+++ b/projects/ngx-flowchart/src/lib/magnet.directive.ts
@ -1,45 +0,0 @@
-import { OnInit } from '@angular/core';
-import { Directive, ElementRef, HostListener, Input } from '@angular/core';
-import { FcCallbacks, FcConnector, FlowchartConstants } from './ngx-flowchart.models';
-
-@Directive({
-  // tslint:disable-next-line:directive-selector
-  selector: '[fc-magnet]'
-})
-export class FcMagnetDirective implements OnInit {
-
-  @Input()
-  callbacks: FcCallbacks;
-
-  @Input()
-  connector: FcConnector;
-
-  constructor(public elementRef: ElementRef<HTMLElement>) {
-  }
-
-  ngOnInit(): void {
-    const element = $(this.elementRef.nativeElement);
-    element.addClass(FlowchartConstants.magnetClass);
-  }
-
-  @HostListener('dragover', ['$event'])
-  dragover(event: Event | any) {
-    return this.callbacks.edgeDragoverMagnet(event, this.connector);
-  }
-
-  @HostListener('dragleave', ['$event'])
-  dragleave(event: Event | any) {
-    this.callbacks.edgeDragleaveMagnet(event);
-  }
-
-  @HostListener('drop', ['$event'])
-  drop(event: Event | any) {
-    return this.callbacks.edgeDrop(event, this.connector);
-  }
-
-  @HostListener('dragend', ['$event'])
-  dragend(event: Event | any) {
-    this.callbacks.edgeDragend(event);
-  }
-
-}
--- a/projects/ngx-flowchart/src/lib/model.service.ts
+++ b/projects/ngx-flowchart/src/lib/model.service.ts
@ -1,503 +0,0 @@
-import { FcModelValidationService } from './modelvalidation.service';
-import {
-  FcConnector,
-  FcConnectorRectInfo,
-  FcCoords,
-  FcEdge,
-  FcItemInfo,
-  FcModel,
-  FcNode,
-  FcRectBox,
-  FlowchartConstants
-} from './ngx-flowchart.models';
-import { Observable, of, Subject } from 'rxjs';
-import { EventEmitter } from '@angular/core';
-import { debounceTime } from 'rxjs/operators';
-
-export class FcModelService {
-
-  modelValidation: FcModelValidationService;
-  model: FcModel;
-  private readonly detectChangesSubject: Subject<any>;
-  selectedObjects: any[];
-
-  connectorsRectInfos: ConnectorRectInfoMap = {};
-  nodesHtmlElements: HtmlElementMap = {};
-  canvasHtmlElement: HTMLElement = null;
-  dragImage: HTMLImageElement = null;
-  svgHtmlElement: SVGElement = null;
-
-  dropNode: (event: Event, node: FcNode) => void;
-  createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>;
-  edgeAddedCallback: (edge: FcEdge) => void;
-  nodeRemovedCallback: (node: FcNode) => void;
-  edgeRemovedCallback: (edge: FcEdge) => void;
-
-  dropTargetId: string;
-
-  private readonly modelChanged: EventEmitter<any>;
-  private readonly debouncer = new Subject<any>();
-
-  connectors: ConnectorsModel;
-  nodes: NodesModel;
-  edges: EdgesModel;
-
-  constructor(modelValidation: FcModelValidationService,
-              model: FcModel,
-              modelChanged: EventEmitter<any>,
-              detectChangesSubject: Subject<any>,
-              selectedObjects: any[],
-              dropNode: (event: Event, node: FcNode) => void,
-              createEdge: (event: Event, edge: FcEdge) => Observable<FcEdge>,
-              edgeAddedCallback: (edge: FcEdge) => void,
-              nodeRemovedCallback: (node: FcNode) => void,
-              edgeRemovedCallback: (edge: FcEdge) => void,
-              canvasHtmlElement: HTMLElement,
-              svgHtmlElement: SVGElement) {
-
-    this.modelValidation = modelValidation;
-    this.model = model;
-    this.modelChanged = modelChanged;
-    this.detectChangesSubject = detectChangesSubject;
-    this.canvasHtmlElement = canvasHtmlElement;
-    this.svgHtmlElement = svgHtmlElement;
-    this.modelValidation.validateModel(this.model);
-    this.selectedObjects = selectedObjects;
-
-    this.dropNode = dropNode || (() => {});
-    this.createEdge = createEdge || ((event, edge) => of({...edge, label: 'label'}));
-    this.edgeAddedCallback = edgeAddedCallback || (() => {});
-    this.nodeRemovedCallback = nodeRemovedCallback || (() => {});
-    this.edgeRemovedCallback = edgeRemovedCallback || (() => {});
-
-    this.connectors = new ConnectorsModel(this);
-    this.nodes = new NodesModel(this);
-    this.edges = new EdgesModel(this);
-
-    this.debouncer
-      .pipe(debounceTime(100))
-      .subscribe(() => this.modelChanged.emit());
-  }
-
-  public notifyModelChanged() {
-    this.debouncer.next();
-  }
-
-  public detectChanges() {
-    setTimeout(() => {
-      this.detectChangesSubject.next();
-    }, 0);
-  }
-
-  public selectObject(object: any) {
-    if (this.isEditable()) {
-      if (this.selectedObjects.indexOf(object) === -1) {
-        this.selectedObjects.push(object);
-      }
-    }
-  }
-
-  public deselectObject(object: any) {
-    if (this.isEditable()) {
-      const index = this.selectedObjects.indexOf(object);
-      if (index === -1) {
-        throw new Error('Tried to deselect an unselected object');
-      }
-      this.selectedObjects.splice(index, 1);
-    }
-  }
-
-  public toggleSelectedObject(object: any) {
-    if (this.isSelectedObject(object)) {
-      this.deselectObject(object);
-    } else {
-      this.selectObject(object);
-    }
-  }
-
-  public isSelectedObject(object: any): boolean {
-    return this.selectedObjects.indexOf(object) !== -1;
-  }
-
-  public selectAll() {
-    this.model.nodes.forEach(node => {
-      if (!node.readonly) {
-        this.nodes.select(node);
-      }
-    });
-    this.model.edges.forEach(edge => {
-      this.edges.select(edge);
-    });
-    this.detectChanges();
-  }
-
-  public deselectAll() {
-    this.selectedObjects.splice(0, this.selectedObjects.length);
-    this.detectChanges();
-  }
-
-  public isEditObject(object: any): boolean {
-    return this.selectedObjects.length === 1 &&
-      this.selectedObjects.indexOf(object) !== -1;
-  }
-
-  private inRectBox(x: number, y: number, rectBox: FcRectBox): boolean {
-    return x >= rectBox.left && x <= rectBox.right &&
-      y >= rectBox.top && y <= rectBox.bottom;
-  }
-
-  public getItemInfoAtPoint(x: number, y: number): FcItemInfo {
-    return {
-      node: this.getNodeAtPoint(x, y),
-      edge: this.getEdgeAtPoint(x, y)
-    };
-  }
-
-  public getNodeAtPoint(x: number, y: number): FcNode {
-    for (const node of this.model.nodes) {
-      const element = this.nodes.getHtmlElement(node.id);
-      const nodeElementBox = element.getBoundingClientRect();
-      if (x >= nodeElementBox.left && x <= nodeElementBox.right
-        && y >= nodeElementBox.top && y <= nodeElementBox.bottom) {
-        return node;
-      }
-    }
-    return null;
-  }
-
-  public getEdgeAtPoint(x: number, y: number): FcEdge {
-    const element = document.elementFromPoint(x, y);
-    const id = element.id;
-    let edgeIndex = -1;
-    if (id) {
-      if (id.startsWith('fc-edge-path-')) {
-        edgeIndex = Number(id.substring('fc-edge-path-'.length));
-      } else if (id.startsWith('fc-edge-label-')) {
-        edgeIndex = Number(id.substring('fc-edge-label-'.length));
-      }
-    }
-    if (edgeIndex > -1) {
-      return this.model.edges[edgeIndex];
-    }
-    return null;
-  }
-
-  public selectAllInRect(rectBox: FcRectBox) {
-    this.model.nodes.forEach((value) => {
-      const element = this.nodes.getHtmlElement(value.id);
-      const nodeElementBox = element.getBoundingClientRect();
-      if (!value.readonly) {
-        const x = nodeElementBox.left + nodeElementBox.width / 2;
-        const y = nodeElementBox.top + nodeElementBox.height / 2;
-        if (this.inRectBox(x, y, rectBox)) {
-          this.nodes.select(value);
-        } else {
-          if (this.nodes.isSelected(value)) {
-            this.nodes.deselect(value);
-          }
-        }
-      }
-    });
-    const canvasElementBox = this.canvasHtmlElement.getBoundingClientRect();
-    this.model.edges.forEach((value) => {
-      const start = this.edges.sourceCoord(value);
-      const end = this.edges.destCoord(value);
-      const x = (start.x + end.x) / 2 + canvasElementBox.left;
-      const y = (start.y + end.y) / 2 + canvasElementBox.top;
-      if (this.inRectBox(x, y, rectBox)) {
-        this.edges.select(value);
-      } else {
-        if (this.edges.isSelected(value)) {
-          this.edges.deselect(value);
-        }
-      }
-    });
-  }
-
-  public deleteSelected() {
-    const edgesToDelete = this.edges.getSelectedEdges();
-    edgesToDelete.forEach((edge) => {
-      this.edges.delete(edge);
-    });
-    const nodesToDelete = this.nodes.getSelectedNodes();
-    nodesToDelete.forEach((node) => {
-      this.nodes.delete(node);
-    });
-  }
-
-  public isEditable(): boolean {
-    return this.dropTargetId === undefined;
-  }
-
-  public isDropSource(): boolean {
-    return this.dropTargetId !== undefined;
-  }
-
-  public getDragImage(): HTMLImageElement {
-    if (!this.dragImage) {
-      this.dragImage = new Image();
-      this.dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-      this.dragImage.style.visibility = 'hidden';
-    }
-    return this.dragImage;
-  }
-}
-
-interface HtmlElementMap { [id: string]: HTMLElement; }
-
-interface ConnectorRectInfoMap { [id: string]: FcConnectorRectInfo; }
-
-abstract class AbstractFcModel<T> {
-
-  modelService: FcModelService;
-
-  protected constructor(modelService: FcModelService) {
-    this.modelService = modelService;
-  }
-
-  public select(object: T) {
-    this.modelService.selectObject(object);
-  }
-
-  public deselect(object: T) {
-    this.modelService.deselectObject(object);
-  }
-
-  public toggleSelected(object: T) {
-    this.modelService.toggleSelectedObject(object);
-  }
-
-  public isSelected(object: T): boolean {
-    return this.modelService.isSelectedObject(object);
-  }
-
-  public isEdit(object: T): boolean {
-    return this.modelService.isEditObject(object);
-  }
-}
-
-class ConnectorsModel extends AbstractFcModel<FcConnector> {
-
-  constructor(modelService: FcModelService) {
-    super(modelService);
-  }
-
-  public getConnector(connectorId: string): FcConnector {
-    const model = this.modelService.model;
-    for (const node of model.nodes) {
-      for (const connector of node.connectors) {
-        if (connector.id === connectorId) {
-          return connector;
-        }
-      }
-    }
-  }
-
-  public getConnectorRectInfo(connectorId: string): FcConnectorRectInfo {
-    return this.modelService.connectorsRectInfos[connectorId];
-  }
-
-  public setConnectorRectInfo(connectorId: string, connectorRectInfo: FcConnectorRectInfo) {
-    this.modelService.connectorsRectInfos[connectorId] = connectorRectInfo;
-    this.modelService.detectChanges();
-  }
-
-  private _getCoords(connectorId: string, centered?: boolean): FcCoords {
-    const connectorRectInfo = this.getConnectorRectInfo(connectorId);
-    const canvas = this.modelService.canvasHtmlElement;
-    if (connectorRectInfo === null || connectorRectInfo === undefined || canvas === null) {
-      return {x: 0, y: 0};
-    }
-    let x = connectorRectInfo.type === FlowchartConstants.leftConnectorType ?
-      connectorRectInfo.nodeRectInfo.left() : connectorRectInfo.nodeRectInfo.right();
-    let y = connectorRectInfo.nodeRectInfo.top() + connectorRectInfo.nodeRectInfo.height() / 2;
-    if (!centered) {
-      x -= connectorRectInfo.width / 2;
-      y -= connectorRectInfo.height / 2;
-    }
-    const coords: FcCoords = {
-      x: Math.round(x),
-      y: Math.round(y)
-    };
-    return coords;
-  }
-
-  public getCoords(connectorId: string): FcCoords {
-    return this._getCoords(connectorId, false);
-  }
-
-  public getCenteredCoord(connectorId: string): FcCoords {
-    return this._getCoords(connectorId, true);
-  }
-}
-
-class NodesModel extends AbstractFcModel<FcNode> {
-
-  constructor(modelService: FcModelService) {
-    super(modelService);
-  }
-
-  public getConnectorsByType(node: FcNode, type: string): Array<FcConnector> {
-    return node.connectors.filter((connector) => {
-      return connector.type === type;
-    });
-  }
-
-  private _addConnector(node: FcNode, connector: FcConnector) {
-    node.connectors.push(connector);
-    try {
-      this.modelService.modelValidation.validateNode(node);
-    } catch (error) {
-      node.connectors.splice(node.connectors.indexOf(connector), 1);
-      throw error;
-    }
-  }
-
-  public delete(node: FcNode) {
-    if (this.isSelected(node)) {
-      this.deselect(node);
-    }
-    const model = this.modelService.model;
-    const index = model.nodes.indexOf(node);
-    if (index === -1) {
-      if (node === undefined) {
-        throw new Error('Passed undefined');
-      }
-      throw new Error('Tried to delete not existing node');
-    }
-    const connectorIds = this.getConnectorIds(node);
-    for (let i = 0; i < model.edges.length; i++) {
-      const edge = model.edges[i];
-      if (connectorIds.indexOf(edge.source) !== -1 || connectorIds.indexOf(edge.destination) !== -1) {
-        this.modelService.edges.delete(edge);
-        i--;
-      }
-    }
-    model.nodes.splice(index, 1);
-    this.modelService.notifyModelChanged();
-    this.modelService.nodeRemovedCallback(node);
-  }
-
-  public getSelectedNodes(): Array<FcNode> {
-    const model = this.modelService.model;
-    return model.nodes.filter((node) => {
-      return this.modelService.nodes.isSelected(node);
-    });
-  }
-
-  public handleClicked(node: FcNode, ctrlKey?: boolean) {
-    if (ctrlKey) {
-      this.modelService.nodes.toggleSelected(node);
-    } else {
-      this.modelService.deselectAll();
-      this.modelService.nodes.select(node);
-    }
-  }
-
-  private _addNode(node: FcNode) {
-    const model = this.modelService.model;
-    try {
-      model.nodes.push(node);
-      this.modelService.modelValidation.validateNodes(model.nodes);
-    } catch (error) {
-      model.nodes.splice(model.nodes.indexOf(node), 1);
-      throw error;
-    }
-  }
-
-  public getConnectorIds(node: FcNode): Array<string> {
-    return node.connectors.map((connector) => {
-      return connector.id;
-    });
-  }
-
-  public getNodeByConnectorId(connectorId: string): FcNode {
-    const model = this.modelService.model;
-    for (const node of model.nodes) {
-      const connectorIds = this.getConnectorIds(node);
-      if (connectorIds.indexOf(connectorId) > -1) {
-        return node;
-      }
-    }
-    return null;
-  }
-
-  public getHtmlElement(nodeId: string): HTMLElement {
-    return this.modelService.nodesHtmlElements[nodeId];
-  }
-
-  public setHtmlElement(nodeId: string, element: HTMLElement) {
-    this.modelService.nodesHtmlElements[nodeId] = element;
-    this.modelService.detectChanges();
-  }
-
-}
-
-class EdgesModel extends AbstractFcModel<FcEdge> {
-
-  constructor(modelService: FcModelService) {
-    super(modelService);
-  }
-
-  public sourceCoord(edge: FcEdge): FcCoords {
-    return this.modelService.connectors.getCenteredCoord(edge.source);
-  }
-
-  public destCoord(edge: FcEdge): FcCoords {
-    return this.modelService.connectors.getCenteredCoord(edge.destination);
-  }
-
-  public delete(edge: FcEdge) {
-    const model = this.modelService.model;
-    const index = model.edges.indexOf(edge);
-    if (index === -1) {
-      throw new Error('Tried to delete not existing edge');
-    }
-    if (this.isSelected(edge)) {
-      this.deselect(edge);
-    }
-    model.edges.splice(index, 1);
-    this.modelService.notifyModelChanged();
-    this.modelService.edgeRemovedCallback(edge);
-  }
-
-  public getSelectedEdges(): Array<FcEdge> {
-    const model = this.modelService.model;
-    return model.edges.filter((edge) => {
-      return this.modelService.edges.isSelected(edge);
-    });
-  }
-
-  public handleEdgeMouseClick(edge: FcEdge, ctrlKey?: boolean) {
-    if (ctrlKey) {
-      this.modelService.edges.toggleSelected(edge);
-    } else {
-      this.modelService.deselectAll();
-      this.modelService.edges.select(edge);
-    }
-  }
-
-  public putEdge(edge: FcEdge) {
-    const model = this.modelService.model;
-    model.edges.push(edge);
-    this.modelService.notifyModelChanged();
-  }
-
-  public _addEdge(event: Event, sourceConnector: FcConnector, destConnector: FcConnector, label: string) {
-    this.modelService.modelValidation.validateConnector(sourceConnector);
-    this.modelService.modelValidation.validateConnector(destConnector);
-    const edge: FcEdge = {};
-    edge.source = sourceConnector.id;
-    edge.destination = destConnector.id;
-    edge.label = label;
-    const model = this.modelService.model;
-    this.modelService.modelValidation.validateEdges(model.edges.concat([edge]), model.nodes);
-    this.modelService.createEdge(event, edge).subscribe(
-      (created) => {
-        model.edges.push(created);
-        this.modelService.notifyModelChanged();
-        this.modelService.edgeAddedCallback(created);
-      }
-    );
-  }
-}
--- a/projects/ngx-flowchart/src/lib/modelvalidation.service.ts
+++ b/projects/ngx-flowchart/src/lib/modelvalidation.service.ts
@ -1,122 +0,0 @@
-import { Injectable } from '@angular/core';
-import { FcConnector, FcEdge, FcModel, FcNode, fcTopSort, ModelvalidationError } from './ngx-flowchart.models';
-
-@Injectable()
-export class FcModelValidationService {
-
-  constructor() { }
-
-  public validateModel(model: FcModel): FcModel {
-    this.validateNodes(model.nodes);
-    this._validateEdges(model.edges, model.nodes);
-    return model;
-  }
-
-  public validateNodes(nodes: Array<FcNode>): Array<FcNode> {
-    const ids: string[] = [];
-    nodes.forEach((node) => {
-      this.validateNode(node);
-      if (ids.indexOf(node.id) !== -1) {
-        throw new ModelvalidationError('Id not unique.');
-      }
-      ids.push(node.id);
-    });
-    const connectorIds: string[] = [];
-    nodes.forEach((node) => {
-      node.connectors.forEach((connector) => {
-        if (connectorIds.indexOf(connector.id) !== -1) {
-          throw new ModelvalidationError('Id not unique.');
-        }
-        connectorIds.push(connector.id);
-      });
-    });
-    return nodes;
-  }
-
-  public validateNode(node: FcNode): FcNode {
-    if (node.id === undefined) {
-      throw new ModelvalidationError('Id not valid.');
-    }
-    if (typeof node.name !== 'string') {
-      throw new ModelvalidationError('Name not valid.');
-    }
-    if (typeof node.x !== 'number' || node.x < 0 || Math.round(node.x) !== node.x) {
-      throw new ModelvalidationError('Coordinates not valid.');
-    }
-    if (typeof node.y !== 'number' || node.y < 0 || Math.round(node.y) !== node.y) {
-      throw new ModelvalidationError('Coordinates not valid.');
-    }
-    if (!Array.isArray(node.connectors)) {
-      throw new ModelvalidationError('Connectors not valid.');
-    }
-    node.connectors.forEach((connector) => {
-      this.validateConnector(connector);
-    });
-    return node;
-  }
-
-  private _validateEdges(edges: Array<FcEdge>, nodes: Array<FcNode>): Array<FcEdge> {
-    edges.forEach((edge) => {
-      this._validateEdge(edge, nodes);
-    });
-    edges.forEach((edge1, index1) => {
-      edges.forEach((edge2, index2) => {
-        if (index1 !== index2) {
-          if ((edge1.source === edge2.source && edge1.destination === edge2.destination) ||
-            (edge1.source === edge2.destination && edge1.destination === edge2.source)) {
-            throw new ModelvalidationError('Duplicated edge.');
-          }
-        }
-      });
-    });
-    if (fcTopSort({nodes, edges}) === null) {
-      throw new ModelvalidationError('Graph has a circle.');
-    }
-    return edges;
-  }
-
-  public validateEdges(edges: Array<FcEdge>, nodes: Array<FcNode>): Array<FcEdge> {
-    this.validateNodes(nodes);
-    return this._validateEdges(edges, nodes);
-  }
-
-  private _validateEdge(edge: FcEdge, nodes: Array<FcNode>): FcEdge {
-    if (edge.source === undefined) {
-      throw new ModelvalidationError('Source not valid.');
-    }
-    if (edge.destination === undefined) {
-      throw new ModelvalidationError('Destination not valid.');
-    }
-    if (edge.source === edge.destination) {
-      throw new ModelvalidationError('Edge with same source and destination connectors.');
-    }
-    const sourceNode = nodes.filter((node) => node.connectors.some((connector) => connector.id === edge.source))[0];
-    if (sourceNode === undefined) {
-      throw new ModelvalidationError('Source not valid.');
-    }
-    const destinationNode = nodes.filter((node) => node.connectors.some((connector) => connector.id === edge.destination))[0];
-    if (destinationNode === undefined) {
-      throw new ModelvalidationError('Destination not valid.');
-    }
-    if (sourceNode === destinationNode) {
-      throw new ModelvalidationError('Edge with same source and destination nodes.');
-    }
-    return edge;
-  }
-
-  public validateEdge(edge: FcEdge, nodes: Array<FcNode>): FcEdge {
-    this.validateNodes(nodes);
-    return this._validateEdge(edge, nodes);
-  }
-
-  public validateConnector(connector: FcConnector): FcConnector {
-    if (connector.id === undefined) {
-      throw new ModelvalidationError('Id not valid.');
-    }
-    if (connector.type === undefined || connector.type === null || typeof connector.type !== 'string') {
-      throw new ModelvalidationError('Type not valid.');
-    }
-    return connector;
-  }
-
-}
--- a/projects/ngx-flowchart/src/lib/mouseover.service.ts
+++ b/projects/ngx-flowchart/src/lib/mouseover.service.ts
@ -1,54 +0,0 @@
-import { FcConnector, FcEdge, FcNode } from './ngx-flowchart.models';
-
-export class FcMouseOverService {
-
-  mouseoverscope: MouseOverScope = {
-    connector: null,
-    edge: null,
-    node: null
-  };
-
-  private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
-
-  constructor(applyFunction: <T>(fn: (...args: any[]) => T) => T) {
-    this.applyFunction = applyFunction;
-  }
-
-  public nodeMouseOver(event: MouseEvent, node: FcNode) {
-    return this.applyFunction(() => {
-      this.mouseoverscope.node = node;
-    });
-  }
-
-  public nodeMouseOut(event: MouseEvent, node: FcNode) {
-    return this.applyFunction(() => {
-      this.mouseoverscope.node = null;
-    });
-  }
-
-  public connectorMouseEnter(event: MouseEvent, connector: FcConnector) {
-    return this.applyFunction(() => {
-      this.mouseoverscope.connector = connector;
-    });
-  }
-
-  public connectorMouseLeave(event: MouseEvent, connector: FcConnector) {
-    return this.applyFunction(() => {
-      this.mouseoverscope.connector = null;
-    });
-  }
-
-  public edgeMouseEnter(event: MouseEvent, edge: FcEdge) {
-    this.mouseoverscope.edge = edge;
-  }
-
-  public edgeMouseLeave(event: MouseEvent, edge: FcEdge) {
-    this.mouseoverscope.edge = null;
-  }
-}
-
-export interface MouseOverScope {
-  connector: FcConnector;
-  edge: FcEdge;
-  node: FcNode;
-}
--- a/projects/ngx-flowchart/src/lib/ngx-flowchart.component.html
+++ b/projects/ngx-flowchart/src/lib/ngx-flowchart.component.html
@ -1,95 +0,0 @@
-<div (click)="canvasClick($event)" class="fc-canvas-container">
-  <svg class="fc-canvas-svg">
-    <defs>
-      <marker class="fc-arrow-marker" [attr.id]="arrowDefId" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
-        <polygon points="-2,0 -5,5 5,0 -5,-5" stroke="gray" fill="gray" stroke-width="1px"/>
-      </marker>
-      <marker class="fc-arrow-marker-selected" [attr.id]="arrowDefIdSelected" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
-        <polygon points="-2,0 -5,5 5,0 -5,-5" stroke="red" fill="red" stroke-width="1px"/>
-      </marker>
-    </defs>
-    <g *ngFor="let edge of model.edges; let $index = index">
-      <path
-        [attr.id]="'fc-edge-path-'+$index"
-        (mousedown)="edgeMouseDown($event, edge)"
-        (click)="edgeClick($event, edge)"
-        (dblclick)="edgeDoubleClick($event, edge)"
-        (mouseover)="edgeMouseOver($event, edge)"
-        (mouseenter)="edgeMouseEnter($event, edge)"
-        (mouseleave)="edgeMouseLeave($event, edge)"
-        [attr.class]="(modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) ||
-                      edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass ||
-                      edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass ||
-                      flowchartConstants.edgeClass"
-        [attr.d]="getEdgeDAttribute(edge)"
-        [attr.marker-end]="'url(#' + (modelService.edges.isSelected(edge) ? arrowDefIdSelected : arrowDefId) + ')'">
-      </path>
-    </g>
-    <g *ngIf="dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging">
-      <path [attr.class]="flowchartConstants.edgeClass + ' ' + flowchartConstants.draggingClass"
-            [attr.d]="edgeDrawingService.getEdgeDAttribute(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2, edgeStyle)"></path>
-      <circle class="edge-endpoint" r="4"
-              [attr.cx]="edgeDraggingService.edgeDragging.dragPoint2.x"
-              [attr.cy]="edgeDraggingService.edgeDragging.dragPoint2.y">
-      </circle>
-    </g>
-    <g *ngIf="dragAnimation === flowchartConstants.dragAnimationShadow"
-       class="shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}"
-       style="display:none">
-      <path d=""></path>
-      <circle class="edge-endpoint" r="4"></circle>
-    </g>
-  </svg>
-  <ng-container *ngFor="let node of model.nodes">
-    <fc-node
-         [selected]="modelService.nodes.isSelected(node)"
-         [edit]="modelService.nodes.isEdit(node)"
-         [underMouse]="node === mouseoverService.mouseoverscope.node"
-         [node]="node"
-         [mouseOverConnector]="mouseoverService.mouseoverscope.connector"
-         [modelservice]="modelService"
-         [dragging]="nodeDraggingService.isDraggingNode(node)"
-         [callbacks]="callbacks"
-         [userNodeCallbacks]="userNodeCallbacks">
-    </fc-node>
-  </ng-container>
-  <div *ngIf="dragAnimation === flowchartConstants.dragAnimationRepaint && edgeDraggingService.edgeDragging.isDragging"
-       [attr.class]="'fc-noselect ' + flowchartConstants.edgeLabelClass"
-       [ngStyle]="{
-          top: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).y)+'px',
-          left: (edgeDrawingService.getEdgeCenter(edgeDraggingService.edgeDragging.dragPoint1, edgeDraggingService.edgeDragging.dragPoint2).x)+'px'
-       }">
-    <div class="fc-edge-label-text">
-      <span [attr.id]="'fc-edge-label-dragging'" *ngIf="edgeDraggingService.edgeDragging.dragLabel">{{edgeDraggingService.edgeDragging.dragLabel}}</span>
-    </div>
-  </div>
-  <div
-    (mousedown)="edgeMouseDown($event, edge)"
-    (click)="edgeClick($event, edge)"
-    (dblclick)="edgeDoubleClick($event, edge)"
-    (mouseover)="edgeMouseOver($event, edge)"
-    (mouseenter)="edgeMouseEnter($event, edge)"
-    (mouseleave)="edgeMouseLeave($event, edge)"
-    [attr.class]="'fc-noselect ' + ((modelService.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) ||
-                      (modelService.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) ||
-                      edge === mouseoverService.mouseoverscope.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass ||
-                      edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeLabelClass ||
-                      flowchartConstants.edgeLabelClass)"
-    [ngStyle]="{
-      top: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).y)+'px',
-      left: (edgeDrawingService.getEdgeCenter(modelService.edges.sourceCoord(edge), modelService.edges.destCoord(edge)).x)+'px'
-    }"
-    *ngFor="let edge of model.edges; let $index = index">
-    <div class="fc-edge-label-text">
-      <div *ngIf="modelService.isEditable()" class="fc-noselect fc-nodeedit" (click)="edgeEdit($event, edge)">
-        <i class="fa fa-pencil" aria-hidden="true"></i>
-      </div>
-      <div *ngIf="modelService.isEditable()" class="fc-noselect fc-nodedelete" (click)="edgeRemove($event, edge)">
-        &times;
-      </div>
-      <span [attr.id]="'fc-edge-label-'+$index" *ngIf="edge.label">{{edge.label}}</span>
-    </div>
-  </div>
-  <div id="select-rectangle" class="fc-select-rectangle" hidden>
-  </div>
-</div>
--- a/projects/ngx-flowchart/src/lib/ngx-flowchart.component.scss
+++ b/projects/ngx-flowchart/src/lib/ngx-flowchart.component.scss
@ -1,182 +0,0 @@
-:host {
-  display: block;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-size: 25px 25px;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, .1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, .1) 1px, transparent 1px);
-  background-color: transparent;
-  min-width: 100%;
-  min-height: 100%;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  .fc-canvas-container {
-    display: block;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    svg.fc-canvas-svg {
-      display: block;
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .fc-edge {
-    stroke: gray;
-    stroke-width: 4;
-    transition: stroke-width .2s;
-    fill: transparent;
-    &.fc-hover {
-      stroke: gray;
-      stroke-width: 6;
-      fill: transparent;
-    }
-    &.fc-selected {
-      stroke: red;
-      stroke-width: 4;
-      fill: transparent;
-    }
-    &.fc-active {
-      animation: dash 3s linear infinite;
-      stroke-dasharray: 20;
-    }
-    &.fc-dragging {
-      pointer-events: none;
-    }
-  }
-
-  .fc-arrow-marker polygon {
-    stroke: gray;
-    fill: gray;
-  }
-
-  .fc-arrow-marker-selected polygon {
-    stroke: red;
-    fill: red;
-  }
-
-  .edge-endpoint {
-    fill: gray;
-  }
-
-  .fc-noselect {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
-  }
-
-  .fc-edge-label {
-    position: absolute;
-    opacity: 0.8;
-    transition: transform .2s;
-    transform-origin: bottom left;
-    margin: 0 auto;
-    .fc-edge-label-text {
-      position: absolute;
-      -webkit-transform: translate(-50%, -50%);
-      transform: translate(-50%, -50%);
-      white-space: nowrap;
-      text-align: center;
-      font-size: 16px;
-      span {
-        cursor: default;
-        border: solid #ff3d00;
-        border-radius: 10px;
-        color: #ff3d00;
-        background-color: #fff;
-        padding: 3px 5px;
-      }
-    }
-    .fc-nodeedit {
-      top: -30px;
-      right: 14px;
-    }
-    .fc-nodedelete {
-      top: -30px;
-      right: -13px;
-    }
-    &.fc-hover {
-      transform: scale(1.25);
-    }
-    &.fc-selected,
-    &.fc-edit {
-      .fc-edge-label-text {
-        span {
-          border: solid red;
-          color: #fff;
-          font-weight: 600;
-          background-color: red;
-        }
-      }
-    }
-  }
-
-  .fc-select-rectangle {
-    border: 2px dashed #5262ff;
-    position: absolute;
-    background: rgba(20,125,255,0.1);
-    z-index: 2;
-  }
-}
-
-@keyframes dash {
-  from {
-    stroke-dashoffset: 500;
-  }
-}
-
-:host ::ng-deep {
-
-  .fc-nodeedit {
-    display: none;
-    font-size: 15px;
-  }
-
-  .fc-nodedelete {
-    display: none;
-    font-size: 18px;
-  }
-
-  .fc-edit {
-    .fc-nodeedit,
-    .fc-nodedelete {
-      display: block;
-      position: absolute;
-      border: solid 2px #eee;
-
-      border-radius: 50%;
-      font-weight: 600;
-      line-height: 20px;
-
-      height: 20px;
-      padding-top: 2px;
-      width: 22px;
-
-      background: #494949;
-      color: #fff;
-      text-align: center;
-      vertical-align: bottom;
-
-      cursor: pointer;
-    }
-    .fc-nodeedit {
-      top: -24px;
-      right: 16px;
-    }
-    .fc-nodedelete {
-      top: -24px;
-      right: -13px;
-    }
-  }
-}
--- a/projects/ngx-flowchart/src/lib/ngx-flowchart.component.ts
+++ b/projects/ngx-flowchart/src/lib/ngx-flowchart.component.ts
@ -1,320 +0,0 @@
-import {
-  DoCheck,
-  IterableDiffer,
-  OnInit
-} from '@angular/core';
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Input,
-  IterableDiffers,
-  NgZone,
-  Output
-} from '@angular/core';
-import { FcCallbacks, FcEdge, FcModel, FcNode, FlowchartConstants, UserCallbacks, UserNodeCallbacks } from './ngx-flowchart.models';
-import { FcModelService } from './model.service';
-import { FcModelValidationService } from './modelvalidation.service';
-import { FcNodeDraggingService } from './node-dragging.service';
-import { FcEdgeDrawingService } from './edge-drawing.service';
-import { FcEdgeDraggingService } from './edge-dragging.service';
-import { FcMouseOverService } from './mouseover.service';
-import { FcRectangleSelectService } from './rectangleselect.service';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
-
-@Component({
-  selector: 'fc-canvas',
-  templateUrl: './ngx-flowchart.component.html',
-  styleUrls: ['./ngx-flowchart.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class NgxFlowchartComponent implements OnInit, DoCheck {
-
-  @HostBinding('attr.class')
-  get canvasClass(): string {
-    return FlowchartConstants.canvasClass;
-  }
-
-  @Input()
-  model: FcModel;
-
-  @Input()
-  selectedObjects: any[];
-
-  @Input()
-  edgeStyle: string;
-
-  @Input()
-  userCallbacks: UserCallbacks;
-
-  @Input()
-  automaticResize: boolean;
-
-  @Input()
-  dragAnimation: string;
-
-  @Input()
-  nodeWidth: number;
-
-  @Input()
-  nodeHeight: number;
-
-  @Input()
-  dropTargetId: string;
-
-  @Output()
-  modelChanged = new EventEmitter();
-
-  private fitModelSizeByDefaultValue = true;
-  get fitModelSizeByDefault(): boolean {
-    return this.fitModelSizeByDefaultValue;
-  }
-  @Input()
-  set fitModelSizeByDefault(value: boolean) {
-    this.fitModelSizeByDefaultValue = coerceBooleanProperty(value);
-  }
-
-  callbacks: FcCallbacks;
-
-  userNodeCallbacks: UserNodeCallbacks;
-
-  modelService: FcModelService;
-  nodeDraggingService: FcNodeDraggingService;
-  edgeDraggingService: FcEdgeDraggingService;
-  mouseoverService: FcMouseOverService;
-  rectangleSelectService: FcRectangleSelectService;
-
-  arrowDefId: string;
-  arrowDefIdSelected: string;
-
-  flowchartConstants = FlowchartConstants;
-
-  private nodesDiffer: IterableDiffer<FcNode> = this.differs.find([]).create<FcNode>((index, item) => {
-    return item;
-  });
-
-  private edgesDiffer: IterableDiffer<FcEdge> = this.differs.find([]).create<FcEdge>((index, item) => {
-    return item;
-  });
-
-  private readonly detectChangesSubject = new Subject<any>();
-
-  constructor(private elementRef: ElementRef<HTMLElement>,
-              private differs: IterableDiffers,
-              private modelValidation: FcModelValidationService,
-              public edgeDrawingService: FcEdgeDrawingService,
-              private cd: ChangeDetectorRef,
-              private zone: NgZone) {
-    this.arrowDefId = 'arrow-' + Math.random();
-    this.arrowDefIdSelected = this.arrowDefId + '-selected';
-    this.detectChangesSubject
-      .pipe(debounceTime(50))
-      .subscribe(() => this.cd.detectChanges());
-  }
-
-  ngOnInit() {
-    if (!this.dropTargetId && this.edgeStyle !== FlowchartConstants.curvedStyle && this.edgeStyle !== FlowchartConstants.lineStyle) {
-      throw new Error('edgeStyle not supported.');
-    }
-    this.nodeHeight = this.nodeHeight || 200;
-    this.nodeWidth = this.nodeWidth || 200;
-    this.dragAnimation = this.dragAnimation || FlowchartConstants.dragAnimationRepaint;
-    this.userCallbacks = this.userCallbacks || {};
-    this.automaticResize = this.automaticResize || false;
-
-    for (const key of Object.keys(this.userCallbacks)) {
-      const callback = this.userCallbacks[key];
-      if (typeof callback !== 'function' && key !== 'nodeCallbacks') {
-        throw new Error('All callbacks should be functions.');
-      }
-    }
-
-    this.userNodeCallbacks = this.userCallbacks.nodeCallbacks;
-
-    const element = $(this.elementRef.nativeElement);
-
-    this.modelService = new FcModelService(this.modelValidation, this.model, this.modelChanged,
-      this.detectChangesSubject, this.selectedObjects,
-      this.userCallbacks.dropNode, this.userCallbacks.createEdge, this.userCallbacks.edgeAdded, this.userCallbacks.nodeRemoved,
-      this.userCallbacks.edgeRemoved, element[0], element[0].querySelector('svg'));
-
-    if (this.dropTargetId) {
-      this.modelService.dropTargetId = this.dropTargetId;
-    }
-
-    const applyFunction = this.zone.run.bind(this.zone);
-
-    this.nodeDraggingService = new FcNodeDraggingService(this.modelService, applyFunction,
-          this.automaticResize, this.dragAnimation);
-
-    this.edgeDraggingService = new FcEdgeDraggingService(this.modelValidation, this.edgeDrawingService, this.modelService,
-      this.model, this.userCallbacks.isValidEdge || null, applyFunction,
-      this.dragAnimation, this.edgeStyle);
-
-    this.mouseoverService = new FcMouseOverService(applyFunction);
-
-    this.rectangleSelectService = new FcRectangleSelectService(this.modelService,
-      element[0].querySelector('#select-rectangle'), applyFunction);
-
-    this.callbacks = {
-      nodeDragstart: this.nodeDraggingService.dragstart.bind(this.nodeDraggingService),
-      nodeDragend: this.nodeDraggingService.dragend.bind(this.nodeDraggingService),
-      edgeDragstart: this.edgeDraggingService.dragstart.bind(this.edgeDraggingService),
-      edgeDragend: this.edgeDraggingService.dragend.bind(this.edgeDraggingService),
-      edgeDrop: this.edgeDraggingService.drop.bind(this.edgeDraggingService),
-      edgeDragoverConnector: this.edgeDraggingService.dragoverConnector.bind(this.edgeDraggingService),
-      edgeDragoverMagnet: this.edgeDraggingService.dragoverMagnet.bind(this.edgeDraggingService),
-      edgeDragleaveMagnet: this.edgeDraggingService.dragleaveMagnet.bind(this.edgeDraggingService),
-      nodeMouseOver: this.mouseoverService.nodeMouseOver.bind(this.mouseoverService),
-      nodeMouseOut: this.mouseoverService.nodeMouseOut.bind(this.mouseoverService),
-      connectorMouseEnter: this.mouseoverService.connectorMouseEnter.bind(this.mouseoverService),
-      connectorMouseLeave: this.mouseoverService.connectorMouseLeave.bind(this.mouseoverService),
-      nodeClicked: (event, node) => {
-        this.modelService.nodes.handleClicked(node, event.ctrlKey);
-        event.stopPropagation();
-        event.preventDefault();
-      }
-    };
-    this.adjustCanvasSize(this.fitModelSizeByDefault);
-  }
-
-  ngDoCheck(): void {
-    if (this.model) {
-      const nodesChange = this.nodesDiffer.diff(this.model.nodes);
-      const edgesChange = this.edgesDiffer.diff(this.model.edges);
-      let nodesChanged = false;
-      let edgesChanged = false;
-      if (nodesChange !== null) {
-        nodesChange.forEachAddedItem(() => {
-          nodesChanged = true;
-        });
-        nodesChange.forEachRemovedItem(() => {
-          nodesChanged = true;
-        });
-      }
-      if (edgesChange !== null) {
-        edgesChange.forEachAddedItem(() => {
-          edgesChanged = true;
-        });
-        edgesChange.forEachRemovedItem(() => {
-          edgesChanged = true;
-        });
-      }
-      if (nodesChanged) {
-        this.adjustCanvasSize(this.fitModelSizeByDefault);
-      }
-      if (nodesChanged || edgesChanged) {
-        this.detectChangesSubject.next();
-      }
-    }
-  }
-
-  getEdgeDAttribute(edge: FcEdge): string {
-    return this.edgeDrawingService.getEdgeDAttribute(this.modelService.edges.sourceCoord(edge),
-      this.modelService.edges.destCoord(edge), this.edgeStyle);
-  }
-
-  public adjustCanvasSize(fit?: boolean) {
-    let maxX = 0;
-    let maxY = 0;
-    const element = $(this.elementRef.nativeElement);
-    this.model.nodes.forEach((node) => {
-      maxX = Math.max(node.x + this.nodeWidth, maxX);
-      maxY = Math.max(node.y + this.nodeHeight, maxY);
-    });
-    let width;
-    let height;
-    if (fit) {
-      width = maxX;
-      height = maxY;
-    } else {
-      width = Math.max(maxX, element.prop('offsetWidth'));
-      height = Math.max(maxY, element.prop('offsetHeight'));
-    }
-    element.css('width', width + 'px');
-    element.css('height', height + 'px');
-  }
-
-  canvasClick(event: MouseEvent) {}
-
-  edgeMouseDown(event: MouseEvent, edge: FcEdge) {
-    event.stopPropagation();
-  }
-
-  edgeClick(event: MouseEvent, edge: FcEdge) {
-    this.modelService.edges.handleEdgeMouseClick(edge, event.ctrlKey);
-    event.stopPropagation();
-    event.preventDefault();
-  }
-
-  edgeRemove(event: Event, edge: FcEdge) {
-    this.modelService.edges.delete(edge);
-    event.stopPropagation();
-    event.preventDefault();
-  }
-
-  edgeEdit(event: Event, edge: FcEdge) {
-    if (this.userCallbacks.edgeEdit) {
-      this.userCallbacks.edgeEdit(event, edge);
-    }
-  }
-
-  edgeDoubleClick(event: MouseEvent, edge: FcEdge) {
-    if (this.userCallbacks.edgeDoubleClick) {
-      this.userCallbacks.edgeDoubleClick(event, edge);
-    }
-  }
-
-  edgeMouseOver(event: MouseEvent, edge: FcEdge) {
-    if (this.userCallbacks.edgeMouseOver) {
-      this.userCallbacks.edgeMouseOver(event, edge);
-    }
-  }
-
-  edgeMouseEnter(event: MouseEvent, edge: FcEdge) {
-    this.mouseoverService.edgeMouseEnter(event, edge);
-  }
-
-  edgeMouseLeave(event: MouseEvent, edge: FcEdge) {
-    this.mouseoverService.edgeMouseLeave(event, edge);
-  }
-
-  @HostListener('dragover', ['$event'])
-  dragover(event: Event | any) {
-    this.nodeDraggingService.dragover(event);
-    this.edgeDraggingService.dragover(event);
-  }
-
-  @HostListener('drop', ['$event'])
-  drop(event: Event | any) {
-    if (event.preventDefault) {
-      event.preventDefault();
-    }
-    if (event.stopPropagation) {
-      event.stopPropagation();
-    }
-    this.nodeDraggingService.drop(event);
-  }
-
-  @HostListener('mousedown', ['$event'])
-  mousedown(event: MouseEvent) {
-    this.rectangleSelectService.mousedown(event);
-  }
-
-  @HostListener('mousemove', ['$event'])
-  mousemove(event: MouseEvent) {
-    this.rectangleSelectService.mousemove(event);
-  }
-
-  @HostListener('mouseup', ['$event'])
-  mouseup(event: MouseEvent) {
-    this.rectangleSelectService.mouseup(event);
-  }
-
-}
--- a/projects/ngx-flowchart/src/lib/ngx-flowchart.models.ts
+++ b/projects/ngx-flowchart/src/lib/ngx-flowchart.models.ts
@ -1,210 +0,0 @@
-import { Observable } from 'rxjs';
-import { InjectionToken, Type } from '@angular/core';
-import { FcNodeComponent } from './node.component';
-
-export const FC_NODE_COMPONENT_CONFIG = new InjectionToken<FcNodeComponentConfig>('fc-node.component.config');
-
-export interface FcNodeComponentConfig {
-  nodeComponentType: Type<FcNodeComponent>;
-}
-
-const htmlPrefix = 'fc';
-const leftConnectorType = 'leftConnector';
-const rightConnectorType = 'rightConnector';
-
-export const FlowchartConstants = {
-  htmlPrefix,
-  leftConnectorType,
-  rightConnectorType,
-  curvedStyle: 'curved',
-  lineStyle: 'line',
-  dragAnimationRepaint: 'repaint',
-  dragAnimationShadow: 'shadow',
-  canvasClass: htmlPrefix + '-canvas',
-  selectedClass: htmlPrefix + '-selected',
-  editClass: htmlPrefix + '-edit',
-  activeClass: htmlPrefix + '-active',
-  hoverClass: htmlPrefix + '-hover',
-  draggingClass: htmlPrefix + '-dragging',
-  edgeClass: htmlPrefix + '-edge',
-  edgeLabelClass: htmlPrefix + '-edge-label',
-  connectorClass: htmlPrefix + '-connector',
-  magnetClass: htmlPrefix + '-magnet',
-  nodeClass: htmlPrefix + '-node',
-  nodeOverlayClass: htmlPrefix + '-node-overlay',
-  leftConnectorClass: htmlPrefix + '-' + leftConnectorType + 's',
-  rightConnectorClass: htmlPrefix + '-' + rightConnectorType + 's',
-  canvasResizeThreshold: 200,
-  canvasResizeStep: 200
-};
-
-
-export interface FcCoords {
-  x?: number;
-  y?: number;
-}
-
-export interface FcRectBox {
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-}
-
-export interface FcConnector {
-  id: string;
-  type: string;
-}
-
-export interface FcNode extends FcCoords {
-  id: string;
-  name: string;
-  connectors: Array<FcConnector>;
-  readonly?: boolean;
-  [key: string]: any;
-}
-
-export interface FcNodeRectInfo {
-  width(): number;
-  height(): number;
-  top(): number;
-  left(): number;
-  right(): number;
-  bottom(): number;
-}
-
-export interface FcConnectorRectInfo {
-  type: string;
-  width: number;
-  height: number;
-  nodeRectInfo: FcNodeRectInfo;
-}
-
-export interface FcEdge {
-  label?: string;
-  source?: string;
-  destination?: string;
-  active?: boolean;
-}
-
-export interface FcItemInfo {
-  node?: FcNode;
-  edge?: FcEdge;
-}
-
-export interface FcModel {
-  nodes: Array<FcNode>;
-  edges: Array<FcEdge>;
-}
-
-export interface UserCallbacks {
-  dropNode?: (event: Event, node: FcNode) => void;
-  createEdge?: (event: Event, edge: FcEdge) => Observable<FcEdge>;
-  edgeAdded?: (edge: FcEdge) => void;
-  nodeRemoved?: (node: FcNode) => void;
-  edgeRemoved?: (edge: FcEdge) => void;
-  edgeDoubleClick?: (event: MouseEvent, edge: FcEdge) => void;
-  edgeMouseOver?: (event: MouseEvent, edge: FcEdge) => void;
-  isValidEdge?: (source: FcConnector, destination: FcConnector) => boolean;
-  edgeEdit?: (event: Event, edge: FcEdge) => void;
-  nodeCallbacks?: UserNodeCallbacks;
-}
-
-export interface UserNodeCallbacks {
-  nodeEdit?: (event: MouseEvent, node: FcNode) => void;
-  doubleClick?: (event: MouseEvent, node: FcNode) => void;
-  mouseDown?: (event: MouseEvent, node: FcNode) => void;
-  mouseEnter?: (event: MouseEvent, node: FcNode) => void;
-  mouseLeave?: (event: MouseEvent, node: FcNode) => void;
-}
-
-export interface FcCallbacks {
-  nodeDragstart: (event: Event | any, node: FcNode) => void;
-  nodeDragend: (event: Event | any) => void;
-  edgeDragstart: (event: Event | any, connector: FcConnector) => void;
-  edgeDragend: (event: Event | any) => void;
-  edgeDrop: (event: Event | any, targetConnector: FcConnector) => boolean;
-  edgeDragoverConnector: (event: Event | any, connector: FcConnector) => boolean;
-  edgeDragoverMagnet: (event: Event | any, connector: FcConnector) => boolean;
-  edgeDragleaveMagnet: (event: Event | any) => void;
-  nodeMouseOver: (event: MouseEvent, node: FcNode) => void;
-  nodeMouseOut: (event: MouseEvent, node: FcNode) => void;
-  connectorMouseEnter: (event: MouseEvent, connector: FcConnector) => void;
-  connectorMouseLeave: (event: MouseEvent, connector: FcConnector) => void;
-  nodeClicked: (event: MouseEvent, node: FcNode) => void;
-}
-
-export interface FcAdjacentList {
-  [id: string]: {
-    incoming: number;
-    outgoing: Array<string>;
-  };
-}
-
-class BaseError {
-  constructor() {
-    Error.apply(this, arguments);
-  }
-}
-
-Object.defineProperty(BaseError, 'prototype', new Error());
-
-export class ModelvalidationError extends BaseError {
-  constructor(public message: string) {
-    super();
-  }
-}
-
-export function fcTopSort(graph: FcModel): Array<string> | null {
-  const adjacentList: FcAdjacentList = {};
-  graph.nodes.forEach((node) => {
-    adjacentList[node.id] = {incoming: 0, outgoing: []};
-  });
-  graph.edges.forEach((edge) => {
-    const sourceNode = graph.nodes.filter((node) => {
-      return node.connectors.some((connector) => {
-        return connector.id === edge.source;
-      });
-    })[0];
-    const destinationNode = graph.nodes.filter((node) => {
-      return node.connectors.some((connector) => {
-        return connector.id === edge.destination;
-      });
-    })[0];
-    adjacentList[sourceNode.id].outgoing.push(destinationNode.id);
-    adjacentList[destinationNode.id].incoming++;
-  });
-  const orderedNodes: string[] = [];
-  const sourceNodes: string[] = [];
-  for (const node of Object.keys(adjacentList)) {
-    const edges = adjacentList[node];
-    if (edges.incoming === 0) {
-      sourceNodes.push(node);
-    }
-  }
-  while (sourceNodes.length !== 0) {
-    const sourceNode = sourceNodes.pop();
-    for (let i = 0; i < adjacentList[sourceNode].outgoing.length; i++) {
-      const destinationNode = adjacentList[sourceNode].outgoing[i];
-      adjacentList[destinationNode].incoming--;
-      if (adjacentList[destinationNode].incoming === 0) {
-        sourceNodes.push(destinationNode);
-      }
-      adjacentList[sourceNode].outgoing.splice(i, 1);
-      i--;
-    }
-    orderedNodes.push(sourceNode);
-  }
-  let hasEdges = false;
-  for (const node of Object.keys(adjacentList)) {
-    const edges = adjacentList[node];
-    if (edges.incoming !== 0) {
-      hasEdges = true;
-    }
-  }
-  if (hasEdges) {
-    return null;
-  } else {
-    return orderedNodes;
-  }
-}
--- a/projects/ngx-flowchart/src/lib/ngx-flowchart.module.ts
+++ b/projects/ngx-flowchart/src/lib/ngx-flowchart.module.ts
@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { NgxFlowchartComponent } from './ngx-flowchart.component';
-import { FcModelValidationService } from './modelvalidation.service';
-import { FcEdgeDrawingService } from './edge-drawing.service';
-import { CommonModule } from '@angular/common';
-import { FcMagnetDirective } from './magnet.directive';
-import { FcConnectorDirective } from './connector.directive';
-import { FcNodeContainerComponent } from './node.component';
-import { FC_NODE_COMPONENT_CONFIG } from './ngx-flowchart.models';
-import { DefaultFcNodeComponent } from './default-node.component';
-
-@NgModule({
-  entryComponents: [
-    DefaultFcNodeComponent
-  ],
-  declarations: [NgxFlowchartComponent,
-    FcMagnetDirective,
-    FcConnectorDirective,
-    FcNodeContainerComponent,
-    DefaultFcNodeComponent],
-  providers: [
-    FcModelValidationService,
-    FcEdgeDrawingService,
-    {
-      provide: FC_NODE_COMPONENT_CONFIG,
-      useValue: {
-        nodeComponentType: DefaultFcNodeComponent
-      }
-    }
-  ],
-  imports: [
-    CommonModule
-  ],
-  exports: [NgxFlowchartComponent,
-    FcMagnetDirective,
-    FcConnectorDirective,
-    DefaultFcNodeComponent]
-})
-export class NgxFlowchartModule { }
--- a/projects/ngx-flowchart/src/lib/node-dragging.service.ts
+++ b/projects/ngx-flowchart/src/lib/node-dragging.service.ts
@ -1,341 +0,0 @@
-import { FcModelService } from './model.service';
-import { FcCoords, FcNode, FlowchartConstants } from './ngx-flowchart.models';
-
-const nodeDropScope: NodeDropScope = {
-  dropElement: null
-};
-
-export class FcNodeDraggingService {
-
-  nodeDraggingScope: NodeDraggingScope = {
-    shadowDragStarted: false,
-    dropElement: null,
-    draggedNodes: [],
-    shadowElements: []
-  };
-
-  private dragOffsets: FcCoords[] = [];
-  private draggedElements: HTMLElement[] = [];
-
-  private destinationHtmlElements: HTMLElement[] = [];
-  private oldDisplayStyles: string[] = [];
-
-  private readonly modelService: FcModelService;
-  private readonly automaticResize: boolean;
-  private readonly dragAnimation: string;
-  private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
-
-  constructor(modelService: FcModelService,
-              applyFunction: <T>(fn: (...args: any[]) => T) => T,
-              automaticResize: boolean, dragAnimation: string) {
-    this.modelService = modelService;
-    this.automaticResize = automaticResize;
-    this.dragAnimation = dragAnimation;
-    this.applyFunction = applyFunction;
-  }
-
-  private getCoordinate(coordinate: number, max: number): number {
-    coordinate = Math.max(coordinate, 0);
-    coordinate = Math.min(coordinate, max);
-    return coordinate;
-  }
-
-  private getXCoordinate(x: number): number {
-    return this.getCoordinate(x, this.modelService.canvasHtmlElement.offsetWidth);
-  }
-
-  private getYCoordinate(y: number): number {
-    return this.getCoordinate(y, this.modelService.canvasHtmlElement.offsetHeight);
-  }
-
-  private resizeCanvas(draggedNode: FcNode, nodeElement: HTMLElement) {
-    if (this.automaticResize && !this.modelService.isDropSource()) {
-      const canvasElement = this.modelService.canvasHtmlElement;
-      if (canvasElement.offsetWidth < draggedNode.x + nodeElement.offsetWidth + FlowchartConstants.canvasResizeThreshold) {
-        canvasElement.style.width = canvasElement.offsetWidth + FlowchartConstants.canvasResizeStep + 'px';
-      }
-      if (canvasElement.offsetHeight < draggedNode.y + nodeElement.offsetHeight + FlowchartConstants.canvasResizeThreshold) {
-        canvasElement.style.height = canvasElement.offsetHeight + FlowchartConstants.canvasResizeStep + 'px';
-      }
-    }
-  }
-
-  public isDraggingNode(node: FcNode): boolean {
-    return this.nodeDraggingScope.draggedNodes.includes(node);
-  }
-
-  public dragstart(event: Event | any, node: FcNode) {
-    if (node.readonly) {
-      return;
-    }
-    this.dragOffsets.length = 0;
-    this.draggedElements.length = 0;
-    this.nodeDraggingScope.draggedNodes.length = 0;
-    this.nodeDraggingScope.shadowElements.length = 0;
-    this.destinationHtmlElements.length = 0;
-    this.oldDisplayStyles.length = 0;
-    const elements: Array<JQuery<HTMLElement>> = [];
-    const nodes: Array<FcNode> = [];
-    if (this.modelService.nodes.isSelected(node)) {
-      const selectedNodes = this.modelService.nodes.getSelectedNodes();
-      for (const selectedNode of selectedNodes) {
-        const element = $(this.modelService.nodes.getHtmlElement(selectedNode.id));
-        elements.push(element);
-        nodes.push(selectedNode);
-      }
-    } else {
-      elements.push($(event.target as HTMLElement));
-      nodes.push(node);
-    }
-    const offsetsX: number[] = [];
-    const offsetsY: number[] = [];
-    for (const element of elements) {
-      offsetsX.push(parseInt(element.css('left'), 10) - event.clientX);
-      offsetsY.push(parseInt(element.css('top'), 10) - event.clientY);
-    }
-    const originalEvent: Event | any = (event as any).originalEvent || event;
-    if (this.modelService.isDropSource()) {
-      if (nodeDropScope.dropElement) {
-        nodeDropScope.dropElement.parentNode.removeChild(nodeDropScope.dropElement);
-        nodeDropScope.dropElement = null;
-      }
-      nodeDropScope.dropElement = elements[0][0].cloneNode(true) as NodeDropElement;
-      const offset = $(this.modelService.canvasHtmlElement).offset();
-      nodeDropScope.dropElement.offsetInfo = {
-        offsetX: Math.round(offsetsX[0] + offset.left),
-        offsetY: Math.round(offsetsY[0] + offset.top)
-      };
-      nodeDropScope.dropElement.style.position = 'absolute';
-      nodeDropScope.dropElement.style.pointerEvents = 'none';
-      nodeDropScope.dropElement.style.zIndex = '9999';
-
-      document.body.appendChild(nodeDropScope.dropElement);
-      const dropNodeInfo: DropNodeInfo = {
-        node,
-        dropTargetId: this.modelService.dropTargetId,
-        offsetX: Math.round(offsetsX[0] + offset.left),
-        offsetY: Math.round(offsetsY[0] + offset.top)
-      };
-      originalEvent.dataTransfer.setData('text', JSON.stringify(dropNodeInfo));
-
-      if (originalEvent.dataTransfer.setDragImage) {
-        originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
-      } else {
-        const target: HTMLElement = event.target as HTMLElement;
-        const cloneNode = target.cloneNode(true);
-        target.parentNode.insertBefore(cloneNode, target);
-        target.style.visibility = 'collapse';
-        setTimeout(() => {
-          target.parentNode.removeChild(cloneNode);
-          target.style.visibility = 'visible';
-        }, 0);
-      }
-      return;
-    }
-    this.nodeDraggingScope.draggedNodes = nodes;
-    for (let i = 0; i < elements.length; i++) {
-      this.draggedElements.push(elements[i][0]);
-      this.dragOffsets.push(
-        {
-          x: offsetsX[i],
-          y: offsetsY[i]
-        }
-      );
-    }
-
-    if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-      for (let i = 0; i < this.draggedElements.length; i++) {
-        const dragOffset = this.dragOffsets[i];
-        const draggedNode = this.nodeDraggingScope.draggedNodes[i];
-        const shadowElement = $(`<div style="position: absolute; opacity: 0.7; ` +
-                                `top: ${this.getYCoordinate(dragOffset.y + event.clientY)}px; ` +
-                                `left: ${this.getXCoordinate(dragOffset.x + event.clientX)}px; ">` +
-                                `<div class="innerNode"><p style="padding: 0 15px;">${draggedNode.name}</p> </div></div>`);
-        const targetInnerNode = $(this.draggedElements[i]).children()[0];
-        shadowElement.children()[0].style.backgroundColor = targetInnerNode.style.backgroundColor;
-        this.nodeDraggingScope.shadowElements.push(shadowElement);
-        this.modelService.canvasHtmlElement.appendChild(this.nodeDraggingScope.shadowElements[i][0]);
-      }
-    }
-    originalEvent.dataTransfer.setData('text', 'Just to support firefox');
-    if (originalEvent.dataTransfer.setDragImage) {
-      originalEvent.dataTransfer.setDragImage(this.modelService.getDragImage(), 0, 0);
-    } else {
-      this.draggedElements.forEach((draggedElement) => {
-        const cloneNode = draggedElement.cloneNode(true);
-        draggedElement.parentNode.insertBefore(cloneNode, draggedElement);
-        draggedElement.style.visibility = 'collapse';
-        setTimeout(() => {
-          draggedElement.parentNode.removeChild(cloneNode);
-          draggedElement.style.visibility = 'visible';
-        }, 0);
-      });
-      if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-        for (let i = 0; i < this.draggedElements.length; i++) {
-          this.destinationHtmlElements.push(this.draggedElements[i]);
-          this.oldDisplayStyles.push(this.destinationHtmlElements[i].style.display);
-          this.destinationHtmlElements[i].style.display = 'none';
-        }
-        this.nodeDraggingScope.shadowDragStarted = true;
-      }
-    }
-  }
-
-  public drop(event: Event | any): boolean {
-    if (this.modelService.isDropSource()) {
-      event.preventDefault();
-      return false;
-    }
-    let dropNode: FcNode = null;
-    const originalEvent: Event | any = (event as any).originalEvent || event;
-    const infoText = originalEvent.dataTransfer.getData('text');
-    if (infoText) {
-      let dropNodeInfo: DropNodeInfo = null;
-      try {
-        dropNodeInfo = JSON.parse(infoText);
-      } catch (e) {}
-      if (dropNodeInfo && dropNodeInfo.dropTargetId) {
-        if (this.modelService.canvasHtmlElement.id &&
-          this.modelService.canvasHtmlElement.id === dropNodeInfo.dropTargetId) {
-          dropNode = dropNodeInfo.node;
-          const offset = $(this.modelService.canvasHtmlElement).offset();
-          const x = event.clientX - offset.left;
-          const y = event.clientY - offset.top;
-          dropNode.x = Math.round(this.getXCoordinate(dropNodeInfo.offsetX + x));
-          dropNode.y = Math.round(this.getYCoordinate(dropNodeInfo.offsetY + y));
-        }
-      }
-    }
-    if (dropNode) {
-      this.modelService.dropNode(event, dropNode);
-      event.preventDefault();
-      return false;
-    } else if (this.nodeDraggingScope.draggedNodes.length) {
-      return this.applyFunction(() => {
-        for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
-          const draggedNode = this.nodeDraggingScope.draggedNodes[i];
-          const dragOffset = this.dragOffsets[i];
-          draggedNode.x = Math.round(this.getXCoordinate(dragOffset.x + event.clientX));
-          draggedNode.y = Math.round(this.getYCoordinate(dragOffset.y + event.clientY));
-        }
-        event.preventDefault();
-        this.modelService.notifyModelChanged();
-        return false;
-      });
-    }
-  }
-
-  public dragover(event: Event | any) {
-    if (nodeDropScope.dropElement) {
-      const offsetInfo = nodeDropScope.dropElement.offsetInfo;
-      nodeDropScope.dropElement.style.left = (offsetInfo.offsetX + event.clientX) + 'px';
-      nodeDropScope.dropElement.style.top = (offsetInfo.offsetY + event.clientY) + 'px';
-      if (this.nodeDraggingScope.shadowDragStarted) {
-        this.applyFunction(() => {
-          this.destinationHtmlElements[0].style.display = this.oldDisplayStyles[0];
-          this.nodeDraggingScope.shadowDragStarted = false;
-        });
-      }
-      event.preventDefault();
-      return;
-    }
-    if (this.modelService.isDropSource()) {
-      event.preventDefault();
-      return;
-    }
-    if (!this.nodeDraggingScope.draggedNodes.length) {
-      event.preventDefault();
-      return;
-    }
-    if (this.dragAnimation === FlowchartConstants.dragAnimationRepaint) {
-      if (this.nodeDraggingScope.draggedNodes.length) {
-        return this.applyFunction(() => {
-          for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
-            const draggedNode = this.nodeDraggingScope.draggedNodes[i];
-            const dragOffset = this.dragOffsets[i];
-            draggedNode.x = this.getXCoordinate(dragOffset.x + event.clientX);
-            draggedNode.y = this.getYCoordinate(dragOffset.y + event.clientY);
-            this.resizeCanvas(draggedNode, this.draggedElements[i]);
-          }
-          event.preventDefault();
-          this.modelService.notifyModelChanged();
-          return false;
-        });
-      }
-    } else if (this.dragAnimation === FlowchartConstants.dragAnimationShadow) {
-      if (this.nodeDraggingScope.draggedNodes.length) {
-        if (this.nodeDraggingScope.shadowDragStarted) {
-          this.applyFunction(() => {
-            for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
-              this.destinationHtmlElements[i].style.display = this.oldDisplayStyles[i];
-            }
-            this.nodeDraggingScope.shadowDragStarted = false;
-          });
-        }
-        for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
-          const draggedNode = this.nodeDraggingScope.draggedNodes[i];
-          const dragOffset = this.dragOffsets[i];
-          this.nodeDraggingScope.shadowElements[i].css('left', this.getXCoordinate(dragOffset.x + event.clientX) + 'px');
-          this.nodeDraggingScope.shadowElements[i].css('top', this.getYCoordinate(dragOffset.y + event.clientY) + 'px');
-          this.resizeCanvas(draggedNode, this.draggedElements[i]);
-        }
-        event.preventDefault();
-      }
-    }
-  }
-
-  public dragend(event: Event | any) {
-    this.applyFunction(() => {
-      if (nodeDropScope.dropElement) {
-        nodeDropScope.dropElement.parentNode.removeChild(nodeDropScope.dropElement);
-        nodeDropScope.dropElement = null;
-      }
-      if (this.modelService.isDropSource()) {
-        return;
-      }
-      if (this.nodeDraggingScope.shadowElements.length) {
-        for (let i = 0; i < this.nodeDraggingScope.draggedNodes.length; i++) {
-          const draggedNode = this.nodeDraggingScope.draggedNodes[i];
-          const shadowElement = this.nodeDraggingScope.shadowElements[i];
-          draggedNode.x = parseInt(shadowElement.css('left').replace('px', ''), 10);
-          draggedNode.y = parseInt(shadowElement.css('top').replace('px', ''), 10);
-          this.modelService.canvasHtmlElement.removeChild(shadowElement[0]);
-        }
-        this.nodeDraggingScope.shadowElements.length = 0;
-        this.modelService.notifyModelChanged();
-      }
-
-      if (this.nodeDraggingScope.draggedNodes.length) {
-        this.nodeDraggingScope.draggedNodes.length = 0;
-        this.draggedElements.length = 0;
-        this.dragOffsets.length = 0;
-      }
-    });
-  }
-
-}
-
-export interface NodeDraggingScope {
-  draggedNodes: Array<FcNode>;
-  shadowElements: Array<JQuery<HTMLElement>>;
-  shadowDragStarted: boolean;
-  dropElement: HTMLElement;
-}
-
-export interface NodeDropElement extends HTMLElement {
-  offsetInfo?: {
-    offsetX: number;
-    offsetY: number;
-  };
-}
-
-export interface NodeDropScope {
-  dropElement: NodeDropElement;
-}
-
-export interface DropNodeInfo {
-  node: FcNode;
-  dropTargetId: string;
-  offsetX: number;
-  offsetY: number;
-}
--- a/projects/ngx-flowchart/src/lib/node.component.scss
+++ b/projects/ngx-flowchart/src/lib/node.component.scss
@ -1,57 +0,0 @@
-:host {
-  position: absolute;
-  z-index: 1;
-  &.fc-dragging {
-    z-index: 10;
-  }
-}
-
-:host ::ng-deep {
-  .fc-leftConnectors, .fc-rightConnectors {
-    position: absolute;
-    top: 0;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-
-    z-index: -10;
-    .fc-magnet {
-      align-items: center;
-    }
-  }
-
-  .fc-leftConnectors {
-    left: -20px;
-  }
-
-  .fc-rightConnectors {
-    right: -20px;
-  }
-
-  .fc-magnet {
-    display: flex;
-    flex-grow: 1;
-    height: 60px;
-
-    justify-content: center;
-  }
-
-  .fc-connector {
-    width: 18px;
-    height: 18px;
-
-    border: 10px solid transparent;
-    -moz-background-clip: padding; /* Firefox 3.6 */
-    -webkit-background-clip: padding; /* Safari 4? Chrome 6? */
-    background-clip: padding-box;
-    border-radius: 50% 50%;
-    background-color: #F7A789;
-    color: #fff;
-    pointer-events: all;
-
-    &.fc-hover {
-      background-color: #000;
-    }
-  }
-}
--- a/projects/ngx-flowchart/src/lib/node.component.ts
+++ b/projects/ngx-flowchart/src/lib/node.component.ts
@ -1,266 +0,0 @@
-import { AfterViewInit, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import {
-  Component,
-  ComponentFactoryResolver,
-  Directive,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
-import {
-  FC_NODE_COMPONENT_CONFIG,
-  FcCallbacks,
-  FcConnector,
-  FcNode,
-  FcNodeComponentConfig,
-  FcNodeRectInfo,
-  FlowchartConstants,
-  UserNodeCallbacks
-} from './ngx-flowchart.models';
-import { FcModelService } from './model.service';
-
-@Component({
-  selector: 'fc-node',
-  template: '<ng-template #nodeContent></ng-template>',
-  styleUrls: ['./node.component.scss']
-})
-export class FcNodeContainerComponent implements OnInit, AfterViewInit, OnChanges {
-
-  @Input()
-  callbacks: FcCallbacks;
-
-  @Input()
-  userNodeCallbacks: UserNodeCallbacks;
-
-  @Input()
-  node: FcNode;
-
-  @Input()
-  selected: boolean;
-
-  @Input()
-  edit: boolean;
-
-  @Input()
-  underMouse: boolean;
-
-  @Input()
-  mouseOverConnector: FcConnector;
-
-  @Input()
-  modelservice: FcModelService;
-
-  @Input()
-  dragging: boolean;
-
-  @HostBinding('attr.id')
-  get nodeId(): string {
-    return this.node.id;
-  }
-
-  @HostBinding('style.top')
-  get top(): string {
-    return this.node.y + 'px';
-  }
-
-  @HostBinding('style.left')
-  get left(): string {
-    return this.node.x + 'px';
-  }
-
-  nodeComponent: FcNodeComponent;
-
-  @ViewChild('nodeContent', {read: ViewContainerRef, static: true}) nodeContentContainer: ViewContainerRef;
-
-  constructor(@Inject(FC_NODE_COMPONENT_CONFIG) private nodeComponentConfig: FcNodeComponentConfig,
-              private elementRef: ElementRef<HTMLElement>,
-              private componentFactoryResolver: ComponentFactoryResolver) {
-  }
-
-  ngOnInit(): void {
-    if (!this.userNodeCallbacks) {
-      this.userNodeCallbacks = {};
-    }
-    this.userNodeCallbacks.nodeEdit = this.userNodeCallbacks.nodeEdit || (() => {});
-    this.userNodeCallbacks.doubleClick = this.userNodeCallbacks.doubleClick || (() => {});
-    this.userNodeCallbacks.mouseDown = this.userNodeCallbacks.mouseDown || (() => {});
-    this.userNodeCallbacks.mouseEnter = this.userNodeCallbacks.mouseEnter || (() => {});
-    this.userNodeCallbacks.mouseLeave = this.userNodeCallbacks.mouseLeave || (() => {});
-
-    const element = $(this.elementRef.nativeElement);
-    element.addClass(FlowchartConstants.nodeClass);
-    if (!this.node.readonly) {
-      element.attr('draggable', 'true');
-    }
-    this.updateNodeClass();
-    this.modelservice.nodes.setHtmlElement(this.node.id, element[0]);
-    this.nodeContentContainer.clear();
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.nodeComponentConfig.nodeComponentType);
-    const componentRef = this.nodeContentContainer.createComponent(componentFactory);
-    this.nodeComponent = componentRef.instance;
-    this.nodeComponent.callbacks = this.callbacks;
-    this.nodeComponent.userNodeCallbacks = this.userNodeCallbacks;
-    this.nodeComponent.node = this.node;
-    this.nodeComponent.modelservice = this.modelservice;
-    this.updateNodeComponent();
-    this.nodeComponent.width = this.elementRef.nativeElement.offsetWidth;
-    this.nodeComponent.height = this.elementRef.nativeElement.offsetHeight;
-  }
-
-  ngAfterViewInit(): void {
-    this.nodeComponent.width = this.elementRef.nativeElement.offsetWidth;
-    this.nodeComponent.height = this.elementRef.nativeElement.offsetHeight;
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    let updateNode = false;
-    for (const propName of Object.keys(changes)) {
-      const change = changes[propName];
-      if (!change.firstChange && change.currentValue !== change.previousValue) {
-        if (['selected', 'edit', 'underMouse', 'mouseOverConnector', 'dragging'].includes(propName)) {
-          updateNode = true;
-        }
-      }
-    }
-    if (updateNode) {
-      this.updateNodeClass();
-      this.updateNodeComponent();
-    }
-  }
-
-  private updateNodeClass() {
-    const element = $(this.elementRef.nativeElement);
-    this.toggleClass(element, FlowchartConstants.selectedClass, this.selected);
-    this.toggleClass(element, FlowchartConstants.editClass, this.edit);
-    this.toggleClass(element, FlowchartConstants.hoverClass, this.underMouse);
-    this.toggleClass(element, FlowchartConstants.draggingClass, this.dragging);
-  }
-
-  private updateNodeComponent() {
-    this.nodeComponent.selected = this.selected;
-    this.nodeComponent.edit = this.edit;
-    this.nodeComponent.underMouse = this.underMouse;
-    this.nodeComponent.mouseOverConnector = this.mouseOverConnector;
-    this.nodeComponent.dragging = this.dragging;
-  }
-
-  private toggleClass(element: JQuery<HTMLElement>, clazz: string, set: boolean) {
-    if (set) {
-      element.addClass(clazz);
-    } else {
-      element.removeClass(clazz);
-    }
-  }
-
-  @HostListener('mousedown', ['$event'])
-  mousedown(event: MouseEvent) {
-    event.stopPropagation();
-  }
-
-  @HostListener('dragstart', ['$event'])
-  dragstart(event: Event | any) {
-    if (!this.node.readonly) {
-      this.callbacks.nodeDragstart(event, this.node);
-    }
-  }
-
-  @HostListener('dragend', ['$event'])
-  dragend(event: Event | any) {
-    if (!this.node.readonly) {
-      this.callbacks.nodeDragend(event);
-    }
-  }
-
-  @HostListener('click', ['$event'])
-  click(event: MouseEvent) {
-    if (!this.node.readonly) {
-      this.callbacks.nodeClicked(event, this.node);
-    }
-  }
-
-  @HostListener('mouseover', ['$event'])
-  mouseover(event: MouseEvent) {
-    if (!this.node.readonly) {
-      this.callbacks.nodeMouseOver(event, this.node);
-    }
-  }
-
-  @HostListener('mouseout', ['$event'])
-  mouseout(event: MouseEvent) {
-    if (!this.node.readonly) {
-      this.callbacks.nodeMouseOut(event, this.node);
-    }
-  }
-
-}
-
-@Directive()
-export abstract class FcNodeComponent implements OnInit {
-
-  @Input()
-  callbacks: FcCallbacks;
-
-  @Input()
-  userNodeCallbacks: UserNodeCallbacks;
-
-  @Input()
-  node: FcNode;
-
-  @Input()
-  selected: boolean;
-
-  @Input()
-  edit: boolean;
-
-  @Input()
-  underMouse: boolean;
-
-  @Input()
-  mouseOverConnector: FcConnector;
-
-  @Input()
-  modelservice: FcModelService;
-
-  @Input()
-  dragging: boolean;
-
-  flowchartConstants = FlowchartConstants;
-
-  width: number;
-
-  height: number;
-
-  nodeRectInfo: FcNodeRectInfo = {
-    top: () => {
-      return this.node.y;
-    },
-
-    left: () => {
-      return this.node.x;
-    },
-
-    bottom: () => {
-      return this.node.y + this.height;
-    },
-
-    right: () => {
-      return this.node.x + this.width;
-    },
-
-    width: () => {
-      return this.width;
-    },
-
-    height: () => {
-      return this.height;
-    }
-  };
-
-  ngOnInit(): void {
-  }
-
-}
--- a/projects/ngx-flowchart/src/lib/rectangleselect.service.ts
+++ b/projects/ngx-flowchart/src/lib/rectangleselect.service.ts
@ -1,114 +0,0 @@
-import { FcModelService } from './model.service';
-import { FcRectBox } from './ngx-flowchart.models';
-import scrollparent from './scrollparent';
-
-interface Rectangle {
-  x1: number;
-  x2: number;
-  y1: number;
-  y2: number;
-}
-
-export class FcRectangleSelectService {
-
-  private readonly selectRect: Rectangle = {
-    x1: 0,
-    x2: 0,
-    y1: 0,
-    y2: 0
-  };
-
-  private readonly modelService: FcModelService;
-  private readonly selectElement: HTMLElement;
-  private readonly $canvasElement: JQuery<HTMLElement>;
-  private readonly $scrollParent: JQuery<HTMLElement>;
-  private readonly applyFunction: <T>(fn: (...args: any[]) => T) => T;
-
-  constructor(modelService: FcModelService,
-              selectElement: HTMLElement,
-              applyFunction: <T>(fn: (...args: any[]) => T) => T) {
-    this.modelService = modelService;
-    this.selectElement = selectElement;
-    this.$canvasElement = $(this.modelService.canvasHtmlElement);
-    this.$scrollParent = $(scrollparent(this.modelService.canvasHtmlElement));
-    this.applyFunction = applyFunction;
-  }
-
-  public mousedown(e: MouseEvent) {
-    if (this.modelService.isEditable() && !e.ctrlKey && !e.metaKey && e.button === 0
-      && this.selectElement.hidden) {
-      this.selectElement.hidden = false;
-      const offset = this.$canvasElement.offset();
-      this.selectRect.x1 = Math.round(e.pageX - offset.left);
-      this.selectRect.y1 = Math.round(e.pageY - offset.top);
-      this.selectRect.x2 = this.selectRect.x1;
-      this.selectRect.y2 = this.selectRect.y1;
-      this.updateSelectRect();
-    }
-  }
-
-  public mousemove(e: MouseEvent) {
-    if (this.modelService.isEditable() && !e.ctrlKey && !e.metaKey && e.button === 0
-      && !this.selectElement.hidden) {
-      const offset = this.$canvasElement.offset();
-      this.selectRect.x2 = Math.round(e.pageX - offset.left);
-      this.selectRect.y2 = Math.round(e.pageY - offset.top);
-      this.updateScroll(offset);
-      this.updateSelectRect();
-    }
-  }
-
-  private updateScroll(offset: JQuery.Coordinates) {
-    const rect = this.$scrollParent[0].getBoundingClientRect();
-    const bottom = rect.bottom - offset.top;
-    const right = rect.right - offset.left;
-    const top = rect.top - offset.top;
-    const left = rect.left - offset.left;
-    if (this.selectRect.y2 - top < 25) {
-      const topScroll = 25 - (this.selectRect.y2 - top);
-      const scroll = this.$scrollParent.scrollTop();
-      this.$scrollParent.scrollTop(scroll - topScroll);
-    } else if (bottom - this.selectRect.y2 < 40) {
-      const bottomScroll = 40 - (bottom - this.selectRect.y2);
-      const scroll = this.$scrollParent.scrollTop();
-      this.$scrollParent.scrollTop(scroll + bottomScroll);
-    }
-    if (this.selectRect.x2 - left < 25) {
-      const leftScroll = 25 - (this.selectRect.x2 - left);
-      const scroll = this.$scrollParent.scrollLeft();
-      this.$scrollParent.scrollLeft(scroll - leftScroll);
-    } else if (right - this.selectRect.x2 < 40) {
-      const rightScroll = 40 - (right - this.selectRect.x2);
-      const scroll = this.$scrollParent.scrollLeft();
-      this.$scrollParent.scrollLeft(scroll + rightScroll);
-    }
-  }
-
-  public mouseup(e: MouseEvent) {
-    if (this.modelService.isEditable() && !e.ctrlKey && !e.metaKey && e.button === 0
-      && !this.selectElement.hidden) {
-      const rectBox = this.selectElement.getBoundingClientRect() as FcRectBox;
-      this.selectElement.hidden = true;
-      this.selectObjects(rectBox);
-    }
-  }
-
-  private updateSelectRect() {
-    const x3 = Math.min(this.selectRect.x1, this.selectRect.x2);
-    const x4 = Math.max(this.selectRect.x1, this.selectRect.x2);
-    const y3 = Math.min(this.selectRect.y1, this.selectRect.y2);
-    const y4 = Math.max(this.selectRect.y1, this.selectRect.y2);
-    this.selectElement.style.left = x3 + 'px';
-    this.selectElement.style.top = y3 + 'px';
-    this.selectElement.style.width = x4 - x3 + 'px';
-    this.selectElement.style.height = y4 - y3 + 'px';
-  }
-
-  private selectObjects(rectBox: FcRectBox) {
-    this.applyFunction(() => {
-      this.modelService.selectAllInRect(rectBox);
-    });
-  }
-
-}
-
--- a/projects/ngx-flowchart/src/lib/scrollparent.ts
+++ b/projects/ngx-flowchart/src/lib/scrollparent.ts
@ -1,19 +0,0 @@
-const regex = /(auto|scroll)/;
-
-const style = (node: Element, prop: string): string =>
-  getComputedStyle(node, null).getPropertyValue(prop);
-
-const scroll = (node: Element) =>
-  regex.test(
-    style(node, 'overflow') +
-    style(node, 'overflow-y') +
-    style(node, 'overflow-x'));
-
-const scrollparent = (node: HTMLElement): HTMLElement =>
-  !node || node === document.body
-    ? document.body
-    : scroll(node)
-    ? node
-    : scrollparent(node.parentNode as HTMLElement);
-
-export default scrollparent;
--- a/projects/ngx-flowchart/src/public-api.ts
+++ b/projects/ngx-flowchart/src/public-api.ts
@ -1,11 +0,0 @@
-/*
- * Public API Surface of ngx-flowchart
- */
-
-export * from './lib/ngx-flowchart.component';
-export * from './lib/ngx-flowchart.module';
-export * from './lib/ngx-flowchart.models';
-export { FcNodeComponent } from './lib/node.component';
-export { FcMagnetDirective } from './lib/magnet.directive';
-export { FcConnectorDirective } from './lib/connector.directive';
-export { DefaultFcNodeComponent } from './lib/default-node.component';
--- a/projects/ngx-flowchart/src/test.ts
+++ b/projects/ngx-flowchart/src/test.ts
@ -1,21 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: any;
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
--- a/projects/ngx-flowchart/tsconfig.lib.json
+++ b/projects/ngx-flowchart/tsconfig.lib.json
@ -1,27 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "target": "es2015",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "declaration": true,
-    "inlineSources": true,
-    "types": ["jquery"],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
-    "enableResourceInlining": true
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}
--- a/projects/ngx-flowchart/tsconfig.lib.prod.json
+++ b/projects/ngx-flowchart/tsconfig.lib.prod.json
@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.lib.json",
-  "angularCompilerOptions": {
-    "enableIvy": false
-  }
-}
--- a/projects/ngx-flowchart/tsconfig.spec.json
+++ b/projects/ngx-flowchart/tsconfig.spec.json
@ -1,17 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Igor Kulikov	aac96f7e04	Release 1.0.0	4 years ago
Igor Kulikov	cf44a13fbf	Set ver to 1.0.0	4 years ago
Igor Kulikov	dc8dc2731f	Angular 12 migration	4 years ago