[TimelineScale]: draft version.

app/src/demo/tables/editableTable/TimelineHeader.tsx

@@ -42,6 +42,7 @@ export function TimelineHeader({ timelineController }: TimelineHeaderProps) {
                 <TimelineScale
                     timelineController={ timelineController }
                     isDraggable={ true }
+                    canvasHeight={ 100 }
                 />
             </div>
         </div>

uui-components/src/table/DataTableHeaderRow.module.scss

@@ -1,4 +1,5 @@
 .root {
     --uui-dt-row-border-width: 1px;
     z-index: 5;
+    height: 100px;
 }

uui-timeline/src/TimelineScale.module.scss

@@ -5,7 +5,7 @@ canvas {
 
 .timelineHeader {
     position: relative;
-    height: 61px;
+    // height: 61px;
     background-color: #FFF;
     border-top: 1px solid #EEE; // temp
 }
@@ -23,11 +23,9 @@ canvas {
 .arrow {
     display: inline-block;
     width: 36px;
-    height: 60px;
     position: absolute;
     text-align: center;
     vertical-align: middle;
-    line-height: 60px;
     margin: auto;
     color: rgba(102, 102, 102, 0.7);
     cursor: pointer;

uui-timeline/src/TimelineScale.tsx

@@ -180,7 +180,8 @@ export function TimelineScale({
     ...props
 }: TimelineScaleProps) {
     const [isMouseDown, setIsMouseDown] = useState(false);
-
+    const canvasHeight = props.canvasHeight ?? 60;
+
     const handleWindowMouseUp = useCallback(() => {
         if (isMouseDown) {
             setIsMouseDown(false);
@@ -211,6 +212,10 @@ export function TimelineScale({
         return (
             <div
                 className={ cx(styles.arrow, direction == 'left' ? styles.arrowLeft : styles.arrowRight) }
+                style={ {
+                    height: `${canvasHeight}px`,
+                    lineHeight: `${canvasHeight}px`,
+                } }
                 onClick={ handleClick }
             >
                 {(props.renderArrowIcon ?? renderArrowIcon)(direction)}
@@ -219,16 +224,15 @@ export function TimelineScale({
     };
 
     const draw = (context: CanvasRenderingContext2D, t: TimelineTransform) => {
-        const canvasHeight = 60;
         context.clearRect(0, 0, t.widthMs, canvasHeight);
 
         const fonts = { currentPeriodFont, periodFont, meridiemFont };
         const commonProps = {
             context,
             timelineTransform: t,
             periodTextColor,
-            canvasHeight,
             cellBackgroundColor,
+            canvasHeight,
             ...fonts,
         };
 
@@ -279,14 +283,15 @@ export function TimelineScale({
     }, [handleWindowMouseUp]);
 
     return (
-        <div className={ styles.timelineHeader } style={ { width: timelineTransform.widthPx } }>
+        <div className={ styles.timelineHeader } style={ { width: timelineTransform.widthPx, height: `${canvasHeight}px` } }>
             {!isMouseDown && (props.renderArrow ?? renderArrow)('left')}
             {!isMouseDown && (props.renderArrow ?? renderArrow)('right')}
             <TimelineCanvas
                 className={ isMouseDown ? styles.timelineScaleGrabbing : styles.timelineScale }
                 onMouseDown={ isDraggable && handleMouseDown }
                 onWheel={ isScaleChangeOnWheel && handleWheel }
                 draw={ props.draw ?? draw }
+                canvasHeight={ canvasHeight }
                 timelineController={ timelineController }
             />
         </div>

uui-timeline/src/draw/scale.ts

@@ -16,6 +16,7 @@ import {
     CanvasDrawWeekendHoursCell,
     CanvasDrawBottomMonthProps,
     CanvasDrawTopMonthProps,
+    CanvasDrawProps,
 } from './types';
 
 const defaultFonts = {
@@ -46,7 +47,7 @@ const topLineMoveAmount = 0.8;
 
 const isCurrentPeriod = (leftDate: Date, rightDate: Date) => new Date() >= leftDate && new Date() <= rightDate;
 
-const getCanvasVerticalCenter = (canvasHeight: number) => canvasHeight / 2 - 1;
+const getCanvasVerticalCenter = (canvasHeight: number) => canvasHeight / 2;
 const getBottomCellY = (canvasHeight: number) => getCanvasVerticalCenter(canvasHeight);
 const getTopMonth = (month: number) => months[month]?.toUpperCase() ?? '';
 const getBottomMonth = (month: number) => months[month] ?? '';
@@ -130,13 +131,29 @@ const drawPeriod = (
     context.restore();
 };
 
+const calculateTextLine = ({
+    context,
+    text,
+    canvasHeight,
+    line,
+}: CanvasDrawProps & { canvasHeight: number, line: number, text: string }) => {
+    const { actualBoundingBoxAscent, actualBoundingBoxDescent } = context.measureText(text);
+    const headerTextHeight = Math.abs(actualBoundingBoxAscent) + Math.abs(actualBoundingBoxDescent);
+
+    const lineHeight = canvasHeight / 2;
+    const textCenter = lineHeight / 2;
+    const baseTextLine = textCenter + headerTextHeight / 2;
+    return baseTextLine + lineHeight * (line - 1);
+};
+
 const drawPeriodText = ({
     context,
     timelineTransform,
     text,
     x,
     width,
     line,
+    canvasHeight,
     isCurPeriod,
     textColor = defaultColors.periodTextColor,
     superscript,
@@ -148,7 +165,8 @@ const drawPeriodText = ({
     context.fillStyle = textColor;
 
     const padding = 12;
-    const headerTextWidth = context.measureText(text).width;
+    const { width: headerTextWidth } = context.measureText(text);
+
     const textWidth = headerTextWidth + padding * 2;
     const center = x + width / 2;
     let left = center - textWidth / 2;
@@ -175,16 +193,19 @@ const drawPeriodText = ({
         }
     }
 
-    context.fillText(text, left + padding, line * 24);
+    const textLine = calculateTextLine({ context, text, canvasHeight, line });
+
+    context.fillText(text, left + padding, textLine);
 
     if (superscript) {
         context.font = meridiemFont;
-        context.fillText(superscript, left + padding + headerTextWidth + (text.length === 1 ? 3 : 4), line * 24);
+        const superscriptTextLine = calculateTextLine({ context, text: superscript, canvasHeight, line });
+        context.fillText(superscript, left + padding + headerTextWidth + (text.length === 1 ? 3 : 4), superscriptTextLine);
     }
 };
 
-const getBottomLine = (visibility: number) => 2 + (1 - visibility) * moveAmount;
-const getTopLine = (visibility: number) => visibility * topLineMoveAmount;
+const getBottomLine = (visibility: number) => 2 + (1 - visibility) * 1;
+const getTopLine = (visibility: number) => visibility * 1;
 
 const drawMinutes = ({
     context,
@@ -214,6 +235,7 @@ const drawMinutes = ({
             line: getBottomLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
         drawBottomGridLine({ context, canvasHeight, scaleBar: w, width: cellBorderWidth, color: cellBorderColor });
@@ -333,6 +355,7 @@ const drawRemainingHours = ({
                 isCurPeriod,
                 textColor: periodTextColor,
                 superscript,
+                canvasHeight,
                 ...restProps,
             });
         });
@@ -375,6 +398,7 @@ const drawHours = ({
                 isCurPeriod,
                 textColor: periodTextColor,
                 superscript,
+                canvasHeight,
                 ...restProps,
             });
         });
@@ -427,6 +451,7 @@ const drawTopDays = ({
             line: getTopLine(visibility),
             isCurPeriod,
             textColor,
+            canvasHeight,
             ...restProps,
         });
         (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
@@ -471,6 +496,7 @@ const drawDays = ({
             width: w.right - w.left,
             line: getBottomLine(visibility),
             isCurPeriod,
+            canvasHeight,
             ...restProps,
         });
     });
@@ -508,6 +534,7 @@ const drawTopMonths = ({
             line: getTopLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
     });
@@ -544,6 +571,7 @@ const drawWeeks = ({
             line: getBottomLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
     });
@@ -578,6 +606,7 @@ const drawBottomMonths = ({
             line: getBottomLine(visibility),
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
         (customDrawToday ?? drawToday)({ context, scaleBar: w, todayLineColor, todayLineHeight, canvasHeight });
@@ -631,6 +660,7 @@ const drawYears = ({
             line,
             isCurPeriod,
             textColor: periodTextColor,
+            canvasHeight,
             ...restProps,
         });
     });