1/**
2 * Sample plugin.
3 */
4Draw.loadPlugin(function(ui) {
5
6	var div = document.createElement('div');
7	div.style.background = Editor.isDarkMode() ? Editor.darkColor : '#ffffff';
8	div.style.border = '1px solid gray';
9	div.style.opacity = '0.8';
10	div.style.padding = '10px';
11	div.style.paddingTop = '0px';
12	div.style.width = '20%';
13	div.innerHTML = '<p><i>' + mxResources.get('nothingIsSelected') + '</i></p>';
14
15	var graph = ui.editor.graph;
16
17	if (!ui.editor.isChromelessView())
18	{
19		div.style.boxSizing = 'border-box';
20		div.style.minHeight = '100%';
21		div.style.width = '100%';
22
23		var iiw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
24
25		var dataWindow = new mxWindow('Data', div, iiw - 320, 60, 200, 130, true, true);
26		dataWindow.destroyOnClose = false;
27		dataWindow.setMaximizable(false);
28		dataWindow.setResizable(true);
29		dataWindow.setScrollable(true);
30		dataWindow.setClosable(true);
31		dataWindow.contentWrapper.style.overflowY = 'scroll';
32
33		// Adds resource for action
34		mxResources.parse('extractData=Extract Data');
35
36		// Adds action
37		ui.actions.addAction('extractData...', function()
38		{
39			dataWindow.setVisible(!dataWindow.isVisible());
40		});
41
42		var menu = ui.menus.get('extras');
43		var oldFunct = menu.funct;
44
45		menu.funct = function(menu, parent)
46		{
47			oldFunct.apply(this, arguments);
48
49			ui.menus.addMenuItems(menu, ['-', 'extractData'], parent);
50		};
51	}
52	else
53	{
54		div.style.position = 'absolute';
55		div.style.minWidth = '200px';
56		div.style.top = '40px';
57		div.style.right = '20px';
58
59		document.body.appendChild(div);
60	}
61
62	// Highlights current cell
63	var highlight = new mxCellHighlight(graph, '#00ff00', 8);
64	var ignored = ['label', 'tooltip', 'placeholders'];
65
66	function extractData(evt)
67	{
68		var result = graph.getDataForCells(graph.getSelectionCells());
69
70		if (mxEvent.isShiftDown(evt))
71		{
72			console.log(result);
73		}
74		else
75		{
76			console.log(JSON.stringify(result, null, '  '));
77		}
78	};
79
80	/**
81	 * Updates the properties panel
82	 */
83	function cellClicked(cell)
84	{
85		// Forces focusout in IE
86		if (!ui.editor.isChromelessView())
87		{
88			graph.container.focus();
89		}
90
91		// Gets the selection cell
92		if (cell == null)
93		{
94			highlight.highlight(null);
95			div.innerHTML = '<p><i>' + mxResources.get('nothingIsSelected') + '</i></p>';
96		}
97		else
98		{
99			var attrs = (cell.value != null) ? cell.value.attributes : null;
100
101			if (ui.editor.isChromelessView())
102			{
103				highlight.highlight(graph.view.getState(cell));
104			}
105
106			if (attrs != null)
107			{
108				var label = graph.sanitizeHtml(graph.getLabel(cell));
109
110				if (label != null && label.length > 0)
111				{
112					div.innerHTML = '<h1>' + label + '</h1>';
113				}
114				else
115				{
116					div.innerHTML = '';
117				}
118
119				for (var i = 0; i < attrs.length; i++)
120				{
121					if (mxUtils.indexOf(ignored, attrs[i].nodeName) < 0 &&
122						attrs[i].nodeValue.length > 0)
123					{
124						// TODO: Add click handler on h2 to output data
125						var h2 = document.createElement('h2');
126						mxUtils.write(h2, attrs[i].nodeName);
127						div.appendChild(h2);
128						var p = document.createElement('p');
129						mxUtils.write(p, attrs[i].nodeValue);
130						div.appendChild(p);
131					}
132				}
133			}
134			else
135			{
136				var label = graph.convertValueToString(cell);
137
138				if (label != '')
139				{
140					div.innerHTML = '<h1>' + graph.sanitizeHtml(label) + '</h1>';
141				}
142				else
143				{
144					div.innerHTML = '<p><i>No data</i></p>';
145				}
146			}
147
148			if (!ui.editor.isChromelessView())
149			{
150				var button = document.createElement('button');
151				button.setAttribute('title', 'Click or Shift+Click to write data for all selected cells to the browser console');
152				button.style['float'] = 'none';
153				mxUtils.write(button, 'Write to Console');
154
155				mxEvent.addListener(button, 'click', function(evt)
156				{
157					extractData(evt);
158				});
159
160				div.appendChild(button);
161			}
162		}
163	};
164
165	if (!ui.editor.isChromelessView())
166	{
167		graph.selectionModel.addListener(mxEvent.CHANGE, function(sender, evt)
168		{
169			cellClicked(graph.getSelectionCell());
170		});
171
172		graph.model.addListener(mxEvent.CHANGE, function(sender, evt)
173		{
174			cellClicked(graph.getSelectionCell());
175		});
176	}
177	else
178	{
179		graph.click = function(me)
180		{
181			// Async required to enable hyperlinks in labels
182			window.setTimeout(function()
183			{
184				cellClicked(me.getCell());
185			}, 0);
186		};
187	}
188});