(function() { // constants var HASH = '#', BEFORE_DRAW ='beforeDraw', DRAW = 'draw'; Kinetic.Util.addMethods(Kinetic.Layer, { ___init: function(config) { this.nodeType = 'Layer'; this.canvas = new Kinetic.SceneCanvas(); this.hitCanvas = new Kinetic.HitCanvas(); // call super constructor Kinetic.Container.call(this, config); }, _validateAdd: function(child) { var type = child.getType(); if (type !== 'Group' && type !== 'Shape') { Kinetic.Util.error('You may only add groups and shapes to a layer.'); } }, /** * get visible intersection object that contains shape and pixel data. This is the preferred * method for determining if a point intersects a shape or not * @method * @memberof Kinetic.Layer.prototype * @param {Object} pos point object */ getIntersection: function() { var pos = Kinetic.Util._getXY(Array.prototype.slice.call(arguments)), p, colorKey, shape; if(this.isVisible() && this.isListening()) { p = this.hitCanvas.context._context.getImageData(pos.x | 0, pos.y | 0, 1, 1).data; // this indicates that a hit pixel may have been found if(p[3] === 255) { colorKey = Kinetic.Util._rgbToHex(p[0], p[1], p[2]); shape = Kinetic.shapes[HASH + colorKey]; return { shape: shape, pixel: p }; } // if no shape mapped to that pixel, return pixel array else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) { return { pixel: p }; } } return null; }, drawScene: function(canvas) { canvas = canvas || this.getCanvas(); this._fire(BEFORE_DRAW, { node: this }); if(this.getClearBeforeDraw()) { canvas.getContext().clear(); } Kinetic.Container.prototype.drawScene.call(this, canvas); this._fire(DRAW, { node: this }); return this; }, drawHit: function() { var layer = this.getLayer(); if(layer && layer.getClearBeforeDraw()) { layer.getHitCanvas().getContext().clear(); } Kinetic.Container.prototype.drawHit.call(this); return this; }, /** * get layer canvas * @method * @memberof Kinetic.Node.prototype */ getCanvas: function() { return this.canvas; }, /** * get layer hit canvas * @method * @memberof Kinetic.Node.prototype */ getHitCanvas: function() { return this.hitCanvas; }, /** * get layer canvas context * @method * @memberof Kinetic.Node.prototype */ getContext: function() { return this.getCanvas().getContext(); }, /** * clear scene and hit canvas contexts tied to the layer * @method * @memberof Kinetic.Node.prototype * @param {Array|Object} [bounds] * @example * layer.clear();
* layer.clear(0, 0, 100, 100); */ clear: function() { var context = this.getContext(), hitContext = this.getHitCanvas().getContext(); context.clear.apply(context, arguments); hitContext.clear.apply(hitContext, arguments); return this; }, // extend Node.prototype.setVisible setVisible: function(visible) { Kinetic.Node.prototype.setVisible.call(this, visible); if(visible) { this.getCanvas()._canvas.style.display = 'block'; this.hitCanvas._canvas.style.display = 'block'; } else { this.getCanvas()._canvas.style.display = 'none'; this.hitCanvas._canvas.style.display = 'none'; } return this; }, // extend Node.prototype.setZIndex setZIndex: function(index) { Kinetic.Node.prototype.setZIndex.call(this, index); var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); if(index < stage.getChildren().length - 1) { stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[index + 1].getCanvas()._canvas); } else { stage.content.appendChild(this.getCanvas()._canvas); } } return this; }, // extend Node.prototype.moveToTop moveToTop: function() { Kinetic.Node.prototype.moveToTop.call(this); var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); stage.content.appendChild(this.getCanvas()._canvas); } }, // extend Node.prototype.moveUp moveUp: function() { if(Kinetic.Node.prototype.moveUp.call(this)) { var stage = this.getStage(); if(stage) { stage.content.removeChild(this.getCanvas()._canvas); if(this.index < stage.getChildren().length - 1) { stage.content.insertBefore(this.getCanvas()._canvas, stage.getChildren()[this.index + 1].getCanvas()._canvas); } else { stage.content.appendChild(this.getCanvas()._canvas); } } } }, // extend Node.prototype.moveDown moveDown: function() { if(Kinetic.Node.prototype.moveDown.call(this)) { var stage = this.getStage(); if(stage) { var children = stage.getChildren(); stage.content.removeChild(this.getCanvas()._canvas); stage.content.insertBefore(this.getCanvas()._canvas, children[this.index + 1].getCanvas()._canvas); } } }, // extend Node.prototype.moveToBottom moveToBottom: function() { if(Kinetic.Node.prototype.moveToBottom.call(this)) { var stage = this.getStage(); if(stage) { var children = stage.getChildren(); stage.content.removeChild(this.getCanvas()._canvas); stage.content.insertBefore(this.getCanvas()._canvas, children[1].getCanvas()._canvas); } } }, getLayer: function() { return this; }, remove: function() { var stage = this.getStage(), canvas = this.getCanvas(), _canvas = canvas._canvas; Kinetic.Node.prototype.remove.call(this); if(stage && _canvas && Kinetic.Util._isInDocument(_canvas)) { stage.content.removeChild(_canvas); } return this; }, getStage: function() { return this.parent; } }); Kinetic.Util.extend(Kinetic.Layer, Kinetic.Container); // add getters and setters Kinetic.Factory.addGetterSetter(Kinetic.Layer, 'clearBeforeDraw', true); /** * set flag which determines if the layer is cleared or not * before drawing * @name setClearBeforeDraw * @method * @memberof Kinetic.Node.prototype * @param {Boolean} clearBeforeDraw */ /** * get flag which determines if the layer is cleared or not * before drawing * @name getClearBeforeDraw * @method * @memberof Kinetic.Node.prototype */ })();