My canvas is created using KineticJs Stage, with three layers - a background that is always visible and two overlays toggled by a checkbox. Whenever the parent div of this stage is resized, I redraw the entire stage to maintain the layout. The toggling works under the following conditions: 1. Before resize and redraw. 2. If not toggled at all before the redraw.
However, there is an issue when: 1. Layer is toggled on then off, canvas is resized triggering a redraw, and then trying to toggle back on. In this case, although the visible attribute is set to true when show() is called, the layer does not appear.
While debugging, I noticed that the index of each layer increments every time it's rebuilt, despite instantiating new instances of the stage and every layer during rebuild. Any idea why the index increases even after everything has been destroyed and why the layer doesn't show up?
Before every rebuild, here's what I do:
stage = new $window.Kinetic.Stage({
container: 'canvas',
x: 0,
y: 0,
width: parent.clientWidth,
height: parent.clientHeight
});
var layer = new $window.Kinetic.Layer();
erosionLayer = new $window.Kinetic.Layer({
visible: scope.erosionVisible
});
And here's how I toggle it:
scope.$watch('erosionVisible', function(val) {
if (!erosionLayer) return;
var showErosion = false;
if (!scope.erosionVisible) {
showErosion = false;
} else if (scope.erosionVisible) {
showErosion = true;
}
if (showErosion) {
erosionLayer.show();
} else {
erosionLayer.hide();
}
});
Just an FYI, this is within an AngularJS directive.