This app provides monitoring and information features for the common freifunk user and the technical stuff of a freifunk community.
Code base is taken from a TUM Practical Course project and added here to see if Freifunk Altdorf can use it.
https://www.freifunk-altdorf.de
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.4 KiB
115 lines
2.4 KiB
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; |