Cherry-pick to master: Merge pull request #3440 from cytoscape/copilot/fix-style-selector-grabbed-bug

maxkfranz · maxkfranz · commit ed5c4dada9ea · 2026-04-09T17:53:26.000-04:00
Refresh `:grabbed` selector styles on every grab/free transition Ref: Style selector ':grabbed' only works once #3415
diff --git a/src/extensions/renderer/base/grab-state.mjs b/src/extensions/renderer/base/grab-state.mjs
@@ -0,0 +1,18 @@
+const setGrabState = function( ele, grabbed ){
+  let ele0 = ele[0];
+
+  if( !ele0 || ele0._private.grabbed === grabbed ){
+    return;
+  }
+
+  ele0._private.grabbed = grabbed;
+  ele.updateStyle( false );
+};
+
+export const setGrabbed = function( ele ){
+  setGrabState( ele, true );
+};
+
+export const setFreed = function( ele ){
+  setGrabState( ele, false );
+};
diff --git a/src/extensions/renderer/base/load-listeners.mjs b/src/extensions/renderer/base/load-listeners.mjs
@@ -1,6 +1,7 @@
 import * as is from '../../../is.mjs';
 import * as util from '../../../util/index.mjs';
 import * as math from '../../../math.mjs';
+import { setFreed, setGrabbed } from './grab-state.mjs';
 
 var BRp = {};
 
@@ -151,14 +152,6 @@ BRp.load = function(){
     return allowPassthrough;
   };
 
-  var setGrabbed = function( ele ){
-    ele[0]._private.grabbed = true;
-  };
-
-  var setFreed = function( ele ){
-    ele[0]._private.grabbed = false;
-  };
-
   var setInDragLayer = function( ele ){
     ele[0]._private.rscratch.inDragLayer = true;
   };
diff --git a/test/grabbed-style.mjs b/test/grabbed-style.mjs
@@ -0,0 +1,89 @@
+import { expect } from 'chai';
+import cytoscape from '../src/test.mjs';
+import { setFreed, setGrabbed } from '../src/extensions/renderer/base/grab-state.mjs';
+
+describe('Grabbed style', function(){
+
+  let cy;
+
+  beforeEach(function(){
+    cy = cytoscape({
+      styleEnabled: true,
+
+      elements: {
+        nodes: [
+          { data: { id: 'n1' } },
+          { data: { id: 'n2' } }
+        ]
+      },
+
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'border-width': 0
+          }
+        },
+        {
+          selector: 'node:grabbed',
+          style: {
+            'border-width': 3
+          }
+        }
+      ]
+    });
+  });
+
+  afterEach(function(){
+    cy.destroy();
+  });
+
+  const setGrabbedAll = eles => eles.forEach( setGrabbed );
+
+  const setFreedAll = eles => eles.forEach( setFreed );
+
+  const expectBorderWidth = ( eles, value ) => {
+    eles.forEach( ele => expect( ele.style('border-width') ).to.equal( value ) );
+  };
+
+  it('reapplies `:grabbed` style each time the node is grabbed', function(){
+    const n1 = cy.$('#n1');
+
+    expect( n1.style('border-width') ).to.equal('0px');
+
+    setGrabbed( n1 );
+    expect( n1.style('border-width') ).to.equal('3px');
+
+    setFreed( n1 );
+    expect( n1.style('border-width') ).to.equal('0px');
+
+    setGrabbed( n1 );
+    expect( n1.style('border-width') ).to.equal('3px');
+  });
+
+  it('reapplies `:grabbed` style for a selected group when grabbed repeatedly from either node', function(){
+    const n1 = cy.$('#n1');
+    const n2 = cy.$('#n2');
+    const selectedNodes = n1.add( n2 );
+
+    n1.select();
+    n2.select();
+
+    expectBorderWidth( selectedNodes, '0px' );
+
+    setGrabbedAll( selectedNodes );
+    expectBorderWidth( selectedNodes, '3px' );
+
+    setFreedAll( selectedNodes );
+    expectBorderWidth( selectedNodes, '0px' );
+
+    setGrabbedAll( selectedNodes );
+    expectBorderWidth( selectedNodes, '3px' );
+
+    setFreedAll( selectedNodes );
+    expectBorderWidth( selectedNodes, '0px' );
+
+    setGrabbedAll( n2.add( n1 ) );
+    expectBorderWidth( selectedNodes, '3px' );
+  });
+});
