feat(highlighters.Opacity)!: add alphaValue option (#2428)

packages/joint-core/css/layout.css

@@ -86,12 +86,6 @@ very thin.
 }
 /* Paper */
 
-/*  Highlighting  */
-.joint-highlight-opacity {
-    opacity: 0.3;
-}
-/*  Highlighting  */
-
 /*
 
 Vertex markers are `<circle>` elements that appear at connection vertex positions.

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

@@ -1,8 +1,11 @@
 <p>Changes the opacity of an arbitrary cell view's SVG node.</p>
 
-<p>When a cell is highlighted with the opacity highlighter, the node determined by the selector is given the <code data-lang="css">.joint-highlight-opacity</code> class. To customize the look of this highlighted state, you can add custom CSS rules that affect this class name.</p>
-
-<p>This highlighter does not currently have any options.</p>
+<p>Available options:</p>
+<ul>
+    <li><b>alphaValue</b> - a value that represents the degree to which content behind an element is hidden. It's a number in the range 0.0 to 1.0, inclusive. The default is <code>0.3</code>.</li>
+</ul>
 
 <p>Example usage:</p>
-<pre><code>joint.highlighters.opacity.add(cellView, 'body', 'my-highlighter-id');</code></pre>
+<pre><code>joint.highlighters.opacity.add(cellView, 'body', 'my-highlighter-id', {
+  alphaValue: 0.4
+});</code></pre>

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

@@ -1,20 +1,17 @@
-import * as util from '../util/index.mjs';
-import V from '../V/index.mjs';
 import { HighlighterView } from '../dia/HighlighterView.mjs';
 
 export const opacity = HighlighterView.extend({
 
     UPDATABLE: false,
     MOUNTABLE: false,
 
-    opacityClassName: util.addClassNamePrefix('highlight-opacity'),
-
     highlight: function(_cellView, node) {
-        V(node).addClass(this.opacityClassName);
+        const { alphaValue = 0.3 } = this.options;
+        node.style.opacity = alphaValue;
     },
 
     unhighlight: function(_cellView, node) {
-        V(node).removeClass(this.opacityClassName);
+        node.style.opacity = '';
     }
 
 });

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

@@ -809,24 +809,26 @@ QUnit.module('HighlighterView', function(hooks) {
 
         QUnit.test('Highlight element by a selector', function(assert) {
 
-            var HighlighterView = joint.highlighters.opacity;
-            var id = 'highlighter-id';
-            var el = elementView.vel.findOne('[joint-selector="body"]');
-            var className = 'joint-highlight-opacity';
+            const HighlighterView = joint.highlighters.opacity;
+            const id = 'highlighter-id';
+            const el = elementView.el.querySelector('[joint-selector="body"]');
+            const alphaValue = 0.67;
+
+            assert.equal(getComputedStyle(el).opacity, 1);
 
             // Highlight
-            var highlighter = HighlighterView.add(elementView, 'body', id);
+            const highlighter = HighlighterView.add(elementView, 'body', id, { alphaValue });
             assert.ok(highlighter instanceof HighlighterView);
-            assert.ok(el.hasClass(className));
+            assert.equal(getComputedStyle(el).opacity, alphaValue);
 
             // Render (Default will unhighlight and highlight)
             element.attr(['body', 'fill'], 'red', { dirty: true });
-            var el2 = elementView.vel.findOne('[joint-selector="body"]');
-            assert.ok(el2.hasClass(className));
+            const el2 = elementView.el.querySelector('[joint-selector="body"]');
+            assert.equal(getComputedStyle(el2).opacity, alphaValue);
 
             // Unhighlight
             joint.dia.HighlighterView.remove(elementView, id);
-            assert.notOk(el.hasClass(className));
+            assert.equal(getComputedStyle(el2).opacity, 1);
         });
 
     });

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

@@ -1972,7 +1972,7 @@ export namespace highlighters {
     }
 
     interface OpacityHighlighterArguments extends HighlighterView.Options {
-
+        alphaValue?: number;
     }
 
     interface StrokeHighlighterArguments extends HighlighterView.Options {