feat(highlighters.stroke)!: add nonScalingStroke option (#2442)

Author: kumilingus

packages/joint-core/docs/src/joint/api/highlighters/stroke.html

@@ -8,6 +8,7 @@
     <li><b>ry</b> - the stroke's border radius on the y-axis</li>
     <li><b>attrs</b> - an object with SVG attributes to be set on the highlighter element</li>
     <li><b>useFirstSubpath</b> - draw the stroke by using the first subpath of the target <code>el</code> compound path.</li>
+    <li><b>nonScalingStroke</b> - when enabled the stroke width of the highlighter is not dependent on the transformations of the paper (e.g. zoom level). It defaults to <code>false</code>.</li>
 </ul>
 
 <p>Example usage:</p>

packages/joint-core/src/highlighters/stroke.mjs

@@ -8,7 +8,6 @@ export const stroke = HighlighterView.extend({
     className: 'highlight-stroke',
     attributes: {
         'pointer-events': 'none',
-        'vector-effect': 'non-scaling-stroke',
         'fill': 'none'
     },
 
@@ -88,6 +87,9 @@ export const stroke = HighlighterView.extend({
     highlight(cellView, node) {
         const { vel, options } = this;
         vel.attr(options.attrs);
+        if (options.nonScalingStroke) {
+            vel.attr('vector-effect', 'non-scaling-stroke');
+        }
         if (cellView.isNodeConnection(node)) {
             this.highlightConnection(cellView);
         } else {

packages/joint-core/test/jointjs/dia/HighlighterView.js

@@ -897,6 +897,28 @@ QUnit.module('HighlighterView', function(hooks) {
             assert.notEqual(elementView.el, highlighter.el.parentNode);
         });
 
+        QUnit.module('options', function() {
+
+            QUnit.test('nonScalingStroke', function(assert) {
+
+                const HighlighterView = joint.highlighters.stroke;
+                const id = 'highlighter-id';
+
+                let highlighter;
+
+                // use default nonScalingStroke
+                highlighter = HighlighterView.add(elementView, 'body', id);
+                assert.equal(getComputedStyle(highlighter.el).vectorEffect, 'none');
+
+                // explicit nonScalingStroke = false
+                highlighter = HighlighterView.add(elementView, 'body', id, { nonScalingStroke: false });
+                assert.equal(getComputedStyle(highlighter.el).vectorEffect, 'none');
+
+                // explicit nonScalingStroke = true
+                highlighter = HighlighterView.add(elementView, 'body', id, { nonScalingStroke: true });
+                assert.equal(getComputedStyle(highlighter.el).vectorEffect, 'non-scaling-stroke');
+            });
+        });
 
         QUnit.module('Rendering', function() {
 

packages/joint-core/types/joint.d.ts

@@ -1966,6 +1966,7 @@ export namespace highlighters {
         rx?: number;
         ry?: number;
         useFirstSubpath?: boolean;
+        nonScalingStroke?: boolean;
         attrs?: attributes.NativeSVGAttributes;
     }