feat(regions): introduce region stroke scaling disabling option

helitopia · Aug 27, 2024 · e3ac4c2 · e3ac4c2
1 parent 3e58c68
commit e3ac4c2
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git a/docs/docs/map.md b/docs/docs/map.md
@@ -20,6 +20,7 @@ description: The map section provides detailed information about the options and
 | `zoomStep` | The size of step when zooming in/out | `Number` | `1.5` |
 | `bindTouchEvents` | Enable touch events in mobile | `Boolean` | `true` |
 | `focusOn` | Set focus on a specific region/regions | `Object` | `{}` |
+| `strokeScaling` |    Set whether region stroke will be scaled with the map     | `Boolean` | `true` |
 
 ### Focus on
 

diff --git a/packages/jsvectormap/src/js/components/region.js b/packages/jsvectormap/src/js/components/region.js
@@ -8,11 +8,11 @@ import Interactable from './concerns/interactable'
  * ------------------------------------------------------------------------
  */
 class Region extends BaseComponent {
-  constructor({ map, code, path, style, label, labelStyle, labelsGroup }) {
+  constructor({ map, code, path, strokeScaling, style, label, labelStyle, labelsGroup }) {
     super()
 
     this._map = map
-    this.shape = this._createRegion(path, code, style)
+    this.shape = this._createRegion(path, code, strokeScaling, style)
 
     const text = this.getLabelText(code, label)
 
@@ -37,8 +37,10 @@ class Region extends BaseComponent {
     }
   }
 
-  _createRegion(path, code, style) {
-    path = this._map.canvas.createPath({ d: path, dataCode: code }, style)
+  _createRegion(path, code, strokeScaling, style) {
+    path = this._map.canvas.createPath(
+        { d: path, dataCode: code, vectorEffect: strokeScaling ? "none" : "non-scaling-stroke" },
+        style)
     path.addClass('jvm-region jvm-element')
     return path
   }

diff --git a/packages/jsvectormap/src/js/defaults/options.js b/packages/jsvectormap/src/js/defaults/options.js
@@ -58,6 +58,7 @@ export default {
   // Region options
   regionsSelectable: false,
   regionsSelectableOne: false,
+  strokeScaling: true,
   regionStyle: {
     initial: {
       fill: '#dee2e8',

diff --git a/packages/jsvectormap/src/js/map.js b/packages/jsvectormap/src/js/map.js
@@ -70,7 +70,7 @@ class Map {
     this.setBackgroundColor(options.backgroundColor)
 
     // Create regions
-    this._createRegions()
+    this._createRegions(options.strokeScaling)
 
     // Update size
     this.updateSize()