Dissociation of Behavioural and Physical Actions

In this section, we will get an understanding of how we can break the association between a physical action and the corresponding behaviour attached to it. This is especially useful when we need to create our own custom interactions or prevent a particular interaction from occuring.

Let's try and understand how this works with the simple cars.json data.

Dissociating a particular behaviour attached to a physical action

We can dissociate any of the physical actions with their behavioural action. By dissociating, we mean that if a particular physical action has a behaviour mapped to it, this dissociation will break the mapping and thus, this way the physical actions wont trigger a change in the behaviour.

To dissociate this mapping, we have to use the Action Model with the particular canvases where the dissociation is to be applied:

ActionModel
.for(canvas)
.dissociateBehaviour([behaviour, physicalAction])

For instance, the code below breaks the mapping between the click action with the select behaviour:

ActionModel
.for(canvas)
.dissociateBehaviour(['select', 'click'])

Thus, every time we click on a bar in the canvas, the select behaviour(and the attached side effect) wont be triggered. However, if there are any other behaviours attached to the physical action, they will get triggered.

main
run-button
run-button
reset-button
loadData('/static/cars.json').then((res) => {    
  let node = document.getElementById('chart-container');
  const env = muze();    
  const canvas = env.canvas();    
  const DataModel = muze.DataModel; 
  const ActionModel = muze.ActionModel;
  loadData('/static/cars-schema.json').then((schema) => {
    const dataModelInstance = new DataModel(res, schema);
          canvas
          	.width(500)
          	.height(400)
			.rows(['Horsepower'])
			.columns(['Cylinders'])
    		.color('Origin')
			.data(dataModelInstance)
    		.mount(node)
    
    	ActionModel
        	  .for(canvas)
    		  .dissociateBehaviour(['select', 'click'])
    });
})

Dissociating multiple behaviour and physical action mappings

We can even dissociate multiple such behaviour and physical action mappings by providing multiple arguments to the same function:

ActionModel
.for(canvas)
.dissociateBehaviour([behaviour1, physicalAction1], [ behaviour2, physicalAction2])

For instance, in addition to the previous dissociation, we will dissociate the highlight behaviour on the hover action:

ActionModel
.for(canvas)
.dissociateBehaviour(['select', 'click'], ['highlight', 'hover'])
main
run-button
run-button
reset-button
loadData('/static/cars.json').then((res) => {    
  let node = document.getElementById('chart-container');
  const env = muze();    
  const canvas = env.canvas();    
  const DataModel = muze.DataModel; 
  const ActionModel = muze.ActionModel;
  loadData('/static/cars-schema.json').then((schema) => {
    const dataModelInstance = new DataModel(res, schema);
          canvas
          	.width(500)
          	.height(400)
			.rows(['Horsepower'])
			.columns(['Cylinders'])
    		.color('Origin')
			.data(dataModelInstance)
    		.mount(node)
    
    	ActionModel
        	  .for(canvas)
    		  .dissociateBehaviour(['select', 'click'], ['highlight', 'hover'])
    });
})

As we can see, when we click on any bar in the chart, we do not get any behaviours, since the only behaviour attached to it(select) has been dissociated. Additionally, the highlight behaviour on hovering the bars has also been dissociated and thus we also don't get the tooltips(which are a sideeffect of the highlight behaviour).

Wrapping Up

We now have a fair understanding of how we can prevent a particular behaviour to be changed when a physical action is applied. We can also do this for multiple such behaviour-physical action combinations.