Add support for headless, styleEnabled and the following (canvas renderer) rendering hints: hideEdgesOnViewport, textureOnViewport, motionBlur, motionBlurOpacity, wheelSensitivity, pixelRatio

- Add support for the options.
- Add check for style patching, in the case of a headless instance.
- Add test cases for `headless` and `styleEnabled`.

Author: maxkfranz

src/component.js

@@ -45,8 +45,30 @@ export default class CytoscapeComponent extends React.Component {
 
   componentDidMount() {
     const container = ReactDOM.findDOMNode(this);
-    const { global } = this.props;
-    const cy = (this._cy = new Cytoscape({ container }));
+
+    const {
+      global,
+      headless,
+      styleEnabled,
+      hideEdgesOnViewport,
+      textureOnViewport,
+      motionBlur,
+      motionBlurOpacity,
+      wheelSensitivity,
+      pixelRatio
+    } = this.props;
+
+    const cy = (this._cy = new Cytoscape({
+      container,
+      headless,
+      styleEnabled,
+      hideEdgesOnViewport,
+      textureOnViewport,
+      motionBlur,
+      motionBlurOpacity,
+      wheelSensitivity,
+      pixelRatio
+    }));
 
     if (global) {
       window[global] = cy;

src/patch.js

@@ -67,9 +67,13 @@ const patchLayout = (cy, layout1, layout2, toJson) => {
 };
 
 const patchStyle = (cy, style1, style2, toJson) => {
-  cy.style()
-    .fromJson(toJson(style2))
-    .update();
+  const style = cy.style();
+
+  if (style == null) {
+    return;
+  }
+
+  style.fromJson(toJson(style2)).update();
 };
 
 const patchElements = (cy, eles1, eles2, toJson, get, forEach, diff) => {

src/types.js

@@ -210,5 +210,66 @@ export const types = {
    *
    * `<CytoscapeComponent cy={cy => (myCyRef = cy)} />`
    */
-  cy: func
+  cy: func,
+
+  /**
+   * headless
+   * The `headless` proper allows for setting whether the Cytoscape instance is headless, i.e.
+   * not rendered.  This value can not be changed after initialisation of the component.
+   */
+  headless: bool,
+
+  /**
+   * styleEnabled
+   * The `styleEnabled` flag is used to enable style functionality in a headless instance (i.e.
+   * `headless: true, styleEnabled: true`).  For a rendered instance, do not set this value.
+   */
+  styleEnabled: bool,
+
+  /**
+   * hideEdgesOnViewport
+   * A rendering hint that specifies, for renderers which support the hint, whether edges should
+   * be hidden during zoom and pan operations.
+   */
+  hideEdgesOnViewport: bool,
+
+  /**
+   * textureOnViewport
+   * A rendering hint that specifies, for renderers which support the hint, whether a preview
+   * based on the existing scene should be used in place of building a new scene.
+   */
+  textureOnViewport: bool,
+
+  /**
+   * motionBlur
+   * A rendering hint that specifies, for renderers which support the hint, whether a motion blur
+   * effect should be applied.
+   */
+  motionBlur: bool,
+
+  /**
+   * motionBlurOpacity
+   * A rendering hint that specifies, for renderers which support the hint, how strong the motion
+   * blur effect should be.  The value ranges from 0 to 1, with larger values indicating larger
+   * strength.
+   */
+  motionBlurOpacity: number,
+
+  /**
+   * wheelSensitivity
+   * A rendering hint that specifies, for renderers which support the hint, how fast wheel zooming
+   * should be.  The value is a positive multiplier.  Do not set this value unless you are using
+   * unconventional hardware and can guarantee that all your users will use the same hardware.  The
+   * default value works well for standard mice on common operating systems.  If you change this
+   * value, it is very likely that you will create a bad user experience for many or most of your
+   * users.
+   */
+  wheelSensitivity: number,
+
+  /**
+   * pixelRatio
+   * A rendering hint that specifies, for renderers which support the hint, the pixel ratio that
+   * should be used.  May be 'auto' or a positive number.
+   */
+  pixelRatio: oneOfType([string, object])
 };

test/index.html

@@ -28,6 +28,7 @@
   <!-- Add refs to test/*.js files here: -->
   <script src="component.js"></script>
   <script src="immutable-component.js"></script>
+  <script src="rendering-hints.js"></script>
 
   <script>
     mocha.run();

test/rendering-hints.js

@@ -0,0 +1,111 @@
+/* global expect, ReactDOM, React, ReactCytoscape, cy */
+
+(function() {
+  const defaults = {
+    global: 'cy',
+    id: 'cy',
+    style: { width: '500px', height: '500px' },
+    zoom: 1,
+    pan: {
+      x: 0,
+      y: 0
+    },
+    elements: [
+      {
+        data: { id: 'a', label: 'apple' },
+        position: { x: 0, y: 0 },
+        scratch: { _test: 1 },
+        classes: 'foo bar'
+      },
+      {
+        data: { id: 'b', label: 'banana' },
+        position: { x: 0, y: 0 },
+        scratch: { _test: 2 },
+        classes: 'foo bar'
+      },
+      {
+        data: { id: 'c', label: 'cherry' },
+        position: { x: 0, y: 0 },
+        scratch: { _test: 3 },
+        classes: 'foo bar'
+      }
+    ],
+    stylesheet: [
+      {
+        selector: 'node',
+        style: {
+          'width': 100
+        }
+      }
+    ]
+  };
+
+  const cloneDefaults = () => JSON.parse(JSON.stringify(defaults));
+
+  /**
+   * The TestComponent drives updates to the ReactCytoscape component.  Updates
+   * to the state of the TestComponent trigger updates to the props of
+   * ReactCytoscape via componentDidUpdate(props).
+   */
+  class TestComponent extends React.Component {
+    constructor(props) {
+      super(props);
+
+      props.setStateRef(this.setState.bind(this));
+
+      this.state = props.defaults;
+    }
+
+    render() {
+      return React.createElement(ReactCytoscape, this.state);
+    }
+  }
+
+  describe('Rendering hints', function() {
+    let root, setState, json;
+
+    let updateCyProps = props =>
+      new Promise(resolve => setState(Object.assign({}, json, props), resolve));
+
+    afterEach(function() {
+      ReactDOM.unmountComponentAtNode(root);
+      document.body.removeChild(root);
+    });
+
+    let createComponent = props => {
+      json = Object.assign(cloneDefaults(), props);
+
+      root = document.createElement('div');
+
+      document.body.appendChild(root);
+
+      ReactDOM.render(
+        React.createElement(TestComponent, {
+          setStateRef: ref => (setState = ref),
+          defaults: json
+        }),
+        root
+      );
+    };
+
+    it('allows headless:true', function(){
+      createComponent({ headless: true });
+
+      expect(cy.style()).to.not.exist;
+
+      // TODO add another assertion here if/when there is a public getter for headless state
+      
+      expect(cy.nodes().length).to.equal(3); // sanity check
+    });
+
+    it('allows headless:true styleEnabled:true', function(){
+      createComponent({ headless: true, styleEnabled: true });
+
+      expect(cy.style()).to.exist;
+
+      expect(cy.nodes().length).to.equal(3); // sanity check
+
+      expect(cy.nodes().first().width()).to.equal(100);
+    });
+  });
+})();