Geometry Edit control point support collision (#2213)

* Geometry Edit control point support collision

* updates

* spec

* updates

Author: deyihu

src/geometry/editor/GeometryEditor.js

@@ -34,7 +34,9 @@ const options = {
     //symbols of edit handles
     'centerHandleSymbol': createHandleSymbol('ellipse', 1),
     'vertexHandleSymbol': createHandleSymbol('square', 1),
-    'newVertexHandleSymbol': createHandleSymbol('square', 0.4)
+    'newVertexHandleSymbol': createHandleSymbol('square', 0.4),
+    'collision': false,
+    'collisionBufferSize': 0
 };
 
 /**

src/renderer/edit/EditHandle.js

@@ -7,6 +7,7 @@ import { isNil } from '../../core/util/';
 import { getSymbolHash } from '../../core/util/style';
 import { getEventContainerPoint } from '../../core/util/dom';
 import DragHandler from '../../handler/Drag';
+import { bufferBBOX, getDefaultBBOX } from '../../core/util/bbox';
 
 const resources = new ResourceCache();
 let prevX, prevY;
@@ -92,7 +93,7 @@ export default class EditHandle extends Eventable(Class) {
         if (x + w > 0 && x < map.width && y + h > 0 && y < map.height) {
             const dpr = map.getDevicePixelRatio();
             ctx.globalAlpha = this.opacity;
-            ctx.drawImage(this._img, Math.round((x + dx) * dpr), Math.round((y  + dy) * dpr), Math.round(w * dpr), Math.round(h * dpr));
+            ctx.drawImage(this._img, Math.round((x + dx) * dpr), Math.round((y + dy) * dpr), Math.round(w * dpr), Math.round(h * dpr));
             return true;
         }
         return false;
@@ -199,4 +200,37 @@ export default class EditHandle extends Eventable(Class) {
             containerPoint
         });
     }
+
+    needCollision() {
+        const { target } = this;
+        return target && target.options && target.options.collision;
+    }
+
+    getRenderBBOX(dpr) {
+        const { target, map } = this;
+        if (!target || !target.options || !map) {
+            return null;
+        }
+        const symbol = this.options['symbol'];
+        const dx = symbol['markerDx'] || 0;
+        const dy = symbol['markerDy'] || 0;
+        const { x, y } = this._point;
+        const w = this.w;
+        const h = this.h;
+        dpr = dpr || map.getDevicePixelRatio();
+        this.bbox = this.bbox || getDefaultBBOX();
+        const x1 = Math.round((x + dx) * dpr);
+        const y1 = Math.round((y + dy) * dpr);
+        const width = Math.round(w * dpr);
+        const height = Math.round(h * dpr);
+        this.bbox[0] = x1;
+        this.bbox[1] = y1;
+        this.bbox[2] = x1 + width;
+        this.bbox[3] = y1 + height;
+
+        const { options } = target;
+        const collisionBufferSize = options.collisionBufferSize || 0;
+        bufferBBOX(this.bbox, collisionBufferSize);
+        return this.bbox;
+    }
 }

src/renderer/map/MapCanvasRenderer.js

@@ -6,6 +6,9 @@ import Point from '../../geo/Point';
 import Canvas2D from '../../core/Canvas';
 import MapRenderer from './MapRenderer';
 import Map from '../../map/Map';
+import CollisionIndex from '../../core/CollisionIndex';
+
+const tempCollisionIndex = new CollisionIndex();
 
 /**
  * @classdesc
@@ -1001,12 +1004,32 @@ class MapCanvasRenderer extends MapRenderer {
     drawTops() {
         // clear topLayer
         this.topCtx.clearRect(0, 0, this.topLayer.width, this.topLayer.height);
+        const collisionIndex = tempCollisionIndex;
+        collisionIndex.clear();
         this.map.fire('drawtopstart');
         this.map.fire('drawtops');
         const tops = this.getTopElements();
         let updated = false;
+        const dpr = this.map.getDevicePixelRatio();
+        const geos = [];
         for (let i = 0; i < tops.length; i++) {
-            if (tops[i].render(this.topCtx)) {
+            const top = tops[i];
+            if (top.needCollision && top.needCollision()) {
+                const bbox = top.getRenderBBOX(dpr);
+                if (bbox) {
+                    if (collisionIndex.collides(bbox)) {
+                        const geometry = top.target && top.target._geometry;
+                        if (geometry && geos.indexOf(geometry) === -1) {
+                            geos.push(geometry);
+                            geometry.fire('handlecollision');
+                        }
+                        continue;
+                    } else {
+                        collisionIndex.insertBox(bbox);
+                    }
+                }
+            }
+            if (top.render(this.topCtx)) {
                 updated = true;
             }
         }

test/geometry/edit/GeometryEditSpec.js

@@ -10,13 +10,13 @@ describe('Geometry.Edit', function () {
             point._add(offset);
         }
         happen.mousedown(eventContainer, {
-            'clientX':point.x,
-            'clientY':point.y
+            'clientX': point.x,
+            'clientY': point.y
         });
         for (var i = 0; i < 10; i++) {
             happen.mousemove(document, {
-                'clientX':point.x + i,
-                'clientY':point.y + i
+                'clientX': point.x + i,
+                'clientY': point.y + i
             });
         }
         happen.mouseup(document);
@@ -107,7 +107,7 @@ describe('Geometry.Edit', function () {
         it('not all markers can be edited', function () {
             for (var i = 0; i < COMMON_SYMBOL_TESTOR.markerSymbols.length; i++) {
                 var symbol = COMMON_SYMBOL_TESTOR.markerSymbols[i];
-                var marker = new maptalks.Marker(center, { symbol:symbol });
+                var marker = new maptalks.Marker(center, { symbol: symbol });
                 marker.addTo(layer);
                 marker.startEdit();
                 if (symbol['text-name']) {
@@ -129,10 +129,10 @@ describe('Geometry.Edit', function () {
 
         it('resize a vector marker', function () {
             var marker = new maptalks.Marker(map.getCenter(), {
-                symbol : {
-                    markerType:'ellipse',
-                    markerWidth:20,
-                    markerHeight:20
+                symbol: {
+                    markerType: 'ellipse',
+                    markerWidth: 20,
+                    markerHeight: 20
                 }
             }).addTo(layer);
             var size = marker.getSize();
@@ -159,17 +159,17 @@ describe('Geometry.Edit', function () {
 
         it('resize a vector marker with fix aspect ratio', function () {
             var marker = new maptalks.Marker(map.getCenter(), {
-                symbol : {
-                    markerType:'ellipse',
-                    markerWidth:20,
-                    markerHeight:20
+                symbol: {
+                    markerType: 'ellipse',
+                    markerWidth: 20,
+                    markerHeight: 20
                 }
             }).addTo(layer);
             var fired = false;
             marker.on('resizing', function () {
                 fired = true;
             });
-            marker.startEdit({ 'fixAspectRatio' : true });
+            marker.startEdit({ 'fixAspectRatio': true });
             var size = marker.getSize();
             dragGeometry(marker, new maptalks.Point(size.width / 2, 0));
             var symbol = marker.getSymbol();
@@ -259,7 +259,7 @@ describe('Geometry.Edit', function () {
             ellipse.on('resizing', function () {
                 fired = true;
             });
-            ellipse.startEdit({ 'fixAspectRatio' : true });
+            ellipse.startEdit({ 'fixAspectRatio': true });
             var size = ellipse.getSize();
             var ratio = ellipse.getWidth() / ellipse.getHeight();
             dragGeometry(ellipse, new maptalks.Point(size.width / 2, 0));
@@ -307,7 +307,7 @@ describe('Geometry.Edit', function () {
             rect.on('resizing', function () {
                 fired = true;
             });
-            rect.startEdit({ 'fixAspectRatio' : true });
+            rect.startEdit({ 'fixAspectRatio': true });
             var size = rect.getSize();
             var ratio = rect.getWidth() / rect.getHeight();
             dragGeometry(rect, new maptalks.Point(size.width / 2, 0));
@@ -334,7 +334,7 @@ describe('Geometry.Edit', function () {
             var size = polygon.getSize();
             dragGeometry(polygon, new maptalks.Point(size.width / 2, size.height / 2));
             expect(polygon.toGeoJSON()).not.to.be.eqlGeoJSON(o);
-            var expected = {"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[118.84682499999997,32.04653400000004],[118.85742312186676,32.04653400000004],[118.85751916135894,32.04196057399085],[118.84682499999997,32.04204242358057],[118.84682499999997,32.04653400000004]]]},"properties":null};
+            var expected = { "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [[[118.84682499999997, 32.04653400000004], [118.85742312186676, 32.04653400000004], [118.85751916135894, 32.04196057399085], [118.84682499999997, 32.04204242358057], [118.84682499999997, 32.04653400000004]]] }, "properties": null };
             expect(polygon.toGeoJSON()).to.be.eqlGeoJSON(expected);
 
             polygon.undoEdit();
@@ -351,17 +351,17 @@ describe('Geometry.Edit', function () {
             expect(polygon.getCoordinates()[0].length).to.be(5);
 
             polygon.startEdit({
-                'removeVertexOn' : 'contextmenu'
+                'removeVertexOn': 'contextmenu'
             });
             var size = polygon.getSize();
             var domPosition = GET_PAGE_POSITION(container);
             var point = map.coordinateToContainerPoint(polygon.getCenter()).add(domPosition);
             point._add(new maptalks.Point(size.width / 2, size.height / 2));
 
             happen.once(eventContainer, {
-                'type' : 'contextmenu',
-                'clientX':point.x,
-                'clientY':point.y
+                'type': 'contextmenu',
+                'clientX': point.x,
+                'clientY': point.y
             });
 
             polygon.endEdit();
@@ -370,8 +370,8 @@ describe('Geometry.Edit', function () {
 
         it('update symbol when editing', function (done) {
             var circle = new maptalks.Circle(map.getCenter(), 1000, {
-                symbol : {
-                    'polygonFill' : '#f00'
+                symbol: {
+                    'polygonFill': '#f00'
                 }
             }).addTo(layer);
             circle.startEdit();
@@ -384,11 +384,32 @@ describe('Geometry.Edit', function () {
                     done();
                 });
                 circle.updateSymbol({
-                    'polygonFill' : '#ff0'
+                    'polygonFill': '#ff0'
                 });
             });
         });
     });
 
+    it('polygon edit collision', function (done) {
+        const c = 0.00001;
+        const polygon = new maptalks.Polygon([[[0, 0], [c, 0], [c, c], [0, c], [0, 0]]])
+        polygon.addTo(layer);
+
+        var spy = sinon.spy();
+        polygon.on('handlecollision', spy);
+
+        map.setZoom(3);
+        setTimeout(() => {
+            polygon.startEdit({
+                collision:true
+            });
+            setTimeout(() => {
+                expect(spy.called).to.be.ok();
+                polygon.endEdit();
+                done();
+            }, 100);
+        }, 200);
+    });
+
 
 });