@scoova/mgl 1.0.0

package/src/symbol/symbol_size.ts

@@ -0,0 +1,129 @@
+import {Interpolate, interpolates} from '@maplibre/maplibre-gl-style-spec';
+import {clamp} from '../util/util';
+import {EvaluationParameters} from '../style/evaluation_parameters';
+
+import type {PropertyValue, PossiblyEvaluatedPropertyValue} from '../style/properties';
+import type {InterpolationType} from '@maplibre/maplibre-gl-style-spec';
+
+const MAX_GLYPH_ICON_SIZE = 255;
+const SIZE_PACK_FACTOR = 128;
+const MAX_PACKED_SIZE = MAX_GLYPH_ICON_SIZE * SIZE_PACK_FACTOR;
+
+export {getSizeData, evaluateSizeForFeature, evaluateSizeForZoom, SIZE_PACK_FACTOR, MAX_GLYPH_ICON_SIZE, MAX_PACKED_SIZE};
+
+export type SizeData = {
+    kind: 'constant';
+    layoutSize: number;
+} | {
+    kind: 'source';
+} | {
+    kind: 'camera';
+    minZoom: number;
+    maxZoom: number;
+    minSize: number;
+    maxSize: number;
+    interpolationType: InterpolationType;
+} | {
+    kind: 'composite';
+    minZoom: number;
+    maxZoom: number;
+    interpolationType: InterpolationType;
+};
+
+export type EvaluatedZoomSize = {uSizeT: number; uSize: number};
+
+// For {text,icon}-size, get the bucket-level data that will be needed by
+// the painter to set symbol-size-related uniforms
+function getSizeData(
+    tileZoom: number,
+    value: PropertyValue<number, PossiblyEvaluatedPropertyValue<number>>
+): SizeData {
+    const {expression} = value;
+
+    if (expression.kind === 'constant') {
+        const layoutSize = expression.evaluate(new EvaluationParameters(tileZoom + 1));
+        return {kind: 'constant', layoutSize};
+
+    } else if (expression.kind === 'source') {
+        return {kind: 'source'};
+
+    } else {
+        const {zoomStops, interpolationType} = expression;
+
+        // calculate covering zoom stops for zoom-dependent values
+        let lower = 0;
+        while (lower < zoomStops.length && zoomStops[lower] <= tileZoom) lower++;
+        lower = Math.max(0, lower - 1);
+        let upper = lower;
+        while (upper < zoomStops.length && zoomStops[upper] < tileZoom + 1) upper++;
+        upper = Math.min(zoomStops.length - 1, upper);
+
+        const minZoom = zoomStops[lower];
+        const maxZoom = zoomStops[upper];
+
+        // We'd like to be able to use CameraExpression or CompositeExpression in these
+        // return types rather than ExpressionSpecification, but the former are not
+        // transferrable across Web Worker boundaries.
+        if (expression.kind === 'composite') {
+            return {kind: 'composite', minZoom, maxZoom, interpolationType};
+        }
+
+        // for camera functions, also save off the function values
+        // evaluated at the covering zoom levels
+        const minSize = expression.evaluate(new EvaluationParameters(minZoom));
+        const maxSize = expression.evaluate(new EvaluationParameters(maxZoom));
+
+        return {kind: 'camera', minZoom, maxZoom, minSize, maxSize, interpolationType};
+    }
+}
+
+function evaluateSizeForFeature(sizeData: SizeData,
+    {
+        uSize,
+        uSizeT
+    }: {
+        uSize: number;
+        uSizeT: number;
+    },
+    {
+        lowerSize,
+        upperSize
+    }: {
+        lowerSize: number;
+        upperSize: number;
+    }): number {
+    if (sizeData.kind === 'source') {
+        return lowerSize / SIZE_PACK_FACTOR;
+    } else if (sizeData.kind === 'composite') {
+        return interpolates.number(lowerSize / SIZE_PACK_FACTOR, upperSize / SIZE_PACK_FACTOR, uSizeT);
+    }
+    return uSize;
+}
+
+function evaluateSizeForZoom(sizeData: SizeData, zoom: number): EvaluatedZoomSize {
+    let uSizeT = 0;
+    let uSize = 0;
+
+    if (sizeData.kind === 'constant') {
+        uSize = sizeData.layoutSize;
+
+    } else if (sizeData.kind !== 'source') {
+        const {interpolationType, minZoom, maxZoom} = sizeData;
+
+        // Even though we could get the exact value of the camera function
+        // at z = tr.zoom, we intentionally do not: instead, we interpolate
+        // between the camera function values at a pair of zoom stops covering
+        // [tileZoom, tileZoom + 1] in order to be consistent with this
+        // restriction on composite functions
+        const t = !interpolationType ? 0 : clamp(
+            Interpolate.interpolationFactor(interpolationType, zoom, minZoom, maxZoom), 0, 1);
+
+        if (sizeData.kind === 'camera') {
+            uSize = interpolates.number(sizeData.minSize, sizeData.maxSize, t);
+        } else {
+            uSizeT = t;
+        }
+    }
+
+    return {uSizeT, uSize};
+}

package/src/symbol/symbol_style_layer.test.ts

@@ -0,0 +1,103 @@
+import {SymbolStyleLayer} from '../style/style_layer/symbol_style_layer';
+import {FormatSectionOverride} from '../style/format_section_override';
+import properties, {SymbolPaintPropsPossiblyEvaluated} from '../style/style_layer/symbol_style_layer_properties.g';
+import {ZoomHistory} from '../style/zoom_history';
+import {EvaluationParameters} from '../style/evaluation_parameters';
+
+function createSymbolLayer(layerProperties) {
+    const layer = new SymbolStyleLayer(layerProperties);
+    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+    return layer;
+}
+
+function isOverridden(paintProperty) {
+    if (paintProperty.value.kind === 'source' || paintProperty.value.kind === 'composite') {
+        return paintProperty.value._styleExpression.expression instanceof FormatSectionOverride;
+    }
+    return false;
+}
+
+describe('setPaintOverrides', () => {
+    test('setPaintOverrides, no overrides', () => {
+        const layer = createSymbolLayer({});
+        layer._setPaintOverrides();
+        for (const overridable of properties.paint.overridableProperties) {
+            expect(isOverridden(layer.paint.get(overridable as keyof SymbolPaintPropsPossiblyEvaluated))).toBe(false);
+        }
+
+    });
+
+    test('setPaintOverrides, format expression, overridden text-color', () => {
+        const props = {layout: {'text-field': ['format', 'text', {'text-color': 'yellow'}]}};
+        const layer = createSymbolLayer(props);
+        layer._setPaintOverrides();
+        expect(isOverridden(layer.paint.get('text-color'))).toBe(true);
+
+    });
+
+    test('setPaintOverrides, format expression, no overrides', () => {
+        const props = {layout: {'text-field': ['format', 'text', {}]}};
+        const layer = createSymbolLayer(props);
+        layer._setPaintOverrides();
+        expect(isOverridden(layer.paint.get('text-color'))).toBe(false);
+
+    });
+
+});
+
+describe('hasPaintOverrides', () => {
+    test('undefined', () => {
+        const layer = createSymbolLayer({});
+        expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(false);
+
+    });
+
+    test('constant, Formatted type, overridden text-color', () => {
+        const props = {layout: {'text-field': ['format', 'text', {'text-color': 'red'}]}};
+        const layer = createSymbolLayer(props);
+        expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(true);
+
+    });
+
+    test('constant, Formatted type, no overrides', () => {
+        const props = {layout: {'text-field': ['format', 'text', {'font-scale': 0.8}]}};
+        const layer = createSymbolLayer(props);
+        expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(false);
+
+    });
+
+    test('format expression, overridden text-color', () => {
+        const props = {layout: {'text-field': ['format', ['get', 'name'], {'text-color': 'red'}]}};
+        const layer = createSymbolLayer(props);
+        expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(true);
+
+    });
+
+    test('format expression, no overrides', () => {
+        const props = {layout: {'text-field': ['format', ['get', 'name'], {}]}};
+        const layer = createSymbolLayer(props);
+        expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(false);
+
+    });
+
+    test('nested expression, overridden text-color', () => {
+        const matchExpr = ['match', ['get', 'case'],
+            'one', ['format', 'color', {'text-color': 'blue'}],
+            'default'];
+        const props = {layout: {'text-field': matchExpr}};
+        const layer = createSymbolLayer(props);
+        expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(true);
+
+    });
+
+    test('nested expression, no overrides', () => {
+        const matchExpr = ['match', ['get', 'case'],
+            'one', ['format', 'b&w', {}],
+            'default'];
+        const props = {layout: {'text-field': matchExpr}};
+        const layer = createSymbolLayer(props);
+        expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(false);
+
+    });
+
+});

package/src/symbol/transform_text.ts

@@ -0,0 +1,27 @@
+import {rtlWorkerPlugin} from '../source/rtl_text_plugin_worker';
+
+import type {SymbolStyleLayer} from '../style/style_layer/symbol_style_layer';
+import type {Feature} from '@maplibre/maplibre-gl-style-spec';
+import {Formatted} from '@maplibre/maplibre-gl-style-spec';
+
+function transformTextInternal(text: string, layer: SymbolStyleLayer, feature: Feature) {
+    const transform = layer.layout.get('text-transform').evaluate(feature, {});
+    if (transform === 'uppercase') {
+        text = text.toLocaleUpperCase();
+    } else if (transform === 'lowercase') {
+        text = text.toLocaleLowerCase();
+    }
+
+    if (rtlWorkerPlugin.applyArabicShaping) {
+        text = rtlWorkerPlugin.applyArabicShaping(text);
+    }
+
+    return text;
+}
+
+export function transformText(text: Formatted, layer: SymbolStyleLayer, feature: Feature): Formatted {
+    text.sections.forEach(section => {
+        section.text = transformTextInternal(section.text, layer, feature);
+    });
+    return text;
+}

package/src/ui/anchor.ts

@@ -0,0 +1,27 @@
+/**
+ * Where to position the anchor.
+ * Used by a popup and a marker.
+ */
+export type PositionAnchor = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export const anchorTranslate: {
+    [_ in PositionAnchor]: string;
+} = {
+    'center': 'translate(-50%,-50%)',
+    'top': 'translate(-50%,0)',
+    'top-left': 'translate(0,0)',
+    'top-right': 'translate(-100%,0)',
+    'bottom': 'translate(-50%,-100%)',
+    'bottom-left': 'translate(0,-100%)',
+    'bottom-right': 'translate(-100%,-100%)',
+    'left': 'translate(0,-50%)',
+    'right': 'translate(-100%,-50%)'
+};
+
+export function applyAnchorClass(element: HTMLElement, anchor: PositionAnchor, prefix: string) {
+    const classList = element.classList;
+    for (const key in anchorTranslate) {
+        classList.remove(`maplibregl-${prefix}-anchor-${key}`);
+    }
+    classList.add(`maplibregl-${prefix}-anchor-${anchor}`);
+}