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.
mxClient.basePath="/assets/library/scada";
mxClient.imageBasePath="/assets/library/scada/resources/images/"
import * as _scada from 'scada-editor/index';
Download mxGraph typeDefinitions and store it in a folder that will not be included in build.
"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
_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**
}
);
Place where you can create flow charts.
customize it with your heart's content with the help of type definitions following diagram shows examples for the possiblities of customization.
- 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.
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