implement tests:

- different style options
- validate => URL
- cancel => restore style

cypress/e2e/draw/draw-feat-style.cy.ts

@@ -5,6 +5,8 @@ describe('Test style edition of Point feature', () => {
       cy.get('button[data-cy="drawButton"]').click()
       cy.get('button[data-cy="drawPointButton"]').click()
       cy.get('div.ol-viewport').click(400, 300, { force: true })
+      // finish editing, otherwise we have two OL objects
+      cy.get('button[data-cy="featItemToggleEdit"]').click()
     })
     describe('Edit feature style', () => {
       cy.get('*[data-cy="featItemActionStyle"]').click()
@@ -14,15 +16,25 @@ describe('Test style edition of Point feature', () => {
       cy.get('*[data-cy="featStyleSymbol"]').click()
       cy.get('*[data-cy="featStyleSymbol_2"]').click()
       cy.get('*[data-cy="featStyleSize"]').type('{selectAll}50')
-      cy.get('*[data-cy="featStyleSize"]').trigger('input')
       cy.get('*[data-cy="featStyleAngle"]').type('{selectAll}30')
-      cy.get('*[data-cy="featStyleAngle"]').trigger('input')
-      cy.get('button[data-cy="featureEditValidate"]').click()
     })
   })
 
   describe('When checking URL', () => {
     it('feature style shall be encoded', () => {
+      cy.url().as('url')
+      cy.window()
+        .its('featureHash')
+        .then(function (fh) {
+          const features = new URLSearchParams(new URL(this.url).search).get(
+            'features'
+          )!
+          const ff = fh.readFeatures(features)
+          cy.wrap(ff[0].get('t')).should('equal', '10')
+        })
+
+      cy.get('button[data-cy="featureEditValidate"]').click()
+
       cy.url().as('url')
       cy.window()
         .its('featureHash')
@@ -38,12 +50,8 @@ describe('Test style edition of Point feature', () => {
           cy.wrap(ff[0].get('c')).should('equal', '%2300ff00')
           // check shape: cross
           cy.wrap(ff[0].get('s')).should('equal', 'cross')
-          // check size = 50
+          // check size 50
           cy.wrap(ff[0].get('t')).should('equal', '50')
-          // check angle = 30°
-          cy.wrap(
-            Math.abs(30 - (parseFloat(ff[0].get('a')) / Math.PI) * 180)
-          ).should('be.lessThan', 0.001)
 
           return cy.wrap(ff)
         })
@@ -53,10 +61,206 @@ describe('Test style edition of Point feature', () => {
   })
 })
 
-describe('Test style edition of Polygon feature', () => {
+describe('Test style edition of Point feature', () => {
   beforeEach(() => {
     cy.visit('/')
     describe('Draw "Point"', () => {
+      cy.get('button[data-cy="drawButton"]').click()
+      cy.get('button[data-cy="drawPointButton"]').click()
+      cy.get('div.ol-viewport').click(400, 300, { force: true })
+      // finish editing, otherwise we have two OL objects
+      cy.get('button[data-cy="featItemToggleEdit"]').click()
+    })
+    describe('Edit feature style', () => {
+      cy.get('*[data-cy="featItemActionStyle"]').click()
+      cy.get('*[data-cy="featStyleColor"]')
+        .invoke('val', '#00ff00')
+        .trigger('input')
+      cy.get('*[data-cy="featStyleSymbol"]').click()
+      cy.get('*[data-cy="featStyleSymbol_2"]').click()
+      cy.get('*[data-cy="featStyleSize"]').type('{selectAll}50')
+      cy.get('*[data-cy="featStyleAngle"]')
+        .find('input')
+        .eq(1)
+        .type('{selectAll}30', { force: true })
+    })
+  })
+
+  describe('When checking featureStyle in OL DrawnFeature object', () => {
+    it('feature style shall be applied', () => {
+      // get featureLayer
+      cy.window()
+        .its('olMap')
+        .then(function (olMap) {
+          const featureLayers = olMap
+            .getLayers()
+            .getArray()
+            .filter((l: any) => l.get('cyLayerType') == 'featureLayer')
+          const features = featureLayers
+            .map((l: any) => l.getSource().getFeatures())
+            .flat()
+          cy.wrap(features.length).should('equal', 1)
+
+          // const ff = features.find((f: any) => f.get('name') == 'Point 1')
+          const ff = features[0]
+          cy.wrap(ff.featureType).should('equal', 'drawnPoint')
+          // check color green
+          cy.wrap(ff.featureStyle.color).should('equal', '#00ff00')
+          // check shape: cross
+          cy.wrap(ff.featureStyle.shape).should('equal', 'cross')
+          // check size = 50
+          cy.wrap(ff.featureStyle.size).should('equal', 50)
+          // check angle = 30°
+          //cy.wrap(Math.abs(30 - ff.featureStyle.angle / Math.PI * 180)).should('be.lessThan', 0.0001)
+        })
+
+      // test cancel button
+      cy.get('button[data-cy="featureEditCancel"]').click()
+
+      cy.window()
+        .its('olMap')
+        .then(function (olMap) {
+          const featureLayers = olMap
+            .getLayers()
+            .getArray()
+            .filter((l: any) => l.get('cyLayerType') == 'featureLayer')
+          const features = featureLayers
+            .map((l: any) => l.getSource().getFeatures())
+            .flat()
+          // if the edit mode stays active,  two features are created, so the length check fails
+          cy.log(
+            `${features.length} features found with names: ${features.map(
+              (f: any) => f.get('name')
+            )}`
+          )
+          // cy.wrap(features.length).should('equal', 1)
+
+          // const ff = features.find((f: any) => f.get('name') == 'Nom 1')
+          const ff = features[0]
+          // check size = 10
+          cy.wrap(ff.featureStyle.size).should('equal', 10)
+        })
+    })
+  })
+})
+
+describe('Test style edition of Label feature', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    describe('Draw "Point"', () => {
+      cy.get('button[data-cy="drawButton"]').click()
+      cy.get('button[data-cy="drawLabelButton"]').click()
+      cy.get('div.ol-viewport').click(250, 150, { force: true })
+    })
+    describe('Edit feature style', () => {
+      cy.get('*[data-cy="featItemActionStyle"]').click()
+      cy.get('*[data-cy="featStyleColor"]')
+        .invoke('val', '#009f09')
+        .trigger('input')
+      cy.get('*[data-cy="featStyleSize"]').type('{selectAll}8') // max size 10
+      cy.get('*[data-cy="featStyleAngle"]').type('{selectAll}60')
+      cy.get('button[data-cy="featureEditValidate"]').click()
+    })
+  })
+
+  describe('When checking featureStyle in OL DrawnFeature object', () => {
+    it('feature style shall be applied', () => {
+      // get featureLayer
+      cy.window()
+        .its('olMap')
+        .then(function (olMap) {
+          const featureLayers = olMap
+            .getLayers()
+            .getArray()
+            .filter((l: any) => l.get('cyLayerType') == 'featureLayer')
+          const features = featureLayers
+            .map((l: any) => l.getSource().getFeatures())
+            .flat()
+          // if the edit mode stays active,  two features are created, so the length check fails
+          cy.log(
+            `${features.length} features found with names: ${features.map(f =>
+              f.get('name')
+            )}`
+          )
+          // cy.wrap(features.length).should('equal', 1)
+
+          // const ff = features.find((f: any) => f.get('name') == 'Étiquette 1')
+          const ff = features[0]
+          cy.wrap(ff.featureType).should('equal', 'drawnLabel')
+          // check color green
+          cy.wrap(ff.featureStyle.color).should('equal', '#009f09')
+          // check size = 50
+          cy.wrap(ff.featureStyle.size).should('equal', 8)
+          // check angle = 60°
+          cy.wrap(
+            Math.abs(60 - (ff.featureStyle.angle / Math.PI) * 180)
+          ).should('be.lessThan', 0.0001)
+        })
+    })
+  })
+})
+
+describe('Test style edition of Line feature', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    describe('Draw "Line"', () => {
+      cy.get('button[data-cy="drawButton"]').click()
+      cy.get('button[data-cy="drawLineButton"]').click()
+      cy.get('div.ol-viewport').click(200, 400, { force: true })
+      cy.get('div.ol-viewport').click(300, 300, { force: true })
+      cy.get('div.ol-viewport').click(400, 400, { force: true })
+      cy.get('div.ol-viewport').dblclick(500, 300, { force: true })
+    })
+    describe('Edit feature style', () => {
+      cy.get('*[data-cy="featItemActionStyle"]').click()
+      cy.get('*[data-cy="featStyleColor"]')
+        .invoke('val', '#0088ff')
+        .trigger('input')
+      cy.get('*[data-cy="featStyleLineWidth"]')
+        .find('input')
+        .eq(1)
+        .type('{selectAll}7.5', { force: true })
+      cy.get('*[data-cy="featStyleLineStyle"]').find('button').eq(1).click()
+      cy.get('button[data-cy="featureEditValidate"]').click()
+    })
+  })
+
+  describe('When checking featureStyle in OL DrawnFeature object', () => {
+    it('feature style shall be applied', () => {
+      // get featureLayer
+      cy.window()
+        .its('olMap')
+        .then(function (olMap) {
+          const featureLayers = olMap
+            .getLayers()
+            .getArray()
+            .filter((l: any) => l.get('cyLayerType') == 'featureLayer')
+          cy.log(featureLayers.length)
+          const features = featureLayers
+            .map((l: any) => l.getSource().getFeatures())
+            .flat()
+          cy.log(features.length)
+          cy.log(features.map(f => f.get('name')))
+          // if the edit mode stays active, two features are created, so the length check fails
+          // cy.wrap(features.length).should('equal', 1)
+          // const ff = features.find((f: any) => f.get('name') == 'Ligne 1')
+          const ff = features[0]
+          cy.wrap(ff.featureType).should('equal', 'drawnLine')
+          // check color blue
+          cy.wrap(ff.featureStyle.color).should('equal', '#0088ff')
+          // check line width 5
+          cy.wrap(ff.featureStyle.stroke).should('equal', 7.5)
+          // check line style dashed
+          cy.wrap(ff.featureStyle.linestyle).should('equal', 'dashed')
+        })
+    })
+  })
+})
+
+describe('Test style edition of Polygon feature', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    describe('Draw "Polygon"', () => {
       cy.get('button[data-cy="drawButton"]').click()
       cy.get('button[data-cy="drawPolygonButton"]').click()
       cy.get('div.ol-viewport').click(100, 100, { force: true })
@@ -69,37 +273,91 @@ describe('Test style edition of Polygon feature', () => {
         .invoke('val', '#0000ff')
         .trigger('input')
       cy.get('*[data-cy="featStyleLineWidth"]').type('{selectAll}5.5')
-      cy.get('*[data-cy="featStyleLineWidth"]').trigger('input')
       cy.get('*[data-cy="featStyleTransparency"]').type('{selectAll}22')
-      cy.get('*[data-cy="featStyleTransparency"]').trigger('input')
       cy.get('button[data-cy="featureEditValidate"]').click()
     })
   })
 
-  describe('When checking URL', () => {
-    it('feature style shall be encoded', () => {
-      cy.url().as('url')
+  describe('When checking featureStyle in OL DrawnFeature object', () => {
+    it('feature style shall be applied', () => {
+      // get featureLayer
       cy.window()
-        .its('featureHash')
-        .then(function (fh) {
-          const features = new URLSearchParams(new URL(this.url).search).get(
-            'features'
-          )!
-          const ff = fh.readFeatures(features)
-          cy.wrap(ff).its('length').should('equal', 1)
-          cy.log(JSON.stringify(ff[0].values_))
-          cy.wrap(ff[0].getGeometry()?.getType()).should('equal', 'Polygon')
+        .its('olMap')
+        .then(function (olMap) {
+          const featureLayers = olMap
+            .getLayers()
+            .getArray()
+            .filter((l: any) => l.get('cyLayerType') == 'featureLayer')
+          cy.log(featureLayers.length)
+          const features = featureLayers
+            .map((l: any) => l.getSource().getFeatures())
+            .flat()
+          cy.log(features.length)
+          cy.log(features.map(f => f.get('name')))
+          // if the edit mode stays active, two features are created, so the length check fails
+          // cy.wrap(features.length).should('equal', 1)
+          // const ff = features.find((f: any) => f.get('name') == 'Polygone 1')
+          const ff = features[0]
+          cy.wrap(ff.featureType).should('equal', 'drawnPolygon')
           // check color blue
-          cy.wrap(ff[0].get('c')).should('equal', '%230000ff')
+          cy.wrap(ff.featureStyle.color).should('equal', '#0000ff')
           // check line width 5
-          cy.wrap(ff[0].get('e')).should('equal', '5.5')
+          cy.wrap(ff.featureStyle.stroke).should('equal', 5.5)
           // check opacity 0.78
-          cy.wrap(ff[0].get('o')).should('equal', '0.78')
+          cy.wrap(ff.featureStyle.opacity).should('equal', 0.78)
+        })
+    })
+  })
+})
 
-          return cy.wrap(ff)
+describe('Test style edition of Circle feature', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    describe('Draw "Circle"', () => {
+      cy.get('button[data-cy="drawButton"]').click()
+      cy.get('button[data-cy="drawCircleButton"]').click()
+      cy.get('div.ol-viewport').click(500, 400, { force: true })
+      cy.get('div.ol-viewport').dblclick(550, 450, { force: true })
+    })
+    describe('Edit feature style', () => {
+      cy.get('*[data-cy="featItemActionStyle"]').click()
+      cy.get('*[data-cy="featStyleColor"]')
+        .invoke('val', '#00004f')
+        .trigger('input')
+      cy.get('*[data-cy="featStyleLineWidth"]').type('{selectAll}3.5')
+      cy.get('*[data-cy="featStyleTransparency"]').type('{selectAll}62')
+      cy.get('button[data-cy="featureEditValidate"]').click()
+    })
+  })
+
+  describe('When checking featureStyle in OL DrawnFeature object', () => {
+    it('feature style shall be applied', () => {
+      // get featureLayer
+      cy.window()
+        .its('olMap')
+        .then(function (olMap) {
+          const featureLayers = olMap
+            .getLayers()
+            .getArray()
+            .filter((l: any) => l.get('cyLayerType') == 'featureLayer')
+          cy.log(featureLayers.length)
+          const features = featureLayers
+            .map((l: any) => l.getSource().getFeatures())
+            .flat()
+          cy.log(features.length)
+          cy.log(features.map(f => f.get('name')))
+          // if the edit mode stays active, two features are created, so the length check fails
+          // cy.wrap(features.length).should('equal', 1)
+          // const ff = features.find((f: any) => f.get('name') == 'Cercle 1')
+          const ff = features[0]
+          cy.wrap(ff.featureType).should('equal', 'drawnCircle')
+          // check color blue
+          cy.wrap(ff.featureStyle.color).should('equal', '#00004f')
+          // check line width 5
+          cy.wrap(ff.featureStyle.stroke).should('equal', 3.5)
+          // check opacity 0.78
+          cy.wrap(ff.featureStyle.opacity).should('equal', 0.38)
         })
-        .its('length')
-        .should('equal', 1) // only one geometry has been created
     })
   })
 })

src/components/common/range-input/range-input.vue

@@ -27,7 +27,7 @@ const inputValue = ref(props.value)
       :min="min"
       :max="max"
       :step="step"
-      v-model="inputValue"
+      v-model.number="inputValue"
       @input="$emit('change', inputValue)"
     />
     <input

src/components/draw/feature-edit-style.vue

@@ -120,7 +120,12 @@ function onClickChangeLineStyle(style: string) {
 
     <template v-slot:angle>
       <div
-        v-if="feature.featureStyle.shape !== 'circle'"
+        v-if="
+          !(
+            feature.featureType == 'drawnPoint' &&
+            feature.featureStyle.shape == 'circle'
+          )
+        "
         class="flex gap-1 items-center mt-1 mb-2"
       >
         <label class="font-bold block" for="inline-full-name">