drawio/war/plugins/props.js

/**
 * Sample plugin.
 */
Draw.loadPlugin(function(ui) {
	
	var div = document.createElement('div');
	div.style.background = '#ffffff';
	div.style.border = '1px solid gray';
	div.style.opacity = '0.8';
	div.style.position = 'absolute';
	div.style.padding = '10px';
	div.style.paddingTop = '0px';
	div.style.width = '20%';
	div.style.minWidth = '200px';
	div.style.top = '40px';
	div.style.right = '20px';
	
	var graph = ui.editor.graph;
	
	// Made for chromeless mode
	if (!ui.editor.chromeless)
	{
		div.style.top = '100px';
		div.style.right = '260px';
	}
	
	div.innerHTML = '<p><i>Select a shape.</i></p>';
	document.body.appendChild(div);
	
	// Highlights current cell
	var highlight = new mxCellHighlight(graph, '#00ff00', 12);
	
			/**
			 * Updates the properties panel
			 */
			function cellClicked(cell)
			{
				// Forces focusout in IE
				graph.container.focus();

				// Gets the selection cell
				if (cell == null)
				{
					highlight.highlight(null);
					div.innerHTML = '<p><i>Select a shape.</i></p>';
				}
				else
				{
					var attrs = (cell.value != null) ? cell.value.attributes : null;
			
					if (attrs != null)
					{
						var ignored = ['label', 'tooltip', 'placeholders'];
						highlight.highlight(graph.view.getState(cell));
						var label = graph.sanitizeHtml(graph.getLabel(cell));
						
						if (label != null && label.length > 0)
						{
							div.innerHTML = '<h1>' + label + '</h1>';
						}
						else
						{
							div.innerHTML = '';
						}
						
						for (var i = 0; i < attrs.length; i++)
						{
							if (mxUtils.indexOf(ignored, attrs[i].nodeName) < 0 &&
								attrs[i].nodeValue.length > 0)
							{
								div.innerHTML += '<h2>' + graph.sanitizeHtml(attrs[i].nodeName) + '</h2>' +
									'<p>' + graph.sanitizeHtml(attrs[i].nodeValue) + '</p>';
							}
						}
					}
				}
			};

			/**
			 * Creates the textfield for the given property.
			 */
			function createTextField(graph, form, cell, attribute)
			{
				var input = form.addText(attribute.nodeName + ':', attribute.nodeValue);

				var applyHandler = function()
				{
					var newValue = input.value || '';
					var oldValue = cell.getAttribute(attribute.nodeName, '');

					if (newValue != oldValue)
					{
						graph.getModel().beginUpdate();
                        
                        try
                        {
                        	var edit = new mxCellAttributeChange(
 		                           cell, attribute.nodeName,
 		                           newValue);
                           	graph.getModel().execute(edit);
                           	graph.updateCellSize(cell);
                        }
                        finally
                        {
                            graph.getModel().endUpdate();
                        }
					}
				}; 

				mxEvent.addListener(input, 'keypress', function (evt)
				{
					// Needs to take shift into account for textareas
					if (evt.keyCode == /*enter*/13 &&
						!mxEvent.isShiftDown(evt))
					{
						input.blur();
					}
				});

				if (mxClient.IS_IE)
				{
					mxEvent.addListener(input, 'focusout', applyHandler);
				}
				else
				{
					// Note: Known problem is the blurring of fields in
					// Firefox by changing the selection, in which case
					// no event is fired in FF and the change is lost.
					// As a workaround you should use a local variable
					// that stores the focused field and invoke blur
					// explicitely where we do the graph.focus above.
					mxEvent.addListener(input, 'blur', applyHandler);
				}
			};
			
			graph.click = function(me)
			{
				// Async required to enable hyperlinks in labels
				window.setTimeout(function()
				{
					cellClicked(me.getCell());
				}, 0);
			};
});