Images is clipping because of a lot of calls

Scheduler Javascript
#1

Hello,

I’m building a planning using the timeline view and I made a lot of customization in it. Currently I’m trying to optimize a little bit because some functions are called a lot, which can be pretty laggy.I noticed that a lot of rendering functions (like timeline_scale_label to custom Y axis on timeline view) are called two times on first init page. Is there a reason ?

But my main problem is : it’s also called every time you make something in the planning. The thing is that I have images on my Y axis, using this function :

// Permet de personnaliser les cellules des ressources en axe Y
scheduler.templates.timeline_scale_label = function(key, label, section){
	// Une ressource avec key "open" signifie qu'il s'agit d'un dossier
	if(section.open  === undefined) {
		let avatar = section.avatar !== null ? section.avatar : "default.jpg";
		let css = '<div class="container-scale-label" style="background-color:#' + section.couleur + ';">';
		css += '<div><img src="images/ressources/' + avatar + '" alt="'+ label + '"/></div>';
		css += '<div>' + label + '</div>';
		css += '</div>';

		return css;
	}
	else {
		return "";
	}						
};

Which works fine. But because it’s called every time you update an event, add one, move something, it causes some “clipping”. In my project, this kind of function could be called only one time (initialization of the page). Is there some tricks to do this ? To be more specific : clipping problem happens when console is open (on Chrome), but question remains.

Thanks in advance :slight_smile:

#2

Hello @Damien ,

I noticed that a lot of rendering functions (like timeline_scale_label to custom Y axis on timeline view) are called two times on first init page. Is there a reason ?

It relates to the internal logic of the scheduler(some size calculations), and there is no easy way to remove the additional rendering.

Which works fine. But because it’s called every time you update an event, add one, move something, it causes some “clipping”. In my project, this kind of function could be called only one time (initialization of the page). Is there some tricks to do this ? To be more specific : clipping problem happens when console is open (on Chrome), but question remains.

Unfortunately, there is also no way to change it, as it’s related to the internal logic of the timeline extension.

Btw, I tried to reproduce the clipping issue, but it worked quite correctly with opened/closed console(Chrome 91.0.4472.101):
https://recordit.co/7V12NNj6DV

Demo I tried:
http://snippet.dhtmlx.com/5/c04ea2485

Maybe there is some additional code in your project that causes such an issue?

Kind regards,

#3

Hello,

Thank you for your answer. Ok for the first few questions.
I think this is because the images are resized via CSS. Natively they are bigger. In the long run, I think I’ll resize image to the correct size at the beginning.