1/**
2 * Sample plugin.
3 */
4Draw.loadPlugin(function(ui) {
5
6	// Adds numbered toggle property
7	Editor.commonVertexProperties.push({name: 'numbered', dispName: 'Numbered', type: 'bool', defVal: true, isVisible: function(state, format)
8	{
9		var graph = format.editorUi.editor.graph;
10
11		return graph.view.redrawNumberShape != null;
12	}, onChange: function(graph, newValue)
13	{
14		graph.refresh();
15	}});
16
17	var graph = ui.editor.graph;
18	var enabled = true;
19	var counter = 0;
20
21	var graphViewResetValidationState = graph.view.resetValidationState;
22
23	graph.view.resetValidationState = function()
24	{
25		graphViewResetValidationState.apply(this, arguments);
26		this.numberCounter = 0;
27	};
28
29	var graphViewValidateCellState = graph.view.validateCellState;
30
31	graph.view.validateCellState = function(cell, recurse)
32	{
33		var state = graphViewValidateCellState.apply(this, arguments);
34		recurse = (recurse != null) ? recurse : true;
35
36		if (recurse && state != null && graph.model.isVertex(state.cell) &&
37			mxUtils.getValue(state.style, 'numbered', 1) == 1)
38		{
39			this.numberCounter++;
40			this.redrawNumberShape(state);
41		}
42
43		return state;
44	};
45
46	graph.view.redrawNumberShape = function(state)
47	{
48		var numbered = mxUtils.getValue(state.style, 'numbered', 1) == 1;
49		var value = '<div style="padding:2px;border:1px solid gray;background:yellow;border-radius:2px;">' +
50			(this.numberCounter) + '</div>';
51
52		if (enabled && numbered && graph.model.isVertex(state.cell) &&
53			state.shape != null && state.secondLabel == null)
54		{
55			state.secondLabel = new mxText(value, new mxRectangle(),
56					mxConstants.ALIGN_LEFT, mxConstants.ALIGN_BOTTOM);
57
58			// Styles the label
59			state.secondLabel.size = 12;
60			state.secondLabel.dialect = mxConstants.DIALECT_STRICTHTML;
61			graph.cellRenderer.initializeLabel(state, state.secondLabel);
62		}
63
64		if (state.secondLabel != null)
65		{
66			if (!numbered)
67			{
68				state.secondLabel.destroy();
69				state.secondLabel = null;
70			}
71			else
72			{
73				var scale = graph.getView().getScale();
74				var bounds = new mxRectangle(state.x + state.width - 4 * scale, state.y + 4 * scale, 0, 0);
75				state.secondLabel.value = value;
76				state.secondLabel.state = state;
77				state.secondLabel.scale = scale;
78				state.secondLabel.bounds = bounds;
79				state.secondLabel.redraw();
80			}
81		}
82	};
83
84	// Destroys the shape number
85	var destroy = graph.cellRenderer.destroy;
86	graph.cellRenderer.destroy = function(state)
87	{
88		destroy.apply(this, arguments);
89
90		if (state.secondLabel != null)
91		{
92			state.secondLabel.destroy();
93			state.secondLabel = null;
94		}
95	};
96
97	graph.cellRenderer.getShapesForState = function(state)
98	{
99		return [state.shape, state.text, state.secondLabel, state.control];
100	};
101
102	// Extends View menu
103	mxResources.parse('number=Number');
104
105    // Adds action
106    var action = ui.actions.addAction('number...', function()
107    {
108		enabled = !enabled;
109		graph.refresh();
110    });
111
112    action.setToggleAction(true);
113	action.setSelectedCallback(function() { return enabled; });
114
115	var menu = ui.menus.get((urlParams['sketch'] == '1') ? 'extras' : 'view');
116	var oldFunct = menu.funct;
117
118	menu.funct = function(menu, parent)
119	{
120		oldFunct.apply(this, arguments);
121
122		ui.menus.addMenuItems(menu, ['-', 'number'], parent);
123	};
124
125	// Forces refresh if file was loaded before plugin
126	if (ui.getCurrentFile() != null)
127	{
128		graph.refresh();
129	}
130});