Add checks for (non-)simple polygons

package.json

@@ -27,6 +27,7 @@
     "@fortawesome/fontawesome-free": "^5.2.0",
     "bootstrap-sass": "^3.3.7",
     "echarts": "^5.3.2",
+    "jsts": "^2.11.0",
     "magic-wand-tool": "^1.1.4",
     "polymorph-js": "^0.2.4",
     "uiv": "^1.2.4",

resources/assets/js/annotations/annotatorContainer.vue

@@ -564,6 +564,9 @@ export default {
         dismissCrossOriginError() {
             this.crossOriginError = false;
         },
+        handleInvalidPolygon(){
+            Messages.danger(`Invalid shape. Polygon needs at least 3 non-overlapping vertices.`);
+        },
     },
     watch: {
         async imageId(id) {

resources/assets/js/annotations/components/annotationCanvas.vue

@@ -40,11 +40,12 @@ import ZoomifySource from '@biigle/ol/source/Zoomify';
 import ZoomLevel from './annotationCanvas/zoomLevel';
 import ZoomToExtentControl from '@biigle/ol/control/ZoomToExtent';
 import ZoomToNativeControl from '../ol/ZoomToNativeControl';
-import {click as clickCondition} from '@biigle/ol/events/condition';
-import {defaults as defaultInteractions} from '@biigle/ol/interaction'
-import {getCenter} from '@biigle/ol/extent';
-import {shiftKeyOnly as shiftKeyOnlyCondition} from '@biigle/ol/events/condition';
-import {singleClick as singleClickCondition} from '@biigle/ol/events/condition';
+import * as PolygonValidator from '../ol/PolygonValidator';
+import { click as clickCondition } from '@biigle/ol/events/condition';
+import { defaults as defaultInteractions } from '@biigle/ol/interaction'
+import { getCenter } from '@biigle/ol/extent';
+import { shiftKeyOnly as shiftKeyOnlyCondition } from '@biigle/ol/events/condition';
+import { singleClick as singleClickCondition } from '@biigle/ol/events/condition';
 
 
 /**
@@ -512,6 +513,20 @@ export default {
         handleNewFeature(e) {
             if (this.hasSelectedLabel) {
                 let geometry = e.feature.getGeometry();
+                if (geometry.getType() === 'Polygon') {
+                    if (PolygonValidator.isInvalidPolygon(e.feature)) {
+                        this.$emit('is-invalid-polygon');
+                        this.annotationSource.once('change', () => {
+                            if (this.annotationSource.hasFeature(e.feature)) {
+                                this.annotationSource.removeFeature(e.feature);
+                            }
+                        });
+                        return;
+                    }
+
+                    PolygonValidator.makePolygonSimple(e.feature);
+                }
+
                 e.feature.set('color', this.selectedLabel.color);
 
                 // This callback is called when saving the annotation succeeded or

resources/assets/js/annotations/ol/MagicWandInteraction.js

@@ -195,7 +195,7 @@ class MagicWandInteraction extends PointerInteraction {
         if (this.isShowingCross) {
             this.sketchSource.removeFeature(this.sketchFeature);
         } else {
-            this.dispatchEvent({type: 'drawend', feature: this.sketchFeature});
+            this.dispatchEvent({ type: 'drawend', feature: this.sketchFeature });
         }
 
         this.sketchFeature = null;

resources/assets/js/annotations/ol/PolygonValidator.js

@@ -0,0 +1,144 @@
+import Point from '@biigle/ol/geom/Point';
+import Polygon from '@biigle/ol/geom/Polygon';
+import MultiPolygon from '@biigle/ol/geom/MultiPolygon';
+import MultiPoint from '@biigle/ol/geom/MultiPoint';
+import LinearRing from '@biigle/ol/geom/LinearRing';
+import LineString from '@biigle/ol/geom/LineString';
+import MultiLineString from '@biigle/ol/geom/MultiLineString';
+import JstsPolygon from 'jsts/org/locationtech/jts/geom/Polygon';
+import JstsLinearRing from 'jsts/org/locationtech/jts/geom/LinearRing';
+import OL3Parser from 'jsts/org/locationtech/jts/io/OL3Parser';
+import Polygonizer from 'jsts/org/locationtech/jts/operation/polygonize/Polygonizer';
+import Monkey from 'jsts/org/locationtech/jts/monkey'; // Needed for isValid(), normalize()
+
+
+    /**
+     * Checks if polygon consists of at least 3 unique points
+     * 
+     * @param feature containing the polygon
+     * @returns True if coordinates contains at least 3 unique points, otherwise false
+     * **/
+    export function isInvalidPolygon(feature) {
+    let polygon = feature.getGeometry();
+    let points = polygon.getCoordinates()[0];
+    return (new Set(points.map(xy => String([xy])))).size < 3;
+
+}
+
+    /**
+     * Makes non-simple polygon simple
+     * 
+     * @param feature feature containing the (non-simple) polygon
+     * **/
+    export function makePolygonSimple(feature) {
+    // Check if polygon is self-intersecting
+    const parser = new OL3Parser();
+    parser.inject(
+        Point,
+        LineString,
+        LinearRing,
+        Polygon,
+        MultiPoint,
+        MultiLineString,
+        MultiPolygon
+    );
+
+    // Translate ol geometry into jsts geometry
+    let jstsPolygon = parser.read(feature.getGeometry());
+
+    if (jstsPolygon.isSimple()) {
+        return feature;
+    }
+
+    // Divide non-simple polygon at cross points into several smaller polygons
+    // and translate back to ol geometry
+    let polygons = jstsValidate(jstsPolygon)['array'].map(p => parser.write(p));
+
+    if (polygons.length > 1) {
+        // Select biggest part
+        let greatestPolygon = getGreatestPolygon(polygons);
+        // Only change coordinates because object references are in use
+        feature.getGeometry().setCoordinates(greatestPolygon.getCoordinates());
+    }
+}
+
+/**
+    * @author Martin Kirk
+    * 
+    * @link https://stackoverflow.com/questions/36118883/using-jsts-buffer-to-identify-a-self-intersecting-polygon
+    * 
+    * 
+    *  Get / create a valid version of the geometry given. If the geometry is a polygon or multi polygon, self intersections /
+    * inconsistencies are fixed. Otherwise the geometry is returned.
+    *
+    * @param geom
+    * @return a geometry
+    */
+
+function jstsValidate(geom) {
+    if (geom instanceof JstsPolygon) {
+        if (geom.isValid()) {
+            geom.normalize(); // validate does not pick up rings in the wrong order - this will fix that
+            return geom; // If the polygon is valid just return it
+        }
+        var polygonizer = new Polygonizer();
+        jstsAddPolygon(geom, polygonizer);
+        return polygonizer.getPolygons();
+    } else {
+        return geom;
+    }
+}
+
+/**
+* @author Martin Kirk
+* 
+* @link https://stackoverflow.com/questions/36118883/using-jsts-buffer-to-identify-a-self-intersecting-polygon
+* 
+* Add all line strings from the polygon given to the polygonizer given
+*
+* @param polygon polygon from which to extract line strings
+* @param polygonizer polygonizer
+*/
+function jstsAddPolygon(polygon, polygonizer) {
+    jstsAddLineString(polygon.getExteriorRing(), polygonizer);
+
+    for (var n = polygon.getNumInteriorRing(); n > 0; n--) {
+        jstsAddLineString(polygon.getInteriorRingN(n), polygonizer);
+    }
+}
+
+/**
+* @author Martin Kirk
+* 
+* @link https://stackoverflow.com/questions/36118883/using-jsts-buffer-to-identify-a-self-intersecting-polygon 
+* Add the linestring given to the polygonizer
+*
+* @param linestring line string
+* @param polygonizer polygonizer
+*/
+function jstsAddLineString(lineString, polygonizer) {
+
+    if (lineString instanceof JstsLinearRing) {
+        // LinearRings are treated differently to line strings : we need a LineString NOT a LinearRing
+        lineString = lineString.getFactory().createLineString(lineString.getCoordinateSequence());
+    }
+
+    // unioning the linestring with the point makes any self intersections explicit.
+    var point = lineString.getFactory().createPoint(lineString.getCoordinateN(0));
+    var toAdd = lineString.union(point); //geometry
+
+    //Add result to polygonizer
+    polygonizer.add(toAdd);
+}
+
+/**
+ * Determine polygon with largest area
+ * 
+ * @param polygonList List of polygons
+ * @returns Polygon
+ * **/
+function getGreatestPolygon(polygonList) {
+    let areas = polygonList.map(p => p.getArea());
+    let idx = areas.indexOf(Math.max(...areas));
+    return polygonList[idx];
+}

resources/assets/js/videos/components/videoScreen/drawInteractions.vue

@@ -4,7 +4,7 @@ import Keyboard from '../../../core/keyboard';
 import Styles from '../../../annotations/stores/styles';
 import VectorLayer from '@biigle/ol/layer/Vector';
 import VectorSource from '@biigle/ol/source/Vector';
-
+import * as PolygonValidator from "../../../annotations/ol/PolygonValidator";
 /**
  * Mixin for the videoScreen component that contains logic for the draw interactions.
  *
@@ -163,6 +163,19 @@ export default {
             this.$emit('pending-annotation', null);
         },
         extendPendingAnnotation(e) {
+            // Check polygons
+            if (e.feature.getGeometry().getType() === 'Polygon') {
+                if (PolygonValidator.isInvalidPolygon(e.feature)) {
+                    // Disallow polygons with less than three non-overlapping points
+                    this.$emit('is-invalid-polygon')
+                    this.removeFeature(e.feature)
+                    return;
+                }
+
+                // If polygon is self-intersecting, create simple polygon
+                PolygonValidator.makePolygonSimple(e.feature);
+            }
+
             let lastFrame = this.pendingAnnotation.frames[this.pendingAnnotation.frames.length - 1];
 
             if (lastFrame === undefined || lastFrame < this.video.currentTime) {

resources/assets/js/videos/videoContainer.vue

@@ -274,6 +274,7 @@ export default {
                 shape_id: this.shapes[pendingAnnotation.shape],
                 label_id: this.selectedLabel ? this.selectedLabel.id : 0,
             });
+
             delete annotation.shape;
 
             return VideoAnnotationApi.save({id: this.videoId}, annotation)
@@ -612,6 +613,9 @@ export default {
                 annotation.failTracking();
             }
         },
+        handleInvalidPolygon(){
+            Messages.danger(`Invalid shape. Polygon needs at least 3 non-overlapping vertices.`);
+        }
     },
     watch: {
         'settings.playbackRate'(rate) {

resources/views/annotations/show.blade.php

@@ -95,6 +95,7 @@
             v-on:delete="handleDeleteAnnotations"
             v-on:measuring="fetchImagesArea"
             v-on:requires-selected-label="handleRequiresSelectedLabel"
+            v-on:is-invalid-polygon="handleInvalidPolygon"
             ref="canvas"
             inline-template>
             @include('annotations.show.annotationCanvas')

resources/views/videos/show/content.blade.php

@@ -60,6 +60,7 @@
       v-on:attaching-active="handleAttachingLabelActive"
       v-on:swapping-active="handleSwappingLabelActive"
       v-on:seek="seek"
+      v-on:is-invalid-polygon="handleInvalidPolygon"
       ></video-screen>
 <video-timeline
       ref="videoTimeline"