[Timeline]: changed design of TimelineScale and TimelineGrid.

epam · Jul 19, 2024 · 913628c · 913628c
1 parent 61790de
commit 913628c
Show file tree

Hide file tree

Showing 7 changed files with 132 additions and 53 deletions.
diff --git a/uui-timeline/src/TimelineGrid.tsx b/uui-timeline/src/TimelineGrid.tsx
@@ -3,7 +3,7 @@ import { TimelineTransform } from './TimelineTransform';
 import { msPerDay } from './helpers';
 import { TimelineCanvas, TimelineCanvasProps } from './TimelineCanvas';
 import { CanvasDrawGridTodayLineProps, CanvasDrawHolidayProps, CanvasDrawLineProps, CanvasDrawTimelineElementProps,
-    CanvasDrawWeekendProps, timelineGrid } from './draw';
+    CanvasDrawWeekendProps, timelineGrid, timelinePrimitives } from './draw';
 
 export interface TimelineGridProps extends TimelineCanvasProps {
     drawLine?: (props: CanvasDrawLineProps) => void;
@@ -56,7 +56,8 @@ export function TimelineGrid({
         const drawProps = { context, timelineTransform, canvasHeight };
         const options = {
             ...drawProps,
-            drawLine: drawLine ?? timelineGrid.drawLine,
+            canvasHeight,
+            drawLine: drawLine ?? timelinePrimitives.drawVerticalLine,
         };
         if (timelineGrid.shouldDrawMinutes(pxPerDay)) {
             (drawMinutes ?? timelineGrid.drawMinutes)(options);

diff --git a/uui-timeline/src/TimelineScale.tsx b/uui-timeline/src/TimelineScale.tsx
@@ -116,6 +116,7 @@ export function TimelineScale({
             context,
             timelineTransform: t,
             periodTextColor,
+            canvasHeight,
             ...fonts,
         };
 

diff --git a/uui-timeline/src/draw/grid.ts b/uui-timeline/src/draw/grid.ts
@@ -1,6 +1,7 @@
 import { msPerDay } from '../helpers';
 import { CanvasDrawGridTodayLineProps, CanvasDrawHolidayOrWeekendProps, CanvasDrawHolidayProps, CanvasDrawHolidaysProps,
-    CanvasDrawLineProps, CanvasDrawWeekendProps, CustomCanvasDrawTimelineElementProps } from './types';
+    CanvasDrawWeekendProps, CustomCanvasDrawTimelineElementProps } from './types';
+import { timelinePrimitives } from './primitives';
 
 const defaultColors = {
     defaultLineColor: '#eee',
@@ -9,54 +10,46 @@ const defaultColors = {
     weekendCellColor: '#FBFBFB',
 };
 
-const drawLine = ({ context, x, width, canvasHeight }: CanvasDrawLineProps) => {
-    context.beginPath();
-    context.moveTo(x, 0);
-    context.lineTo(x, canvasHeight);
-    context.lineWidth = width || 1;
-    context.stroke();
-};
-
-const drawHoliday = ({ context, x, width, canvasHeight, holidayCellColor = defaultColors.holidayCellColor }: CanvasDrawHolidayProps) => {
+const drawHoliday = ({ context, x, width, height, holidayCellColor = defaultColors.holidayCellColor }: CanvasDrawHolidayProps) => {
     context.fillStyle = holidayCellColor;
-    context.fillRect(x, 0, width, canvasHeight);
+    context.fillRect(x, 0, width, height);
 };
 
-const drawWeekend = ({ context, x, width, canvasHeight, weekendCellColor = defaultColors.weekendCellColor }: CanvasDrawWeekendProps) => {
+const drawWeekend = ({ context, x, width, height, weekendCellColor = defaultColors.weekendCellColor }: CanvasDrawWeekendProps) => {
     context.fillStyle = weekendCellColor;
-    context.fillRect(x, 0, width, canvasHeight);
+    context.fillRect(x, 0, width, height);
 };
 
 const drawHolidayOrWeekend = ({
     context,
     x,
     width,
-    canvasHeight,
+    height,
     date,
     timelineTransform,
     holidayCellColor = defaultColors.holidayCellColor,
     weekendCellColor = defaultColors.weekendCellColor,
     ...restProps
 }: CanvasDrawHolidayOrWeekendProps) => {
     if (timelineTransform.isHoliday(date)) {
-        (restProps.drawHoliday ?? drawHoliday)({ context, x, width, canvasHeight, holidayCellColor });
+        (restProps.drawHoliday ?? drawHoliday)({ context, x, width, height, holidayCellColor });
         return;
     }
 
     if (timelineTransform.isWeekend(date)) {
-        (restProps.drawWeekend ?? drawWeekend)({ context, x, width, canvasHeight, weekendCellColor });
+        (restProps.drawWeekend ?? drawWeekend)({ context, x, width, height, weekendCellColor });
     }
 };
 
 const drawMinutes = ({ context, timelineTransform, canvasHeight, drawLine: customDrawLine }: CustomCanvasDrawTimelineElementProps) => {
     timelineTransform.getVisibleMinutes().forEach((w) => {
-        (customDrawLine ?? drawLine)({ context, x: w.left, canvasHeight });
+        (customDrawLine ?? timelinePrimitives.drawVerticalLine)({ context, x: w.left, y2: canvasHeight });
     });
 };
 
 const drawQuoterHours = ({ context, timelineTransform, canvasHeight, drawLine: customDrawLine }: CustomCanvasDrawTimelineElementProps) => {
     timelineTransform.getVisibleQuoterHours().forEach((w) => {
-        (customDrawLine ?? drawLine)({ context, x: w.left, canvasHeight });
+        (customDrawLine ?? timelinePrimitives.drawVerticalLine)({ context, x: w.left, y2: canvasHeight });
     });
 };
 
@@ -65,7 +58,7 @@ const drawHours = ({ context, timelineTransform, canvasHeight, drawLine: customD
     const width = pxPerHour > 100 ? 2 : 1;
 
     timelineTransform.getVisibleHours().forEach((w) => {
-        (customDrawLine ?? drawLine)({ context, x: w.left, width, canvasHeight });
+        (customDrawLine ?? timelinePrimitives.drawVerticalLine)({ context, x: w.left, width, y2: canvasHeight });
     });
 };
 
@@ -96,25 +89,25 @@ const drawDays = ({ context, timelineTransform, canvasHeight, drawLine: customDr
     const width = pxPerDay > 200 ? 2 : 1;
 
     timelineTransform.getVisibleDays().forEach((w) => {
-        (customDrawLine ?? drawLine)({ context, x: w.left, width, canvasHeight });
+        (customDrawLine ?? timelinePrimitives.drawVerticalLine)({ context, x: w.left, width, y2: canvasHeight });
     });
 };
 
 const drawWeeks = ({ context, timelineTransform, canvasHeight, drawLine: customDrawLine }: CustomCanvasDrawTimelineElementProps) => {
     timelineTransform.getVisibleWeeks().forEach((w) => {
-        (customDrawLine ?? drawLine)({ context, x: w.left, canvasHeight });
+        (customDrawLine ?? timelinePrimitives.drawVerticalLine)({ context, x: w.left, y2: canvasHeight });
     });
 };
 
 const drawMonths = ({ context, timelineTransform, canvasHeight, drawLine: customDrawLine }: CustomCanvasDrawTimelineElementProps) => {
     timelineTransform.getVisibleMonths().forEach((w) => {
-        (customDrawLine ?? drawLine)({ context, x: w.left, canvasHeight });
+        (customDrawLine ?? timelinePrimitives.drawVerticalLine)({ context, x: w.left, y2: canvasHeight });
     });
 };
 
 const drawYears = ({ context, timelineTransform, canvasHeight, drawLine: customDrawLine }: CustomCanvasDrawTimelineElementProps) => {
     timelineTransform.getVisibleYears().forEach((w) => {
-        (customDrawLine ?? drawLine)({ context, x: w.left, width: 2, canvasHeight });
+        (customDrawLine ?? timelinePrimitives.drawVerticalLine)({ context, x: w.left, width: 2, y2: canvasHeight });
     });
 };
 
@@ -132,10 +125,9 @@ const shouldDrawHours = (pxPerDay: number) => pxPerDay >= 190;
 const shouldDrawDays = (pxPerDay: number) => pxPerDay > 10;
 const shouldDrawHolidays = (pxPerDay: number) => pxPerDay > 6 && pxPerDay < 200;
 const shouldDrawWeeks = (pxPerDay: number) => pxPerDay > 6;
-const shouldDrawMonths = (pxPerDay: number) => pxPerDay > 0.5;
+const shouldDrawMonths = (pxPerDay: number) => pxPerDay > 0.5 && pxPerDay <= 6;
 
 export const timelineGrid = {
-    drawLine,
     drawHoliday,
     drawWeekend,
     drawHolidayOrWeekend,

diff --git a/uui-timeline/src/draw/index.ts b/uui-timeline/src/draw/index.ts
@@ -1,3 +1,4 @@
+export * from './primitives';
 export * from './grid';
 export * from './scale';
 export * from './types';
diff --git a/uui-timeline/src/draw/primitives.tsx b/uui-timeline/src/draw/primitives.tsx
@@ -0,0 +1,39 @@
+import { CanvasDrawHorizontalLineProps, CanvasDrawRectangleProps, CanvasDrawVerticalLineProps } from './types';
+
+const defaultColors = {
+    defaultLineColor: '#E1E3EB',
+    defaultRectangleColor: '#FAFAFC',
+};
+
+const drawVerticalLine = ({ context, color = defaultColors.defaultLineColor, x, width = 1, y1 = 0, y2 }: CanvasDrawVerticalLineProps) => {
+    context.beginPath();
+    context.strokeStyle = color;
+    context.moveTo(x, y1);
+    context.lineTo(x, y2);
+    context.lineWidth = width;
+    context.stroke();
+};
+
+const drawHorizontalLine = ({ context, color = defaultColors.defaultLineColor, y, x1 = 0, x2, width = 1 }: CanvasDrawHorizontalLineProps) => {
+    context.beginPath();
+    context.strokeStyle = color;
+    context.moveTo(x1, y);
+    context.lineTo(x2, y);
+    context.lineWidth = width;
+    context.stroke();
+};
+
+const drawRectangle = ({ context, color = defaultColors.defaultRectangleColor, x, y, width, height }: CanvasDrawRectangleProps) => {
+    context.beginPath();
+    context.fillStyle = color;
+    context.fillRect(x, y, width, height);
+    context.closePath();
+};
+
+export const timelinePrimitives = {
+    drawVerticalLine,
+    drawHorizontalLine,
+    drawRectangle,
+
+    defaultColors,
+};