Flowchart-diagram-editor NPM

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.

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**
        }
    );