/f-scheme-editor

This is an example of using the @foblex/flow library in an Angular project. You can use this example as a starting point for your own project.

Primary LanguageTypeScriptMIT LicenseMIT

Scheme editor with step-by-step animations using @foblex/flow

This is an example of using the @foblex/flow library in an Angular project. You can use this example as a starting point for your own project.

DEMO

Used library capabilities

  • Zoom (with mouse wheel, double click, and buttons)
  • Select elements (single selection using the mouse, multiple selection using the Shift key and the mouse)
  • Drag and drop
  • Create new connections
  • Reassign connections
  • Connection text
  • Change connection markers
  • Change connection type
  • Change connection behavior
  • Change connection style
  • Change connection text
  • Create new nodes using drag and drop from the palette
  • Draggable background
  • Change background

Installation

Run npm install to install the required packages.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

License

This example is distributed under the MIT License. See the LICENSE file for more information.