Skip to content

Commit

Permalink
Implemented api.enableCue(), api.disableCue() and api.extendOptions().
Browse files Browse the repository at this point in the history
  • Loading branch information
@metincansiper
metincansiper committed Dec 17, 2018
1 parent 319e6bc commit 7b6ae3e
Show file tree
Hide file tree
Showing 4 changed files with 254 additions and 88 deletions.
8 changes: 7 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Click [here](http://ivis-at-bilkent.github.io/cytoscape.js-expand-collapse/demo.
* Note that compounds are nodes.

`cy.expandCollapse(options)`
To initialize/set options whenever you want.
To initialize the extension with given options.

`var api = cy.expandCollapse('get')`
To get the extension instance after initialization.
Expand Down Expand Up @@ -76,6 +76,12 @@ Get collapsed children of all collapsed nodes recursively. Returned value includ
`api.clearVisualCue()`
Forces the visual cue to be cleared. It is to be called in extreme cases.

`api.enableCue()`
Enable rendering of visual cue.

`api.disableCue()`
Disable rendering of visual cue.

## Events
Notice that following events are performed for *each* node that is collapsed/expanded. Also, notice that any post-processing layout is performed *after* the event.

Expand Down
168 changes: 124 additions & 44 deletions cytoscape-expand-collapse.js
View file

Large diffs are not rendered by default.

101 changes: 74 additions & 27 deletions src/cueUtilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ module.exports = function (params, cy, api, $) {
var elementUtilities;
var fn = params;

var eMouseOver, eMouseOut, ePosition, eRemove, eTap, eZoom, eAdd, eFree;
var nodeWithRenderedCue, preventDrawing = false;

var functions = {
Expand Down Expand Up @@ -54,19 +53,26 @@ module.exports = function (params, cy, api, $) {

sizeCanvas();

$(window).bind('resize', function () {
sizeCanvas();
});

var ctx = $canvas[0].getContext('2d');

// write options to data
var data = $container.data('cyexpandcollapse');
if (data == null) {
data = {};
// $container.data('cyexpandcollapse', data);
}
data.options = opts;

// if there are events field in data unbind them here
// to prevent binding the same event multiple times
// if (!data.hasEventFields) {
// functions['unbind'].apply( $container );
// }

$(window).bind('resize', data.eWindowResize = function () {
sizeCanvas();
});

var optCache;

function options() {
Expand Down Expand Up @@ -197,8 +203,8 @@ module.exports = function (params, cy, api, $) {
clearDraws();
}
});
cy.bind('zoom pan', eZoom = function () {

cy.bind('zoom pan', data.eZoom = function () {
if ( nodeWithRenderedCue ) {
clearDraws();
}
Expand All @@ -223,7 +229,7 @@ module.exports = function (params, cy, api, $) {
return false;
};

cy.on('mousemove', function(e){
cy.on('mousemove', data.eMouseMove= function(e){
if(!isInsideCompound(nodeWithRenderedCue, e)){
clearDraws()
}
Expand All @@ -232,7 +238,7 @@ module.exports = function (params, cy, api, $) {
}
});

cy.on('mouseover', 'node', eMouseOver = function (e) {
cy.on('mouseover', 'node', data.eMouseOver = function (e) {
var node = this;
// clear draws if any
if (api.isCollapsible(node) || api.isExpandable(node)){
Expand All @@ -244,38 +250,38 @@ module.exports = function (params, cy, api, $) {
});

var oldMousePos = null, currMousePos = null;
cy.on('mousedown', function(e){
cy.on('mousedown', data.eMouseDown = function(e){
oldMousePos = e.renderedPosition || e.cyRenderedPosition
});
cy.on('mouseup', function(e){
cy.on('mouseup', data.eMouseUp = function(e){
currMousePos = e.renderedPosition || e.cyRenderedPosition
});

cy.on('grab', 'node', eMouseOut = function (e) {
cy.on('grab', 'node', data.eGrab = function (e) {
preventDrawing = true;
});

cy.on('free', 'node', eMouseOut = function (e) {
cy.on('free', 'node', data.eFree = function (e) {
preventDrawing = false;
});

cy.on('position', 'node', ePosition = function () {
cy.on('position', 'node', data.ePosition = function () {
if (nodeWithRenderedCue)
clearDraws();
});

cy.on('remove', 'node', eRemove = function () {
cy.on('remove', 'node', data.eRemove = function () {
clearDraws();
nodeWithRenderedCue = null;
});

var ur;
cy.on('select', 'node', function(){
cy.on('select', 'node', data.eSelect = function(){
if (this.length > cy.nodes(":selected").length)
this.unselect();
});

cy.on('tap', Tap = function (event) {
cy.on('tap', data.eTap = function (event) {
var node = nodeWithRenderedCue;
if (node){
var expandcollapseRenderedStartX = node._private.data.expandcollapseRenderedStartX;
Expand Down Expand Up @@ -320,19 +326,60 @@ module.exports = function (params, cy, api, $) {
});
}

data.hasEventFields = true;
$container.data('cyexpandcollapse', data);
},
unbind: function () {
var cy = this.cytoscape('get');
cy.off('mouseover', 'node', eMouseOver)
.off('mouseout tapdragout', 'node', eMouseOut)
.off('position', 'node', ePosition)
.off('remove', 'node', eRemove)
.off('tap', 'node', eTap)
.off('add', 'node', eAdd)
.off('free', 'node', eFree);

cy.unbind("zoom pan", eZoom);
var $container = this;
var data = $container.data('cyexpandcollapse');

if (!data.hasEventFields) {
console.log( 'events to unbind does not exist' );
return;
}

cy.trigger('expandcollapse.clearvisualcue');

cy.off('mouseover', 'node', data.eMouseOver)
.off('mousemove', 'node', data.eMouseMove)
.off('mousedown', 'node', data.eMouseDown)
.off('mouseup', 'node', data.eMouseUp)
.off('free', 'node', data.eFree)
.off('grab', 'node', data.eGrab)
.off('position', 'node', data.ePosition)
.off('remove', 'node', data.eRemove)
.off('tap', 'node', data.eTap)
.off('add', 'node', data.eAdd)
.off('select', 'node', data.eSelect)
.off('free', 'node', data.eFree)
.off('zoom pan', data.eZoom);

$(window).off('resize', data.eWindowResize);
},
rebind: function () {
var $container = this;
var data = $container.data('cyexpandcollapse');

if (!data.hasEventFields) {
console.log( 'events to rebind does not exist' );
return;
}

cy.on('mouseover', 'node', data.eMouseOver)
.on('mousemove', 'node', data.eMouseMove)
.on('mousedown', 'node', data.eMouseDown)
.on('mouseup', 'node', data.eMouseUp)
.on('free', 'node', data.eFree)
.on('grab', 'node', data.eGrab)
.on('position', 'node', data.ePosition)
.on('remove', 'node', data.eRemove)
.on('tap', 'node', data.eTap)
.on('add', 'node', data.eAdd)
.on('select', 'node', data.eSelect)
.on('free', 'node', data.eFree)
.on('zoom pan', data.eZoom);

$(window).on('resize', data.eWindowResize);
}
};

Expand Down
65 changes: 49 additions & 16 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,35 @@
function createExtensionAPI(cy, expandCollapseUtilities) {
var api = {}; // API to be returned
// set functions


function handleNewOptions( opts ) {
var currentOpts = getScratch(cy, 'options');
if ( opts.cueEnabled && !currentOpts.cueEnabled ) {
api.enableCue();
}
else if ( !opts.cueEnabled && currentOpts.cueEnabled ) {
api.disableCue();
}
}

// set all options at once
api.setOptions = function(opts) {
setScratch(cy, 'options', options);
handleNewOptions(opts);
setScratch(cy, 'options', opts);
};

api.extendOptions = function(opts) {
handleNewOptions(opts);
var options = getScratch(cy, 'options');
extendOptions( options, opts );
}

// set the option whose name is given
api.setOption = function (name, value) {
var nameToVal = {};
nameToVal[ name ] = value;

handleNewOptions(nameToVal);
getScratch(cy, 'options')[name] = value;
};

Expand Down Expand Up @@ -175,20 +196,27 @@
}
return collapsedChildren;
};
// This method forces the visual cue to be cleared. It is to be called in extreme cases
// This method forces the visual cue to be cleared. It is to be called in extreme cases
api.clearVisualCue = function(node) {
cy.trigger('expandcollapse.clearvisualcue');
};

// This method works problematic TODO fix related bugs and expose it
// Unbinds cue events
// api.disableCue = function() {
// if (options.cueEnabled) {
// cueUtilities('unbind', cy);
// options.cueEnabled = false;
// }
// }


api.disableCue = function() {
var options = getScratch(cy, 'options');
if (options.cueEnabled) {
cueUtilities('unbind', cy, api, $);
options.cueEnabled = false;
}
};

api.enableCue = function() {
var options = getScratch(cy, 'options');
if (!options.cueEnabled) {
cueUtilities('rebind', cy, api, $);
options.cueEnabled = true;
}
};

return api; // Return the API instance
}

Expand Down Expand Up @@ -239,11 +267,16 @@

undoRedoUtilities(cy, api);

if(options.cueEnabled)
cueUtilities(options, cy, api, $);
cueUtilities(options, cy, api, $);

// if the cue is not enabled unbind cue events
if(!options.cueEnabled) {
cueUtilities('unbind', cy, api, $);
}

options.ready();
if ( options.ready ) {
options.ready();
}

setScratch(cy, 'options', options);
}
Expand Down

0 comments on commit 7b6ae3e

Please sign in to comment.