From df404a6eaf38cca0a2b78213b1323f73deba3b1c Mon Sep 17 00:00:00 2001
From: juanf <juanf>
Date: Tue, 4 Mar 2014 10:50:31 +0000
Subject: [PATCH] BIS-604 / SP-1211: ELN UI - Hierarchical View (Zoom and Pan
Controls Polishment)
SVN: 30806
---
.../html/js/views/SampleHierarchy.js | 63 +++++++++++--------
1 file changed, 37 insertions(+), 26 deletions(-)
diff --git a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleHierarchy.js b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleHierarchy.js
index 2c0313eabd8..e6cbb492052 100644
--- a/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleHierarchy.js
+++ b/plasmid/source/core-plugins/newbrowser/1/as/webapps/newbrowser/html/js/views/SampleHierarchy.js
@@ -437,11 +437,7 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
.attr('width', $(document).width() - 30)
.attr('height', $(document).height() - 120)
- d3.select('#svgMapContainer')
- .call(d3.behavior.zoom().on('zoom', function() {
- var ev = d3.event;
- svgG.attr('transform', 'translate(' + ev.translate + ') scale(' + ev.scale + ')');
- })).on("dblclick.zoom", null);
+ d3.select('#svgMapContainer').call(zoomFunc);
}
this._makeSVG = function(tag, attrs) {
@@ -452,33 +448,48 @@ function SampleHierarchy(serverFacade, inspector, containerId, profile, sample)
}
//
- // Zoom and Pan controls
+ // Zoom and Pan API (Can be used externaly)
//
+
this.pan = function(dx, dy)
{
- var svgTransform = d3.select('#svgMap').attr("transform");
-
- var svgTransformTranslate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(svgTransform);
- var translateX = parseFloat(svgTransformTranslate[1]) + dx;
- var translateY = parseFloat(svgTransformTranslate[2]) + dy;
-
- var svgTransformScale = /scale\(([^\s,)]+)/.exec(svgTransform);
- var scaleRatio = parseFloat(svgTransformScale[1]);
-
- d3.select('#svgMap').attr('transform', 'translate(' + translateX + ',' + translateY + ') scale(' + scaleRatio + ')');
+ var newTranslate = [projection.translate[0] + dx, projection.translate[1] + dy];
+ zoomFunc.translate(newTranslate);
+ projection.translate = newTranslate;
+ d3.select('#svgMap').attr('transform', 'translate(' + newTranslate + ') scale(' + projection.scale + ')');
}
this.zoom = function(scale)
{
- var svgTransform = d3.select('#svgMap').attr("transform");
-
- var svgTransformTranslate = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(svgTransform);
- var translateX = parseFloat(svgTransformTranslate[1]);
- var translateY = parseFloat(svgTransformTranslate[2]);
-
- var svgTransformScale = /scale\(([^\s,)]+)/.exec(svgTransform);
- var scaleRatio = parseFloat(svgTransformScale[1]) * scale;
-
- d3.select('#svgMap').attr('transform', 'translate(' + translateX + ',' + translateY + ') scale(' + scaleRatio + ')');
+ var newScale = projection.scale * scale;
+ zoomFunc.scale(newScale);
+ projection.scale = newScale;
+ d3.select('#svgMap').attr('transform', 'translate(' + projection.translate + ') scale(' + newScale + ')');
}
+
+ //
+ // Zoom and Pan Internals (To keep in sync internal D3 projection of the translate and scale properties with the DOM ones)
+ //
+ var projection = {
+ scale : 1,
+ translate : [20, 20]
+ };
+
+ var zoomFunc = d3.behavior.zoom()
+ .translate(projection.translate)
+ .scale(projection.scale)
+ .on("zoom", move);
+
+ function move() {
+ var t = d3.event.translate,
+ s = d3.event.scale;
+
+ zoomFunc.translate(t);
+ zoomFunc.scale(s);
+
+ projection.translate = t;
+ projection.scale = s;
+
+ d3.select('#svgMap').attr('transform', 'translate(' + t + ') scale(' + s + ')');
+ }
}
--
GitLab