I want to implement a flowchart editor which will have a graph component and a sidebar component. The sidebar will be having reusable shapes like rectangle, square, eclipse,rhombus,circle etc. I should be able to drag and drop those shapes into the graph container to add them automatically as a vertex.Similarly I can add other vertex in the graph by dragging and dropping various shapes.Also I should be able to add/in sert edge or connectors between those shapes added as vertex.I wan t to implement this feature using mxgraph in angular 10.
I have written below code for the same in angular 10.
app.component.ts:
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
declare var mxClient: any;
declare var mxPerimeter: any;
declare var mxConstants: any;
declare var mxUtils: any;
declare var mxEvent: any;
declare var mxEventObject: any;
declare var mxEffects: any;
declare var mxDivResizer: any;
declare var mxGraphHandler: any;
declare var mxGuide: any;
declare var mxCodec: any;
declare var mxLog: any;
declare var mxConnectionHandler: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
@ViewChild('graphContainer') graphContainer: ElementRef;
@ViewChild('sidebarContainer') sidebar: ElementRef
ngAfterViewInit() {
const graph = new mxGraph(this.graphContainer.nativeElement);
try {
const parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
const vertex1 = graph.insertVertex(parent, '1', 'Vertex 1', 0, 0, 200, 80);
const vertex2 = graph.insertVertex(parent, '2', 'Vertex 2', 0, 0, 200, 80);
graph.insertEdge(parent, '', '', vertex1, vertex2);
} finally {
graph.getModel().endUpdate();
new mxHierarchicalLayout(graph).execute(graph.getDefaultParent());
this.addVertex(graph,'/assets/images/rectangle.gif', 100, 40, '');
this.addVertex(graph,'/assets/images/rounded.gif', 100, 40, 'shape=rounded');
this.addVertex(graph,'/assets/images/ellipse.png', 40, 40, 'shape=ellipse');
this.addVertex(graph,'/assets/images/rhombus.png', 40, 40, 'shape=rhombus');
this.addVertex(graph,'/assets/images/triangle.png', 40, 40, 'shape=triangle');
this.addVertex(graph,'/assets/images/cylinder.png', 40, 40, 'shape=cylinder');
this.addVertex(graph,'/assets/images/actor.png', 30, 40, 'shape=actor');
}
}
addVertex(graph,icon, w, h, style): void {
const vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
vertex.setVertex(true);
this.addToolbarItem(graph, toolbar, vertex, icon);
}
addToolbarItem(graph, toolbar, prototype, image): void {
// Function that is executed when the image is dropped on
// the graph. The cell argument points to the cell under
// the mousepointer if there is one.
var funct = function(graph, evt, cell)
{
graph.stopEditing(false);
var pt = graph.getPointForEvent(evt);
var vertex = graph.getModel().cloneCell(prototype);
vertex.geometry.x = pt.x;
vertex.geometry.y = pt.y;
graph.setSelectionCells(graph.importCells([vertex], 0, 0, cell));
}
// Creates the image which is used as the drag icon (preview)
var img = toolbar.addMode(null, image, funct);
mxUtils.makeDraggable(img, graph, funct);
}
}
app.component.html:
<div id="sidebarContainer"
style="position:absolute;overflow:hidden;top:36px;left:0px;bottom:36px;max-width:52px;width:56px;padding-top:10px;padding-left:4px;background-image:url('/assets/images/sidebar_bg.gif');">
</div>
<div #graphContainer id="graphContainer"
style="position:absolute;overflow:hidden;top:36px;left:60px;bottom:36px;right:0px;background-image:url('/assets/images/grid.gif');cursor:default;">
</div>>
However I am getting error as
ERROR in src/app/app.component.ts(62,20): error TS2554: Expected 0 arguments, but got 3. src/app/app.component.ts(62,41): error TS2304: Cannot find name 'mxGeometry'.
Can you please tell me how to include mxGraph models like mxGeometry or mxRectangle or mxCell in angular 10 to resolve the above error.
Also please let me know if the above code is correct?
