robicch / jQueryGantt

jQuery Gantt editor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problems with aligned svg gantt objects after integrating into a custom component

pokecheater opened this issue · comments

Hey TWGantt-Team,

I am facing another issue and I am not sure what causing it. Maybe you can enlight me how to update the svg objects after scrolling.

So here is my problem:
As I wrote in an previous issue I integrated your gantt component into another web application. Now after scrolling my tasks are aligned wrongly.
If I am moving them they will be aligned correctly again.

So Image after down and up scrolling
image

And here is the situation again after down and up scrolling and moving any task. (it looks good again).

image

So my idea to fix this issue is force an update on the gantt diagram svg view, but I was not able to find out how to do so...

So basically my idea relates to the fs.scroll function inside ganttUtilities.js.

f```
s.scroll(function (e) {
console.log("scrolling started");
var el = $(this);
var top = el.scrollTop();

  var firstBoxHeader = firstBox.find(".ganttFixHead");
  var secondBoxHeader = secondBox.find(".ganttFixHead");

  if (el.is(".splitBox1") && stopScroll != "splitBox2") {
    stopScroll = "splitBox1";
    secondBox.scrollTop(top);
  } else if (el.is(".splitBox2") && stopScroll != "splitBox1") {
    stopScroll = "splitBox2";
    firstBox.scrollTop(top);
  }


  if (Math.abs(top-lastScrollTop)>10) {
    firstBoxHeader.css('top', top).hide();
    secondBoxHeader.css('top', top).hide();
  }
  lastScrollTop=top;

  where.stopTime("reset").oneTime(100, "reset", function () {

      stopScroll = "";
      top = el.scrollTop();

      firstBoxHeader.css('top', top).fadeIn();
      secondBoxHeader.css('top', top).fadeIn();

  });
});

I think here I want to force an update on the gantt svg view, this should do the trick, but which function do I have to call for that?

Found a workaround :).
Because I was placing the gantt diagram into another div which has a maximum size the srolling was applied on that element and because the calculation for drawing the svg elements based on the absolute scrollTop value based without a outer div the more I scrolled the more displaced the elements became (because the scroll value was added to their y position).

--> By removing the offsetParent().scrollTop value from the calculation the element is again placed correctly. So I just had to remove this value from
_createTaskSVG function and
_createBaselinsSVG function and
_buildRectFromTask

and everything worked out fine again :).