This widget displays a CMMN diagram and lets the user interact with it using the mouse (zoom and move). It also provides an API to highlight elements and create badge annotations.
$scope.diagramXML = /* cmmn xml string */; $scope.control = {}; $scope.selectedNodes = []; $scope.handleClick = function(element) { if(element.businessObject.$instanceOf('cmmn:PlanItem')) { if($scope.control.isHighlighted(element.id)) { $scope.control.clearHighlight(element.id); $scope.control.removeBadges(element.id); $scope.selectedNodes.splice($scope.selectedNodes.indexOf(element.id),1); $scope.$apply(); } else { $scope.control.highlight(element.id); $scope.control.createBadge(element.id, {text: 'Test', tooltip: 'This is a tooltip'}); $scope.selectedNodes.push(element.id); $scope.$apply(); } } }; $scope.hovering = []; $scope.mouseEnter = function(element) { $scope.hovering.push(element.id); $scope.$apply(); }; $scope.mouseLeave = function(element) { $scope.hovering.splice($scope.hovering.indexOf(element.id), 1); $scope.$apply(); }; <div cam-widget-cmmn-viewer diagram-data='diagramXML' control='control' on-click='handleClick(element)' on-mouse-enter='mouseEnter(element)' on-mouse-leave='mouseLeave(element)' style="height: 400px;"></div> Selected elements: {{selectedNodes}}<br /> Hovering over: {{hovering}}
$scope.diagramXML = /* cmmn xml string */; <div cam-widget-cmmn-viewer diagram-data='diagramXML' disable-navigation='true' style="height: 400px;"></div>