Draw.IO - Graph Editor integration in Angular-cli
npm install @zklogic/draw.io
Grapheditor for Angular.
About
-----
Draw.IO - Graph Editor Node library for Angular projects.
draw.io, this project, is a configurable diagramming/whiteboarding visualization application. draw.io is owned and developed by JGraph Ltd, a UK based software company.
As well as running this project, we run a production-grade deployment of the diagramming interface at https://app.diagrams.net.
shell
git clone https://github.com/ArfanMirza/drawio.git
cd "drawio\src\main\webpack"
npm run build
`
TGZ file created along with dist directory. TGZ file name start from zklogic-draw.io-
Copy the tgz & Go to Angular Project, create lib directory along src directory and past TGZ file inside
$3
`shell
npm install --save ./lib/zklogic-draw.io-*.tgz
`
$3
`shell
npm install --save @zklogic/draw.io
`
$3
`shell
"assets": [
.
.
{
"glob": "*/",
"input": "./node_modules/@zklogic/draw.io/dist/mxgraph",
"output": "./mxgraph"
}
]
"styles": [
.
.
"./node_modules/@zklogic/draw.io/dist/mxgraph/styles/grapheditor.css"
],
`
$3
component.html
`shell
.
.
`
component.scss
`shell
:host ::ng-deep {
#mxgraph-diagram-container {
.geDialog {
padding-left: 15px !important;
padding-right: 15px !important;
table {
left : unset !important;
}
}
}
}
`
component.ts
`shell
import { GraphEditor, GraphEditorIn, GraphEditorOut, GraphInitConfig, GraphXmlData, ActionType, GraphEditorSVG, ButtonActionType }from '@zklogic/draw.io';
...
@ViewChild('container', { static: true }) container: ElementRef;
@ViewChild('mxgraphScriptsContainer', { static: true }) mxgraphScriptsContainer: ElementRef;
graphEditor: GraphEditor = new GraphEditor();
...
ngOnInit(): void {
let xml = " ";
//Div container to load Graph Editor
this.graphEditor.initialized(this.container.nativeElement, this.mxgraphScriptsContainer.nativeElement, {
actions: {
subMenu: {
save: (xml: GraphXmlData | GraphEditorSVG): Promise => {
return new Promise((resolve, reject) => {
//save data here
resolve({
status: "Data Saved",
graphData: xml
} as GraphEditorOut)
});
}
}
},
actionsButtons: {
'Export Library': {
title: "Export To App Library",
actionType: ActionType.EXPORTSVG,
callback: this.graphEditorLibraryExportEvent,
callbackOnError: this.graphEditorActionsErrorEvent,
style: {
backgroundColor: '#4d90fe',
border: '1px solid #3079ed',
backgroundImage: 'linear-gradient(#4d90fe 0,#4787ed 100%)',
height: '29px',
lineHeight: '25px'
}
} as ButtonActionType,
'Import Library': {
title: "Import From App Library",
actionType: ActionType.OPEN,
callback: this.graphEditorLibraryImportEvent,
callbackOnFinish: this.graphEditorLibraryImportFinishEvent,
style: {
backgroundColor: '#4d90fe',
border: '1px solid #3079ed',
backgroundImage: 'linear-gradient(#4d90fe 0,#4787ed 100%)',
height: '29px',
lineHeight: '25px'
}
} as ButtonActionType
},
extraActions: {
file: {
exportAs: {
'App Library': {
actionType: ActionType.EXPORTSVG,
callback: this.graphEditorLibraryExportEvent,
callbackOnError: this.graphEditorActionsErrorEvent
}
},
importFrom: {
'App Library': {
actionType: ActionType.OPEN,
callback: this.graphEditorLibraryImportEvent,
callbackOnFinish: this.graphEditorLibraryImportFinishEvent
}
}
}
}
} as GraphInitConfig)
.then(resolve => {
console.log(resolve)
//Fetch last saved graph data and set after initialization
this.graphEditor.setGrapheditorData({ xml: xml } as GraphXmlData).then(resolve => {
console.log("setGraphEditor", resolve)
}, reject => {
console.log("setGraphEditor", reject)
}).catch(e => {
console.log("setGraphEditor", e)
});
}, reject => {
console.log(reject);
})
}
graphEditorLibraryImportFinishEvent = (graphData): Promise => {
return new Promise((resolve, reject) => {
console.log('graphEditorLibraryImportFinishEvent', graphData);
resolve({
status: "Import App Library Implementation required",
graphData: graphData
})
})
}
graphEditorLibraryImportEvent = (): Promise => {
return new Promise((resolve, reject) => {
this.drawioImport.showDialog((data) => {
console.log("callback:data", data);
resolve({
status: (data && data.drawio_data ? "Okay" : "cancel"),
graphData: (data && data.drawio_data ? { xml: data.drawio_data.graphXmlData.xml, name: data.legal_name } : null)
})
})
})
}
graphEditorActionsErrorEvent = (graphData): Promise => {
return new Promise((resolve, reject) => {
console.log('graphEditorActionsErrorEvent', graphData);
resolve({
status: "Export App Library Implementation required",
graphData: graphData
})
})
}
graphEditorLibraryExportEvent = (graphData: GraphEditorSVG): Promise => {
return new Promise((resolve, reject) => {
console.log("graphData", graphData);
resolve({
status: "TS Export App Library Implementation required",
graphData: (graphData && graphData.xml ? { xml: graphData.xml, name: graphData.name } : null)
})
})
}
``