Grapheditor for Angular.

This package contains an editor along with all the required type definitions to modify the editors view to the given requirements. And the original editor is available in javascript here.

NOW SUPPORTS ANGULAR 16.x,17.x,

static url's to place the images from grapheditor

mxClient.basePath="/assets/library/scada";
mxClient.imageBasePath="/assets/library/scada/resources/images/"

Component

import * as _scada from 'scada-editor/index';

Download mxGraph typeDefinitions and store it in a folder that will not be included in build.

import scada.css into your angular.json

        "build": {
          "options": {
            "styles": [
              "node_modules/flowchart-diagram-editor/scada.css"
            ]
          },
         }
        "development": {
          "options": {
            "styles": [
              "node_modules/flowchart-diagram-editor/scada.css"
            ]
          },
        },

Declare Variables (go through grapheditor github package for a better understanding on what resources are required.)

---

window
    STENCIL_PATH
    RESOURCES_PATH
    IMAGE_PATH

initialization

_scada.mxUtils.getAll(
    [
        _scada.mxResources.getDefaultBundle('.txt file for language', mxLanguage),
        'default.xml path'
    ],
    (xhr) => {
        _scada.mxResources.parse(xhr[0].getText());
        const themes = new Object();
        themes['default'] = xhr[1].getDocumentElement();
        Graph = new _scada.Graph(null, null, null, null, themes, null);
        Graph['transparentBackground'] = false;
        const renderContainer = new _scada.EditorUi(
        new _scada.Editor(false, themes['default'], null, Graph, true),
        **Dom Element**
        );
    },
    () => {
        **Failed Toaster**
        }
    );

Screenshots

Place where you can create flow charts.

Let your creativity flow

customize it with your heart's content with the help of type definitions following diagram shows examples for the possiblities of customization.

Important :

• Current package does not include ways to convert the editor into the images shown below.
• The websites below do not use this npm package nor are they in angular
• But they use the editor that is provided as a base and have build on it.So you can customize it as required.

draw.io

Visual design paradigm

Development repo for this package is included here feel free to submit issues or fork it and create your own version of this package.

https://github.com/NOTvaRUN/scada-editor-dev

Good luck