[core] Add support for data-driven styling

2 files changed, 77 insertions, 27 deletions

diff --git a/scripts/build-shaders.js b/scripts/build-shaders.js
index d00762acf0..00ced5f23b 100755
--- a/scripts/build-shaders.js
+++ b/scripts/build-shaders.js
@@ -14,28 +14,43 @@ if (!shaderName || !inputPath || !outputPath) {
     process.exit(1);
 }
 
-var pragmaMapboxRe = /(\s*)#pragma\s+mapbox\s*:\s+(define|initialize)\s+(low|medium|high)p\s+(float|vec(?:2|3|4))\s+(.*)/;
-
-
-function applyPragmas(source) {
-    return '\n' + source.split('\n').map(function(line) {
-        var params = line.match(pragmaMapboxRe);
-        if (params) {
-            if (params[2] === 'define') {
-                return params[1] + 'uniform ' + params[3] + 'p ' + params[4] + ' u_' + params[5] + ';';
-            } else {
-                return params[1] + params[3] + 'p ' + params[4] + ' ' + params[5] + ' = u_' + params[5] + ';';
-            }
-        } else {
-            return line;
-        }
-    }).join('\n');
+function applyPragmas(source, pragmas) {
+    return source.replace(/#pragma mapbox: ([\w]+) ([\w]+) ([\w]+) ([\w]+)/g, (match, operation, precision, type, name) => {
+        return pragmas[operation]
+            .join("\n")
+            .replace(/\{type\}/g, type)
+            .replace(/\{precision\}/g, precision)
+            .replace(/\{name\}/g, name);
+    });
 }
 
-var vertexPrelude = fs.readFileSync(path.join(inputPath, '_prelude.vertex.glsl'));
-var fragmentPrelude = fs.readFileSync(path.join(inputPath, '_prelude.fragment.glsl'));
-var vertexSource = vertexPrelude + fs.readFileSync(path.join(inputPath, shaderName + '.vertex.glsl'), 'utf8');
-var fragmentSource = fragmentPrelude + fs.readFileSync(path.join(inputPath, shaderName + '.fragment.glsl'), 'utf8');
+function vertexSource() {
+    var prelude = fs.readFileSync(path.join(inputPath, '_prelude.vertex.glsl'));
+    var source = fs.readFileSync(path.join(inputPath, shaderName + '.vertex.glsl'), 'utf8');
+    return prelude + applyPragmas(source, {
+        define: [
+            "uniform lowp float a_{name}_t;",
+            "attribute {precision} {type} a_{name}_min;",
+            "attribute {precision} {type} a_{name}_max;",
+            "varying {precision} {type} {name};"
+        ],
+        initialize: [
+            "{name} = mix(a_{name}_min, a_{name}_max, a_{name}_t);"
+        ]
+    });
+}
+
+function fragmentSource() {
+    var prelude = fs.readFileSync(path.join(inputPath, '_prelude.fragment.glsl'));
+    var source = fs.readFileSync(path.join(inputPath, shaderName + '.fragment.glsl'), 'utf8');
+    return prelude + applyPragmas(source, {
+        define: [
+            "varying {precision} {type} {name};"
+        ],
+        initialize: [
+        ]
+    });
+}
 
 var content = "#pragma once\n" +
 "\n" +
@@ -49,8 +64,8 @@ var content = "#pragma once\n" +
 "class " + shaderName + " {\n" +
 "public:\n" +
 "    static constexpr const char* name = \"" + shaderName + "\";\n" +
-"    static constexpr const char* vertexSource = R\"MBGL_SHADER(" + applyPragmas(vertexSource) + ")MBGL_SHADER\";\n" +
-"    static constexpr const char* fragmentSource = R\"MBGL_SHADER(" + applyPragmas(fragmentSource) + ")MBGL_SHADER\";\n" +
+"    static constexpr const char* vertexSource = R\"MBGL_SHADER(\n" + vertexSource() + ")MBGL_SHADER\";\n" +
+"    static constexpr const char* fragmentSource = R\"MBGL_SHADER(\n" + fragmentSource() + ")MBGL_SHADER\";\n" +
 "};\n" +
 "\n" +
 "} // namespace shaders\n" +
diff --git a/scripts/generate-style-code.js b/scripts/generate-style-code.js
index d090dff872..de68c33ceb 100644
--- a/scripts/generate-style-code.js
+++ b/scripts/generate-style-code.js
@@ -14,7 +14,11 @@ function parseCSSColor(str) {
   ];
 }
 
-global.propertyType = function (property) {
+global.isDataDriven = function (property) {
+  return property['property-function'] === true;
+};
+
+global.evaluatedType = function (property) {
   if (/-translate-anchor$/.test(property.name)) {
     return 'TranslateAnchorType';
   }
@@ -34,14 +38,45 @@ global.propertyType = function (property) {
     return `Color`;
   case 'array':
     if (property.length) {
-      return `std::array<${propertyType({type: property.value})}, ${property.length}>`;
+      return `std::array<${evaluatedType({type: property.value})}, ${property.length}>`;
     } else {
-      return `std::vector<${propertyType({type: property.value})}>`;
+      return `std::vector<${evaluatedType({type: property.value})}>`;
     }
   default: throw new Error(`unknown type for ${property.name}`)
   }
 };
 
+function attributeType(property, type) {
+    const name = property.name.replace(type + '-', '').replace('-', '_');
+    return `attributes::a_${name}${name === 'offset' ? '<1>' : ''}`;
+}
+
+global.layoutPropertyType = function (property) {
+  if (isDataDriven(property)) {
+    return `DataDrivenLayoutProperty<${evaluatedType(property)}>`;
+  } else {
+    return `LayoutProperty<${evaluatedType(property)}>`;
+  }
+};
+
+global.paintPropertyType = function (property, type) {
+  if (isDataDriven(property)) {
+    return `DataDrivenPaintProperty<${evaluatedType(property)}, ${attributeType(property, type)}>`;
+  } else if (/-pattern$/.test(property.name) || property.name === 'line-dasharray') {
+    return `CrossFadedPaintProperty<${evaluatedType(property)}>`;
+  } else {
+    return `PaintProperty<${evaluatedType(property)}>`;
+  }
+};
+
+global.propertyValueType = function (property) {
+  if (isDataDriven(property)) {
+    return `DataDrivenPropertyValue<${evaluatedType(property)}>`;
+  } else {
+    return `PropertyValue<${evaluatedType(property)}>`;
+  }
+};
+
 global.defaultValue = function (property) {
   // https://github.com/mapbox/mapbox-gl-native/issues/5258
   if (property.name === 'line-round-limit') {
@@ -59,9 +94,9 @@ global.defaultValue = function (property) {
     return JSON.stringify(property.default || "");
   case 'enum':
     if (property.default === undefined) {
-      return `${propertyType(property)}::Undefined`;
+      return `${evaluatedType(property)}::Undefined`;
     } else {
-      return `${propertyType(property)}::${camelize(property.default)}`;
+      return `${evaluatedType(property)}::${camelize(property.default)}`;
     }
   case 'color':
     const color = parseCSSColor(property.default).join(', ');