Add checks for (non-)simple polygons

resources/assets/js/annotations/annotatorContainer.vue

@@ -564,6 +564,22 @@ export default {
         dismissCrossOriginError() {
             this.crossOriginError = false;
         },
+        handleInvalidShape(shape){
+            let vertexCount;
+            switch(shape){
+                case 'Polygon':
+                    vertexCount = 'at least 3';
+                    break;
+                case 'Rectangle':
+                    vertexCount = '4';
+                    break;
+                case 'LineString':
+                    shape = 'Line';
+                    vertexCount = 'at least 2';
+                    break;
+            }
+            Messages.danger(`Invalid Shape. ${shape} needs ${vertexCount} non-overlapping vertices.`);
+        },
     },
     watch: {
         async imageId(id) {

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

@@ -510,7 +510,9 @@ export default {
             return this.convertPointsFromOlToDb(points);
         },
         handleNewFeature(e) {
-            if (this.hasSelectedLabel) {
+            let validDrawing = this.hasValidPoints(e);
+
+            if (this.hasSelectedLabel && validDrawing) {
                 let geometry = e.feature.getGeometry();
                 e.feature.set('color', this.selectedLabel.color);
 
@@ -529,10 +531,37 @@ export default {
                     shape: geometry.getType(),
                     points: this.getPoints(geometry),
                 }, removeCallback);
-            } else {
+            } else if (validDrawing) {
                 this.annotationSource.removeFeature(e.feature);
+            } else {
+                let source = this.annotationSource;
+                source.on('change', (evtChange) => {
+                    if (evtChange.target.getState() === 'ready' && source.hasFeature(e.feature)) {
+                        source.removeFeature(e.feature);
+                        this.$emit('has-invalid-shape', e.feature.getGeometry().getType());
+                    }
+
+                });
+            }
+        },
+        hasValidPoints(e) {
+            let geometry = e.feature.getGeometry();
+            let points = geometry.getCoordinates();
+
+            switch (geometry.getType()) {
+                case 'LineString':
+                    return this.getShapeCoordinateSetSize(points) >= 2;
+                case 'Rectangle':
+                    return this.getShapeCoordinateSetSize(points[0]) === 4;
+                case 'Polygon':
+                    return this.getShapeCoordinateSetSize(points[0]) >= 3;
+                default:
+                    return true;
             }
         },
+        getShapeCoordinateSetSize(points){
+            return new Set(points.map(xy => String(xy))).size;
+        },
         deleteSelectedAnnotations() {
             if (!this.modifyInProgress && this.hasSelectedAnnotations && confirm('Are you sure you want to delete all selected annotations?')) {
                 this.$emit('delete', this.selectedAnnotations);

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:has-invalid-shape="handleInvalidShape"
             ref="canvas"
             inline-template>
             @include('annotations.show.annotationCanvas')