Merge branch 'selected-element-svg' into 'master'

Selected element SVG refactoring

Closes #851 and #867

See merge request !1158

js/helpers/polygon.js

@@ -106,9 +106,15 @@ export const checkPolygon = (polygon, minSize = POLYGON_MIN_SIZE) => {
       j++
     }
   }
-  if (newPolygon.length < 3) {
+
+  /*
+   * Require three *unique* points: we already made a deduplication, so we could only check the length,
+   * but if the first and last points are equal, we will need a length of 4.
+   */
+  if (newPolygon.length < (3 + pointsEqual(newPolygon[0], newPolygon[newPolygon.length - 1]))) {
     throw new InvalidPolygonError('This polygon does not have at least three unique points.')
   }
+
   /*
    * Polygons should have at most 163 distinct points.
    * 164 points are allowed only if the first and last point are equal

test/helpers/polygon.js

@@ -88,6 +88,13 @@ describe('helpers/polygon', () => {
       )
     })
 
+    it('requires three unique points, ignoring an equal first and last point', () => {
+      assertThrows(
+        () => checkPolygon([[50, 50], [50, 50], [0, 0], [0, 0], [50, 50]]),
+        new InvalidPolygonError('This polygon does not have at least three unique points.')
+      )
+    })
+
     it('requires less than 164 unique points', () => {
       assert.doesNotThrow(() => checkPolygon(Array(163).fill().map((value, i) => [i, i])))
       assertThrows(

vue/Image/ElementZone.vue

 <template>
   <polygon
-    v-if="!isPolyline"
     v-bind="svgProps"
     v-on:mouseover="active && !isHovered && setHovered(element)"
     v-on:mouseleave="active && setHovered(null)"
@@ -9,11 +8,6 @@
   >
     <title>{{ element.name }}</title>
   </polygon>
-  <polyline
-    v-else
-    v-bind="svgProps"
-    :class="{ 'is-hovered': active && isHovered }"
-  />
 </template>
 
 <script>
@@ -26,21 +20,22 @@ export default {
       type: Object,
       required: true
     },
+    /**
+     * Color to display the polygon with.
+     * By default, this component will display the polygon using the colors defined in js/config.js.
+     */
     color: {
       type: String,
       default: null
     },
+    /**
+     * When disabled, this component does not react to mouse events and cannot be hovered or selected.
+     */
     active: {
       type: Boolean,
       default: true
-    },
-    isPolyline: {
-      type: Boolean,
-      default: false
     }
   },
-  data: () => ({
-  }),
   computed: {
     ...mapState('elements', ['hovered', 'selectedElement']),
     isHovered () {