+
+
+
+ 
+
+ Kanvas
+
+
+
+
+
+
+
+
+
+
+
diff --git a/JSON/html.files.json b/JSON/html.files.json
new file mode 100755
index 0000000..ba6b588
--- /dev/null
+++ b/JSON/html.files.json
@@ -0,0 +1 @@
+{"files":["\/mnt\/d\/git\/Kanvas\/Public\/dev\/ECMAScript\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/PHP\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/Public\/Kanvas.ecma.js.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/Public\/wmd.php.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/Public\/wmd_scripts.php.html","\/mnt\/d\/git\/Kanvas\/Public\/dev\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.idea.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.quality.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.settings.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.starting.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/doc\/kanvas.targets.html","\/mnt\/d\/git\/Kanvas\/Public\/es\/index.html","\/mnt\/d\/git\/Kanvas\/Public\/index.html"],"directories":["\/JSON","\/dev","\/dev\/ECMAScript","\/dev\/PHP","\/dev\/Public","\/es","\/es\/doc"]}
\ No newline at end of file
diff --git a/Public/.htaccess b/Public/.htaccess
new file mode 100755
index 0000000..81d9bac
--- /dev/null
+++ b/Public/.htaccess
@@ -0,0 +1 @@
+Header set Access-Control-Allow-Origin "*"
diff --git a/Public/ecma/version/20230707/Kanvas.ecma.js b/Public/ecma/version/20230707/Kanvas.ecma.js
new file mode 100644
index 0000000..144f9e9
--- /dev/null
+++ b/Public/ecma/version/20230707/Kanvas.ecma.js
@@ -0,0 +1,747 @@
+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();
+
+};
\ No newline at end of file
diff --git a/Public/ecma/version/221106/Kanvas.ecma.js b/Public/ecma/version/221106/Kanvas.ecma.js
new file mode 100755
index 0000000..38dcfa5
--- /dev/null
+++ b/Public/ecma/version/221106/Kanvas.ecma.js
@@ -0,0 +1,936 @@
+Kanvas = function(input){
+
+ const self = this,
+ default_settings = {
+ quality : 1,
+ quality_x : 1,
+ quality_y : 1,
+ cells : 100,
+ origin : 5, // Posición origen. Mirar teclado numérico para ver los diferentes valores para cada posición.
+ frames_per_second : 60,
+ ratio : null, // Expone la proporción de tamaño del Canvas (16/9 para pantallas WideScreen por ejemplo). Si es equivalente a falso cubrirá todo el área de la capa donde se encuentre.
+ overwrite : false,
+ position : "body",
+ autostart : true,
+ object_name : "kanvas",
+ class : "kanvas",
+ application : "Kanvas",
+ x : 0,
+ y : 0,
+ width : 0,
+ height : 0,
+ color : "#000",
+ blur : 0,
+ italic : false,
+ bold : false,
+ size : 1,
+ font : "Arial",
+ align : "left",
+ alpha : 1,
+ degrees : 0,
+ baseline : "Alphabetic",
+ shadow_x : 0,
+ shadow_y : 0,
+ shadow_color : "#000",
+ shadow_blur : 0,
+ border_color : "#000",
+ border_width : 0,
+ text_italic : false,
+ text_bold : false,
+ text_size : 1,
+ font_family : "Arial",
+ text_color : "#000",
+ text_align : "left",
+ text_alpha : 1,
+ rotate_x : 0,
+ rotate_y : 0,
+ rotate_degrees : 0,
+ image_x : 0,
+ image_y : 0,
+ image_alpha : 1,
+ rectangle_color : "#000",
+ rectangle_alpha : 1,
+ rectangle_x : 0,
+ rectangle_y : 0,
+ text_baseline : "Alphabetic",
+ default_value : null,
+ hash_alphabet : "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz",
+ hash_length : 7,
+ frames_per_second_samples : 20,
+ settings_overwrite : false,
+ ajax_timeout : 2000
+ },
+ custom = {},
+ // cache = [],
+ _screen = {x : 0, y : 0},
+ position = {x : 0, y : 0},
+ events = {},
+ threads = [],
+ hashes = [],
+ attributes = {
+ natives : ["id", "class", "onmousemove", "tabindex", "onkeydown", "onkeyup"]
+ },
+ cache = {},
+ frames_per_second_samples = [],
+ delta_time = 0;
+ let q, qx, qy, // Calidad porcentual.
+ c, // Número de celdas en el lado más corto de la pantalla o área de trabajo rectangular.
+ fx, fy, // Posición contra el foco.
+ dx, dy, // Distancia desde los laterales hasta el cuadrado de trabajo.
+ s, // Tamaño de la celda. Solo se mide un lado pues será cuadrada.
+ mx, my, // Posición origen del lienzo.
+ thread = null,
+ timeout = 0,
+ last_time = 0,
+ started = false,
+ cache_container, context, canvas,
+ // cache_l = 0,
+ thread_object = null,
+ frames_per_second_samples_number,
+ last_frame_per_second_sample = Date.now(),
+ real_frames_per_seconds = 0,
+ ajax_timeout;
+
+ let item_self = this.item_self;
+ let hash_self = this.hash_self;
+ let object_name = this.object_name;
+ let mouse = this.mouse = {x : 0, y : 0};
+
+ this.LOADING = 1 << 0;
+ this.LOADED = 1 << 1;
+ this.ERROR = 1 << 2;
+
+ this.map = [];
+
+ const null_or_undefined = this.null_or_undefined = value => value === undefined || value === null;
+
+ this.get = (url, callback) => {
+
+ let ended = false;
+ const ajax = new XMLHttpRequest(),
+ end = status => {
+ if(ended)
+ return;
+ ended = true;
+ typeof callback == "function" && callback(ajax.response, ajax.status, ajax.readyState, status, status == "OK");
+ },
+ date = Date.now();
+
+ ajax.open("get", url, true);
+ ajax.timeout = ajax_timeout;
+ ajax.onreadystatechange = () => {
+ if(ended)
+ return;
+ if(ajax.readyState == 4)
+ end((ajax.status >= 200 && ajax.status < 300) || [301, 302, 304].includes(ajax.status) ? "OK" : "HTTP_ERROR");
+ else if(Date.now() - date > ajax_timeout)
+ end("FORCED_TIMEOUT");
+ };
+ ajax.send(null);
+
+ ajax.ontimeout = () => end("TIMEOUT");
+ ajax.onabort = () => end("ABORTED");
+ ajax.onerror = () => end("ERROR");
+
+ return ajax;
+ };
+
+ const allow_nulls = this.allow_nulls = nulls => typeof nulls == "boolean" ? nulls : settings(["nulls", "allow_nulls"], null, false, false);
+
+ const default_value = this.default_value = (_default, nulls) => _default !== undefined && (nulls || _default !== null) ? _default : settings(["default_value", "default", "by_default"], null, null, true);
+
+ this.settings_add = (inputs, overwrite, callback) => {
+
+ if(inputs instanceof Array){
+
+ let loaded = 0;
+ const end = () => ++ loaded == inputs.length && typeof callback == "function" && callback();
+
+ inputs.forEach(input => self.settings_add(input, overwrite, end));
+
+ return;
+ };
+
+ if(typeof inputs == "object"){
+ typeof overwrite != "boolean" && (overwrite = settings(["settings_overwrite", "overwrite"]));
+ for(const key in inputs)
+ (overwrite || custom[key] === undefined) && (custom[key] = inputs[key]);
+ inputs.autostart !== undefined && (input.autostart = inputs.autostart);
+ typeof callback == "function" && callback();
+ return;
+ };
+
+ if(typeof inputs == "string"){
+
+ let json;
+
+ try{
+ if(json = JSON.parse(inputs)){
+ self.settings_add(json, overwrite, callback);
+ return;
+ };
+ }catch(exception){};
+
+ self.get(inputs, response => {
+ try{
+ if(json = JSON.parse(response)){
+ self.settings_add(json, overwrite, callback);
+ return;
+ };
+ }catch(exception){};
+ typeof callback == "function" && callback();
+ });
+
+ return;
+ };
+
+ typeof callback == "function" && callback();
+
+ };
+
+ const settings = this.settings = (names, inputs, _default, nulls) => {
+ if(!names)
+ return default_value(_default, nulls);
+
+ nulls = allow_nulls(nulls);
+
+ const l = (names.push ? names : names = [names]).length,
+ m = (inputs = (inputs ? inputs.push ? inputs : [inputs] : []).concat([input, custom, default_settings])).length;
+
+ for(let j = 0; j < m; j ++)
+ if(typeof inputs[j] == "object")
+ for(let i = 0; i < l; i ++)
+ if(names[i] && inputs[j][names[i]] !== undefined && (nulls || inputs[j][names[i]] !== null))
+ return inputs[j][names[i]];
+ return default_value(_default, nulls);
+ };
+
+ const threads_function = () => threads.forEach(thread => thread && thread());
+
+ const threads_start = this.threads_start = frames_per_second => thread_object === null && (thread_object = setInterval(threads_function, 1000 / (isNaN(frames_per_second) || frames_per_second < 1 ? settings(["frames_per_second", "fps"]) : frames_per_second)));
+
+ const threads_stop = this.threads_stop = () => {
+
+ if(thread_object === null)
+ return;
+
+ clearInterval(thread_object);
+ thread_object = null;
+
+ };
+
+ const threads_add = this.threads_add = callback => {
+ if(typeof callback != "function")
+ return null;
+
+ let i = 0;
+ const l = threads.length;
+
+ for(; i < l; i ++)
+ if(!threads[i])
+ break;
+
+ threads[i] = callback;
+
+ return i;
+ };
+
+ const threads_remove = this.threads_remove = i => !isNaN(i) && threads[i] && (threads[i] = null);
+
+ const is_html_object = this.is_html_object = variable => typeof variable == "object" && (variable.tagName || variable.nodeName);
+
+ const preload = this.preload = (selector, callback) => {
+ if(typeof callback != "function")
+ return;
+
+ if(!selector){
+ callback(null, false, "NO_SELECTOR");
+ return;
+ };
+ if(is_html_object(selector)){
+ callback(selector, false, "OK");
+ return;
+ };
+ if(!selector.substr){
+ callback(null, false, "BAD_TYPE");
+ return;
+ };
+
+ let item;
+
+ try{
+ if(item = document.querySelector(selector)){
+ callback(item, false, "OK");
+ return;
+ };
+ }catch(exception){
+ callback(null, false, "BAD_SELECTOR");
+ return;
+ };
+
+ const timeout = settings(["preload_timeout", "timeout"]),
+ date = Date.now();
+ let preload = threads_add(() => {
+ if(item = document.querySelector(selector)){
+ threads_remove(preload);
+ callback(item, true, "OK");
+ }else if(Date.now() - date > timeout){
+ threads_remove(preload);
+ callback(null, true, "TIMEOUT");
+ };
+ });
+
+ };
+
+ const hash = this.hash = () => {
+
+ let hash, alphabet = settings(["hash_alphabet", "alphabet"]);
+ const length = settings(["hash_length", "length"]),
+ l = (alphabet.push ? alphabet : alphabet = alphabet.split("")).length;
+
+ do{
+ hash = "";
+ while((hash += alphabet[Math.random() * l >> 0]).length < length);
+ }while(
+ hashes.includes(hash) ||
+ /^\d/.test(hash) ||
+ document.querySelector("." + hash + ",#" + hash + ",[name=" + hash + "]")
+ );
+ hashes.push(hash);
+
+ return hash;
+ };
+
+ const set_attribute = this.set_attribute = (item, custom_attributes) => {
+ if(!is_html_object(item) || typeof custom_attributes != "object")
+ return;
+
+ for(const name in custom_attributes)
+ item.setAttribute((attributes.natives.includes(name) ? "" : "data-") + name.replace(/[^a-z\d-]+/g, "-"), custom_attributes[name]);
+
+ };
+
+ const construct = () => {
+
+ const custom_attributes = {
+ natives : settings("attributes_natives")
+ };
+
+ for(const key in custom_attributes){
+ !attributes[key] && (attributes[key] = []);
+ (custom_attributes ? custom_attributes.push ? custom_attributes : [custom_attributes] : []).forEach(new_attribute => attributes[key].push(new_attribute));
+ };
+
+ object_name = self.object_name = settings("object_name");
+
+ settings("autostart") && self.start();
+
+ };
+
+ const Events = this.Events = function(){
+
+ const events = [];
+
+ this.add = callback => {
+ if(typeof callback != "function")
+ return null;
+
+ let i = 0;
+ const l = events.length;
+
+ while(i < l){
+ if(events[i] === null)
+ break;
+ i ++;
+ };
+
+ events[i] = callback;
+
+ return i;
+ };
+
+ this.remove = i => !isNaN(i) && i >= 0 && events[i] && (events[i] = null);
+
+ this.execute = (...inputs) => events.forEach(event => event && event(...inputs));
+
+ };
+
+ const range_analyze = range => !range || (
+ mouse.x >= range.x && mouse.x <= range.x + range.width &&
+ mouse.y >= range.y && mouse.y <= range.y + range.height
+ );
+
+ const on_resize_method = screen => {
+
+ if(_screen.x == item_self.offsetWidth && _screen.y == item_self.offsetHeight)
+ return;
+
+ const width = canvas.width = (_screen.x = item_self.offsetWidth) * q * qx,
+ height = canvas.height = (_screen.y = item_self.offsetHeight) * q * qy;
+
+ if(width < height){
+ s = width / c;
+ dx = 0;
+ dy = -(c - (c * height / width)) / 2;
+ mx = position.x;
+ my = position.y + dy;
+ }else{
+ s = height / c;
+ dx = -(c - (c * width / height)) / 2;
+ dy = 0;
+ mx = position.x + dx;
+ my = position.y;
+ };
+
+ //resize_methods.forEach((method) => {if(method)method();});
+ execute_event("resize");
+
+ };
+
+ const position_set = () => {
+
+ const origin = settings("origin");
+
+ position.x = c * (.5 * ((origin - 1) % 3));
+ position.y = c * (1 - (.5 * ((origin - 1) / 3 >> 0)));
+
+ };
+
+ const calculate_real_frames_per_seconds = () => {
+
+ const now = Date.now(),
+ time = now - last_frame_per_second_sample;
+
+ frames_per_second_samples.push(time);
+ last_frame_per_second_sample = now;
+
+ while(frames_per_second_samples.length > frames_per_second_samples_number)
+ frames_per_second_samples.shift();
+
+ real_frames_per_seconds = 1000 / (frames_per_second_samples.reduce((a, b) => a + b) / frames_per_second_samples.length);
+ delta_time = time / 1000;
+
+ };
+
+ this.start = callback => {
+
+ const end = status => typeof callback == "function" && callback(status);
+
+ if(started){
+ end(false);
+ return false;
+ };
+ started = true;
+
+ q = settings(["quality", "q"]);
+ qx = settings(["quality_x", "qx"]);
+ qy = settings(["quality_y", "qy"]);
+ timeout = 1000 / settings("frames_per_second");
+ c = settings("cells");
+ position_set();
+ threads_start();
+ ajax_timeout = settings("ajax_timeout");
+
+ preload(settings("position"), (position, asynchronous, error) => {
+
+ if(!position){
+ console.error("ERROR. Position HTML for install GUI CANVAS is bad. [" + error + "]");
+ return;
+ };
+
+ const _class = (hash_self = self.hash_self = hash()) + " " + settings("class");
+
+ !new RegExp("\\b" + default_settings.class + "\\b").test(_class) && (_class += " " + default_settings.class);
+
+ set_attribute(item_self = self.item_self = position.appendChild(document.createElement("div")), {
+ id : hash_self,
+ hash : hash_self,
+ class : _class,
+ application : default_settings.application,
+ onmousemove : object_name + ".check_mouse(this, event);",
+ tabindex : 0,
+ onkeydown : object_name + ".key_down(this, event);",
+ onkeyup : object_name + ".key_up(this, event);",
+ cells : c,
+ mouse_x : 0,
+ mouse_y : 0
+ });
+ set_attribute(cache_container = item_self.appendChild(document.createElement("div")), {
+ class : "cache"
+ });
+ set_attribute(canvas = item_self.appendChild(document.createElement("canvas")), {
+ class : "canvas"
+ });
+ context = canvas.getContext("2d");
+
+ thread = threads_add(thread_method);
+ on_resize_thread = threads_add(on_resize_method);
+ item_self.onclick = () => execute_event("click");
+
+ frames_per_second_samples_number = self.settings("frames_per_second_samples");
+ threads_add(calculate_real_frames_per_seconds);
+
+ end(true);
+
+ });
+
+ return true;
+ };
+
+ // o = Origin {mx, my}
+ const draw = this.draw = (map, context, o) => map && map.forEach((level, i) => level && (level.push && draw(level, context, o || {mx : mx, my : my}) || (level.type && components[level.type] && components[level.type](level, context, self, o || {mx : mx, my : my}))));
+
+ const refresh_draw = () => {
+
+ if(!context)
+ return;
+
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ draw(self.map, context);
+
+ };
+
+ const thread_method = () => {
+
+ const date = Date.now();
+
+ if(date - last_time < timeout)
+ return;
+ last_time = date;
+
+ refresh_draw();
+
+ };
+
+ // Establecer posición sobre el foco de origen.
+ // Establecer posición sobre los laterales del recuadro o área de trabajo.
+ const value = this.value = (value, quality) => q * value * (quality || 1);
+ // const _x = this._x = value => q * qx * value * s;
+ // const _y = this._y = value => q * qy * value * s;
+ const _x = this._x = value => value * s;
+ const _y = this._y = value => value * s;
+
+ this.preload_cache_items = (items, callback_per_item, callback) => {
+
+ const end = status => typeof callback == "function" && callback(status);
+
+ typeof items == "string" && (items = [items]);
+
+ if(!(items instanceof Array)){
+ end(false);
+ return;
+ };
+
+ let fully = true,
+ loaded = 0;
+ const has_callback_per_item = typeof callback_per_item == "function",
+ on_item_loaded = (url, ok) => {
+ ok !== undefined && (cache[url].status = ok ? self.LOADED : self.ERROR);
+ cache[url].on_load.execute(url, ok);
+ has_callback_per_item && callback_per_item(url, ok);
+ ok === false && fully && (fully = false);
+ ++ loaded == items.length && end(fully);
+ };
+
+ items.forEach(url => {
+
+ if(cache[url]){
+ if(cache[url].status == self.LOADING)
+ cache[url].on_load.add(has_callback_per_item);
+ else
+ on_item_loaded(url);
+ return;
+ };
+
+ const extension = ((url.match(/\.([^\.]+)/) || [])[1] || "").toLowerCase();
+
+ cache[url] = {
+ status : self.LOADING,
+ on_load : new Events()
+ };
+
+ switch(extension){
+ case "jpg":
+ case "jpeg":
+ case "jpge":
+ case "png":
+ case "webp":
+ case "gif":
+ case "tif":
+ case "tiff":
+ case "pcx":
+ case "bmp":
+
+ const image = new Image();
+
+ cache[url].type = "image";
+ cache[url].image = image;
+
+ image.src = url;
+ image.onload = () => on_item_loaded(url, true);
+ image.onerror = () => on_item_loaded(url, false);
+
+ break;
+ default:
+
+ cache[url].type = "unknown";
+ cache[url].status = self.ERROR;
+ on_item_loaded(url, false);
+
+ break;
+ };
+
+ });
+
+ };
+
+ const angle = this.angle = (x, y, randians) => {
+
+ if(typeof x == "object"){
+
+ const line = x.push ? {
+ x : x[0] - y[0],
+ y : x[1] - y[1]
+ } : {
+ x : x.x - y.x,
+ y : x.y - y.y
+ };
+
+ x = line.x;
+ y = line.y;
+
+ };
+
+ let angle = Math.asin(y / ((x ** 2) + (y ** 2)) ** .5);
+
+ // if(x >= 0)
+ // angle += Math.PI / 2;
+ // else
+ // angle = (1.5 * Math.PI) - angle;
+
+ return (x >= 0 ? angle + (Math.PI / 2) : ((1.5 * Math.PI) - angle)) * (randians ? 1 : 180 / Math.PI);
+ };
+
+ const shadow = (data, context) => {
+
+ const z = dx < dy ? _x : _y;
+
+ if(!data.ok){
+ isNaN(data.x) && (data.x = settings(["shadow_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["shadow_y", "y"]));
+ !data.color && (data.color = settings(["shadow_color", "color"]));
+ isNaN(data.blur) && (data.blur = settings(["shadow_blur", "blur"]));
+ data.ok = true;
+ };
+
+ context.shadowOffsetX = z(data.x);
+ context.shadowOffsetY = z(data.y);
+ context.shadowColor = data.color;
+ context.shadowBlur = z(data.blur);
+
+ };
+
+ const border = (data, context) => {
+
+ if(!data.ok){
+ !data.color && (data.color = settings(["border_color", "color"]));
+ isNaN(data.width) && (data.width = settings(["border_width", "width"]));
+ data.ok = true;
+ };
+
+ context.strokeStyle = data.color;
+ context.lineWidth = (dx < dy ? _x : _y)(data.width);
+
+ };
+
+ const components = {
+ rotate : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ if(!data.ok){
+ isNaN(data.x) && (data.x = settings(["rotate_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["rotate_y", "y"]));
+ isNaN(data.degrees) && (data.degrees = settings(["rotate_degrees", "degrees"]));
+ data.ok = true;
+ };
+
+ // console.log(JSON.stringify(data));
+ // console.log(JSON.stringify([_x(data.x + mx), _y(data.y + my)]));
+
+ context.save();
+ context.translate(_x(data.x + o.mx), _y(data.y + o.my));
+ context.rotate(data.degrees * Math.PI / 180);
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ },
+ image : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ !data.ok && !data.source && (data.source = data.src || data.url);
+
+ if(cache[data.source]){
+
+ if(!data.ok){
+ if(cache[data.source] && cache[data.source].status == self.LOADED){
+ isNaN(data.swidth) && (data.swidth = cache[data.source].image.width);
+ isNaN(data.sheight) && (data.sheight = cache[data.source].image.height);
+ isNaN(data.width) && (data.width = data.swidth);
+ isNaN(data.height) && (data.height = data.sheight);
+ };
+ isNaN(data.x) && (data.x = settings(["image_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["image_y", "y"]));
+ isNaN(data.alpha) && (data.alpha = settings(["image_alpha", "alpha"]));
+ isNaN(data.sx) && (data.sx = 0);
+ isNaN(data.sy) && (data.sy = 0);
+ isNaN(data.mx) && (data.mx = 0);
+ isNaN(data.my) && (data.my = 0);
+ data.ok = true;
+ };
+
+ if(cache[data.source].status != self.LOADED)
+ return;
+
+ const half_width = data.width / 2,
+ half_height = data.height / 2;
+
+ context.save();
+ context.globalAlpha = data.alpha;
+ context.translate(_x(o.mx + data.x + data.mx + half_width), _y(o.my + data.y + data.my + half_height));
+ context.rotate(data.rotate * Math.PI / 180);
+ context.drawImage(
+ cache[data.source].image,
+ data.sx, data.sy, data.swidth, data.sheight,
+ _x(-half_width), _y(-half_height), _x(data.width), _y(data.height)
+ );
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ }else
+ self.preload_cache_items([data.source]);
+
+ },
+ // cache : (data, context, kanvas, o) => {
+ // if(data.ignore)
+ // return;
+
+ // context.save();
+
+ // if(isNaN(data.cache_i)){
+
+ // const cache_canvas = cache_container.appendChild(document.createElement("canvas")),
+ // cache_context = cache_canvas.getContext("2d"),
+ // width = data.width || canvas.width,
+ // height = data.height || canvas.height;
+ // image = new Image();
+
+ // cache_canvas.width = width;
+ // cache_canvas.height = height;
+
+ // get_new_cache_i(data);
+ // cache_context.save();
+ // // cache_context.translate(_x(-o.mx), _y(-o.my));
+ // draw(data.childs, cache_context, {mx : 0, my : 0});
+ // image.src = cache_canvas.toDataURL("image/png");
+ // cache[data.cache_i] = image;
+ // cache_context.restore();
+
+ // cache_canvas.remove();
+
+ // };
+
+ // context.drawImage(cache[data.cache_i], 0, 0);
+ // context.restore();
+
+ // },
+ rectangle : (data, context, kanvas, o) => {
+ if(data.ignore)return;
+
+ const proportion = canvas.width > canvas.height ? canvas.width / canvas.height : canvas.height / canvas.width;
+
+ if(!data.ok){
+ isNaN(data.alpha) && (data.alpha = settings(["rectangle_alpha", "alpha"]));
+ !data.color && (data.color = settings(["rectangle_color", "color"]));
+ isNaN(data.x) && (data.x = settings(["rectangle_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["rectangle_y", "y"]));
+ isNaN(data.width) && (data.width = proportion * c);
+ isNaN(data.height) && (data.height = proportion * c);
+ isNaN(data.mx) && (data.mx = 0);
+ isNaN(data.my) && (data.my = 0);
+ data.ok = true;
+ };
+
+ context.save();
+ data.shadow && (shadow(data.shadow, context));
+ context.globalAlpha = data.alpha;
+ context.fillStyle = data.color;
+ context.translate(_x(o.mx + data.x + data.mx), _y(o.my + data.y + data.my));
+ context.rotate(data.rotate * Math.PI / 180);
+ context.translate(_x(-data.mx), _y(-data.my));
+ context.fillRect(_x(data.x), _y(data.y), _x(data.width), _y(data.height));
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ },
+ text : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ if(!data.ok){
+ typeof data.italic != "boolean" && (data.italic = settings(["text_italic", "italic"]));
+ isNaN(data.bold) && typeof data.bold != "boolean" && (data.bold = settings(["text_bold", "bold"]));
+ isNaN(data.size) && (data.size = settings(["text_size", "size"]));
+ data.font && (data.font_family = data.font);
+ !data.font_family && (data.font_family = settings(["text_font_family", "text_font", "font"]));
+ !data.align && (data.align = settings(["text_align", "align"]));
+ isNaN(data.x) && (data.x = settings(["text_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["text_y", "y"]));
+ !data.text && (data.text = "");
+ isNaN(data.alpha) && (data.alpha = settings(["text_alpha", "alpha"]));
+ !data.baseline && (data.baseline = settings(["text_baseline", "baseline"]));
+ data.ok = true;
+ };
+
+ context.save();
+ data.shadow && (shadow(data.shadow, context));
+ context.globalAlpha = data.alpha;
+ context.textAlign = data.align;
+ context.textBaseline = data.baseline;
+ context.font = (
+ (data.italic ? "italic " : "") +
+ (data.bold ? isNaN(data.bold) ? "bold " : data.bold + " " : "") +
+ (dx < dy ? _x : _y)(data.size) + "px " +
+ data.font_family
+ );
+ if(data.color){
+ context.fillStyle = data.color;
+ context.fillText(data.text, _x(data.x + mx), _y(data.y + my));
+ };
+ if(data.border){
+ border(data.border, context);
+ context.strokeText(data.text, _x(data.x + mx), _y(data.y + my));
+ };
+ context.restore();
+
+ },
+ block : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ if(!data.ok){
+ isNaN(data.alpha) && (data.alpha = settings(["block_alpha", "alpha"]));
+ data.ok = true;
+ };
+
+ context.save();
+ context.globalAlpha = data.alpha;
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ }
+ };
+
+ this.add_components = (json, overwrite) => {
+ if(!json)
+ return;
+
+ !json.push && (json = [json]);
+ typeof overwrite != "bool" && (overwrite = settings("overwrite"));
+
+ json.forEach((items) => {
+ if(!items)
+ return;
+ if(items.push)
+ self.add_components(items, overwrite);
+ else if(typeof items == "object")
+ for(let key in items)
+ (overwrite || !components[key]) && (components[key] = items[key]);
+ });
+
+ };
+
+ this.extends = (object, overwrite) => {
+ for(const key in self)
+ (overwrite || object[key] === undefined) && (object[key] = self[key]);
+ };
+
+ this.check_mouse = (item, event) => {
+
+ item_self.setAttribute("data-mouse-x", mouse.x = (event.clientX * q * qx / s) - mx);
+ item_self.setAttribute("data-mouse-y", mouse.y = (event.clientY * q * qy / s) - my);
+
+ execute_event("mouse_move");
+
+ };
+
+ const on_event = this.on_event = (name, method, range) => {
+
+ if(typeof method != "function")
+ return null;
+
+ !events[name] && (events[name] = {
+ methods : [],
+ l : 0,
+ ranges : []
+ });
+
+ let i = 0;
+
+ for(; i < events[name].l; i ++)
+ if(!events[name].methods[i])
+ break;
+
+ events[name].methods[i] = method;
+ events[name].ranges[i] = range;
+ events[name].l = events[name].methods.length;
+
+ return i;
+ };
+
+ const remove_event = this.remove_event = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l && events[name].methods[i] && (events[name].methods[i] = null);
+
+ const execute_event = this.execute_event = (name, input) => {
+
+ if(events[name] && events[name].l)
+ for(let i = 0; i < events[name].l; i ++)
+ events[name].methods[i] && events[name].methods[i](range_analyze(events[name].ranges[i]), input);
+
+ };
+
+ const event_range = this.event_range = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l ? events[name].ranges[i] : null;
+
+ this.on_mouse_move = (method, range) => on_event("mouse_move", method, range);
+ this.on_resize = (method, range) => on_event("resize", method, range);
+ this.on_click = (method, range) => on_event("click", method, range);
+ this.on_key_down = (method, range) => on_event("key_down", method, range);
+ this.on_key_up = (method, range) => on_event("key_up", method, range);
+
+ this.remove_mouse_move = i => {remove_event("mouse_move", i);};
+ this.remove_resize = i => {remove_event("resize", i);};
+ this.remove_click = i => {remove_event("click", i);};
+ this.remove_key_down = i => {remove_event("key_down", i);};
+ this.remove_key_up = i => {remove_event("key_up", i);};
+
+ this.range_mouse_move = i => event_range("mouse_move", i);
+ this.range_resize = i => event_range("resize", i);
+ this.range_click = i => event_range("click", i);
+ this.range_key_down = i => event_range("key_down", i);
+ this.range_key_up = i => event_range("key_up", i);
+
+ this.key_down = (item, event) => execute_event("key_down", {code : event.keyCode});
+ this.key_up = (item, event) => execute_event("key_up", {code : event.keyCode});
+
+ this.get_margins = () => ({x : mx, y : my});
+ this.get_position = () => ({x : position.x, y : position.y});
+ this.get_cells = () => c;
+ this.get_canvas_distance = () => ({x : dx, y : dy});
+ this.get_cell_size = () => s;
+
+ this.get_real_frames_per_second = () => real_frames_per_seconds;
+ this.delta_time = () => delta_time;
+
+ construct();
+
+};
diff --git a/Public/ecma/version/30311230/Kanvas.ecma.js b/Public/ecma/version/30311230/Kanvas.ecma.js
new file mode 100755
index 0000000..7c89766
--- /dev/null
+++ b/Public/ecma/version/30311230/Kanvas.ecma.js
@@ -0,0 +1,782 @@
+Kanvas = function(input){
+
+ const self = this,
+ default_settings = {
+ quality : 1,
+ quality_x : 1,
+ quality_y : 1,
+ cells : 100,
+ origin : 5, // Posición origen. Mirar teclado numérico para ver los diferentes valores para cada posición.
+ frames_per_second : 60,
+ ratio : null, // Expone la proporción de tamaño del Canvas (16/9 para pantallas WideScreen por ejemplo). Si es equivalente a falso cubrirá todo el área de la capa donde se encuentre.
+ overwrite : false,
+ position : "body",
+ autostart : true,
+ object_name : "kanvas",
+ class : "kanvas",
+ application : "Kanvas",
+ x : 0,
+ y : 0,
+ width : 0,
+ height : 0,
+ color : "#000",
+ blur : 0,
+ italic : false,
+ bold : false,
+ size : 1,
+ font : "Arial",
+ align : "left",
+ alpha : 1,
+ degrees : 0,
+ baseline : "Alphabetic",
+ shadow_x : 0,
+ shadow_y : 0,
+ shadow_color : "#000",
+ shadow_blur : 0,
+ border_color : "#000",
+ border_width : 0,
+ text_italic : false,
+ text_bold : false,
+ text_size : 1,
+ font_family : "Arial",
+ text_color : "#000",
+ text_align : "left",
+ text_alpha : 1,
+ rotate_x : 0,
+ rotate_y : 0,
+ rotate_degrees : 0,
+ image_x : 0,
+ image_y : 0,
+ image_alpha : 1,
+ rectangle_color : "#000",
+ rectangle_alpha : 1,
+ rectangle_x : 0,
+ rectangle_y : 0,
+ text_baseline : "Alphabetic",
+ default_value : null,
+ hash_alphabet : "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz",
+ hash_length : 7
+ },
+ cache = [],
+ _screen = {x : 0, y : 0},
+ position = {x : 0, y : 0},
+ events = {},
+ threads = [],
+ hashes = [],
+ attributes = {
+ natives : ["id", "class", "onmousemove", "tabindex", "onkeydown", "onkeyup"]
+ };
+ let q, qx, qy, // Calidad porcentual.
+ c, // Número de celdas en el lado más corto de la pantalla o área de trabajo rectangular.
+ fx, fy, // Posición contra el foco.
+ dx, dy, // Distancia desde los laterales hasta el cuadrado de trabajo.
+ s, // Tamaño de la celda. Solo se mide un lado pues será cuadrada.
+ mx, my, // Posición origen del lienzo.
+ thread = null,
+ timeout = 0,
+ last_time = 0,
+ started = false,
+ cache_container, context, canvas,
+ cache_l = 0,
+ thread_object = null;
+
+ let item_self = this.item_self;
+ let hash_self = this.hash_self;
+ let object_name = this.object_name;
+ let mouse = this.mouse = {x : 0, y : 0};
+
+ this.map = [];
+
+ const null_or_undefined = this.null_or_undefined = value => value === undefined || value === null;
+
+ const allow_nulls = this.allow_nulls = nulls => typeof nulls == "boolean" ? nulls : settings(["nulls", "allow_nulls"], null, false, false);
+
+ const default_value = this.default_value = (_default, nulls) => _default !== undefined && (nulls || _default !== null) ? _default : settings(["default_value", "default", "by_default"], null, null, true);
+
+ const settings = this.settings = (names, inputs, _default, nulls) => {
+ if(!names)
+ return default_value(_default, nulls);
+
+ nulls = allow_nulls(nulls);
+
+ const l = (names.push ? names : names = [names]).length,
+ m = (inputs = (inputs ? inputs.push ? inputs : [inputs] : []).concat([input, default_settings])).length;
+
+ for(let j = 0; j < m; j ++)
+ if(typeof inputs[j] == "object")
+ for(let i = 0; i < l; i ++)
+ if(names[i] && inputs[j][names[i]] !== undefined && (nulls || inputs[j][names[i]] !== null))
+ return inputs[j][names[i]];
+ return default_value(_default, nulls);
+ };
+
+ const threads_function = () => threads.forEach(thread => thread && thread());
+
+ const threads_start = this.threads_start = frames_per_second => thread_object === null && (thread_object = setInterval(threads_function, 1000 / (isNaN(frames_per_second) || frames_per_second < 1 ? settings(["frames_per_second", "fps"]) : frames_per_second)));
+
+ const threads_stop = this.threads_stop = () => {
+
+ if(thread_object === null)
+ return;
+
+ clearInterval(thread_object);
+ thread_object = null;
+
+ };
+
+ const threads_add = this.threads_add = callback => {
+ if(typeof callback != "function")
+ return null;
+
+ let i = 0;
+ const l = threads.length;
+
+ for(; i < l; i ++)
+ if(!threads[i])
+ break;
+
+ threads[i] = callback;
+
+ return i;
+ };
+
+ const threads_remove = this.threads_remove = i => !isNaN(i) && threads[i] && (threads[i] = null);
+
+ const is_html_object = this.is_html_object = variable => typeof variable == "object" && (variable.tagName || variable.nodeName);
+
+ const preload = this.preload = (selector, callback) => {
+ if(typeof callback != "function")
+ return;
+
+ if(!selector){
+ callback(null, false, "NO_SELECTOR");
+ return;
+ };
+ if(is_html_object(selector)){
+ callback(selector, false, "OK");
+ return;
+ };
+ if(!selector.substr){
+ callback(null, false, "BAD_TYPE");
+ return;
+ };
+
+ let item;
+
+ try{
+ if(item = document.querySelector(selector)){
+ callback(item, false, "OK");
+ return;
+ };
+ }catch(exception){
+ callback(null, false, "BAD_SELECTOR");
+ return;
+ };
+
+ const timeout = settings(["preload_timeout", "timeout"]),
+ date = Date.now();
+ let preload = threads_add(() => {
+ if(item = document.querySelector(selector)){
+ threads_remove(preload);
+ callback(item, true, "OK");
+ }else if(Date.now() - date > timeout){
+ threads_remove(preload);
+ callback(null, true, "TIMEOUT");
+ };
+ });
+
+ };
+
+ const hash = this.hash = () => {
+
+ let hash, alphabet = settings(["hash_alphabet", "alphabet"]);
+ const length = settings(["hash_length", "length"]),
+ l = (alphabet.push ? alphabet : alphabet = alphabet.split("")).length;
+
+ do{
+ hash = "";
+ while((hash += alphabet[Math.random() * l >> 0]).length < length);
+ }while(
+ hashes.includes(hash) ||
+ /^\d/.test(hash) ||
+ document.querySelector("." + hash + ",#" + hash + ",[name=" + hash + "]")
+ );
+ hashes.push(hash);
+
+ return hash;
+ };
+
+ const set_attribute = this.set_attribute = (item, custom_attributes) => {
+ if(!is_html_object(item) || typeof custom_attributes != "object")
+ return;
+
+ for(const name in custom_attributes)
+ item.setAttribute((attributes.natives.includes(name) ? "" : "data-") + name.replace(/[^a-z\d-]+/g, "-"), custom_attributes[name]);
+
+ };
+
+ const construct = () => {
+
+ const custom_attributes = {
+ natives : settings("attributes_natives")
+ };
+
+ for(const key in custom_attributes){
+ !attributes[key] && (attributes[key] = []);
+ (custom_attributes ? custom_attributes.push ? custom_attributes : [custom_attributes] : []).forEach(new_attribute => attributes[key].push(new_attribute));
+ };
+
+ object_name = self.object_name = settings("object_name");
+
+ settings("autostart") && self.start();
+
+ };
+
+ const range_analyze = range => !range || (
+ mouse.x >= range.x && mouse.x <= range.x + range.width &&
+ mouse.y >= range.y && mouse.y <= range.y + range.height
+ );
+
+ const on_resize_method = screen => {
+
+ if(_screen.x == item_self.offsetWidth && _screen.y == item_self.offsetHeight)
+ return;
+
+ const width = canvas.width = (_screen.x = item_self.offsetWidth) * q * qx,
+ height = canvas.height = (_screen.y = item_self.offsetHeight) * q * qy;
+
+ if(width < height){
+ s = width / c;
+ dx = 0;
+ dy = -(c - (c * height / width)) / 2;
+ mx = position.x;
+ my = position.y + dy;
+ }else{
+ s = height / c;
+ dx = -(c - (c * width / height)) / 2;
+ dy = 0;
+ mx = position.x + dx;
+ my = position.y;
+ };
+
+ //resize_methods.forEach((method) => {if(method)method();});
+ execute_event("resize");
+
+ };
+
+ const position_set = () => {
+
+ const origin = settings("origin");
+
+ position.x = c * (.5 * ((origin - 1) % 3));
+ position.y = c * (1 - (.5 * ((origin - 1) / 3 >> 0)));
+
+ };
+
+ this.start = () => {
+
+ if(started)
+ return;
+ started = true;
+
+ q = settings(["quality", "q"]);
+ qx = settings(["quality_x", "qx"]);
+ qy = settings(["quality_y", "qy"]);
+ timeout = 1000 / settings("frames_per_second");
+ c = settings("cells");
+ position_set();
+ threads_start();
+
+ preload(settings("position"), (position, asynchronous, error) => {
+
+ if(!position){
+ console.error("ERROR. Position HTML for install GUI CANVAS is bad. [" + error + "]");
+ return;
+ };
+
+ const _class = (hash_self = self.hash_self = hash()) + " " + settings("class");
+
+ !new RegExp("\\b" + default_settings.class + "\\b").test(_class) && (_class += " " + default_settings.class);
+
+ set_attribute(item_self = self.item_self = position.appendChild(document.createElement("div")), {
+ id : hash_self,
+ hash : hash_self,
+ class : _class,
+ application : default_settings.application,
+ onmousemove : object_name + ".check_mouse(this, event);",
+ tabindex : 0,
+ onkeydown : object_name + ".key_down(this, event);",
+ onkeyup : object_name + ".key_up(this, event);"
+ });
+ set_attribute(cache_container = item_self.appendChild(document.createElement("div")), {
+ class : "cache"
+ });
+ set_attribute(canvas = item_self.appendChild(document.createElement("canvas")), {
+ class : "canvas"
+ });
+ context = canvas.getContext("2d");
+
+ thread = threads_add(thread_method);
+ on_resize_thread = threads_add(on_resize_method);
+ item_self.onclick = () => execute_event("click");
+
+ });
+
+ };
+
+ // o = Origin {mx, my}
+ const draw = this.draw = (map, context, o) => map && map.forEach((level, i) => level && (level.push && draw(level, context, o || {mx : mx, my : my}) || (level.type && components[level.type] && components[level.type](level, context, self, o || {mx : mx, my : my}))));
+
+ const refresh_draw = () => {
+
+ if(!context)
+ return;
+
+ context.clearRect(0, 0, canvas.width, canvas.height);
+ draw(self.map, context);
+
+ };
+
+ const thread_method = () => {
+
+ const date = Date.now();
+
+ if(date - last_time < timeout)
+ return;
+ last_time = date;
+
+ refresh_draw();
+
+ };
+
+ // Establecer posición sobre el foco de origen.
+ // Establecer posición sobre los laterales del recuadro o área de trabajo.
+ const value = this.value = (value, quality) => q * value * (quality || 1);
+ // const _x = this._x = value => q * qx * value * s;
+ // const _y = this._y = value => q * qy * value * s;
+ const _x = this._x = value => value * s;
+ const _y = this._y = value => value * s;
+
+ this.cache_set = item => {
+
+ let i = 0;
+
+ for(; i < cache_l; i ++)
+ if(cache[i] === null)
+ break;
+
+ cache[i] = item;
+ cache_l = cache.length;
+
+ return i;
+ };
+
+ const get_new_cache_i = item => item.cache_i = self.cache_set(true);
+
+ this.cache_clean = i => !isNaN(i) && i >= 0 && i < cache.length && cache[i] !== null && (cache[i] = null);
+
+ const preload_cache_items = (items, callback_per_item, callback, i) => {
+
+ if(i >= items.length){
+ typeof callback == "function" && callback();
+ return;
+ };
+
+ const end = () => {
+ typeof callback_per_item == "function" && callback_per_item(i, items[i]);
+ preload_cache_items(items, callback_per_item, callback, i + 1);
+ };
+
+ if(!items[i]){
+ end();
+ return;
+ };
+
+ switch(items[i].type){
+ case "image":
+
+ const source = items[i].source || items[i].value;
+
+ if(!source){
+ end();
+ return;
+ };
+
+ const image = new Image();
+
+ image.src = source;
+ image.crossOrigin = "anonymous";
+ image.onload = () => {
+ items[i].cache_i = self.cache_set(image);
+ // console.log([items[i], items[i].source || items[i].value, cache[items[i].cache_i]]);
+ end();
+ };
+ image.onerror = end;
+
+ break;
+ default:
+ items[i].cache_i = self.cache_set(image);
+ end();
+ break;
+ };
+
+ };
+
+ this.preload_cache_items = (items, callback_per_item, callback) => {
+
+ if(!items){
+ typeof callback == "function" && callback();
+ return;
+ };
+ !items.pus && (items = [items]);
+
+ preload_cache_items(items, callback_per_item, callback, 0);
+
+ };
+
+ const angle = this.angle = (x, y, randians) => {
+
+ if(typeof x == "object"){
+
+ const line = x.push ? {
+ x : x[0] - y[0],
+ y : x[1] - y[1]
+ } : {
+ x : x.x - y.x,
+ y : x.y - y.y
+ };
+
+ x = line.x;
+ y = line.y;
+
+ };
+
+ let angle = Math.asin(y / ((x ** 2) + (y ** 2)) ** .5);
+
+ // if(x >= 0)
+ // angle += Math.PI / 2;
+ // else
+ // angle = (1.5 * Math.PI) - angle;
+
+ return (x >= 0 ? angle + (Math.PI / 2) : ((1.5 * Math.PI) - angle)) * (randians ? 1 : 180 / Math.PI);
+ };
+
+ const shadow = (data, context) => {
+
+ const z = dx < dy ? _x : _y;
+
+ if(!data.ok){
+ isNaN(data.x) && (data.x = settings(["shadow_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["shadow_y", "y"]));
+ !data.color && (data.color = settings(["shadow_color", "color"]));
+ isNaN(data.blur) && (data.blur = settings(["shadow_blur", "blur"]));
+ data.ok = true;
+ };
+
+ context.shadowOffsetX = z(data.x);
+ context.shadowOffsetY = z(data.y);
+ context.shadowColor = data.color;
+ context.shadowBlur = z(data.blur);
+
+ };
+
+ const border = (data, context) => {
+
+ if(!data.ok){
+ !data.color && (data.color = settings(["border_color", "color"]));
+ isNaN(data.width) && (data.width = settings(["border_width", "width"]));
+ data.ok = true;
+ };
+
+ context.strokeStyle = data.color;
+ context.lineWidth = (dx < dy ? _x : _y)(data.width);
+
+ };
+
+ const components = {
+ rotate : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ if(!data.ok){
+ isNaN(data.x) && (data.x = settings(["rotate_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["rotate_y", "y"]));
+ isNaN(data.degrees) && (data.degrees = settings(["rotate_degrees", "degrees"]));
+ data.ok = true;
+ };
+
+ // console.log(JSON.stringify(data));
+ // console.log(JSON.stringify([_x(data.x + mx), _y(data.y + my)]));
+
+ context.save();
+ context.translate(_x(data.x + o.mx), _y(data.y + o.my));
+ context.rotate(data.degrees * Math.PI / 180);
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ },
+ image : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ const draw_image = () => {
+
+ if(!data.ok){
+ isNaN(data.swidth) && (data.swidth = cache[data.cache_i].width);
+ isNaN(data.sheight) && (data.sheight = cache[data.cache_i].height);
+ isNaN(data.width) && (data.width = data.swidth);
+ isNaN(data.height) && (data.height = data.sheight);
+ isNaN(data.x) && (data.x = settings(["image_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["image_y", "y"]));
+ isNaN(data.alpha) && (data.alpha = settings(["image_alpha", "alpha"]));
+ isNaN(data.sx) && (data.sx = 0);
+ isNaN(data.sy) && (data.sy = 0);
+ isNaN(data.mx) && (data.mx = 0);
+ isNaN(data.my) && (data.my = 0);
+ data.ok = true;
+ };
+
+ const half_width = data.width / 2,
+ half_height = data.height / 2;
+
+ context.save();
+ context.globalAlpha = data.alpha;
+ context.translate(_x(o.mx + data.x + data.mx + half_width), _y(o.my + data.y + data.my + half_height));
+ context.rotate(data.rotate * Math.PI / 180);
+ context.drawImage(
+ cache[data.cache_i],
+ data.sx, data.sy, data.swidth, data.sheight,
+ _x(-half_width), _y(-half_height), _x(data.width), _y(data.height)
+ );
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ };
+
+ if(isNaN(data.cache_i)){
+
+ const i = get_new_cache_i(data);
+
+ cache[i] = new Image();
+ cache[i].src = data.source || data.image;
+ cache[i].crossOrigin = "anonymous";
+ cache[i].onload = draw_image;
+
+ }else
+ draw_image();
+
+ },
+ cache : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ context.save();
+
+ if(isNaN(data.cache_i)){
+
+ const cache_canvas = cache_container.appendChild(document.createElement("canvas")),
+ cache_context = cache_canvas.getContext("2d"),
+ width = data.width || canvas.width,
+ height = data.height || canvas.height;
+ image = new Image();
+
+ cache_canvas.width = width;
+ cache_canvas.height = height;
+
+ get_new_cache_i(data);
+ cache_context.save();
+ // cache_context.translate(_x(-o.mx), _y(-o.my));
+ draw(data.childs, cache_context, {mx : 0, my : 0});
+ image.src = cache_canvas.toDataURL("image/png");
+ cache[data.cache_i] = image;
+ cache_context.restore();
+
+ cache_canvas.remove();
+
+ };
+
+ context.drawImage(cache[data.cache_i], 0, 0);
+ context.restore();
+
+ },
+ rectangle : (data, context, kanvas, o) => {
+ if(data.ignore)return;
+
+ const proportion = canvas.width > canvas.height ? canvas.width / canvas.height : canvas.height / canvas.width;
+
+ if(!data.ok){
+ isNaN(data.alpha) && (data.alpha = settings(["rectangle_alpha", "alpha"]));
+ !data.color && (data.color = settings(["rectangle_color", "color"]));
+ isNaN(data.x) && (data.x = settings(["rectangle_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["rectangle_y", "y"]));
+ isNaN(data.width) && (data.width = proportion * c);
+ isNaN(data.height) && (data.height = proportion * c);
+ isNaN(data.mx) && (data.mx = 0);
+ isNaN(data.my) && (data.my = 0);
+ data.ok = true;
+ };
+
+ context.save();
+ data.shadow && (shadow(data.shadow, context));
+ context.globalAlpha = data.alpha;
+ context.fillStyle = data.color;
+ context.translate(_x(o.mx + data.x + data.mx), _y(o.my + data.y + data.my));
+ context.rotate(data.rotate * Math.PI / 180);
+ context.translate(_x(-data.mx), _y(-data.my));
+ context.fillRect(_x(data.x), _y(data.y), _x(data.width), _y(data.height));
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ },
+ text : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ if(!data.ok){
+ typeof data.italic != "boolean" && (data.italic = settings(["text_italic", "italic"]));
+ isNaN(data.bold) && typeof data.bold != "boolean" && (data.bold = settings(["text_bold", "bold"]));
+ isNaN(data.size) && (data.size = settings(["text_size", "size"]));
+ data.font && (data.font_family = data.font);
+ !data.font_family && (data.font_family = settings(["text_font_family", "text_font", "font"]));
+ !data.align && (data.align = settings(["text_align", "align"]));
+ isNaN(data.x) && (data.x = settings(["text_x", "x"]));
+ isNaN(data.y) && (data.y = settings(["text_y", "y"]));
+ !data.text && (data.text = "");
+ isNaN(data.alpha) && (data.alpha = settings(["text_alpha", "alpha"]));
+ !data.baseline && (data.baseline = settings(["text_baseline", "baseline"]));
+ data.ok = true;
+ };
+
+ context.save();
+ data.shadow && (shadow(data.shadow, context));
+ context.globalAlpha = data.alpha;
+ context.textAlign = data.align;
+ context.textBaseline = data.baseline;
+ context.font = (
+ (data.italic ? "italic " : "") +
+ (data.bold ? isNaN(data.bold) ? "bold " : data.bold + " " : "") +
+ (dx < dy ? _x : _y)(data.size) + "px " +
+ data.font_family
+ );
+ if(data.color){
+ context.fillStyle = data.color;
+ context.fillText(data.text, _x(data.x + mx), _y(data.y + my));
+ };
+ if(data.border){
+ border(data.border, context);
+ context.strokeText(data.text, _x(data.x + mx), _y(data.y + my));
+ };
+ context.restore();
+
+ },
+ block : (data, context, kanvas, o) => {
+ if(data.ignore)
+ return;
+
+ if(!data.ok){
+ isNaN(data.alpha) && (data.alpha = settings(["block_alpha", "alpha"]));
+ data.ok = true;
+ };
+
+ context.save();
+ context.globalAlpha = data.alpha;
+ draw(data.childs, context, {mx : 0, my : 0});
+ context.restore();
+
+ }
+ };
+
+ this.add_components = (json, overwrite) => {
+ if(!json)
+ return;
+
+ !json.push && (json = [json]);
+ typeof overwrite != "bool" && (overwrite = settings("overwrite"));
+
+ json.forEach((items) => {
+ if(!items)
+ return;
+ if(items.push)
+ self.add_components(items, overwrite);
+ else if(typeof items == "object")
+ for(let key in items)
+ (overwrite || !components[key]) && (components[key] = items[key]);
+ });
+
+ };
+
+ this.check_mouse = (item, event) => {
+
+ item_self.setAttribute("data-mouse-x", mouse.x = (event.clientX * q * qx / s) - mx);
+ item_self.setAttribute("data-mouse-y", mouse.y = (event.clientY * q * qy / s) - my);
+
+ execute_event("mouse_move");
+
+ };
+
+ const on_event = this.on_event = (name, method, range) => {
+
+ if(typeof method != "function")
+ return null;
+
+ !events[name] && (events[name] = {
+ methods : [],
+ l : 0,
+ ranges : []
+ });
+
+ let i = 0;
+
+ for(; i < events[name].l; i ++)
+ if(!events[name].methods[i])
+ break;
+
+ events[name].methods[i] = method;
+ events[name].ranges[i] = range;
+ events[name].l = events[name].methods.length;
+
+ return i;
+ };
+
+ const remove_event = this.remove_event = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l && events[name].methods[i] && (events[name].methods[i] = null);
+
+ const execute_event = this.execute_event = (name, input) => {
+
+ if(events[name] && events[name].l)
+ for(let i = 0; i < events[name].l; i ++)
+ events[name].methods[i] && events[name].methods[i](range_analyze(events[name].ranges[i]), input);
+
+ };
+
+ const event_range = this.event_range = (name, i) => events[name] && !isNaN(i) && i >= 0 && i < events[name].l ? events[name].ranges[i] : null;
+
+ this.on_mouse_move = (method, range) => on_event("mouse_move", method, range);
+ this.on_resize = (method, range) => on_event("resize", method, range);
+ this.on_click = (method, range) => on_event("click", method, range);
+ this.on_key_down = (method, range) => on_event("key_down", method, range);
+ this.on_key_up = (method, range) => on_event("key_up", method, range);
+
+ this.remove_mouse_move = i => {remove_event("mouse_move", i);};
+ this.remove_resize = i => {remove_event("resize", i);};
+ this.remove_click = i => {remove_event("click", i);};
+ this.remove_key_down = i => {remove_event("key_down", i);};
+ this.remove_key_up = i => {remove_event("key_up", i);};
+
+ this.range_mouse_move = i => event_range("mouse_move", i);
+ this.range_resize = i => event_range("resize", i);
+ this.range_click = i => event_range("click", i);
+ this.range_key_down = i => event_range("key_down", i);
+ this.range_key_up = i => event_range("key_up", i);
+
+ this.key_down = (item, event) => execute_event("key_down", {code : event.keyCode});
+ this.key_up = (item, event) => execute_event("key_up", {code : event.keyCode});
+
+ this.get_margins = () => {return {x : mx, y : my};};
+ this.get_position = () => {return {x : position.x, y : position.y};};
+ this.get_cells = () => c;
+ this.get_canvas_distance = () => {return {x : dx, y : dy};};
+ this.get_cell_size = () => s;
+
+ construct();
+
+};
diff --git a/Public/git_update.php b/Public/git_update.php
new file mode 100755
index 0000000..0879a28
--- /dev/null
+++ b/Public/git_update.php
@@ -0,0 +1,4 @@
+&1");
diff --git a/Public/images/kanvas-180.png b/Public/images/kanvas-180.png
new file mode 100755
index 0000000000000000000000000000000000000000..986d9ce1b2608831744ca5350bebaffc95d7f233
GIT binary patch
literal 27799
zcmeFYbyVC