Skip to content

Instantly share code, notes, and snippets.

@maxkfranz

maxkfranz/code.js

Last active February 25, 2020 06:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maxkfranz/aedff159b0df05ccfaa5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maxkfranz/aedff159b0df05ccfaa5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. maxkfranz revised this gist Apr 11, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions code.js
    View file
    Original file line number Diff line number Diff line change
    @@ -121,8 +121,8 @@ cy.on('tap', 'node', function( e ){
    var duration = 500;
    for( var i = food.length - 1; i >= 0; i-- ){ (function(){
    var thisFood = food[i];
    var eater = thisFood.connectedEdges(function(){
    return this.target().same(thisFood);
    var eater = thisFood.connectedEdges(function(el){
    return el.target().same(thisFood);
    }).source();

    thisFood.delay( delay, function(){
  2. maxkfranz revised this gist Apr 11, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions code.js
    View file
    Original file line number Diff line number Diff line change
    @@ -104,8 +104,8 @@ cy.on('tap', 'node', function( e ){
    nodes.addClass('eater');

    for(;;){
    var connectedEdges = nodes.connectedEdges(function(){
    return !this.target().anySame( nodes );
    var connectedEdges = nodes.connectedEdges(function(el){
    return !el.target().anySame( nodes );
    });

    var connectedNodes = connectedEdges.targets();
  3. maxkfranz revised this gist Apr 11, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions code.js
    View file
    Original file line number Diff line number Diff line change
    @@ -96,8 +96,8 @@ var cy = cytoscape({
    }
    }); // cy init

    cy.on('tap', 'node', function(){
    var nodes = this;
    cy.on('tap', 'node', function( e ){
    var nodes = e.target;
    var tapped = nodes;
    var food = [];

  4. maxkfranz revised this gist Jun 8, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion code.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,8 @@ var cy = cytoscape({
    'width': 6,
    'target-arrow-shape': 'triangle',
    'line-color': '#ffaaaa',
    'target-arrow-color': '#ffaaaa'
    'target-arrow-color': '#ffaaaa',
    'curve-style': 'bezier'
    })
    .selector('#bird')
    .css({
  5. maxkfranz revised this gist Oct 21, 2015. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions code.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,9 @@ $(function(){ // on dom ready
    var cy = cytoscape({
    container: document.getElementById('cy'),

    boxSelectionEnabled: false,
    autounselectify: true,

    style: cytoscape.stylesheet()
    .selector('node')
    .css({
  6. maxkfranz revised this gist Aug 24, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,6 +3,7 @@
    <head>
    <link href="style.css" rel="stylesheet" />
    <meta charset=utf-8 />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <title>Images</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
  7. maxkfranz revised this gist May 5, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,12 +3,12 @@
    <head>
    <link href="style.css" rel="stylesheet" />
    <meta charset=utf-8 />
    <title>Cytoscape.js initialisation</title>
    <title>Images</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
    <script src="code.js"></script>
    </head>
    <body>
    <div id="cy"></div>
    </body>
    </html>
    </html>
  8. maxkfranz revised this gist Oct 28, 2014. 2 changed files with 0 additions and 0 deletions.
    0 jsbin.kahar.js → code.js
    View file
    File renamed without changes.
    0 jsbin.kahar.css → style.css
    View file
    File renamed without changes.
  9. maxkfranz revised this gist Oct 28, 2014. 1 changed file with 7 additions and 345 deletions.
    352 changes: 7 additions & 345 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,352 +1,14 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="[ Cytoscape.js images]" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <meta charset=utf-8 />
    <title>Cytoscape.js images</title>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
    <style id="jsbin-css">
    body {
    font: 14px helvetica neue, helvetica, arial, sans-serif;
    }

    #cy {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    }

    #eat {
    position: absolute;
    left: 1em;
    top: 1em;
    font-size: 1em;
    z-index: -1;
    color: #c88;
    }
    </style>
    <title>Cytoscape.js initialisation</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
    <script src="code.js"></script>
    </head>
    <body>
    <div id="cy"></div>
    <div id="eat">Tap to eat</div>
    <script id="jsbin-javascript">
    $(function(){ // on dom ready

    // photos from flickr with creative commons license

    var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
    .selector('node')
    .css({
    'height': 80,
    'width': 80,
    'background-fit': 'cover',
    'border-color': '#000',
    'border-width': 3,
    'border-opacity': 0.5
    })
    .selector('.eating')
    .css({
    'border-color': 'red'
    })
    .selector('.eater')
    .css({
    'border-width': 9
    })
    .selector('edge')
    .css({
    'width': 6,
    'target-arrow-shape': 'triangle',
    'line-color': '#ffaaaa',
    'target-arrow-color': '#ffaaaa'
    })
    .selector('#bird')
    .css({
    'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
    })
    .selector('#cat')
    .css({
    'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
    })
    .selector('#ladybug')
    .css({
    'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
    })
    .selector('#aphid')
    .css({
    'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
    })
    .selector('#rose')
    .css({
    'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
    })
    .selector('#grasshopper')
    .css({
    'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
    })
    .selector('#plant')
    .css({
    'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
    })
    .selector('#wheat')
    .css({
    'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
    }),

    elements: {
    nodes: [
    { data: { id: 'cat' } },
    { data: { id: 'bird' } },
    { data: { id: 'ladybug' } },
    { data: { id: 'aphid' } },
    { data: { id: 'rose' } },
    { data: { id: 'grasshopper' } },
    { data: { id: 'plant' } },
    { data: { id: 'wheat' } }
    ],
    edges: [
    { data: { source: 'cat', target: 'bird' } },
    { data: { source: 'bird', target: 'ladybug' } },
    { data: { source: 'bird', target: 'grasshopper' } },
    { data: { source: 'grasshopper', target: 'plant' } },
    { data: { source: 'grasshopper', target: 'wheat' } },
    { data: { source: 'ladybug', target: 'aphid' } },
    { data: { source: 'aphid', target: 'rose' } }
    ]
    },

    layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
    }
    }); // cy init

    cy.on('tap', 'node', function(){
    var nodes = this;
    var tapped = nodes;
    var food = [];

    nodes.addClass('eater');

    for(;;){
    var connectedEdges = nodes.connectedEdges(function(){
    return !this.target().anySame( nodes );
    });

    var connectedNodes = connectedEdges.targets();

    Array.prototype.push.apply( food, connectedNodes );

    nodes = connectedNodes;

    if( nodes.empty() ){ break; }
    }

    var delay = 0;
    var duration = 500;
    for( var i = food.length - 1; i >= 0; i-- ){ (function(){
    var thisFood = food[i];
    var eater = thisFood.connectedEdges(function(){
    return this.target().same(thisFood);
    }).source();

    thisFood.delay( delay, function(){
    eater.addClass('eating');
    } ).animate({
    position: eater.position(),
    css: {
    'width': 10,
    'height': 10,
    'border-width': 0,
    'opacity': 0
    }
    }, {
    duration: duration,
    complete: function(){
    thisFood.remove();
    }
    });

    delay += duration;
    })(); } // for

    }); // on tap

    }); // on dom ready
    </script>


    <script id="jsbin-source-css" type="text/css">body {
    font: 14px helvetica neue, helvetica, arial, sans-serif;
    }

    #cy {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    }

    #eat {
    position: absolute;
    left: 1em;
    top: 1em;
    font-size: 1em;
    z-index: -1;
    color: #c88;
    }</script>

    <script id="jsbin-source-javascript" type="text/javascript">$(function(){ // on dom ready

    // photos from flickr with creative commons license

    var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
    .selector('node')
    .css({
    'height': 80,
    'width': 80,
    'background-fit': 'cover',
    'border-color': '#000',
    'border-width': 3,
    'border-opacity': 0.5
    })
    .selector('.eating')
    .css({
    'border-color': 'red'
    })
    .selector('.eater')
    .css({
    'border-width': 9
    })
    .selector('edge')
    .css({
    'width': 6,
    'target-arrow-shape': 'triangle',
    'line-color': '#ffaaaa',
    'target-arrow-color': '#ffaaaa'
    })
    .selector('#bird')
    .css({
    'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
    })
    .selector('#cat')
    .css({
    'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
    })
    .selector('#ladybug')
    .css({
    'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
    })
    .selector('#aphid')
    .css({
    'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
    })
    .selector('#rose')
    .css({
    'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
    })
    .selector('#grasshopper')
    .css({
    'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
    })
    .selector('#plant')
    .css({
    'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
    })
    .selector('#wheat')
    .css({
    'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
    }),

    elements: {
    nodes: [
    { data: { id: 'cat' } },
    { data: { id: 'bird' } },
    { data: { id: 'ladybug' } },
    { data: { id: 'aphid' } },
    { data: { id: 'rose' } },
    { data: { id: 'grasshopper' } },
    { data: { id: 'plant' } },
    { data: { id: 'wheat' } }
    ],
    edges: [
    { data: { source: 'cat', target: 'bird' } },
    { data: { source: 'bird', target: 'ladybug' } },
    { data: { source: 'bird', target: 'grasshopper' } },
    { data: { source: 'grasshopper', target: 'plant' } },
    { data: { source: 'grasshopper', target: 'wheat' } },
    { data: { source: 'ladybug', target: 'aphid' } },
    { data: { source: 'aphid', target: 'rose' } }
    ]
    },

    layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
    }
    }); // cy init

    cy.on('tap', 'node', function(){
    var nodes = this;
    var tapped = nodes;
    var food = [];

    nodes.addClass('eater');

    for(;;){
    var connectedEdges = nodes.connectedEdges(function(){
    return !this.target().anySame( nodes );
    });

    var connectedNodes = connectedEdges.targets();

    Array.prototype.push.apply( food, connectedNodes );

    nodes = connectedNodes;

    if( nodes.empty() ){ break; }
    }

    var delay = 0;
    var duration = 500;
    for( var i = food.length - 1; i >= 0; i-- ){ (function(){
    var thisFood = food[i];
    var eater = thisFood.connectedEdges(function(){
    return this.target().same(thisFood);
    }).source();

    thisFood.delay( delay, function(){
    eater.addClass('eating');
    } ).animate({
    position: eater.position(),
    css: {
    'width': 10,
    'height': 10,
    'border-width': 0,
    'opacity': 0
    }
    }, {
    duration: duration,
    complete: function(){
    thisFood.remove();
    }
    });

    delay += duration;
    })(); } // for

    }); // on tap

    }); // on dom ready</script></body>
    <div id="cy"></div>
    </body>
    </html>
  10. maxkfranz created this gist Oct 28, 2014.
    352 changes: 352 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,352 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="[ Cytoscape.js images]" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <meta charset=utf-8 />
    <title>Cytoscape.js images</title>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
    <style id="jsbin-css">
    body {
    font: 14px helvetica neue, helvetica, arial, sans-serif;
    }

    #cy {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    }

    #eat {
    position: absolute;
    left: 1em;
    top: 1em;
    font-size: 1em;
    z-index: -1;
    color: #c88;
    }
    </style>
    </head>
    <body>
    <div id="cy"></div>
    <div id="eat">Tap to eat</div>
    <script id="jsbin-javascript">
    $(function(){ // on dom ready

    // photos from flickr with creative commons license

    var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
    .selector('node')
    .css({
    'height': 80,
    'width': 80,
    'background-fit': 'cover',
    'border-color': '#000',
    'border-width': 3,
    'border-opacity': 0.5
    })
    .selector('.eating')
    .css({
    'border-color': 'red'
    })
    .selector('.eater')
    .css({
    'border-width': 9
    })
    .selector('edge')
    .css({
    'width': 6,
    'target-arrow-shape': 'triangle',
    'line-color': '#ffaaaa',
    'target-arrow-color': '#ffaaaa'
    })
    .selector('#bird')
    .css({
    'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
    })
    .selector('#cat')
    .css({
    'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
    })
    .selector('#ladybug')
    .css({
    'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
    })
    .selector('#aphid')
    .css({
    'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
    })
    .selector('#rose')
    .css({
    'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
    })
    .selector('#grasshopper')
    .css({
    'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
    })
    .selector('#plant')
    .css({
    'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
    })
    .selector('#wheat')
    .css({
    'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
    }),

    elements: {
    nodes: [
    { data: { id: 'cat' } },
    { data: { id: 'bird' } },
    { data: { id: 'ladybug' } },
    { data: { id: 'aphid' } },
    { data: { id: 'rose' } },
    { data: { id: 'grasshopper' } },
    { data: { id: 'plant' } },
    { data: { id: 'wheat' } }
    ],
    edges: [
    { data: { source: 'cat', target: 'bird' } },
    { data: { source: 'bird', target: 'ladybug' } },
    { data: { source: 'bird', target: 'grasshopper' } },
    { data: { source: 'grasshopper', target: 'plant' } },
    { data: { source: 'grasshopper', target: 'wheat' } },
    { data: { source: 'ladybug', target: 'aphid' } },
    { data: { source: 'aphid', target: 'rose' } }
    ]
    },

    layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
    }
    }); // cy init

    cy.on('tap', 'node', function(){
    var nodes = this;
    var tapped = nodes;
    var food = [];

    nodes.addClass('eater');

    for(;;){
    var connectedEdges = nodes.connectedEdges(function(){
    return !this.target().anySame( nodes );
    });

    var connectedNodes = connectedEdges.targets();

    Array.prototype.push.apply( food, connectedNodes );

    nodes = connectedNodes;

    if( nodes.empty() ){ break; }
    }

    var delay = 0;
    var duration = 500;
    for( var i = food.length - 1; i >= 0; i-- ){ (function(){
    var thisFood = food[i];
    var eater = thisFood.connectedEdges(function(){
    return this.target().same(thisFood);
    }).source();

    thisFood.delay( delay, function(){
    eater.addClass('eating');
    } ).animate({
    position: eater.position(),
    css: {
    'width': 10,
    'height': 10,
    'border-width': 0,
    'opacity': 0
    }
    }, {
    duration: duration,
    complete: function(){
    thisFood.remove();
    }
    });

    delay += duration;
    })(); } // for

    }); // on tap

    }); // on dom ready
    </script>


    <script id="jsbin-source-css" type="text/css">body {
    font: 14px helvetica neue, helvetica, arial, sans-serif;
    }

    #cy {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    }

    #eat {
    position: absolute;
    left: 1em;
    top: 1em;
    font-size: 1em;
    z-index: -1;
    color: #c88;
    }</script>

    <script id="jsbin-source-javascript" type="text/javascript">$(function(){ // on dom ready

    // photos from flickr with creative commons license

    var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
    .selector('node')
    .css({
    'height': 80,
    'width': 80,
    'background-fit': 'cover',
    'border-color': '#000',
    'border-width': 3,
    'border-opacity': 0.5
    })
    .selector('.eating')
    .css({
    'border-color': 'red'
    })
    .selector('.eater')
    .css({
    'border-width': 9
    })
    .selector('edge')
    .css({
    'width': 6,
    'target-arrow-shape': 'triangle',
    'line-color': '#ffaaaa',
    'target-arrow-color': '#ffaaaa'
    })
    .selector('#bird')
    .css({
    'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
    })
    .selector('#cat')
    .css({
    'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
    })
    .selector('#ladybug')
    .css({
    'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
    })
    .selector('#aphid')
    .css({
    'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
    })
    .selector('#rose')
    .css({
    'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
    })
    .selector('#grasshopper')
    .css({
    'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
    })
    .selector('#plant')
    .css({
    'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
    })
    .selector('#wheat')
    .css({
    'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
    }),

    elements: {
    nodes: [
    { data: { id: 'cat' } },
    { data: { id: 'bird' } },
    { data: { id: 'ladybug' } },
    { data: { id: 'aphid' } },
    { data: { id: 'rose' } },
    { data: { id: 'grasshopper' } },
    { data: { id: 'plant' } },
    { data: { id: 'wheat' } }
    ],
    edges: [
    { data: { source: 'cat', target: 'bird' } },
    { data: { source: 'bird', target: 'ladybug' } },
    { data: { source: 'bird', target: 'grasshopper' } },
    { data: { source: 'grasshopper', target: 'plant' } },
    { data: { source: 'grasshopper', target: 'wheat' } },
    { data: { source: 'ladybug', target: 'aphid' } },
    { data: { source: 'aphid', target: 'rose' } }
    ]
    },

    layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
    }
    }); // cy init

    cy.on('tap', 'node', function(){
    var nodes = this;
    var tapped = nodes;
    var food = [];

    nodes.addClass('eater');

    for(;;){
    var connectedEdges = nodes.connectedEdges(function(){
    return !this.target().anySame( nodes );
    });

    var connectedNodes = connectedEdges.targets();

    Array.prototype.push.apply( food, connectedNodes );

    nodes = connectedNodes;

    if( nodes.empty() ){ break; }
    }

    var delay = 0;
    var duration = 500;
    for( var i = food.length - 1; i >= 0; i-- ){ (function(){
    var thisFood = food[i];
    var eater = thisFood.connectedEdges(function(){
    return this.target().same(thisFood);
    }).source();

    thisFood.delay( delay, function(){
    eater.addClass('eating');
    } ).animate({
    position: eater.position(),
    css: {
    'width': 10,
    'height': 10,
    'border-width': 0,
    'opacity': 0
    }
    }, {
    duration: duration,
    complete: function(){
    thisFood.remove();
    }
    });

    delay += duration;
    })(); } // for

    }); // on tap

    }); // on dom ready</script></body>
    </html>
    20 changes: 20 additions & 0 deletions jsbin.kahar.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    body {
    font: 14px helvetica neue, helvetica, arial, sans-serif;
    }

    #cy {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    }

    #eat {
    position: absolute;
    left: 1em;
    top: 1em;
    font-size: 1em;
    z-index: -1;
    color: #c88;
    }
    146 changes: 146 additions & 0 deletions jsbin.kahar.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,146 @@
    $(function(){ // on dom ready

    // photos from flickr with creative commons license

    var cy = cytoscape({
    container: document.getElementById('cy'),

    style: cytoscape.stylesheet()
    .selector('node')
    .css({
    'height': 80,
    'width': 80,
    'background-fit': 'cover',
    'border-color': '#000',
    'border-width': 3,
    'border-opacity': 0.5
    })
    .selector('.eating')
    .css({
    'border-color': 'red'
    })
    .selector('.eater')
    .css({
    'border-width': 9
    })
    .selector('edge')
    .css({
    'width': 6,
    'target-arrow-shape': 'triangle',
    'line-color': '#ffaaaa',
    'target-arrow-color': '#ffaaaa'
    })
    .selector('#bird')
    .css({
    'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
    })
    .selector('#cat')
    .css({
    'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
    })
    .selector('#ladybug')
    .css({
    'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
    })
    .selector('#aphid')
    .css({
    'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
    })
    .selector('#rose')
    .css({
    'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
    })
    .selector('#grasshopper')
    .css({
    'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
    })
    .selector('#plant')
    .css({
    'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
    })
    .selector('#wheat')
    .css({
    'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
    }),

    elements: {
    nodes: [
    { data: { id: 'cat' } },
    { data: { id: 'bird' } },
    { data: { id: 'ladybug' } },
    { data: { id: 'aphid' } },
    { data: { id: 'rose' } },
    { data: { id: 'grasshopper' } },
    { data: { id: 'plant' } },
    { data: { id: 'wheat' } }
    ],
    edges: [
    { data: { source: 'cat', target: 'bird' } },
    { data: { source: 'bird', target: 'ladybug' } },
    { data: { source: 'bird', target: 'grasshopper' } },
    { data: { source: 'grasshopper', target: 'plant' } },
    { data: { source: 'grasshopper', target: 'wheat' } },
    { data: { source: 'ladybug', target: 'aphid' } },
    { data: { source: 'aphid', target: 'rose' } }
    ]
    },

    layout: {
    name: 'breadthfirst',
    directed: true,
    padding: 10
    }
    }); // cy init

    cy.on('tap', 'node', function(){
    var nodes = this;
    var tapped = nodes;
    var food = [];

    nodes.addClass('eater');

    for(;;){
    var connectedEdges = nodes.connectedEdges(function(){
    return !this.target().anySame( nodes );
    });

    var connectedNodes = connectedEdges.targets();

    Array.prototype.push.apply( food, connectedNodes );

    nodes = connectedNodes;

    if( nodes.empty() ){ break; }
    }

    var delay = 0;
    var duration = 500;
    for( var i = food.length - 1; i >= 0; i-- ){ (function(){
    var thisFood = food[i];
    var eater = thisFood.connectedEdges(function(){
    return this.target().same(thisFood);
    }).source();

    thisFood.delay( delay, function(){
    eater.addClass('eating');
    } ).animate({
    position: eater.position(),
    css: {
    'width': 10,
    'height': 10,
    'border-width': 0,
    'opacity': 0
    }
    }, {
    duration: duration,
    complete: function(){
    thisFood.remove();
    }
    });

    delay += duration;
    })(); } // for

    }); // on tap

    }); // on dom ready