After completing my first web application using Angular.js, I incorporated a module to handle interactive graphics (specifically seat maps) with Raphael. This included creating directives for handling the Raphael functionality.
angular.module('raphael', [])
.factory('fillData', function() {
return function(paper, data) {
var canvas = $(paper.canvas);
// Code for filling in the data...
canvas.on('click', '[id]', function(e) {
this.classList.toggle('selected');
});
};
})
.directive('raphael', ['fillData',
function(fillData) {
return {
scope: {
raphael : '&',
seatData: '&'
},
link: function(scope, element, attrs) {
var paper = null;
var updateSeatData = function() {
if(scope.seatData()) fillData(paper, scope.seatData());
};
scope.$watch(scope.raphael, function() {
element.empty();
paper = new Raphael(element[0], '100%', '100%');
paper.add(scope.raphael());
updateSeatData();
});
scope.$watch(scope.seatData, function() {
updateSeatData();
});
}
};
}
]);
While everything was working well initially, I encountered challenges when trying to interact with the vector on a deeper level. For example, determining the count of selected seats or deselection triggered by an external element outside the svg container.
I'm struggling to find a suitable way to implement these additional features. Any thoughts or suggestions? Is there an alternative approach for integrating a secondary library within Angular?