303 lines
8.3 KiB
JavaScript
303 lines
8.3 KiB
JavaScript
|
/**
|
||
|
|
* Update plugin. Use updateUrl and updateInterval (optional, default is 60000ms)
|
||
|
|
* in the meta data of the diagram to configure the plugin. It will send the XML
|
||
|
|
* of the current page to the given URL as a POST request (with a parameter called
|
||
|
|
* xml) and allows for the following type of XML response (with CORS headers):
|
||
|
|
*
|
||
|
|
* <updates>
|
||
|
|
* <update ...>
|
||
|
|
* </updates>
|
||
|
|
*
|
||
|
|
* Where update must contain an id attribute to reference the cell in the diagram.
|
||
|
|
*
|
||
|
|
* - An optional value attribute that contains XML markup is used as the value for
|
||
|
|
* the cell, with label and tooltip for the label and tooltip, respectively.
|
||
|
|
* Additionally, placeholders="1" can be used to enable placeholders in the label
|
||
|
|
* or tooltip of the cell.
|
||
|
|
*
|
||
|
|
* - An optional replace-value attribute that contains 1 can be specified to
|
||
|
|
* replace the value of the cell. Default is to add the attributes of the XML
|
||
|
|
* value specified above to the existing value of the cell. (Attributes with
|
||
|
|
* an empty string value are removed.)
|
||
|
|
*
|
||
|
|
* - An optional style attribute that contains the cell style is be used to replace
|
||
|
|
* the existing cell style.
|
||
|
|
*
|
||
|
|
* - An optional icon attribute that contains JSON is used to add an icon to the
|
||
|
|
* given cell. The object value that the icon attribute is parsed to may contain
|
||
|
|
* a tooltip (string), align ("left"|"center"|"right", default is "right"), valign
|
||
|
|
* (top|middle|bottom, default is bottom) and append (true|false, default is false)
|
||
|
|
* for adding or replacing existing icons. The image attribute is an object value
|
||
|
|
* with src, width and height for defining the icon to be displayed (default is
|
||
|
|
* mxGraph.warningImage). An empty string for the attribute removes all icons.
|
||
|
|
*
|
||
|
|
* See below for an example XML.
|
||
|
|
*/
|
||
|
|
Draw.loadPlugin(function(editorUi)
|
||
|
|
{
|
||
|
|
if (editorUi.editor.chromeless)
|
||
|
|
{
|
||
|
|
var graph = editorUi.editor.graph;
|
||
|
|
var interval = 60000;
|
||
|
|
|
||
|
|
function createOverlay(desc)
|
||
|
|
{
|
||
|
|
var overlay = new mxCellOverlay(desc.image || graph.warningImage,
|
||
|
|
desc.tooltip, desc.align, desc.valign, desc.offset);
|
||
|
|
|
||
|
|
// Installs a handler for clicks on the overlay
|
||
|
|
overlay.addListener(mxEvent.CLICK, function(sender, evt)
|
||
|
|
{
|
||
|
|
editorUi.alert(desc.tooltip);
|
||
|
|
});
|
||
|
|
|
||
|
|
return overlay;
|
||
|
|
};
|
||
|
|
|
||
|
|
function parseUpdates(xml)
|
||
|
|
{
|
||
|
|
if (xml != null && xml.length > 0)
|
||
|
|
{
|
||
|
|
var doc = mxUtils.parseXml(xml);
|
||
|
|
|
||
|
|
if (doc != null && doc.documentElement != null)
|
||
|
|
{
|
||
|
|
var model = graph.getModel();
|
||
|
|
var nodes = doc.documentElement.getElementsByTagName('update');
|
||
|
|
|
||
|
|
if (nodes != null && nodes.length > 0)
|
||
|
|
{
|
||
|
|
model.beginUpdate();
|
||
|
|
|
||
|
|
try
|
||
|
|
{
|
||
|
|
for (var i = 0; i < nodes.length; i++)
|
||
|
|
{
|
||
|
|
// Resolves the cell ID
|
||
|
|
var cell = model.getCell(nodes[i].getAttribute('id'));
|
||
|
|
|
||
|
|
if (cell != null)
|
||
|
|
{
|
||
|
|
// Changes the value
|
||
|
|
try
|
||
|
|
{
|
||
|
|
var value = nodes[i].getAttribute('value');
|
||
|
|
|
||
|
|
if (value != null)
|
||
|
|
{
|
||
|
|
var node = mxUtils.parseXml(value).documentElement;
|
||
|
|
|
||
|
|
if (node != null)
|
||
|
|
{
|
||
|
|
if (nodes[i].getAttribute('replace-value') == '1')
|
||
|
|
{
|
||
|
|
graph.model.setValue(cell, node);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
var attrs = node.attributes;
|
||
|
|
|
||
|
|
for (var j = 0; j < attrs.length; j++)
|
||
|
|
{
|
||
|
|
graph.setAttributeForCell(cell, attrs[j].nodeName,
|
||
|
|
(attrs[j].nodeValue.length > 0) ? attrs[j].nodeValue : null);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e)
|
||
|
|
{
|
||
|
|
console.log('Error in value for ' + cell.id + ': ' + e);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Changes the style
|
||
|
|
try
|
||
|
|
{
|
||
|
|
var style = nodes[i].getAttribute('style');
|
||
|
|
|
||
|
|
if (style != null)
|
||
|
|
{
|
||
|
|
graph.model.setStyle(cell, style);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e)
|
||
|
|
{
|
||
|
|
console.log('Error in style for ' + cell.id + ': ' + e);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Adds or removes an overlay icon
|
||
|
|
try
|
||
|
|
{
|
||
|
|
var icon = nodes[i].getAttribute('icon');
|
||
|
|
|
||
|
|
if (icon != null)
|
||
|
|
{
|
||
|
|
var desc = (icon.length > 0) ? JSON.parse(icon) : null;
|
||
|
|
|
||
|
|
if (desc == null || !desc.append)
|
||
|
|
{
|
||
|
|
graph.removeCellOverlays(cell);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (desc != null)
|
||
|
|
{
|
||
|
|
graph.addCellOverlay(cell, createOverlay(desc));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e)
|
||
|
|
{
|
||
|
|
console.log('Error in icon for ' + cell.id + ': ' + e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} // for
|
||
|
|
}
|
||
|
|
finally
|
||
|
|
{
|
||
|
|
model.endUpdate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var currentThread = null;
|
||
|
|
|
||
|
|
function scheduleUpdates()
|
||
|
|
{
|
||
|
|
var root = editorUi.editor.graph.getModel().getRoot();
|
||
|
|
var result = false;
|
||
|
|
|
||
|
|
if (root.value != null && typeof(root.value) == 'object')
|
||
|
|
{
|
||
|
|
interval = parseInt(root.value.getAttribute('updateInterval') || interval);
|
||
|
|
var url = root.value.getAttribute('updateUrl');
|
||
|
|
|
||
|
|
if (url != null)
|
||
|
|
{
|
||
|
|
var currentXml = mxUtils.getXml(editorUi.editor.getGraphXml());
|
||
|
|
|
||
|
|
function doUpdate()
|
||
|
|
{
|
||
|
|
if (url === 'demo')
|
||
|
|
{
|
||
|
|
parseUpdates(mxUtils.getXml(createDemoResponse().documentElement));
|
||
|
|
schedule();
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
mxUtils.post(url, 'xml=' + encodeURIComponent(currentXml), function(req)
|
||
|
|
{
|
||
|
|
if (root === editorUi.editor.graph.getModel().getRoot())
|
||
|
|
{
|
||
|
|
if (req.getStatus() >= 200 && req.getStatus() <= 300)
|
||
|
|
{
|
||
|
|
parseUpdates(mxUtils.getXml(req.getDocumentElement()));
|
||
|
|
schedule();
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
editorUi.handleError({message: mxResources.get('error') + ' ' +
|
||
|
|
req.getStatus()});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, function(err)
|
||
|
|
{
|
||
|
|
editorUi.handleError(err);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function schedule()
|
||
|
|
{
|
||
|
|
currentThread = window.setTimeout(doUpdate, interval);
|
||
|
|
};
|
||
|
|
|
||
|
|
doUpdate();
|
||
|
|
result = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
|
||
|
|
function startUpdates()
|
||
|
|
{
|
||
|
|
var result = scheduleUpdates();
|
||
|
|
|
||
|
|
if (result)
|
||
|
|
{
|
||
|
|
editorUi.editor.addListener('pageSelected', function()
|
||
|
|
{
|
||
|
|
window.clearTimeout(currentThread);
|
||
|
|
scheduleUpdates();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return result;
|
||
|
|
};
|
||
|
|
|
||
|
|
function createDemoResponse()
|
||
|
|
{
|
||
|
|
var doc = mxUtils.createXmlDocument();
|
||
|
|
var status = doc.createElement('updates');
|
||
|
|
|
||
|
|
for (var id in graph.model.cells)
|
||
|
|
{
|
||
|
|
var cell = graph.model.cells[id];
|
||
|
|
|
||
|
|
if (graph.model.isVertex(cell))
|
||
|
|
{
|
||
|
|
// For the purpose of the demo we flag stuff to update with update="1".
|
||
|
|
// This is not needed for the general case.
|
||
|
|
if (cell.value != null && typeof(cell.value) == 'object' &&
|
||
|
|
cell.value.getAttribute('update') == '1')
|
||
|
|
{
|
||
|
|
if (Math.random() > 0.5)
|
||
|
|
{
|
||
|
|
var update = doc.createElement('update');
|
||
|
|
update.setAttribute('id', cell.id);
|
||
|
|
update.setAttribute('value', '<object tooltip="%load%% Done" load="' +
|
||
|
|
Math.round(Math.random() * 100) + '" placeholders="1">');
|
||
|
|
update.setAttribute('style', cell.style + ';fillColor=#d5e8d4;gradientColor=white;');
|
||
|
|
update.setAttribute('icon', JSON.stringify({tooltip: 'Running', align: "right",
|
||
|
|
valign: "top", image: {src: IMAGE_PATH + '/spin.gif', width: 12, height: 12}}));
|
||
|
|
status.appendChild(update);
|
||
|
|
|
||
|
|
// Adds another icon
|
||
|
|
if (Math.random() > 0.5)
|
||
|
|
{
|
||
|
|
var update = doc.createElement('update');
|
||
|
|
update.setAttribute('id', cell.id);
|
||
|
|
update.setAttribute('icon', JSON.stringify({tooltip: 'Locked', append: true,
|
||
|
|
image: {src: IMAGE_PATH + '/locked.png', width: 12, height:12}}));
|
||
|
|
status.appendChild(update);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
var update = doc.createElement('update');
|
||
|
|
update.setAttribute('id', cell.id);
|
||
|
|
update.setAttribute('style', cell.style + ';fillColor=#d4e1f5;gradientColor=white;');
|
||
|
|
update.setAttribute('value', '<object tooltip="">');
|
||
|
|
update.setAttribute('icon', '');
|
||
|
|
status.appendChild(update);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
doc.appendChild(status);
|
||
|
|
|
||
|
|
return doc;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Wait for file to be loaded if no animation data is present
|
||
|
|
if (!startUpdates())
|
||
|
|
{
|
||
|
|
editorUi.editor.addListener('fileLoaded', startUpdates);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|