One important aspect of your script is the ability to have custom nodes. Not all scripts can solely rely on the core set of nodes provided for you by wcPlay. For this, custom nodes can be developed for use in your scripts. Custom nodes are written directly in JavaScript and included into your page via the <script> tag.

wcPlayNodes.wcNodeProcess.extend('wcNodeProcessDelay', 'Delay', 'Core', {
  /**
   * @class
   * Waits for a specified amount of time before continuing the flow chain.<br>
   * When inheriting, make sure to include 'this._super(parent, pos);' at the top of your init function.
   *
   * @constructor wcNodeProcessDelay
   * @param {String} parent - The parent object of this node.
   * @param {wcPlay~Coordinates} pos - The position of this node in the visual editor.
   */
  init: function(parent, pos) {
    this._super(parent, pos);

    this.description("Waits for a specified amount of time before continuing the flow chain.");

    // Create the message property so we know what to output in the log.
    this.createProperty('milliseconds', wcPlay.PROPERTY.NUMBER, 1000, {description: "The time delay, in milliseconds, to wait before firing the 'out' Exit link."});
  },

  /**
   * Event that is called when an entry link has been activated.<br>
   * Overload this in inherited nodes, be sure to call 'this._super(..)' at the top.
   * @function wcNodeProcessDelay#onActivated
   * @param {String} name - The name of the entry link triggered.
   */
  onActivated: function(name) {
    this._super(name);

    // Now set a timeout to wait for 'Milliseconds' amount of time.    
    var delay = this.property('milliseconds');

    // Start a timeout event using the node's built in timeout handler.
    this.setTimeout(function() {
      this.activateExit('out');
    }, delay);
  },
});

Extending a Node Class

To program your own node, use the extend method on any base node class. Base node classes are either wcNodeEntry, wcNodeProcess, or wcNodeStorage depending on what type of node you want to make.

• Entry nodes generally begin chains, they listen for specific events and activate themselves whenever those conditions pass.
• Process nodes make up the bulk of your script, these nodes are designed to perform an action whenever they are activated through an Entry link, and then continue the script by activating an Exit link.
• Storage nodes are very simply a node that just stores a property value.

The extend method takes a number of parameters explained here.

Setting up Properties and Links

Once you have extended your new node class, you will want to implement the init method first, this is your constructor where all your Entry, Exit, and Property setup should be.

By default, all nodes have an 'enabled' property, all Entry nodes have an 'out' Exit link, and all Process nodes have an 'in' Entry link and an 'out' Exit link.

You should never remove the 'enabled' property, as doing so will permenently disable your node. However, the default Entry and Exit links can be removed via the wcNode.removeEntry and wcNode.removeExit methods.

Overloading Event Methods

In many cases, you will need to catch events as they happen on your node. For this, wcNode provides many event methods that you can overload. All event methods are prefixed with 'on' in their names, such as wcNode.onActivated. There are many more event hooks to use, to see a listing, view the documentation.

Latent Nodes

In cases where your node may take time to perform an action, a threading system is provided for you. This allows the script to keep track of any timeout or latent events being processed on a node.

There are a few ways to implement a latent node:

• For a simple time delay (seen in the example above), a special wcNode.setTimeout method exists. This version of timeout will allow the script to better track your progress as well as better handle debugging events.
• For an interval timer, much like the timeout method above, there is a wcNode.setInterval method.
• For AJAX requests, wcNode.ajax is provided as a wrapper for jQuery's AJAX functionality. For obvious reasons, this will only work if you are including jQuery in your page.
• An alternative to AJAX, and possibly better supported, wcNode.fetch exists. Again, this will only work if your browser supports native fetch, or if you are using a polyfill.
• Alternatively, you can use the global window.setTimeout and window.setInterval functions, with a slight alteration. The resulting ID of the timer function should be sent to wcNode.beginThread when started, and again to wcNode.finishThread when the timed event is finished (make sure you call finishThread first before doing any actions). Although wcPlay supports these, it is not recommended as they do not properly debug well.
• Another method for implementing a latent node is through a custom cancellation function. Create a function that can be called when the script needs to cancel the operation and send it to wcNode.beginThread. Once your operation is complete, be sure to send the same function to wcNode.finishThread so it can remove that thread.
• The final, and probably most difficult but robust option, is to create an object that contains an abort method. Much like the option above, send the object to wcNode.beginThread and wcNode.finishThread as appropriate. Additionally, you can also provide a pause and a resume method to allow the debugger the ability to pause the operation on demand.

Continuing the Flow

It is very important for nodes to continue the flow chain, it does not happen automatically. When your node has performed its task, it should then use the wcNode.activateExit method to activate one of its available Exit links.

Note: There is currently a known bug with the debugger where it does not highlighting the nodes and links properly if you modify a property value after you have already activated an Exit link. As a work around, always activate Exit links last.

Return to the Debugging tutorial.
Continue to the FAQ tutorial.