fix dynamic size's event, close #1029

src/geo/Extent.js

@@ -392,6 +392,7 @@ class Extent {
         this.ymin = ymin;
         this.xmax = xmax;
         this.ymax = ymax;
+        this._dirty = true;
         return this;
     }
 
@@ -567,7 +568,7 @@ class Extent {
         }
         const e = out || new this.constructor();
         if (out) {
-            e.xmin = e.ymin = e.xmax = e.ymax = 0;
+            e.set(null, null, null, null);
         }
         let coord;
         if (this._clazz === Coordinate) {
@@ -589,6 +590,9 @@ class Extent {
 
     _project(ext) {
         if (!ext || !ext.isValid()) {
+            if (ext) {
+                ext.pxmin = ext.pxmax = ext.pymin = ext.pymax = null;
+            }
             return;
         }
         const proj = this.projection;

src/renderer/geometry/Painter.js

@@ -528,26 +528,32 @@ class Painter extends Class {
         const map = this.getMap();
         resources = resources || this.getLayer()._getRenderer().resources;
         const zoom = map.getZoom();
-        if (!this._extent2D || this._extent2D._zoom !== zoom) {
-            delete this._extent2D;
-            delete this._fixedExtent;
+        const isDynamicSize = this._isDynamicSize();
+        if (!this._extent2D || this._extent2D._zoom !== zoom || !this._fixedExtent) {
+            if (this._extent2D && this._extent2D._zoom !== zoom) {
+                delete this._extent2D;
+            }
             if (this.symbolizers) {
-                const extent = this._extent2D = new PointExtent();
-                const fixedExt = this._fixedExtent = new PointExtent();
-                for (let i = this.symbolizers.length - 1; i >= 0; i--) {
-                    const symbolizer = this.symbolizers[i];
-                    extent._combine(symbolizer.get2DExtent());
-                    if (symbolizer.getFixedExtent) {
-                        fixedExt._combine(symbolizer.getFixedExtent(resources));
-                    }
+                if (!this._extent2D) {
+                    this._extent2D = this._computeExtent2D(new PointExtent());
+                    this._extent2D._zoom = zoom;
+                }
+                if (!this._fixedExtent) {
+                    this._fixedExtent = this._computeFixedExtent(resources, new PointExtent());
                 }
-                extent._zoom = zoom;
             }
         }
+
         if (!this._extent2D) {
+            if (isDynamicSize) {
+                delete this._fixedExtent;
+            }
             return null;
         }
         const { xmin, ymin, xmax, ymax } = this._fixedExtent;
+        if (isDynamicSize) {
+            delete this._fixedExtent;
+        }
         //2d 坐标系是opengl规则，y轴方向与containerPoint是反向的
         TEMP_FIXED_EXTENT.set(xmin, -ymax, xmax, -ymin);
         if (out) {
@@ -558,6 +564,34 @@ class Painter extends Class {
         return this._extent2D.add(TEMP_FIXED_EXTENT);
     }
 
+    _computeExtent2D(extent) {
+        for (let i = this.symbolizers.length - 1; i >= 0; i--) {
+            const symbolizer = this.symbolizers[i];
+            extent._combine(symbolizer.get2DExtent());
+        }
+        return extent;
+    }
+
+    _computeFixedExtent(resources, extent) {
+        for (let i = this.symbolizers.length - 1; i >= 0; i--) {
+            const symbolizer = this.symbolizers[i];
+            if (symbolizer.getFixedExtent) {
+                extent._combine(symbolizer.getFixedExtent(resources));
+            }
+        }
+        return extent;
+    }
+
+    _isDynamicSize() {
+        for (let i = this.symbolizers.length - 1; i >= 0; i--) {
+            const symbolizer = this.symbolizers[i];
+            if (symbolizer.isDynamicSize()) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     getContainerExtent(out) {
         if (this._aboveCamera()) {
             return null;
@@ -582,7 +616,7 @@ class Painter extends Class {
             extent._combine(groundExtent);
         }
         if (extent) {
-            extent._add(this._fixedExtent);
+            extent._add(this._fixedExtent || this._computeFixedExtent(null, new PointExtent()));
         }
         const smoothness = this.geometry.options['smoothness'];
         if (smoothness) {
@@ -601,6 +635,9 @@ class Painter extends Class {
     getFixedExtent() {
         const map = this.getMap();
         const zoom = map.getZoom();
+        if (this._isDynamicSize()) {
+            return this._computeFixedExtent(null, new PointExtent());
+        }
         if (!this._extent2D || this._extent2D._zoom !== zoom) {
             this.get2DExtent(null, TEMP_FIXED_EXTENT);
         }

src/renderer/geometry/symbolizers/PointSymbolizer.js

@@ -2,6 +2,7 @@ import { computeDegree } from '../../../core/util';
 import PointExtent from '../../../geo/PointExtent';
 import Point from '../../../geo/Point';
 import CanvasSymbolizer from './CanvasSymbolizer';
+import { isFunctionDefinition } from '../../../core/mapbox';
 
 const TEMP_POINT0 = new Point(0, 0);
 const TEMP_POINT1 = new Point(0, 0);
@@ -38,6 +39,12 @@ class PointSymbolizer extends CanvasSymbolizer {
         return extent;
     }
 
+    isDynamicSize() {
+        const symbol = this.symbol;
+        return isFunctionDefinition(symbol['markerWidth']) || isFunctionDefinition(symbol['markerHeight']) ||
+            isFunctionDefinition(symbol['textSize']);
+    }
+
     _rotateExtent(fixedExtent, angle) {
         return fixedExtent.convertTo(p => p._rotate(angle));
     }

src/renderer/geometry/symbolizers/Symbolizer.js

@@ -18,6 +18,10 @@ class Symbolizer {
         return this.painter;
     }
 
+    isDynamicSize() {
+        return false;
+    }
+
     /**
      * Test if the property is a property related with coloring
      * @param {String} prop - property name to test

src/renderer/geometry/symbolizers/VectorMarkerSymbolizer.js

@@ -1,7 +1,7 @@
 import { isNil, isNumber, isArrayHasData, getValueOrDefault, sign } from '../../../core/util';
 import { isGradient, getGradientStamp } from '../../../core/util/style';
 import { getAlignPoint } from '../../../core/util/strings';
-import { hasFunctionDefinition } from '../../../core/mapbox';
+import { hasFunctionDefinition, isFunctionDefinition } from '../../../core/mapbox';
 import Size from '../../../geo/Size';
 import Point from '../../../geo/Point';
 import PointExtent from '../../../geo/PointExtent';
@@ -109,6 +109,9 @@ export default class VectorMarkerSymbolizer extends PointSymbolizer {
                 shadow = 2 * (this.symbol['shadowBlur'] || 0), // add some tolerance for shadowOffsetX/Y
                 w = Math.round(this.style['markerWidth'] + lineWidth + 2 * shadow + this.padding * 2),
                 h = Math.round(this.style['markerHeight'] + lineWidth + 2 * shadow + this.padding * 2);
+            if (isFunctionDefinition(this.symbol['markerWidth']) || isFunctionDefinition(this.symbol['markerHeight'])) {
+                return [w, h];
+            }
             this._size = [w, h];
         }
         return this._size;

test/geometry/event/GeometryEventSpec.js

@@ -1,5 +1,4 @@
 describe('Geometry.Events', function () {
-
     var container;
     var map;
     var center = new maptalks.Coordinate(118.846825, 32.046534);
@@ -227,4 +226,46 @@ describe('Geometry.Events', function () {
         });
         expect(spy.called).not.to.be.ok();
     });
+
+    it('#1029, event for invisible dynamic size marker', function () {
+        var circle = new maptalks.Marker(map.getCenter(), {
+            'symbol': {
+                'markerType': 'circle',
+                'markerWidth': {stops: [[18, 0], [20, 30]]},
+                'markerHeight': {stops: [[18, 0], [20, 30]]},
+            }
+        });
+        circle.addTo(layer);
+        var domPosition = GET_PAGE_POSITION(container);
+        var point = map.coordinateToContainerPoint(center).add(domPosition);
+        var spy = sinon.spy();
+        circle.on('click', spy);
+
+        happen.click(eventContainer, {
+            'clientX':point.x + 1,
+            'clientY':point.y
+        });
+        expect(spy.called).not.to.be.ok();
+    });
+
+    it('#1029, event for visible dynamic size marker', function () {
+        var circle = new maptalks.Marker(map.getCenter(), {
+            'symbol': {
+                'markerType': 'circle',
+                'markerWidth': {stops: [[10, 0], [20, 30]]},
+                'markerHeight': {stops: [[10, 0], [20, 30]]},
+            }
+        });
+        circle.addTo(layer);
+        var domPosition = GET_PAGE_POSITION(container);
+        var point = map.coordinateToContainerPoint(center).add(domPosition);
+        var spy = sinon.spy();
+        circle.on('click', spy);
+
+        happen.click(eventContainer, {
+            'clientX':point.x + 1,
+            'clientY':point.y
+        });
+        expect(spy.called).to.be.ok();
+    });
 });