@mostajs/imagemap-ui

Image-map cliquable (HTML-string, zéro dépendance) — image + zones % + légende bilingue.

Auteur : Dr Hamid MADANI [email protected] · AGPL-3.0-or-later · Membre de mosta-ui-html-stack.

import { page, THEME_CSS } from '@mostajs/app-shell-ui';
import { imagemap, IMAGEMAP_CSS } from '@mostajs/imagemap-ui';

const body = imagemap({ title: 'Architecture', image: '/img/plan.png', blocks: [{ key:'companies', n:1, fr:'Entreprises', ar:'المؤسسات', x:58, y:24, w:12, h:10 }] });
const html = page({ title: 'Architecture', theme: THEME_CSS + IMAGEMAP_CSS, body });

Deux rendus, un seul view-model

| | imagemap() — image bitmap | wheel() — roue dessinée (./wheel) | |---|---|---| | blocks | {key,n,fr,ar,**x,y,w,h**} | {key,n,fr,ar} — sans coordonnées | | Positions | mesurées sur l'image, à recaler à chaque régénération | calculées — jamais de recalage | | Nombre de nœuds | celui que l'image contient | celui du tableau, garanti | | Liens | zones posées par-dessus | <a> SVG natifs | | Texte | pixels | texte réel, sélectionnable |

Migrer de l'un à l'autre : changer l'import, retirer x/y/w/h. hrefBase et la légende sont identiques.

import { wheel, WHEEL_CSS } from '@mostajs/imagemap-ui/wheel';

const body = wheel({
  blocks: [{ key: 'companies', n: 1, fr: 'Entreprises', ar: 'المؤسسات' }],
  icons: { companies: '<rect x="4" y="7" width="16" height="13" rx="1.5"/>' }, // repère 24×24
  hrefBase: '/m/', hubTitle: 'PLATEFORME', hubSub: 'Hub central|النواة المركزية',
});
const html = page({ title: 'Architecture', theme: THEME_CSS + WHEEL_CSS, body });

Le module n'embarque aucune icône : le jeu d'icônes appartient au domaine du consumer.

Assets & performance — wheel() n'a besoin d'aucune image

Le SVG est inline dans la page : aucune requête pour le graphique, aucun décodage bitmap, aucun décalage de mise en page, mise à l'échelle sans flou. Mesuré sur P2 ATC (14 nœuds, écran servi) :

| | poids | |---|---| | SVG de la roue | ~13 Ko (~0,9 Ko / nœud, linéaire) | | page complète (thème + menu + roue + légende) | ~31 Ko → 7,5 Ko gzip | | l'infographie bitmap équivalente | ~1,65 Mo — 54× la page entière |

logoHref est le seul asset externe possible, et il est optionnel : sans lui, le hub rend hubTitle. S'il est fourni, préférer un SVG, un PNG détouré ≤ 50 Ko, ou une data-URI.

⚠ Ne pas réintroduire une image de fond « pour la performance » : ce serait l'inverse. Le rendu imagemap() ne se justifie que si l'on tient à une illustration riche non reproductible en SVG.

Vue pure (compose @mostajs/app-shell-ui). IMAGEMAP_CSS / WHEEL_CSS à ajouter au thème. npm test → 15 tests @mostajs/mjs-unit · npm run example · npm run example:wheel.