flowchart-diagram-editor
v1.0.1
Published
Grapheditor built as npm. Hello Angular.!
Downloads
4
Readme
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**
}
);
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 :
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