Commit 4894c4d2 authored by Remon Huijts's avatar Remon Huijts
Browse files

Rename EventRules to InteractionsUi and standardize this-that trick

parent 55305946
......@@ -123375,8 +123375,8 @@ ArrangePanel.prototype.init = function() {
} else {
// Add the UI to manage interactions for a cell:
div.appendChild(this.createTitle('Interactions'));
var eventRules = new EventRules(this);
div = eventRules.render(div);
var ui = new InteractionsUi(this);
div = ui.render(div);
}
 
this.container.appendChild(div);
......@@ -123390,12 +123390,11 @@ ArrangePanel.prototype.init = function() {
* fired. Example animations are "popup a cell" and "highlight a cell in a
* specific colour".
*
* We parse the rules/interactions from the 'onclick' attribute on an element,
* and for backwards compatibility also from the 'onhover' attribute. This is
* the reason that each interaction can only be defined on one single element or
* group.
* We parse the interactions from the 'onclick' attribute on an element, and for
* backwards compatibility also from the 'onhover' attribute. This is the reason
* that each interaction can only be defined on one single element/group.
*/
EventRules = function(panel) {
InteractionsUi = function(panel) {
this.rules = [];
this.parentPanel = panel;
this.rulesDiv = document.createElement('div');
......@@ -123428,21 +123427,21 @@ EventRules = function(panel) {
* re-rendering is caused by the `this.graph.getModel().setValue()` function,
* which always re-renders the panels on the right of the screen.
*/
EventRules.prototype.render = function(div) {
var thisEventRules = this;
InteractionsUi.prototype.render = function(div) {
var that = this;
 
// Render the rules that are already in place
this.rules.forEach(function(rule) {
thisEventRules.rulesDiv = rule.render(thisEventRules.rulesDiv);
that.rulesDiv = rule.render(that.rulesDiv);
});
div.appendChild(this.rulesDiv);
 
// Button to add an interaction.
var name = 'Add interaction';
var addRuleButton = mxUtils.button(name, function(evt) {
var rule = new Rule(thisEventRules);
thisEventRules.rules.push(rule);
thisEventRules.rulesDiv = rule.render(thisEventRules.rulesDiv);
var rule = new Rule(that);
that.rules.push(rule);
that.rulesDiv = rule.render(that.rulesDiv);
});
addRuleButton.style.marginTop = '2px';
addRuleButton.title = name;
......@@ -123455,7 +123454,7 @@ EventRules.prototype.render = function(div) {
* Get the "value" that contains all the attributes for a cell. The code to
* create this if it's not a node is copied from grapheditor code.
*/
EventRules.prototype.getCellValue = function() {
InteractionsUi.prototype.getCellValue = function() {
var value = this.graph.getModel().getValue(this.cell);
if (!mxUtils.isNode(value)) {
var doc = mxUtils.createXmlDocument();
......@@ -123476,7 +123475,7 @@ EventRules.prototype.getCellValue = function() {
* existing attributes, you **will** break currently existing interactive
* graphs.
*/
EventRules.prototype.save = function() {
InteractionsUi.prototype.save = function() {
var value = [];
// Loop through rules
for (var i = 0; i < this.rules.length; i++) {
......@@ -123491,14 +123490,14 @@ EventRules.prototype.save = function() {
};
 
/**
* Remove a specific rule object from `this.rules` and save this EventRules's
* Remove a specific rule object from `this.rules` and save this InteractionsUi's
* data.
*
* Parameters:
*
* rule - A `Rule` that should be removed
*/
EventRules.prototype.removeRule = function(rule) {
InteractionsUi.prototype.removeRule = function(rule) {
var index = -1;
this.rules.forEach(function(r, i) {
if (r === rule)
......@@ -123510,21 +123509,21 @@ EventRules.prototype.removeRule = function(rule) {
};
 
/**
* A `Rule` defines a specific action that needs to happen when an `EventRules`
* is fired.
* A `Rule` defines a specific action/animation that needs to happen when an
* event (click, hover or tap) is triggered.
*
* Parameters:
*
* parentEventRules - The EventRules object that this rule belongs to.
* attributes - Set of currently selected or default attributes for this rule.
* parentUi - The InteractionsUi object that this rule belongs to.
* attributes - Set of currently selected or default attributes for this 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 risk breaking existing interactive graphs.
*/
Rule = function(parentEventRules, attributes) {
this.parentEventRules = parentEventRules;
Rule = function(parentUi, attributes) {
this.parentUi = parentUi;
// default action:
if (typeof(attributes) == 'undefined') {
this.attributes = {
......@@ -123565,13 +123564,13 @@ Rule.prototype.render = function(div) {
this.attributes['action']);
this.ruleDiv = actionSelect.render(this.ruleDiv);
 
var thisRule = this;
var that = this;
 
// Add action-specific settings
switch (this.attributes['action']) {
case 'highlight':
var colourTextField = new RuleSettingColourInput(
thisRule,
that,
'colour',
this.attributes['colour']
);
......@@ -123583,7 +123582,7 @@ Rule.prototype.render = function(div) {
case 'hide':
var pickCellName = 'Target cell';
var pickCellButton = new RuleSettingSelectCell(
thisRule,
that,
pickCellName,
'Pick cell',
function() {
......@@ -123598,9 +123597,9 @@ Rule.prototype.render = function(div) {
}
parent = parent.getParent();
}
thisRule.setTargetCell(highestGroup.id);
that.setTargetCell(highestGroup.id);
};
pickCell(thisRule.parentEventRules.graph, callback);
pickCell(that.parentUi.graph, callback);
},
this.attributes.targets
);
......@@ -123649,10 +123648,10 @@ Rule.prototype.addRemoveButton = function() {
removeAttr.style.float = 'right';
removeAttr.appendChild(img);
 
var thisRule = this;
var that = this;
 
mxEvent.addListener(removeAttr, 'click', function() {
thisRule.parentEventRules.removeRule(thisRule);
that.parentUi.removeRule(that);
});
 
var removeDiv = document.createElement('div');
......@@ -123676,7 +123675,7 @@ Rule.prototype.addRemoveButton = function() {
*/
Rule.prototype.setAttribute = function(attributeName, value) {
this.attributes[attributeName] = value;
this.parentEventRules.save();
this.parentUi.save();
};
 
/**
......@@ -123783,10 +123782,10 @@ RuleSettingSelect.prototype.constructor = RuleSettingSelect;
* elements to `this.setting` and returns that.
*/
RuleSettingSelect.prototype.renderSettingValue = function() {
var thisRuleSettingSelect = this;
var that = this;
// On change, save the new values
mxEvent.addListener(this.setting, 'change', function() {
thisRuleSettingSelect.saveSetting();
that.saveSetting();
});
 
for (var i = 0; i < this.options.length; i++) {
......@@ -123858,10 +123857,10 @@ RuleSettingTextField = function(parentRule, name, value) {
if (typeof(value) !== 'undefined') {
this.setting.value = value;
}
var thisRuleSettingTextField = this;
var that = this;
 
mxEvent.addListener(this.setting, 'blur', function() {
thisRuleSettingTextField.saveSetting();
that.saveSetting();
});
};
 
......@@ -53,8 +53,8 @@ ArrangePanel.prototype.init = function() {
} else {
// Add the UI to manage interactions for a cell:
div.appendChild(this.createTitle('Interactions'));
var eventRules = new EventRules(this);
div = eventRules.render(div);
var ui = new InteractionsUi(this);
div = ui.render(div);
}
this.container.appendChild(div);
......@@ -68,12 +68,11 @@ ArrangePanel.prototype.init = function() {
* fired. Example animations are "popup a cell" and "highlight a cell in a
* specific colour".
*
* We parse the rules/interactions from the 'onclick' attribute on an element,
* and for backwards compatibility also from the 'onhover' attribute. This is
* the reason that each interaction can only be defined on one single element or
* group.
* We parse the interactions from the 'onclick' attribute on an element, and for
* backwards compatibility also from the 'onhover' attribute. This is the reason
* that each interaction can only be defined on one single element/group.
*/
EventRules = function(panel) {
InteractionsUi = function(panel) {
this.rules = [];
this.parentPanel = panel;
this.rulesDiv = document.createElement('div');
......@@ -106,21 +105,21 @@ EventRules = function(panel) {
* re-rendering is caused by the `this.graph.getModel().setValue()` function,
* which always re-renders the panels on the right of the screen.
*/
EventRules.prototype.render = function(div) {
var thisEventRules = this;
InteractionsUi.prototype.render = function(div) {
var that = this;
// Render the rules that are already in place
this.rules.forEach(function(rule) {
thisEventRules.rulesDiv = rule.render(thisEventRules.rulesDiv);
that.rulesDiv = rule.render(that.rulesDiv);
});
div.appendChild(this.rulesDiv);
// Button to add an interaction.
var name = 'Add interaction';
var addRuleButton = mxUtils.button(name, function(evt) {
var rule = new Rule(thisEventRules);
thisEventRules.rules.push(rule);
thisEventRules.rulesDiv = rule.render(thisEventRules.rulesDiv);
var rule = new Rule(that);
that.rules.push(rule);
that.rulesDiv = rule.render(that.rulesDiv);
});
addRuleButton.style.marginTop = '2px';
addRuleButton.title = name;
......@@ -133,7 +132,7 @@ EventRules.prototype.render = function(div) {
* Get the "value" that contains all the attributes for a cell. The code to
* create this if it's not a node is copied from grapheditor code.
*/
EventRules.prototype.getCellValue = function() {
InteractionsUi.prototype.getCellValue = function() {
var value = this.graph.getModel().getValue(this.cell);
if (!mxUtils.isNode(value)) {
var doc = mxUtils.createXmlDocument();
......@@ -154,7 +153,7 @@ EventRules.prototype.getCellValue = function() {
* existing attributes, you **will** break currently existing interactive
* graphs.
*/
EventRules.prototype.save = function() {
InteractionsUi.prototype.save = function() {
var value = [];
// Loop through rules
for (var i = 0; i < this.rules.length; i++) {
......@@ -169,14 +168,14 @@ EventRules.prototype.save = function() {
};
/**
* Remove a specific rule object from `this.rules` and save this EventRules's
* Remove a specific rule object from `this.rules` and save this InteractionsUi's
* data.
*
* Parameters:
*
* rule - A `Rule` that should be removed
*/
EventRules.prototype.removeRule = function(rule) {
InteractionsUi.prototype.removeRule = function(rule) {
var index = -1;
this.rules.forEach(function(r, i) {
if (r === rule)
......@@ -188,21 +187,21 @@ EventRules.prototype.removeRule = function(rule) {
};
/**
* A `Rule` defines a specific action that needs to happen when an `EventRules`
* is fired.
* A `Rule` defines a specific action/animation that needs to happen when an
* event (click, hover or tap) is triggered.
*
* Parameters:
*
* parentEventRules - The EventRules object that this rule belongs to.
* attributes - Set of currently selected or default attributes for this rule.
* parentUi - The InteractionsUi object that this rule belongs to.
* attributes - Set of currently selected or default attributes for this 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 risk breaking existing interactive graphs.
*/
Rule = function(parentEventRules, attributes) {
this.parentEventRules = parentEventRules;
Rule = function(parentUi, attributes) {
this.parentUi = parentUi;
// default action:
if (typeof(attributes) == 'undefined') {
this.attributes = {
......@@ -243,13 +242,13 @@ Rule.prototype.render = function(div) {
this.attributes['action']);
this.ruleDiv = actionSelect.render(this.ruleDiv);
var thisRule = this;
var that = this;
// Add action-specific settings
switch (this.attributes['action']) {
case 'highlight':
var colourTextField = new RuleSettingColourInput(
thisRule,
that,
'colour',
this.attributes['colour']
);
......@@ -261,7 +260,7 @@ Rule.prototype.render = function(div) {
case 'hide':
var pickCellName = 'Target cell';
var pickCellButton = new RuleSettingSelectCell(
thisRule,
that,
pickCellName,
'Pick cell',
function() {
......@@ -276,9 +275,9 @@ Rule.prototype.render = function(div) {
}
parent = parent.getParent();
}
thisRule.setTargetCell(highestGroup.id);
that.setTargetCell(highestGroup.id);
};
pickCell(thisRule.parentEventRules.graph, callback);
pickCell(that.parentUi.graph, callback);
},
this.attributes.targets
);
......@@ -327,10 +326,10 @@ Rule.prototype.addRemoveButton = function() {
removeAttr.style.float = 'right';
removeAttr.appendChild(img);
var thisRule = this;
var that = this;
mxEvent.addListener(removeAttr, 'click', function() {
thisRule.parentEventRules.removeRule(thisRule);
that.parentUi.removeRule(that);
});
var removeDiv = document.createElement('div');
......@@ -354,7 +353,7 @@ Rule.prototype.addRemoveButton = function() {
*/
Rule.prototype.setAttribute = function(attributeName, value) {
this.attributes[attributeName] = value;
this.parentEventRules.save();
this.parentUi.save();
};
/**
......@@ -461,10 +460,10 @@ RuleSettingSelect.prototype.constructor = RuleSettingSelect;
* elements to `this.setting` and returns that.
*/
RuleSettingSelect.prototype.renderSettingValue = function() {
var thisRuleSettingSelect = this;
var that = this;
// On change, save the new values
mxEvent.addListener(this.setting, 'change', function() {
thisRuleSettingSelect.saveSetting();
that.saveSetting();
});
for (var i = 0; i < this.options.length; i++) {
......@@ -536,10 +535,10 @@ RuleSettingTextField = function(parentRule, name, value) {
if (typeof(value) !== 'undefined') {
this.setting.value = value;
}
var thisRuleSettingTextField = this;
var that = this;
mxEvent.addListener(this.setting, 'blur', function() {
thisRuleSettingTextField.saveSetting();
that.saveSetting();
});
};
......
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