747 lines
25 KiB
JavaScript
747 lines
25 KiB
JavaScript
Kanvas = function(settings){
|
|
|
|
const self = this,
|
|
default_settings = {
|
|
nulls : false,
|
|
default_value : null,
|
|
position : ".kanvas",
|
|
preload_timeout : 2000,
|
|
frames_per_second : 60,
|
|
quality : 1,
|
|
quality_x : 1,
|
|
quality_y : 1,
|
|
cells : 40,
|
|
swap_and_drop_timer : 5000,
|
|
font_size : 1,
|
|
font_family : "Arial",
|
|
settings_overwrite : false,
|
|
autostart : true,
|
|
autobuild : true,
|
|
font_minimum_size : 12,
|
|
events_cache_timer : 100
|
|
},
|
|
custom = {},
|
|
cache = {},
|
|
frames_times = [],
|
|
id_length = 11,
|
|
id_alphabet = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz",
|
|
ids = [],
|
|
threads = [],
|
|
number_of_cells = {x : 0, y : 0},
|
|
events_cache = [];
|
|
let thread = null,
|
|
frames_per_second = null,
|
|
canvas, context,
|
|
last_frame_time = 0, frames_times_summatory = 0,
|
|
swap_and_drop_timer,
|
|
cache_box,
|
|
default_font_size, default_font_family,
|
|
settings_overwrite,
|
|
built = false,
|
|
started = false,
|
|
font_minimum_size,
|
|
events_cache_timer;
|
|
|
|
this.map = [];
|
|
let cells = this.cells;
|
|
let cell_size = this.cell_size;
|
|
let quality = this.quality;
|
|
let quality_x = this.quality_x;
|
|
let quality_y = this.quality_y;
|
|
this.cells_x = 0;
|
|
this.cells_y = 0;
|
|
this.delta_time = 0;
|
|
|
|
let item_self = this.item_self;
|
|
let hash_self = this.hash_self;
|
|
let object_name = this.object_name;
|
|
|
|
this.Event = function(){
|
|
|
|
const self = this,
|
|
events = [],
|
|
properties = [];
|
|
|
|
const construct = () => {
|
|
|
|
events_cache.push(autoclean);
|
|
|
|
};
|
|
|
|
this.execute = (callback, ...arguments) => events.forEach((event, i) => (
|
|
event &&
|
|
(typeof callback == "function" ? callback(properties[i]) : true) &&
|
|
event(...arguments)
|
|
));
|
|
|
|
this.add = (callback, own_properties) => {
|
|
|
|
let i = 0;
|
|
const l = events.length;
|
|
|
|
for(; i < l; i ++)
|
|
if(!events[i])
|
|
break;
|
|
|
|
events[i] = callback;
|
|
properties[i] = own_properties;
|
|
|
|
return i;
|
|
};
|
|
|
|
this.remove = i => events[i] = null;
|
|
|
|
const autoclean = () => {
|
|
|
|
const date = Date.now();
|
|
|
|
properties.forEach((own_properties, i) => {
|
|
if(own_properties && own_properties.last_used && date - own_properties.last_used > events_cache_timer){
|
|
events[i] = null;
|
|
properties[i] = null;
|
|
};
|
|
});
|
|
|
|
};
|
|
|
|
this.update = (i, date) => events[i] && (properties[i].last_used = date);
|
|
|
|
construct();
|
|
|
|
};
|
|
|
|
this.on_screen_change = new this.Event();
|
|
this.on_ready = new this.Event();
|
|
this.on_click = new this.Event();
|
|
this.on_click_down = new this.Event();
|
|
this.on_click_up = new this.Event();
|
|
this.on_key_down = new this.Event();
|
|
this.on_key_up = new this.Event();
|
|
|
|
const construct = () => {
|
|
|
|
settings = (
|
|
settings instanceof Array ? settings :
|
|
typeof settings == "object" ? [settings] :
|
|
[]).filter(inputs => typeof inputs == "object" && !(inputs instanceof Array));
|
|
|
|
self.settings("autostart") && self.start();
|
|
|
|
};
|
|
|
|
this.start = callback => {
|
|
|
|
const end = status => typeof callback == "function" && callback(status);
|
|
|
|
if(started){
|
|
end(false);
|
|
return false;
|
|
};
|
|
started = true;
|
|
|
|
settings_overwrite = self.settings(["settings_overwrite", "overwrite"]);
|
|
frames_per_second = self.settings(["frames_per_second", "fps"]);
|
|
events_cache_timer = self.settings("events_cache_timer");
|
|
object_name = self.object_name = self.settings("object_name");
|
|
|
|
thread = setInterval(execute, 1000 / frames_per_second);
|
|
|
|
if(self.settings("autobuild"))
|
|
self.build(callback);
|
|
else
|
|
end(true);
|
|
|
|
return true;
|
|
};
|
|
|
|
this.build = callback => {
|
|
|
|
const position = self.settings("position"),
|
|
end = status => typeof callback == "function" && callback(status);
|
|
|
|
if(built){
|
|
end(false);
|
|
return false;
|
|
};
|
|
built = true;
|
|
|
|
if(position){
|
|
|
|
if(position.tagName || position.nodeName){
|
|
end_build(position);
|
|
end(true);
|
|
return;
|
|
};
|
|
|
|
if(typeof position != "string"){
|
|
console.error("position_not_string");
|
|
end(false);
|
|
return;
|
|
};
|
|
|
|
if(!position.trim()){
|
|
console.error("position_selector_empty");
|
|
end(false);
|
|
return;
|
|
};
|
|
|
|
let html_object;
|
|
|
|
try{
|
|
if(html_object = document.querySelector(position)){
|
|
end_build(html_object);
|
|
end(true);
|
|
return;
|
|
};
|
|
}catch(exception){
|
|
console.error(exception);
|
|
console.error("position_bad_selector");
|
|
end(false);
|
|
return;
|
|
};
|
|
|
|
const date = Date.now(),
|
|
timeout = self.settings("preload_timeout");
|
|
let interval = setInterval(() => {
|
|
if(html_object = document.querySelector(position)){
|
|
clearInterval(interval);
|
|
end_build(html_object);
|
|
end(true);
|
|
}else if(Date.now() - date > timeout){
|
|
clearInterval(interval);
|
|
console.error("position_timeout");
|
|
end(false);
|
|
};
|
|
}, frames_per_second);
|
|
|
|
}else{
|
|
console.error("no_position");
|
|
end(false);
|
|
};
|
|
|
|
return true;
|
|
};
|
|
|
|
const end_build = position => {
|
|
|
|
quality = self.quality = self.settings("quality");
|
|
quality_x = self.quality_x = self.settings("quality_x");
|
|
quality_y = self.quality_y = self.settings("quality_y");
|
|
cells = self.cells = self.settings("cells");
|
|
default_font_size = self.settings("font_size");
|
|
default_font_family = self.settings("font_family");
|
|
|
|
cache.quality = 0;
|
|
cache.quality_x = 0;
|
|
cache.quality_y = 0;
|
|
|
|
cache.screen = {x : 0, y : 0};
|
|
cache.origin = {x : 0, y : 0};
|
|
|
|
item_self = self.item_self = (position || document.querySelector("body")).appendChild(document.createElement("div"));
|
|
cache_box = item_self.appendChild(document.createElement("div"));
|
|
canvas = item_self.appendChild(document.createElement("canvas"));
|
|
hash_self = self.hash_self = self.settings(["id", "hash"]) || self.create_id();
|
|
|
|
item_self.setAttribute("id", hash_self);
|
|
item_self.setAttribute("class", ["kanvas", hash_self].concat((self.settings("class") || "").split(/\s+/)).filter((key, i, array) => array.indexOf(key) == i).join(" "));
|
|
item_self.setAttribute("data-hash", hash_self);
|
|
item_self.setAttribute("data-cells", cells);
|
|
item_self.setAttribute("data-minimum-font-size", font_minimum_size = self.settings("font_minimum_size"));
|
|
|
|
cache_box.setAttribute("class", "kanvas-cache-box");
|
|
cache_box.setAttribute("style", `
|
|
position : absolute;
|
|
top : 0%;
|
|
left : 0%;
|
|
width : 100%;
|
|
height : 100%;
|
|
visibility : hidden;
|
|
z-index : 10;
|
|
opacity : 0;
|
|
`.replace(/[\r\n\s]+/g, ""));
|
|
|
|
canvas.setAttribute("class", "kanvas-ui");
|
|
canvas.setAttribute("style", `
|
|
position : absolute;
|
|
top : 0%;
|
|
left : 0%;
|
|
width : 100%;
|
|
height : 100%;
|
|
z-index : 20;
|
|
`.replace(/[\r\n\s]+/g, ""));
|
|
canvas.onclick = event => on_click(canvas, event, "click");
|
|
canvas.onmousedown = event => on_click(canvas, event, "down");
|
|
canvas.onmouseup = event => on_click(canvas, event, "up");
|
|
canvas.onkeydown = event => on_key(canvas, event, "down");
|
|
canvas.onkeyup = event => on_key(canvas, event, "up");
|
|
|
|
context = canvas.getContext("2d");
|
|
|
|
context.id = self.create_id();
|
|
|
|
swap_and_drop_timer = self.settings("swap_and_drop_timer");
|
|
|
|
self.on_ready.execute();
|
|
|
|
};
|
|
|
|
this.nulls = nulls => typeof nulls == "boolean" ? nulls : self.settings("nulls", null, false, false);
|
|
|
|
this.default_value = (_default, nulls) => _default !== undefined && (self.nulls(nulls) || _default !== null) ? _default : self.settings("default_value", null, null, true);
|
|
|
|
this.settings = (names, inputs, _default, nulls) => {
|
|
|
|
const l = (names = (
|
|
names instanceof Array ? names :
|
|
typeof names == "string" ? [names] :
|
|
[]
|
|
).filter((name, i, array) => name && typeof name == "string" && array.indexOf(name) == i)).length;
|
|
|
|
if(l){
|
|
|
|
const m = (inputs = (
|
|
inputs instanceof Array ? inputs :
|
|
typeof inputs == "object" ? [inputs] :
|
|
[]).concat(settings, custom, [default_settings])).length;
|
|
|
|
nulls = self.nulls(nulls);
|
|
|
|
for(let j = 0; j < m; j ++)
|
|
if(inputs[j] && typeof inputs[j] == "object" && !(inputs[j] instanceof Array))
|
|
for(let i = 0; i < l; i ++)
|
|
if(inputs[j][names[i]] !== undefined && (nulls || inputs[j][names[i]] !== null))
|
|
return inputs[j][names[i]];
|
|
};
|
|
return self.default_value(_default, nulls);
|
|
};
|
|
|
|
this.settings_add = (inputs, overwrite) => {
|
|
if(!inputs)
|
|
return;
|
|
|
|
if(typeof inputs == "string"){
|
|
try{
|
|
inputs = JSON.parse(inputs);
|
|
}catch(exception){};
|
|
};
|
|
|
|
if(typeof inputs == "object"){
|
|
if(inputs instanceof Array)
|
|
inputs.forEach(inputs, overwrite);
|
|
else{
|
|
typeof overwrite != "boolean" && (overwrite = settings_overwrite);
|
|
for(const key in inputs)
|
|
if(overwrite || custom[key] === undefined)
|
|
custom[key] = inputs[key];
|
|
};
|
|
};
|
|
|
|
};
|
|
|
|
this.create_id = () => {
|
|
|
|
let id;
|
|
const l = id_alphabet.length;
|
|
|
|
do{
|
|
id = "";
|
|
while((id += id_alphabet[l * Math.random() >> 0]).length < id_length);
|
|
}while(
|
|
ids.includes(id) ||
|
|
!/^[a-z]/i.test(id) ||
|
|
document.querySelector("." + id + ",#" + id + ",[name=" + id + "]")
|
|
);
|
|
ids.push(id);
|
|
|
|
return id;
|
|
};
|
|
|
|
const execute = () => {
|
|
|
|
const date = Date.now();
|
|
let screen_changed = false;
|
|
|
|
if(item_self && (cache.screen.x != item_self.offsetWidth || cache.screen.y != item_self.offsetHeight)){
|
|
screen_changed = true;
|
|
|
|
cache.screen.x = item_self.offsetWidth;
|
|
cache.screen.y = item_self.offsetHeight;
|
|
|
|
const font_size = cache.screen[cache.screen.x < cache.screen.y ? "x" : "y"] / cells;
|
|
|
|
item_self.style.fontSize = (font_size < font_minimum_size ? font_minimum_size : font_size) + "px";
|
|
|
|
};
|
|
|
|
if(canvas){
|
|
|
|
if(last_frame_time){
|
|
|
|
const frame_time = date - last_frame_time;
|
|
|
|
frames_times.push(frame_time);
|
|
frames_times_summatory += frame_time;
|
|
|
|
self.delta_time = frame_time / 1000;
|
|
|
|
while(frames_times.length > frames_per_second)
|
|
frames_times_summatory -= frames_times.shift();
|
|
|
|
};
|
|
|
|
last_frame_time = date;
|
|
|
|
if(screen_changed || cache.quality != quality){
|
|
|
|
const width = cache.screen.x * quality,
|
|
height = cache.screen.y * quality;
|
|
|
|
cache.quality = quality;
|
|
canvas.setAttribute("width", width);
|
|
canvas.setAttribute("height", height);
|
|
cache.origin.x = width / 2;
|
|
cache.origin.y = height / 2;
|
|
|
|
cell_size = self.cell_size = (width > height ? height : width) / cells;
|
|
|
|
number_of_cells.x = width / cell_size;
|
|
number_of_cells.y = height / cell_size;
|
|
|
|
this.cells_x = number_of_cells.x / 2;
|
|
this.cells_y = number_of_cells.y / 2;
|
|
|
|
for(const key in cache)
|
|
if(cache[key] && cache[key].data)
|
|
cache[key].data = null;
|
|
|
|
self.on_screen_change.execute();
|
|
|
|
};
|
|
|
|
};
|
|
|
|
threads.forEach(thread => thread && thread());
|
|
|
|
if(canvas){
|
|
|
|
context.beginPath();
|
|
context.clearRect(0, 0, cache.screen.x * quality, cache.screen.y * quality);
|
|
context.translate(cache.origin.x, cache.origin.y);
|
|
|
|
draw(context, self.map, 0, 0);
|
|
|
|
context.translate(-cache.origin.x, -cache.origin.y);
|
|
|
|
for(const key in cache)
|
|
if(cache[key] && cache[key].last_used && date - cache[key].last_used > swap_and_drop_timer)
|
|
delete cache[key];
|
|
|
|
};
|
|
|
|
events_cache.forEach(autoclean => autoclean());
|
|
|
|
};
|
|
|
|
this.set_quality = new_quality => quality = self.quality = new_quality;
|
|
this.set_quality_x = new_quality => quality_x = self.quality_x = new_quality;
|
|
this.set_quality_y = new_quality => quality_y = self.quality_y = new_quality;
|
|
|
|
const _x = x => x * cell_size;
|
|
const _y = y => y * cell_size;
|
|
const size = size => size * cell_size;
|
|
|
|
const set_cache = (context, status) => {
|
|
|
|
!status && cache[context.id] && cache[context.id].ok && (cache[context.id].ok = false);
|
|
|
|
return status;
|
|
};
|
|
|
|
const set_border = (context, inputs) => {
|
|
|
|
const has_border = !!(inputs.border_color || !isNaN(inputs.border_width));
|
|
|
|
inputs.border_color && (context.strokeStyle = inputs.border_color);
|
|
!isNaN(inputs.border_width) && (context.lineWidth = size(inputs.border_width));
|
|
|
|
return has_border;
|
|
};
|
|
|
|
const set_background = (context, inputs) => {
|
|
|
|
const has_background = !!(inputs.background || (!inputs.border_color && isNaN(inputs.border_width)));
|
|
|
|
if(inputs.background){
|
|
if(inputs.background instanceof Array){
|
|
|
|
const v = inputs.background,
|
|
is_linear = v.length == 5,
|
|
gradient = (
|
|
is_linear ? context.createLinearGradient(_x(v[0]), _y(v[1]), _x(v[2]), _y(v[3])) :
|
|
context.createRadialGradient(_x(v[0]), _y(v[1]), _x(v[2]), _y(v[3]), size(v[4]), size(v[5]))
|
|
);
|
|
|
|
inputs.background[is_linear ? 4 : 6].forEach(color => gradient.addColorStop(color[0], color[1]));
|
|
|
|
context.fillStyle = gradient;
|
|
|
|
}else
|
|
context.fillStyle = inputs.background;
|
|
};
|
|
|
|
return has_background;
|
|
};
|
|
|
|
const set_shadow = (context, inputs, shape_callback) => {
|
|
|
|
const shadows = inputs.shadow || inputs.shadows;
|
|
|
|
(shadows && shadows.length ? shadows[0] instanceof Array ? shadows : [shadows] : []).forEach(shadow => {
|
|
[context.shadowOffsetX, context.shadowOffsetY, context.shadowBlur, context.shadowColor] = shadow;
|
|
context.shadowOffsetX = size(shadow[0]);
|
|
context.shadowOffsetY = size(shadow[1]);
|
|
context.shadowBlur = size(shadow[2]);
|
|
context.shadowColor = size(shadow[3]);
|
|
shape_callback();
|
|
});
|
|
|
|
};
|
|
|
|
const shapes = {
|
|
rectangle : (context, inputs) => {
|
|
|
|
const x = _x(inputs.x),
|
|
y = _y(inputs.y),
|
|
width = size(inputs.width),
|
|
height = size(inputs.height),
|
|
has_border = set_border(context, inputs),
|
|
has_background = set_background(context, inputs);
|
|
|
|
set_shadow(context, inputs, () => context.rect(x, y, width, height));
|
|
has_background && context.fillRect(x, y, width, height);
|
|
has_border && context.strokeRect(x, y, width, height);
|
|
|
|
return set_cache(context, true);
|
|
},
|
|
image : (context, inputs) => {
|
|
|
|
const url = inputs.url;
|
|
|
|
if(url){
|
|
|
|
const cached = cache[url];
|
|
|
|
if(!cached){
|
|
(cache[url] = {
|
|
image : new Image(),
|
|
loaded : false,
|
|
last_used : Date.now()
|
|
}).image.src = url;
|
|
cache[url].image.crossOrigin = "anonymous";
|
|
cache[url].image.onload = () => cache[url].loaded = true;
|
|
return set_cache(context, false);
|
|
};
|
|
|
|
if(cached.loaded){
|
|
|
|
let width = inputs.width,
|
|
height = inputs.height;
|
|
const cut_x = inputs.cut_x || 0,
|
|
cut_y = inputs.cut_y || 0,
|
|
cut_width = inputs.cut_width || 0,
|
|
cut_height = inputs.cut_height || 0,
|
|
position_x = inputs.x || 0,
|
|
position_y = inputs.y || 0,
|
|
x = _x(position_x),
|
|
y = _y(position_y),
|
|
end_width = size(width),
|
|
end_height = size(height);
|
|
|
|
!width && (width = cache.quality * (cut_width || cache[url].image.width - cut_x) / cell_size);
|
|
!height && (height = cache.quality * (cut_height || cache[url].image.height - cut_y) / cell_size);
|
|
|
|
set_shadow(context, inputs, () => context.rect(x, y, end_width, end_height));
|
|
set_border(context, inputs);
|
|
context.drawImage(
|
|
cache[url].image,
|
|
cut_x, cut_y, cut_width || cache[url].image.width - cut_x, cut_height || cache[url].image.height - cut_y,
|
|
x, y, end_width, end_height
|
|
);
|
|
cache[url].last_used = Date.now();
|
|
|
|
return set_cache(context, true);
|
|
};
|
|
|
|
};
|
|
|
|
return set_cache(context, false);
|
|
},
|
|
cache : (context, inputs) => {
|
|
|
|
const width = inputs.width ? inputs.width * cell_size : canvas.getAttribute("width"),
|
|
height = inputs.height ? inputs.height * cell_size : canvas.getAttribute("height");
|
|
let status = false;
|
|
|
|
if(!cache[inputs.name]){
|
|
|
|
const subcanvas = cache_box.appendChild(document.createElement("canvas"));
|
|
|
|
cache[inputs.name] = {
|
|
canvas : subcanvas,
|
|
data : null
|
|
};
|
|
cache[inputs.name].context = subcanvas.getContext("2d");
|
|
|
|
cache[inputs.name].context.id = inputs.name;
|
|
|
|
subcanvas.setAttribute("data-id", cache[inputs.name].context.id);
|
|
|
|
cache[inputs.name].context.translate(inputs.x || 0, inputs.y || 0);
|
|
|
|
};
|
|
|
|
if(cache[inputs.name].data){
|
|
if(cache[inputs.name].image_loaded){
|
|
context.drawImage(cache[inputs.name].image, _x(inputs.x || 0), _y(inputs.y || 0), cache[inputs.name].image.width, cache[inputs.name].image.height);
|
|
status = true;
|
|
}else if(!cache[inputs.name].image){
|
|
|
|
cache[inputs.name].image = new Image();
|
|
|
|
cache[inputs.name].image.src = cache[inputs.name].data;
|
|
cache[inputs.name].image.onload = () => {
|
|
// cache[inputs.name].canvas.remove();
|
|
cache[inputs.name].image_loaded = true;
|
|
};
|
|
// cache[inputs.name].image.onerror = () => cache[inputs.name].canvas.remove();
|
|
|
|
};
|
|
}else{
|
|
|
|
cache[inputs.name].canvas.setAttribute("width", width);
|
|
cache[inputs.name].canvas.setAttribute("height", height);
|
|
|
|
cache[inputs.name].context.beginPath();
|
|
cache[inputs.name].context.clearRect(0, 0, width, height);
|
|
cache[inputs.name].context.translate(width / 2, height / 2);
|
|
|
|
cache[inputs.name].image = null;
|
|
cache[inputs.name].image_loaded = false;
|
|
cache[inputs.name].ok = true;
|
|
|
|
draw(cache[inputs.name].context, inputs.childs, 0, 0);
|
|
|
|
cache[inputs.name].context.closePath();
|
|
|
|
cache[inputs.name].ok &&
|
|
(cache[inputs.name].data = cache[inputs.name].canvas.toDataURL("image/png", 1.0));
|
|
|
|
};
|
|
|
|
cache[inputs.name].last_used = Date.now();
|
|
|
|
return set_cache(context, status);
|
|
},
|
|
text : (context, inputs) => {
|
|
|
|
const x = _x(inputs.x),
|
|
y = _y(inputs.y),
|
|
has_border = set_border(context, inputs),
|
|
has_background = set_background(context, inputs);
|
|
|
|
inputs.align && (context.textAlign = inputs.align);
|
|
inputs.baseline && (context.textBaseline = inputs.baseline);
|
|
!isNaN(inputs.border_width) && (context.lineWidth = size(inputs.border_width));
|
|
context.font = (inputs.style ? inputs.style + " " : "") + size(inputs.size || default_font_size) + "px " + (inputs.family || default_font_family);
|
|
|
|
set_shadow(context, inputs, () => context.fillText(inputs.text, x, y));
|
|
has_background && context.fillText(inputs.text, x, y);
|
|
has_border && context.strokeText(inputs.text, x, y);
|
|
|
|
return true;
|
|
}
|
|
};
|
|
|
|
this.string_variables = (string, variables) => string.replace(/\{([^\{\}]+)\}/g, (...arguments) => variables[arguments[1]] !== undefined ? variables[arguments[1]] : arguments[0]);
|
|
|
|
const draw = (context, level, x, y) => level.forEach(values => {
|
|
if(values && (shapes[values.type] || ["block"].includes(values.type))){
|
|
|
|
const sub_x = _x(x + (values.margin_x || 0)),
|
|
sub_y = _y(y + (values.margin_y || 0)),
|
|
date = Date.now();
|
|
|
|
context.save();
|
|
context.translate(sub_x, sub_y);
|
|
|
|
const transform = context.getTransform();
|
|
|
|
values.rotate && context.rotate(2 * Math.PI * values.rotate / 360);
|
|
!isNaN(values.alpha) && (context.globalAlpha = values.alpha);
|
|
|
|
if(values.on_click){
|
|
values.context_x = transform.e / quality;
|
|
values.context_y = transform.f / quality;
|
|
if(!values.last_used || date - values.last_used > events_cache_timer)
|
|
values.i = self.on_click.add(eval(self.string_variables(values.on_click, {object_name : object_name})), values);
|
|
else
|
|
self.on_click.update(values.i, date);
|
|
values.last_used = date;
|
|
};
|
|
|
|
values.type != "block" && shapes[values.type](context, values);
|
|
|
|
values.type != "cache" && values.childs && draw(context, values.childs, values.x, values.y);
|
|
|
|
context.translate(-sub_x, -sub_y);
|
|
context.restore();
|
|
|
|
};
|
|
});
|
|
|
|
this.get_real_fps = this.get_real_frames_per_second = () => frames_times_summatory ? 1000 / (frames_times_summatory / frames_times.length) : 0;
|
|
|
|
this.threads_add = callback => {
|
|
|
|
let i = 0;
|
|
const l = threads.length;
|
|
|
|
for(; i < l; i ++)
|
|
if(!threads[i])
|
|
break;
|
|
|
|
threads[i] = callback;
|
|
|
|
return i;
|
|
};
|
|
|
|
this.threads_remove = i => threads[i] = null;
|
|
|
|
this.get_cells_x = () => number_of_cells.x;
|
|
this.get_cells_y = () => number_of_cells.y;
|
|
|
|
this.extends = object => {
|
|
for(const key in self)
|
|
if(object[key] === undefined)
|
|
object[key] = self[key];
|
|
};
|
|
|
|
const on_click = (canvas, event, action) => {
|
|
|
|
switch(action){
|
|
case "click":
|
|
self.on_click.execute(properties => (
|
|
event.clientX >= properties.context_x + (properties.x * cell_size) &&
|
|
event.clientY >= properties.context_y + (properties.y * cell_size) &&
|
|
event.clientX <= properties.context_x + ((properties.x + properties.width) * cell_size) &&
|
|
event.clientY <= properties.context_y + ((properties.y + properties.height) * cell_size)
|
|
), canvas, event);
|
|
break;
|
|
};
|
|
|
|
};
|
|
|
|
construct();
|
|
|
|
}; |