konva
Version:
<p align="center"> <img src="https://raw.githubusercontent.com/konvajs/konvajs.github.io/master/apple-touch-icon-180x180.png" alt="Konva logo" height="180" /> </p>
195 lines (194 loc) • 7.38 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Util_1 = require("./Util");
var Container_1 = require("./Container");
var Node_1 = require("./Node");
var Factory_1 = require("./Factory");
var Canvas_1 = require("./Canvas");
var BaseLayer = (function (_super) {
__extends(BaseLayer, _super);
function BaseLayer(config) {
var _this = _super.call(this, config) || this;
_this.canvas = new Canvas_1.SceneCanvas();
_this._waitingForDraw = false;
_this.on('visibleChange', _this._checkVisibility);
_this._checkVisibility();
_this.on('imageSmoothingEnabledChange', _this._checkSmooth);
_this._checkSmooth();
return _this;
}
BaseLayer.prototype.createPNGStream = function () {
var c = this.canvas._canvas;
return c.createPNGStream();
};
BaseLayer.prototype.getCanvas = function () {
return this.canvas;
};
BaseLayer.prototype.getHitCanvas = function () {
return this.hitCanvas;
};
BaseLayer.prototype.getContext = function () {
return this.getCanvas().getContext();
};
BaseLayer.prototype.clear = function (bounds) {
this.getContext().clear(bounds);
return this;
};
BaseLayer.prototype.setZIndex = function (index) {
_super.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;
};
BaseLayer.prototype.moveToTop = function () {
Node_1.Node.prototype.moveToTop.call(this);
var stage = this.getStage();
if (stage) {
stage.content.removeChild(this.getCanvas()._canvas);
stage.content.appendChild(this.getCanvas()._canvas);
}
return true;
};
BaseLayer.prototype.moveUp = function () {
var moved = Node_1.Node.prototype.moveUp.call(this);
if (!moved) {
return false;
}
var stage = this.getStage();
if (!stage) {
return false;
}
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);
}
return true;
};
BaseLayer.prototype.moveDown = function () {
if (Node_1.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);
}
return true;
}
return false;
};
BaseLayer.prototype.moveToBottom = function () {
if (Node_1.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);
}
return true;
}
return false;
};
BaseLayer.prototype.getLayer = function () {
return this;
};
BaseLayer.prototype.remove = function () {
var _canvas = this.getCanvas()._canvas;
Node_1.Node.prototype.remove.call(this);
if (_canvas && _canvas.parentNode && Util_1.Util._isInDocument(_canvas)) {
_canvas.parentNode.removeChild(_canvas);
}
return this;
};
BaseLayer.prototype.getStage = function () {
return this.parent;
};
BaseLayer.prototype.setSize = function (_a) {
var width = _a.width, height = _a.height;
this.canvas.setSize(width, height);
return this;
};
BaseLayer.prototype._toKonvaCanvas = function (config) {
config = config || {};
config.width = config.width || this.getWidth();
config.height = config.height || this.getHeight();
config.x = config.x !== undefined ? config.x : this.x();
config.y = config.y !== undefined ? config.y : this.y();
return Node_1.Node.prototype._toKonvaCanvas.call(this, config);
};
BaseLayer.prototype._checkVisibility = function () {
var visible = this.visible();
if (visible) {
this.canvas._canvas.style.display = 'block';
}
else {
this.canvas._canvas.style.display = 'none';
}
};
BaseLayer.prototype._checkSmooth = function () {
this.getContext()._context.imageSmoothingEnabled = this.imageSmoothingEnabled();
};
BaseLayer.prototype.getWidth = function () {
if (this.parent) {
return this.parent.width();
}
};
BaseLayer.prototype.setWidth = function () {
Util_1.Util.warn('Can not change width of layer. Use "stage.width(value)" function instead.');
};
BaseLayer.prototype.getHeight = function () {
if (this.parent) {
return this.parent.height();
}
};
BaseLayer.prototype.setHeight = function () {
Util_1.Util.warn('Can not change height of layer. Use "stage.height(value)" function instead.');
};
BaseLayer.prototype.getIntersection = function (pos, selector) {
return null;
};
BaseLayer.prototype.batchDraw = function () {
var _this = this;
if (!this._waitingForDraw) {
this._waitingForDraw = true;
Util_1.Util.requestAnimFrame(function () {
_this.draw();
_this._waitingForDraw = false;
});
}
return this;
};
BaseLayer.prototype._applyTransform = function (shape, context, top) {
var m = shape.getAbsoluteTransform(top).getMatrix();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
};
return BaseLayer;
}(Container_1.Container));
exports.BaseLayer = BaseLayer;
BaseLayer.prototype.nodeType = 'BaseLayer';
Factory_1.Factory.addGetterSetter(BaseLayer, 'imageSmoothingEnabled', true);
Factory_1.Factory.addGetterSetter(BaseLayer, 'clearBeforeDraw', true);
Util_1.Collection.mapMethods(BaseLayer);