Enable property functions for {text,icon}-size (#4455)

* Refactor byte pair unpacking into separate shader function * Document / clarify StyleDeclaration#calculateInterpolationT * Document strategy for populating vertex attributes with composite function values * Clamp composite function interpolation to [0, 3], not [0, 4] * Refactor {Array,Buffer}Group to construct layout vertex array type dynamically * Enable property functions for text-size * Improve naming and symbol layout internal docs * Enable property functions for icon-size * Add render tests for data-driven {text,icon}-size * Pack texture and layout data into single attribute Fix bug in packing of labelangle value * Label angles passed to addVertex() are in units of 1/256 of a circle. Because packUint8ToFloat clamped input values to [0, 255], the value 256 was clamped to 255 (== 1.4 degrees off the horizontal), rather than being wrapped to 0. * Remove vestigial parameters * Refactor {text,icon}-size-related bucket data - Consolidate it under bucket.{text,icon}SizeData objects - Include function base as part of said data - Use interpolationFactor to account for base != 1 for consistency with paint properties * Document and refactor exponential function interpolation * Fix handling of camera functions of 'interval' type * Add t.equalWithPrecision() assertion and use it for function tests * Edit comment for accuracy * Ignore high-base tests for native mapbox/mapbox-gl-native#8654 * Fixup render test: add missing feature properties
mapbox · Apr 6, 2017 · 13363a2 · 13363a2
1 parent 1cc4089
commit 13363a2
Show file tree

Hide file tree

Showing 58 changed files with 1,700 additions and 161 deletions.
diff --git a/debug/textsize.html b/debug/textsize.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+var stops = [
+    [ 0, 6 ],
+    [ 1, 6 ],
+    [ 2, 6 ],
+    [ 2.1, 3 ],
+    [ 2.2, 3 ],
+    [ 2.3, 3 ],
+    [ 2.4, 3 ],
+    [ 3, 12 ],
+    [ 10, 12 ]
+];
+
+var layer = (id, x, textSize, color) => ({
+    "id": id,
+    "type": "symbol",
+    "source": "geojson",
+    "filter": ["==", "x", x],
+    "layout": {
+        "symbol-placement": "line",
+        "symbol-spacing": 1,
+        "text-anchor": "left",
+        "text-allow-overlap": true,
+        "text-ignore-placement": true,
+        "icon-allow-overlap": true,
+        "icon-ignore-placement": true,
+        "text-max-angle": 180,
+        "text-field": "abcdefghijklmnopqrstuvwxyz",
+        "text-font": [
+            "Open Sans Semibold",
+            "Arial Unicode MS Bold"
+        ],
+        "text-size": textSize,
+        "icon-size": Object.assign({}, textSize, {
+            stops: textSize.stops.map(s => [s[0], s[1] / 3])
+        }),
+        "icon-image": "airfield-11"
+    },
+    "paint": {
+        "text-color": color,
+        "text-opacity": 0.5
+    }
+});
+
+var style = {
+    "version": 8,
+    "metadata": {
+        "test": {
+            "width": 64,
+            "height": 64
+        }
+    },
+    "sources": {
+        "geojson": {
+            "type": "geojson",
+            "data": {
+                "type": "FeatureCollection",
+                "features": [
+                    {
+                        "type": "Feature",
+                        "properties": { "x": 0 },
+                        "geometry": {
+                            "type": "LineString",
+                            "coordinates": [
+                                [ -10, -1 ],
+                                [ -20, -10 ],
+                                [ -30, -1 ],
+                                [ -40, -10 ]
+                            ]
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "sprite": "mapbox://sprites/mapbox/streets-v10",
+    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+    "layers": [
+        layer('symbol-camera', 0, {
+            "stops": stops
+        }, 'red'),
+
+        layer('symbol-composite', 0, {
+            "property": "x",
+            "stops": stops.map(s => [{value: 0, zoom: s[0]}, s[1]])
+        }, 'blue'),
+
+        {
+            "id": "line",
+            "type": "line",
+            "source": "geojson"
+        }
+    ]
+};
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: style,
+    hash: true
+});
+
+map.showTileBoundaries = true;
+
+setTimeout(() => console.log(JSON.stringify(map.getStyle())));
+
+
+</script>
+</body>
+</html>
diff --git a/src/data/array_group.js b/src/data/array_group.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const ProgramConfiguration = require('./program_configuration');
+const createVertexArrayType = require('./vertex_array_type');
 
 class Segment {
     constructor(vertexOffset, primitiveOffset) {
@@ -34,7 +35,7 @@ class ArrayGroup {
     constructor(programInterface, layers, zoom) {
         this.globalProperties = {zoom};
 
-        const LayoutVertexArrayType = programInterface.layoutVertexArrayType;
+        const LayoutVertexArrayType = createVertexArrayType(programInterface.layoutAttributes);
         this.layoutVertexArray = new LayoutVertexArrayType();
 
         const ElementArrayType = programInterface.elementArrayType;

diff --git a/src/data/bucket/circle_bucket.js b/src/data/bucket/circle_bucket.js
@@ -1,15 +1,14 @@
 'use strict';
 
 const Bucket = require('../bucket');
-const createVertexArrayType = require('../vertex_array_type');
 const createElementArrayType = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
 
 const circleInterface = {
-    layoutVertexArrayType: createVertexArrayType([
+    layoutAttributes: [
         {name: 'a_pos', components: 2, type: 'Int16'}
-    ]),
+    ],
     elementArrayType: createElementArrayType(),
 
     paintAttributes: [

diff --git a/src/data/bucket/fill_bucket.js b/src/data/bucket/fill_bucket.js
@@ -1,7 +1,6 @@
 'use strict';
 
 const Bucket = require('../bucket');
-const createVertexArrayType = require('../vertex_array_type');
 const createElementArrayType = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const earcut = require('earcut');
@@ -10,9 +9,9 @@ const assert = require('assert');
 const EARCUT_MAX_RINGS = 500;
 
 const fillInterface = {
-    layoutVertexArrayType: createVertexArrayType([
+    layoutAttributes: [
         {name: 'a_pos', components: 2, type: 'Int16'}
-    ]),
+    ],
     elementArrayType: createElementArrayType(3),
     elementArrayType2: createElementArrayType(2),
 

diff --git a/src/data/bucket/fill_extrusion_bucket.js b/src/data/bucket/fill_extrusion_bucket.js
@@ -1,7 +1,6 @@
 'use strict';
 
 const Bucket = require('../bucket');
-const createVertexArrayType = require('../vertex_array_type');
 const createElementArrayType = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
@@ -11,11 +10,11 @@ const assert = require('assert');
 const EARCUT_MAX_RINGS = 500;
 
 const fillExtrusionInterface = {
-    layoutVertexArrayType: createVertexArrayType([
+    layoutAttributes: [
         {name: 'a_pos',          components: 2, type: 'Int16'},
         {name: 'a_normal',       components: 3, type: 'Int16'},
         {name: 'a_edgedistance', components: 1, type: 'Int16'}
-    ]),
+    ],
     elementArrayType: createElementArrayType(3),
 
     paintAttributes: [

diff --git a/src/data/bucket/line_bucket.js b/src/data/bucket/line_bucket.js
@@ -1,7 +1,6 @@
 'use strict';
 
 const Bucket = require('../bucket');
-const createVertexArrayType = require('../vertex_array_type');
 const createElementArrayType = require('../element_array_type');
 const loadGeometry = require('../load_geometry');
 const EXTENT = require('../extent');
@@ -41,10 +40,10 @@ const LINE_DISTANCE_SCALE = 1 / 2;
 const MAX_LINE_DISTANCE = Math.pow(2, LINE_DISTANCE_BUFFER_BITS - 1) / LINE_DISTANCE_SCALE;
 
 const lineInterface = {
-    layoutVertexArrayType: createVertexArrayType([
+    layoutAttributes: [
         {name: 'a_pos',  components: 2, type: 'Int16'},
         {name: 'a_data', components: 4, type: 'Uint8'}
-    ]),
+    ],
     paintAttributes: [
         {property: 'line-color', type: 'Uint8'},
         {property: 'line-blur', multiplier: 10, type: 'Uint8'},