Cherry-pick to master: Merge pull request #3448 from cytoscape/copilot/fix-child-nodes-opacity-inheritance

maxkfranz · maxkfranz · commit b6df1d380c7f · 2026-04-27T11:37:20.000-04:00
WebGL: apply compound opacity inheritance to child node bodies and borders
diff --git a/debug/webgl/index.html b/debug/webgl/index.html
@@ -10,8 +10,10 @@
       ':35729/livereload.js?snipver=1"></' + 'script>')
     </script>  -->
 
-    <link rel="stylesheet" href="./style.css" />
+    <script src="../livereload-setup.js"></script>
 
+    <link rel="stylesheet" href="./style.css" />
+    
     <script>
       var $ = function( sel ){ return document.querySelector(sel); };
       var $$ = function( sel ){ return document.querySelectorAll(sel); };
@@ -30,7 +32,7 @@
       }
     </script>
 
-    <script src="./cytoscape.umd.js"></script>
+    <script src="../../build/cytoscape.umd.js"></script>
 
     <style>
       .tooltip {
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "dist": "cross-env NODE_ENV=production run-s build dist:*",
     "release": "run-s copyright dist docs",
     "watch": "run-s watch:fast",
-    "watch:sync": "livereload \"build, debug\" -w 500",
+    "watch:sync": "livereload \"build, debug, debug/webgl\" -w 500 --extraExts 'json'",
     "watch:http": "http-server -p 3333 -s -c -1 -o debug",
     "watch:fast": "run-p watch:sync watch:http watch:build:fast",
     "watch:umd": "run-p watch:sync watch:http watch:build:umd",
diff --git a/src/extensions/renderer/canvas/webgl/drawing-elements-webgl.mjs b/src/extensions/renderer/canvas/webgl/drawing-elements-webgl.mjs
@@ -766,11 +766,13 @@ export class ElementDrawingWebGL {
 
     // Nodes should still be clickable if they pass the visibility check but
     // have background-opacity: 0
-    const opacity = this.renderTarget.picking ? 1 : node.pstyle(props.opacity).value;
+    // Also: everything but node-body is exempt from effective opacity inheritence/stacking
+    let opacity = this.renderTarget.picking ? 1 : (type === 'node-body' ? node.effectiveOpacity() : 1);
+    let bgOpacity = this.renderTarget.picking ? 1 : (node.pstyle(props.opacity).value * opacity);
 
     const color = node.pstyle(props.color).value;
     const colorView = this.colorBuffer.getView(instance);
-    util.toWebGLColor(color, opacity, colorView);
+    util.toWebGLColor(color, bgOpacity, colorView);
 
     const lineWidthView = this.lineWidthBuffer.getView(instance); // reuse edge line width attribute for node border
     lineWidthView[0] = 0;
@@ -780,7 +782,7 @@ export class ElementDrawingWebGL {
       const borderWidth = node.pstyle('border-width').value;
       if(borderWidth > 0) {
         const borderColor = node.pstyle('border-color').value;
-        const borderOpacity = node.pstyle('border-opacity').value;
+        const borderOpacity = opacity * node.pstyle('border-opacity').value;
 
         const borderColorView = this.borderColorBuffer.getView(instance);
         util.toWebGLColor(borderColor, borderOpacity, borderColorView);
diff --git a/test/modules/webgl-drawing-elements.mjs b/test/modules/webgl-drawing-elements.mjs
@@ -0,0 +1,86 @@
+import { describe, it } from 'mocha';
+import { expect } from 'chai';
+import { ElementDrawingWebGL, RENDER_TARGET } from '../../src/extensions/renderer/canvas/webgl/drawing-elements-webgl.mjs';
+
+const createBuffer = (size) => ({
+  view: new Float32Array(size),
+  getView() {
+    return this.view;
+  }
+});
+
+describe('webgl-drawing-elements', function(){
+
+  it('drawNode() uses effective opacity for simple-shape node body and border', function(){
+    const colorBuffer = createBuffer(4);
+    const borderColorBuffer = createBuffer(4);
+    const lineWidthBuffer = createBuffer(2);
+    const vertTypeBuffer = createBuffer(1);
+    const indexBuffer = createBuffer(4);
+    const cornerRadiusBuffer = createBuffer(4);
+    const transformMatrix = new Float32Array(9);
+    const transformBuffer = {
+      getMatrixView() {
+        return transformMatrix;
+      }
+    };
+
+    const drawing = {
+      simpleShapeOptions: new Map([[
+        'node-body',
+        {
+          shapeProps: {
+            shape: 'shape',
+            color: 'background-color',
+            opacity: 'background-opacity',
+            radius: 'corner-radius',
+            border: true
+          },
+          getBoundingBox: () => ({ x1: 0, y1: 0, w: 10, h: 10 })
+        }
+      ]]),
+      _isVisible: () => true,
+      _getVertTypeForShape: () => 4,
+      colorBuffer,
+      borderColorBuffer,
+      lineWidthBuffer,
+      vertTypeBuffer,
+      indexBuffer,
+      cornerRadiusBuffer,
+      transformBuffer,
+      renderTarget: RENDER_TARGET.SCREEN,
+      instanceCount: 0,
+      simpleCount: 0,
+      maxInstances: 10,
+      endBatch(){},
+      setTransformMatrix(){}
+    };
+
+    const styles = {
+      shape: { value: 'rectangle' },
+      'background-color': { value: [255, 0, 0] },
+      'background-opacity': { value: 0.5 },
+      'corner-radius': { value: 'auto', pfValue: 0 },
+      'border-width': { value: 4 },
+      'border-color': { value: [0, 0, 255] },
+      'border-opacity': { value: 0.25 },
+      'border-position': { value: 'center' }
+    };
+
+    const node = {
+      visible: () => true,
+      effectiveOpacity: () => 0.4,
+      pstyle: (name) => styles[name]
+    };
+
+    ElementDrawingWebGL.prototype.drawNode.call(drawing, node, 7, 'node-body');
+
+    expect(colorBuffer.view[3]).to.be.closeTo(0.2, 0.000001);
+    expect(borderColorBuffer.view[3]).to.be.closeTo(0.1, 0.000001);
+    expect(lineWidthBuffer.view[0]).to.equal(2);
+    expect(lineWidthBuffer.view[1]).to.equal(-2);
+    expect(drawing.simpleCount).to.equal(1);
+    expect(drawing.instanceCount).to.equal(1);
+  });
+
+});
