115 lines
2.4 KiB
JavaScript
115 lines
2.4 KiB
JavaScript
|
var Class = require('../../core/class');
|
||
|
|
var Transform = require('../../core/transform');
|
||
|
|
var Element = require('../../dom/dummy');
|
||
|
|
|
||
|
|
var CanvasNode = Class(Transform, Element, {
|
||
|
|
|
||
|
|
invalidate: function(){
|
||
|
|
if (this.parentNode) this.parentNode.invalidate();
|
||
|
|
if (this._layer) this._layerCache = null;
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
_place: function(){
|
||
|
|
this.invalidate();
|
||
|
|
},
|
||
|
|
|
||
|
|
_transform: function(){
|
||
|
|
this.invalidate();
|
||
|
|
},
|
||
|
|
|
||
|
|
blend: function(opacity){
|
||
|
|
if (opacity >= 1 && this._layer) this._layer = null;
|
||
|
|
this._opacity = opacity;
|
||
|
|
if (this.parentNode) this.parentNode.invalidate();
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
// visibility
|
||
|
|
|
||
|
|
hide: function(){
|
||
|
|
this._invisible = true;
|
||
|
|
if (this.parentNode) this.parentNode.invalidate();
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
show: function(){
|
||
|
|
this._invisible = false;
|
||
|
|
if (this.parentNode) this.parentNode.invalidate();
|
||
|
|
return this;
|
||
|
|
},
|
||
|
|
|
||
|
|
// interaction
|
||
|
|
|
||
|
|
indicate: function(cursor, tooltip){
|
||
|
|
this._cursor = cursor;
|
||
|
|
this._tooltip = tooltip;
|
||
|
|
return this.invalidate();
|
||
|
|
},
|
||
|
|
|
||
|
|
hitTest: function(x, y){
|
||
|
|
if (this._invisible) return null;
|
||
|
|
var point = this.inversePoint(x, y);
|
||
|
|
if (!point) return null;
|
||
|
|
return this.localHitTest(point.x, point.y);
|
||
|
|
},
|
||
|
|
|
||
|
|
// rendering
|
||
|
|
|
||
|
|
renderTo: function(context, xx, yx, xy, yy, x, y){
|
||
|
|
var opacity = this._opacity;
|
||
|
|
if (opacity == null || opacity >= 1){
|
||
|
|
return this.renderLayerTo(context, xx, yx, xy, yy, x, y);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render to a compositing layer and cache it
|
||
|
|
|
||
|
|
var layer = this._layer, canvas, isDirty = true,
|
||
|
|
w = context.canvas.width, h = context.canvas.height;
|
||
|
|
if (layer){
|
||
|
|
layer.setTransform(1, 0, 0, 1, 0, 0);
|
||
|
|
canvas = layer.canvas;
|
||
|
|
if (canvas.width < w || canvas.height < h){
|
||
|
|
canvas.width = w;
|
||
|
|
canvas.height = h;
|
||
|
|
} else {
|
||
|
|
var c = this._layerCache;
|
||
|
|
if (c && c.xx === xx && c.yx === yx && c.xy === xy
|
||
|
|
&& c.yy === yy && c.x === x && c.y === y){
|
||
|
|
isDirty = false;
|
||
|
|
} else {
|
||
|
|
layer.clearRect(0, 0, w, h);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
canvas = document.createElement('canvas');
|
||
|
|
canvas.width = w;
|
||
|
|
canvas.height = h;
|
||
|
|
this._layer = layer = canvas.getContext('2d');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isDirty){
|
||
|
|
this.renderLayerTo(layer, xx, yx, xy, yy, x, y);
|
||
|
|
this._layerCache = {
|
||
|
|
xx: xx,
|
||
|
|
yx: yx,
|
||
|
|
xy: xy,
|
||
|
|
yy: yy,
|
||
|
|
x: x,
|
||
|
|
y: y
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
context.globalAlpha = opacity;
|
||
|
|
context.setTransform(1, 0, 0, 1, 0, 0);
|
||
|
|
context.drawImage(
|
||
|
|
canvas,
|
||
|
|
0, 0, w, h,
|
||
|
|
0, 0, w, h
|
||
|
|
);
|
||
|
|
context.globalAlpha = 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = CanvasNode;
|