From 147e465f58b1d793d1d2afedf1b169db0767534a Mon Sep 17 00:00:00 2001 From: Pedro Sader Azevedo Date: Thu, 17 Apr 2025 15:10:01 -0300 Subject: [PATCH] nightingale-track-canvas: implement missing shapes Implement missing shapes in nightingale-track-canvas, those being "rightEndedTag", "leftEndedTag", and "doubleEndedTag". --- .../src/utils/draw-shapes.ts | 40 +++++++++++++++++++ .../NightingaleTrackCanvas.stories.ts | 1 + 2 files changed, 41 insertions(+) diff --git a/packages/nightingale-track-canvas/src/utils/draw-shapes.ts b/packages/nightingale-track-canvas/src/utils/draw-shapes.ts index 5765decd..630eabe9 100644 --- a/packages/nightingale-track-canvas/src/utils/draw-shapes.ts +++ b/packages/nightingale-track-canvas/src/utils/draw-shapes.ts @@ -333,6 +333,46 @@ const RangeDrawers: Partial> = { ctx.fill(); ctx.stroke(); }, + + rightEndedTag(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, xPadding: number): void { + const head = Math.min(0.75 * height, 1.00 * width); + ctx.beginPath(); + ctx.moveTo(x, y + height); + ctx.lineTo(x + width - head, y + height); + ctx.lineTo(x + width, y + 0.5 * height); + ctx.lineTo(x + width - head, y); + ctx.lineTo(x, y); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + }, + + leftEndedTag(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, xPadding: number): void { + const head = Math.min(0.75 * height, 1.00 * width); + ctx.beginPath(); + ctx.moveTo(x + width, y + height); + ctx.lineTo(x + head, y + height); + ctx.lineTo(x, y + 0.5 * height); + ctx.lineTo(x + head, y); + ctx.lineTo(x + width, y); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + }, + + doubleEndedTag(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, xPadding: number): void { + const head = Math.min(0.75 * height, 0.5 * width); + ctx.beginPath(); + ctx.moveTo(x + head, y + height); + ctx.lineTo(x + width - head, y + height); + ctx.lineTo(x + width, y + 0.5 * height); + ctx.lineTo(x + width - head, y); + ctx.lineTo(x + head, y); + ctx.lineTo(x, y + 0.5 * height); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + }, }; // Future-proofing for fixing typos (discontinUOS -> discontinUOUS) diff --git a/stories/18.NightingaleTrackCanvas/NightingaleTrackCanvas.stories.ts b/stories/18.NightingaleTrackCanvas/NightingaleTrackCanvas.stories.ts index b371bc35..0a4db18c 100644 --- a/stories/18.NightingaleTrackCanvas/NightingaleTrackCanvas.stories.ts +++ b/stories/18.NightingaleTrackCanvas/NightingaleTrackCanvas.stories.ts @@ -34,6 +34,7 @@ const Shapes = [ "rectangle", "roundRectangle", "line", "bridge", "discontinuosEnd", "discontinuos", "discontinuosStart", "helix", "strand", + "rightEndedTag", "leftEndedTag", "doubleEndedTag", "circle", "triangle", "diamond", "pentagon", "hexagon", "chevron", "catFace", "arrow", "wave", "doubleBar", ];