From 80ab3ee6a653be81681c04368a465b5600ea56dc Mon Sep 17 00:00:00 2001
From: Roman Bruckner <roman@jointjs.com>
Date: Tue, 12 Dec 2023 14:58:57 +0100
Subject: [PATCH] feat(highlighters.Opacity)!: add alphaValue option (#2428)

---
 packages/joint-core/css/layout.css            |  6 ------
 .../src/joint/api/highlighters/opacity.html   | 11 ++++++----
 .../joint-core/src/highlighters/opacity.mjs   |  9 +++------
 .../test/jointjs/dia/HighlighterView.js       | 20 ++++++++++---------
 packages/joint-core/types/joint.d.ts          |  2 +-
 5 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/joint-core/css/layout.css b/packages/joint-core/css/layout.css
index 98415a054..1f1f906c0 100644
--- a/packages/joint-core/css/layout.css
+++ b/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.
diff --git a/packages/joint-core/docs/src/joint/api/highlighters/opacity.html b/packages/joint-core/docs/src/joint/api/highlighters/opacity.html
index 8a160cd37..00ba10260 100644
--- a/packages/joint-core/docs/src/joint/api/highlighters/opacity.html
+++ b/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>
diff --git a/packages/joint-core/src/highlighters/opacity.mjs b/packages/joint-core/src/highlighters/opacity.mjs
index 7a3ab9bf8..4b901255e 100644
--- a/packages/joint-core/src/highlighters/opacity.mjs
+++ b/packages/joint-core/src/highlighters/opacity.mjs
@@ -1,5 +1,3 @@
-import * as util from '../util/index.mjs';
-import V from '../V/index.mjs';
 import { HighlighterView } from '../dia/HighlighterView.mjs';
 
 export const opacity = HighlighterView.extend({
@@ -7,14 +5,13 @@ 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 = '';
     }
 
 });
diff --git a/packages/joint-core/test/jointjs/dia/HighlighterView.js b/packages/joint-core/test/jointjs/dia/HighlighterView.js
index ba691c399..1f8a47a80 100644
--- a/packages/joint-core/test/jointjs/dia/HighlighterView.js
+++ b/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);
         });
 
     });
diff --git a/packages/joint-core/types/joint.d.ts b/packages/joint-core/types/joint.d.ts
index 936bd61b6..3981fcb68 100644
--- a/packages/joint-core/types/joint.d.ts
+++ b/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 {