.. _nbsvgpanzoomrst:

==============================================
Javascript library in a notebook: svg.pan-zoom
==============================================


.. only:: html

    **Links:** :download:`notebook <nb_svgpanzoom.ipynb>`, :downloadlink:`html <nb_svgpanzoom2html.html>`, :download:`PDF <nb_svgpanzoom.pdf>`, :download:`python <nb_svgpanzoom.py>`, :downloadlink:`slides <nb_svgpanzoom.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_svgpanzoom.ipynb|*`


Tries `svg.pan-zoom <http://jillix.github.io/svg.pan-zoom.js/>`__ in a
notebook.

.. code:: ipython3

    from jyquickhelper import RenderJS
    css = None
    libs = ['http://www.xavierdupre.fr/js/svg/svg.min.js',
            'http://www.xavierdupre.fr/js/svgpanzoom/svg.draggy.js',
            'http://www.xavierdupre.fr/js/svgpanzoom/svg.pan-zoom.min.js']
    script = """
    var divElement = document.querySelector('#__ID__');
    divElement.innerHTML = '<svg id="idrep">' +
            '<rect x="10" y="10" height="100" width="100" ' +
            'style="stroke:#ff0000; fill: #00ffff"/>' +
            '</svg>';
    var can = new SVG("idrep").size('600', '300');
    var nodes = can.group();
    var g1 = nodes.group().translate(100, 100).draggy();
    g1.circle(80).fill("#C2185B");
    nodes.panZoom();
    """
    jr = RenderJS(script, css=css, libs=libs, style="width:600px;height:300px;border-style:solid;")
    jr






.. raw:: html

    <div id="M86cd438e37bf4a66906ae66439babee0-cont"><div id="M86cd438e37bf4a66906ae66439babee0" style="width:600px;height:300px;border-style:solid;"></div></div>
    <script>

    require(['http://www.xavierdupre.fr/js/svg/svg.min.js','http://www.xavierdupre.fr/js/svgpanzoom/svg.draggy.js','http://www.xavierdupre.fr/js/svgpanzoom/svg.pan-zoom.min.js'], function() { 
    var divElement = document.querySelector('#M86cd438e37bf4a66906ae66439babee0');
    divElement.innerHTML = '<svg id="idrep">' +
            '<rect x="10" y="10" height="100" width="100" ' +
            'style="stroke:#ff0000; fill: #00ffff"/>' +
            '</svg>';
    var can = new SVG("idrep").size('600', '300');
    var nodes = can.group();
    var g1 = nodes.group().translate(100, 100).draggy();
    g1.circle(80).fill("#C2185B");
    nodes.panZoom();
     });

    </script>




The ball can be moved, not zoomed. The notebook is probably catching
this event.

.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <div id="M86cd438e37bf4a66906ae66439babee0-cont"><div id="M86cd438e37bf4a66906ae66439babee0" style="width:600px;height:300px;border-style:solid;"></div></div>
    <script>
    require(['http://www.xavierdupre.fr/js/svg/svg.min.js','http://www.xavierdupre.fr/js/svgpanzoom/svg.draggy.js','http://www.xavierdupre.fr/js/svgpanzoom/svg.pan-zoom.min.js'], function() { 
    var divElement = document.querySelector('#M86cd438e37bf4a66906ae66439babee0');
    divElement.innerHTML = '<svg id="idrep">' +
            '<rect x="10" y="10" height="100" width="100" ' +
            'style="stroke:#ff0000; fill: #00ffff"/>' +
            '</svg>';
    var can = new SVG("idrep").size('600', '300');
    var nodes = can.group();
    var g1 = nodes.group().translate(100, 100).draggy();
    g1.circle(80).fill("#C2185B");
    nodes.panZoom();
     });
    </script>