Commit 6d268df1 authored by Anton Petrov's avatar Anton Petrov
Browse files

Add svg-pan-zoom library for secondary structures

parent 99ee7ddb
......@@ -9,6 +9,7 @@ var secondary_structures = {
ctrl.fornaSize = 500;
ctrl.numStructures = 0;
ctrl.panZoom;
ctrl.$onInit = function() {
ctrl.fetchSecondaryStructures().then(
......@@ -78,8 +79,21 @@ var secondary_structures = {
if (style.length > 0) {
var parent = style[0].parentNode;
parent.removeChild(style[0]);
var parent2 = parent.parentNode;
parent2.removeChild(parent);
}
}
ctrl.panZoom = svgPanZoom('#rna_ss_traveler svg', {
controlIconsEnabled: true,
fit: false, // see https://github.com/ariutta/svg-pan-zoom/issues/100
});
// fix the svg control position
$('#svg-pan-zoom-controls').attr('transform', '');
// increase the font size
$('.traveler-secondary-structure-svg').css('font-size', '11px');
ctrl.showSecondaryStructureTab();
};
......
<div id="2d" style="min-height: 600px">
<div class="col-md-12">
<h2>Secondary structure</h2>
<div ng-show="$ctrl.secondaryStructures.useForna && $ctrl.numStructures > 0">
......@@ -21,7 +20,7 @@
</p>
</div>
<div id="rna_ss_traveler"></div>
<div id="rna_ss_traveler" class="thumbnail col-md-12 col-sm-12 col-xs-12" style="overflow: auto;"></div>
<div class="panel panel-default traveler-legend">
<div class="panel-body">
......@@ -52,6 +51,4 @@
<button class="btn btn-primary" ng-click="$ctrl.save2D()">Download</button>
</div>
</div>
</div>
......@@ -48,6 +48,7 @@
"moment": "^2.18.1",
"query": "^0.2.0",
"slick-carousel": "^1.8.1",
"svg-pan-zoom": "^3.6.0",
"timelinejs3": "^3.4.0",
"tipsy-1a": "^1.0.0",
"underscore": "^1.8.3"
......
......@@ -164,6 +164,7 @@ limitations under the License.
<script src="{% static "node_modules/jquery.mousehold/jquery.mousehold.js" %}"></script>
<script src="{% static "node_modules/jquery.mousewheel/jquery.mousewheel.js" %}"></script>
<script src="{% static "node_modules/tipsy-1a/src/javascripts/jquery.tipsy.js" %}"></script>
<script src="{% static "node_modules/svg-pan-zoom/dist/svg-pan-zoom.js" %}"></script>
<!-- New genoverse contains tooltip from jquery ui, it conflicts with bootstrap - bridge it! -->
<!-- Bridge doesn't work now
<!-- <script>$.widget.bridge('uitooltip', $.ui.tooltip);</script> -->
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment