Canvas Actions

Canvas offers manipulation functions to modify the document and ask the user to use .commit$() when the transaction is finished:

var doc = canvas.document();
var parts = canvas.selectedFigures();
var group = Cx.Group.create(parts);
doc.replace(parts,group);
doc.commit$();

Canvas will automatically lock itself, give feedback to the user and render the results after the transaction is committed.

To further help in the building process of new clients, Canvas API provides cooked in actions that covers the most common needs of a template application.

Instead of the code above, you can just wrote canvas.action('group') to get a function that will group the selected figures when called. You could use it like:

$('#groupButton').click( canvas.action('group') );

Actions are function objects and expose useful query functions:

var action = canvas.action('group');
var id      = action.id(); // => 'group'
var info    = action.info(); // later...
var tooltip = action.tooltip(); // later... 
if( ! action.enabled() ) {
  // Disable your UI button
}

When you create an action, you can modify its target. Instead of applying the action to the selected figures, you can choose to target the context figures (defined as the selected figures when the selection in not empty and all the figures in the layer otherwise).

var action = canvas.action('group', { target: 'contextFigures' } );

You can also give a callback that will be issue once the action is complete and everything has been rendered in the Canvas:

var action = canvas.action('group', { 
  callback: function(group) { 
    // Do something specific to your client with 
    // the newly created group... 
  }, 
  scope: this 
});

The current list of build in actions is (these are the functions exposed in the selection toolbar in the HUD, the list will quickly grow to cover transforms and other usual actions):

• createMultiPartText
• breakMultiPartText
• group
• ungroup
• editEnvelope
• editPowerClip
• zoomIn
• duplicate
• remove