[results.webkit.org] Timeline.CanvasXAxisComponent height should be defined by option
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Aug 2019 21:45:42 +0000 (21:45 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Aug 2019 21:45:42 +0000 (21:45 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200321

Patch by Zhifei Fang <zhifei_fang@apple.com> on 2019-08-01
Reviewed by Jonathan Bedard.

*resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
Let the axis' height be defined in the option. Timeine component will use this value as
padding-top for headers which allows headers start in the right position, even with multiple
top axises.
(Timeline.CanvasSeriesComponent):
(prototype.Timeline.CanvasContainer):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248134 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Tools/ChangeLog
Tools/resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js

index 469dcf5..cfe9e78 100644 (file)
@@ -1,5 +1,19 @@
 2019-08-01  Zhifei Fang  <zhifei_fang@apple.com>
 
+        [results.webkit.org] Timeline.CanvasXAxisComponent height should be defined by option
+        https://bugs.webkit.org/show_bug.cgi?id=200321
+
+        Reviewed by Jonathan Bedard.
+
+        *resultsdbpy/resultsdbpy/view/static/library/js/components/TimelineComponents.js:
+        Let the axis' height be defined in the option. Timeine component will use this value as 
+        padding-top for headers which allows headers start in the right position, even with multiple 
+        top axises.
+        (Timeline.CanvasSeriesComponent):
+        (prototype.Timeline.CanvasContainer):
+
+2019-08-01  Zhifei Fang  <zhifei_fang@apple.com>
+
         results.webkit.org: Collision detection for dots is off by 2 * dotMargin
         https://bugs.webkit.org/show_bug.cgi?id=200347
 
index 2b90911..12d084d 100644 (file)
@@ -509,7 +509,7 @@ Timeline.CanvasXAxisComponent = (scales, option = {}) => {
     const scaleTagLinePadding = 10;
     const scaleBroadLineHeight = parseInt(computedStyle.getPropertyValue('--tinySize')) / 2;
     const maxinumTextHeight = scaleWidth * 4.5;
-    const canvasHeight = parseInt(computedStyle.getPropertyValue('--smallSize')) * 4;
+    const canvasHeight = typeof option.height === "number" ? option.height : parseInt(computedStyle.getPropertyValue('--smallSize')) * 5;
     const sqrt3 = Math.sqrt(3);
 
     const drawScale = (scaleLabel, group, context, x, y, isHoverable, lineColor, groupColor) => {
@@ -732,12 +732,14 @@ Timeline.CanvasXAxisComponent = (scales, option = {}) => {
                 <canvas ref="${canvasRef}">
             </div>`;
         }),
-        isAxis: true // Mark self as an axis
+        isAxis: true, // Mark self as an axis,
+        height: canvasHeight, // Expose Height to parent
     };
 }
 
 Timeline.CanvasContainer = (exporter, ...children) => {
-    const hasTopXAxis = children[0].isAxis;
+    let headerAxisPlaceHolderHeight = 0;
+    let topAxis = true;
     const upackChildren = (children) => {
         const headers = [];
         const serieses = [];
@@ -749,6 +751,10 @@ Timeline.CanvasContainer = (exporter, ...children) => {
             if (child.header)
                 headers.push(child.header);
             serieses.push(child.series);
+            if (child.isAxis && topAxis)
+                headerAxisPlaceHolderHeight += child.height;
+            else if (topAxis)
+                topAxis = false;
         });
         return {headers, serieses};
     };
@@ -763,7 +769,7 @@ Timeline.CanvasContainer = (exporter, ...children) => {
     }));
     return (
         `<div class="timeline">
-            <div class="header ${hasTopXAxis ? "with-top-x-axis" : ""}">
+            <div class="header" style="padding-top:${headerAxisPlaceHolderHeight}px">
                 ${ListComponent(composer, ...headers)}
             </div>
             ${XScrollableCanvasProvider(composer, ...serieses)}