passerelle-geo-components 0.2.0-alpha.2 → 0.2.0-alpha.4

package/geo-components.js

@@ -232,6 +232,9 @@ function _v031ToLegacyShim(params, hostContext) {
     const overrides = [];
     for (const l of params.layers) {
       const geojson = l.source && l.source.type === "geojson" ? l.source.data : null;
+      const style = l.style || {};
+      const interactions = l.interactions || {};
+      const classifShim = _v031ClassificationShim(style.classification);
       catalog.push({
         id: l.id,
         name: l.name,
@@ -239,18 +242,27 @@ function _v031ToLegacyShim(params, hostContext) {
         geojson,
         n_features: l.n_features,
         bbox: l.bbox,
-        classification: l.style && l.style.classification,
-        outline: l.style && l.style.outline,
-        hollow_point: l.style && l.style.hollow_point
+        classification: classifShim,
+        outline: style.outline,
+        hollow_point: style.hollow_point
       });
-      const style = l.style || {};
-      const interactions = l.interactions || {};
+      // V0.3.1 opacity.reactive (Sprint V0.2 alpha.4, 2026-07-10) : preserver
+      // la config fade progressif pour applyBinding("time") au lieu du filter
+      // binaire hide/show historique.
+      const opacityStatic = typeof style.opacity === "object"
+        ? (style.opacity.kind === "static" ? style.opacity.value : undefined)
+        : style.opacity;
+      const opacityReactive = (typeof style.opacity === "object"
+                               && style.opacity.kind === "reactive")
+        ? style.opacity
+        : null;
       overrides.push({
         layer_id_ref: l.id,
         visible: style.visible !== false,
         z_index: style.z_index,
-        opacity: typeof style.opacity === "object" ? undefined : style.opacity,
-        classification: style.classification,
+        opacity: opacityStatic,
+        opacity_reactive: opacityReactive,
+        classification: classifShim,
         outline: style.outline,
         hollow_point: style.hollow_point,
         popup_template: interactions.popup_template,
@@ -266,6 +278,40 @@ function _v031ToLegacyShim(params, hostContext) {
   return { params: shimParams, hostContext: shimHost };
 }
 
+// V0.3.1 classification : {color: {mode, field, method, breaks, palette,
+// _compiled_expression}, size, label} -> {paint_expression, method, field, ...}
+// attendus par _paintForClassification (V1.13).
+function _v031ClassificationShim(classif) {
+  if (!classif) return null;
+  // Deja au format V1.13 (paint_expression direct) -> passthrough
+  if (classif.paint_expression) return classif;
+  // V0.3.1 nested {color: {...}}
+  const color = classif.color || classif;
+  if (!color || !color.mode) return classif;
+  const out = {
+    method: color.method || color.mode,
+    field: color.field
+  };
+  // Priorite : expression MapLibre pre-compilee dans _compiled_expression
+  if (Array.isArray(color._compiled_expression)) {
+    out.paint_expression = color._compiled_expression;
+  } else if (color.mode === "single" && color.value) {
+    out.paint_expression = color.value;
+  } else if (color.mode === "expression" && Array.isArray(color.expression)) {
+    out.paint_expression = color.expression;
+  }
+  return out;
+}
+
+// V0.3.1 alpha.4 : normalise une position (top-left/bottom-right/...) vers
+// les 4 positions acceptees par MapLibre. Fallback sur defaut si absente ou
+// invalide (avoid warning MapLibre "Position undefined").
+function _mlPosition(pos, fallback) {
+  const valid = ["top-left", "top-right", "bottom-left", "bottom-right"];
+  if (typeof pos === "string" && valid.includes(pos)) return pos;
+  return fallback;
+}
+
 /**
  * Résout la zone d'étude en {center, zoom, bbox} exploitables par MapLibre.
  * Supporte les 3 modes du contrat V1.13 : commune | manual | study.
@@ -1064,13 +1110,37 @@ export class GeoMap extends HTMLElement {
       center: zone.center,
       zoom: zone.zoom,
     });
-    this.map.addControl(new ml.NavigationControl({ showCompass: false }), "top-left");
+
+    // V0.3.1 alpha.4 : declaratifs params.scalebar / params.north_arrow.
+    // Sans north_arrow declare, on garde le comportement historique
+    // NavigationControl sans compass. Avec, on affiche compass a la position
+    // demandee. scalebar => ScaleControl natif MapLibre a la position/unit.
+    const northCfg = params.north_arrow;
+    const scaleCfg = params.scalebar;
+    const showCompass = !!northCfg;
+    const northPos = northCfg && northCfg.position ? northCfg.position : "top-left";
+    this.map.addControl(
+      new ml.NavigationControl({ showCompass, visualizePitch: showCompass }),
+      _mlPosition(northPos, "top-left"),
+    );
+    if (scaleCfg) {
+      const unit = scaleCfg.unit === "imperial" ? "imperial" : "metric";
+      const scalePos = _mlPosition(scaleCfg.position, "bottom-right");
+      this.map.addControl(
+        new ml.ScaleControl({ maxWidth: 120, unit }),
+        scalePos,
+      );
+    }
 
     const layersOverride = params.layers_override || [];
     const catalogLayers =
       this._hostContext.catalog_layers || params._catalog_layers || [];
 
     this._layerIds = [];
+    // V0.3.1 (Sprint V0.2 alpha.4) : cache config opacity.reactive par layerId
+    // pour permettre au binding 'time' de faire un fade progressif au lieu
+    // d'un setFilter binaire hide/show. Cle = layer id MapLibre applique.
+    this._reactiveOpacity = {};
 
     // P2 contract-drift V1.13 (review 2026-07-08) : respecter LayerOverride.z_index.
     // Le contrat V1.13 declare z_index (int) pour reordonner les layers a
@@ -1156,6 +1226,12 @@ export class GeoMap extends HTMLElement {
             this.map.addLayer(layerDef);
             this._layerIds.push(layerDef.id);
 
+            // V0.3.1 alpha.4 : memoriser config opacity.reactive pour fade
+            // progressif via applyBinding('time').
+            if (styleOverride.opacity_reactive) {
+              this._reactiveOpacity[layerDef.id] = styleOverride.opacity_reactive;
+            }
+
             // V0.3.1 style.outline : ajout automatique layer 'line' sur même source
             if (
               styleOverride.outline &&
@@ -1183,6 +1259,19 @@ export class GeoMap extends HTMLElement {
         }
       });
 
+      // V0.3.1 alpha.4 : legend.mode='auto' + from_layer -> derive chips
+      // depuis classification._compiled_expression du layer designe et
+      // injecte une <geo-legend> auto-generee dans le shadow DOM du <geo-map>.
+      const legendCfg = params.legend;
+      if (legendCfg && (legendCfg.mode === "auto" || legendCfg.items)) {
+        const items = Array.isArray(legendCfg.items)
+          ? legendCfg.items
+          : this._autoLegendItems(legendCfg, catalogLayers, orderedLayers);
+        if (items && items.length) {
+          this._injectLegend(legendCfg, items);
+        }
+      }
+
       // fitBounds auto sur zone.bbox ou premier layer avec features
       if (zone.bbox) {
         this.map.fitBounds(zone.bbox, { padding: 40, maxZoom: 16 });
@@ -1352,6 +1441,89 @@ export class GeoMap extends HTMLElement {
   /**
    * Point d'entrée de l'orchestrateur bindings. Applique un binding reçu.
    */
+  // V0.3.1 alpha.4 : derive items de legende auto depuis
+  // classification._compiled_expression du layer from_layer.
+  _autoLegendItems(legendCfg, catalogLayers, orderedLayers) {
+    const fromId = legendCfg.from_layer;
+    if (!fromId) return null;
+    const target = orderedLayers.find(o => o.scene && o.scene.id === fromId);
+    if (!target) return null;
+    const classif = (target.override && target.override.classification)
+                    || target.scene.classification;
+    if (!classif) return null;
+    // Support 2 formats : V1.13 paint_expression direct, ou V0.3.1 shimme
+    const expr = classif.paint_expression;
+    if (!Array.isArray(expr) || expr.length < 3) return null;
+    const items = [];
+    if (expr[0] === "step") {
+      // ["step", ["get", field], color0, threshold1, color1, threshold2, color2, ...]
+      const firstColor = expr[2];
+      items.push({ label: "avant " + expr[3], color: firstColor });
+      for (let i = 3; i + 1 < expr.length; i += 2) {
+        const thr = expr[i];
+        const col = expr[i + 1];
+        const next = expr[i + 2];
+        const label = (i + 2 < expr.length)
+          ? thr + "-" + next
+          : "≥ " + thr;
+        items.push({ label, color: col });
+      }
+    } else if (expr[0] === "match") {
+      // ["match", ["get", field], v1, c1, v2, c2, ..., fallback]
+      for (let i = 2; i + 1 < expr.length; i += 2) {
+        items.push({ label: String(expr[i]), color: expr[i + 1] });
+      }
+    }
+    return items;
+  }
+
+  // V0.3.1 alpha.4 : injecte une legende auto-generee dans le shadow DOM.
+  // Utilise le meme rendering que <geo-legend> mais integre inline.
+  _injectLegend(legendCfg, items) {
+    const shadow = this.shadowRoot;
+    if (!shadow) return;
+    const pos = legendCfg.position || "bottom-left";
+    const title = legendCfg.title || "Légende";
+    const wrap = document.createElement("div");
+    wrap.className = "gc-legend";
+    const posStyles = {
+      "top-left":     "top:8px;left:8px;",
+      "top-right":    "top:8px;right:8px;",
+      "bottom-left":  "bottom:8px;left:8px;",
+      "bottom-right": "bottom:44px;right:8px;",
+    };
+    const styleAttr = posStyles[pos] || posStyles["bottom-left"];
+    wrap.setAttribute("style",
+      "position:absolute;" + styleAttr +
+      "background:rgba(255,255,255,0.94);padding:8px 12px;border-radius:4px;" +
+      "box-shadow:0 1px 4px rgba(0,0,0,0.15);font-family:Marianne,system-ui,sans-serif;" +
+      "font-size:11px;color:#333;z-index:5;max-width:260px;"
+    );
+    const t = document.createElement("div");
+    t.setAttribute("style",
+      "color:#000091;text-transform:uppercase;font-size:10px;letter-spacing:0.5px;" +
+      "font-weight:700;margin-bottom:6px;");
+    t.textContent = title;
+    wrap.appendChild(t);
+    for (const it of items) {
+      const chip = document.createElement("div");
+      chip.setAttribute("style",
+        "display:flex;align-items:center;gap:6px;margin:2px 0;");
+      const sw = document.createElement("span");
+      sw.setAttribute("style",
+        "width:14px;height:10px;background:" + it.color + ";" +
+        "border:1px solid rgba(0,0,0,0.15);border-radius:2px;flex-shrink:0;");
+      chip.appendChild(sw);
+      const lbl = document.createElement("span");
+      lbl.textContent = it.label;
+      chip.appendChild(lbl);
+      wrap.appendChild(chip);
+    }
+    // Injecter dans .gc-map pour que la legende suive la carte
+    const mapDiv = shadow.querySelector(".gc-map");
+    if (mapDiv) mapDiv.appendChild(wrap);
+  }
+
   applyBinding(detail) {
     const { prop, value } = detail || {};
     if (!this.map || !prop) return;
@@ -1359,11 +1531,47 @@ export class GeoMap extends HTMLElement {
 
     switch (prop) {
       case "time": {
-        // Filtre temporel : ['<=', ['get', 'annee'], year]
+        // V0.3.1 alpha.4 : si le layer a opacity.reactive prop=time, on
+        // applique un fade progressif (matched/before/after/null_value)
+        // au lieu du filter binaire hide/show V1.13.
         const year = _asYear(value);
-        if (year != null && primaryLayer) {
-          const timeField = detail.field || "annee";
-          this.map.setFilter(primaryLayer, ["<=", ["get", timeField], year]);
+        if (year == null || !primaryLayer) break;
+        const timeField = detail.field || "annee";
+
+        for (const lid of this._layerIds) {
+          const cfg = this._reactiveOpacity[lid];
+          if (cfg && cfg.prop === "time") {
+            // Fade progressif : expression case selon (field vs value)
+            const field = cfg.field || timeField;
+            const matched = cfg.matched ?? 0.85;
+            const before = cfg.before ?? 0.85;
+            const after = cfg.after ?? 0.12;
+            const nullValue = cfg.null_value ?? 0.35;
+            const expr = [
+              "case",
+              ["==", ["typeof", ["get", field]], "null"], nullValue,
+              ["<", ["to-number", ["get", field]], year], before,
+              [">", ["to-number", ["get", field]], year], after,
+              matched,
+            ];
+            const layer = this.map.getLayer(lid);
+            if (!layer) continue;
+            const paintKey =
+              layer.type === "fill" ? "fill-opacity" :
+              layer.type === "line" ? "line-opacity" :
+              layer.type === "circle" ? "circle-opacity" :
+              layer.type === "fill-extrusion" ? "fill-extrusion-opacity" :
+              null;
+            if (paintKey) {
+              try { this.map.setPaintProperty(lid, paintKey, expr); }
+              catch (e) { /* pas critique */ }
+            }
+          } else if (lid === primaryLayer) {
+            // Fallback V1.13 : filter binaire sur le layer primaire
+            try {
+              this.map.setFilter(lid, ["<=", ["get", timeField], year]);
+            } catch (e) { /* ignore */ }
+          }
         }
         break;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "passerelle-geo-components",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.4",
   "description": "Web Components pour cartes MapLibre + composants controllers pilotes - brique commune multi-projet avec contract SceneManifest V0.3.1. Zero dependance runtime, ES module, encapsulation Shadow DOM.",
   "type": "module",
   "main": "geo-components.js",