background-offset-x & background-offset-y : Background image posi…

…tion offset properties #1780
cytoscape · Jan 25, 2019 · 36a3e97 · 36a3e97
1 parent 7f5b63c
commit 36a3e97
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/documentation/md/style.md b/documentation/md/style.md
@@ -266,6 +266,8 @@ A background image may be applied to a node's body.  The following properties su
  * **`background-repeat`** : Whether to repeat the background image; may be `no-repeat`, `repeat-x`, `repeat-y`, or `repeat`.
  * **`background-position-x`** : The x position of the background image, measured in percent (e.g. `50%`) or pixels (e.g. `10px`).
  * **`background-position-y`** : The y position of the background image, measured in percent (e.g. `50%`) or pixels (e.g. `10px`).
+ * **`background-offset-x`** : The x offset of the background image, measured in percent (e.g. `50%`) or pixels (e.g. `10px`).
+ * **`background-offset-y`** : The y offset of the background image, measured in percent (e.g. `50%`) or pixels (e.g. `10px`).
  * **`background-width-relative-to`** : Changes whether the width is calculated relative to the width of the node or the width in addition to the padding; may be `inner` or `include-padding`. If not specified, `include-padding` is used by default.
  * **`background-height-relative-to`** : Changes whether the height is calculated relative to the height of the node or the height in addition to the padding; may be `inner` or `include-padding`. If not specified, `include-padding` is used by default.
 

diff --git a/src/extensions/renderer/canvas/drawing-images.js b/src/extensions/renderer/canvas/drawing-images.js
@@ -78,17 +78,37 @@ CRp.drawInscribedImage = function( context, img, node, index, nodeOpacity ){
   }
 
   var x = (nodeX - nodeTW / 2); // left
-  if( getIndexedStyle( node, 'background-position-x', 'units', index ) === '%' ){
-    x += (nodeTW - w) * getIndexedStyle( node, 'background-position-x', 'pfValue', index );
+  var posXUnits = getIndexedStyle( node, 'background-position-x', 'units', index );
+  var posXPfVal = getIndexedStyle( node, 'background-position-x', 'pfValue', index );
+  if( posXUnits === '%' ){
+    x += (nodeTW - w) * posXPfVal;
   } else {
-    x += getIndexedStyle( node, 'background-position-x', 'pfValue', index );
+    x += posXPfVal;
+  }
+
+  var offXUnits = getIndexedStyle( node, 'background-offset-x', 'units', index );
+  var offXPfVal = getIndexedStyle( node, 'background-offset-x', 'pfValue', index );
+  if( offXUnits === '%' ){
+    x += (nodeTW - w) * offXPfVal;
+  } else {
+    x += offXPfVal;
   }
 
   var y = (nodeY - nodeTH / 2); // top
-  if( getIndexedStyle( node, 'background-position-y', 'units', index ) === '%' ){
-    y += (nodeTH - h) * getIndexedStyle( node, 'background-position-y', 'pfValue', index );
+  var posYUnits = getIndexedStyle( node, 'background-position-y', 'units', index );
+  var posYPfVal = getIndexedStyle( node, 'background-position-y', 'pfValue', index );
+  if( posYUnits === '%' ){
+    y += (nodeTH - h) * posYPfVal;
+  } else {
+    y += posYPfVal;
+  }
+
+  var offYUnits = getIndexedStyle( node, 'background-offset-y', 'units', index );
+  var offYPfVal = getIndexedStyle( node, 'background-offset-y', 'pfValue', index );
+  if( offYUnits === '%' ){
+    y += (nodeTH - h) * offYPfVal;
   } else {
-    y += getIndexedStyle( node, 'background-position-y', 'pfValue', index );
+    y += offYPfVal;
   }
 
   if( rs.pathCache ){

diff --git a/src/style/properties.js b/src/style/properties.js
@@ -267,7 +267,9 @@ const styfn = {};
     { name: 'background-fit', type: t.bgFit },
     { name: 'background-clip', type: t.bgClip },
     { name: 'background-width', type: t.bgWH },
-    { name: 'background-height', type: t.bgWH }
+    { name: 'background-height', type: t.bgWH },
+    { name: 'background-offset-x', type: t.bgPos },
+    { name: 'background-offset-y', type: t.bgPos }
   ];
 
   let compound = [
@@ -547,6 +549,8 @@ styfn.getDefaultProperties = function(){
     'background-image-opacity': 1,
     'background-position-x': '50%',
     'background-position-y': '50%',
+    'background-offset-x': 0,
+    'background-offset-y': 0,
     'background-width-relative-to': 'include-padding',
     'background-height-relative-to': 'include-padding',
     'background-repeat': 'no-repeat',