bugfix(lib): fix #2171 ctxRenderer update for custom shapes

Author: Dmitry Marov

lib/network/modules/components/Node.js

@@ -89,7 +89,6 @@ class Node {
 
   /**
    * Attach a edge to the node
-   *
    * @param {Edge} edge
    */
   attachEdge(edge) {
@@ -100,7 +99,6 @@ class Node {
 
   /**
    * Detach a edge from the node
-   *
    * @param {Edge} edge
    */
   detachEdge(edge) {
@@ -112,7 +110,6 @@ class Node {
 
   /**
    * Set or overwrite options for the node
-   *
    * @param {object} options an object with options
    * @returns {null|boolean}
    */
@@ -199,7 +196,6 @@ class Node {
    *
    * Images are always loaded, even if they are not used in the current shape.
    * The user may switch to an image shape later on.
-   *
    * @private
    */
   _load_images() {
@@ -255,7 +251,6 @@ class Node {
 
   /**
    * Check that opacity is only between 0 and 1
-   *
    * @param {number} opacity
    * @returns {boolean}
    */
@@ -265,7 +260,6 @@ class Node {
 
   /**
    * Check that origin is 'center' or 'top-left'
-   *
    * @param {string} origin
    * @returns {boolean}
    */
@@ -277,10 +271,9 @@ class Node {
    * Copy group option values into the node options.
    *
    * The group options override the global node options, so the copy of group options
-   *  must happen *after* the global node options have been set.
+   * must happen *after* the global node options have been set.
    *
    * This method must also be called also if the global node options have changed and the group options did not.
-   *
    * @param {object} parentOptions
    * @param {object} newOptions  new values for the options, currently only passed in for check
    * @param {object} groupList
@@ -333,11 +326,10 @@ class Node {
   /**
    * This process all possible shorthands in the new options and makes sure that the parentOptions are fully defined.
    * Static so it can also be used by the handler.
-   *
    * @param {object} parentOptions
    * @param {object} newOptions
-   * @param {boolean} [allowDeletion=false]
-   * @param {object} [globalOptions={}]
+   * @param {boolean} [allowDeletion]
+   * @param {object} [globalOptions]
    * @param {object} [groupList]
    * @static
    */
@@ -564,8 +556,7 @@ class Node {
           this.shape = new CustomShape(
             this.options,
             this.body,
-            this.labelModule,
-            this.options.ctxRenderer
+            this.labelModule
           );
           break;
         case "database":
@@ -647,7 +638,6 @@ class Node {
 
   /**
    * get the title of this node.
-   *
    * @returns {string} title    The title of the node, or undefined when no title
    *                           has been set.
    */
@@ -657,7 +647,6 @@ class Node {
 
   /**
    * Calculate the distance to the border of the Node
-   *
    * @param {CanvasRenderingContext2D}   ctx
    * @param {number} angle        Angle in radians
    * @returns {number} distance   Distance to the border in pixels
@@ -668,7 +657,6 @@ class Node {
 
   /**
    * Check if this node has a fixed x and y position
-   *
    * @returns {boolean}      true if fixed, false if not
    */
   isFixed() {
@@ -677,7 +665,6 @@ class Node {
 
   /**
    * check if this node is selecte
-   *
    * @returns {boolean} selected   True if node is selected, else false
    */
   isSelected() {
@@ -686,7 +673,6 @@ class Node {
 
   /**
    * Retrieve the value of the node. Can be undefined
-   *
    * @returns {number} value
    */
   getValue() {
@@ -695,7 +681,6 @@ class Node {
 
   /**
    * Get the current dimensions of the label
-   *
    * @returns {rect}
    */
   getLabelSize() {
@@ -705,7 +690,6 @@ class Node {
   /**
    * Adjust the value range of the node. The node will adjust it's size
    * based on its value.
-   *
    * @param {number} min
    * @param {number} max
    * @param {number} total
@@ -737,7 +721,6 @@ class Node {
   /**
    * Draw this node in the given canvas
    * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   *
    * @param {CanvasRenderingContext2D}   ctx
    * @returns {object} Callbacks to draw later on higher layers.
    */
@@ -751,7 +734,6 @@ class Node {
 
   /**
    * Update the bounding box of the shape
-   *
    * @param {CanvasRenderingContext2D}   ctx
    */
   updateBoundingBox(ctx) {
@@ -761,7 +743,6 @@ class Node {
   /**
    * Recalculate the size of this node in the given canvas
    * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
-   *
    * @param {CanvasRenderingContext2D}   ctx
    */
   resize(ctx) {
@@ -772,7 +753,6 @@ class Node {
   /**
    * Determine all visual elements of this node instance, in which the given
    * point falls within the bounding shape.
-   *
    * @param {point} point
    * @returns {Array.<nodeClickItem|nodeLabelClickItem>} list with the items which are on the point
    */
@@ -794,7 +774,6 @@ class Node {
 
   /**
    * Check if this object is overlapping with the provided object
-   *
    * @param {object} obj   an object with parameters left, top, right, bottom
    * @returns {boolean}     True if location is located on node
    */
@@ -809,7 +788,6 @@ class Node {
 
   /**
    * Check if this object is overlapping with the provided object
-   *
    * @param {object} obj   an object with parameters left, top, right, bottom
    * @returns {boolean}     True if location is located on node
    */
@@ -826,7 +804,6 @@ class Node {
    * Check valid values for mass
    *
    * The mass may not be negative or zero. If it is, reset to 1
-   *
    * @param {object} options
    * @param {Node.id} id
    * @static

lib/network/modules/components/nodes/shapes/CustomShape.js

@@ -4,19 +4,16 @@ import ShapeBase from "../util/ShapeBase";
 
 /**
  * A CustomShape Node/Cluster shape.
- *
  * @augments ShapeBase
  */
 class CustomShape extends ShapeBase {
   /**
    * @param {object} options
    * @param {object} body
    * @param {Label} labelModule
-   * @param {Function} ctxRenderer
    */
-  constructor(options, body, labelModule, ctxRenderer) {
-    super(options, body, labelModule, ctxRenderer);
-    this.ctxRenderer = ctxRenderer;
+  constructor(options, body, labelModule) {
+    super(options, body, labelModule);
   }
 
   /**
@@ -36,7 +33,7 @@ class CustomShape extends ShapeBase {
 
     // Guard right away because someone may just draw in the function itself.
     ctx.save();
-    const drawLater = this.ctxRenderer({
+    const drawLater = this.options.ctxRenderer({
       ctx,
       id: this.options.id,
       x,