Commit be308c0b authored by Remon Huijts's avatar Remon Huijts
Browse files

Bring ambiguous code back to context, fix null rule, use indexOf and process other comments

parent 678c98fa
INDie, *Interactive Network Diagrams in edX* is meant to easily make diagrams in
edX studio that can be shown to learners in the LMS. The diagram creator can add
simple interactions to cells in the diagrams: hovering or clicking such a cell
will trigger an animation, which will highlight, hide or show other cells.
simple interactions to cells in the diagrams: hovering over or clicking on such
a cell will trigger an animation, which will highlight, hide or show other
cells.
INDie is based on mxGraph_, the library behind Draw.io_.
......
......@@ -123009,9 +123009,9 @@ var interactions = {
}
 
// Newer graphs have all their rules in the onclick attribute:
var clickRules = JSON.parse(cell.value.getAttribute('onclick'));
var clickRules = JSON.parse(cell.value.getAttribute('onclick')) || [];
// Older graphs may have rules in the onhover attribute:
var hoverRules = JSON.parse(cell.value.getAttribute('onhover'));
var hoverRules = JSON.parse(cell.value.getAttribute('onhover')) || [];
// Get the node and all nodes of the children of cell:
var triggerNodes = interactions.cellNodes(graph, cell, true);
 
......@@ -123054,6 +123054,9 @@ var interactions = {
* rule - interaction rule object
*/
createHandler: function(graph, rule) {
if (!rule) {
throw new Error("rule is empty or undefined");
}
if (typeof rule.action == 'undefined') {
throw new Error("field 'action' not specified");
}
......@@ -123387,7 +123390,10 @@ InteractionsUi = function(panel) {
this.rulesDiv = document.createElement('div');
this.graph = this.parentPanel.editorUi.editor.graph;
this.cell = this.graph.getSelectionCell();
var attrs = this.getCellValue().attributes || [];
// Get the "user object" of the trigger cell to read cell attributes:
var value = this.graph.getModel().getValue(this.cell);
var attrs = mxUtils.isNode(value) ? value.attributes : [];
var attName = '';
 
for (var i = 0; i < attrs.length; i++) {
......@@ -123438,50 +123444,37 @@ InteractionsUi.prototype.render = function(div) {
return div;
};
 
/**
* Get the 'value' object of the currently selected trigger cell, so that we can
* read or write attribute values. If the cell has no such value object or just
* a string value, a proper value object is created (that code is copied from
* grapheditor code).
*
* Warning: when writing attributes to this object, you need to call
* `this.graph.getModel().setValue(this.cell, cellValue);` afterwards, because
* the value object might not yet be connected to the trigger cell.
*/
InteractionsUi.prototype.getCellValue = function() {
var value = this.graph.getModel().getValue(this.cell);
if (!mxUtils.isNode(value)) {
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', value || '');
value = obj;
}
return value;
};
/**
* Loop through the rules, get their (possibly updated) values and save that
* to the onclick attribute of the selected trigger cell.
*
* Each interaction rule is stored as a JSON encoded object holding only the
* attributes of the rule. The structure and syntax of these rule attributes
* cannot be changed anymore! It is possible to add more attributes, but by
* removing or changing currently existing attributes, you **will** break
* attributes of the rule. Note to developers: you can add more attributes, but
* by removing or renaming currently existing attributes, you **will** break
* currently existing interactive graphs.
*/
InteractionsUi.prototype.save = function() {
var value = [];
var interactionSpecs = [];
// Loop through rules
for (var i = 0; i < this.rules.length; i++) {
value.push(this.rules[i].attributes);
interactionSpecs.push(this.rules[i].attributes);
}
// Get the "user object" of the trigger cell to change cell attributes:
var cellValue = this.graph.getModel().getValue(this.cell);
// If it is not a node, make a node (this is copied from grapheditor code):
if (!mxUtils.isNode(cellValue)) {
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', cellValue || '');
cellValue = obj;
}
// Get the value object that holds the onclick attribute for the trigger:
var cellValue = this.getCellValue();
// Store all interaction rules in the onclick attribute:
cellValue.setAttribute('onclick', JSON.stringify(value));
cellValue.setAttribute('onclick', JSON.stringify(interactionSpecs));
// Clear any interaction rules in the onhover attribute of legacy graphs:
cellValue.removeAttribute('onhover');
// Make sure the modified value object is attached to the trigger cell:
// Make sure the modified "user object" is attached to the trigger cell:
this.graph.getModel().setValue(this.cell, cellValue);
};
 
......@@ -123494,25 +123487,22 @@ InteractionsUi.prototype.save = function() {
* rule - A `Rule` that should be removed
*/
InteractionsUi.prototype.removeRule = function(rule) {
var index = -1;
this.rules.forEach(function(r, i) {
if (r === rule) {
index = i;
}
});
if (index !== -1) {
this.rules.splice(index, 1);
} else {
var index = this.rules.indexOf(rule);
if (index === -1) {
debug('Warning: unable to remove this interaction rule:');
debug(rule);
return;
}
this.rules.splice(index, 1);
this.save();
};
 
/**
* This class represents the UI for an interaction rule. Each interaction rule
* specifies an action/animation that needs to happen when an event (click,
* hover or tap) is fired on a trigger cell.
* specifies an action/animation that needs to happen when an event (click or
* hover) is fired on a trigger cell.
*
* Parameters:
*
......@@ -123521,8 +123511,9 @@ InteractionsUi.prototype.removeRule = function(rule) {
* Currently existing attributes are 'action', 'colour', and
* 'targets', the latter being special (see `setTargetCell`).
*
* Note that you should not change existing attributes, because
* that will break existing interactive graphs.
* Note to developers: you can add more attributes, but by removing or
* renaming currently existing attributes, you **will** break currently
* existing interactive graphs.
*/
Rule = function(parentUi, attributes) {
this.parentUi = parentUi;
......@@ -123560,7 +123551,7 @@ Rule.prototype.addStyle = function() {
*/
Rule.prototype.render = function(div) {
this.addStyle();
// Create a button to remove this rule and add it to the ruleDiv
// Add a button to the ruleDiv that allows a user to remove this rule
this.ruleDiv = this.addRemoveButton();
var actionSelect = new RuleSettingSelect(
this,
......@@ -82,7 +82,10 @@ InteractionsUi = function(panel) {
this.rulesDiv = document.createElement('div');
this.graph = this.parentPanel.editorUi.editor.graph;
this.cell = this.graph.getSelectionCell();
var attrs = this.getCellValue().attributes || [];
// Get the "user object" of the trigger cell to read cell attributes:
var value = this.graph.getModel().getValue(this.cell);
var attrs = mxUtils.isNode(value) ? value.attributes : [];
var attName = '';
for (var i = 0; i < attrs.length; i++) {
......@@ -133,50 +136,37 @@ InteractionsUi.prototype.render = function(div) {
return div;
};
/**
* Get the 'value' object of the currently selected trigger cell, so that we can
* read or write attribute values. If the cell has no such value object or just
* a string value, a proper value object is created (that code is copied from
* grapheditor code).
*
* Warning: when writing attributes to this object, you need to call
* `this.graph.getModel().setValue(this.cell, cellValue);` afterwards, because
* the value object might not yet be connected to the trigger cell.
*/
InteractionsUi.prototype.getCellValue = function() {
var value = this.graph.getModel().getValue(this.cell);
if (!mxUtils.isNode(value)) {
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', value || '');
value = obj;
}
return value;
};
/**
* Loop through the rules, get their (possibly updated) values and save that
* to the onclick attribute of the selected trigger cell.
*
* Each interaction rule is stored as a JSON encoded object holding only the
* attributes of the rule. The structure and syntax of these rule attributes
* cannot be changed anymore! It is possible to add more attributes, but by
* removing or changing currently existing attributes, you **will** break
* attributes of the rule. Note to developers: you can add more attributes, but
* by removing or renaming currently existing attributes, you **will** break
* currently existing interactive graphs.
*/
InteractionsUi.prototype.save = function() {
var value = [];
var interactionSpecs = [];
// Loop through rules
for (var i = 0; i < this.rules.length; i++) {
value.push(this.rules[i].attributes);
interactionSpecs.push(this.rules[i].attributes);
}
// Get the value object that holds the onclick attribute for the trigger:
var cellValue = this.getCellValue();
// Get the "user object" of the trigger cell to change cell attributes:
var cellValue = this.graph.getModel().getValue(this.cell);
// If it is not a node, make a node (this is copied from grapheditor code):
if (!mxUtils.isNode(cellValue)) {
var doc = mxUtils.createXmlDocument();
var obj = doc.createElement('object');
obj.setAttribute('label', cellValue || '');
cellValue = obj;
}
// Store all interaction rules in the onclick attribute:
cellValue.setAttribute('onclick', JSON.stringify(value));
cellValue.setAttribute('onclick', JSON.stringify(interactionSpecs));
// Clear any interaction rules in the onhover attribute of legacy graphs:
cellValue.removeAttribute('onhover');
// Make sure the modified value object is attached to the trigger cell:
// Make sure the modified "user object" is attached to the trigger cell:
this.graph.getModel().setValue(this.cell, cellValue);
};
......@@ -189,25 +179,22 @@ InteractionsUi.prototype.save = function() {
* rule - A `Rule` that should be removed
*/
InteractionsUi.prototype.removeRule = function(rule) {
var index = -1;
this.rules.forEach(function(r, i) {
if (r === rule) {
index = i;
}
});
if (index !== -1) {
this.rules.splice(index, 1);
} else {
var index = this.rules.indexOf(rule);
if (index === -1) {
debug('Warning: unable to remove this interaction rule:');
debug(rule);
return;
}
this.rules.splice(index, 1);
this.save();
};
/**
* This class represents the UI for an interaction rule. Each interaction rule
* specifies an action/animation that needs to happen when an event (click,
* hover or tap) is fired on a trigger cell.
* specifies an action/animation that needs to happen when an event (click or
* hover) is fired on a trigger cell.
*
* Parameters:
*
......@@ -216,8 +203,9 @@ InteractionsUi.prototype.removeRule = function(rule) {
* Currently existing attributes are 'action', 'colour', and
* 'targets', the latter being special (see `setTargetCell`).
*
* Note that you should not change existing attributes, because
* that will break existing interactive graphs.
* Note to developers: you can add more attributes, but by removing or
* renaming currently existing attributes, you **will** break currently
* existing interactive graphs.
*/
Rule = function(parentUi, attributes) {
this.parentUi = parentUi;
......@@ -255,7 +243,7 @@ Rule.prototype.addStyle = function() {
*/
Rule.prototype.render = function(div) {
this.addStyle();
// Create a button to remove this rule and add it to the ruleDiv
// Add a button to the ruleDiv that allows a user to remove this rule
this.ruleDiv = this.addRemoveButton();
var actionSelect = new RuleSettingSelect(
this,
......
......@@ -37,9 +37,9 @@ var interactions = {
}
// Newer graphs have all their rules in the onclick attribute:
var clickRules = JSON.parse(cell.value.getAttribute('onclick'));
var clickRules = JSON.parse(cell.value.getAttribute('onclick')) || [];
// Older graphs may have rules in the onhover attribute:
var hoverRules = JSON.parse(cell.value.getAttribute('onhover'));
var hoverRules = JSON.parse(cell.value.getAttribute('onhover')) || [];
// Get the node and all nodes of the children of cell:
var triggerNodes = interactions.cellNodes(graph, cell, true);
......@@ -82,6 +82,9 @@ var interactions = {
* rule - interaction rule object
*/
createHandler: function(graph, rule) {
if (!rule) {
throw new Error("rule is empty or undefined");
}
if (typeof rule.action == 'undefined') {
throw new Error("field 'action' not specified");
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment