Merge pr/janhartmann/2778 into unstable

cytoscape · Jan 13, 2021 · 66a9b5e · 66a9b5e
2 parents 74c40e0 + d350a16
commit 66a9b5e
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 8 deletions.
diff --git a/documentation/demos/background-image-containment/code.js b/documentation/demos/background-image-containment/code.js
@@ -0,0 +1,36 @@
+cytoscape({
+  container: document.getElementById('cy'),
+  boxSelectionEnabled: false,
+  autounselectify: true,
+  style: [{
+    selector: 'node',
+    style: {
+      shape: 'round-rectangle',
+      'background-image': ['https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg', 'https://live.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'],
+      'background-image-containment': ['over', 'inside'],
+      'background-clip': ['none', 'none'],
+      'bounds-expansion': 25,
+      'background-width': [20, 20],
+      'background-height': [20, 20],
+      'background-position-x': ['-10','120%'],
+      'background-position-y': ['-10','-10'],
+      'background-color': 'lightgray',
+      'border-color': 'gray',
+      'border-width': 1,
+
+      'text-halign': 'center',
+      'text-valign': 'center',
+      width: 65,
+      height: 30
+    }
+  }],
+  elements: {
+    nodes: [
+      { data: { id: 'inside', name: 'Test', } },
+    ]
+  },
+  layout: {
+    name: 'grid',
+    padding: 10
+  }
+});
diff --git a/documentation/demos/background-image-containment/index.html b/documentation/demos/background-image-containment/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- This code is for demonstration purposes only.  You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. -->
+<html>
+<head>
+<link href="style.css" rel="stylesheet" />
+<meta charset=utf-8 />
+<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+<title>Background Image Containment example</title>
+<script src="../../../build/cytoscape.umd.js"></script>
+</head>
+<body>
+<div id="cy"></div>
+<!-- Load application code at the end to ensure DOM is loaded -->
+<script src="code.js"></script>
+</body>
+</html>
diff --git a/documentation/demos/background-image-containment/style.css b/documentation/demos/background-image-containment/style.css
@@ -0,0 +1,20 @@
+body { 
+  font: 14px helvetica neue, helvetica, arial, sans-serif;
+}
+
+#cy {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+#info {
+  color: #c88;
+  font-size: 1em;
+  position: absolute;
+  z-index: -1;
+  left: 1em;
+  top: 1em;
+}
diff --git a/documentation/md/style.md b/documentation/md/style.md
@@ -257,6 +257,7 @@ A background image may be applied to a node's body.  The following properties su
     * The images will be applied to the node's body in the order given, layering one on top of each other.
     * When specifying properties for multiple images, if the property for a given image is not provided, then the default value is used as fallback.
   * To put an image outside of the bounds of a node's body, it is necessary to specify `background-clip: none` and `bounds-expansion: n` for images that go `n` pixels beyond the bounding box of the node.  Note that values of `n` should be relatively small for performance.
+  * To control the drawing order of background images (e.g overlay background images over borders), it is necessary to specify `background-image-containment: over` (default `inside`).
   * SVG image considerations:
     * Always include this XML header in each SVG image:
     ```

diff --git a/src/extensions/renderer/canvas/drawing-nodes.js b/src/extensions/renderer/canvas/drawing-nodes.js
@@ -141,11 +141,17 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel = true, s
     }
   };
 
-  let drawImages = ( nodeOpacity = eleOpacity ) => {
+  let drawImages = ( nodeOpacity = eleOpacity, inside = true ) => {  
     let prevBging = _p.backgrounding;
     let totalCompleted = 0;
 
     for( let i = 0; i < image.length; i++ ){
+      const bgContainment = node.cy().style().getIndexedStyle(node, 'background-image-containment', 'value', i);
+      if( inside && bgContainment === 'over' || !inside && bgContainment === 'inside' ){
+        totalCompleted++;
+        continue;
+      }
+
       if( urlDefined[i] && image[i].complete && !image[i].error ){
         totalCompleted++;
         r.drawInscribedImage( context, image[i], node, i, nodeOpacity );
@@ -266,22 +272,24 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel = true, s
 
     setupShapeColor( ghostOpacity * bgOpacity );
     drawShape();
-    drawImages( effGhostOpacity );
-    drawPie( darkness !== 0 || borderWidth !== 0 );
-    darken( effGhostOpacity );
+    drawImages( effGhostOpacity, true );
     setupBorderColor( ghostOpacity * borderOpacity );
     drawBorder();
+    drawPie( darkness !== 0 || borderWidth !== 0 );
+    drawImages( effGhostOpacity, false );
+    darken( effGhostOpacity );
 
     context.translate( -gx, -gy );
   }
-
+  
   setupShapeColor();
   drawShape();
-  drawImages();
-  drawPie( darkness !== 0 || borderWidth !== 0 );
-  darken();
+  drawImages(eleOpacity, true);
   setupBorderColor();
   drawBorder();
+  drawPie( darkness !== 0 || borderWidth !== 0 );
+  drawImages(eleOpacity, false);
+  darken();
 
   if( usePaths ){
     context.translate( -pos.x, -pos.y );

diff --git a/src/style/properties.js b/src/style/properties.js
@@ -48,6 +48,7 @@ const styfn = {};
     bgFit: { enums: [ 'none', 'contain', 'cover' ], multiple: true },
     bgCrossOrigin: { enums: [ 'anonymous', 'use-credentials' ], multiple: true },
     bgClip: { enums: [ 'none', 'node' ], multiple: true },
+    bgContainment: { enums: [ 'inside', 'over' ], multiple: true },
     color: { color: true },
     colors: { color: true, multiple: true },
     fill: { enums: ['solid', 'linear-gradient', 'radial-gradient'] },
@@ -291,6 +292,7 @@ const styfn = {};
     { name: 'background-image', type: t.urls },
     { name: 'background-image-crossorigin', type: t.bgCrossOrigin },
     { name: 'background-image-opacity', type: t.zeroOneNumbers },
+    { name: 'background-image-containment', type: t.bgContainment }, 
     { name: 'background-image-smoothing', type: t.bools },
     { name: 'background-position-x', type: t.bgPos },
     { name: 'background-position-y', type: t.bgPos },
@@ -587,6 +589,7 @@ styfn.getDefaultProperties = function(){
     'background-image': 'none',
     'background-image-crossorigin': 'anonymous',
     'background-image-opacity': 1,
+    'background-image-containment': 'inside',
     'background-image-smoothing': 'yes',
     'background-position-x': '50%',
     'background-position-y': '50%',