Commit 31b608e8 authored by Mathieu Giraud's avatar Mathieu Giraud

Merge branch 'feature-c/auto_resize' into 'dev'

Feature c/auto resize

See merge request !598
parents 3135e520 c92a1fde
Pipeline #118348 passed with stages
in 11 minutes and 45 seconds
......@@ -134,7 +134,7 @@ Builder.prototype = {
var sel = window.getSelection();
sel.removeAllRanges();
this.m.resize();
//this.m.resize();
}
},
......@@ -457,7 +457,7 @@ Builder.prototype = {
val = 'flex';
}
$left.css('display', val);
this.m.resize();
//this.m.resize();
},
build_top_container: function () {
......
......@@ -74,10 +74,9 @@
* */
function Graph(id, model, database) {
//
View.call(this, model);
View.call(this, model, id);
this.useSmartUpdateElemStyle = false;
this.id = id;
this.resizeW = 1; //coeff d'agrandissement/réduction largeur
this.resizeH = 1; //coeff d'agrandissement/réduction hauteur
......
......@@ -22,8 +22,7 @@
*/
function Info(id, model, builder) {
View.call(this, model);
this.id = id;
View.call(this, model, id);
this.builder = builder;
}
......
......@@ -56,7 +56,7 @@ function Model() {
this.checkBrowser();
this.germlineList = new GermlineList()
this.build();
window.onresize = function () { self.resize(); };
//window.onresize = function () { self.resize(); };
this.NORM_FALSE = "no_norm"
this.NORM_EXPECTED = "expected"
......
......@@ -35,10 +35,8 @@
function ScatterPlot(id, model, database, default_preset) {
var self = this;
View.call(this, model);
View.call(this, model, id);
this.db = database;
this.id = id; //ID of the scatterPlot div
//size ( computed value -> resize() function)
this.resizeCoef = 1; //Multiplifying factor, application to nodes radius
......
......@@ -29,8 +29,10 @@
* @class View
* @constructor
* */
function View(model) {
function View(model, id) {
var self = this;
this.m = model;
this.id = id;
this.m.view.push(this); //Model's sync
//smartUpdate
......@@ -55,6 +57,10 @@ function View(model) {
this.updateElemStyleList = {};
this.updateElemStyleMinWait = 10; //update will at least wait XXX(ms) before starting
this.updateElemStyleMaxWait = 50; //update will start anyway if the wait has been more than XXX(ms)
//auto-resize (don't try to set auto-resize for view without a main div)
if (typeof this.id != "undefined")
this.initAutoResize()
}
View.prototype = {
......@@ -243,6 +249,55 @@ View.prototype = {
return false;
},
/**
* set an observer on the view main div to detect size changes and trigger a resize
*
* */
initAutoResize: function(){
var self = this;
this.autoresizeCounter = 0;
if (typeof ResizeObserver != "undefined"){
//modern browser solution
this.resizeObserver = new ResizeObserver( function(){self.autoResize()} )
this.resizeObserver.observe(document.getElementById(this.id));
}
else{
//fallback for older browser
var div = document.getElementById(this.id)
this.memWidth = div.offsetWidth
this.memHeight= div.offsetHeight
setInterval( function(){
var div = document.getElementById(self.id)
var w = div.offsetWidth
var h = div.offsetHeight
if (div.offsetWidth != self.memWidth ||
div.offsetHeight != self.memHeight ){
self.memWidth = div.offsetWidth
self.memHeight = div.offsetHeight
self.autoResize()
}
}, 500)
}
},
/**
* called by resizeObserver on size change
*
* */
autoResize: function() {
var self = this
this.autoresizeCounter++
setTimeout(function(){
self.autoresizeCounter--
if (self.autoresizeCounter==0)
self.resize()
}, 500)
},
/**
* resize view to match his div size <br>
* each view must be able to match the size of it's div
......
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