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

Aperta Adatta ai principianti
  • Qualcosa non va?
#526 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Tranquilla
Stack tecnologico
javascript
Ambito
frontend

Direzione di ricerca

Apri interfaces/manage-columns/index.js e leggi parseXYWH insieme a renderAnnotations intorno alle righe 967-970. Segui il modo in cui l’unità analizzata arriva ai calcoli dello stile dell’overlay, quindi verifica che i selettori percentuali vengano renderizzati nella posizione e con le dimensioni corrette, mentre i selettori in pixel e privi di unità mantengano il comportamento esistente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement

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:

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:

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.
Lingua principale
JavaScript
Stelle
2
Fork
3
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di CenterForDigitalHumanities/TPEN-interfaces

Tutte le issue di CenterForDigitalHumanities/TPEN-interfaces

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.