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

Links: notebook, html, PDF, python, slides, slides(2), GitHub

Tries svg.pan-zoom in a notebook.

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

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

print(jr._repr_html_())
<div id="M10218b4a268d41fab77b72785805c8cf-cont" style="width:600px;height:200px;border-style:solid;"><div id="M10218b4a268d41fab77b72785805c8cf"></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('#M10218b4a268d41fab77b72785805c8cf');
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>