Release 1.0.0

aac96f7e · Igor Kulikov · cf44a13f · cf44a13f · cf44a13f · cf44a13f
Commit aac96f7e authored Dec 07, 2021 by Igor Kulikov
102 changed files
--- a/.browserslistrc
+++ b/.browserslistrc
-# 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
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR
--- a/.editorconfig
+++ b/.editorconfig
-# 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
-# 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/LICENSE
+++ b/LICENSE
-                                 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
 # 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
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "ngx-flowchart-demo": {
-      "root": "",
-      "sourceRoot": "src",
-      "projectType": "application",
-      "prefix": "app",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        },
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/ngx-flowchart-demo",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.app.json",
-            "aot": true,
-            "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",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "projects/ngx-flowchart/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "projects/ngx-flowchart/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "projects/ngx-flowchart/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "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/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js
+++ b/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js
--- a/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js.map
+++ b/dist/ngx-flowchart/bundles/ngx-flowchart.umd.js.map
--- a/dist/ngx-flowchart/README.md
+++ b/dist/ngx-flowchart/README.md
-# 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/package.json
+++ b/dist/ngx-flowchart/package.json
-{
-  "name": "ngx-flowchart",
-  "version": "0.0.1",
-  "peerDependencies": {
-    "@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": "^2.2.0"
-  }
-}
\ No newline at end of file
--- a/e2e/protractor.conf.js
+++ b/e2e/protractor.conf.js
-// @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 } }));
-  }
-};
\ No newline at end of file
--- a/e2e/src/app.e2e-spec.ts
+++ b/e2e/src/app.e2e-spec.ts
-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
-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
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
--- 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
--- a/dist/ngx-flowchart/esm2015/lib/edge-dragging.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/edge-dragging.service.js
--- a/dist/ngx-flowchart/esm2015/lib/edge-drawing.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/edge-drawing.service.js
--- a/dist/ngx-flowchart/esm2015/lib/magnet.directive.js
+++ b/dist/ngx-flowchart/esm2015/lib/magnet.directive.js
--- a/dist/ngx-flowchart/esm2015/lib/model.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/model.service.js
--- a/dist/ngx-flowchart/esm2015/lib/modelvalidation.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/modelvalidation.service.js
--- a/dist/ngx-flowchart/esm2015/lib/mouseover.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/mouseover.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.models.js
+++ b/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.models.js
--- a/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.module.js
+++ b/dist/ngx-flowchart/esm2015/lib/ngx-flowchart.module.js
--- a/dist/ngx-flowchart/esm2015/lib/node-dragging.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/node-dragging.service.js
--- a/dist/ngx-flowchart/esm2015/lib/node.component.js
+++ b/dist/ngx-flowchart/esm2015/lib/node.component.js
--- a/dist/ngx-flowchart/esm2015/lib/rectangleselect.service.js
+++ b/dist/ngx-flowchart/esm2015/lib/rectangleselect.service.js
--- a/dist/ngx-flowchart/esm2015/lib/scrollparent.js
+++ b/dist/ngx-flowchart/esm2015/lib/scrollparent.js
--- a/dist/ngx-flowchart/esm2015/ngx-flowchart.js
+++ b/dist/ngx-flowchart/esm2015/ngx-flowchart.js
--- 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/dist/ngx-flowchart/fesm2015/ngx-flowchart.js.map
+++ b/dist/ngx-flowchart/fesm2015/ngx-flowchart.js.map
--- a/karma.conf.js
+++ b/karma.conf.js
-// 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
--- a/dist/ngx-flowchart/lib/default-node.component.d.ts
+++ b/dist/ngx-flowchart/lib/default-node.component.d.ts
--- 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
--- a/dist/ngx-flowchart/lib/magnet.directive.d.ts
+++ b/dist/ngx-flowchart/lib/magnet.directive.d.ts
--- 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
--- 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
--- a/dist/ngx-flowchart/lib/ngx-flowchart.models.d.ts
+++ b/dist/ngx-flowchart/lib/ngx-flowchart.models.d.ts
--- a/dist/ngx-flowchart/lib/ngx-flowchart.module.d.ts
+++ b/dist/ngx-flowchart/lib/ngx-flowchart.module.d.ts
--- 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
--- 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/dist/ngx-flowchart/ngx-flowchart.d.ts
+++ b/dist/ngx-flowchart/ngx-flowchart.d.ts
--- a/package.json
+++ b/package.json
 {
-  "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 --configuration production",
-    "test": "ng test ngx-flowchart",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "private": true,
+  "name": "ngx-flowchart",
+  "version": "0.0.1",
  "peerDependencies": {
-    "jquery": "^3.6.0"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^12.2.13",
-    "@angular/animations": "^12.2.13",
-    "@angular/cdk": "^12.2.13",
-    "@angular/cli": "^12.2.13",
    "@angular/common": "^12.2.13",
-    "@angular/compiler": "^12.2.13",
-    "@angular/compiler-cli": "^12.2.13",
    "@angular/core": "^12.2.13",
-    "@angular/forms": "^12.2.13",
-    "@angular/language-service": "^12.2.13",
-    "@angular/platform-browser": "^12.2.13",
-    "@angular/platform-browser-dynamic": "^12.2.13",
-    "@angular/router": "^12.2.13",
-    "@types/jasmine": "~3.10.2",
-    "@types/jasminewd2": "^2.0.10",
-    "@types/jquery": "^3.5.9",
-    "@types/node": "~15.14.9",
-    "codelyzer": "^6.0.2",
-    "jasmine-core": "~3.10.1",
-    "jasmine-spec-reporter": "~7.0.0",
    "jquery": "^3.6.0",
-    "karma": "~6.3.9",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "^3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "^1.7.0",
-    "ng-packagr": "~12.2.5",
-    "protractor": "~7.0.0",
-    "rxjs": "~6.6.7",
-    "ts-node": "^10.4.0",
-    "tslint": "~6.1.3",
-    "typescript": "~4.3.5",
-    "zone.js": "~0.11.4"
+    "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": "^2.3.1"
+    "tslib": "^2.2.0"
  }
 }
\ No newline at end of file
--- a/projects/ngx-flowchart/README.md
+++ b/projects/ngx-flowchart/README.md
-# 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
-// 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
-{
-  "$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/package.json
+++ b/projects/ngx-flowchart/package.json
-{
-  "name": "ngx-flowchart",
-  "version": "1.0.0",
-  "peerDependencies": {
-    "@angular/common": "^12.2.13",
-    "@angular/core": "^12.2.13",
-    "jquery": "^3.6.0",
-    "typescript": "~4.3.5"
-  },
-  "devDependencies": {
-    "@types/jquery": "^3.5.9"
-  }
-}
--- a/projects/ngx-flowchart/src/lib/connector.directive.ts
+++ b/projects/ngx-flowchart/src/lib/connector.directive.ts
-import { Directive, ElementRef, HostListener, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { FcCallbacks, FcConnector, FcConnectorRectInfo, FcNodeRectInfo, FlowchartConstants } from './ngx-flowchart.models';
-import { FcModelService } from './model.service';
-
-@Directive({
-  // 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
-<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
-: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
-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
-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
-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
-import { Directive, ElementRef, HostListener, Input, OnInit } 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
-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
-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
-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
-<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
-: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
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  DoCheck,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  HostListener,
-  Input,
-  IterableDiffer,
-  IterableDiffers,
-  NgZone,
-  OnInit,
-  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
-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
-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
-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
-: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
-import {
-  AfterViewInit,
-  Component,
-  ComponentFactoryResolver,
-  Directive,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  Inject,
-  Input,
-  OnChanges,
-  OnInit,
-  SimpleChanges,
-  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()
-// tslint:disable-next-line:directive-class-suffix
-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
-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
-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
-/*
- * 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
-// 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
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "declaration": true,
-    "declarationMap": true,
-    "inlineSources": true,
-    "types": ["jquery"]
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
-}
--- a/projects/ngx-flowchart/tsconfig.lib.prod.json
+++ b/projects/ngx-flowchart/tsconfig.lib.prod.json
-{
-  "extends": "./tsconfig.lib.json",
-  "compilerOptions": {
-    "declarationMap": false
-  },
-  "angularCompilerOptions": {
-    "compilationMode": "partial"
-  }
-}
--- a/projects/ngx-flowchart/tsconfig.spec.json
+++ b/projects/ngx-flowchart/tsconfig.spec.json
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}
--- a/projects/ngx-flowchart/tslint.json
+++ b/projects/ngx-flowchart/tslint.json
-{
-  "extends": "../../tslint.json",
-  "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "fc",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "fc",
-      "kebab-case"
-    ]
-  }
-}
--- a/dist/ngx-flowchart/public-api.d.ts
+++ b/dist/ngx-flowchart/public-api.d.ts
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
-<div class="fc-container">
-  <div class="fc-left-pane">
-    <fc-canvas [model]="nodeTypesModel" [selectedObjects]="nodeTypesFlowchartselected"
-               [automaticResize]="false"
-               [dropTargetId]="'fc-target-canvas'">
-    </fc-canvas>
-  </div>
-  <div class="fc-divider" style="background-color: gray;">
-  </div>
-  <div class="fc-right-pane">
-    <div class="button-overlay">
-      <button (click)="addNewNode()" title="Add a new node to then chart">Add Node</button>
-      <button (click)="deleteSelected()"
-              [disabled]="!fcCanvas.modelService || (fcCanvas.modelService.nodes.getSelectedNodes().length === 0 &&
-                          fcCanvas.modelService.edges.getSelectedEdges().length === 0)"
-              title="Delete selected nodes and connections">Delete Selected</button>
-      <button (click)="activateWorkflow()">
-        Activate Workflow
-      </button>
-    </div>
-    <fc-canvas #fcCanvas
-               id="fc-target-canvas"
-               [model]="model"
-               [selectedObjects]="flowchartselected"
-               [edgeStyle]="flowchartConstants.curvedStyle"
-               [userCallbacks]="callbacks"
-               [automaticResize]="true"
-               [dragAnimation]="flowchartConstants.dragAnimationRepaint">
-    </fc-canvas>
-  </div>
-</div>
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
-:host {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-  outline: none;
-
-  .fc-container {
-    display: flex;
-    flex: 1;
-    flex-direction: row;
-    overflow: hidden;
-  }
-
-  .fc-left-pane {
-    flex: 0.15;
-    overflow: auto;
-  }
-
-  .fc-divider {
-    flex: 0.01;
-  }
-
-  .fc-right-pane {
-    flex: 0.84;
-    overflow: auto;
-  }
-
-  .button-overlay {
-    position: absolute;
-    top: 40px;
-    z-index: 10;
-  }
-
-  .button-overlay button {
-    display: block;
-    padding: 10px;
-    margin-bottom: 15px;
-    border-radius: 10px;
-    border: none;
-    box-shadow: none;
-    color: #fff;
-    font-size: 20px;
-    background-color: #F15B26;
-    user-select: none;
-  }
-
-  .button-overlay button:hover:not(:disabled) {
-    border: 4px solid #b03911;
-    border-radius: 5px;
-    margin: -4px;
-    margin-bottom: 11px;
-  }
-
-  .button-overlay button:disabled {
-    -webkit-filter: brightness(70%);
-    filter: brightness(70%);
-  }
-
-}
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
-import { AfterViewInit, Component, HostBinding, HostListener, ViewChild } from '@angular/core';
-import { FcModel, FcNode, FlowchartConstants, NgxFlowchartComponent, UserCallbacks } from 'ngx-flowchart-dev';
-import { of } from 'rxjs';
-import { DELETE } from '@angular/cdk/keycodes';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
-})
-export class AppComponent implements AfterViewInit {
-
-  @HostBinding('attr.tabindex')
-  get tabindex(): string {
-    return '0';
-  }
-
-  flowchartConstants = FlowchartConstants;
-
-  nodeTypesFlowchartselected = [];
-  nodeTypesModel: FcModel = {
-    nodes: [],
-    edges: []
-  };
-
-  flowchartselected = [];
-  model: FcModel = {
-    nodes: [],
-    edges: []
-  };
-  nextNodeID = 10;
-  nextConnectorID = 20;
-
-  callbacks: UserCallbacks = {
-    edgeDoubleClick: (event, edge) => {
-      console.log('Edge double clicked.');
-    },
-    edgeEdit: (event, edge) => {
-      const label = prompt('Enter a link label:', edge.label);
-      if (label) {
-        edge.label = label;
-      }
-    },
-    edgeMouseOver: event => {
-      console.log('mouserover');
-    },
-    isValidEdge: (source, destination) => {
-      return source.type === FlowchartConstants.rightConnectorType && destination.type === FlowchartConstants.leftConnectorType;
-    },
-    createEdge: (event, edge) => {
-      if (!edge.label) {
-        const label = prompt('Enter a link label:', 'New label');
-        edge.label = label;
-      }
-      return of(edge);
-    },
-    dropNode: (event, node) => {
-      const name = prompt('Enter a node name:', node.name);
-      if (name) {
-        node.name = name;
-        node.id = (this.nextNodeID++) + '';
-        node.connectors = [
-          {
-            id: (this.nextConnectorID++) + '',
-            type: FlowchartConstants.leftConnectorType
-          },
-          {
-            id: (this.nextConnectorID++) + '',
-            type: FlowchartConstants.rightConnectorType
-          }
-        ];
-        this.model.nodes.push(node);
-      }
-    },
-    edgeAdded: edge => {
-      console.log('edge added');
-      console.log(edge);
-    },
-    nodeRemoved: node => {
-      console.log('node removed');
-      console.log(node);
-    },
-    edgeRemoved: edge => {
-      console.log('edge removed');
-      console.log(edge);
-    },
-    nodeCallbacks: {
-      doubleClick: event => {
-        console.log('Node was doubleclicked.');
-      },
-      nodeEdit: (event, node) => {
-        const name = prompt('Enter a node name:', node.name);
-        if (name) {
-          node.name = name;
-        }
-      }
-    }
-  };
-
-  @ViewChild('fcCanvas', {static: true}) fcCanvas: NgxFlowchartComponent;
-
-  constructor() {
-    this.initData();
-  }
-
-  ngAfterViewInit(): void {
-    console.log(this.fcCanvas.modelService);
-  }
-
-  private initData() {
-    for (let i = 0; i < 10; i++) {
-      const node: FcNode = {
-        name: 'type' + i,
-        id: (i + 1) + '',
-        x: 50,
-        y: 100 * (i + 1),
-        connectors: [
-          {
-            type: FlowchartConstants.leftConnectorType,
-            id: (i * 2 + 1) + ''
-          },
-          {
-            type: FlowchartConstants.rightConnectorType,
-            id: (i * 2 + 2) + ''
-          }
-        ]
-      };
-      this.nodeTypesModel.nodes.push(node);
-    }
-    this.model.nodes.push(...
-      [
-        {
-          name: 'ngxFlowchart',
-          readonly: true,
-          id: '2',
-          x: 300,
-          y: 100,
-          color: '#000',
-          borderColor: '#000',
-          connectors: [
-            {
-              type: FlowchartConstants.leftConnectorType,
-              id: '1'
-            },
-            {
-              type: FlowchartConstants.rightConnectorType,
-              id: '2'
-            }
-          ]
-        },
-        {
-          name: 'Implemented with Angular',
-          id: '3',
-          x: 600,
-          y: 100,
-          color: '#F15B26',
-          connectors: [
-            {
-              type: FlowchartConstants.leftConnectorType,
-              id: '3'
-            },
-            {
-              type: FlowchartConstants.rightConnectorType,
-              id: '4'
-            }
-          ]
-        },
-        {
-          name: 'Easy Integration',
-          id: '4',
-          x: 1000,
-          y: 100,
-          color: '#000',
-          borderColor: '#000',
-          connectors: [
-            {
-              type: FlowchartConstants.leftConnectorType,
-              id: '5'
-            },
-            {
-              type: FlowchartConstants.rightConnectorType,
-              id: '6'
-            }
-          ]
-        },
-        {
-          name: 'Customizable templates',
-          id: '5',
-          x: 1300,
-          y: 100,
-          color: '#000',
-          borderColor: '#000',
-          connectors: [
-            {
-              type: FlowchartConstants.leftConnectorType,
-              id: '7'
-            },
-            {
-              type: FlowchartConstants.rightConnectorType,
-              id: '8'
-            }
-          ]
-        }
-      ]
-    );
-    this.model.edges.push(...
-      [
-        {
-          source: '2',
-          destination: '3',
-          label: 'label1'
-        },
-        {
-          source: '4',
-          destination: '5',
-          label: 'label2'
-        },
-        {
-          source: '6',
-          destination: '7',
-          label: 'label3'
-        }
-      ]
-    );
-  }
-
-  @HostListener('keydown.control.a', ['$event'])
-  public onCtrlA(event: KeyboardEvent) {
-    this.fcCanvas.modelService.selectAll();
-  }
-
-  @HostListener('keydown.esc', ['$event'])
-  public onEsc(event: KeyboardEvent) {
-    this.fcCanvas.modelService.deselectAll();
-  }
-
-  @HostListener('keydown', ['$event'])
-  public onKeydown(event: KeyboardEvent) {
-    if (event.keyCode === DELETE) {
-      this.fcCanvas.modelService.deleteSelected();
-    }
-  }
-
-  public addNewNode() {
-    const nodeName = prompt('Enter a node name:', 'New node');
-    if (!nodeName) {
-      return;
-    }
-
-    const newNode: FcNode = {
-      name: nodeName,
-      id: (this.nextNodeID++) + '',
-      x: 200,
-      y: 100,
-      color: '#F15B26',
-      connectors: [
-        {
-          id: (this.nextConnectorID++) + '',
-          type: FlowchartConstants.leftConnectorType
-        },
-        {
-          id: (this.nextConnectorID++) + '',
-          type: FlowchartConstants.rightConnectorType
-        }
-      ]
-    };
-    this.model.nodes.push(newNode);
-  }
-
-  public activateWorkflow() {
-    this.model.edges.forEach((edge) => {
-      edge.active = !edge.active;
-    });
-    this.fcCanvas.modelService.detectChanges();
-  }
-
-  public deleteSelected() {
-    this.fcCanvas.modelService.deleteSelected();
-  }
-}
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { FC_NODE_COMPONENT_CONFIG, NgxFlowchartModule } from 'ngx-flowchart-dev';
-import { TestFcNodeComponent } from './test-node.component';
-
-@NgModule({
-  entryComponents: [
-    TestFcNodeComponent
-  ],
-  /*providers: [
-    {
-      provide: FC_NODE_COMPONENT_CONFIG,
-      useValue: {
-        nodeComponentType: TestFcNodeComponent
-      }
-    }
-  ],*/
-  declarations: [
-    AppComponent,
-    TestFcNodeComponent
-  ],
-  imports: [
-    BrowserModule,
-    NgxFlowchartModule
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
--- a/src/app/test-node.component.html
+++ b/src/app/test-node.component.html
-<div
-  (dblclick)="userNodeCallbacks.doubleClick($event, node)">
-  {{ node | json }}
-</div>
--- a/src/app/test-node.component.ts
+++ b/src/app/test-node.component.ts
-import { Component } from '@angular/core';
-import { FcNodeComponent } from 'ngx-flowchart-dev';
-
-@Component({
-  selector: 'app-default-node',
-  templateUrl: './test-node.component.html',
-  styleUrls: []
-})
-export class TestFcNodeComponent extends FcNodeComponent {
-
-  constructor() {
-    super();
-  }
-
-}
--- a/src/assets/.gitkeep
+++ b/src/assets/.gitkeep
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
-export const environment = {
-  production: true
-};
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
-  production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
--- a/src/favicon.ico
+++ b/src/favicon.ico
--- a/src/index.html
+++ b/src/index.html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>NgxFlowchart</title>
-  <base href="/">
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>
--- a/src/main.ts
+++ b/src/main.ts
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js';  // Included with Angular CLI.
-import 'core-js/es/array';
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
--- a/src/styles.scss
+++ b/src/styles.scss
-/* You can add global styles to this file, and also import other style files */
-
-body {
-  font-family: sans-serif;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100vh;
-}
--- a/src/test.ts
+++ b/src/test.ts
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-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/tsconfig.app.json
+++ b/tsconfig.app.json
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": ["jquery"]
-  },
-  "angularCompilerOptions": {
-    "fullTemplateTypeCheck": true
-  },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
-}
--- a/tsconfig.json
+++ b/tsconfig.json
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "module": "es2020",
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "target": "es2017",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ],
-    "paths": {
-      "ngx-flowchart": [
-        "dist/ngx-flowchart"
-      ],
-      "ngx-flowchart/*": [
-        "dist/ngx-flowchart/*"
-      ],
-      "ngx-flowchart-dev": [
-        "projects/ngx-flowchart/src/public-api"
-      ]
-    }
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": false
-  }
-}
--- a/tsconfig.spec.json
+++ b/tsconfig.spec.json
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}
--- a/tslint.json
+++ b/tslint.json
-{
-  "extends": "tslint:recommended",
-  "rules": {
-    "array-type": false,
-    "arrow-parens": false,
-    "deprecation": {
-      "severity": "warn"
-    },
-    "component-class-suffix": true,
-    "contextual-lifecycle": true,
-    "directive-class-suffix": true,
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "import-blacklist": [
-      true,
-      "rxjs/Rx"
-    ],
-    "interface-name": false,
-    "max-classes-per-file": false,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "instance-field",
-          "static-method",
-          "instance-method"
-        ]
-      }
-    ],
-    "no-consecutive-blank-lines": false,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-empty": false,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-non-null-assertion": true,
-    "no-redundant-jsdoc": true,
-    "no-switch-case-fall-through": true,
-    "no-use-before-declare": true,
-    "no-var-requires": false,
-    "object-literal-key-quotes": [
-      true,
-      "as-needed"
-    ],
-    "object-literal-sort-keys": false,
-    "ordered-imports": false,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "trailing-comma": false,
-    "no-conflicting-lifecycle": true,
-    "no-host-metadata-property": true,
-    "no-input-rename": true,
-    "no-inputs-metadata-property": true,
-    "no-output-native": true,
-    "no-output-on-prefix": true,
-    "no-output-rename": true,
-    "no-outputs-metadata-property": true,
-    "template-banana-in-box": true,
-    "template-no-negated-async": true,
-    "use-lifecycle-interface": true,
-    "use-pipe-transform-interface": true
-  },
-  "rulesDirectory": [
-    "codelyzer"
-  ]
-}
\ No newline at end of file
--- a/yarn.lock
+++ b/yarn.lock