pan, zoom for flow diagram (SVG)

[andychoi]

Hi, Mikhail

I'd like to suggest to include in modal window to show process diagram.
https://github.com/luncheon/svg-pan-zoom-container
It is especially useful if you have large complex flow.

Here is how I did using bootstrap 5.0. You may incorporate into viewflow(material design).

{% block head_js %}
<script src="{% static 'js/svg-pan-zoom-container-0.6.1.js' %}" type="text/javascript"></script>
{% endblock %}

{% block content %}

<div class="card">
            <div class="card-action card-header">
                <div class="row">
                    <div class="col">
                        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#chartModal">
                            Flow
                        </button>
...

<div class="modal fade " id="chartModal" tabindex="-1" aria-labelledby="chartModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" >
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="chartModalLabel">Process Flow</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" >
                <!-- svg-pan-zoom-container -->
                <div data-zoom-on-wheel="zoom-amount: 0.0025;min-scale:0.5;max-scale:5;scaling-property: 'width/height'" 
                    data-pan-on-drag="button:left" 
                    class="svg-view"  style="height: 60vh; overflow-x: hidden!important; overflow-y: hidden!important;">
                    <img class="responsive-img" src="{% reverse  process 'process_chart' %}" alt="flow graph" />
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}