A raphael.js to snap.svg migration journey

[mathilde...@echinopsii.net]

Hello Snap team,

I'm just beginning the migration of our Ariane map graph render from RaphaelJS to SnapSVG. As there is no specific paper on that point - as far as I see on the net - I decided to push this topic on the Snap.SVG google group to track all the stuff I need to change on my original Raphael.JS code. And also push my questions to Snap community as I see some existing function in RaphaelJS I don't see in Snap...

1. DOM element
   
   DOM element must be <svg> (ie: no more <div>)
   
   
   
   
2. Raphael.fn migration
   
   Raphael.fn can be migrated to Snap with Snap.plugin()
   
   Raphael code snip :
   
   
   Raphael.fn.myMethod = function() {
   ...
   }
   
   Snap code snip :
   
   
   Snap.plugin(function (Snap, Element, Paper, global, Fragment) {

   Paper.prototype.mymethod = function () {
   ...

   }

   });
   
   
   
   
3. Raphael.Paper.set()
   
   Raphael Paper set can be migrated to Snap with Paper.group() or Paper.g()
   
   
   
   
4. Raphael.Element.toBack() and Raphael.Element.toFront()
   
   I'm locked here... I don't see the counterpart methods in Snap. Any idea on that point ?

Cheers,

Mathilde

[Ian]

Worth noting just in case not aware, that a set is different to a group, and you can still use sets in Snap. A group is an actual svg container element, whereas sets are just an array like where you can apply some methods on all the elements. 

For toFront(), I imagine you can just (re)append the element and it would get moved to the front as part of normal dom/svg.

[julian joseph]

This was very helpful. :) Thanks

[da-di-da]

assuming there is only 1 svg element in the document,

here are toFront() & toBack() functions:

  function lastEl(_d0) {

        var svg1 = Snap.select('svg');

        var set1 = svg1.selectAll('*');

        var items1 = set1.items;

        var last1 = items1.length - 1;

        var res1 = items1[last1];

        return res1;

    }

    function toFront(el0) {

        var p1 = Snap.select('svg');

        var mlast1 = lastEl();

        return mlast1 != null ? mlast1.after(el0) : null;

    }

    function toBack(el0) {

        var p1 = Snap.select('svg');

        var mfirst1 = p1.select('*');

        function first1(f1) {

            return f1.before(el0);

        }

        return mfirst1 != null ? first1(mfirst1) : null;

    }