From 0de181b7523fbc973368db8c09b9c062d48a739b Mon Sep 17 00:00:00 2001 From: Oleksandr Danylchenko Date: Wed, 28 Aug 2024 20:29:40 +0300 Subject: [PATCH] Added highlights sorting for the `SPAN` --- .../src/highlight/span/spansRenderer.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/text-annotator/src/highlight/span/spansRenderer.ts b/packages/text-annotator/src/highlight/span/spansRenderer.ts index 47dd7f13..85451a49 100644 --- a/packages/text-annotator/src/highlight/span/spansRenderer.ts +++ b/packages/text-annotator/src/highlight/span/spansRenderer.ts @@ -56,7 +56,20 @@ const createRenderer = (container: HTMLElement): RendererImplementation => { if (shouldRedraw) highlightLayer.innerHTML = ''; - highlights.forEach(highlight => { + /** + * Highlights rendering in the span highlight layer is an order-sensitive operation. + * The later the highlight is rendered, the higher it will be in the visual stack. + * + * By default, we should expect that the newer highlight + * will be rendered over the older one + */ + const highlightsByCreation = [...highlights].sort((highlightA, highlightB) => { + const { annotation: { target: { created: createdA } } } = highlightA; + const { annotation: { target: { created: createdB } } } = highlightB; + return createdA.getTime() - createdB.getTime(); + }); + + highlightsByCreation.forEach(highlight => { highlight.rects.map(rect => { const zIndex = computeZIndex(rect, highlights); const style = paint(highlight, viewportBounds, currentStyle, painter, zIndex);