My Professional Logs: June 2014

Recently I have used mxGraph to draw an indicator diagram to indicate active panel in a wizard. Event though mxGraph has a documentation, I found it difficult while working with this framework.

By default mxCell allows one lable per cell. If you need more than that we can insert labels using insertCell or insertVertex. In this example I needed two lables(One for state and other is for name of the state), so I have used vertex and inserted one more vertex to the parent vertex.

	Ext.define('MyApp.view.ux.Indicator', {
	extend : 'Ext.Container',
	xtype : 'wizindicator',
	title : 'Indicator Highlighter',
	initComponent : function() {
	this.mainLayoutId = Ext.id();
	if (Ext.isEmpty(this.indicatorItems)) {
	this.indicatorItems = ['Indicator0', 'Indicator1', 'Indicator2',
	'Indicator3', 'Indicator4'];
	}
	this.indicators = [];
	Ext.apply(this, {
	html : '

	'
	});
	this.callParent(arguments);
	},
	listeners : {
	'afterrender' : function(mainLayout, eOpts) {
	this.renderDiagrammer(mainLayout);
	}
	},
	renderDiagrammer : function(mainLayout) {
	if (!mxClient.isBrowserSupported()) {
	mxUtils.error('Browser is not supported!', 200, false);
	} else {
	var graph = new mxGraph(document
	.getElementById(mainLayout.mainLayoutId));
	mainLayout.graph = graph;
	graph.setEnabled(false);
	graph.getStylesheet().putCellStyle('indicator-style',
	mainLayout.getIndicatorStyle(graph));
	graph.setHtmlLabels(true);
	graph.isCellFoldable = function(cell) {
	return false;
	}
	if (!Ext.isEmpty(this.indicatorItems)) {
	for (var i = 0; i < mainLayout.indicatorItems.length; i++) {
	var indicator = mainLayout.createIndicator(i,
	mainLayout.indicatorItems[i], graph, mainLayout);
	this.indicators.push(indicator);

	}
	}
	this.createEdges(mainLayout.indicators, graph);
	this.executeLayout(graph);
	}
	},
	getIndicatorStyle : function(graph) {
	var indicatorStyle = graph.getStylesheet().getDefaultVertexStyle();
	delete indicatorStyle[mxConstants.STYLE_STROKECOLOR];
	delete indicatorStyle[mxConstants.STYLE_FILLCOLOR];
	indicatorStyle[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_ELLIPSE;
	indicatorStyle[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter;
	indicatorStyle[mxConstants.STYLE_STROKECOLOR] = '#d3d3d3';
	return indicatorStyle;
	},
	executeLayout : function(graph) {
	graph.getModel().beginUpdate();
	var layout = new mxHierarchicalLayout(graph,
	mxConstants.DIRECTION_WEST, false);
	try {
	layout.execute(graph.getDefaultParent());
	} finally {
	graph.getModel().endUpdate();
	}
	},
	createIndicator : function(index, name, graph, mainLayout) {
	if (index === 0) {
	// TODO to fix Hierachical layout initial point
	var labelXPos = 1.8;
	} else {
	var labelXPos = 0.5;
	}
	graph.getModel().beginUpdate();
	try {
	var indicatorSize = mainLayout.indicatorSize \| 20;
	var vertex = graph.insertVertex(graph.getDefaultParent(), null,
	index, 0, 0, indicatorSize, indicatorSize);
	var vertexSecondaryLabel = graph
	.insertVertex(vertex, null, name, labelXPos, 1, 0, 0,
	'align=center;verticalAlign=top;', true);
	} finally {
	graph.getModel().endUpdate();
	}
	var indicator = new Indicator(index, name, vertex);
	return indicator;
	},
	createEdges : function(indicators, graph) {
	var edgeStyle = 'startArrow=none;endArrow=none;strokeWidth=6;strokeColor=#d3d3d3';
	if (!Ext.isEmpty(indicators)) {
	for (var i = 1; i < indicators.length; i++) {
	graph.getModel().beginUpdate();
	try {
	var edge = graph.insertEdge(graph.getDefaultParent(), null,
	null, indicators[i - 1].vertex,
	indicators[i].vertex, edgeStyle);
	} finally {
	graph.getModel().endUpdate();
	}
	}
	}
	},
	highlightIndicator : function(index) {
	if (!Ext.isEmpty(this.indicators) && index <= this.indicators.length) {
	var highlightStyle = 'fillColor=#A3C0EE';
	for (var i = 0; i < this.indicators.length; i++) {
	if (i === index) {
	this.graph.getModel().setStyle(this.indicators[i].vertex,
	highlightStyle);
	} else {
	this.graph.getModel().setStyle(this.indicators[i].vertex,
	null);
	}
	}
	} else {
	console.error('Index out of bound');
	}
	}
	});
	function Indicator(id, name, vertex) {
	this.id = id;
	this.name = name;
	this.vertex = vertex;
	}