Search results

Command API in Angular Diagram API component

Defines a command and a key gesture to define when the command should be executed

Properties

canExecute

Function | string

Check the command is executable at the moment or not

Defaults to undefined

execute

Function | string

Defines what to be executed when the key combination is recognized

Defaults to undefined

gesture

KeyGestureModel

Defines a combination of keys and key modifiers, on recognition of which the command will be executed

<div id='diagram'></div>
let node: NodeModel;
node = {
...
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
annotations : [{ content: 'text' }];
...
};
let diagram: Diagram = new Diagram({
...
nodes:[node],
commandManager:{
commands:[{
name:'customCopy',
parameter : 'node',
canExecute:function(){
if(diagram.selectedItems.nodes.length>0 || diagram.selectedItems.connectors.length>0){
              return true;
          }
          return false;
},
execute:function(){
for(let i=0; i<diagram.selectedItems.nodes.length; i++){
              diagram.selectedItems.nodes[i].style.fill = 'red';
          }
          diagram.dataBind();
},
gesture:{
key:Keys.G, keyModifiers:KeyModifiers.Shift | KeyModifiers.Alt
}
}]
},
...
});
diagram.appendTo('#diagram');

Defaults to {}

name

string

Defines the name of the command

Defaults to

parameter

string

Defines any additional parameters that are required at runtime

Defaults to