GSLUX-707 activate style edition for drawings

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

@@ -32,35 +32,39 @@ const currentStyleComponent = computed(() =>
 )
 
 function onColorSelect(colorEvent: Event) {
-  feature.featureStyle.color = (colorEvent.target as HTMLInputElement).value
-  feature.changed()
+  feature.featureStyle = {
+    ...feature.featureStyle,
+    color: (colorEvent.target as HTMLInputElement).value,
+  }
 }
 
 function onSizeChange(newSize: number) {
-  feature.featureStyle.size = newSize
-  feature.changed()
+  feature.featureStyle = { ...feature.featureStyle, size: newSize }
 }
 
 function onAngleChange(newAngle: number) {
-  feature.featureStyle.angle = (newAngle * Math.PI) / 180
-  feature.changed()
+  feature.featureStyle = {
+    ...feature.featureStyle,
+    angle: (newAngle * Math.PI) / 180,
+  }
 }
 
 function onWidthChange(newWidth: number) {
-  feature.featureStyle.stroke = newWidth
-  feature.changed()
+  feature.featureStyle = { ...feature.featureStyle, stroke: newWidth }
 }
 
 function onTransparencyChange(newTransparency: number) {
-  feature.featureStyle.opacity = (100 - newTransparency) / 100
-  feature.changed()
+  feature.featureStyle = {
+    ...feature.featureStyle,
+    opacity: (100 - newTransparency) / 100,
+  }
 }
 
 function onShowDirection(event: Event) {
-  feature.featureStyle.showOrientation = (
-    event.target as HTMLInputElement
-  ).checked
-  feature.changed()
+  feature.featureStyle = {
+    ...feature.featureStyle,
+    showOrientation: (event.target as HTMLInputElement).checked,
+  }
 }
 
 function onClickChangeOrientation() {
@@ -72,8 +76,7 @@ function onClickChangeOrientation() {
 }
 
 function onClickChangeLineStyle(style: string) {
-  feature.featureStyle.linestyle = style
-  feature.changed()
+  feature.featureStyle = { ...feature.featureStyle, linestyle: style }
 }
 </script>
 

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

@@ -46,19 +46,21 @@
 function onClickSymbol(
   component: (typeof symbolComponents)[keyof typeof symbolComponents]
 ) {
+  let newShape = undefined
   if (component === symbolComponents.Circle) {
-    feature.featureStyle.shape = 'circle'
+    newShape = 'circle'
   } else if (component === symbolComponents.Square) {
-    feature.featureStyle.shape = 'square'
+    newShape = 'square'
   } else if (component === symbolComponents.Cross) {
-    feature.featureStyle.shape = 'cross'
+    newShape = 'cross'
   } else if (component === symbolComponents.Triangle) {
-    feature.featureStyle.shape = 'triangle'
+    newShape = 'triangle'
+  }
+  feature.featureStyle = {
+    ...feature.featureStyle,
+    shape: newShape,
+    symbolId: undefined,
   }
-  feature.featureStyle.symbolId = undefined
-
-  feature.changed()
-
   closePopup()
 }
 

src/components/draw/feature-item.vue

@@ -54,7 +54,6 @@ function onResetInfo(prevLabel: string, prevDescription: string) {
 
 function onResetStyle(prevStyle: DrawnFeatureStyle) {
   localFeature.featureStyle = { ...prevStyle }
-  localFeature.changed()
 }
 
 function onSubmitEditFeature() {

src/services/draw/drawn-feature.ts

@@ -28,7 +28,7 @@ export class DrawnFeature extends Feature {
   map_id: string | undefined // mymap uuid
   saving: boolean
   featureType: DrawnFeatureType
-  featureStyle: DrawnFeatureStyle
+  _featureStyle: DrawnFeatureStyle
   map = useMap().getOlMap()
 
   constructor(drawnFeature?: DrawnFeature) {
@@ -41,7 +41,7 @@ export class DrawnFeature extends Feature {
       this.display_order = drawnFeature.display_order
       this.editable = drawnFeature.editable
       this.selected = drawnFeature.selected
-      this.featureStyle = drawnFeature.featureStyle
+      this._featureStyle = drawnFeature.featureStyle
       this.id = drawnFeature.id
       this.saving = drawnFeature.saving
       this.setProperties(drawnFeature.getProperties())
@@ -50,6 +50,15 @@ export class DrawnFeature extends Feature {
     }
   }
 
+  public get featureStyle() {
+    return this._featureStyle
+  }
+
+  public set featureStyle(featureStyle: DrawnFeatureStyle) {
+    this._featureStyle = featureStyle
+    this.changed()
+  }
+
   fit() {
     const size = this.map.getSize()
     const extent = <Extent>this.getGeometry()?.getExtent()