@massif-maps/style-tools 6.1.0-rc.3 → 6.1.1

package/dist/generated/properties.json

@@ -1844,6 +1844,16 @@
       "live": false,
       "baked": false
     },
+    {
+      "cartocss": "shield-z-elevate",
+      "mapnik": "z-elevate",
+      "symbolizer": "shield",
+      "kind": "bool",
+      "type": "BoolProperty",
+      "default": "false",
+      "live": false,
+      "baked": false
+    },
     {
       "cartocss": "text-allow-overlap",
       "mapnik": "allow-overlap",
@@ -2483,6 +2493,16 @@
       "default": "0.0",
       "live": false,
       "baked": false
+    },
+    {
+      "cartocss": "text-z-elevate",
+      "mapnik": "z-elevate",
+      "symbolizer": "text",
+      "kind": "bool",
+      "type": "BoolProperty",
+      "default": "false",
+      "live": false,
+      "baked": false
     }
   ]
 }

package/dist/mapbox2css/index.js

@@ -238,6 +238,8 @@ export function convert(style, table, options = {}) {
     const lights = style.lights;
     // Set while emitting, so the parameter is only declared when there is a building to gate.
     let usesBuildings = false;
+    // The project's `constants`: zoom ranges a child project may move, see `massif:minzoom-const`.
+    const constants = new Map();
     // The brightness of the style's OWN default preset, which the emissive fold measures against.
     // sceneBrightness is an ambient-only proxy, so its absolute value is not a light level - but
     // the RATIO between two presets of the same style is meaningful, and that is all this needs:
@@ -391,9 +393,13 @@ export function convert(style, table, options = {}) {
                     .flatMap((ordered) => splitLayer(ordered, coverage))
                     .flatMap((ordered) => splitDashByZoom(ordered, coverage))
                     .map(narrowLayer);
+                // `massif:attachment`: layers drawing into ONE attachment, so a child project's rule on it
+                // merges with whichever of them matches instead of drawing the feature a second time.
+                const sharedAttachment = layer.metadata?.['massif:attachment'];
                 variants.forEach((variant, branch) => {
                     const suffix = variants.length > 1 ? `_b${branch + 1}` : '';
-                    emitLayer(variant, `${attachmentName(layer.id)}${suffix}`, target, symbolizer, index);
+                    const attachment = typeof sharedAttachment === 'string' ? attachmentName(sharedAttachment) : `${attachmentName(layer.id)}${suffix}`;
+                    emitLayer(variant, attachment, target, symbolizer, index);
                 });
             }
         });
@@ -589,6 +595,12 @@ export function convert(style, table, options = {}) {
                     return declaration;
                 });
             }
+            // On every attachment a sort key split the layer into, so a crossing between two of them
+            // is drawn once too - the renderer groups consecutive styles by this name.
+            const drawOnce = layer.metadata?.['massif:draw-once'];
+            if (declarations.length > 0 && drawOnce !== undefined && drawOnce !== '') {
+                declarations = [...declarations, `draw-once: ${translateExpression(drawOnce)};`];
+            }
             if (declarations.length === 0)
                 return;
             let selector;
@@ -610,9 +622,19 @@ export function convert(style, table, options = {}) {
                 const minDefault = typeof minParam === 'string' ? Number(parameters.get(minParam)?.default) : NaN;
                 const hasParam = typeof minParam === 'string' && zoomOffsetLevels() === 0;
                 const paramStart = hasParam && typeof layer.minzoom === 'number' && Math.floor(layer.minzoom) === minDefault;
+                // `massif:minzoom-const` / `massif:maxzoom-const`: the zoom range is a project constant, resolved
+                // when the style compiles - a child project overrides it in its `constants`, at no runtime cost.
+                const minConst = layer.metadata?.['massif:minzoom-const'];
+                const maxConst = layer.metadata?.['massif:maxzoom-const'];
+                if (typeof minConst === 'string' && typeof layer.minzoom === 'number')
+                    constants.set(minConst, Math.floor(layer.minzoom) + zoomOffsetLevels());
+                if (typeof maxConst === 'string' && typeof layer.maxzoom === 'number')
+                    constants.set(maxConst, Math.ceil(layer.maxzoom) + zoomOffsetLevels());
                 const predicates = [
                     ...(hasParam ? [`[zoom >= 'param::${minParam}']`] : []),
-                    ...zoomPredicates(paramStart ? undefined : layer.minzoom, layer.maxzoom),
+                    ...(typeof minConst === 'string' ? [`[zoom >= $${minConst}]`] : []),
+                    ...(typeof maxConst === 'string' ? [`[zoom < $${maxConst}]`] : []),
+                    ...zoomPredicates(paramStart || typeof minConst === 'string' ? undefined : layer.minzoom, typeof maxConst === 'string' ? undefined : layer.maxzoom),
                     ...(buildings ? [buildings] : []),
                     ...translateFilter(filter),
                 ].map((p) => (p.startsWith('when(') ? ` ${p}` : p));
@@ -654,6 +676,8 @@ export function convert(style, table, options = {}) {
         if ((options.liveLight || lights !== undefined) && !mapBlock.some((d) => d.startsWith('colors-prelit:'))) {
             mapBlock.push('colors-prelit: 1;');
         }
+        // The SDK shifts every zoom by log2(app / this), so the style holds whatever TileDrawSize the app picks.
+        mapBlock.push(`tile-draw-size: ${options.tileDrawSize ?? 256};`);
         // The MEDIAN index, not the first. `road` has 82 layers spanning indices 3 to 130 in Mapbox
         // Standard, and its FIRST is one early tunnel layer - ordering by that sank all 82 beneath
         // landuse, so the landuse polygons painted over every road. The median puts a source-layer
@@ -739,11 +763,52 @@ export function convert(style, table, options = {}) {
     if (style.name)
         header.push(`/* Source style: ${style.name} */`);
     const render = (block) => `${block.selector} {\n${block.declarations.map((d) => `  ${d}`).join('\n')}\n}`;
+    // `massif:template`: every property all layers of a template state goes into `%name`, at its most
+    // common value; a rule keeps what differs. A child project extends it to draw a rule of its own.
+    const templateOf = new Map();
+    for (const layer of style.layers ?? []) {
+        const name = layer.metadata?.['massif:template'];
+        if (typeof name === 'string')
+            templateOf.set(layer.id, attachmentName(name));
+    }
+    const templateBlocks = new Map();
+    for (const block of ruleBlocks) {
+        const name = templateOf.get(block.owner);
+        if (name)
+            (templateBlocks.get(name) ?? templateBlocks.set(name, []).get(name)).push(block);
+    }
+    const renderedRules = [];
+    const emittedTemplates = new Set();
+    for (const block of ruleBlocks) {
+        const name = templateOf.get(block.owner);
+        const group = name ? templateBlocks.get(name) : [];
+        if (!name || group.length < 2) {
+            renderedRules.push(render(block));
+            continue;
+        }
+        const propertyOf = (d) => d.slice(0, d.indexOf(':'));
+        const common = group[0].declarations.map(propertyOf)
+            .filter((p) => group.every((other) => other.declarations.some((d) => propertyOf(d) === p)))
+            .map((p) => {
+            const counts = new Map();
+            for (const other of group) {
+                const d = other.declarations.find((x) => propertyOf(x) === p);
+                counts.set(d, (counts.get(d) ?? 0) + 1);
+            }
+            return [...counts].sort((a, b) => b[1] - a[1])[0][0];
+        });
+        if (!emittedTemplates.has(name)) {
+            emittedTemplates.add(name);
+            renderedRules.push(render({ selector: `%${name}`, declarations: common }));
+        }
+        renderedRules.push(render({ selector: block.selector,
+            declarations: [...block.declarations.filter((d) => !common.includes(d)), `@extend %${name};`] }));
+    }
     const mss = [
         ...header,
         '',
         ...(mapRule.declarations.length > 0 ? [render(mapRule), ''] : []),
-        ...ruleBlocks.map(render),
+        ...renderedRules,
         '',
     ].join('\n');
     const variables = palette.length > 0 ? [...paletteHeader(style.name), '', ...palette, ''].join('\n') : null;
@@ -762,6 +827,7 @@ export function convert(style, table, options = {}) {
         ...(options.styleParams.size > 0
             ? { styleparameters: Object.fromEntries([...options.styleParams].sort()) }
             : {}),
+        ...(constants.size > 0 ? { constants: Object.fromEntries([...constants].sort()) } : {}),
     }, null, 2) + '\n';
     // Only what DIFFERS from the shared table: a preset project extends project.json, and
     // `extends` merges styleparameters, so an entry it does not restate is inherited.
@@ -1358,6 +1424,15 @@ function layerDeclarations(layer, symbolizer, allowed, coverage, options, layerI
             coverage.emit('text-allow-overlap');
             continue;
         }
+        // On the roof of the 3D building the anchor stands in; a shield takes it through the rename below.
+        if (name === 'symbol-z-elevate') {
+            const translated = tryTranslate(value, name, layer.id, coverage);
+            if (translated === null)
+                continue;
+            out.push(`text-z-elevate: ${translated};`);
+            coverage.emit('text-z-elevate');
+            continue;
+        }
         // MapBox places the LOWEST sort key first; CartoCSS's culler takes the highest priority.
         if (name === 'symbol-sort-key')
             continue; // folded into the layer's priority below
@@ -1446,14 +1521,15 @@ function layerDeclarations(layer, symbolizer, allowed, coverage, options, layerI
                 coverage.drop(name, 'no literal dash pattern to take', layer.id);
                 continue;
             }
-            const { pattern, zoom } = dash;
+            const zoom = dash.zoom;
+            const pattern = (layer.dashZoom === undefined ? null : dashPatternAt(value, layer.dashZoom)) ?? dash.pattern;
             // `[1, 0]` is MapBox's spelling of SOLID. Scaled by a line width it became a 430 px
             // "dash", which is a 430 px bitmap rasterized to draw an unbroken line.
             if (!pattern.some((v, i) => i % 2 === 1 && v > 0)) {
                 coverage.drop(name, 'the pattern has no gap, so the line is solid', layer.id);
                 continue;
             }
-            if (pattern !== value) {
+            if (pattern !== value && layer.dashZoom === undefined) {
                 // MapTiler ramps its path dashes over zoom and CartoCSS takes ONE pattern. The
                 // base (the widest band, and every stop below the first) is what is on screen at
                 // nearly every zoom; taking nothing left every footway drawn solid.
@@ -1472,7 +1548,7 @@ function layerDeclarations(layer, symbolizer, allowed, coverage, options, layerI
                 coverage.approximate(`line-dasharray scaled by ${round(scale)}, a zoom-driven ` +
                     'line-width read at one zoom: CartoCSS takes one dash pattern, not a ramp');
             }
-            out.push(`line-dasharray: ${pattern.map((v) => round(v * scale)).join(',')};`);
+            out.push(`line-dasharray: ${pixelDashes(pattern.map((v) => v * scale)).map(round).join(',')};`);
             coverage.emit('line-dasharray');
             continue;
         }
@@ -2003,50 +2079,105 @@ function dashPattern(value) {
 function splitDashByZoom(layer, coverage) {
     const dash = layer.paint?.['line-dasharray'];
     const width = dashWidth(layer.paint?.['line-width']);
-    if (dash === undefined || layer.dashZoom !== undefined || !Array.isArray(width))
-        return [layer];
-    const pattern = dashPattern(dash);
-    // A dash the style RAMPS states the zoom its pattern begins at, and reading the width there is
-    // already the targeted answer - Standard's treads depend on it. Banding is for the plain
-    // literal dash, which has no zoom of its own to be read at.
-    if (pattern === null || pattern.zoom !== null)
+    if (dash === undefined || layer.dashZoom !== undefined || dashPattern(dash) === null)
         return [layer];
+    const zmin = layer.minzoom ?? 0;
+    const zmax = Math.min(layer.maxzoom ?? 24, 24);
+    // A dash the style STEPS over zoom is a rule per step: one pattern for all of them drew Standard's
+    // sleepers 0.3 px every 3 px at z20, a grey band, and a ferry dashed below the zoom its dash starts.
+    const cuts = new Set(dashSteps(dash).filter((z) => z > zmin && z < zmax));
     // From the first stop that is actually DRAWN, not the first stop: a ramp starting at width 0 -
     // Liberty's rail hatchings start (14.5, 0) - has nothing to keep the dash in proportion to
     // below it. And no further than the last stop, above which the width is flat and a band would
     // read the same number twice.
-    const stops = rampStops(width);
-    const lo = Math.floor(Math.max(layer.minzoom ?? 0, stops.find(([, w]) => w > 0)?.[0] ?? 0));
-    const hi = Math.ceil(Math.min(layer.maxzoom ?? 24, stops[stops.length - 1]?.[0] ?? 24, 24));
+    const stops = Array.isArray(width) ? rampStops(width) : [];
+    const lo = Math.floor(Math.max(zmin, stops.find(([, w]) => w > 0)?.[0] ?? zmin));
+    const hi = Math.ceil(Math.min(zmax, stops[stops.length - 1]?.[0] ?? zmax));
     const wLo = rampAt(width, lo);
     const wHi = rampAt(width, hi);
-    if (hi - lo < 2 || !wLo || !wHi || wLo <= 0 || wHi <= 0)
-        return [layer];
-    // Cut where the width DOUBLES, rounding up: a band spanning a 2x range is at worst sqrt(2) out
-    // in the middle, which is the error this is willing to keep.
-    const ratio = Math.max(wHi / wLo, wLo / wHi);
-    const bandCount = Math.min(MAX_DASH_BANDS, hi - lo, Math.ceil(Math.log2(ratio)));
-    if (bandCount < 2)
+    if (stops.length && hi - lo >= 2 && wLo && wHi && wLo > 0 && wHi > 0) {
+        // Cut where the width DOUBLES, rounding up: a band spanning a 2x range is at worst sqrt(2) out
+        // in the middle, which is the error this is willing to keep.
+        const bandCount = Math.min(MAX_DASH_BANDS, hi - lo, Math.ceil(Math.log2(Math.max(wHi / wLo, wLo / wHi))));
+        const step = Math.max(1, Math.round((hi - lo) / bandCount));
+        for (let at = lo + step; bandCount >= 2 && at < hi; at += step)
+            cuts.add(at);
+    }
+    if (!cuts.size)
         return [layer];
-    const step = Math.max(1, Math.round((hi - lo) / bandCount));
+    const edges = [zmin, ...[...cuts].sort((a, b) => a - b), zmax];
     const bands = [];
-    for (let from = lo; from < hi; from += step) {
-        const to = Math.min(hi, from + step);
+    for (let i = 0; i + 1 < edges.length; i++) {
+        const from = edges[i], to = edges[i + 1];
+        // The width is read in the middle of the band up to the ramp's last stop, past a stretch where
+        // it is 0 if it starts with one; the pattern anywhere inside, a band never straddles a step.
+        const b = Math.min(to, hi);
+        let dashZoom = from < b ? (from + b) / 2 : from;
+        if (stops.length && !((rampAt(width, dashZoom) ?? 0) > 0) && Math.max(from, lo) < b) {
+            dashZoom = (Math.max(from, lo) + b) / 2;
+        }
         bands.push({
             ...layer,
             // The ends keep whatever the layer stated, so banding never narrows what it draws.
-            minzoom: from === lo ? layer.minzoom : from,
-            maxzoom: to >= hi ? layer.maxzoom : to,
-            dashZoom: (from + to) / 2,
+            minzoom: i === 0 ? layer.minzoom : from,
+            maxzoom: i + 2 === edges.length ? layer.maxzoom : to,
+            dashZoom,
         });
     }
+    // Two solid bands in a row are one: a width cut means nothing where no dash is drawn.
+    const solid = (band) => !(dashPatternAt(dash, band.dashZoom) ?? [0, 1]).some((v, i) => i % 2 === 1 && v > 0);
+    for (let i = bands.length - 1; i > 0; i--) {
+        if (solid(bands[i]) && solid(bands[i - 1])) {
+            bands[i - 1] = { ...bands[i - 1], maxzoom: bands[i].maxzoom };
+            bands.splice(i, 1);
+        }
+    }
     if (bands.length < 2)
         return [layer];
     coverage.approximate(`line-dasharray on "${layer.id}" split into ${bands.length} zoom bands: a `
         + 'dash is a multiple of the line width and CartoCSS takes one pattern per rule, so a '
-        + 'ramped width needs a rule per band to stay in proportion');
+        + 'ramped width or a stepped dash needs a rule per band');
     return bands;
 }
+/**
+ * No dash under a pixel: drawn through a bitmap, a 0.5 px sleeper lights a pixel only where it happens to land,
+ * and Standard's rail at z19 came out as blobs. Each dash is widened to 1 px, its gap paying for it, so the
+ * period is kept.
+ */
+function pixelDashes(pattern) {
+    const out = [...pattern];
+    for (let i = 0; i + 1 < out.length; i += 2) {
+        const grow = Math.max(0, 1 - out[i]);
+        const take = Math.min(grow, Math.max(0, out[i + 1] - 1));
+        out[i] += take;
+        out[i + 1] -= take;
+    }
+    return out;
+}
+/** The zooms a `step` dash switches pattern at. */
+function dashSteps(value) {
+    if (!Array.isArray(value) || value[0] !== 'step' || !Array.isArray(value[1]) || value[1][0] !== 'zoom')
+        return [];
+    const out = [];
+    for (let i = 3; i + 1 < value.length; i += 2) {
+        if (typeof value[i] === 'number')
+            out.push(value[i]);
+    }
+    return out;
+}
+/** The pattern a `step` dash draws at `zoom`, or null when it is not one. */
+function dashPatternAt(value, zoom) {
+    if (!dashSteps(value).length)
+        return null;
+    const list = (node) => (Array.isArray(node) && node[0] === 'literal' ? node[1] : node);
+    let at = list(value[2]);
+    for (let i = 3; i + 1 < value.length; i += 2) {
+        if (value[i] > zoom)
+            break;
+        at = list(value[i + 1]);
+    }
+    return Array.isArray(at) && at.every((v) => typeof v === 'number') ? at : null;
+}
 /**
  * The width a dash is scaled by. A width chosen per config value (`match` on `["config", ...]`) is
  * read at its fallback: its numbers averaged over every branch drew an e-ink track's 5 px dash 50 px.
@@ -2480,7 +2611,9 @@ function aliasSprites(names, file, prefix, options) {
 }
 function iconExpression(image, layer, coverage, options) {
     const sprites = options.sprites;
-    const slug = safeParamName(layer.id);
+    // Layers sharing a template share its tables, so the icon lookup is a declaration they have in common.
+    const template = layer.metadata?.['massif:template'];
+    const slug = safeParamName(typeof template === 'string' ? template : layer.id);
     let sample = null;
     let tableIndex = 0;
     // A recolourable icon is cut in two - the glyph as a field, the disc as the shield's plate - so