Expressions / adaptation and cleanup after stretch operator removal

The examples have been fixed as well.

examples/filter-points-webgl.js

@@ -21,7 +21,13 @@ const animRatio =
       ['mod',
         ['+',
           ['time'],
-          ['stretch', ['get', 'year'], 1850, 2020, 0, period]
+          [
+            'interpolate',
+            ['linear'],
+            ['get', 'year'],
+            1850, 0,
+            2015, period
+          ]
         ],
         period
       ],
@@ -39,12 +45,14 @@ const style = {
   symbol: {
     symbolType: 'circle',
     size: ['*',
-      ['stretch', ['get', 'mass'], 0, 200000, 8, 26],
+      ['interpolate', ['linear'], ['get', 'mass'], 0, 8, 200000, 26],
-      ['-', 1.5, ['*', animRatio, 0.5]]
+      ['-', 1.75, ['*', animRatio, 0.75]]
     ],
     color: ['interpolate',
+      ['linear'],
       animRatio,
-      newColor, oldColor
+      0, newColor,
+      1, oldColor
     ],
     opacity: ['-', 1.0, ['*', animRatio, 0.75]]
   }

examples/icon-sprite-webgl.js

@@ -26,9 +26,10 @@ const style = {
     size: size,
     color: [
       'interpolate',
-      ['stretch', ['get', 'year'], 1950, 2013, 0, 1],
+      ['linear'],
-      oldColor,
+      ['get', 'year'],
-      newColor
+      1950, oldColor,
+      2013, newColor
     ],
     rotateWithView: false,
     offset: [

examples/webgl-points-layer.js

@@ -28,9 +28,10 @@ const predefinedStyles = {
       size: 18,
       color: [
         'interpolate',
-        ['stretch', ['get', 'population'], 20000, 300000, 0, 1],
+        ['linear'],
-        '#5aca5b',
+        ['get', 'population'],
-        '#ff6a19'
+        20000, '#5aca5b',
+        300000, '#ff6a19'
       ],
       rotateWithView: true
     }
@@ -38,11 +39,23 @@ const predefinedStyles = {
   'circles': {
     symbol: {
       symbolType: 'circle',
-      size: ['stretch', ['get', 'population'], 40000, 2000000, 8, 28],
+      size: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        40000, 8,
+        2000000, 28
+      ],
       color: '#006688',
       rotateWithView: false,
       offset: [0, 0],
-      opacity: ['stretch', ['get', 'population'], 40000, 2000000, 0.6, 0.92]
+      opacity: [
+        'interpolate',
+        ['linear'],
+        ['get', 'population'],
+        40000, 0.6,
+        2000000, 0.92
+      ]
     }
   }
 };

src/ol/style/expressions.js

@@ -4,7 +4,6 @@
  */
 
 import {asArray, isStringColor} from '../color.js';
-import {assign} from '../obj.js';
 
 /**
  * Base type used for literal style parameters; can be a number literal or the output of an operator,
@@ -246,11 +245,6 @@ function assertNumber(value) {
     throw new Error(`A numeric value was expected, got ${JSON.stringify(value)} instead`);
   }
 }
-function assertColor(value) {
-  if (!(getValueType(value) & ValueTypes.COLOR)) {
-    throw new Error(`A color value was expected, got ${JSON.stringify(value)} instead`);
-  }
-}
 function assertString(value) {
   if (!(getValueType(value) & ValueTypes.STRING)) {
     throw new Error(`A string value was expected, got ${JSON.stringify(value)} instead`);
@@ -378,24 +372,6 @@ Operators['clamp'] = {
     return `clamp(${expressionToGlsl(context, args[0])}, ${min}, ${max})`;
   }
 };
-Operators['stretch'] = {
-  getReturnType: function(args) {
-    return ValueTypes.NUMBER;
-  },
-  toGlsl: function(context, args) {
-    assertArgsCount(args, 5);
-    assertNumber(args[0]);
-    assertNumber(args[1]);
-    assertNumber(args[2]);
-    assertNumber(args[3]);
-    assertNumber(args[4]);
-    const low1 = expressionToGlsl(context, args[1]);
-    const high1 = expressionToGlsl(context, args[2]);
-    const low2 = expressionToGlsl(context, args[3]);
-    const high2 = expressionToGlsl(context, args[4]);
-    return `((clamp(${expressionToGlsl(context, args[0])}, ${low1}, ${high1}) - ${low1}) * ((${high2} - ${low2}) / (${high1} - ${low1})) + ${low2})`;
-  }
-};
 Operators['mod'] = {
   getReturnType: function(args) {
     return ValueTypes.NUMBER;

test/spec/ol/style/expressions.test.js

@@ -127,7 +127,6 @@ describe('ol.style.expressions', function() {
       expect(getValueType(['/', ['get', 'size'], 12])).to.eql(ValueTypes.NUMBER);
       expect(getValueType(['*', ['get', 'size'], 12])).to.eql(ValueTypes.NUMBER);
       expect(getValueType(['clamp', ['get', 'attr2'], ['get', 'attr3'], 20])).to.eql(ValueTypes.NUMBER);
-      expect(getValueType(['stretch', ['get', 'size'], 10, 100, 4, 8])).to.eql(ValueTypes.NUMBER);
       expect(getValueType(['pow', 10, 2])).to.eql(ValueTypes.NUMBER);
       expect(getValueType(['mod', ['time'], 10])).to.eql(ValueTypes.NUMBER);
       expect(getValueType(['>', 10, ['get', 'attr4']])).to.eql(ValueTypes.BOOLEAN);
@@ -160,7 +159,6 @@ describe('ol.style.expressions', function() {
       expect(expressionToGlsl(context, ['+', ['*', ['get', 'size'], 0.001], 12])).to.eql('((a_size * 0.001) + 12.0)');
       expect(expressionToGlsl(context, ['/', ['-', ['get', 'size'], 20], 100])).to.eql('((a_size - 20.0) / 100.0)');
       expect(expressionToGlsl(context, ['clamp', ['get', 'attr2'], ['get', 'attr3'], 20])).to.eql('clamp(a_attr2, a_attr3, 20.0)');
-      expect(expressionToGlsl(context, ['stretch', ['get', 'size'], 10, 100, 4, 8])).to.eql('((clamp(a_size, 10.0, 100.0) - 10.0) * ((8.0 - 4.0) / (100.0 - 10.0)) + 4.0)');
       expect(expressionToGlsl(context, ['pow', ['mod', ['time'], 10], 2])).to.eql('pow(mod(u_time, 10.0), 2.0)');
       expect(expressionToGlsl(context, ['>', 10, ['get', 'attr4']])).to.eql('(10.0 > a_attr4)');
       expect(expressionToGlsl(context, ['>=', 10, ['get', 'attr4']])).to.eql('(10.0 >= a_attr4)');
@@ -487,12 +485,19 @@ describe('ol.style.expressions', function() {
 
     it('correctly parses a combination of interpolate, match, color and number', function() {
       const expression = ['interpolate',
+        ['linear'],
         ['pow',
           ['/',
             ['mod',
               ['+',
                 ['time'],
-                ['stretch', ['get', 'year'], 1850, 2020, 0, 8]
+                [
+                  'interpolate',
+                  ['linear'],
+                  ['get', 'year'],
+                  1850, 0,
+                  2015, 8
+                ]
               ],
               8
             ],
@@ -500,15 +505,15 @@ describe('ol.style.expressions', function() {
           ],
           0.5
         ],
-        'rgba(242,56,22,0.61)',
+        0, 'rgba(255, 255, 0, 0.5)',
-        ['match',
+        1, ['match',
           ['get', 'year'],
           2000, 'green',
           '#ffe52c'
         ]
       ];
       expect(expressionToGlsl(context, expression)).to.eql(
-        'mix(vec4(0.9490196078431372, 0.2196078431372549, 0.08627450980392157, 0.61), (a_year == 2000.0 ? vec4(0.0, 0.5019607843137255, 0.0, 1.0) : vec4(1.0, 0.8980392156862745, 0.17254901960784313, 1.0)), pow((mod((u_time + ((clamp(a_year, 1850.0, 2020.0) - 1850.0) * ((8.0 - 0.0) / (2020.0 - 1850.0)) + 0.0)), 8.0) / 8.0), 0.5))'
+        'mix(vec4(1.0, 1.0, 0.0, 0.5), (a_year == 2000.0 ? vec4(0.0, 0.5019607843137255, 0.0, 1.0) : vec4(1.0, 0.8980392156862745, 0.17254901960784313, 1.0)), pow(clamp((pow((mod((u_time + mix(0.0, 8.0, pow(clamp((a_year - 1850.0) / (2015.0 - 1850.0), 0.0, 1.0), 1.0))), 8.0) / 8.0), 0.5) - 0.0) / (1.0 - 0.0), 0.0, 1.0), 1.0))'
       );
     });
   });

test/spec/ol/webgl/shaderbuilder.test.js

@@ -311,7 +311,7 @@ void main(void) {
         },
         symbol: {
           symbolType: 'square',
-          size: ['stretch', ['get', 'population'], ['var', 'lower'], ['var', 'higher'], 4, 8],
+          size: ['interpolate', ['linear'], ['get', 'population'], ['var', 'lower'], 4, ['var', 'higher'], 8],
           color: '#336699',
           opacity: 0.5
         }
@@ -328,7 +328,7 @@ void main(void) {
         'vec4(vec4(0.2, 0.4, 0.6, 1.0).rgb, vec4(0.2, 0.4, 0.6, 1.0).a * 0.5 * 1.0)'
       );
       expect(result.builder.sizeExpression).to.eql(
-        'vec2(((clamp(a_population, u_lower, u_higher) - u_lower) * ((8.0 - 4.0) / (u_higher - u_lower)) + 4.0))'
+        'vec2(mix(4.0, 8.0, pow(clamp((a_population - u_lower) / (u_higher - u_lower), 0.0, 1.0), 1.0)))'
       );
       expect(result.builder.offsetExpression).to.eql('vec2(0.0, 0.0)');
       expect(result.builder.texCoordExpression).to.eql('vec4(0.0, 0.0, 1.0, 1.0)');
@@ -372,14 +372,14 @@ void main(void) {
         symbol: {
           symbolType: 'square',
           size: 6,
-          color: ['interpolate', ['var', 'ratio'], [255, 255, 0], 'red']
+          color: ['interpolate', ['linear'], ['var', 'ratio'], 0, [255, 255, 0], 1, 'red']
         }
       });
 
       expect(result.builder.attributes).to.eql([]);
       expect(result.builder.varyings).to.eql([]);
       expect(result.builder.colorExpression).to.eql(
-        'vec4(mix(vec4(1.0, 1.0, 0.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), u_ratio).rgb, mix(vec4(1.0, 1.0, 0.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), u_ratio).a * 1.0 * 1.0)'
+        'vec4(mix(vec4(1.0, 1.0, 0.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), pow(clamp((u_ratio - 0.0) / (1.0 - 0.0), 0.0, 1.0), 1.0)).rgb, mix(vec4(1.0, 1.0, 0.0, 1.0), vec4(1.0, 0.0, 0.0, 1.0), pow(clamp((u_ratio - 0.0) / (1.0 - 0.0), 0.0, 1.0), 1.0)).a * 1.0 * 1.0)'
       );
       expect(result.builder.sizeExpression).to.eql('vec2(6.0)');
       expect(result.builder.offsetExpression).to.eql('vec2(0.0, 0.0)');