feat(Storybook): add custom marker story

Author: SimbiozizV

src/stories/Markers.stories.tsx

@@ -4,18 +4,27 @@ import { baseTimelineConfig } from "./configs/events";
 import {
   collapsedBaseConfig,
   markersBaseConfig,
+  markersCustomRenderer,
   markersWithLabelsConfig,
 } from "./configs/markers";
 import { defaultViewConfig } from "../constants/options";
 import { StoryWrapper } from "./StoryWrapper";
-import { TimelineEvent, TimelineSettings, ViewConfiguration } from "../types";
+import {
+  TimelineEvent,
+  TimelineMarker,
+  TimelineSettings,
+  ViewConfiguration,
+} from "../types";
 
 type ViewConfigurationControls = {
   [K in keyof ViewConfiguration as `viewConfiguration.${K}`]: ViewConfiguration[K];
 };
 
 type SettingsControls = {
-  [K in keyof TimelineSettings<TimelineEvent> as `settings.${K}`]: TimelineSettings<TimelineEvent>[K];
+  [K in keyof TimelineSettings<
+    TimelineEvent,
+    TimelineMarker
+  > as `settings.${K}`]: TimelineSettings<TimelineEvent, TimelineMarker>[K];
 };
 
 type StoryProps = SettingsControls & ViewConfigurationControls;
@@ -234,3 +243,23 @@ export const WithLabels: Story = {
     },
   },
 };
+
+export const CustomRenderer: Story = {
+  args: {
+    "settings.start": markersCustomRenderer.settings.start,
+    "settings.end": markersCustomRenderer.settings.end,
+    "settings.axes": markersCustomRenderer.settings.axes,
+    "settings.events": markersCustomRenderer.settings.events,
+    "settings.markers": markersCustomRenderer.settings.markers,
+    "settings.selectedEventIds": baseTimelineConfig.settings.selectedEventIds,
+    ...defaultViewConfigArgs,
+  },
+  parameters: {
+    storyKey: "custom renderer",
+    docs: {
+      description: {
+        story: "Demonstration of a timeline with custom renderer",
+      },
+    },
+  },
+};

src/stories/MyMarkerRenderer.tsx

@@ -0,0 +1,97 @@
+import { AbstractMarkerRenderer } from "../components/Markers/AbstractMarkerRenderer";
+import { LabelSize, TimelineMarker, ViewConfiguration } from "../types";
+import { clamp } from "../helpers/math";
+
+export type MyMarker = TimelineMarker & {
+  activeColor: string;
+  hoverColor: string;
+  lineWidth: number;
+};
+
+const DEFAULT_LABEL_PADDING = 4;
+
+export class MyMarkerRenderer<
+  TMarker extends TimelineMarker,
+> extends AbstractMarkerRenderer<TMarker> {
+  public render({
+    ctx,
+    isSelected,
+    isHovered,
+    marker,
+    markerPosition,
+    viewConfiguration,
+    lastRenderedLabelPosition,
+    getLabelSize,
+  }: {
+    ctx: CanvasRenderingContext2D;
+    marker: TMarker;
+    isSelected: boolean;
+    isHovered: boolean;
+    markerPosition: number;
+    viewConfiguration: ViewConfiguration;
+    lastRenderedLabelPosition: { top: number; bottom: number };
+    getLabelSize: (label: string) => LabelSize;
+  }) {
+    let color = isHovered ? marker.hoverColor : marker.color;
+    if (isSelected) {
+      color = marker.activeColor;
+    }
+
+    // Draw marker line
+    ctx.strokeStyle = color;
+    ctx.lineWidth = marker.lineWidth;
+    ctx.setLineDash([5, 3]);
+    ctx.beginPath();
+    ctx.moveTo(markerPosition, 0);
+    ctx.lineTo(markerPosition, ctx.canvas.height);
+    ctx.stroke();
+
+    if (!marker.label) return;
+
+    if (isHovered || isSelected) {
+      this.renderLabel(
+        ctx,
+        color,
+        marker,
+        markerPosition,
+        viewConfiguration.markers,
+        lastRenderedLabelPosition,
+        getLabelSize,
+      );
+    }
+  }
+
+  protected renderLabel(
+    ctx: CanvasRenderingContext2D,
+    color: string,
+    marker: TimelineMarker,
+    markerPosition: number,
+    markerConfiguration: ViewConfiguration["markers"],
+    lastRenderedLabelPosition: { top: number; bottom: number },
+    getLabelSize: (label: string) => LabelSize,
+  ) {
+    const { width, height } = getLabelSize(marker.label);
+    const widthWithPadding = width + DEFAULT_LABEL_PADDING * 2;
+    const heightWithPadding = height + DEFAULT_LABEL_PADDING * 2;
+    //
+    const labelPosition = clamp(
+      markerPosition - widthWithPadding / 2, // Center label on marker
+      0, // Don't go past the left edge
+      Math.min(ctx.canvas.width, lastRenderedLabelPosition["top"]) -
+        widthWithPadding, // Don't overlap previous labels
+    );
+
+    ctx.font = markerConfiguration.font;
+    ctx.fillStyle = color;
+    ctx.roundRect(labelPosition, 0, widthWithPadding, heightWithPadding, 4);
+    ctx.fill();
+
+    //Draw label text
+    ctx.fillStyle = marker.labelColor;
+    ctx.fillText(
+      marker.label,
+      labelPosition + DEFAULT_LABEL_PADDING,
+      height + DEFAULT_LABEL_PADDING,
+    );
+  }
+}