Visual Bug in Timeline

[SimonF]

Hi there,
we are trying to print the timeline and we are using the getPrintHTML-function.

If we are set labelColumnWidth to 200 the result is the shown in the first example, the events are off by a few hours/pixels.

In the second case I have removed the labelColumnWidth for the bug I initially wanted to report. Here you can see, that the events are also slightly off.
Especially for timelines with small days, this can confuse the user while printing the timeline.

Both issues were tested with the latest nightly SmartClient_v100p_2015-10-07_Pro in the latest versions of chrome and firefox


First example:

isc.VLayout.create({
  width : "100%",
  height : "100%",
  members : [
    isc.Timeline.create({
      "ID" : "thetimeline",
      "width" : "100%",
      "height" : "100%",
      "overflow" : "auto",
      "hideUsingDisplayNone" : false,
      "startDate" : new Date(2015, 9, 5),
      "endDate" : new Date(2015, 9, 16),
      "headerLevels" :
      [{
          "unit" : "day",
          "titleFormatter" : function (headerLevel, startDate, endDate, defaultValue, viewer) {
            return startDate.dayIndex;
          }
        }
      ],
      "canEditEvents" : false,
      "canCreateEvents" : false,
      "autoFetchData" : true,
      "showControlsBar" : false,
      "firstDayOfWeek" : 1,
      "weekPrefix" : "week",
      "todayBackgroundColor" : "#E0E0E0",
      "showEventHeaders" : false,
      "showEventDescriptions" : false,
      "clwGeneratedIndexName" : "timelineGeneratedIndex",
      "labelColumnWidth" : 200,
      "alternateLaneStyles" : true,
      "lanes" :
      [{
          "hierarchyLevel" : 0,
          "isOpen" : true,
          "height" : 30,
          "name" : "1",
          "title" : "Person 1"
        }, {
          "hierarchyLevel" : 1,
          "isOpen" : false,
          "height" : 30,
          "name" : "2",
          "title" : "Person 2"
        }
      ],
      "data" :
      [{
          "lane" : "2",
          "isTrip" : false,
          "description" : "away",
          "startDate" : new Date(2015, 9, 13, 0, 0),
          "backgroundColor" : "#758FFF",
          "showDate" : true,
          "endDate" : new Date(2015, 9, 13, 23, 59),
          "name" : "&nbsp"
        }, {
          "lane" : "2",
          "isTrip" : true,
          "description" : "away",
          "startDate" : new Date(2015, 9, 5, 8, 0),
          "backgroundColor" : "#758FFF",
          "showDate" : true,
          "endDate" : new Date(2015, 9, 5, 17, 0),
          "name" : "&nbsp"
        }, {
          "lane" : "2",
          "isTrip" : false,
          "description" : "away",
          "startDate" : new Date(2015, 9, 9, 0, 0),
          "backgroundColor" : "#758FFF",
          "showDate" : true,
          "endDate" : new Date(2015, 9, 9, 23, 59),
          "name" : "&nbsp"
        }
      ]
    }),
    isc.HTMLPane.create({
      width : "100%",
      height : "100%",
      ID : "htmlpane",
      contents : ""
    }),
    isc.Button.create({
      title : "what is the selected value?",
      width : 200,
      click : function () {
        thetimeline.getPrintHTML({
          printForExport : true
        }, function (data) {
          htmlpane.setContents(data);
        });
      }
    })
  ]
});

Second example:

isc.VLayout.create({
  width : "100%",
  height : "100%",
  members : [
    isc.Timeline.create({
      "ID" : "thetimeline",
      "width" : "100%",
      "height" : "100%",
      "overflow" : "auto",
      "hideUsingDisplayNone" : false,
      "startDate" : new Date(2015, 9, 5),
      "endDate" : new Date(2015, 9, 16),
      "headerLevels" :
      [{
          "unit" : "day",
          "titleFormatter" : function (headerLevel, startDate, endDate, defaultValue, viewer) {
            return startDate.dayIndex;
          }
        }
      ],
      "canEditEvents" : false,
      "canCreateEvents" : false,
      "autoFetchData" : true,
      "showControlsBar" : false,
      "firstDayOfWeek" : 1,
      "weekPrefix" : "week",
      "todayBackgroundColor" : "#E0E0E0",
      "showEventHeaders" : false,
      "showEventDescriptions" : false,
      "clwGeneratedIndexName" : "timelineGeneratedIndex",
      "alternateLaneStyles" : true,
      "lanes" :
      [{
          "hierarchyLevel" : 0,
          "isOpen" : true,
          "height" : 30,
          "name" : "1",
          "title" : "Person 1"
        }, {
          "hierarchyLevel" : 1,
          "isOpen" : false,
          "height" : 30,
          "name" : "2",
          "title" : "Person 2"
        }
      ],
      "data" :
      [{
          "lane" : "2",
          "isTrip" : false,
          "description" : "away",
          "startDate" : new Date(2015, 9, 13, 0, 0),
          "backgroundColor" : "#758FFF",
          "showDate" : true,
          "endDate" : new Date(2015, 9, 13, 23, 59),
          "name" : "&nbsp"
        }, {
          "lane" : "2",
          "isTrip" : true,
          "description" : "away",
          "startDate" : new Date(2015, 9, 5, 8, 0),
          "backgroundColor" : "#758FFF",
          "showDate" : true,
          "endDate" : new Date(2015, 9, 5, 17, 0),
          "name" : "&nbsp"
        }, {
          "lane" : "2",
          "isTrip" : false,
          "description" : "away",
          "startDate" : new Date(2015, 9, 9, 0, 0),
          "backgroundColor" : "#758FFF",
          "showDate" : true,
          "endDate" : new Date(2015, 9, 9, 23, 59),
          "name" : "&nbsp"
        }
      ]
    }),
    isc.HTMLPane.create({
      width : "100%",
      height : "100%",
      ID : "htmlpane",
      contents : ""
    }),
    isc.Button.create({
      title : "what is the selected value?",
      width : 200,
      click : function () {
        thetimeline.getPrintHTML({
          printForExport : true
        }, function (data) {
          htmlpane.setContents(data);
        });
      }
    })
  ]
});

[Isomorphic]

We've fixed this issue for builds dated October 10 and later - the event render-offsets were actually correct, but the printed column-widths differed from those in the live Timeline.