CenterForDigitalHumanities / CenterForDigitalHumanities/TPEN-interfaces

manage-columns: percent-unit xywh selectors double-scale when rendering overlay boxes

Open
#526 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
2
Forks
3
PR merge metrics
No merged PRs in 30d

Description

## Context

Follow-up to the hotfix in `interfaces/manage-columns/index.js` for `parseXYWH`. The parser now accepts all three W3C Media Fragments forms:

- `xywh=100,200,300,400` (no unit — defaults to pixel per spec)
- `xywh=pixel:100,200,300,400`
- `xywh=percent:100,200,300,400`

However, the renderer at `interfaces/manage-columns/index.js:967-970` assumes the parsed values are pixels and divides by image dimensions to convert to percent:

```js
box.style.left = `${(x / imgWidth) * 100}%`
box.style.top = `${(y / imgHeight) * 100}%`
box.style.width = `${(w / imgWidth) * 100}%`
box.style.height = `${(h / imgHeight) * 100}%`
```

If an annotation arrives with a `xywh=percent:...` selector, the values are already in percent and get divided again — producing tiny/invisible overlay boxes.

## Impact

Low-likelihood today — current production data appears to be pixel-based — but it is a latent correctness bug that will silently mis-render any percent-unit annotation.

## Suggested fix

Have `parseXYWH` return the detected unit alongside the numbers, and branch in the render call:

```js
parseXYWH(target) {
const raw = typeof target === "string" ? target : target?.selector?.value ?? ""
const match = raw.match(/xywh=(pixel:|percent:)?([^,]+),([^,]+),([^,]+),([^,]+)/)
if (!match) return { x: 0, y: 0, w: 0, h: 0, unit: "pixel" }
const unit = match[1] === "percent:" ? "percent" : "pixel"
const [x, y, w, h] = [match[2], match[3], match[4], match[5]].map(Number)
return { x, y, w, h, unit }
}
```

Then in `renderAnnotations`, skip the `/ imgWidth * 100` math when `unit === "percent"`.

## Acceptance

- Annotations using `xywh=percent:...` selectors render at the correct position and size.
- Annotations using `xywh=pixel:...` and bare `xywh=...` continue to render as they do today.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.