+`;
+
+/**
+ * GUI class responsible for rendering selected layer details block on right sidebar
+ */
+class GUI_details_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Text = new Text_class();
+ this.Base_layers = new Base_layers_class();
+ this.Tools_settings = new Tools_settings_class();
+ this.Helper = new Helper_class();
+ this.layer_details_active = false;
+ this.Tools_translate = new Tools_translate_class();
+ this.aspect_locked = true; // Default to locked for image layers
+ this.aspect_ratio = 1; // Will be calculated from layer dimensions
+ }
+
+ render_main_details() {
+ document.getElementById('toggle_details').innerHTML = template;
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById('toggle_details'));
+ }
+ this.render_details(true);
+ }
+
+ render_details(events = false) {
+ this.render_general('x', events);
+ this.render_general('y', events);
+ this.render_general('width', events);
+ this.render_general('height', events);
+ this.render_aspect_lock(events);
+
+ this.render_general('rotate', events);
+ this.render_general('opacity', events);
+ this.render_color(events);
+ this.render_reset(events);
+
+ //text - special case
+ if (config.layer != undefined && config.layer.type == 'text') {
+ document.getElementById('text_detail_params').style.display = 'block';
+ document.getElementById('detail_color').closest('.row').style.display = 'none';
+ }
+ else{
+ document.getElementById('text_detail_params').style.display = 'none';
+
+ if (config.layer != undefined && (config.layer.color === null || config.layer.type == 'image')) {
+ //hide color
+ document.getElementById('detail_color').closest('.row').style.display = 'none';
+ }
+ else {
+ //show color
+ document.getElementById('detail_color').closest('.row').style.display = 'block';
+ }
+ }
+
+ //add params
+ this.render_more_parameters();
+
+ this.render_text(events);
+ this.render_general_select_param('boundary', events);
+ this.render_general_select_param('kerning', events);
+ this.render_general_select_param('text_direction', events);
+ this.render_general_select_param('wrap', events);
+ this.render_general_select_param('wrap_direction', events);
+ this.render_general_select_param('halign', events);
+ this.render_general_select_param('valign', events);
+ }
+
+ render_general(key, events) {
+ var layer = config.layer;
+ var _this = this;
+ var units = this.Tools_settings.get_setting('default_units');
+ var resolution = this.Tools_settings.get_setting('resolution');
+
+ if (layer != undefined) {
+ var target = document.getElementById('detail_' + key);
+ target.dataset.layer = layer.id;
+ if (layer[key] == null) {
+ target.value = '';
+ target.disabled = true;
+ }
+ else {
+ var value = layer[key];
+
+ if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
+ //convert units
+ value = this.Helper.get_user_unit(value, units, resolution);
+ }
+ else {
+ value = Math.round(value);
+ }
+
+ //set
+ target.value = value;
+ target.disabled = false;
+ }
+ }
+
+ if (events) {
+ //events
+ var target = document.getElementById('detail_' + key);
+ if(target == undefined){
+ console.log('Error: missing details event target ' + 'detail_' + key);
+ return;
+ }
+ let focus_value = null;
+ target.addEventListener('focus', function (e) {
+ focus_value = parseFloat(this.value);
+ });
+ target.addEventListener('blur', function (e) {
+ if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
+ //convert units
+ var value = _this.Helper.get_internal_unit(this.value, units, resolution);
+ }
+ else {
+ var value = parseInt(this.value);
+ }
+ var layer = _this.Base_layers.get_layer(e.target.dataset.layer);
+ layer[key] = focus_value;
+ if (focus_value !== value) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(layer.id, {
+ [key]: value
+ })
+ ])
+ );
+ }
+ });
+ target.addEventListener('change', function (e) {
+ if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
+ //convert units
+ var value = _this.Helper.get_internal_unit(this.value, units, resolution);
+ }
+ else {
+ var value = parseInt(this.value);
+ }
+
+ if(this.min != undefined && this.min != '' && value < this.min){
+ document.getElementById('detail_opacity').value = value;
+ value = this.min;
+ }
+ if(this.max != undefined && this.min != '' && value > this.max){
+ document.getElementById('detail_opacity').value = value;
+ value = this.max;
+ }
+
+ config.layer[key] = value;
+ config.need_render = true;
+ });
+ target.addEventListener('keyup', function (e) {
+ //for edge....
+ if (e.keyCode != 13) {
+ return;
+ }
+
+ if(key == 'x' || key == 'y' || key == 'width' || key == 'height'){
+ //convert units
+ var value = _this.Helper.get_internal_unit(this.value, units, resolution);
+ }
+ else {
+ var value = parseInt(this.value);
+ }
+
+ if(this.min != undefined && this.min != '' && value < this.min){
+ document.getElementById('detail_opacity').value = value;
+ value = this.min;
+ }
+ if(this.max != undefined && this.min != '' && value > this.max){
+ document.getElementById('detail_opacity').value = value;
+ value = this.max;
+ }
+
+ config.layer[key] = value;
+ config.need_render = true;
+ });
+ }
+ }
+
+ render_aspect_lock(events) {
+ var _this = this;
+ var layer = config.layer;
+ var lockBtn = document.getElementById('toggle_aspect_lock');
+
+ if (!lockBtn) return;
+
+ // Update aspect ratio from current layer dimensions
+ if (layer && layer.width && layer.height) {
+ this.aspect_ratio = layer.width / layer.height;
+ }
+
+ // Update button appearance based on lock state
+ if (this.aspect_locked) {
+ lockBtn.style.background = '#4a4';
+ lockBtn.title = 'Aspect Ratio Locked - Click to Unlock';
+ } else {
+ lockBtn.style.background = '';
+ lockBtn.title = 'Aspect Ratio Unlocked - Click to Lock';
+ }
+
+ if (events) {
+ lockBtn.addEventListener('click', function() {
+ _this.aspect_locked = !_this.aspect_locked;
+
+ // Update aspect ratio when locking
+ if (_this.aspect_locked && config.layer) {
+ _this.aspect_ratio = config.layer.width / config.layer.height;
+ }
+
+ _this.render_aspect_lock(false);
+ });
+
+ // Override width change to update height when locked
+ var widthInput = document.getElementById('detail_width');
+ var heightInput = document.getElementById('detail_height');
+
+ widthInput.addEventListener('input', function(e) {
+ if (_this.aspect_locked && config.layer) {
+ var units = _this.Tools_settings.get_setting('default_units');
+ var resolution = _this.Tools_settings.get_setting('resolution');
+ var newWidth = _this.Helper.get_internal_unit(this.value, units, resolution);
+ var newHeight = newWidth / _this.aspect_ratio;
+
+ heightInput.value = _this.Helper.get_user_unit(newHeight, units, resolution);
+ config.layer.height = newHeight;
+ }
+ });
+
+ heightInput.addEventListener('input', function(e) {
+ if (_this.aspect_locked && config.layer) {
+ var units = _this.Tools_settings.get_setting('default_units');
+ var resolution = _this.Tools_settings.get_setting('resolution');
+ var newHeight = _this.Helper.get_internal_unit(this.value, units, resolution);
+ var newWidth = newHeight * _this.aspect_ratio;
+
+ widthInput.value = _this.Helper.get_user_unit(newWidth, units, resolution);
+ config.layer.width = newWidth;
+ }
+ });
+ }
+ }
+
+ render_general_param(key, events) {
+ var layer = config.layer;
+
+ if (layer != undefined) {
+ var target = document.getElementById('detail_param_' + key);
+ if (layer.params[key] == null) {
+ target.value = '';
+ target.disabled = true;
+ }
+ else {
+ if (typeof layer.params[key] == 'boolean') {
+ //boolean
+ if(target.tagName == 'BUTTON'){
+ if(layer.params[key]){
+ target.classList.add('active');
+ }
+ else{
+ target.classList.remove('active');
+ }
+ }
+ }
+ else {
+ //common
+ target.value = layer.params[key];
+ }
+ target.disabled = false;
+ }
+ }
+
+ if (events) {
+ //events
+ var target = document.getElementById('detail_param_' + key);
+ let focus_value = null;
+ target.addEventListener('focus', function (e) {
+ focus_value = parseInt(this.value);
+ });
+ target.addEventListener('blur', function (e) {
+ var value = parseInt(this.value);
+ config.layer.params[key] = focus_value;
+ let params_copy = JSON.parse(JSON.stringify(config.layer.params));
+ params_copy[key] = value;
+ if (focus_value !== value) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ params: params_copy
+ })
+ ])
+ );
+ }
+ });
+ target.addEventListener('change', function (e) {
+ var value = parseInt(this.value);
+ config.layer.params[key] = value;
+ config.need_render = true;
+ config.need_render_changed_params = true;
+
+ });
+ target.addEventListener('click', function (e) {
+ if (typeof config.layer.params[key] != 'boolean')
+ return;
+ this.classList.toggle('active');
+ config.layer.params[key] = !config.layer.params[key];
+ config.need_render = true;
+ config.need_render_changed_params = true;
+ });
+ }
+ }
+
+ render_general_select_param(key, events){
+ var layer = config.layer;
+
+ if (layer != undefined) {
+ var target = document.getElementById('detail_param_' + key);
+
+ if (layer.params[key] == null) {
+ target.value = '';
+ target.disabled = true;
+ }
+ else {
+ if(typeof layer.params[key] == 'object')
+ target.value = layer.params[key].value; //legacy
+ else
+ target.value = layer.params[key];
+ target.disabled = false;
+ }
+ }
+
+ if (events) {
+ //events
+ var target = document.getElementById('detail_param_' + key);
+ let focus_value = null;
+ target.addEventListener('focus', function (e) {
+ focus_value = this.value;
+ });
+ target.addEventListener('blur', function (e) {
+ var value = this.value;
+ config.layer.params[key] = focus_value;
+ let params_copy = JSON.parse(JSON.stringify(config.layer.params));
+ params_copy[key] = value;
+ if (focus_value !== value) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ params: params_copy
+ })
+ ])
+ );
+ }
+ });
+ target.addEventListener('change', function (e) {
+ var value = this.value;
+ config.layer.params[key] = value;
+ config.need_render = true;
+ config.need_render_changed_params = true;
+ });
+ }
+ }
+
+ /**
+ * item: color
+ */
+ render_color(events) {
+ var layer = config.layer;
+
+ let $colorInput;
+ if (events) {
+ $colorInput = $(document.getElementById('detail_color')).uiColorInput();
+ } else {
+ $colorInput = $(document.getElementById('detail_color'));
+ }
+
+ if (layer != undefined) {
+ $colorInput.uiColorInput('set_value', layer.color);
+ }
+
+ if (events) {
+ //events
+ let focus_value = null;
+ $colorInput.on('focus', function (e) {
+ focus_value = $colorInput.uiColorInput('get_value');
+ });
+ $colorInput.on('change', function (e) {
+ const value = $colorInput.uiColorInput('get_value');
+ config.layer.color = focus_value;
+ if (focus_value !== value) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ color: value
+ })
+ ])
+ );
+ }
+ });
+ }
+ }
+
+ /**
+ * item: size reset button
+ */
+ render_reset(events) {
+ var layer = config.layer;
+
+ if (layer != undefined) {
+ //size
+ if (layer.width_original != null) {
+ document.getElementById('reset_size').classList.remove('hidden');
+ }
+ else {
+ document.getElementById('reset_size').classList.add('hidden');
+ }
+ }
+
+ if (events) {
+ //events
+ document.getElementById('reset_x').addEventListener('click', function (e) {
+ if (config.layer.x) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: 0
+ })
+ ])
+ );
+ }
+ });
+ document.getElementById('reset_y').addEventListener('click', function (e) {
+ if (config.layer.y) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ y: 0
+ })
+ ])
+ );
+ }
+ });
+ document.getElementById('reset_size').addEventListener('click', function (e) {
+ if (config.layer.width !== config.layer.width_original
+ || config.layer.height !== config.layer.height_original) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ width: config.layer.width_original,
+ height: config.layer.height_original
+ })
+ ])
+ );
+ }
+ });
+ document.getElementById('reset_rotate').addEventListener('click', function (e) {
+ if (config.layer.rotate) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ rotate: 0
+ })
+ ])
+ );
+ }
+ });
+ document.getElementById('reset_opacity').addEventListener('click', function (e) {
+ if (config.layer.opacity != 100) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_layer_details', 'Change Layer Details', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ opacity: 100
+ })
+ ])
+ );
+ }
+ });
+ }
+ }
+
+ /**
+ * item: text
+ */
+ render_text(events) {
+ if (events) {
+ //events
+ document.getElementById('detail_param_text').addEventListener('click', function (e) {
+ document.querySelector('#tools_container #text').click();
+ document.getElementById('text_tool_keyboard_input').focus();
+ config.need_render = true;
+ });
+ }
+ }
+
+ render_more_parameters() {
+ var _this = this;
+ var target_id = "parameters_container";
+ const itemContainer = document.getElementById(target_id);
+
+ if(this.layer_details_active == true){
+ return;
+ }
+
+ itemContainer.innerHTML = "";
+
+ if(!config.layer || typeof config.layer.params == 'undefined' || config.layer.type == 'text') {
+ return;
+ }
+
+ //find layer parameters settings
+ var params_config = null;
+ for (var i in config.TOOLS) {
+ if (config.TOOLS[i].name == config.layer.type) {
+ params_config = config.TOOLS[i];
+ }
+ }
+ if(params_config == null){
+ return;
+ }
+
+ for (var k in params_config.attributes) {
+ var item = params_config.attributes[k];
+
+ //hide some fields, in future name should start with underscore
+ if(params_config.name == 'rectangle' && k == 'square'
+ || params_config.name == 'ellipse' && k == 'circle'
+ || params_config.name == 'pencil' && k == 'pressure'
+ || params_config.name == 'pencil' && k == 'size'){
+ continue;
+ }
+
+ //row
+ let item_row = document.createElement('div');
+ item_row.className = 'row';
+ itemContainer.appendChild(item_row);
+
+ //title
+ var title = k[0].toUpperCase() + k.slice(1);
+ title = title.replace("_", " ");
+ let item_title = document.createElement('span');
+ item_title.className = 'trn label';
+ item_title.innerHTML = title;
+ item_row.appendChild(item_title);
+
+ //value
+ if (typeof item == 'boolean' || (typeof item == 'object' && typeof item.value == 'boolean')) {
+ //boolean - true, false
+
+ const elementInput = document.createElement('button');
+ elementInput.type = 'button';
+ elementInput.className = 'trn ui_toggle_button';
+ elementInput.innerHTML = title;
+
+ elementInput.dataset.key = k;
+ item_row.appendChild(elementInput);
+
+ let value = config.layer.params[k];
+ elementInput.setAttribute('aria-pressed', value);
+
+ //events
+ elementInput.addEventListener('click', function (e) {
+ //on leave
+ let layer = config.layer;
+ let key = this.dataset.key;
+ let new_value = elementInput.getAttribute('aria-pressed') !== 'true';
+ let params = JSON.parse(JSON.stringify(config.layer.params));
+ params[key] = new_value;
+
+ app.State.do_action(
+ new app.Actions.Update_layer_action(layer.id, {
+ params: params
+ })
+ );
+ });
+ }
+ else if (typeof item == 'number' || (typeof item == 'object' && typeof item.value == 'number')) {
+ //numbers
+
+ const elementInput = document.createElement('input');
+ elementInput.type = 'number';
+ elementInput.dataset.key = k;
+ item_row.appendChild(elementInput);
+
+ let min = 1;
+ let max = k === 'power' ? 100 : 999;
+ let step = null;
+ let value = config.layer.params[k];
+ if (typeof item == 'object') {
+ value = item.value;
+ if (item.min != null) {
+ min = item.min;
+ }
+ if (item.max != null) {
+ max = item.max;
+ }
+ if (item.step != null) {
+ step = item.step;
+ }
+ }
+ elementInput.setAttribute('min', min);
+ elementInput.setAttribute('max', max);
+ if (item.step != null) {
+ elementInput.setAttribute('step', step);
+ }
+ elementInput.setAttribute('value', config.layer.params[k]);
+
+ //events
+ let focus_value = null;
+ elementInput.addEventListener('focus', function (e) {
+ focus_value = parseFloat(this.value);
+ _this.layer_details_active = true;
+ });
+ elementInput.addEventListener('blur', function (e) {
+ //on leave
+ _this.layer_details_active = false;
+ let layer = config.layer;
+ let key = this.dataset.key;
+ let new_value = parseInt(this.value);
+ let params = JSON.parse(JSON.stringify(config.layer.params));
+ params[key] = new_value;
+
+ if (focus_value !== new_value) {
+ app.State.do_action(
+ new app.Actions.Update_layer_action(layer.id, {
+ params: params
+ })
+ );
+ }
+ });
+ elementInput.addEventListener('change', function (e) {
+ //on change - lots of events here in short time
+ let key = this.dataset.key;
+ let new_value = parseInt(this.value);
+
+ config.layer.params[key] = new_value;
+ config.need_render = true;
+ });
+ }
+ else if (typeof item == 'string' && item[0] == '#') {
+ //color
+
+ var elementInput = document.createElement('input');
+ elementInput.type = 'color';
+ let focus_value = null;
+ const $colorInput = $(elementInput).uiColorInput({
+ id: k,
+ value: item
+ })
+ .on('change', () => {
+ let layer = config.layer;
+ let key = $colorInput.uiColorInput('get_id');
+ let new_value = $colorInput.uiColorInput('get_value');
+ let params = JSON.parse(JSON.stringify(config.layer.params));
+ params[key] = new_value;
+
+ app.State.do_action(
+ new app.Actions.Update_layer_action(layer.id, {
+ params: params
+ })
+ );
+ });
+ $colorInput.uiColorInput('set_value', config.layer.params[k]);
+
+ item_row.appendChild($colorInput[0]);
+ }
+ else {
+ alertify.error('Error: unsupported attribute type:' + typeof item + ', ' + k);
+ }
+ }
+ }
+
+}
+
+export default GUI_details_class;
diff --git a/paintplus/frontend/src/js/core/gui/gui-information.js b/paintplus/frontend/src/js/core/gui/gui-information.js
new file mode 100644
index 0000000..a9bf7ab
--- /dev/null
+++ b/paintplus/frontend/src/js/core/gui/gui-information.js
@@ -0,0 +1,105 @@
+/*
+ * miniPaint - https://github.com/viliusle/miniPaint
+ * author: Vilius L.
+ */
+
+import config from './../../config.js';
+import Base_layers_class from './../base-layers.js';
+import Tools_settings_class from './../../modules/tools/settings.js';
+import Helper_class from './../../libs/helpers.js';
+import Tools_translate_class from './../../modules/tools/translate.js';
+
+var template = `
+
Size:
+
-
+
+
+
Mouse:
+
-
+
+
+
Resolution:
+
-
+`;
+
+/**
+ * GUI class responsible for rendering information block on right sidebar
+ */
+class GUI_information_class {
+
+ constructor(ctx) {
+ this.Base_layers = new Base_layers_class();
+ this.Tools_settings = new Tools_settings_class();
+ this.Helper = new Helper_class();
+ this.Tools_translate = new Tools_translate_class();
+ this.last_width = null;
+ this.last_height = null;
+ this.units = this.Tools_settings.get_setting('default_units');
+ this.resolution = this.Tools_settings.get_setting('resolution');
+ }
+
+ render_main_information() {
+ document.getElementById('toggle_info').innerHTML = template;
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById('toggle_info'));
+ }
+ this.set_events();
+ this.show_size();
+ }
+
+ set_events() {
+ var _this = this;
+ var target = document.getElementById('mouse_info_mouse');
+
+ //show width and height
+ //should use canvas resize API in future
+ document.addEventListener('mousemove', function (e) {
+ _this.show_size();
+ }, false);
+
+ //show current mouse position
+ document.getElementById('canvas_minipaint').addEventListener('mousemove', function (e) {
+ var global_pos = _this.Base_layers.get_world_coords(e.offsetX, e.offsetY);
+ var mouse_x = Math.ceil(global_pos.x);
+ var mouse_y = Math.ceil(global_pos.y);
+
+ mouse_x = _this.Helper.get_user_unit(mouse_x, _this.units, _this.resolution);
+ mouse_y = _this.Helper.get_user_unit(mouse_y, _this.units, _this.resolution);
+
+ target.innerHTML = mouse_x + ', ' + mouse_y;
+ }, false);
+ }
+
+ update_units(){
+ this.units = this.Tools_settings.get_setting('default_units');
+ this.resolution = this.Tools_settings.get_setting('resolution');
+ this.show_size(true);
+ }
+
+ show_size(force) {
+ if(force == undefined && this.last_width == config.WIDTH && this.last_height == config.HEIGHT) {
+ return;
+ }
+
+ var width = this.Helper.get_user_unit(config.WIDTH, this.units, this.resolution);
+ var height = this.Helper.get_user_unit(config.HEIGHT, this.units, this.resolution);
+
+ document.getElementById('mouse_info_size').innerHTML = width + ' x ' + height;
+
+ var resolution = this.Tools_settings.get_setting('resolution');
+ document.getElementById('mouse_info_resolution').innerHTML = resolution;
+
+ //show units
+ var default_units = this.Tools_settings.get_setting('default_units_short');
+ var targets = document.querySelectorAll('.id-mouse_info_units');
+ for (var i = 0; i < targets.length; i++) {
+ targets[i].innerHTML = default_units;
+ }
+
+ this.last_width = config.WIDTH;
+ this.last_height = config.HEIGHT;
+ }
+
+}
+
+export default GUI_information_class;
diff --git a/paintplus/frontend/src/js/core/gui/gui-layers.js b/paintplus/frontend/src/js/core/gui/gui-layers.js
new file mode 100644
index 0000000..b00cdf2
--- /dev/null
+++ b/paintplus/frontend/src/js/core/gui/gui-layers.js
@@ -0,0 +1,341 @@
+/*
+ * miniPaint - https://github.com/viliusle/miniPaint
+ * author: Vilius L.
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../base-layers.js';
+import Helper_class from './../../libs/helpers.js';
+import Layer_rename_class from './../../modules/layer/rename.js';
+import Effects_browser_class from './../../modules/effects/browser.js';
+import Layer_duplicate_class from './../../modules/layer/duplicate.js';
+import Layer_raster_class from './../../modules/layer/raster.js';
+import Layer_scale_class from './../../modules/layer/scale.js';
+import Layer_merge_class from './../../modules/layer/merge.js';
+import Layer_flatten_class from './../../modules/layer/flatten.js';
+import Tools_translate_class from './../../modules/tools/translate.js';
+
+var template = `
+
+
+
D
+
R
+
S
+
+
↓
+
↑
+
+
+
+`;
+
+/**
+ * GUI class responsible for rendering layers on right sidebar
+ */
+class GUI_layers_class {
+
+ constructor(ctx) {
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.Layer_rename = new Layer_rename_class();
+ this.Effects_browser = new Effects_browser_class();
+ this.Layer_duplicate = new Layer_duplicate_class();
+ this.Layer_raster = new Layer_raster_class();
+ this.Layer_scale = new Layer_scale_class();
+ this.Layer_merge = new Layer_merge_class();
+ this.Layer_flatten = new Layer_flatten_class();
+ this.Tools_translate = new Tools_translate_class();
+ this.contextMenuLayerId = null;
+ }
+
+ render_main_layers() {
+ document.getElementById('layers_base').innerHTML = template;
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById('layers_base'));
+ }
+ this.render_layers();
+ this.set_events();
+ }
+
+ set_events() {
+ var _this = this;
+
+ document.getElementById('layers_base').addEventListener('click', function (event) {
+ var target = event.target;
+ if (target.id == 'insert_layer') {
+ //new layer
+ app.State.do_action(
+ new app.Actions.Insert_layer_action()
+ );
+ }
+ else if (target.id == 'layer_duplicate') {
+ //duplicate
+ _this.Layer_duplicate.duplicate();
+ }
+ else if (target.id == 'layer_raster') {
+ //raster
+ _this.Layer_raster.raster();
+ }
+ else if (target.id == 'layer_scale') {
+ //scale
+ _this.Layer_scale.scale();
+ }
+ else if (target.id == 'layer_up') {
+ //move layer up
+ app.State.do_action(
+ new app.Actions.Reorder_layer_action(config.layer.id, 1)
+ );
+ }
+ else if (target.id == 'layer_down') {
+ //move layer down
+ app.State.do_action(
+ new app.Actions.Reorder_layer_action(config.layer.id, -1)
+ );
+ }
+ else if (target.id == 'visibility') {
+ //change visibility
+ return app.State.do_action(
+ new app.Actions.Toggle_layer_visibility_action(target.dataset.id)
+ );
+ }
+ else if (target.id == 'delete') {
+ //delete layer
+ app.State.do_action(
+ new app.Actions.Delete_layer_action(target.dataset.id)
+ );
+ }
+ else if (target.id == 'layer_name') {
+ //select layer
+ if (target.dataset.id == config.layer.id)
+ return;
+ app.State.do_action(
+ new app.Actions.Select_layer_action(target.dataset.id)
+ );
+ }
+ else if (target.id == 'delete_filter') {
+ //delete filter
+ app.State.do_action(
+ new app.Actions.Delete_layer_filter_action(target.dataset.pid, target.dataset.id)
+ );
+ }
+ else if (target.id == 'filter_name') {
+ //edit filter
+ var effects = _this.Effects_browser.get_effects_list();
+ var key = target.dataset.filter.toLowerCase();
+ for (var i in effects) {
+ if(effects[i].title.toLowerCase() == key){
+ _this.Base_layers.select(target.dataset.pid);
+ var function_name = _this.Effects_browser.get_function_from_path(key);
+ effects[i].object[function_name](target.dataset.id);
+ }
+ }
+ }
+ });
+
+ document.getElementById('layers_base').addEventListener('dblclick', function (event) {
+ var target = event.target;
+ if (target.id == 'layer_name') {
+ //rename layer
+ _this.Layer_rename.rename(target.dataset.id);
+ }
+ });
+
+ // Right-click context menu for layers
+ document.getElementById('layers_base').addEventListener('contextmenu', function (event) {
+ var target = event.target;
+
+ // Check if right-clicked on a layer item
+ if (target.id == 'layer_name' || target.closest('.item')) {
+ event.preventDefault();
+
+ var layerId = target.dataset.id || target.closest('.item').querySelector('[data-id]').dataset.id;
+ _this.showContextMenu(event.clientX, event.clientY, layerId);
+ }
+ });
+
+ // Hide context menu when clicking elsewhere
+ document.addEventListener('click', function (event) {
+ _this.hideContextMenu();
+ });
+
+ }
+
+ /**
+ * Show context menu for layer
+ */
+ showContextMenu(x, y, layerId) {
+ var _this = this;
+ this.contextMenuLayerId = layerId;
+
+ // Select the layer first
+ if (layerId != config.layer.id) {
+ app.State.do_action(
+ new app.Actions.Select_layer_action(layerId)
+ );
+ }
+
+ var menuItems = [
+ { label: 'Rename', action: 'rename' },
+ { label: 'Duplicate', action: 'duplicate' },
+ { label: 'Delete', action: 'delete' },
+ { label: '---' },
+ { label: 'Move Up', action: 'move_up' },
+ { label: 'Move Down', action: 'move_down' },
+ { label: '---' },
+ { label: 'Scale Layer...', action: 'scale' },
+ { label: 'Convert to Raster', action: 'raster' },
+ { label: '---' },
+ { label: 'Merge Down', action: 'merge' },
+ { label: 'Flatten All', action: 'flatten' },
+ ];
+
+ var menu = document.getElementById('layer_context_menu');
+ var html = '';
+ menu.innerHTML = html;
+ menu.style.display = 'block';
+ menu.style.left = x + 'px';
+ menu.style.top = y + 'px';
+
+ // Add click handlers to menu items
+ menu.querySelectorAll('li[data-action]').forEach(function(item) {
+ item.addEventListener('click', function(e) {
+ e.stopPropagation();
+ _this.handleContextMenuAction(this.dataset.action);
+ _this.hideContextMenu();
+ });
+ });
+ }
+
+ /**
+ * Hide context menu
+ */
+ hideContextMenu() {
+ var menu = document.getElementById('layer_context_menu');
+ if (menu) {
+ menu.style.display = 'none';
+ }
+ }
+
+ /**
+ * Handle context menu action
+ */
+ handleContextMenuAction(action) {
+ var layerId = this.contextMenuLayerId;
+
+ switch (action) {
+ case 'rename':
+ this.Layer_rename.rename(layerId);
+ break;
+ case 'duplicate':
+ this.Layer_duplicate.duplicate();
+ break;
+ case 'delete':
+ app.State.do_action(
+ new app.Actions.Delete_layer_action(layerId)
+ );
+ break;
+ case 'move_up':
+ app.State.do_action(
+ new app.Actions.Reorder_layer_action(layerId, 1)
+ );
+ break;
+ case 'move_down':
+ app.State.do_action(
+ new app.Actions.Reorder_layer_action(layerId, -1)
+ );
+ break;
+ case 'scale':
+ this.Layer_scale.scale();
+ break;
+ case 'raster':
+ this.Layer_raster.raster();
+ break;
+ case 'merge':
+ this.Layer_merge.merge();
+ break;
+ case 'flatten':
+ this.Layer_flatten.flatten();
+ break;
+ }
+ }
+
+ /**
+ * renders layers list
+ */
+ render_layers() {
+ var target_id = 'layers';
+ var layers = config.layers.concat().sort(
+ //sort function
+ (a, b) => b.order - a.order
+ );
+
+ document.getElementById(target_id).innerHTML = '';
+ var html = '';
+
+ if (config.layer) {
+ for (var i in layers) {
+ var value = layers[i];
+ var class_extra = '';
+ if(value.composition === 'source-atop'){
+ class_extra += ' shorter';
+ }
+ if (value.id == config.layer.id){
+ class_extra += ' active';
+ }
+
+ html += '';
+
+ //show filters
+ if (layers[i].filters.length > 0) {
+ html += '
';
+ for (var j in layers[i].filters) {
+ var filter = layers[i].filters[j];
+ var title = this.Helper.ucfirst(filter.name);
+ title = title.replace(/-/g, ' ');
+
+ html += '
';
+ html += '
';
+ html += '
' + title + ' ';
+ html += '
';
+ html += '
';
+ }
+ html += '
';
+ }
+ }
+ }
+
+ //register
+ document.getElementById(target_id).innerHTML = html;
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, document.getElementById(target_id));
+ }
+ }
+}
+
+export default GUI_layers_class;
diff --git a/paintplus/frontend/src/js/core/gui/gui-menu.js b/paintplus/frontend/src/js/core/gui/gui-menu.js
new file mode 100644
index 0000000..f831c4c
--- /dev/null
+++ b/paintplus/frontend/src/js/core/gui/gui-menu.js
@@ -0,0 +1,419 @@
+/*
+ * miniPaint - https://github.com/viliusle/miniPaint
+ * author: Vilius L.
+ */
+
+import config from './../../config.js';
+import menuDefinition from './../../config-menu.js';
+import Tools_translate_class from './../../modules/tools/translate.js';
+
+/**
+ * class responsible for rendering main menu
+ */
+class GUI_menu_class {
+
+ constructor() {
+ this.eventSubscriptions = {};
+ this.dropdownMaxHeightMargin = 15;
+ this.menuContainer = null;
+ this.menuBarNode = null;
+ this.lastFocusedMenuBarLink = 0;
+ this.dropdownStack = [];
+
+ this.Tools_translate = new Tools_translate_class();
+ }
+
+ render_main() {
+ this.menuContainer = document.getElementById('main_menu');
+
+ let menuTemplate = '';
+
+ this.menuContainer.innerHTML = menuTemplate;
+ this.menuBarNode = this.menuContainer.querySelector('[role="menubar"]');
+
+ this.menuContainer.addEventListener('click', (event) => { return this.on_click_menu(event); }, true);
+ this.menuContainer.addEventListener('keydown', (event) => { return this.on_key_down_menu(event); }, true);
+ this.menuBarNode.addEventListener('focus', (event) => { return this.on_focus_menu_bar(event); });
+ this.menuBarNode.addEventListener('blur', (event) => { return this.on_blur_menu_bar(event); });
+ this.menuBarNode.querySelectorAll('a').forEach((link) => {
+ link.addEventListener('focus', (event) => { return this.on_focus_menu_bar_link(event); });
+ });
+ document.body.addEventListener('mousedown', (event) => { return this.on_mouse_down_body(event); }, true);
+ document.body.addEventListener('touchstart', (event) => { return this.on_mouse_down_body(event); }, true);
+ window.addEventListener('resize', (event) => { return this.on_resize_window(event); }, true);
+
+ document.body.classList.add('loaded');
+
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, this.menuContainer);
+ }
+ }
+
+ on(eventName, callback) {
+ if (!this.eventSubscriptions[eventName]) {
+ this.eventSubscriptions[eventName] = [];
+ }
+ if (!this.eventSubscriptions[eventName].includes(callback)) {
+ this.eventSubscriptions[eventName].push(callback);
+ }
+ }
+
+ emit(eventName, payload, object) {
+ if (this.eventSubscriptions[eventName]) {
+ for (let callback of this.eventSubscriptions[eventName]) {
+ callback(payload, object);
+ }
+ }
+ }
+
+ generate_menu_bar_item_template(definition, index) {
+ return `
+
+ ${ definition.name }
+ `.trim();
+ }
+
+ generate_menu_dropdown_item_template(definition, level, index) {
+ if (definition.divider) {
+ return `
+
+
+ `.trim();
+ } else {
+ return `
+
+
+ ${ definition.name } ${ definition.ellipsis ? ' ...' : '' }Shortcut Key: ${ definition.shortcut }
+
+ `.trim();
+ }
+ }
+
+ on_mouse_down_body(event) {
+ const target = event.touches && event.touches.length > 0 ? event.touches[0].target : event.target;
+
+ // Clicked outside of menu; close dropdowns.
+ if (target && !this.menuContainer.contains(target)) {
+ this.close_child_dropdowns(0);
+ }
+ }
+
+ on_focus_menu_bar(event) {
+ if (document.activeElement === this.menuBarNode) {
+ let lastFocusedLink = this.menuBarNode.querySelector(`[data-index="${ this.lastFocusedMenuBarLink }"]`);
+ if (!lastFocusedLink) {
+ lastFocusedLink = this.menuBarNode.querySelector('a');
+ }
+ lastFocusedLink.focus();
+ }
+ }
+
+ on_focus_menu_bar_link(event) {
+ this.lastFocusedMenuBarLink = parseInt(event.target.getAttribute('data-index'), 10) || 0;
+ }
+
+ on_blur_menu_bar(event) {
+ // TODO
+ }
+
+ on_key_down_menu(event) {
+ const key = event.key;
+ const activeElement = document.activeElement;
+
+ if (activeElement && activeElement.tagName === 'A') {
+ const linkLevel = parseInt(activeElement.getAttribute('data-level'), 10) || 0;
+ const linkIndex = parseInt(activeElement.getAttribute('data-index'), 10) || 0;
+ const menuParent = activeElement.closest('ul');
+ if (linkLevel === 0) {
+ if (['Right', 'ArrowRight'].includes(event.key)) {
+ let nextLink = menuParent.querySelector(`[data-index="${ linkIndex + 1 }"]`);
+ if (!nextLink) {
+ nextLink = menuParent.querySelector(`[data-index="0"]`);
+ }
+ nextLink.focus();
+ }
+ else if (['Left', 'ArrowLeft'].includes(event.key)) {
+ let previousLink = menuParent.querySelector(`[data-index="${ linkIndex - 1 }"]`);
+ if (!previousLink) {
+ previousLink = menuParent.querySelector(`[data-index="${ menuParent.querySelectorAll('[data-index]').length - 1 }"]`);
+ }
+ previousLink.focus();
+ }
+ else if (['Down', 'ArrowDown'].includes(event.key)) {
+ if (activeElement.getAttribute('aria-haspopup') === 'true') {
+ event.preventDefault();
+ activeElement.click();
+ }
+ }
+ else if (event.key === 'Home') {
+ menuParent.querySelector(`[data-index="0"]`).focus();
+ }
+ else if (event.key === 'End') {
+ menuParent.querySelector(`[data-index="${ menuParent.querySelectorAll('[data-index]').length - 1 }"]`).focus();
+ }
+ else if ([' ', 'Enter'].includes(event.key)) {
+ event.preventDefault();
+ activeElement.click();
+ }
+ } else {
+ if (['Up', 'ArrowUp'].includes(event.key)) {
+ event.preventDefault();
+ let previousLink = menuParent.querySelector(`[data-index="${ linkIndex - 1 }"]`);
+ if (!previousLink) {
+ previousLink = menuParent.querySelector(`[data-index="${ linkIndex - 2 }"]`); // Skip dividers
+ }
+ if (!previousLink) {
+ previousLink = menuParent.querySelector(`[data-index="${ this.dropdownStack[linkLevel - 1].children.length - 1 }"]`);
+ }
+ previousLink.focus();
+ }
+ else if (['Down', 'ArrowDown'].includes(event.key)) {
+ event.preventDefault();
+ let nextLink = menuParent.querySelector(`[data-index="${ linkIndex + 1 }"]`);
+ if (!nextLink) {
+ nextLink = menuParent.querySelector(`[data-index="${ linkIndex + 2 }"]`); // Skip dividers
+ }
+ if (!nextLink) {
+ nextLink = menuParent.querySelector(`[data-index="0"]`);
+ }
+ nextLink.focus();
+ }
+ else if (['Right', 'ArrowRight'].includes(event.key)) {
+ if (activeElement.getAttribute('aria-haspopup') === 'true') {
+ activeElement.click();
+ }
+ else if (this.dropdownStack.length > 1) {
+ const opener = this.dropdownStack[linkLevel - 1].opener;
+ opener.click();
+ opener.focus();
+ }
+ else {
+ const menuBarLinkIndex = parseInt(this.dropdownStack[0].opener.getAttribute('data-index'), 10) || 0;
+ let nextLink = this.menuBarNode.querySelector(`[data-index="${ menuBarLinkIndex + 1 }"]`);
+ if (!nextLink) {
+ nextLink = this.menuBarNode.querySelector(`[data-index="0"]`);
+ }
+ nextLink.click();
+ }
+ }
+ else if (['Left', 'ArrowLeft'].includes(event.key)) {
+ if (this.dropdownStack.length > 1) {
+ const opener = this.dropdownStack[linkLevel - 1].opener;
+ opener.click();
+ opener.focus();
+ } else {
+ const menuBarLinkIndex = parseInt(this.dropdownStack[0].opener.getAttribute('data-index'), 10) || 0;
+ let previousLink = this.menuBarNode.querySelector(`[data-index="${ menuBarLinkIndex - 1 }"]`);
+ if (!previousLink) {
+ previousLink = this.menuBarNode.querySelector(`[data-index="${ this.menuBarNode.querySelectorAll('[data-index]').length - 1 }"]`);
+ }
+ previousLink.click();
+ }
+ }
+ else if (event.key === 'Home') {
+ menuParent.querySelector(`[data-index="0"]`).focus();
+ }
+ else if (event.key === 'End') {
+ menuParent.querySelector(`[data-index="${ this.dropdownStack[linkLevel - 1].children.length - 1 }"]`).focus();
+ }
+ else if ([' ', 'Enter'].includes(event.key)) {
+ event.preventDefault();
+ activeElement.click();
+ }
+ else if (['Esc', 'Escape'].includes(event.key)) {
+ const opener = this.dropdownStack[linkLevel - 1].opener;
+ opener.click();
+ opener.focus();
+ }
+ else if (event.key === 'Tab') {
+ this.close_child_dropdowns(0);
+ }
+ }
+ }
+ }
+
+ on_click_menu(event) {
+ const target = event.target.closest('a');
+
+ // Any link in the menu is clicked.
+ if (target && target.tagName === 'A') {
+ const hasPopup = target.getAttribute('aria-haspopup') === 'true';
+ if (hasPopup) {
+ this.toggle_dropdown(target, event.isTrusted);
+ } else {
+ this.trigger_link(target);
+ }
+ } else {
+ this.close_child_dropdowns(0);
+ }
+ }
+
+ on_resize_window(event) {
+ if (this.dropdownStack.length > 0) {
+ this.position_dropdowns();
+ }
+ }
+
+ toggle_dropdown(opener, isTrusted) {
+ const linkLevel = parseInt(opener.getAttribute('data-level'), 10) || 0;
+ const linkIndex = parseInt(opener.getAttribute('data-index'), 10) || 0;
+ if (opener.getAttribute('aria-expanded') === 'true') {
+ this.close_child_dropdowns(linkLevel);
+ } else {
+ const parentList = opener.closest('ul');
+ parentList.querySelectorAll('a').forEach((item) => {
+ item.setAttribute('aria-expanded', 'false');
+ });
+ opener.setAttribute('aria-expanded', true);
+ this.create_dropdown(opener, linkLevel, linkIndex, !isTrusted);
+ }
+ }
+
+ trigger_link(link) {
+ const level = parseInt(link.getAttribute('data-level'), 10) || 0;
+ const index = parseInt(link.getAttribute('data-index'), 10) || 0;
+
+ // Find link definition
+ let children = menuDefinition;
+ for (let i = 0; i < level; i++) {
+ const childIndex = this.dropdownStack[i] != null ? this.dropdownStack[i].index : index;
+ children = children[childIndex].children;
+ }
+ let definition = children[index];
+
+ // Close the dropdown
+ this.close_child_dropdowns(0);
+
+ // Emit callback events for triggered links
+ if (definition.target) {
+ this.emit('select_target', definition.target, definition);
+ }
+ else if (definition.href) {
+ this.emit('select_href', definition.href, null);
+ }
+ }
+
+ close_child_dropdowns(level) {
+ for (let i = this.dropdownStack.length - 1; i >= 0; i--) {
+ if (i >= level) {
+ this.dropdownStack[i].element.parentNode.removeChild(this.dropdownStack[i].element);
+ this.dropdownStack[i].opener.setAttribute('aria-expanded', false);
+ }
+ }
+ this.dropdownStack = this.dropdownStack.slice(0, level);
+ }
+
+ create_dropdown(opener, level, index, focusAfterCreation) {
+ this.close_child_dropdowns(level);
+
+ // Find child list in the menu definition
+ let children = menuDefinition;
+ for (let i = 0; i <= level; i++) {
+ const childIndex = this.dropdownStack[i] != null ? this.dropdownStack[i].index : index;
+ children = children[childIndex].children;
+ }
+
+ // Create the dropdown element, place it in DOM & position it
+ let dropdownElement = document.createElement('ul');
+ dropdownElement.className = 'menu_dropdown';
+ dropdownElement.role = 'menu';
+ dropdownElement.tabIndex = 0;
+ dropdownElement.setAttribute('aria-labelledby', 'main_menu_' + level + '_' + index);
+ let dropdownTemplate = '';
+ for (let i = 0; i < children.length; i++) {
+ dropdownTemplate += this.generate_menu_dropdown_item_template(children[i], level + 1, i);
+ }
+ dropdownElement.innerHTML = dropdownTemplate;
+
+ this.menuContainer.appendChild(dropdownElement);
+
+ if (config.LANG != 'en') {
+ this.Tools_translate.translate(config.LANG, this.menuContainer);
+ }
+
+ if (focusAfterCreation) {
+ dropdownElement.querySelector('a').focus();
+ }
+
+ this.dropdownStack.push({
+ children,
+ opener,
+ index,
+ element: dropdownElement
+ });
+
+ this.position_dropdowns();
+ }
+
+ position_dropdowns() {
+ const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+ const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+
+ let topNavHeight = 0;
+ for (let level = 0; level < this.dropdownStack.length; level++) {
+ const dropdownElement = this.dropdownStack[level].element;
+ const openerRect = this.dropdownStack[level].opener.getBoundingClientRect();
+
+ topNavHeight = openerRect.height;
+ const dropdownMaxHeight = vh - topNavHeight - this.dropdownMaxHeightMargin;
+ dropdownElement.style.maxHeight = dropdownMaxHeight + 'px';
+ const dropdownRect = dropdownElement.getBoundingClientRect();
+
+ if (level === 0) {
+ dropdownElement.style.top = (openerRect.y + openerRect.height) + 'px';
+
+ let left = openerRect.x;
+ if (left + dropdownRect.width > vw) {
+ left = openerRect.x + openerRect.width - dropdownRect.width;
+ }
+ if (left + dropdownRect.width > vw) {
+ left = vw - dropdownRect.width;
+ }
+ if (left < 0) {
+ left = 0;
+ }
+ dropdownElement.style.left = left + 'px';
+ } else {
+ let top = openerRect.y;
+ if (top + dropdownRect.height > vh - this.dropdownMaxHeightMargin) {
+ top = vh - this.dropdownMaxHeightMargin - dropdownRect.height;
+ }
+ dropdownElement.style.top = top + 'px';
+
+ let left = openerRect.x + openerRect.width + 1;
+ if (left + dropdownRect.width > vw) {
+ left = openerRect.x - dropdownRect.width - 1;
+ }
+ if (left < 0) {
+ if (openerRect.x + (openerRect.width / 2) > vw / 2) {
+ left = 1;
+ } else {
+ left = vw - dropdownRect.width - 1;
+ if (left < 0) {
+ left = 1;
+ }
+ }
+ }
+ dropdownElement.style.left = left + 'px';
+ }
+ }
+ }
+
+}
+
+export default GUI_menu_class;
diff --git a/paintplus/frontend/src/js/core/gui/gui-preview.js b/paintplus/frontend/src/js/core/gui/gui-preview.js
new file mode 100644
index 0000000..8316da3
--- /dev/null
+++ b/paintplus/frontend/src/js/core/gui/gui-preview.js
@@ -0,0 +1,352 @@
+/*
+ * miniPaint - https://github.com/viliusle/miniPaint
+ * author: Vilius L.
+ */
+
+import config from './../../config.js';
+import Base_layers_class from './../base-layers.js';
+
+var instance = null;
+
+var template = `
+
+
+
+ -
+ 100%
+ +
+ Fit
+
+
+
+`;
+
+/**
+ * GUI class responsible for rendering preview on right sidebar
+ */
+class GUI_preview_class {
+
+ constructor(GUI_class) {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+ document.getElementById('toggle_preview').innerHTML = template;
+
+ // preview mini window size on right sidebar
+ this.PREVIEW_SIZE = {w: 176, h: 100};
+
+ this.canvas_offset = {x: 0, y: 0};
+
+ this.zoom_data = {
+ x: 0,
+ y: 0,
+ move_pos: null,
+ };
+
+ this.mouse_pressed = false;
+ this.canvas_preview = null;
+ if (GUI_class != undefined) {
+ this.GUI = GUI_class;
+ }
+ this.Base_layers = new Base_layers_class();
+ }
+
+ render_main_preview() {
+ this.canvas_preview = document.getElementById("canvas_preview")
+ .getContext("2d");
+
+ this.prepare_canvas();
+ config.need_render = true;
+ this.set_events();
+ }
+
+ set_events() {
+ var _this = this;
+ var is_touch = false;
+
+ document.addEventListener('mousedown', function (e) {
+ _this.mouse_pressed = true;
+ }, false);
+ document.addEventListener('mouseup', function (e) {
+ _this.mouse_pressed = false;
+ }, false);
+ document.addEventListener('touchstart', function (e) {
+ _this.mouse_pressed = true;
+ }, false);
+ document.addEventListener('touchend', function (e) {
+ _this.mouse_pressed = false;
+ }, false);
+ document.getElementById('zoom_range').addEventListener('input', function (e) {
+ _this.set_center_zoom();
+ _this.zoom(this.value);
+ }, false);
+ document.getElementById('zoom_range').addEventListener('change', function (e) {
+ //IE11
+ if (this.value != config.ZOOM * 100) {
+ _this.set_center_zoom();
+ _this.zoom(this.value);
+ }
+ }, false);
+ document.getElementById('zoom_less').addEventListener('click', function (e) {
+ _this.set_center_zoom();
+ _this.zoom(-1);
+ }, false);
+ document.getElementById('zoom_100').addEventListener('click', function (e) {
+ _this.zoom(100);
+ }, false);
+ document.getElementById('zoom_more').addEventListener('click', function (e) {
+ _this.set_center_zoom();
+ _this.zoom(+1);
+ }, false);
+ document.getElementById('zoom_fit').addEventListener('click', function (e) {
+ _this.zoom_auto();
+ }, false);
+ document.getElementById('main_wrapper').addEventListener('wheel', function (e) {
+ //zoom with mouse scroll
+ e.preventDefault();
+ _this.zoom_data.x = e.offsetX;
+ _this.zoom_data.y = e.offsetY;
+ var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail || -e.deltaY)));
+ if (delta > 0)
+ _this.zoom(+1, e);
+ else
+ _this.zoom(-1, e);
+ }, false);
+ window.addEventListener('resize', function (e) {
+ //resize
+ config.need_render = true;
+ }, false);
+ document.getElementById("canvas_preview").addEventListener('mousedown', function (e) {
+ if(is_touch)
+ return;
+ _this.set_zoom_position(e);
+ }, false);
+ document.getElementById("canvas_preview").addEventListener('mousemove', function (e) {
+ if(is_touch)
+ return;
+ if (_this.mouse_pressed == false)
+ return;
+ _this.set_zoom_position(e);
+ }, false);
+
+ document.getElementById("canvas_preview").addEventListener('touchstart', function (e) {
+ is_touch = true;
+
+ //calc canvas position offset
+ var bodyRect = document.body.getBoundingClientRect();
+ var canvas_el = document.getElementById("canvas_preview").getBoundingClientRect();
+ _this.canvas_offset.x = canvas_el.left - bodyRect.left;
+ _this.canvas_offset.y = canvas_el.top - bodyRect.top;
+
+ //change zoom offset
+ _this.set_zoom_position(e);
+ });
+ document.getElementById("canvas_preview").addEventListener('touchmove', function (e) {
+ //change zoom offset
+ if (_this.mouse_pressed == false)
+ return;
+ _this.set_zoom_position(e);
+ });
+ }
+
+ prepare_canvas() {
+ this.canvas_preview.webkitImageSmoothingEnabled = false;
+ this.canvas_preview.msImageSmoothingEnabled = false;
+ this.canvas_preview.imageSmoothingEnabled = false;
+ this.GUI.render_canvas_background('canvas_preview', 8);
+ }
+
+ render_preview_active_zone() {
+ if (this.canvas_preview == undefined) {
+ this.canvas_preview = document.getElementById("canvas_preview")
+ .getContext("2d");
+ }
+
+ //active zone
+ var visible_w = config.visible_width / config.ZOOM;
+ var visible_h = config.visible_height / config.ZOOM;
+
+ var mini_rect_w = this.PREVIEW_SIZE.w * visible_w / config.WIDTH;
+ var mini_rect_h = this.PREVIEW_SIZE.h * visible_h / config.HEIGHT;
+
+ var start_pos = this.Base_layers.get_world_coords(0, 0);
+ var mini_rect_x = start_pos.x / config.WIDTH * this.PREVIEW_SIZE.w;
+ var mini_rect_y = start_pos.y / config.HEIGHT * this.PREVIEW_SIZE.h;
+
+ //validate
+ mini_rect_x = Math.max(0, mini_rect_x);
+ mini_rect_y = Math.max(0, mini_rect_y);
+ mini_rect_w = Math.min(this.PREVIEW_SIZE.w - 1, mini_rect_w);
+ mini_rect_h = Math.min(this.PREVIEW_SIZE.h - 1, mini_rect_h);
+ if (mini_rect_x + mini_rect_w > this.PREVIEW_SIZE.w)
+ mini_rect_x = this.PREVIEW_SIZE.w - mini_rect_w;
+ if (mini_rect_y + mini_rect_h > this.PREVIEW_SIZE.h)
+ mini_rect_y = this.PREVIEW_SIZE.h - mini_rect_h;
+
+ if (mini_rect_x == 0 && mini_rect_y == 0 && mini_rect_w == this.PREVIEW_SIZE.w - 1
+ && mini_rect_h == this.PREVIEW_SIZE.h - 1) {
+ //everything is visible
+ return;
+ }
+
+ //draw selected area in preview canvas
+ this.canvas_preview.lineWidth = 1;
+ this.canvas_preview.beginPath();
+ this.canvas_preview.rect(
+ Math.round(mini_rect_x) + 0.5,
+ Math.round(mini_rect_y) + 0.5,
+ mini_rect_w,
+ mini_rect_h
+ );
+ this.canvas_preview.fillStyle = "rgba(0, 255, 0, 0.3)";
+ this.canvas_preview.strokeStyle = "#00ff00";
+ this.canvas_preview.fill();
+ this.canvas_preview.stroke();
+ }
+
+ async zoom(recalc) {
+ if (recalc != undefined) {
+ //zoom-in or zoom-out
+ if (recalc == 1 || recalc == -1) {
+ //fix
+ if (config.ZOOM > 1 && config.ZOOM < 1.5) {
+ config.ZOOM = 1;
+ }
+ if (config.ZOOM > 0.9 && config.ZOOM < 1) {
+ config.ZOOM = 1;
+ }
+
+ //calc step
+ if (recalc < 0) {
+ //down
+ if (config.ZOOM > 3) {
+ //infinity -> 300%
+ config.ZOOM -= 1;
+ }
+ else if (config.ZOOM > 1) {
+ //300% -> 100%
+ config.ZOOM -= 0.5;
+ }
+ else if (config.ZOOM > 0.1) {
+ //100% -> 10%
+ config.ZOOM -= 0.1;
+ }
+ else {
+ //10% -> 1%
+ config.ZOOM -= 0.01;
+ }
+ }
+ else {
+ //up
+ if (config.ZOOM < 0.1) {
+ //1% -> 10%
+ config.ZOOM += 0.01;
+ }
+ else if (config.ZOOM < 1) {
+ //10% -> 100%
+ config.ZOOM += 0.1;
+ }
+ else if (config.ZOOM < 3) {
+ //100% -> 300%
+ config.ZOOM += 0.5;
+ }
+ else {
+ //300% -> more
+ config.ZOOM += 1;
+ }
+ }
+ }
+ else {
+ //zoom using exact value
+ config.ZOOM = recalc / 100;
+ }
+ config.ZOOM = Math.round(config.ZOOM * 100) / 100;
+ config.ZOOM = Math.max(config.ZOOM, 0.01);
+ config.ZOOM = Math.min(config.ZOOM, 500);
+ }
+
+ document.getElementById("zoom_100").innerHTML = Math.round(config.ZOOM * 100) + '%';
+ document.getElementById("zoom_range").value = (config.ZOOM * 100);
+
+ config.need_render = true;
+ this.GUI.prepare_canvas();
+
+ //sleep after last image import, it maybe not be finished yet
+ await new Promise(r => setTimeout(r, 10));
+
+ return true;
+ }
+
+ zoom_auto(only_increase) {
+ var container = document.getElementById('main_wrapper');
+ var page_w = container.clientWidth;
+ var page_h = container.clientHeight;
+
+ var best_width = page_w / config.WIDTH;
+ var best_height = page_h / config.HEIGHT;
+ var best_zoom = null;
+
+ best_zoom = Math.min(best_width, best_height);
+
+ if (only_increase != undefined && best_zoom > 1) {
+ return false;
+ }
+
+ this.zoom(Math.min(best_width, best_height) * 100);
+ }
+
+ set_center_zoom() {
+ this.zoom_data.x = config.visible_width / 2;
+ this.zoom_data.y = config.visible_height / 2;
+ }
+
+ set_zoom_position(event) {
+ var mouse_x = event.offsetX;
+ var mouse_y = event.offsetY;
+ if (event.changedTouches) {
+ //touch events
+ event = event.changedTouches[0];
+
+ mouse_x = event.pageX - this.canvas_offset.x;
+ mouse_y = event.pageY - this.canvas_offset.y;
+ }
+
+ var visible_w = config.visible_width / config.ZOOM;
+ var visible_h = config.visible_height / config.ZOOM;
+ var mini_w = this.PREVIEW_SIZE.w * visible_w / config.WIDTH;
+ var mini_h = this.PREVIEW_SIZE.h * visible_h / config.HEIGHT;
+
+ var change_x = (mouse_x - mini_w / 2) / this.PREVIEW_SIZE.w * config.WIDTH;
+ var change_y = (mouse_y - mini_h / 2) / this.PREVIEW_SIZE.h * config.HEIGHT;
+
+ var zoom_data = this.zoom_data;
+ zoom_data.move_pos = {};
+ zoom_data.move_pos.x = change_x;
+ zoom_data.move_pos.y = change_y;
+
+ config.need_render = true;
+ }
+
+ /**
+ * moves visible area to new position.
+ *
+ * @param {int} x global offset
+ * @param {int} y global offset
+ */
+ zoom_to_position(x, y) {
+ var zoom_data = this.zoom_data;
+ zoom_data.move_pos = {};
+ zoom_data.move_pos.x = parseInt(x);
+ zoom_data.move_pos.y = parseInt(y);
+
+ config.need_render = true;
+ }
+
+}
+
+export default GUI_preview_class;
diff --git a/paintplus/frontend/src/js/core/gui/gui-tools.js b/paintplus/frontend/src/js/core/gui/gui-tools.js
new file mode 100644
index 0000000..a60a553
--- /dev/null
+++ b/paintplus/frontend/src/js/core/gui/gui-tools.js
@@ -0,0 +1,390 @@
+/*
+ * miniPaint - https://github.com/viliusle/miniPaint
+ * author: Vilius L.
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Helper_class from './../../libs/helpers.js';
+import Tools_translate_class from './../../modules/tools/translate.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import Base_gui_class from '../base-gui.js';
+
+var instance = null;
+
+/**
+ * GUI class responsible for rendering left sidebar tools
+ */
+class GUI_tools_class {
+
+ constructor(GUI_class) {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Helper = new Helper_class();
+ this.Tools_translate = new Tools_translate_class();
+ this.Base_gui = new Base_gui_class();
+
+ //active tool
+ this.active_tool = 'brush';
+ this.tools_modules = {};
+ }
+
+ load_plugins() {
+ var _this = this;
+ var ctx = document.getElementById('canvas_minipaint').getContext("2d");
+ var plugins_context = require.context("./../../tools/", true, /\.js$/);
+ plugins_context.keys().forEach(function (key) {
+ if (key.indexOf('Base' + '/') < 0) {
+ var moduleKey = key.replace('./', '').replace('.js', '');
+ var full_key = moduleKey;
+ if (moduleKey.indexOf('/') > -1) {
+ var parts = moduleKey.split("/");
+ moduleKey = parts[parts.length - 1];
+ }
+
+ try {
+ var classObj = plugins_context(key);
+ if (!classObj.default) return; // skip helper files without a default export
+ var object = new classObj.default(ctx);
+
+ var title = _this.Helper.ucfirst(object.name);
+ title = title.replace(/_/, ' ');
+
+ _this.tools_modules[moduleKey] = {
+ key: moduleKey,
+ full_key: full_key,
+ name: object.name,
+ title: title,
+ object: object,
+ };
+
+ //init events once
+ if(typeof object.load != "undefined") {
+ object.load();
+ }
+ } catch(e) {
+ console.error('[load_plugins] Failed to load ' + key + ':', e);
+ }
+ }
+ });
+ }
+
+ render_main_tools() {
+ this.load_plugins();
+
+ this.render_tools();
+ }
+
+ render_tools() {
+ var target_id = "tools_container";
+ var _this = this;
+ var saved_tool = this.Helper.getCookie('active_tool');
+ if(saved_tool == 'media' || saved_tool == 'shape') {
+ //bringing this back by default gives bad UX
+ saved_tool = null
+ }
+ if (saved_tool != null) {
+ this.active_tool = saved_tool;
+ }
+
+ //left menu
+ for (var i in config.TOOLS) {
+ var item = config.TOOLS[i];
+ if(item.title)
+ var title = item.title;
+ else
+ var title = this.Helper.ucfirst(item.name).replace(/_/, ' ');
+
+ var itemDom = document.createElement('span');
+ itemDom.id = item.name;
+ itemDom.title = title;
+ if (item.name == this.active_tool) {
+ itemDom.className = 'item trn active ' + item.name;
+ }
+ else {
+ itemDom.className = 'item trn ' + item.name;
+ }
+ if(item.visible === false){
+ itemDom.style.display = 'none';
+ }
+
+ //event
+ itemDom.addEventListener('click', function (event) {
+ _this.activate_tool(this.id);
+ });
+
+ //register
+ document.getElementById(target_id).appendChild(itemDom);
+ }
+
+ this.show_action_attributes();
+ new app.Actions.Activate_tool_action(this.active_tool, true).do();
+ this.Base_gui.check_canvas_offset();
+ }
+
+ async activate_tool(key) {
+ return app.State.do_action(
+ new app.Actions.Activate_tool_action(key)
+ );
+ }
+
+ action_data() {
+ for (var i in config.TOOLS) {
+ if (config.TOOLS[i].name == this.active_tool)
+ return config.TOOLS[i];
+ }
+
+ //something wrong - select first tool
+ this.active_tool = config.TOOLS[0].name;
+ return config.TOOLS[0];
+ }
+
+ /**
+ * used strings:
+ * "Fill", "Square", "Circle", "Radial", "Anti aliasing", "Circle", "Strict", "Burn"
+ */
+ show_action_attributes() {
+ var _this = this;
+ var target_id = "action_attributes";
+
+ const itemContainer = document.getElementById(target_id);
+
+ itemContainer.innerHTML = "";
+
+ const attributes = this.action_data().attributes;
+
+ let itemDom;
+ let currentButtonGroup = null;
+ for (var k in attributes) {
+ var item = attributes[k];
+
+ var title = k[0].toUpperCase() + k.slice(1);
+ title = title.replace("_", " ");
+
+ if (typeof item == 'object' && typeof item.value == 'boolean' && item.icon) {
+ if (currentButtonGroup == null) {
+ currentButtonGroup = document.createElement('div');
+ currentButtonGroup.className = 'ui_button_group no_wrap';
+ itemDom = document.createElement('div');
+ itemDom.className = 'item ' + k;
+ itemContainer.appendChild(itemDom);
+ itemDom.appendChild(currentButtonGroup);
+ } else {
+ itemDom.classList.add(k);
+ }
+ } else {
+ itemDom = document.createElement('div');
+ itemDom.className = 'item ' + k;
+ itemContainer.appendChild(itemDom);
+ currentButtonGroup = null;
+ }
+
+ if (typeof item == 'boolean' || (typeof item == 'object' && typeof item.value == 'boolean')) {
+ //boolean - true, false
+
+ let value = item;
+ let icon = null;
+ if (typeof item == 'object') {
+ value = item.value;
+ if (item.icon) {
+ icon = item.icon;
+ }
+ }
+
+ const element = document.createElement('button');
+ element.className = 'trn';
+ element.type = 'button';
+ element.id = k;
+ element.innerHTML = title;
+ element.setAttribute('aria-pressed', value);
+ if (icon) {
+ element.classList.add('ui_icon_button');
+ element.classList.add('input_height');
+ element.innerHTML = icon;
+ element.title = k;
+ element.innerHTML = '
';
+ } else {
+ element.classList.add('ui_toggle_button');
+ }
+ //event
+ element.addEventListener('click', (event) => {
+ //toggle boolean
+ var new_value = element.getAttribute('aria-pressed') !== 'true';
+ const actionData = this.action_data();
+ const attributes = actionData.attributes;
+ const id = event.target.closest('button').id;
+ if (typeof attributes[id] === 'object') {
+ attributes[id].value = new_value;
+ } else {
+ attributes[id] = new_value;
+ }
+ element.setAttribute('aria-pressed', new_value);
+ if (actionData.on_update != undefined) {
+ //send event
+ var moduleKey = actionData.name;
+ var functionName = actionData.on_update;
+ this.tools_modules[moduleKey].object[functionName]({ key: id, value: new_value });
+ }
+ });
+
+ if (currentButtonGroup) {
+ currentButtonGroup.appendChild(element);
+ } else {
+ itemDom.appendChild(element);
+ }
+ }
+ else if (typeof item == 'number' || (typeof item == 'object' && typeof item.value == 'number')) {
+ //numbers
+ let min = 1;
+ let max = k === 'power' ? 100 : 999;
+ let value = item;
+ let step = null;
+ if (typeof item == 'object') {
+ value = item.value;
+ if (item.min != null) {
+ min = item.min;
+ }
+ if (item.max != null) {
+ max = item.max;
+ }
+ if (item.step != null) {
+ step = item.step;
+ }
+ }
+
+ var elementTitle = document.createElement('label');
+ elementTitle.innerHTML = title + ':';
+ elementTitle.id = 'attribute_label_' + k;
+ elementTitle.className = 'trn';
+
+ const elementInput = document.createElement('input');
+ elementInput.type = 'number';
+ elementInput.setAttribute('aria-labelledby', 'attribute_label_' + k);
+ const $numberInput = $(elementInput)
+ .uiNumberInput({
+ id: k,
+ min,
+ max,
+ value,
+ step: step || 1,
+ exponentialStepButtons: !step
+ })
+ .on('input', () => {
+ let value = $numberInput.uiNumberInput('get_value');
+ const id = $numberInput.uiNumberInput('get_id');
+ const actionData = this.action_data();
+ const attributes = actionData.attributes;
+ if (typeof attributes[id] === 'object') {
+ attributes[id].value = value;
+ } else {
+ attributes[id] = value;
+ }
+
+ if (actionData.on_update != undefined) {
+ //send event
+ var moduleKey = actionData.name;
+ var functionName = actionData.on_update;
+ this.tools_modules[moduleKey].object[functionName]({ key: id, value: value });
+ }
+ });
+
+ itemDom.appendChild(elementTitle);
+ itemDom.appendChild($numberInput[0]);
+ }
+ else if (typeof item == 'object') {
+ //select
+
+ var elementTitle = document.createElement('label');
+ elementTitle.innerHTML = title + ':';
+ elementTitle.for = k;
+ elementTitle.className = 'trn';
+
+ var selectList = document.createElement("select");
+ selectList.id = k;
+ const values = typeof item.values === 'function' ? item.values() : item.values;
+ for (let j in values) {
+ var option = document.createElement("option");
+ if (item.value == values[j]) {
+ option.selected = 'selected';
+ }
+ option.className = 'trn';
+ option.name = values[j];
+ option.value = values[j];
+ option.text = values[j];
+ selectList.appendChild(option);
+ }
+ //event
+ selectList.addEventListener('change', (event) => {
+ const actionData = this.action_data();
+ actionData.attributes[event.target.id].value = event.target.value;
+
+ if (actionData.on_update != undefined) {
+ //send event
+ var moduleKey = actionData.name;
+ var functionName = actionData.on_update;
+ const result = this.tools_modules[moduleKey].object[functionName]({ key: event.target.id, value: event.target.value });
+ if (result) {
+ // Allow the on_update function to modify the attribute value if necessary.
+ if (result.new_values) {
+ for (let key in result.new_values) {
+ actionData.attributes[key].value = result.new_values[key];
+ }
+ }
+ }
+ }
+
+ this.show_action_attributes();
+ });
+
+ itemDom.appendChild(elementTitle);
+ itemDom.appendChild(selectList);
+ }
+ else if (typeof item == 'string' && item[0] == '#') {
+ //color
+
+ var elementTitle = document.createElement('label');
+ elementTitle.innerHTML = title + ':';
+ elementTitle.for = k;
+ elementTitle.className = 'trn';
+
+ var colorInput = document.createElement('input');
+ colorInput.type = 'color';
+ const $colorInput = $(colorInput)
+ .uiColorInput({
+ id: k,
+ value: item
+ })
+ .on('change', () => {
+ let value = $colorInput.uiColorInput('get_value');
+ const id = $colorInput.uiColorInput('get_id');
+ const actionData = this.action_data();
+ actionData.attributes[id] = value;
+ if (actionData.on_update != undefined) {
+ //send event
+ var moduleKey = actionData.name;
+ var functionName = actionData.on_update;
+ this.tools_modules[moduleKey].object[functionName]({ key: id, value: value });
+ }
+ });
+
+ itemDom.appendChild(elementTitle);
+ itemDom.appendChild($colorInput[0]);
+ }
+ else {
+ alertify.error('Error: unsupported attribute type:' + typeof item + ', ' + k);
+ }
+ }
+
+ if (config.LANG != 'en') {
+ //retranslate
+ this.Tools_translate.translate(config.LANG);
+ }
+ }
+
+}
+
+export default GUI_tools_class;
diff --git a/paintplus/frontend/src/js/data/pantone_colors.js b/paintplus/frontend/src/js/data/pantone_colors.js
new file mode 100644
index 0000000..d859cca
--- /dev/null
+++ b/paintplus/frontend/src/js/data/pantone_colors.js
@@ -0,0 +1,238 @@
+/**
+ * Pantone color database — ~350 representative PMS colors with hex approximations.
+ * Source: open-source Pantone approximations (not official Pantone data).
+ * Format: [name, hex]
+ *
+ * Delta E matching uses LAB color space — see color_utils.js.
+ */
+const PANTONE_COLORS = [
+ // Reds & Pinks
+ ['Pantone 485 C', '#da291c'],
+ ['Pantone 186 C', '#c8102e'],
+ ['Pantone 1795 C', '#ce2939'],
+ ['Pantone 1805 C', '#ab2328'],
+ ['Pantone 1815 C', '#833033'],
+ ['Pantone 200 C', '#ba0c2f'],
+ ['Pantone 201 C', '#9d2235'],
+ ['Pantone 202 C', '#862633'],
+ ['Pantone 206 C', '#ce0058'],
+ ['Pantone 207 C', '#a50034'],
+ ['Pantone 208 C', '#84254a'],
+ ['Pantone 213 C', '#e4488a'],
+ ['Pantone 214 C', '#d4357b'],
+ ['Pantone 215 C', '#bb2261'],
+ ['Pantone 219 C', '#e10069'],
+ ['Pantone 225 C', '#d5006c'],
+ ['Pantone 226 C', '#cb0070'],
+ ['Pantone 485 C', '#da291c'],
+ ['Pantone Pink C', '#e87ca0'],
+ ['Pantone Rubine Red C', '#ce0058'],
+ ['Pantone Rhodamine Red C', '#e10096'],
+
+ // Oranges
+ ['Pantone 021 C', '#fe5000'],
+ ['Pantone 151 C', '#ff7900'],
+ ['Pantone 152 C', '#e87722'],
+ ['Pantone 153 C', '#cb6015'],
+ ['Pantone 158 C', '#e8642c'],
+ ['Pantone 165 C', '#fc4c02'],
+ ['Pantone 166 C', '#e55302'],
+ ['Pantone 167 C', '#be4b00'],
+ ['Pantone 1495 C', '#ff8200'],
+ ['Pantone 1505 C', '#ff671f'],
+ ['Pantone Orange 021 C', '#fe5000'],
+ ['Pantone Warm Red C', '#f9423a'],
+
+ // Yellows
+ ['Pantone Yellow C', '#fedd00'],
+ ['Pantone 101 C', '#f9e84e'],
+ ['Pantone 102 C', '#fce300'],
+ ['Pantone 103 C', '#c5a900'],
+ ['Pantone 104 C', '#af9800'],
+ ['Pantone 108 C', '#f6d500'],
+ ['Pantone 109 C', '#ffd100'],
+ ['Pantone 110 C', '#d4af00'],
+ ['Pantone 115 C', '#fbdb65'],
+ ['Pantone 116 C', '#ffcd00'],
+ ['Pantone 117 C', '#c79200'],
+ ['Pantone 123 C', '#ffc72c'],
+ ['Pantone 124 C', '#e6a817'],
+ ['Pantone 130 C', '#f0aa00'],
+ ['Pantone 1205 C', '#f5e1a4'],
+ ['Pantone 1215 C', '#f5cf7e'],
+ ['Pantone 1225 C', '#fbb040'],
+ ['Pantone 1235 C', '#f7941d'],
+ ['Pantone 1245 C', '#d4890a'],
+ ['Pantone Gold C', '#af8c00'],
+
+ // Greens
+ ['Pantone Green C', '#00ab84'],
+ ['Pantone 354 C', '#00b140'],
+ ['Pantone 355 C', '#009a44'],
+ ['Pantone 356 C', '#007a3d'],
+ ['Pantone 361 C', '#43b02a'],
+ ['Pantone 362 C', '#3d9a31'],
+ ['Pantone 363 C', '#347d2c'],
+ ['Pantone 368 C', '#78be20'],
+ ['Pantone 369 C', '#5da31c'],
+ ['Pantone 370 C', '#4a7729'],
+ ['Pantone 375 C', '#97d700'],
+ ['Pantone 376 C', '#72b200'],
+ ['Pantone 382 C', '#c4d600'],
+ ['Pantone 390 C', '#a8ad00'],
+ ['Pantone 334 C', '#00855d'],
+ ['Pantone 335 C', '#006a52'],
+ ['Pantone 336 C', '#00573f'],
+ ['Pantone 340 C', '#00843d'],
+ ['Pantone 341 C', '#00693c'],
+ ['Pantone 342 C', '#215732'],
+ ['Pantone 347 C', '#009a44'],
+ ['Pantone 348 C', '#007a3d'],
+ ['Pantone 349 C', '#215732'],
+ ['Pantone 3415 C', '#00665c'],
+ ['Pantone 3425 C', '#006a52'],
+
+ // Teals & Cyans
+ ['Pantone Process Cyan C', '#0085ca'],
+ ['Pantone 306 C', '#00b5e2'],
+ ['Pantone 307 C', '#007dba'],
+ ['Pantone 308 C', '#005f86'],
+ ['Pantone 313 C', '#00b0ca'],
+ ['Pantone 314 C', '#0093ab'],
+ ['Pantone 315 C', '#007395'],
+ ['Pantone 320 C', '#009ca6'],
+ ['Pantone 321 C', '#008c95'],
+ ['Pantone 322 C', '#007680'],
+ ['Pantone 326 C', '#00b2a9'],
+ ['Pantone 327 C', '#007a74'],
+ ['Pantone 328 C', '#006E61'],
+ ['Pantone 3262 C', '#00b2a9'],
+ ['Pantone 3272 C', '#00a3ad'],
+ ['Pantone 3282 C', '#008c95'],
+ ['Pantone 3292 C', '#005f6a'],
+
+ // Blues
+ ['Pantone Reflex Blue C', '#001489'],
+ ['Pantone Blue 072 C', '#10069f'],
+ ['Pantone 279 C', '#418fde'],
+ ['Pantone 280 C', '#003087'],
+ ['Pantone 281 C', '#002d72'],
+ ['Pantone 286 C', '#0033a0'],
+ ['Pantone 287 C', '#003087'],
+ ['Pantone 288 C', '#002d72'],
+ ['Pantone 293 C', '#0032a0'],
+ ['Pantone 294 C', '#002b6c'],
+ ['Pantone 295 C', '#002244'],
+ ['Pantone 300 C', '#0057a8'],
+ ['Pantone 301 C', '#005596'],
+ ['Pantone 302 C', '#003f72'],
+ ['Pantone 2728 C', '#2251b8'],
+ ['Pantone 2738 C', '#1b1464'],
+ ['Pantone 2748 C', '#0f1f8a'],
+ ['Pantone 2758 C', '#13234b'],
+ ['Pantone Bright Blue C', '#0087c8'],
+ ['Pantone 298 C', '#5bc8f5'],
+ ['Pantone 297 C', '#7bc4e2'],
+
+ // Purples & Violets
+ ['Pantone Violet C', '#440099'],
+ ['Pantone 2587 C', '#8246af'],
+ ['Pantone 2597 C', '#6b1f7c'],
+ ['Pantone 2607 C', '#5e2175'],
+ ['Pantone 2617 C', '#522d6d'],
+ ['Pantone 2627 C', '#401752'],
+ ['Pantone 2665 C', '#9678d3'],
+ ['Pantone 2685 C', '#43009a'],
+ ['Pantone 2695 C', '#312068'],
+ ['Pantone 2705 C', '#8085c9'],
+ ['Pantone 2715 C', '#6e6bbf'],
+ ['Pantone 2725 C', '#4f52af'],
+ ['Pantone 2735 C', '#1f1a6e'],
+ ['Pantone 2745 C', '#1b1747'],
+ ['Pantone Ultra Violet C', '#5f4b8b'],
+ ['Pantone 259 C', '#6c2e8e'],
+ ['Pantone 266 C', '#6a2bb8'],
+ ['Pantone 267 C', '#521b8a'],
+ ['Pantone 268 C', '#43205e'],
+ ['Pantone 269 C', '#31184e'],
+ ['Pantone 253 C', '#b968c7'],
+ ['Pantone 254 C', '#aa4da0'],
+ ['Pantone 2562 C', '#c294d6'],
+
+ // Magentas
+ ['Pantone Process Magenta C', '#d50087'],
+ ['Pantone Magenta 0521 C', '#d6006f'],
+ ['Pantone 233 C', '#c5007f'],
+ ['Pantone 234 C', '#a50064'],
+ ['Pantone 235 C', '#8c0056'],
+ ['Pantone 239 C', '#db5aa4'],
+ ['Pantone 240 C', '#bf4e99'],
+
+ // Browns & Tans
+ ['Pantone 469 C', '#6b3d2e'],
+ ['Pantone 470 C', '#8c4a2f'],
+ ['Pantone 471 C', '#a05b38'],
+ ['Pantone 476 C', '#4e3629'],
+ ['Pantone 477 C', '#5c3d2e'],
+ ['Pantone 478 C', '#6d4535'],
+ ['Pantone 483 C', '#7a2e22'],
+ ['Pantone 484 C', '#9b3423'],
+ ['Pantone 4625 C', '#4a1c0e'],
+ ['Pantone 4635 C', '#7d3c1a'],
+ ['Pantone 4645 C', '#a45f3a'],
+ ['Pantone 4655 C', '#b87246'],
+ ['Pantone 463 C', '#7d5326'],
+ ['Pantone 464 C', '#8b5e27'],
+ ['Pantone 465 C', '#9e7232'],
+ ['Pantone 4505 C', '#8a7252'],
+ ['Pantone 4515 C', '#9e8866'],
+ ['Pantone 4525 C', '#b39e7a'],
+ ['Pantone Tan C', '#d2b48c'],
+
+ // Grays
+ ['Pantone Cool Gray 1 C', '#d9d9d6'],
+ ['Pantone Cool Gray 2 C', '#d0d0ce'],
+ ['Pantone Cool Gray 3 C', '#c8c9c7'],
+ ['Pantone Cool Gray 4 C', '#bbbcbc'],
+ ['Pantone Cool Gray 5 C', '#b1b3b3'],
+ ['Pantone Cool Gray 6 C', '#a7a8aa'],
+ ['Pantone Cool Gray 7 C', '#97999b'],
+ ['Pantone Cool Gray 8 C', '#888b8d'],
+ ['Pantone Cool Gray 9 C', '#75787b'],
+ ['Pantone Cool Gray 10 C','#63666a'],
+ ['Pantone Cool Gray 11 C','#53565a'],
+ ['Pantone Warm Gray 1 C', '#d8d3cb'],
+ ['Pantone Warm Gray 2 C', '#cec6ba'],
+ ['Pantone Warm Gray 3 C', '#c4bbad'],
+ ['Pantone Warm Gray 4 C', '#bbb0a2'],
+ ['Pantone Warm Gray 5 C', '#b0a596'],
+ ['Pantone Warm Gray 6 C', '#a39891'],
+ ['Pantone Warm Gray 7 C', '#968c85'],
+ ['Pantone Warm Gray 8 C', '#8a7f76'],
+ ['Pantone Warm Gray 9 C', '#7d7368'],
+ ['Pantone Warm Gray 10 C','#72685d'],
+ ['Pantone Warm Gray 11 C','#655f56'],
+ ['Pantone 420 C', '#c7c7c4'],
+ ['Pantone 421 C', '#b5b6b3'],
+ ['Pantone 422 C', '#a4a4a1'],
+ ['Pantone 423 C', '#929291'],
+ ['Pantone 424 C', '#7f7f7d'],
+ ['Pantone 425 C', '#6c6c6c'],
+ ['Pantone 426 C', '#404040'],
+
+ // Black & White
+ ['Pantone Black C', '#2b2926'],
+ ['Pantone Black 6 C','#101820'],
+ ['Pantone White', '#f2f0eb'],
+
+ // Special / Brand colors
+ ['Pantone 021 C', '#fe5000'], // Harley-Davidson orange area
+ ['Pantone 484 C', '#9b3423'],
+ ['Pantone Bright Red C', '#f22613'],
+ ['Pantone 3005 C', '#0076c2'],
+ ['Pantone 3015 C', '#006298'],
+ ['Pantone 3025 C', '#005274'],
+ ['Pantone 3035 C', '#00445d'],
+];
+
+export default PANTONE_COLORS;
diff --git a/paintplus/frontend/src/js/languages/ar.json b/paintplus/frontend/src/js/languages/ar.json
new file mode 100644
index 0000000..a5732d2
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/ar.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "حدثت مشكلة أثناء إزالة محفوظات التراجع. هو - هي",
+ "About": "حول",
+ "Active": "نشيط",
+ "Aden": "عدن",
+ "Advanced": "متقدم",
+ "All": "الجميع",
+ "Alpha": "ألفا",
+ "Alpha:": "ألفا:",
+ "Anonymous": "مجهول",
+ "Anti aliasing": "مكافحة التعرج",
+ "Application markup may have changed,": "ربما تم تغيير ترميز التطبيق،",
+ "Arial": "اريال",
+ "Arrow": "سهم",
+ "ArrowDown": "السهم للاسفل",
+ "ArrowLeft": "السهم لليسار",
+ "ArrowRight": "السهم الأيمن",
+ "ArrowUp": "ارووب",
+ "Author:": "مؤلف:",
+ "Auto Adjust Colors": "ضبط تلقائي للألوان",
+ "Auto Kerning": "تقنين تلقائي لتقنين الأحرف",
+ "Average:": "متوسط:",
+ "Backspace": "مسافة للخلف",
+ "Base": "يتمركز",
+ "Basic": "أساسي",
+ "Black and White": "اسود و ابيض",
+ "Blue": "أزرق",
+ "Blue channel:": "القناة الزرقاء:",
+ "Blueprint": "مخطط",
+ "Blur Radius:": "نصف قطر التمويه:",
+ "Blur Tool": "أداة طمس",
+ "Blur power:": "قوة طمس:",
+ "Borders": "الحدود",
+ "Bottom": "قاع",
+ "Bottom to Top": "من الأسفل للأعلى",
+ "Bounds:": "الحدود:",
+ "Box": "علبة",
+ "Box Blur": "مربع طمس",
+ "Box blur": "مربع طمس",
+ "Brightness": "سطوع",
+ "Brightness:": "سطوع:",
+ "Bulge\/Pinch Tool": "أداة انتفاخ \/ قرصة",
+ "Burn": "حرق",
+ "Can not animate 1 layer.": "لا يمكن تحريك طبقة واحدة.",
+ "Can not find previous layer.": "لا يمكن العثور على الطبقة السابقة.",
+ "Can not use this tool on current layer: image already takes all area.": "لا يمكن استخدام هذه الأداة على الطبقة الحالية: الصورة تشغل المساحة بأكملها بالفعل.",
+ "Cancel": "يلغي",
+ "Canvas Size": "حجم قماش",
+ "Center": "مركز",
+ "Center x:": "المركز x:",
+ "Center y:": "مركز ص:",
+ "Center:": "مركز:",
+ "Change Composition": "تغيير التكوين",
+ "Change Layer Details": "تغيير تفاصيل الطبقة",
+ "Change Opacity": "تغيير التعتيم",
+ "Channel:": "قناة:",
+ "Circle": "دائرة",
+ "Clarendon": "كلاريندون",
+ "Clear": "واضح",
+ "Clear Selection": "التحديد الواضح",
+ "Clone Tool": "أداة استنساخ",
+ "Clone count:": "عدد النسخ:",
+ "Clone tool disabled for resized image. Please rasterize first.": "تم تعطيل أداة النسخ للصورة التي تم تغيير حجمها. يرجى التنقيط أولا.",
+ "Cloned edges": "حواف مستنسخة",
+ "Close": "يغلق",
+ "Color #": "اللون #",
+ "Color Corrections": "تصحيحات اللون",
+ "Color Palette": "لوحة الألوان",
+ "Color Zoom": "تكبير اللون",
+ "Color alpha value can not be zero.": "لا يمكن أن تكون قيمة ألفا للون صفراً.",
+ "Color to Alpha": "لون ألفا",
+ "Color zoom": "تكبير اللون",
+ "Color:": "اللون:",
+ "Colors": "الألوان",
+ "Colors:": "الألوان:",
+ "Common Filters": "مرشحات مشتركة",
+ "Composition": "تكوين",
+ "Composition:": "تكوين:",
+ "Content Fill": "تعبئة المحتوى",
+ "Contrast": "مقابلة",
+ "Contrast:": "مقابلة:",
+ "Convert layer to raster": "تحويل الطبقة إلى النقطية",
+ "Convert to Raster": "تحويل إلى نقطي",
+ "Copy Selection": "نسخ التحديد",
+ "Copy to Clipboard": "نسخ إلى الحافظة",
+ "Courier": "ساعي",
+ "Crop Tool": "أداة المحاصيل",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "القص على الطبقة التي تم تدويرها غير مدعوم. قم بتحويله إلى خطوط المسح للمتابعة.",
+ "Ctrl + C": "السيطرة + ج",
+ "Ctrl+A": "السيطرة + أ",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "السيطرة+P",
+ "Ctrl+V": "السيطرة + V.",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "السيطرة + Z",
+ "Current": "تيار",
+ "Current Color Preview": "معاينة اللون الحالي",
+ "Custom": "مخصص",
+ "Data URL": "URL البيانات",
+ "Data URL:": "URL البيانات:",
+ "Decrease": "تخفيض",
+ "Decrease Color Depth": "تقليل عمق اللون",
+ "Degree:": "درجة:",
+ "Del": "ديل",
+ "Delete": "حذف",
+ "Delete Selection": "حذف التحديد",
+ "Denoise": "يقلل الضوضاء",
+ "Desaturate Tool": "أداة إزالة التشبع",
+ "Description:": "وصف:",
+ "Deutsch": "الألمانية",
+ "Differences": "اختلافات",
+ "Differences Down": "الخلافات أسفل",
+ "Direction:": "اتجاه:",
+ "Dither": "ثبات",
+ "Dithering:": "التردد:",
+ "Dominant color:": "اللون السائد:",
+ "Dot Screen": "شاشة نقطية",
+ "Down": "أسفل",
+ "Duplicate": "ينسخ",
+ "Duplicate Layer": "طبقة مكررة",
+ "Duplicate layer": "طبقة مكررة",
+ "Dynamic": "متحرك",
+ "Edge": "حافة",
+ "Edit": "يحرر",
+ "Edit text...": "تحرير النص...",
+ "Effect browser": "متصفح التأثير",
+ "Effects": "تأثيرات",
+ "Effects browser": "متصفح التأثيرات",
+ "Email:": "بريد الالكتروني:",
+ "Emboss": "زخرف",
+ "Empty selection": "اختيار فارغ",
+ "Empty selection or type not image.": "اختيار فارغ أو اكتب ليس صورة.",
+ "Enable autoresize:": "تمكين إعادة الحجم التلقائي:",
+ "End": "نهاية",
+ "English": "الإنجليزية",
+ "English (UK)": "الإنجليزية (المملكة المتحدة)",
+ "Enrich": "يثرى",
+ "Enter": "يدخل",
+ "Erase Tool": "أداة المحو",
+ "Erase on rotate object is disabled. Please rasterize first.": "تم تعطيل المسح عند تدوير الكائن. يرجى التنقيط أولا.",
+ "Error": "خطأ",
+ "Error connecting to service.": "خطأ في الاتصال بالخدمة.",
+ "Error loading the list of fonts from Google.": "حدث خطأ أثناء تحميل قائمة الخطوط من Google.",
+ "Error registering service worker": "خطأ في تسجيل عامل الخدمة",
+ "Error: can not find filter:": "خطأ: لا يمكن العثور على عامل التصفية:",
+ "Error: can not find layer with id:": "خطأ: لا يمكن العثور على طبقة بالمعرف:",
+ "Error: missing details event target": "خطأ: تفاصيل الهدف حدث مفقود",
+ "Error: unknown layer type:": "خطأ: نوع طبقة غير معروف:",
+ "Error: unsupported attribute type:": "خطأ: نوع السمة غير مدعوم:",
+ "Esc": "خروج",
+ "Escape": "يهرب",
+ "Español": "الاسبانية",
+ "Expand edges": "قم بتوسيع الحواف",
+ "Exponent:": "الأس:",
+ "Export": "يصدر",
+ "External": "خارجي",
+ "Factor:": "عامل:",
+ "File": "ملف",
+ "File name:": "اسم الملف:",
+ "File size:": "حجم الملف:",
+ "Fill": "ملء",
+ "Fill Tool": "أداة التعبئة",
+ "Fit": "ملائم",
+ "Fit Window": "تناسب النافذة",
+ "Fit window": "نافذة مناسبة",
+ "Flatten Image": "تسطيح الصورة",
+ "Flip": "يواجه",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpentine",
+ "Font": "الخط",
+ "Français": "الفرنسية",
+ "Full HD, 1080p": "دقة Full HD ، 1080 بكسل",
+ "Full Screen": "تكبير الشاشة",
+ "Full layers data": "بيانات الطبقات الكاملة",
+ "Gap:": "الفارق:",
+ "Gaussian Blur": "التمويه الضبابي",
+ "Gif delay:": "تأخير Gif:",
+ "Gingham": "القماش القطني",
+ "GitHub:": "جيثب:",
+ "Gradient Radius:": "نصف قطر التدرج:",
+ "Grains": "بقوليات",
+ "Graphics Interchange Format": "تنسيق تبادل الرسومات",
+ "Gray": "رمادي",
+ "Grayscale": "تدرج الرمادي",
+ "Greek": "اليونانية",
+ "Green": "لون أخضر",
+ "Green channel:": "القناة الخضراء:",
+ "Greyscale:": "الرمادي:",
+ "Grid": "شبكة",
+ "Grid on\/off": "الشبكة على \/ قبالة",
+ "Guides": "خطوط إرشاد",
+ "Guides enabled.": "تم تمكين الأدلة.",
+ "H Radius:": "نصف قطر H:",
+ "H. Align:": "ح. محاذاة:",
+ "Heatmap": "خريطة الحرارة",
+ "Height (%):": "ارتفاع (٪):",
+ "Height:": "ارتفاع:",
+ "Help": "مساعدة",
+ "Helvetica": "هيلفيتيكا",
+ "Hermite": "هيرمايت",
+ "Hex": "عرافة",
+ "Hide": "يخفي",
+ "Histogram": "الرسم البياني",
+ "Histogram:": "الرسم البياني:",
+ "Home": "الصفحة الرئيسية",
+ "Horizontal": "أفقي",
+ "Horizontal Alignment": "المحاذاة الأفقية",
+ "Horizontal blur:": "طمس أفقي:",
+ "Horizontal:": "أفقي:",
+ "Hue": "مسحة",
+ "Hue Rotate": "تدوير هوى",
+ "Hue:": "مسحة:",
+ "Image": "صورة",
+ "Image data with multi-layers. Can be opened using miniPaint -": "بيانات الصورة متعددة الطبقات. يمكن فتحه باستخدام miniPaint -",
+ "Impact": "تأثير",
+ "In proportion:": "في نسبة:",
+ "Increase": "زيادة",
+ "Information": "معلومة",
+ "Inkwell": "محبرة",
+ "Insert": "إدراج",
+ "Insert guides": "أدلة إدراج",
+ "Insert new layer": "أدخل طبقة جديدة",
+ "Instagram Filters": "مرشحات Instagram",
+ "Invalid Hex Code": "رمز سداسي عشري غير صالح",
+ "Italiano": "ايطالي",
+ "JPG\/JPEG Format": "تنسيق JPG \/ JPEG",
+ "Kerning:": "تقنين الأحرف:",
+ "Key-Points": "النقاط الرئيسية",
+ "KeyU": "KeyU",
+ "Keyboard Shortcuts": "اختصارات لوحة المفاتيح",
+ "Keyword:": "الكلمة الرئيسية:",
+ "Lanczos": "لانكوز",
+ "Landscape": "منظر جمالي",
+ "Language": "لغة",
+ "Last modified": "آخر تعديل",
+ "Layer": "طبقة",
+ "Layer details": "تفاصيل الطبقة",
+ "Layer is empty.": "الطبقة فارغة.",
+ "Layer is not compatible with resize": "الطبقة غير متوافقة مع تغيير الحجم",
+ "Layer is vector, convert it to raster to apply this tool.": "الطبقة متجهية ، قم بتحويلها إلى خطوط نقطية لتطبيق هذه الأداة.",
+ "Layers": "طبقات",
+ "Layers:": "طبقات:",
+ "Layout:": "تَخطِيط:",
+ "Left": "اليسار",
+ "Left to Right": "من اليسار إلى اليمين",
+ "Level:": "مستوى:",
+ "Levels:": "المستويات:",
+ "Lietuvių": "ليتوفيتش",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "الانارة:",
+ "Luminosity": "لمعان",
+ "Magic Eraser Tool": "أداة ماجيك ممحاة",
+ "Merge Down": "دمج أسفل",
+ "Merge Layers": "دمج الطبقات",
+ "Merged": "مندمجة",
+ "Metrics": "المقاييس",
+ "Middle": "وسط",
+ "Missing at least 1 size parameter.": "معلمة حجم واحدة مفقودة على الأقل.",
+ "Missing permissions to write to Clipboard.cc": "أذونات مفقودة للكتابة إلى Clipboard.cc",
+ "Mode:": "الوضع:",
+ "Module function not found.": "لم يتم العثور على وظيفة الوحدة النمطية.",
+ "Modules class not found:": "فئة الوحدات غير موجودة:",
+ "Monospace": "مونوسبيس",
+ "Mosaic": "فسيفساء",
+ "Mouse:": "الفأر:",
+ "Move": "يتحرك",
+ "Move Layer": "تحريك الطبقة",
+ "Move layer down": "انقل الطبقة إلى الأسفل",
+ "Move layer up": "حرك الطبقة لأعلى",
+ "Name:": "اسم:",
+ "Negative": "سلبي",
+ "New": "جديد",
+ "New Bezier Layer": "طبقة بيزيير جديدة",
+ "New Brush Layer": "طبقة فرشاة جديدة",
+ "New Ellipse Layer": "طبقة Ellipse جديدة",
+ "New File": "ملف جديد",
+ "New Gradient Layer": "طبقة متدرجة جديدة",
+ "New Layer": "طبقة جديدة",
+ "New Line Layer": "طبقة خط جديدة",
+ "New Pencil Layer": "طبقة قلم رصاص جديدة",
+ "New Polygon Layer": "طبقة مضلعة جديدة",
+ "New Rectangle Layer": "طبقة مستطيل جديدة",
+ "New Text Layer": "طبقة نص جديدة",
+ "New file": "ملف جديد",
+ "New from Selection": "جديد من التحديد",
+ "New layer": "طبقة جديدة",
+ "Next": "التالي",
+ "Night Vision": "الرؤية الليلية",
+ "None": "لا أحد",
+ "Nothing is selected.": "لم يتم اختيار شيء.",
+ "Offset X:": "تعويض X:",
+ "Offset Y:": "تعويض ص:",
+ "Oil": "زيت",
+ "Ok": "موافق",
+ "Online image editor.": "محرر الصور على الإنترنت.",
+ "Opacity": "العتامة",
+ "Opacity:": "العتامة:",
+ "Open": "فتح",
+ "Open Data URL": "فتح URL البيانات",
+ "Open Directory": "الدليل المفتوح",
+ "Open File": "افتح ملف",
+ "Open File Data URL": "فتح ملف بيانات URL",
+ "Open File URL": "فتح ملف URL",
+ "Open File Webcam": "افتح ملف كاميرا الويب",
+ "Open Image": "صورة مفتوحة",
+ "Open JSON File": "افتح ملف JSON",
+ "Open Test Template": "افتح نموذج الاختبار",
+ "Open URL": "رابط مفتوح",
+ "Open data URL": "فتح URL البيانات",
+ "Open from Webcam": "افتح من كاميرا الويب",
+ "Original Size": "الحجم الأصلي",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - تحويل الصورة إلى SVG",
+ "PageDown": "اسفل الصفحة",
+ "PageUp": "PageUp",
+ "Palette": "لوحة",
+ "Parameter #1:": "المعلمة # 1:",
+ "Parameter #2:": "المعلمة # 2:",
+ "Paste": "معجون",
+ "Pencil": "قلم",
+ "Percentage:": "النسبة المئوية:",
+ "Pixels:": "بكسل:",
+ "Placeholder comment for color channels": "تعليق العنصر النائب لقنوات الألوان",
+ "Placeholder comment for color picker": "تعليق العنصر النائب لمنتقي الألوان",
+ "Placeholder comment for color swatches": "تعليق العنصر النائب لحوامل اللون",
+ "Portable Network Graphics": "رسومات الشبكة المحمولة",
+ "Portrait": "لَوحَة",
+ "Português": "البرتغالية",
+ "Position:": "موقع:",
+ "Power:": "قوة:",
+ "Preview": "معاينة",
+ "Previous": "سابق",
+ "Previous layer must be image, convert it to raster to apply this tool.": "يجب أن تكون الطبقة السابقة صورة ، قم بتحويلها إلى نقطية لتطبيق هذه الأداة.",
+ "Print": "مطبعة",
+ "Quality:": "جودة:",
+ "Quick Load": "تحميل سريع",
+ "Quick Save": "حفظ سريع",
+ "REMOVE.BG - Remove Image Background": "؛ REMOVE.BG - إزالة خلفية الصورة",
+ "Radial": "شعاعي",
+ "Radial gradient": "شعاعي التدرج",
+ "Radius:": "نصف القطر:",
+ "Range:": "نطاق:",
+ "Red": "أحمر",
+ "Red channel:": "القناة الحمراء:",
+ "Redo": "إعادة",
+ "Remove all": "حذف الكل",
+ "Rename": "إعادة تسمية",
+ "Rename Layer": "إعادة تسمية الطبقة",
+ "Rendered with errors.": "قدمت مع وجود أخطاء.",
+ "Rendering...": "استدعاء...",
+ "Replace Color": "استبدل اللون",
+ "Replace color": "استبدل اللون",
+ "Replacement:": "إستبدال:",
+ "Report Issues": "الإبلاغ عن المشكلات",
+ "Reset": "إعادة ضبط",
+ "Resize": "تغيير الحجم",
+ "Resize Boundary": "تغيير حجم الحدود",
+ "Resize Layer": "طبقة تغيير الحجم",
+ "Resize Layers": "تغيير حجم الطبقات",
+ "Resize Text Layer": "تغيير حجم طبقة النص",
+ "Resized as background": "تم تغيير الحجم كخلفية",
+ "Resized:": "تم تغيير الحجم:",
+ "Resolution:": "القرار:",
+ "Restore Alpha": "استعادة ألفا",
+ "Right": "حق",
+ "Right angle:": "زاوية مستقيمة:",
+ "Right to Left": "من اليمين الى اليسار",
+ "Rotate": "استدارة",
+ "Rotate Layer": "تدوير طبقة",
+ "Rotate is not supported on this type of object. Convert to raster?": "التدوير غير مدعوم في هذا النوع من الكائنات. تحويل إلى نقطية؟",
+ "Rotate left": "استدر يسارا",
+ "Rotate:": "استدارة:",
+ "Ruler": "مسطرة",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - ضغط ومقارنة الصور",
+ "Saturate": "تشبع",
+ "Saturation": "التشبع",
+ "Saturation:": "التشبع:",
+ "Save As": "حفظ باسم",
+ "Save As Data URL": "حفظ باسم URL البيانات",
+ "Save as": "حفظ باسم",
+ "Save as type:": "حفظ كنوع:",
+ "Save layers:": "حفظ الطبقات:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "التوسع غير مدعوم في Hermite ، باستخدام Lanczos.",
+ "Scroll down": "حرك الفأرة لأسفل",
+ "Scroll up": "انتقل إلى أعلى",
+ "Search": "بحث",
+ "Search Images": "البحث عن الصور",
+ "Search for Font": "البحث عن الخط",
+ "Search:": "يبحث:",
+ "Select All": "اختر الكل",
+ "Select Text Layer": "حدد طبقة النص",
+ "Select object tool": "حدد أداة الكائن",
+ "Selected": "المحدد",
+ "Selection Tool": "آلة الاختيار",
+ "Sensitivity:": "حساسية:",
+ "Separated": "منفصل",
+ "Separated (original types)": "منفصل (الأنواع الأصلية)",
+ "Sepia": "بني داكن",
+ "Set Image Size": "ضبط حجم الصورة",
+ "Settings": "إعدادات",
+ "Shadow": "ظل",
+ "Shapes": "الأشكال",
+ "Shapes (H)": "الأشكال (ح)",
+ "Sharpen": "شحذ",
+ "Sharpen Tool": "أداة شحذ",
+ "Sharpen:": "شحذ:",
+ "Shift + S": "التحول + س",
+ "Shortcut Key:": "مفتاح الاختصار:",
+ "Show": "يعرض",
+ "Show \/ Hide": "اظهر المخفي",
+ "Show file size:": "إظهار حجم الملف:",
+ "Simple": "بسيط",
+ "Size is too big, max": "الحجم كبير جدًا ، الحد الأقصى",
+ "Size:": "مقاس:",
+ "Skip - layer must be image.": "تخطي - يجب أن تكون الطبقة عبارة عن صورة.",
+ "Solarize": "شمسي",
+ "Sorry, cold not load getUserMedia() data:": "عذرا ، لا تقم بتحميل بيانات getUserMedia ():",
+ "Sorry, image could not be loaded.": "عذرا ، الصورة لا يمكن تحميلها.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "عذرا ، الصورة لا يمكن تحميلها. حاول نسخ الصورة ولصقها.",
+ "Sorry, image is too big, max 5 MB.": "عذرًا ، الصورة كبيرة جدًا ، بحد أقصى 5 ميجا بايت.",
+ "Source coordinates saved.": "تم حفظ إحداثيات المصدر.",
+ "Source is empty, right click on image or use long press to save source position.": "المصدر فارغ ، انقر بزر الماوس الأيمن على الصورة أو استخدم الضغط لفترة طويلة لحفظ موضع المصدر.",
+ "Sprites": "العفاريت",
+ "Square": "مربع",
+ "Stream:": "مجرى:",
+ "Strength:": "قوة:",
+ "Strict": "صارم",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - ضغط PNG و JPEG",
+ "Tab": "فاتورة غير مدفوعة",
+ "Tag Image File Format": "تنسيق ملف صورة العلامة",
+ "Tahoma": "تاهوما",
+ "Target:": "استهداف:",
+ "The quick brown fox jumps over the lazy dog.": "الثعلب البني السريع يقفز فوق الكلب الكسول.",
+ "There": "هناك",
+ "There are no layers behind.": "لا توجد طبقات خلف.",
+ "There is only 1 layer.": "هناك طبقة واحدة فقط.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "يجب أن تحتوي هذه الطبقة على صورة. يرجى تحويله إلى نقطية لتطبيق هذه الأداة.",
+ "Tilt Shift": "تحول الإمالة",
+ "Times New Roman": "تايمز نيو رومان",
+ "Toaster": "محمصة",
+ "Toggle": "تبديل",
+ "Toggle Color Channels": "تبديل قنوات الألوان",
+ "Toggle Color Picker": "تبديل منتقي الألوان",
+ "Toggle Menu": "تبديل القائمة",
+ "Toggle Swatches": "تبديل العينات",
+ "Tools": "أدوات",
+ "Top": "قمة",
+ "Top to Bottom": "من اعلى لاسفل",
+ "Total pixels:": "إجمالي وحدات البكسل:",
+ "Translate": "ترجمة",
+ "Translate Layer": "طبقة الترجمة",
+ "Translate error, can not find dictionary:": "خطأ في الترجمة ، لا يمكن العثور على القاموس:",
+ "Transparent:": "شفاف:",
+ "Trim": "تقليم",
+ "Trim Layers": "طبقات القطع",
+ "Trim borders:": "تقليم الحدود:",
+ "Trim layer:": "طبقة القطع:",
+ "Trim white color?": "تقليم اللون الأبيض؟",
+ "Type:": "اكتب:",
+ "Türkçe": "Türkçe",
+ "Undo": "الغاء التحميل",
+ "Unique colors:": "ألوان فريدة:",
+ "Up": "فوق",
+ "Update": "تحديث",
+ "Update Brush Layer": "تحديث طبقة الفرشاة",
+ "Update Pencil Layer": "تحديث طبقة القلم الرصاص",
+ "Update guides": "أدلة التحديث",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "استخدم اختصار لوحة المفاتيح Ctrl + V للصق من الحافظة.",
+ "V Radius:": "نصف القطر الخامس:",
+ "V. Align:": "V. محاذاة:",
+ "Valencia": "فالنسيا",
+ "Verdana": "فيردانا",
+ "Version:": "الإصدار:",
+ "Vertical": "رأسي",
+ "Vertical Alignment": "انحياز عمودي",
+ "Vertical blur:": "التمويه العمودي:",
+ "Vertical:": "رأسي:",
+ "Vibrance": "حيوية",
+ "View": "رأي",
+ "Vignette": "المقالة القصيرة",
+ "ViliusL": "ViliusL",
+ "Vintage": "كلاسيكي",
+ "Webcam": "كاميرا ويب",
+ "Webcam #": "كاميرا ويب #",
+ "Website:": "موقع الكتروني:",
+ "Weppy File Format": "تنسيق ملف Weppy",
+ "Width (%):": "عرض (٪):",
+ "Width:": "عرض:",
+ "Windows Bitmap": "Windows Bitmap",
+ "Word": "كلمة",
+ "Word + Letter": "كلمة + حرف",
+ "Wrap At:": "التفاف في:",
+ "Wrap:": "لف:",
+ "Wrong dimensions": "أبعاد خاطئة",
+ "Wrong file type, must be image or json.": "نوع الملف غير صحيح ، يجب أن يكون صورة أو json.",
+ "X end:": "نهاية X:",
+ "X position:": "المركز العاشر:",
+ "X start:": "بداية X:",
+ "X-Pro II": "اكس برو الثاني",
+ "Y end:": "نهاية ص:",
+ "Y position:": "موقف ص:",
+ "Y start:": "بداية Y:",
+ "You can also drag and drop items into browser.": "يمكنك أيضًا سحب العناصر وإفلاتها في المتصفح.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "لا يدعم المستعرض الخاص بك اللوحة القماشية أو لم يتم تمكين JavaScript.",
+ "Your browser does not support this format.": "متصفحك لا يدعم هذا التنسيق.",
+ "Your search did not match any images.": "بحثك لم يطابق أي صور.",
+ "Zoom": "تكبير",
+ "Zoom Blur": "زووم بلور",
+ "Zoom In": "تكبير",
+ "Zoom Out": "تصغير",
+ "Zoom blur": "زووم طمس",
+ "Zoom in": "تكبير",
+ "Zoom out": "تصغير",
+ "Zoom:": "تكبير:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/credits.js b/paintplus/frontend/src/js/languages/credits.js
new file mode 100644
index 0000000..1549b3a
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/credits.js
@@ -0,0 +1,3 @@
+/*
+ * Fr - Toad06
+ */
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/de.json b/paintplus/frontend/src/js/languages/de.json
new file mode 100644
index 0000000..ef5b4cb
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/de.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Beim Entfernen des Rückgängig-Verlaufs ist ein Problem aufgetreten. Es",
+ "About": "Über",
+ "Active": "Aktiv",
+ "Aden": "Aden",
+ "Advanced": "Fortgeschritten",
+ "All": "Alle",
+ "Alpha": "Alpha",
+ "Alpha:": "Alpha:",
+ "Anonymous": "Anonym",
+ "Anti aliasing": "Kantenglättung",
+ "Application markup may have changed,": "Das Anwendungs-Markup hat sich möglicherweise geändert.",
+ "Arial": "Arial",
+ "Arrow": "Pfeil",
+ "ArrowDown": "Pfeil nach unten",
+ "ArrowLeft": "Pfeil links",
+ "ArrowRight": "Pfeil rechts",
+ "ArrowUp": "Pfeil nach oben",
+ "Author:": "Autor:",
+ "Auto Adjust Colors": "Automatische Farbeinstellung",
+ "Auto Kerning": "Auto Kerning",
+ "Average:": "Durchschnitt:",
+ "Backspace": "Rücktaste",
+ "Base": "Basis",
+ "Basic": "Basic",
+ "Black and White": "Schwarz und weiß",
+ "Blue": "Blau",
+ "Blue channel:": "Blauer Kanal:",
+ "Blueprint": "Entwurf",
+ "Blur Radius:": "Weichzeichner-Radius:",
+ "Blur Tool": "Unschärfewerkzeug",
+ "Blur power:": "Weichzeichner-Stärke:",
+ "Borders": "Grenzen",
+ "Bottom": "Unterseite",
+ "Bottom to Top": "Unten nach oben",
+ "Bounds:": "Grenzen:",
+ "Box": "Box",
+ "Box Blur": "Box Unschärfe",
+ "Box blur": "Box Unschärfe",
+ "Brightness": "Helligkeit",
+ "Brightness:": "Helligkeit:",
+ "Bulge\/Pinch Tool": "Ausbuchtungs- \/ Quetschwerkzeug",
+ "Burn": "Brennen",
+ "Can not animate 1 layer.": "1 Ebene kann nicht animiert werden.",
+ "Can not find previous layer.": "Die vorherige Ebene kann nicht gefunden werden.",
+ "Can not use this tool on current layer: image already takes all area.": "Dieses Werkzeug kann auf der aktuellen Ebene nicht verwendet werden: Das Bild nimmt bereits den gesamten Bereich ein.",
+ "Cancel": "Abbrechen",
+ "Canvas Size": "Leinwandgröße",
+ "Center": "Zentrum",
+ "Center x:": "Mitte x:",
+ "Center y:": "Mitte y:",
+ "Center:": "Zentrum:",
+ "Change Composition": "Zusammensetzung ändern",
+ "Change Layer Details": "Layerdetails ändern",
+ "Change Opacity": "Deckkraft ändern",
+ "Channel:": "Kanal:",
+ "Circle": "Kreis",
+ "Clarendon": "Clarendon",
+ "Clear": "Löschen",
+ "Clear Selection": "Auswahl löschen",
+ "Clone Tool": "Klon-Tool",
+ "Clone count:": "Klonanzahl:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Das Klon-Tool ist für das in der Größe geänderte Bild deaktiviert. Bitte zuerst rastern.",
+ "Cloned edges": "Klonierte Kanten",
+ "Close": "Schließen",
+ "Color #": "Farbe #",
+ "Color Corrections": "Farbkorrekturen",
+ "Color Palette": "Farbpalette",
+ "Color Zoom": "Farbzoom",
+ "Color alpha value can not be zero.": "Farb-Alpha-Wert kann nicht Null sein.",
+ "Color to Alpha": "Farbe zu Alpha",
+ "Color zoom": "Farbzoom",
+ "Color:": "Farbe:",
+ "Colors": "Farben",
+ "Colors:": "Farben:",
+ "Common Filters": "Allgemeine Filter",
+ "Composition": "Zusammensetzung",
+ "Composition:": "Zusammensetzung:",
+ "Content Fill": "Inhalt ausfüllen",
+ "Contrast": "Kontrast",
+ "Contrast:": "Kontrast:",
+ "Convert layer to raster": "Konvertieren Sie die Ebene in ein Raster",
+ "Convert to Raster": "In Raster konvertieren",
+ "Copy Selection": "Auswahl kopieren",
+ "Copy to Clipboard": "In die Zwischenablage kopieren",
+ "Courier": "Kurier",
+ "Crop Tool": "Freistellungswerkzeug",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Das Zuschneiden auf einer gedrehten Ebene wird nicht unterstützt. Konvertieren Sie es in Raster, um fortzufahren.",
+ "Ctrl + C": "Strg + C",
+ "Ctrl+A": "Strg + A.",
+ "Ctrl+C": "Strg + C.",
+ "Ctrl+P": "Strg+P",
+ "Ctrl+V": "Strg + V",
+ "Ctrl+Y": "Strg + Y.",
+ "Ctrl+Z": "Strg + Z.",
+ "Current": "Aktuell",
+ "Current Color Preview": "Aktuelle Farbvorschau",
+ "Custom": "Individuell",
+ "Data URL": "Daten-URL",
+ "Data URL:": "Daten-URL:",
+ "Decrease": "Verringern",
+ "Decrease Color Depth": "Farbtiefe verringern",
+ "Degree:": "Grad:",
+ "Del": "Del",
+ "Delete": "Löschen",
+ "Delete Selection": "Auswahl löschen",
+ "Denoise": "Denoise",
+ "Desaturate Tool": "Entsättigtes Werkzeug",
+ "Description:": "Beschreibung:",
+ "Deutsch": "Deutsch",
+ "Differences": "Unterschiede",
+ "Differences Down": "Unterschiede nach unten",
+ "Direction:": "Richtung:",
+ "Dither": "Dither",
+ "Dithering:": "Dithering:",
+ "Dominant color:": "Dominierende Farbe:",
+ "Dot Screen": "Punkt-Bildschirm",
+ "Down": "Runter",
+ "Duplicate": "Duplikat",
+ "Duplicate Layer": "Ebene duplizieren",
+ "Duplicate layer": "Ebene duplizieren",
+ "Dynamic": "Dynamisch",
+ "Edge": "Kante",
+ "Edit": "Bearbeiten",
+ "Edit text...": "Text bearbeiten...",
+ "Effect browser": "Effektbrowser",
+ "Effects": "Filter",
+ "Effects browser": "Effektbrowser",
+ "Email:": "Email:",
+ "Emboss": "Prägen",
+ "Empty selection": "Leere Auswahl",
+ "Empty selection or type not image.": "Leere Auswahl oder kein Bildtyp.",
+ "Enable autoresize:": "Automatische Größenänderung aktivieren:",
+ "End": "Ende",
+ "English": "Englisch",
+ "English (UK)": "Englisch UK)",
+ "Enrich": "Bereichern",
+ "Enter": "Eingeben",
+ "Erase Tool": "Löschwerkzeug",
+ "Erase on rotate object is disabled. Please rasterize first.": "„Löschen beim Drehen des Objekts“ ist deaktiviert. Bitte zuerst rastern.",
+ "Error": "Fehler",
+ "Error connecting to service.": "Fehler beim Verbinden mit dem Dienst.",
+ "Error loading the list of fonts from Google.": "Fehler beim Laden der Schriftartenliste von Google.",
+ "Error registering service worker": "Fehler beim Registrieren des Servicemitarbeiters",
+ "Error: can not find filter:": "Fehler: Filter kann nicht gefunden werden:",
+ "Error: can not find layer with id:": "Fehler: Layer mit ID kann nicht gefunden werden:",
+ "Error: missing details event target": "Fehler: Details zum Ereignis fehlen",
+ "Error: unknown layer type:": "Fehler: unbekannter Layertyp:",
+ "Error: unsupported attribute type:": "Fehler: nicht unterstützter Attributtyp:",
+ "Esc": "Esc",
+ "Escape": "Flucht",
+ "Español": "Spanisch",
+ "Expand edges": "Kanten erweitern",
+ "Exponent:": "Exponent:",
+ "Export": "Export",
+ "External": "Extern",
+ "Factor:": "Faktor:",
+ "File": "Datei",
+ "File name:": "Dateiname:",
+ "File size:": "Dateigröße:",
+ "Fill": "Füllen",
+ "Fill Tool": "Füllwerkzeug",
+ "Fit": "Passen",
+ "Fit Window": "Fenster einpassen",
+ "Fit window": "Fenster einbauen",
+ "Flatten Image": "Zu einer Ebene vereinigen",
+ "Flip": "Spiegeln",
+ "FloydSteinberg-serpentine": "FloydSteinberg-Serpentin",
+ "Font": "Schriftart",
+ "Français": "Français",
+ "Full HD, 1080p": "Volles HD, 1080p",
+ "Full Screen": "Ganzer Bildschirm",
+ "Full layers data": "Vollständige Layer-Daten",
+ "Gap:": "Spalt:",
+ "Gaussian Blur": "Gaußscher Weichzeichner",
+ "Gif delay:": "Gif Verzögerung:",
+ "Gingham": "Gingham",
+ "GitHub:": "GitHub:",
+ "Gradient Radius:": "Gradient Radius:",
+ "Grains": "Körner",
+ "Graphics Interchange Format": "Grafikaustauschformat",
+ "Gray": "Grau",
+ "Grayscale": "Graustufen",
+ "Greek": "griechisch",
+ "Green": "Grün",
+ "Green channel:": "Grüner Kanal:",
+ "Greyscale:": "Graustufen:",
+ "Grid": "Raster",
+ "Grid on\/off": "Raster ein \/ aus",
+ "Guides": "Führer",
+ "Guides enabled.": "Anleitungen aktiviert.",
+ "H Radius:": "H Radius:",
+ "H. Align:": "H. Ausrichten:",
+ "Heatmap": "Heatmap",
+ "Height (%):": "Höhe (%):",
+ "Height:": "Höhe:",
+ "Help": "Hilfe",
+ "Helvetica": "Helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Verhexen",
+ "Hide": "Verstecken",
+ "Histogram": "Histogramm",
+ "Histogram:": "Histogramm:",
+ "Home": "Zuhause",
+ "Horizontal": "Horizontal",
+ "Horizontal Alignment": "Horizontale Ausrichtung",
+ "Horizontal blur:": "Horizontale Unschärfe:",
+ "Horizontal:": "Horizontal:",
+ "Hue": "Farbton",
+ "Hue Rotate": "Farbton drehen",
+ "Hue:": "Farbton:",
+ "Image": "Bild",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Bilddaten mit mehreren Ebenen. Kann mit miniPaint geöffnet werden -",
+ "Impact": "Auswirkung",
+ "In proportion:": "Im Verhältnis:",
+ "Increase": "Erhöhen, ansteigen",
+ "Information": "Information",
+ "Inkwell": "Tintenfass",
+ "Insert": "Einfügen",
+ "Insert guides": "Führungen einfügen",
+ "Insert new layer": "Neue Ebene einfügen",
+ "Instagram Filters": "Instagram Filter",
+ "Invalid Hex Code": "Ungültiger Hex-Code",
+ "Italiano": "Italienisch",
+ "JPG\/JPEG Format": "JPG \/ JPEG-Format",
+ "Kerning:": "Kerning:",
+ "Key-Points": "Schlüsselpunkte",
+ "KeyU": "KeyU",
+ "Keyboard Shortcuts": "Tastatürkürzel",
+ "Keyword:": "Stichwort:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Landschaft",
+ "Language": "Sprache",
+ "Last modified": "Zuletzt bearbeitet",
+ "Layer": "Schicht",
+ "Layer details": "Ebenendetails",
+ "Layer is empty.": "Die Ebene ist leer.",
+ "Layer is not compatible with resize": "Die Ebene ist nicht mit der Größenänderung kompatibel",
+ "Layer is vector, convert it to raster to apply this tool.": "Die Ebene ist ein Vektor. Konvertieren Sie sie in ein Raster, um dieses Werkzeug anzuwenden.",
+ "Layers": "Ebenen",
+ "Layers:": "Ebenen:",
+ "Layout:": "Layout:",
+ "Left": "Links",
+ "Left to Right": "Links nach rechts",
+ "Level:": "Niveau:",
+ "Levels:": "Stufen:",
+ "Lietuvių": "Litauisch",
+ "Lo-fi": "Lo-Fi",
+ "Luminance:": "Leuchtdichte:",
+ "Luminosity": "Helligkeit",
+ "Magic Eraser Tool": "Magic Eraser Tool",
+ "Merge Down": "Nach unten vereinigen",
+ "Merge Layers": "Ebenen zusammenführen",
+ "Merged": "Zusammengeführt",
+ "Metrics": "Metriken",
+ "Middle": "Mitte",
+ "Missing at least 1 size parameter.": "Mindestens 1 Größenparameter fehlt.",
+ "Missing permissions to write to Clipboard.cc": "Fehlende Berechtigungen zum Schreiben in Clipboard.cc",
+ "Mode:": "Modus:",
+ "Module function not found.": "Modulfunktion nicht gefunden.",
+ "Modules class not found:": "Modulklasse nicht gefunden:",
+ "Monospace": "Monospace",
+ "Mosaic": "Mosaik",
+ "Mouse:": "Maus:",
+ "Move": "Bewegung",
+ "Move Layer": "Ebene verschieben",
+ "Move layer down": "Ebene nach unten verschieben",
+ "Move layer up": "Ebene nach oben verschieben",
+ "Name:": "Name:",
+ "Negative": "Negativ",
+ "New": "Neu",
+ "New Bezier Layer": "Neue Bezier-Ebene",
+ "New Brush Layer": "Neue Pinselschicht",
+ "New Ellipse Layer": "Neue Ellipsenebene",
+ "New File": "Neue Datei",
+ "New Gradient Layer": "Neue Verlaufsebene",
+ "New Layer": "Neue Schicht",
+ "New Line Layer": "Neue Linienebene",
+ "New Pencil Layer": "Neue Bleistiftebene",
+ "New Polygon Layer": "Neue Polygonebene",
+ "New Rectangle Layer": "Neue Rechteckschicht",
+ "New Text Layer": "Neue Textebene",
+ "New file": "Neue Datei",
+ "New from Selection": "Neu von Auswahl",
+ "New layer": "Neue Ebene",
+ "Next": "Nächste",
+ "Night Vision": "Nachtsicht",
+ "None": "Keiner",
+ "Nothing is selected.": "Nichts ausgewählt.",
+ "Offset X:": "Offset X:",
+ "Offset Y:": "Offset Y:",
+ "Oil": "Öl",
+ "Ok": "OK",
+ "Online image editor.": "Online Bildbearbeitung.",
+ "Opacity": "Opazität",
+ "Opacity:": "Opazität:",
+ "Open": "Öffnen",
+ "Open Data URL": "Öffnen Sie die Daten-URL",
+ "Open Directory": "Verzeichnis öffnen",
+ "Open File": "Datei öffnen",
+ "Open File Data URL": "Öffnen Sie die Dateidaten-URL",
+ "Open File URL": "Öffnen Sie die Datei-URL",
+ "Open File Webcam": "Öffnen Sie die Datei-Webcam",
+ "Open Image": "Bild öffnen",
+ "Open JSON File": "Öffnen Sie die JSON-Datei",
+ "Open Test Template": "Öffnen Sie die Testvorlage",
+ "Open URL": "Öffne URL",
+ "Open data URL": "Öffnen Sie die Daten-URL",
+ "Open from Webcam": "Von der Webcam öffnen",
+ "Original Size": "Originalgröße",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Bild in SVG konvertieren",
+ "PageDown": "Bild nach unten",
+ "PageUp": "PageUp",
+ "Palette": "Palette",
+ "Parameter #1:": "Parameter # 1:",
+ "Parameter #2:": "Parameter # 2:",
+ "Paste": "Einfügen",
+ "Pencil": "Bleistift",
+ "Percentage:": "Prozentsatz:",
+ "Pixels:": "Pixel:",
+ "Placeholder comment for color channels": "Platzhalterkommentar für Farbkanäle",
+ "Placeholder comment for color picker": "Platzhalterkommentar für Farbwähler",
+ "Placeholder comment for color swatches": "Platzhalterkommentar für Farbfelder",
+ "Portable Network Graphics": "Tragbare Netzwerkgrafiken",
+ "Portrait": "Porträt",
+ "Português": "Português",
+ "Position:": "Position:",
+ "Power:": "Leistung:",
+ "Preview": "Vorschau",
+ "Previous": "Bisherige",
+ "Previous layer must be image, convert it to raster to apply this tool.": "Die vorherige Ebene muss ein Bild sein, wandeln Sie sie in ein Raster um, um dieses Werkzeug anzuwenden.",
+ "Print": "Drucken",
+ "Quality:": "Qualität:",
+ "Quick Load": "Schnell laden",
+ "Quick Save": "Schnellspeichern",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Bildhintergrund entfernen",
+ "Radial": "Radial",
+ "Radial gradient": "Radialer Verlauf",
+ "Radius:": "Radius:",
+ "Range:": "Angebot:",
+ "Red": "Rot",
+ "Red channel:": "Roter Kanal:",
+ "Redo": "Wiederholen",
+ "Remove all": "Alles entfernen",
+ "Rename": "Umbenennen",
+ "Rename Layer": "Ebene umbenennen",
+ "Rendered with errors.": "Mit Fehlern gerendert.",
+ "Rendering...": "Rendern ...",
+ "Replace Color": "Farbe ersetzen",
+ "Replace color": "Farbe ersetzen",
+ "Replacement:": "Ersatz:",
+ "Report Issues": "Probleme melden",
+ "Reset": "Zurücksetzen",
+ "Resize": "Größe ändern",
+ "Resize Boundary": "Größe der Grenze ändern",
+ "Resize Layer": "Ändern Sie die Größe der Ebene",
+ "Resize Layers": "Ändern Sie die Größe von Ebenen",
+ "Resize Text Layer": "Ändern Sie die Größe der Textebene",
+ "Resized as background": "Größe als Hintergrund",
+ "Resized:": "Größe geändert:",
+ "Resolution:": "Auflösung:",
+ "Restore Alpha": "Alpha wiederherstellen",
+ "Right": "Recht",
+ "Right angle:": "Rechter Winkel:",
+ "Right to Left": "Rechts nach links",
+ "Rotate": "Drehen",
+ "Rotate Layer": "Ebene drehen",
+ "Rotate is not supported on this type of object. Convert to raster?": "Drehen wird bei diesem Objekttyp nicht unterstützt. In Raster konvertieren?",
+ "Rotate left": "Nach links drehen",
+ "Rotate:": "Drehen:",
+ "Ruler": "Herrscher",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - Bilder komprimieren und vergleichen",
+ "Saturate": "Sättigen",
+ "Saturation": "Sättigung",
+ "Saturation:": "Sättigung:",
+ "Save As": "Speichern als",
+ "Save As Data URL": "Als Daten-URL speichern",
+ "Save as": "Speichern als",
+ "Save as type:": "Speichern unter:",
+ "Save layers:": "Ebenen speichern:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "Das Skalieren wird in Hermite mit Lanczos nicht unterstützt.",
+ "Scroll down": "Runterscrollen",
+ "Scroll up": "Hochscrollen",
+ "Search": "Suche",
+ "Search Images": "Bilder suchen",
+ "Search for Font": "Suchen Sie nach Schriftart",
+ "Search:": "Suchen:",
+ "Select All": "Alles auswählen",
+ "Select Text Layer": "Wählen Sie Textebene",
+ "Select object tool": "Wählen Sie das Objektwerkzeug aus",
+ "Selected": "Ausgewählt",
+ "Selection Tool": "Auswahlwerkzeug",
+ "Sensitivity:": "Empfindlichkeit:",
+ "Separated": "Getrennt",
+ "Separated (original types)": "Getrennt (Originaltypen)",
+ "Sepia": "Sepia",
+ "Set Image Size": "Stellen Sie die Bildgröße ein",
+ "Settings": "Einstellungen",
+ "Shadow": "Schatten",
+ "Shapes": "Formen",
+ "Shapes (H)": "Formen (H)",
+ "Sharpen": "Schärfen",
+ "Sharpen Tool": "Werkzeug schärfen",
+ "Sharpen:": "Schärfen:",
+ "Shift + S": "Umschalt + S",
+ "Shortcut Key:": "Tastenkürzel:",
+ "Show": "Zeigen",
+ "Show \/ Hide": "Anzeigen Ausblenden",
+ "Show file size:": "Dateigröße anzeigen:",
+ "Simple": "Einfach",
+ "Size is too big, max": "Größe ist zu groß, max",
+ "Size:": "Größe:",
+ "Skip - layer must be image.": "Überspringen - Ebene muss ein Bild sein.",
+ "Solarize": "Solarisieren",
+ "Sorry, cold not load getUserMedia() data:": "Sorry, kalt getUserMedia () Daten nicht laden:",
+ "Sorry, image could not be loaded.": "Das Bild konnte leider nicht geladen werden.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Entschuldigung, Bild konnte nicht geladen werden. Versuchen Sie, das Bild zu kopieren und einzufügen.",
+ "Sorry, image is too big, max 5 MB.": "Entschuldigung, das Bild ist zu groß, maximal 5 MB.",
+ "Source coordinates saved.": "Quellkoordinaten gespeichert.",
+ "Source is empty, right click on image or use long press to save source position.": "Quelle ist leer, klicken Sie mit der rechten Maustaste auf das Bild oder drücken Sie lange, um die Position der Quelle zu speichern.",
+ "Sprites": "Sprites",
+ "Square": "Rechteck",
+ "Stream:": "Strom:",
+ "Strength:": "Stärke:",
+ "Strict": "Streng",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - Komprimiert PNG und JPEG",
+ "Tab": "Tab",
+ "Tag Image File Format": "Markieren Sie das Bilddateiformat",
+ "Tahoma": "Tahoma",
+ "Target:": "Ziel:",
+ "The quick brown fox jumps over the lazy dog.": "Der schnelle Braunfuchs springt über den faulen Hund.",
+ "There": "Dort",
+ "There are no layers behind.": "Es gibt keine Ebenen dahinter.",
+ "There is only 1 layer.": "Es gibt nur 1 Ebene.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Diese Ebene muss ein Bild enthalten. Bitte konvertieren Sie es in ein Raster, um dieses Tool anzuwenden.",
+ "Tilt Shift": "Neigung Verschiebung",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Toaster",
+ "Toggle": "Umschalten",
+ "Toggle Color Channels": "Farbkanäle umschalten",
+ "Toggle Color Picker": "Farbwähler umschalten",
+ "Toggle Menu": "Menü umschalten",
+ "Toggle Swatches": "Farbfelder umschalten",
+ "Tools": "Werkzeuge",
+ "Top": "oben",
+ "Top to Bottom": "Oben nach unten",
+ "Total pixels:": "Gesamtpixel:",
+ "Translate": "Übersetzen",
+ "Translate Layer": "Ebene übersetzen",
+ "Translate error, can not find dictionary:": "Fehler beim Übersetzen, Wörterbuch nicht gefunden:",
+ "Transparent:": "Transparent:",
+ "Trim": "Trimmen",
+ "Trim Layers": "Schichten schneiden",
+ "Trim borders:": "Rand schneiden:",
+ "Trim layer:": "Trim-Ebene:",
+ "Trim white color?": "Trim weiße Farbe?",
+ "Type:": "Typ:",
+ "Türkçe": "Türkçe",
+ "Undo": "Rückgängig machen",
+ "Unique colors:": "Einzigartige Farben:",
+ "Up": "Oben",
+ "Update": "Aktualisieren",
+ "Update Brush Layer": "Pinselebene aktualisieren",
+ "Update Pencil Layer": "Bleistiftebene aktualisieren",
+ "Update guides": "Update-Anleitungen",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Verwenden Sie die Tastenkombination Strg + V zum Einfügen aus der Zwischenablage.",
+ "V Radius:": "V-Radius:",
+ "V. Align:": "V. Ausrichten:",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "Ausführung:",
+ "Vertical": "Vertikal",
+ "Vertical Alignment": "Vertikale Ausrichtung",
+ "Vertical blur:": "Vertikale Unschärfe:",
+ "Vertical:": "Vertikal:",
+ "Vibrance": "Dynamik",
+ "View": "Sicht",
+ "Vignette": "Vignette",
+ "ViliusL": "ViliusL",
+ "Vintage": "Vintage",
+ "Webcam": "Webcam",
+ "Webcam #": "Webcam #",
+ "Website:": "Webseite:",
+ "Weppy File Format": "Weppy Dateiformat",
+ "Width (%):": "Breite (%):",
+ "Width:": "Breite:",
+ "Windows Bitmap": "Windows Bitmap",
+ "Word": "Wort",
+ "Word + Letter": "Wort + Brief",
+ "Wrap At:": "Wrap At:",
+ "Wrap:": "Wickeln:",
+ "Wrong dimensions": "Falsche Abmessungen",
+ "Wrong file type, must be image or json.": "Falscher Dateityp, muss image oder json sein.",
+ "X end:": "X Ende:",
+ "X position:": "X-Position:",
+ "X start:": "X Start:",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Y Ende:",
+ "Y position:": "Y-Position:",
+ "Y start:": "Y Start:",
+ "You can also drag and drop items into browser.": "Sie können Objekte auch per Drag & Drop in den Browser ziehen.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Ihr Browser unterstützt kein Canvas oder JavaScript ist nicht aktiviert.",
+ "Your browser does not support this format.": "Ihr Browser unterstützt dieses Format nicht.",
+ "Your search did not match any images.": "Ihre Suche hat keine Bilder gefunden.",
+ "Zoom": "Zoomen",
+ "Zoom Blur": "Zoom-Unschärfe",
+ "Zoom In": "Hineinzoomen",
+ "Zoom Out": "Herauszoomen",
+ "Zoom blur": "Zoom-Unschärfe",
+ "Zoom in": "Hineinzoomen",
+ "Zoom out": "Herauszoomen",
+ "Zoom:": "Zoomen:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/el.json b/paintplus/frontend/src/js/languages/el.json
new file mode 100644
index 0000000..f504afa
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/el.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Προέκυψε ένα πρόβλημα κατά την αφαίρεση του ιστορικού αναίρεσης",
+ "About": "Σχετικά",
+ "Active": "Ενεργό",
+ "Aden": "Άντεν",
+ "Advanced": "Προχωρημένα",
+ "All": "Όλα",
+ "Alpha": "Άλφα",
+ "Alpha:": "Άλφα:",
+ "Anonymous": "Ανώνυμο",
+ "Anti aliasing": "Εξομάλυνση",
+ "Application markup may have changed,": "Η σήμανση της εφαρμογής μπορεί να έχει αλλάξει,",
+ "Arial": "Άριαλ",
+ "Arrow": "Βέλος",
+ "ArrowDown": "Κάτω βέλος",
+ "ArrowLeft": "Αριστερό βέλος",
+ "ArrowRight": "Δεξί βέλος",
+ "ArrowUp": "Πάνω βέλος",
+ "Author:": "Δημιουργός",
+ "Auto Adjust Colors": "Αυτόματη ρύθμιση χρωμάτων",
+ "Auto Kerning": "Αυτόματο διάστημα χαρακτήρων",
+ "Average:": "Μέσο",
+ "Backspace": "Οπισθοδρόμηση",
+ "Base": "Βάση",
+ "Basic": "Βασικό",
+ "Black and White": "Μαύρο και Άσπρο",
+ "Blue": "Μπλε",
+ "Blue channel:": "Μπλε κανάλι",
+ "Blueprint": "αποτύπωμα",
+ "Blur Radius:": "Ακτίνα θολούρας",
+ "Blur Tool": "Εργαλείο θολούρας",
+ "Blur power:": "Δύναμη θολούρας",
+ "Borders": "Όρια",
+ "Bottom": "Κάτω",
+ "Bottom to Top": "Κάτω προς πάνω",
+ "Bounds:": "Περιορισμοί",
+ "Box": "Κουτί",
+ "Box Blur": "Κουτί θόλωσης",
+ "Box blur": "Κουτί θόλωσης",
+ "Brightness": "Φωτεινότητα",
+ "Brightness:": "Φωτεινότητα",
+ "Bulge\/Pinch Tool": "Εργαλείο εξογκώματος \/ Τσιμπήματος",
+ "Burn": "Καίω",
+ "Can not animate 1 layer.": "Δεν μπορεί να αναπαράγει ένα επίπεδο",
+ "Can not find previous layer.": "Δεν μπορεί να βρεί το προηγούμενο επίπεδο",
+ "Can not use this tool on current layer: image already takes all area.": "Δεν είναι δυνατή η χρήση αυτού του εργαλείου στο τρέχον επίπεδο: η εικόνα καταλαμβάνει ήδη όλη την περιοχή.",
+ "Cancel": "Ακύρωση",
+ "Canvas Size": "Μέγεθος καμβά",
+ "Center": "Κέντρο",
+ "Center x:": "Κέντρο Χ",
+ "Center y:": "Κέντρο Υ",
+ "Center:": "Κέντρο",
+ "Change Composition": "Αλλαγή Σύνθεσης",
+ "Change Layer Details": "Λεπτομέρειες αλλαγής επιπέδου",
+ "Change Opacity": "Αλλαγή αδιαφάνειας",
+ "Channel:": "Κανάλια",
+ "Circle": "Κύκλος",
+ "Clarendon": "Κλαρεντόν",
+ "Clear": "Καθαρισμός",
+ "Clear Selection": "Καθαρισμός επιλογής",
+ "Clone Tool": "Εργαλείο κλωνοποίησης",
+ "Clone count:": "Μετρητής Κλώνων",
+ "Clone tool disabled for resized image. Please rasterize first.": "Το εργαλείο κλωνοποίησης απενεργοποιήθηκε για αλλαγή μεγέθους εικόνας. Παρακαλώ ραστεροποιήστε πρώτα.",
+ "Cloned edges": "Άκρες κλώνου",
+ "Close": "Κλείσε",
+ "Color #": "Χρώμα #",
+ "Color Corrections": "Διορθώσεις χρώματος",
+ "Color Palette": "Παλέτα χρώματος",
+ "Color Zoom": "Εστίαση χρώματος",
+ "Color alpha value can not be zero.": "Η τιμή ΑΛΦΑ στο χρώμα δεν μπορεί να είναι μηδέν",
+ "Color to Alpha": "Χρώμα σε ΑΛΦΑ",
+ "Color zoom": "Εστίαση χρώματος",
+ "Color:": "Χρώμα",
+ "Colors": "Χρώματα",
+ "Colors:": "Χρώματα",
+ "Common Filters": "Κοινά φίλτρα",
+ "Composition": "Σύνθεση",
+ "Composition:": "Σύνθεση",
+ "Content Fill": "Γέμισμα περιεχομένου",
+ "Contrast": "Αντίθεση",
+ "Contrast:": "Αντίθεση",
+ "Convert layer to raster": "Μετατροπή στρώματος σε ράστερ",
+ "Convert to Raster": "Μετατροπή σε πίνακα τιμών",
+ "Copy Selection": "Αντιγραφή επιλογής",
+ "Copy to Clipboard": "Αντιγραφή στο πρόχειρο",
+ "Courier": "Μεταφορέας",
+ "Crop Tool": "Εργαλείο αποκοπής",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Η αποκοπή σε περιστραμμένο επίπεδο δεν υποστηρίζεται. Μετατρέψτε το σε πίνακα τιμών για να συνεχίσετε",
+ "Ctrl + C": "Ctrl + C",
+ "Ctrl+A": "Ctrl+A",
+ "Ctrl+C": "Ctrl+C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl+V",
+ "Ctrl+Y": "Ctrl+Y",
+ "Ctrl+Z": "Ctrl+Z",
+ "Current": "Τρέχον",
+ "Current Color Preview": "Τρέχουσα προεπισκόπηση χρώματος",
+ "Custom": "Προεπιλεγμένο",
+ "Data URL": "Δεδομένα URL",
+ "Data URL:": "Δεδομένα URL",
+ "Decrease": "Μείωση",
+ "Decrease Color Depth": "Μείωση βάθους χρώματος",
+ "Degree:": "Βαθμός",
+ "Del": "Διαγρ",
+ "Delete": "Διαγραφή",
+ "Delete Selection": "Διαγραφή επιλογής",
+ "Denoise": "Αφαίρεση θορύβου",
+ "Desaturate Tool": "Εργαλείο αποκορεσμού",
+ "Description:": "Περιγραφή",
+ "Deutsch": "Γερμανικά",
+ "Differences": "Διαφορές",
+ "Differences Down": "Διαφορές κάτω",
+ "Direction:": "Κατεύθυνση",
+ "Dither": "Μείωση παραμόρφωσης σήματος χαμηλού πλάτους",
+ "Dithering:": "Μείωση παραμόρφωσης σήματος χαμηλού πλάτους",
+ "Dominant color:": "Κυρίαρχο χρώμα:",
+ "Dot Screen": "Στίγμα οθόνης",
+ "Down": "Κάτω",
+ "Duplicate": "Διπλασίασε",
+ "Duplicate Layer": "Διπλασίασε επίπεδο",
+ "Duplicate layer": "Διπλότυπο στρώμα",
+ "Dynamic": "Δυναμικό",
+ "Edge": "Αιχμή",
+ "Edit": "Επεξεργασία",
+ "Edit text...": "Επεξεργασία κειμένου",
+ "Effect browser": "Κατάλογος εφέ",
+ "Effects": "εφέ",
+ "Effects browser": "Κατάλογος εφέ",
+ "Email:": "μέιλ",
+ "Emboss": "Στάμπα",
+ "Empty selection": "Κενή επιλογή",
+ "Empty selection or type not image.": "Κενή επιλογή ή όχι τύπος εικόνας",
+ "Enable autoresize:": "Ενεργοποίηση αυτόματου μεγέθους:",
+ "End": "Τέλος",
+ "English": "Αγγλικά",
+ "English (UK)": "Αγγλικά (Ηνωμένο Βασίλειο)",
+ "Enrich": "Εμπλουτισμός",
+ "Enter": "Εισαγωγή",
+ "Erase Tool": "Εργαλείο διαγραφής",
+ "Erase on rotate object is disabled. Please rasterize first.": "Η διαγραφή στο περιστρεφόμενο αντικείμενο είναι απενεργοποιημένη. Παρακαλώ ραστεροποιήστε πρώτα.",
+ "Error": "Σφάλμα",
+ "Error connecting to service.": "Σφάλμα σύνδεσης σε υπηρεσία",
+ "Error loading the list of fonts from Google.": "Σφάλμα κατά τη φόρτωση της λίστας γραμματοσειρών από την Google.",
+ "Error registering service worker": "Σφάλμα εγγραφής σε υπηρεσία",
+ "Error: can not find filter:": "Σφάλμα: Δεν βρίσκεται το φίλτρο",
+ "Error: can not find layer with id:": "Σφάλμα: Δεν βρίσκεται το επίπεδο",
+ "Error: missing details event target": "Σφάλμα: Λείπουν λεπτομέρειες στόχου γεγονότων",
+ "Error: unknown layer type:": "Σφάλμα: Άγνωστος τύπος επιπέδου",
+ "Error: unsupported attribute type:": "Σφάλμα: μη υποστηριζόμενος τύπος χαρακτηριστικού:",
+ "Esc": "Διαφ",
+ "Escape": "Διαφυγή",
+ "Español": "Ισπανικά",
+ "Expand edges": "Διεύρυνση άκρων",
+ "Exponent:": "Εκθέτης:Ν",
+ "Export": "Εξαγωγή",
+ "External": "Εξωτερικός",
+ "Factor:": "Παράγοντας",
+ "File": "Αρχείο",
+ "File name:": "Όνομα αρχείου",
+ "File size:": "Μέγεθος Αρχείου",
+ "Fill": "Γέμισμα",
+ "Fill Tool": "Εργαλείο Γεμίσματος",
+ "Fit": "Ταίριασμα",
+ "Fit Window": "Ταίριασμα στο παράθυρο",
+ "Fit window": "Κατάλληλο παράθυρο",
+ "Flatten Image": "Επιπεδοποίηση εικόνας",
+ "Flip": "Αναποδογύρισμα",
+ "FloydSteinberg-serpentine": "Σερπατίνα Φλόυντ - Στάινμπεργκ",
+ "Font": "Γραμματοσειρά",
+ "Français": "Γαλλικά",
+ "Full HD, 1080p": "Υψηλή ανάλυση 1080ρ",
+ "Full Screen": "Πλήρης Οθόνη",
+ "Full layers data": "Πλήρη δεδομένα επιπέδου",
+ "Gap:": "Κενό",
+ "Gaussian Blur": "Γκαουσσιανή Θόλωση",
+ "Gif delay:": "Καθυστέρηση gif",
+ "Gingham": "Gingham",
+ "GitHub:": "Github",
+ "Gradient Radius:": "Ακτίνα κλίσης",
+ "Grains": "Κόκκοι",
+ "Graphics Interchange Format": "Μορφή Μεταβαλλόμενων Γραφικών",
+ "Gray": "Γκρι",
+ "Grayscale": "Κλίμακα του Γκρι",
+ "Greek": "Ελληνικά",
+ "Green": "Πράσινο",
+ "Green channel:": "Πράσινο Κανάλι",
+ "Greyscale:": "Κλίμακα του Γκρι",
+ "Grid": "Πλέγμα",
+ "Grid on\/off": "Πλέγμα ανοικτό \/ κλειστό",
+ "Guides": "Οδηγοί",
+ "Guides enabled.": "Οδηγοί ενεργοί",
+ "H Radius:": "Οριζόντια Ακτίνα",
+ "H. Align:": "Οριζόντια Ευθυγράμμιση",
+ "Heatmap": "Χάρτης θερμότητας",
+ "Height (%):": "Ύψος (%)",
+ "Height:": "Ύψος",
+ "Help": "Βοήθεια",
+ "Helvetica": "Ελβετικά",
+ "Hermite": "Ερμητιανό",
+ "Hex": "Δεκαεξαδικό",
+ "Hide": "Κρύβω",
+ "Histogram": "Ιστόγραμμα",
+ "Histogram:": "Ιστόγραμμα",
+ "Home": "Αρχική",
+ "Horizontal": "Οριζόντιο",
+ "Horizontal Alignment": "Οριζόντια ευθυγράμμιση",
+ "Horizontal blur:": "Οριζόντια Θόλωση",
+ "Horizontal:": "Οριζόντιο",
+ "Hue": "Απόχρωση",
+ "Hue Rotate": "Περιστροφή απόχρωσης",
+ "Hue:": "Απόχρωση",
+ "Image": "Εικόνα",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Δεδομένα εικόνας με πολλά επίπεδα. Δεν μπορεί να ανοιχτεί με το minipaint",
+ "Impact": "Επίδραση",
+ "In proportion:": "Σε αναλογία:",
+ "Increase": "Αύξηση",
+ "Information": "Πληροφορίες",
+ "Inkwell": "Πηγή μελανιού",
+ "Insert": "Εισαγωγή",
+ "Insert guides": "Οδηγοί εισαγωγής",
+ "Insert new layer": "Εισαγάγετε νέο στρώμα",
+ "Instagram Filters": "Φίλτρα ίνσταγκραμ",
+ "Invalid Hex Code": "Άκυρος δεκαεξαδικός κωδικός",
+ "Italiano": "Ιταλικά",
+ "JPG\/JPEG Format": "Μορφή JPG \/ JPEG",
+ "Kerning:": "Διάστημα χαρακτήρων",
+ "Key-Points": "Σημεία - κλειδί",
+ "KeyU": "Κλειδί υ",
+ "Keyboard Shortcuts": "Συντομεύσεις πληκτρολογίου",
+ "Keyword:": "Λέξη - κλειδί",
+ "Lanczos": "Ζώνη Γλώσσας",
+ "Landscape": "Τοπίο",
+ "Language": "Γλώσσα",
+ "Last modified": "Τελευταία τροποποίηση",
+ "Layer": "Επίπεδο",
+ "Layer details": "Λεπτομέρειες επιπέδου",
+ "Layer is empty.": "Το επίπεδο είναι κενό.",
+ "Layer is not compatible with resize": "Επίπεδο μη συμβατό με αλλαγή μεγέθους",
+ "Layer is vector, convert it to raster to apply this tool.": "Το επίπεδο είναι διάνυσμα. Μετατροπή πρώτα σε πίνακα, για εφαρμογή με αυτό το εργαλείο.",
+ "Layers": "Επίπεδα",
+ "Layers:": "Επίπεδα:",
+ "Layout:": "Διάταξη:",
+ "Left": "Αριστερά",
+ "Left to Right": "Αριστερά προς δεξιά",
+ "Level:": "Επίπεδο",
+ "Levels:": "Επίπεδα",
+ "Lietuvių": "Lietuviu",
+ "Lo-fi": "Χαμηλής συχνότητας",
+ "Luminance:": "Φωτισμός",
+ "Luminosity": "Ψωτεινότητα",
+ "Magic Eraser Tool": "Εργαλείο μαγικής σβήστρας",
+ "Merge Down": "Συγχώνευση προς τα κάτω",
+ "Merge Layers": "Συγχώνευση επιπέδων",
+ "Merged": "Συγχωνευμένος",
+ "Metrics": "Μετρικό",
+ "Middle": "Μέσαίο",
+ "Missing at least 1 size parameter.": "Λείπει τουλάχιστον μία παράμετρος μεγέθους",
+ "Missing permissions to write to Clipboard.cc": "Δεν επιτρέπεται η εγγραφή στο αρχείο πρόχειρου",
+ "Mode:": "Λειτουργία",
+ "Module function not found.": "Δεν βρέθηκε η λειτουργία της προσθήκης",
+ "Modules class not found:": "Δεν βρέθηκε η κλάση της προσθήκης",
+ "Monospace": "Μονοδιάστημα",
+ "Mosaic": "Μωσαικό",
+ "Mouse:": "Ποντίκι",
+ "Move": "Μετακίνησε",
+ "Move Layer": "Επίπεδο μετακίνησης",
+ "Move layer down": "Μετακινήστε το στρώμα προς τα κάτω",
+ "Move layer up": "Μετακινήστε το στρώμα προς τα πάνω",
+ "Name:": "Όνομα",
+ "Negative": "Αρνιτικό",
+ "New": "Νέο",
+ "New Bezier Layer": "Νέο στρώμα Bezier",
+ "New Brush Layer": "Νέο επίπεδο πινέλου",
+ "New Ellipse Layer": "Νέο επίπεδο έλλειψης",
+ "New File": "Νέο αρχείο",
+ "New Gradient Layer": "Νέο επίπεδο κλίσης",
+ "New Layer": "Νέο επίπεδο",
+ "New Line Layer": "Νέο επίπεδο γραμμής",
+ "New Pencil Layer": "Νέο επίπεδο μολυβιού",
+ "New Polygon Layer": "Νέο στρώμα πολυγώνου",
+ "New Rectangle Layer": "Νέο επίπεδο ορθογωνίου",
+ "New Text Layer": "Νέο επίπεδο κειμένου",
+ "New file": "Νέο αρχείο",
+ "New from Selection": "Νέο από επιλογή...",
+ "New layer": "Νέο επίπεδο",
+ "Next": "Επόμενο",
+ "Night Vision": "Νυχτερινή όραση",
+ "None": "Κανένα",
+ "Nothing is selected.": "Δεν επιλέχθηκε τίποτα",
+ "Offset X:": "Αντιστάθμισμα Χ",
+ "Offset Y:": "Αντιστάθμισμα Υ",
+ "Oil": "Λάδι",
+ "Ok": "ΟΚ",
+ "Online image editor.": "Διαδικτυακός Επεξεργαστής εικόνας",
+ "Opacity": "Αδιαφάνεια",
+ "Opacity:": "Αδιαφανές",
+ "Open": "Άνοιγμα",
+ "Open Data URL": "Άνοιγμα URL δεδομένων",
+ "Open Directory": "Άνοιγμα καταλόγου",
+ "Open File": "Άνοιγμα αρχείου",
+ "Open File Data URL": "Άνοιγμα URL αρχείου δεδομένων",
+ "Open File URL": "Άνοιγμα URL αρχείου",
+ "Open File Webcam": "Άνοιγμα αρχείου από κάμερα",
+ "Open Image": "Άνοιγμα εικόνας",
+ "Open JSON File": "Άνοιγμα αρχείου JSON",
+ "Open Test Template": "Άνοιγμα Δοκιμαστικού Υποδείγματος",
+ "Open URL": "Άνοιγμα URL",
+ "Open data URL": "Άνοιγμα URL δεδομένων",
+ "Open from Webcam": "Άνοιγμα από κάμερα",
+ "Original Size": "Αρχικό μέγεθος",
+ "PNGTOSVG - Convert Image to SVG": "Μετατροπή εικόνας από PNG σε SVG",
+ "PageDown": "Σελίδα παρακάτω",
+ "PageUp": "Σελίδα παραπάνω",
+ "Palette": "Παλέτα",
+ "Parameter #1:": "Παράμετρος #1",
+ "Parameter #2:": "Παράμετρος #2",
+ "Paste": "Επικόλληση",
+ "Pencil": "Μολύβι",
+ "Percentage:": "Ποσοστό:",
+ "Pixels:": "Πίξελ",
+ "Placeholder comment for color channels": "Σχόλιο Κατόχου για κανάλια χρωμάτων",
+ "Placeholder comment for color picker": "Σχόλιο Κατόχου για επιλογέα χρωμάτων",
+ "Placeholder comment for color swatches": "Σχόλιο Κατόχου για δείγματα χρωμάτων",
+ "Portable Network Graphics": "Γραφικά φορητού δικτύου",
+ "Portrait": "Πορτρέτο",
+ "Português": "Πορτογαλικά",
+ "Position:": "Θέση",
+ "Power:": "Δύναμη",
+ "Preview": "Προεπισκόπηση",
+ "Previous": "Προηγούμενο",
+ "Previous layer must be image, convert it to raster to apply this tool.": "Το προηγούμενο επίπεδο πρέπει να είναι εικόνα. Μετατρέψτε το σε πίνακα, για να εφαρμοστεί αυτό το εργαλείο",
+ "Print": "Εκτύπωση",
+ "Quality:": "Ποιότητα",
+ "Quick Load": "Γρήγορο φόρτωμα",
+ "Quick Save": "Γρήγορη αποθήκευση",
+ "REMOVE.BG - Remove Image Background": "Αφαίρεση φόντου εικόνας",
+ "Radial": "Ακτινικό",
+ "Radial gradient": "Ακτινική κλίση",
+ "Radius:": "Ακτίνα",
+ "Range:": "Εύρος",
+ "Red": "Κόκκινο",
+ "Red channel:": "Κόκκινο κανάλι",
+ "Redo": "Επανάλαβε",
+ "Remove all": "Αφαίρεσε τα όλα",
+ "Rename": "Μετονομασία",
+ "Rename Layer": "Μετονομασία επιπέδου",
+ "Rendered with errors.": "Διεκπεραιώθηκε με σφάλματα",
+ "Rendering...": "Διεκπεραίωση...",
+ "Replace Color": "Αντικατάσταση χρώματος",
+ "Replace color": "Αντικατάσταση χρώματος",
+ "Replacement:": "Αντικατάσταση",
+ "Report Issues": "Αναφορά προβλημάτων",
+ "Reset": "Επαναφορά",
+ "Resize": "Αλλαγή μεγέθους",
+ "Resize Boundary": "Αλλαγή μεγέθους ορίων",
+ "Resize Layer": "Αλλαγή μεγέθους επιπέδου",
+ "Resize Layers": "Αλλαγή μεγέθους επιπέδων",
+ "Resize Text Layer": "Αλλαγή μεγέθους επιπέδου κειμένου",
+ "Resized as background": "Αλλαγή μεγέθους ως φόντο",
+ "Resized:": "Αλλαγή μεγέθους:",
+ "Resolution:": "Ανάλυση",
+ "Restore Alpha": "Επαναφορά τιμής ΑΛΦΑ",
+ "Right": "Δεξιά",
+ "Right angle:": "Ορθή γωνία",
+ "Right to Left": "Δεξιά προς αριστερά",
+ "Rotate": "Περιστροφή",
+ "Rotate Layer": "Επίπεδο περιστροφής",
+ "Rotate is not supported on this type of object. Convert to raster?": "Η περιστροφή δεν υποστηρίζεται σε αυτού του τύπου αντικείμενο. Μετατροπή σε πίνακα;",
+ "Rotate left": "Περιστροφή αριστερά",
+ "Rotate:": "Περιστροφή",
+ "Ruler": "Χάρακας",
+ "SQUOOSH - Compress and Compare Images": "Συμπίεση και σύγκριση εικόνων",
+ "Saturate": "Κορεσμός",
+ "Saturation": "Κορεσμός",
+ "Saturation:": "Κορεσμός",
+ "Save As": "Αποθήκευση ως",
+ "Save As Data URL": "Αποθήκευση ως δεδομένα URL",
+ "Save as": "Αποθήκευση ως...",
+ "Save as type:": "Αποθήκευση ως τύπος...",
+ "Save layers:": "Αποθήκευση επιπέδων",
+ "Scaling up is not supported in Hermite, using Lanczos.": "Η κλιμάκωση δεν υποστηρίζεται σε ερμητιανό πίνακα, χρησιμοποιόντας LancZos",
+ "Scroll down": "Κύλιση κάτω",
+ "Scroll up": "Κύλιση πάνω",
+ "Search": "Αναζήτηση",
+ "Search Images": "Αναζήτηση εικόνων",
+ "Search for Font": "Αναζήτηση γραμματοσειράς",
+ "Search:": "Αναζήτηση:",
+ "Select All": "Επιλογή όλων",
+ "Select Text Layer": "Επιλογή επιπέδου κειμένου",
+ "Select object tool": "Επιλογή εργαλειου αντικειμένου",
+ "Selected": "Επιλεγμένο",
+ "Selection Tool": "Εργαλείο επιλογής ",
+ "Sensitivity:": "Ευαισθησία",
+ "Separated": "Διαχωρισμένο",
+ "Separated (original types)": "Διαχωρισμένοι (πρωτότυποι τύποι)",
+ "Sepia": "Σέπια",
+ "Set Image Size": "Θέσε μέγεθος εικόνας",
+ "Settings": "Ρυθμίσεις",
+ "Shadow": "Σκιά",
+ "Shapes": "Σχήματα",
+ "Shapes (H)": "Σχήματα (Η)",
+ "Sharpen": "Όξυνση",
+ "Sharpen Tool": "Εργαλείο όξυνσης",
+ "Sharpen:": "Όξυνση",
+ "Shift + S": "Shift + S",
+ "Shortcut Key:": "Πλήκτρο συντόμευσης",
+ "Show": "προβολή",
+ "Show \/ Hide": "Εμφάνισε \/ Κρύψε",
+ "Show file size:": "Δείξε μέγεθος αρχείου",
+ "Simple": "Απλό",
+ "Size is too big, max": "Μέγεθος πέρα του μέγιστου επιτρεπτού",
+ "Size:": "Μέγεθος",
+ "Skip - layer must be image.": "Παράλειψη - Το επίπεδο πρέπει να είναι εικόνα",
+ "Solarize": "Ηλίαση",
+ "Sorry, cold not load getUserMedia() data:": "Λυπάμαι, δεν μπορώ να φορτώσω τα δεδομένα",
+ "Sorry, image could not be loaded.": "Λυπάμαι, η εικόνα δεν μπόρεσε να φορτωθεί",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Λυπάμαι, η εικόνα δεν μπόρεσε να φορτωθεί. Δοκιμάστε αντιγραφή - επικόλληση.",
+ "Sorry, image is too big, max 5 MB.": "Λυπάμαι. Πολύ μεγάλη εικόνα. Μέγιστο μέγεθος 5 ΜΒ",
+ "Source coordinates saved.": "Αποθηκεύτηκαν οι συντεταγμένες της πηγής.",
+ "Source is empty, right click on image or use long press to save source position.": "Η πηγή είναι άδεια. Κάντε δεξί κλικ στην εικόνα ή πατήστε το παρατεταμένα για να αποθηκεύσετε την θέση της πηγής.",
+ "Sprites": "Αντικείμενα.",
+ "Square": "Τετράγωνο",
+ "Stream:": "Ροή",
+ "Strength:": "Δύναμη",
+ "Strict": "Περιορισμός",
+ "TINYPNG - Compress PNG and JPEG": "Συμπίεση PNG και JPEG",
+ "Tab": "Στηλοθέτης",
+ "Tag Image File Format": "Μορφή αρχείου εικόνας",
+ "Tahoma": "Ταχόμα",
+ "Target:": "Στόχος",
+ "The quick brown fox jumps over the lazy dog.": "Η γρήγορη καφέ αλεπού πηδάει πάνω από το τεμπέλικο σκυλί.",
+ "There": "Εκεί",
+ "There are no layers behind.": "Δεν υπάρχουν επίπεδα από πίσω",
+ "There is only 1 layer.": "Υπάρχει μόνο ένα επίπεδο",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Αυτό το επίπεδο πρέπει να περιέχει μια εικόνα. Παρακαλώ μετατρέψτε την σε πίνακα για να εφαρμόσετε αυτό το εργαλέιο.",
+ "Tilt Shift": "Μετατόπιση κλίσης",
+ "Times New Roman": "Τimes New Roman",
+ "Toaster": "Τοστιέρα",
+ "Toggle": "Εναλλαγή",
+ "Toggle Color Channels": "Εναλλαγή καναλιών χρώματος",
+ "Toggle Color Picker": "Εναλλαγή διαλογέα χρώματος",
+ "Toggle Menu": "Εναλλαγή στο μενού",
+ "Toggle Swatches": "Εναλλαγή δειγμάτων",
+ "Tools": "Εργαλεία",
+ "Top": "Κορυφή",
+ "Top to Bottom": "Από πάνω προς τα κάτω",
+ "Total pixels:": "Συνολικά πίξελς",
+ "Translate": "Μετάφρασε",
+ "Translate Layer": "Μετάφρασε το επίπεδο",
+ "Translate error, can not find dictionary:": "Σφάλμα μετάφρασης. Δεν βρίσκεται (σ)το λεξικό ",
+ "Transparent:": "Διαφανές",
+ "Trim": "Κούρεμα",
+ "Trim Layers": "Κούρεμα επιπέδων",
+ "Trim borders:": "Κούρεμα ορίων",
+ "Trim layer:": "Κούρεμα επιπέδου",
+ "Trim white color?": "Κούρεμα λευκού χρώματος;",
+ "Type:": "Τύπος",
+ "Türkçe": "Τούρκικα",
+ "Undo": "Αναίρεση",
+ "Unique colors:": "Μοναδικά χρώματα",
+ "Up": "Πάνω",
+ "Update": "Ενημέρωση",
+ "Update Brush Layer": "Ενημέρωση επιπέδου πινέλου",
+ "Update Pencil Layer": "Ενημέρωση επιπέδου μολυβιού",
+ "Update guides": "Ενημέρωση οδηγιών",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Χρησιμοποίησε τη συντόμευση Ctrl+V για να επικολλήσεις από το πρόχειρο.",
+ "V Radius:": "Κατακόρυφη ακτίνα",
+ "V. Align:": "Κατακόρυφη ευθυγράμμιση",
+ "Valencia": "Βαλένθια",
+ "Verdana": "Βερντάνα",
+ "Version:": "Έκδοση",
+ "Vertical": "Κατακόρυφο",
+ "Vertical Alignment": "Κατακόρυφη ευθυγράμμιση",
+ "Vertical blur:": "Κατακόρυφη Θόλωση",
+ "Vertical:": "Κατακόρυφη",
+ "Vibrance": "Δόνηση",
+ "View": "Επισκόπηση",
+ "Vignette": "Βινιέτα",
+ "ViliusL": "ViliusL",
+ "Vintage": "Παλιομοδίτικο",
+ "Webcam": "Κάμερα",
+ "Webcam #": "Κάμερα #",
+ "Website:": "Ιστότοπος",
+ "Weppy File Format": "Μορφή αρχείου",
+ "Width (%):": "Πλάτος (%)",
+ "Width:": "Πλάτος",
+ "Windows Bitmap": "Windows bitmap (χάρτης bit)",
+ "Word": "Λέξη",
+ "Word + Letter": "Λέξη + Γράμμα",
+ "Wrap At:": "Τύλιξε στο:",
+ "Wrap:": "Τύλιξε",
+ "Wrong dimensions": "Λάθος διαστάσεις",
+ "Wrong file type, must be image or json.": "Λάθος τύπος αρχείου. Πρέπει να είναι εικόνα ή JSON",
+ "X end:": "Χ τέλος",
+ "X position:": "Χ θέση",
+ "X start:": "Χ αρχή",
+ "X-Pro II": "Χ Προ ΙΙ",
+ "Y end:": "Υ τέλος",
+ "Y position:": "Υ θέση",
+ "Y start:": "Υ αρχή",
+ "You can also drag and drop items into browser.": "Μπορείς επίσης να σύρεις αντικείμενα μέσα στο φυλλομετρητή",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Ο φυλλομετρητής σου δεν υποστηρίζει καμβά ή Javascript.",
+ "Your browser does not support this format.": "Ο φυλλομετρηρής σου δεν υποστηρίζει αυτή τη μορφή",
+ "Your search did not match any images.": "Η αναζήτηση σου δεν ταίριαξε με καμία εικόνα",
+ "Zoom": "Ζούμ (μεγένθυση - σμίκρυνση)",
+ "Zoom Blur": "Εστίαση Θολούρας",
+ "Zoom In": "Μεγένθυση",
+ "Zoom Out": "Σμίκρυνση",
+ "Zoom blur": "Εστίαση Θολούρας",
+ "Zoom in": "Μεγένθυση",
+ "Zoom out": "Σμίκρυνση",
+ "Zoom:": "Εστίαση (Ζούμ)"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/empty.json b/paintplus/frontend/src/js/languages/empty.json
new file mode 100644
index 0000000..7635943
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/empty.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "",
+ "About": "",
+ "Active": "",
+ "Aden": "",
+ "Advanced": "",
+ "All": "",
+ "Alpha": "",
+ "Alpha:": "",
+ "Anonymous": "",
+ "Anti aliasing": "",
+ "Application markup may have changed,": "",
+ "Arial": "",
+ "Arrow": "",
+ "ArrowDown": "",
+ "ArrowLeft": "",
+ "ArrowRight": "",
+ "ArrowUp": "",
+ "Author:": "",
+ "Auto Adjust Colors": "",
+ "Auto Kerning": "",
+ "Average:": "",
+ "Backspace": "",
+ "Base": "",
+ "Basic": "",
+ "Black and White": "",
+ "Blue": "",
+ "Blue channel:": "",
+ "Blueprint": "",
+ "Blur Radius:": "",
+ "Blur Tool": "",
+ "Blur power:": "",
+ "Borders": "",
+ "Bottom": "",
+ "Bottom to Top": "",
+ "Bounds:": "",
+ "Box": "",
+ "Box Blur": "",
+ "Box blur": "",
+ "Brightness": "",
+ "Brightness:": "",
+ "Bulge\/Pinch Tool": "",
+ "Burn": "",
+ "Can not animate 1 layer.": "",
+ "Can not find previous layer.": "",
+ "Can not use this tool on current layer: image already takes all area.": "",
+ "Cancel": "",
+ "Canvas Size": "",
+ "Center": "",
+ "Center x:": "",
+ "Center y:": "",
+ "Center:": "",
+ "Change Composition": "",
+ "Change Layer Details": "",
+ "Change Opacity": "",
+ "Channel:": "",
+ "Circle": "",
+ "Clarendon": "",
+ "Clear": "",
+ "Clear Selection": "",
+ "Clone Tool": "",
+ "Clone count:": "",
+ "Clone tool disabled for resized image. Please rasterize first.": "",
+ "Cloned edges": "",
+ "Close": "",
+ "Color #": "",
+ "Color Corrections": "",
+ "Color Palette": "",
+ "Color Zoom": "",
+ "Color alpha value can not be zero.": "",
+ "Color to Alpha": "",
+ "Color zoom": "",
+ "Color:": "",
+ "Colors": "",
+ "Colors:": "",
+ "Common Filters": "",
+ "Composition": "",
+ "Composition:": "",
+ "Content Fill": "",
+ "Contrast": "",
+ "Contrast:": "",
+ "Convert layer to raster": "",
+ "Convert to Raster": "",
+ "Copy Selection": "",
+ "Copy to Clipboard": "",
+ "Courier": "",
+ "Crop Tool": "",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "",
+ "Ctrl + C": "",
+ "Ctrl+A": "",
+ "Ctrl+C": "",
+ "Ctrl+P": "",
+ "Ctrl+V": "",
+ "Ctrl+Y": "",
+ "Ctrl+Z": "",
+ "Current": "",
+ "Current Color Preview": "",
+ "Custom": "",
+ "Data URL": "",
+ "Data URL:": "",
+ "Decrease": "",
+ "Decrease Color Depth": "",
+ "Degree:": "",
+ "Del": "",
+ "Delete": "",
+ "Delete Selection": "",
+ "Denoise": "",
+ "Desaturate Tool": "",
+ "Description:": "",
+ "Deutsch": "",
+ "Differences": "",
+ "Differences Down": "",
+ "Direction:": "",
+ "Dither": "",
+ "Dithering:": "",
+ "Dominant color:": "",
+ "Dot Screen": "",
+ "Down": "",
+ "Duplicate": "",
+ "Duplicate Layer": "",
+ "Duplicate layer": "",
+ "Dynamic": "",
+ "Edge": "",
+ "Edit": "",
+ "Edit text...": "",
+ "Effect browser": "",
+ "Effects": "",
+ "Effects browser": "",
+ "Email:": "",
+ "Emboss": "",
+ "Empty selection": "",
+ "Empty selection or type not image.": "",
+ "Enable autoresize:": "",
+ "End": "",
+ "English": "",
+ "English (UK)": "",
+ "Enrich": "",
+ "Enter": "",
+ "Erase Tool": "",
+ "Erase on rotate object is disabled. Please rasterize first.": "",
+ "Error": "",
+ "Error connecting to service.": "",
+ "Error loading the list of fonts from Google.": "",
+ "Error registering service worker": "",
+ "Error: can not find filter:": "",
+ "Error: can not find layer with id:": "",
+ "Error: missing details event target": "",
+ "Error: unknown layer type:": "",
+ "Error: unsupported attribute type:": "",
+ "Esc": "",
+ "Escape": "",
+ "Español": "",
+ "Expand edges": "",
+ "Exponent:": "",
+ "Export": "",
+ "External": "",
+ "Factor:": "",
+ "File": "",
+ "File name:": "",
+ "File size:": "",
+ "Fill": "",
+ "Fill Tool": "",
+ "Fit": "",
+ "Fit Window": "",
+ "Fit window": "",
+ "Flatten Image": "",
+ "Flip": "",
+ "FloydSteinberg-serpentine": "",
+ "Font": "",
+ "Français": "",
+ "Full HD, 1080p": "",
+ "Full Screen": "",
+ "Full layers data": "",
+ "Gap:": "",
+ "Gaussian Blur": "",
+ "Gif delay:": "",
+ "Gingham": "",
+ "GitHub:": "",
+ "Gradient Radius:": "",
+ "Grains": "",
+ "Graphics Interchange Format": "",
+ "Gray": "",
+ "Grayscale": "",
+ "Greek": "",
+ "Green": "",
+ "Green channel:": "",
+ "Greyscale:": "",
+ "Grid": "",
+ "Grid on\/off": "",
+ "Guides": "",
+ "Guides enabled.": "",
+ "H Radius:": "",
+ "H. Align:": "",
+ "Heatmap": "",
+ "Height (%):": "",
+ "Height:": "",
+ "Help": "",
+ "Helvetica": "",
+ "Hermite": "",
+ "Hex": "",
+ "Hide": "",
+ "Histogram": "",
+ "Histogram:": "",
+ "Home": "",
+ "Horizontal": "",
+ "Horizontal Alignment": "",
+ "Horizontal blur:": "",
+ "Horizontal:": "",
+ "Hue": "",
+ "Hue Rotate": "",
+ "Hue:": "",
+ "Image": "",
+ "Image data with multi-layers. Can be opened using miniPaint -": "",
+ "Impact": "",
+ "In proportion:": "",
+ "Increase": "",
+ "Information": "",
+ "Inkwell": "",
+ "Insert": "",
+ "Insert guides": "",
+ "Insert new layer": "",
+ "Instagram Filters": "",
+ "Invalid Hex Code": "",
+ "Italiano": "",
+ "JPG\/JPEG Format": "",
+ "Kerning:": "",
+ "Key-Points": "",
+ "KeyU": "",
+ "Keyboard Shortcuts": "",
+ "Keyword:": "",
+ "Lanczos": "",
+ "Landscape": "",
+ "Language": "",
+ "Last modified": "",
+ "Layer": "",
+ "Layer details": "",
+ "Layer is empty.": "",
+ "Layer is not compatible with resize": "",
+ "Layer is vector, convert it to raster to apply this tool.": "",
+ "Layers": "",
+ "Layers:": "",
+ "Layout:": "",
+ "Left": "",
+ "Left to Right": "",
+ "Level:": "",
+ "Levels:": "",
+ "Lietuvių": "",
+ "Lo-fi": "",
+ "Luminance:": "",
+ "Luminosity": "",
+ "Magic Eraser Tool": "",
+ "Merge Down": "",
+ "Merge Layers": "",
+ "Merged": "",
+ "Metrics": "",
+ "Middle": "",
+ "Missing at least 1 size parameter.": "",
+ "Missing permissions to write to Clipboard.cc": "",
+ "Mode:": "",
+ "Module function not found.": "",
+ "Modules class not found:": "",
+ "Monospace": "",
+ "Mosaic": "",
+ "Mouse:": "",
+ "Move": "",
+ "Move Layer": "",
+ "Move layer down": "",
+ "Move layer up": "",
+ "Name:": "",
+ "Negative": "",
+ "New": "",
+ "New Bezier Layer": "",
+ "New Brush Layer": "",
+ "New Ellipse Layer": "",
+ "New File": "",
+ "New Gradient Layer": "",
+ "New Layer": "",
+ "New Line Layer": "",
+ "New Pencil Layer": "",
+ "New Polygon Layer": "",
+ "New Rectangle Layer": "",
+ "New Text Layer": "",
+ "New file": "",
+ "New from Selection": "",
+ "New layer": "",
+ "Next": "",
+ "Night Vision": "",
+ "None": "",
+ "Nothing is selected.": "",
+ "Offset X:": "",
+ "Offset Y:": "",
+ "Oil": "",
+ "Ok": "",
+ "Online image editor.": "",
+ "Opacity": "",
+ "Opacity:": "",
+ "Open": "",
+ "Open Data URL": "",
+ "Open Directory": "",
+ "Open File": "",
+ "Open File Data URL": "",
+ "Open File URL": "",
+ "Open File Webcam": "",
+ "Open Image": "",
+ "Open JSON File": "",
+ "Open Test Template": "",
+ "Open URL": "",
+ "Open data URL": "",
+ "Open from Webcam": "",
+ "Original Size": "",
+ "PNGTOSVG - Convert Image to SVG": "",
+ "PageDown": "",
+ "PageUp": "",
+ "Palette": "",
+ "Parameter #1:": "",
+ "Parameter #2:": "",
+ "Paste": "",
+ "Pencil": "",
+ "Percentage:": "",
+ "Pixels:": "",
+ "Placeholder comment for color channels": "",
+ "Placeholder comment for color picker": "",
+ "Placeholder comment for color swatches": "",
+ "Portable Network Graphics": "",
+ "Portrait": "",
+ "Português": "",
+ "Position:": "",
+ "Power:": "",
+ "Preview": "",
+ "Previous": "",
+ "Previous layer must be image, convert it to raster to apply this tool.": "",
+ "Print": "",
+ "Quality:": "",
+ "Quick Load": "",
+ "Quick Save": "",
+ "REMOVE.BG - Remove Image Background": "",
+ "Radial": "",
+ "Radial gradient": "",
+ "Radius:": "",
+ "Range:": "",
+ "Red": "",
+ "Red channel:": "",
+ "Redo": "",
+ "Remove all": "",
+ "Rename": "",
+ "Rename Layer": "",
+ "Rendered with errors.": "",
+ "Rendering...": "",
+ "Replace Color": "",
+ "Replace color": "",
+ "Replacement:": "",
+ "Report Issues": "",
+ "Reset": "",
+ "Resize": "",
+ "Resize Boundary": "",
+ "Resize Layer": "",
+ "Resize Layers": "",
+ "Resize Text Layer": "",
+ "Resized as background": "",
+ "Resized:": "",
+ "Resolution:": "",
+ "Restore Alpha": "",
+ "Right": "",
+ "Right angle:": "",
+ "Right to Left": "",
+ "Rotate": "",
+ "Rotate Layer": "",
+ "Rotate is not supported on this type of object. Convert to raster?": "",
+ "Rotate left": "",
+ "Rotate:": "",
+ "Ruler": "",
+ "SQUOOSH - Compress and Compare Images": "",
+ "Saturate": "",
+ "Saturation": "",
+ "Saturation:": "",
+ "Save As": "",
+ "Save As Data URL": "",
+ "Save as": "",
+ "Save as type:": "",
+ "Save layers:": "",
+ "Scaling up is not supported in Hermite, using Lanczos.": "",
+ "Scroll down": "",
+ "Scroll up": "",
+ "Search": "",
+ "Search Images": "",
+ "Search for Font": "",
+ "Search:": "",
+ "Select All": "",
+ "Select Text Layer": "",
+ "Select object tool": "",
+ "Selected": "",
+ "Selection Tool": "",
+ "Sensitivity:": "",
+ "Separated": "",
+ "Separated (original types)": "",
+ "Sepia": "",
+ "Set Image Size": "",
+ "Settings": "",
+ "Shadow": "",
+ "Shapes": "",
+ "Shapes (H)": "",
+ "Sharpen": "",
+ "Sharpen Tool": "",
+ "Sharpen:": "",
+ "Shift + S": "",
+ "Shortcut Key:": "",
+ "Show": "",
+ "Show \/ Hide": "",
+ "Show file size:": "",
+ "Simple": "",
+ "Size is too big, max": "",
+ "Size:": "",
+ "Skip - layer must be image.": "",
+ "Solarize": "",
+ "Sorry, cold not load getUserMedia() data:": "",
+ "Sorry, image could not be loaded.": "",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "",
+ "Sorry, image is too big, max 5 MB.": "",
+ "Source coordinates saved.": "",
+ "Source is empty, right click on image or use long press to save source position.": "",
+ "Sprites": "",
+ "Square": "",
+ "Stream:": "",
+ "Strength:": "",
+ "Strict": "",
+ "TINYPNG - Compress PNG and JPEG": "",
+ "Tab": "",
+ "Tag Image File Format": "",
+ "Tahoma": "",
+ "Target:": "",
+ "The quick brown fox jumps over the lazy dog.": "",
+ "There": "",
+ "There are no layers behind.": "",
+ "There is only 1 layer.": "",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "",
+ "Tilt Shift": "",
+ "Times New Roman": "",
+ "Toaster": "",
+ "Toggle": "",
+ "Toggle Color Channels": "",
+ "Toggle Color Picker": "",
+ "Toggle Menu": "",
+ "Toggle Swatches": "",
+ "Tools": "",
+ "Top": "",
+ "Top to Bottom": "",
+ "Total pixels:": "",
+ "Translate": "",
+ "Translate Layer": "",
+ "Translate error, can not find dictionary:": "",
+ "Transparent:": "",
+ "Trim": "",
+ "Trim Layers": "",
+ "Trim borders:": "",
+ "Trim layer:": "",
+ "Trim white color?": "",
+ "Type:": "",
+ "Türkçe": "",
+ "Undo": "",
+ "Unique colors:": "",
+ "Up": "",
+ "Update": "",
+ "Update Brush Layer": "",
+ "Update Pencil Layer": "",
+ "Update guides": "",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "",
+ "V Radius:": "",
+ "V. Align:": "",
+ "Valencia": "",
+ "Verdana": "",
+ "Version:": "",
+ "Vertical": "",
+ "Vertical Alignment": "",
+ "Vertical blur:": "",
+ "Vertical:": "",
+ "Vibrance": "",
+ "View": "",
+ "Vignette": "",
+ "ViliusL": "",
+ "Vintage": "",
+ "Webcam": "",
+ "Webcam #": "",
+ "Website:": "",
+ "Weppy File Format": "",
+ "Width (%):": "",
+ "Width:": "",
+ "Windows Bitmap": "",
+ "Word": "",
+ "Word + Letter": "",
+ "Wrap At:": "",
+ "Wrap:": "",
+ "Wrong dimensions": "",
+ "Wrong file type, must be image or json.": "",
+ "X end:": "",
+ "X position:": "",
+ "X start:": "",
+ "X-Pro II": "",
+ "Y end:": "",
+ "Y position:": "",
+ "Y start:": "",
+ "You can also drag and drop items into browser.": "",
+ "Your browser does not support canvas or JavaScript is not enabled.": "",
+ "Your browser does not support this format.": "",
+ "Your search did not match any images.": "",
+ "Zoom": "",
+ "Zoom Blur": "",
+ "Zoom In": "",
+ "Zoom Out": "",
+ "Zoom blur": "",
+ "Zoom in": "",
+ "Zoom out": "",
+ "Zoom:": ""
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/es.json b/paintplus/frontend/src/js/languages/es.json
new file mode 100644
index 0000000..7b42758
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/es.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Ocurrió un problema al eliminar el historial de deshacer. Eso",
+ "About": "Acerca de",
+ "Active": "Activo",
+ "Aden": "Adén",
+ "Advanced": "Avanzado",
+ "All": "Todas",
+ "Alpha": "Alfa",
+ "Alpha:": "Alfa:",
+ "Anonymous": "Anónimo",
+ "Anti aliasing": "Anti aliasing",
+ "Application markup may have changed,": "Es posible que el marcado de la aplicación haya cambiado,",
+ "Arial": "Arial",
+ "Arrow": "Flecha",
+ "ArrowDown": "ArrowDown",
+ "ArrowLeft": "Flecha Izquierda",
+ "ArrowRight": "Flecha Derecha",
+ "ArrowUp": "Flecha arriba",
+ "Author:": "Autor:",
+ "Auto Adjust Colors": "Ajuste automático de colores",
+ "Auto Kerning": "Kerning automático",
+ "Average:": "Promedio:",
+ "Backspace": "Retroceso",
+ "Base": "Base",
+ "Basic": "BASIC",
+ "Black and White": "En blanco y negro",
+ "Blue": "Azul",
+ "Blue channel:": "Canal azul:",
+ "Blueprint": "Plano",
+ "Blur Radius:": "Blur Radio:",
+ "Blur Tool": "Herramienta de desenfoque",
+ "Blur power:": "Desenfoque de poder:",
+ "Borders": "Bordes",
+ "Bottom": "Fondo",
+ "Bottom to Top": "Abajo hacia arriba",
+ "Bounds:": "Límites:",
+ "Box": "Caja",
+ "Box Blur": "Caja de desenfoque",
+ "Box blur": "Caja de desenfoque",
+ "Brightness": "Brillo",
+ "Brightness:": "Brillo:",
+ "Bulge\/Pinch Tool": "Herramienta de abultamiento \/ pellizco",
+ "Burn": "Quemar",
+ "Can not animate 1 layer.": "No se puede animar 1 capa.",
+ "Can not find previous layer.": "No se puede encontrar la capa anterior.",
+ "Can not use this tool on current layer: image already takes all area.": "No se puede utilizar esta herramienta en la capa actual: la imagen ya ocupa toda el área.",
+ "Cancel": "Cancelar",
+ "Canvas Size": "Tamaño del lienzo",
+ "Center": "Centrar",
+ "Center x:": "Centro x:",
+ "Center y:": "Centro y:",
+ "Center:": "Centrar:",
+ "Change Composition": "Cambiar composición",
+ "Change Layer Details": "Cambiar los detalles de la capa",
+ "Change Opacity": "Cambiar la opacidad",
+ "Channel:": "Canal:",
+ "Circle": "Circulo",
+ "Clarendon": "Letras gruesas a la media",
+ "Clear": "Claro",
+ "Clear Selection": "Selección clara",
+ "Clone Tool": "Herramienta de clonación",
+ "Clone count:": "Recuento de clones",
+ "Clone tool disabled for resized image. Please rasterize first.": "Herramienta de clonación deshabilitada para imágenes redimensionadas. Rasterice primero.",
+ "Cloned edges": "Bordes clonados",
+ "Close": "Cerca",
+ "Color #": "Color #",
+ "Color Corrections": "Correcciones de color",
+ "Color Palette": "Paleta de color",
+ "Color Zoom": "Zoom de color",
+ "Color alpha value can not be zero.": "El valor alfa del color no puede ser cero.",
+ "Color to Alpha": "Color a alfa",
+ "Color zoom": "Zoom a color",
+ "Color:": "Color:",
+ "Colors": "Colores",
+ "Colors:": "Colores:",
+ "Common Filters": "Filtros comunes",
+ "Composition": "Composición",
+ "Composition:": "Composición:",
+ "Content Fill": "Relleno de contenido",
+ "Contrast": "Contraste",
+ "Contrast:": "Contraste:",
+ "Convert layer to raster": "Convertir capa a ráster",
+ "Convert to Raster": "Convertir a trama",
+ "Copy Selection": "Copiar selección",
+ "Copy to Clipboard": "Copiar al portapapeles",
+ "Courier": "mensajero",
+ "Crop Tool": "Herramienta de recorte",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "No se admite el recorte en la capa rotada. Conviértalo en ráster para continuar.",
+ "Ctrl + C": "Ctrl+C",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl + V",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "Corriente",
+ "Current Color Preview": "Vista previa del color actual",
+ "Custom": "Personalizado",
+ "Data URL": "URL de datos",
+ "Data URL:": "URL de datos:",
+ "Decrease": "Disminución",
+ "Decrease Color Depth": "Disminuir la profundidad de color",
+ "Degree:": "La licenciatura:",
+ "Del": "Del",
+ "Delete": "Borrar",
+ "Delete Selection": "Eliminar selección",
+ "Denoise": "Denoise",
+ "Desaturate Tool": "Herramienta de desaturar",
+ "Description:": "Descripción:",
+ "Deutsch": "Alemán",
+ "Differences": "Diferencias",
+ "Differences Down": "Diferencias hacia abajo",
+ "Direction:": "Dirección:",
+ "Dither": "Vacilar",
+ "Dithering:": "Dithering:",
+ "Dominant color:": "Color dominante:",
+ "Dot Screen": "Pantalla de puntos",
+ "Down": "Abajo",
+ "Duplicate": "Duplicar",
+ "Duplicate Layer": "Duplicar capa",
+ "Duplicate layer": "Duplicar capa",
+ "Dynamic": "Dinámica",
+ "Edge": "Borde",
+ "Edit": "Editar",
+ "Edit text...": "Editar texto...",
+ "Effect browser": "Navegador de efectos",
+ "Effects": "Efectos",
+ "Effects browser": "Navegador de efectos",
+ "Email:": "Email:",
+ "Emboss": "Realzar",
+ "Empty selection": "Selección vacía",
+ "Empty selection or type not image.": "Vaciar selección o escribir no imagen.",
+ "Enable autoresize:": "Habilitar tamaño automático:",
+ "End": "Fin",
+ "English": "Inglés",
+ "English (UK)": "Inglés del Reino Unido)",
+ "Enrich": "Enriquecer",
+ "Enter": "Entrar",
+ "Erase Tool": "Herramienta de borrado",
+ "Erase on rotate object is disabled. Please rasterize first.": "Borrar al rotar objeto está deshabilitado. Rasterice primero.",
+ "Error": "Error",
+ "Error connecting to service.": "Error al conectarse al servicio.",
+ "Error loading the list of fonts from Google.": "Error al cargar la lista de fuentes de Google.",
+ "Error registering service worker": "Error al registrar al trabajador del servicio",
+ "Error: can not find filter:": "Error: no se puede encontrar el filtro:",
+ "Error: can not find layer with id:": "Error: no se puede encontrar la capa con id:",
+ "Error: missing details event target": "Error: falta el objetivo del evento de detalles",
+ "Error: unknown layer type:": "Error: tipo de capa desconocido:",
+ "Error: unsupported attribute type:": "Error: tipo de atributo no admitido:",
+ "Esc": "Esc",
+ "Escape": "Escapar",
+ "Español": "English",
+ "Expand edges": "Expandir bordes",
+ "Exponent:": "Exponente:",
+ "Export": "Exportar",
+ "External": "Externo",
+ "Factor:": "Factor:",
+ "File": "Archivo",
+ "File name:": "Nombre del archivo:",
+ "File size:": "Tamaño del archivo:",
+ "Fill": "Llenar",
+ "Fill Tool": "Herramienta de relleno",
+ "Fit": "Ajuste",
+ "Fit Window": "Ajustar ventana",
+ "Fit window": "Ajustar ventana",
+ "Flatten Image": "Imagen aplanada",
+ "Flip": "Dar la vuelta",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpentina",
+ "Font": "Fuente",
+ "Français": "Français",
+ "Full HD, 1080p": "Full HD, 1080p",
+ "Full Screen": "Pantalla completa",
+ "Full layers data": "Datos de capas completas",
+ "Gap:": "Brecha:",
+ "Gaussian Blur": "Desenfoque gaussiano",
+ "Gif delay:": "Retraso Gif:",
+ "Gingham": "Guingán",
+ "GitHub:": "GitHub:",
+ "Gradient Radius:": "Radio de gradiente:",
+ "Grains": "Granos",
+ "Graphics Interchange Format": "formato de gráficos intercambeable",
+ "Gray": "gris",
+ "Grayscale": "Escala de grises",
+ "Greek": "Griego",
+ "Green": "Verde",
+ "Green channel:": "Canal verde:",
+ "Greyscale:": "Escala de grises:",
+ "Grid": "Cuadrícula",
+ "Grid on\/off": "Grid on \/ off",
+ "Guides": "Guías",
+ "Guides enabled.": "Guías habilitadas.",
+ "H Radius:": "H Radio:",
+ "H. Align:": "H. Alinear:",
+ "Heatmap": "Mapa de calor",
+ "Height (%):": "Altura (%):",
+ "Height:": "Altura:",
+ "Help": "Ayuda",
+ "Helvetica": "Helvética",
+ "Hermite": "Hermite",
+ "Hex": "Maleficio",
+ "Hide": "Esconder",
+ "Histogram": "Histograma",
+ "Histogram:": "Histograma:",
+ "Home": "Casa",
+ "Horizontal": "Horizontal",
+ "Horizontal Alignment": "Alineación horizontal",
+ "Horizontal blur:": "Desenfoque horizontal:",
+ "Horizontal:": "Horizontal:",
+ "Hue": "Matiz",
+ "Hue Rotate": "Hue Rotate",
+ "Hue:": "Matiz:",
+ "Image": "Imagen",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Datos de imagen con varias capas. Se puede abrir usando miniPaint -",
+ "Impact": "Impacto",
+ "In proportion:": "En proporción:",
+ "Increase": "Incrementar",
+ "Information": "Información",
+ "Inkwell": "Tintero",
+ "Insert": "Insertar",
+ "Insert guides": "Insertar guías",
+ "Insert new layer": "Insertar nueva capa",
+ "Instagram Filters": "Filtros de Instagram",
+ "Invalid Hex Code": "Código hexadecimal no válido",
+ "Italiano": "Italiano",
+ "JPG\/JPEG Format": "Formato JPG \/ JPEG",
+ "Kerning:": "Interletrado:",
+ "Key-Points": "Puntos clave",
+ "KeyU": "ClaveU",
+ "Keyboard Shortcuts": "Atajos de teclado",
+ "Keyword:": "Palabra clave:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Paisaje",
+ "Language": "Idioma",
+ "Last modified": "Última modificación",
+ "Layer": "Capa",
+ "Layer details": "Detalles de la capa",
+ "Layer is empty.": "La capa está vacía.",
+ "Layer is not compatible with resize": "La capa no es compatible con el cambio de tamaño",
+ "Layer is vector, convert it to raster to apply this tool.": "La capa es vectorial, conviértala en ráster para aplicar esta herramienta.",
+ "Layers": "Capas",
+ "Layers:": "Capas:",
+ "Layout:": "Disposición:",
+ "Left": "Izquierda",
+ "Left to Right": "De izquierda a derecha",
+ "Level:": "Nivel:",
+ "Levels:": "Niveles:",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Luminancia:",
+ "Luminosity": "Luminosidad",
+ "Magic Eraser Tool": "Herramienta de borrador mágico",
+ "Merge Down": "Fusionar",
+ "Merge Layers": "Fusionar capas",
+ "Merged": "Fusionado",
+ "Metrics": "Métrica",
+ "Middle": "Medio",
+ "Missing at least 1 size parameter.": "Falta al menos 1 parámetro de tamaño.",
+ "Missing permissions to write to Clipboard.cc": "Permisos faltantes para escribir en Clipboard.cc",
+ "Mode:": "Modo:",
+ "Module function not found.": "Función del módulo no encontrada.",
+ "Modules class not found:": "Clase de módulos no encontrada:",
+ "Monospace": "Monoespacio",
+ "Mosaic": "Mosaico",
+ "Mouse:": "Ratón:",
+ "Move": "Movimiento",
+ "Move Layer": "Mover capa",
+ "Move layer down": "Mover capa hacia abajo",
+ "Move layer up": "Mover capa hacia arriba",
+ "Name:": "Nombre:",
+ "Negative": "Negativo",
+ "New": "Nuevo",
+ "New Bezier Layer": "Nueva capa Bézier",
+ "New Brush Layer": "Nueva capa de pincel",
+ "New Ellipse Layer": "Nueva capa de elipse",
+ "New File": "Archivo nuevo",
+ "New Gradient Layer": "Nueva capa de degradado",
+ "New Layer": "Nueva capa",
+ "New Line Layer": "Nueva capa de línea",
+ "New Pencil Layer": "Nueva capa de lápiz",
+ "New Polygon Layer": "Nueva capa de polígono",
+ "New Rectangle Layer": "Nueva capa de rectángulo",
+ "New Text Layer": "Nueva capa de texto",
+ "New file": "Archivo nuevo",
+ "New from Selection": "Nuevo de la selección",
+ "New layer": "Nueva capa",
+ "Next": "Próximo",
+ "Night Vision": "Vision nocturna",
+ "None": "Ninguna",
+ "Nothing is selected.": "Nada está seleccionado.",
+ "Offset X:": "Compensación X:",
+ "Offset Y:": "Desplazamiento Y:",
+ "Oil": "Petróleo",
+ "Ok": "De acuerdo",
+ "Online image editor.": "Editor de imágenes en línea",
+ "Opacity": "Opacidad",
+ "Opacity:": "Opacidad:",
+ "Open": "Abierto",
+ "Open Data URL": "URL de datos abiertos",
+ "Open Directory": "Directorio abierto",
+ "Open File": "Abrir documento",
+ "Open File Data URL": "Abrir URL de datos de archivo",
+ "Open File URL": "Abrir URL de archivo",
+ "Open File Webcam": "Cámara web de archivos abiertos",
+ "Open Image": "Abrir imagen",
+ "Open JSON File": "Abrir archivo JSON",
+ "Open Test Template": "Plantilla de prueba abierta",
+ "Open URL": "URL abierta",
+ "Open data URL": "URL de datos abiertos",
+ "Open from Webcam": "Abrir desde la webcam",
+ "Original Size": "Tamaño original",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Convertir imagen a SVG",
+ "PageDown": "Página abajo",
+ "PageUp": "Página arriba",
+ "Palette": "Paleta",
+ "Parameter #1:": "Parámetro # 1:",
+ "Parameter #2:": "Parámetro # 2:",
+ "Paste": "Pegar",
+ "Pencil": "Lápiz",
+ "Percentage:": "Porcentaje:",
+ "Pixels:": "Píxeles:",
+ "Placeholder comment for color channels": "Comentario de marcador de posición para canales de color",
+ "Placeholder comment for color picker": "Comentario de marcador de posición para el selector de color",
+ "Placeholder comment for color swatches": "Comentario de marcador de posición para muestras de color",
+ "Portable Network Graphics": "Gráficos de red portátiles",
+ "Portrait": "Retrato",
+ "Português": "Português",
+ "Position:": "Posición:",
+ "Power:": "Poder:",
+ "Preview": "Avance",
+ "Previous": "Anterior",
+ "Previous layer must be image, convert it to raster to apply this tool.": "La capa anterior debe ser una imagen, conviértala a raster para aplicar esta herramienta.",
+ "Print": "Impresión",
+ "Quality:": "Calidad:",
+ "Quick Load": "Carga rápida",
+ "Quick Save": "Guardado rápido",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Eliminar fondo de imagen",
+ "Radial": "Radial",
+ "Radial gradient": "Gradiente radial",
+ "Radius:": "Radio:",
+ "Range:": "Distancia:",
+ "Red": "rojo",
+ "Red channel:": "Canal rojo:",
+ "Redo": "Rehacer",
+ "Remove all": "Eliminar todo",
+ "Rename": "Rebautizar",
+ "Rename Layer": "Cambiar nombre de capa",
+ "Rendered with errors.": "Rendido con errores.",
+ "Rendering...": "Representación...",
+ "Replace Color": "Reemplazar color",
+ "Replace color": "Reemplazar color",
+ "Replacement:": "Reemplazo:",
+ "Report Issues": "Informar problemas",
+ "Reset": "Reiniciar",
+ "Resize": "Cambiar el tamaño",
+ "Resize Boundary": "Cambiar tamaño de límite",
+ "Resize Layer": "Cambiar el tamaño de la capa",
+ "Resize Layers": "Cambiar el tamaño de las capas",
+ "Resize Text Layer": "Cambiar el tamaño de la capa de texto",
+ "Resized as background": "Redimensionado como fondo",
+ "Resized:": "Redimensionado:",
+ "Resolution:": "Resolución:",
+ "Restore Alpha": "Restaurar alfa",
+ "Right": "Derecha",
+ "Right angle:": "Ángulo recto:",
+ "Right to Left": "De derecha a izquierda",
+ "Rotate": "Girar",
+ "Rotate Layer": "Girar capa",
+ "Rotate is not supported on this type of object. Convert to raster?": "Girar no es compatible con este tipo de objeto. Convertir a raster?",
+ "Rotate left": "Girar a la izquierda",
+ "Rotate:": "Girar:",
+ "Ruler": "Gobernante",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH: comprime y compara imágenes",
+ "Saturate": "Saturar",
+ "Saturation": "Saturación",
+ "Saturation:": "Saturación:",
+ "Save As": "Guardar como",
+ "Save As Data URL": "Guardar como URL de datos",
+ "Save as": "Guardar como",
+ "Save as type:": "Guardar como tipo:",
+ "Save layers:": "Guardar capas:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "Hermite no admite la ampliación mediante Lanczos.",
+ "Scroll down": "Desplazarse hacia abajo",
+ "Scroll up": "Desplazarse hacia arriba",
+ "Search": "Buscar",
+ "Search Images": "Buscar imágenes",
+ "Search for Font": "Buscar fuente",
+ "Search:": "Buscar:",
+ "Select All": "Seleccionar todo",
+ "Select Text Layer": "Seleccionar capa de texto",
+ "Select object tool": "Seleccionar herramienta de objeto",
+ "Selected": "Seleccionado",
+ "Selection Tool": "Herramienta de selección",
+ "Sensitivity:": "Sensibilidad:",
+ "Separated": "Apartado",
+ "Separated (original types)": "Separados (tipos originales)",
+ "Sepia": "Sepia",
+ "Set Image Size": "Establecer tamaño de imagen",
+ "Settings": "Configuraciones",
+ "Shadow": "Sombra",
+ "Shapes": "Formas",
+ "Shapes (H)": "Formas (H)",
+ "Sharpen": "Afilar",
+ "Sharpen Tool": "Herramienta de afilado",
+ "Sharpen:": "Afilar:",
+ "Shift + S": "Mayús + S",
+ "Shortcut Key:": "Tecla de acceso directo:",
+ "Show": "Espectáculo",
+ "Show \/ Hide": "Mostrar ocultar",
+ "Show file size:": "Mostrar tamaño de archivo:",
+ "Simple": "Sencillo",
+ "Size is too big, max": "El tamaño es demasiado grande, máximo",
+ "Size:": "Tamaño:",
+ "Skip - layer must be image.": "Omitir: la capa debe ser una imagen.",
+ "Solarize": "Solarizar",
+ "Sorry, cold not load getUserMedia() data:": "Lo sentimos, no se cargan los datos de getUserMedia () en frío:",
+ "Sorry, image could not be loaded.": "Lo sentimos, no se pudo cargar la imagen.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Lo sentimos, la imagen no se pudo cargar. Intenta copiar la imagen y pégala.",
+ "Sorry, image is too big, max 5 MB.": "Lo sentimos, la imagen es demasiado grande, máximo 5 MB.",
+ "Source coordinates saved.": "Se guardaron las coordenadas de origen.",
+ "Source is empty, right click on image or use long press to save source position.": "La fuente está vacía, haga clic con el botón derecho en la imagen o presione prolongadamente para guardar la posición de la fuente.",
+ "Sprites": "Sprites",
+ "Square": "Cuadrado",
+ "Stream:": "Corriente:",
+ "Strength:": "Fuerza:",
+ "Strict": "Estricto",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - Comprimir PNG y JPEG",
+ "Tab": "Lengüeta",
+ "Tag Image File Format": "Formato de archivo de imagen de etiqueta",
+ "Tahoma": "Tahoma",
+ "Target:": "Objetivo:",
+ "The quick brown fox jumps over the lazy dog.": "El veloz zorro marrón salta sobre el perro perezoso.",
+ "There": "Allí",
+ "There are no layers behind.": "No hay capas detrás",
+ "There is only 1 layer.": "Solo hay 1 capa",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "La capa debe ser una imagen, conviértala a raster para aplicar esta herramienta.",
+ "Tilt Shift": "Cambio de inclinación",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Tostadora",
+ "Toggle": "Palanca",
+ "Toggle Color Channels": "Alternar canales de color",
+ "Toggle Color Picker": "Alternar selector de color",
+ "Toggle Menu": "Alternar menú",
+ "Toggle Swatches": "Alternar muestras",
+ "Tools": "Herramientas",
+ "Top": "Parte superior",
+ "Top to Bottom": "De arriba hacia abajo",
+ "Total pixels:": "Píxeles totales:",
+ "Translate": "Traducir",
+ "Translate Layer": "Traducir capa",
+ "Translate error, can not find dictionary:": "Error de traducción, no se puede encontrar el diccionario:",
+ "Transparent:": "Transparente:",
+ "Trim": "Recortar",
+ "Trim Layers": "Recortar capas",
+ "Trim borders:": "Recortar bordes:",
+ "Trim layer:": "Capa de ajuste:",
+ "Trim white color?": "Recortar el color blanco?",
+ "Type:": "Tipo:",
+ "Türkçe": "Türkçe",
+ "Undo": "Deshacer",
+ "Unique colors:": "Colores únicos:",
+ "Up": "Arriba",
+ "Update": "Actualizar",
+ "Update Brush Layer": "Actualizar capa de pincel",
+ "Update Pencil Layer": "Actualizar capa de lápiz",
+ "Update guides": "Guías de actualización",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Use el atajo de teclado Ctrl + V para pegar desde el Portapapeles.",
+ "V Radius:": "V Radio:",
+ "V. Align:": "V. Alinear:",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "Versión:",
+ "Vertical": "Vertical",
+ "Vertical Alignment": "Alineamiento vertical",
+ "Vertical blur:": "Desenfoque vertical:",
+ "Vertical:": "Vertical:",
+ "Vibrance": "Vibrance",
+ "View": "Vista",
+ "Vignette": "Viñeta",
+ "ViliusL": "ViliusL",
+ "Vintage": "Vendimia",
+ "Webcam": "Cámara web",
+ "Webcam #": "Cámara web #",
+ "Website:": "Sitio web:",
+ "Weppy File Format": "Formato de archivo Weppy",
+ "Width (%):": "Ancho (%):",
+ "Width:": "Anchura:",
+ "Windows Bitmap": "Mapa de bits de Windows",
+ "Word": "Palabra",
+ "Word + Letter": "Palabra + Letra",
+ "Wrap At:": "Envolver en:",
+ "Wrap:": "Envolver:",
+ "Wrong dimensions": "Dimensiones incorrectas",
+ "Wrong file type, must be image or json.": "Tipo de archivo incorrecto, debe ser imagen o json.",
+ "X end:": "X final:",
+ "X position:": "Posición X:",
+ "X start:": "X inicio:",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Final de Y:",
+ "Y position:": "Posición Y:",
+ "Y start:": "Y comienza:",
+ "You can also drag and drop items into browser.": "También puede arrastrar y soltar elementos en el navegador.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Su navegador no admite lienzo o JavaScript no está habilitado.",
+ "Your browser does not support this format.": "Su navegador no es compatible con este formato.",
+ "Your search did not match any images.": "Su búsqueda no coincide con ninguna imagen.",
+ "Zoom": "Enfocar",
+ "Zoom Blur": "Desenfoque de zoom",
+ "Zoom In": "Acercarse",
+ "Zoom Out": "Disminuir el zoom",
+ "Zoom blur": "Borroso de zoom",
+ "Zoom in": "Acercarse",
+ "Zoom out": "Disminuir el zoom",
+ "Zoom:": "Enfocar:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/fr.json b/paintplus/frontend/src/js/languages/fr.json
new file mode 100644
index 0000000..7133927
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/fr.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Un problème est survenu lors de la suppression de l'historique des annulations. Il",
+ "About": "A propos",
+ "Active": "actif",
+ "Aden": "Aden",
+ "Advanced": "Avancé",
+ "All": "Tout",
+ "Alpha": "Alpha",
+ "Alpha:": "Alpha :",
+ "Anonymous": "Anonyme",
+ "Anti aliasing": "Anticrénelage",
+ "Application markup may have changed,": "Le balisage de l'application peut avoir changé,",
+ "Arial": "Arial",
+ "Arrow": "Flèche",
+ "ArrowDown": "Flèche vers le bas",
+ "ArrowLeft": "Flèche Gauche",
+ "ArrowRight": "FlècheDroite",
+ "ArrowUp": "Flèche vers le haut",
+ "Author:": "Auteur :",
+ "Auto Adjust Colors": "Ajuster automatiquement les couleurs",
+ "Auto Kerning": "Crénage automatique",
+ "Average:": "Moyenne :",
+ "Backspace": "Retour arrière",
+ "Base": "Base",
+ "Basic": "Basique",
+ "Black and White": "Noir et blanc",
+ "Blue": "Bleu",
+ "Blue channel:": "Niveau de bleu :",
+ "Blueprint": "Plan",
+ "Blur Radius:": "Rayon de floutage :",
+ "Blur Tool": "Outil de floutage",
+ "Blur power:": "Puissance de flou:",
+ "Borders": "Cadres",
+ "Bottom": "Bas",
+ "Bottom to Top": "De bas en haut",
+ "Bounds:": "Bornes:",
+ "Box": "Boîte",
+ "Box Blur": "Box Blur",
+ "Box blur": "Box flou",
+ "Brightness": "Luminosité",
+ "Brightness:": "Luminosité :",
+ "Bulge\/Pinch Tool": "Outil de renflement \/ pincement",
+ "Burn": "Brûler",
+ "Can not animate 1 layer.": "Impossible d'animer une couche.",
+ "Can not find previous layer.": "Impossible de trouver la couche précédente.",
+ "Can not use this tool on current layer: image already takes all area.": "Impossible d'utiliser cet outil sur le calque actuel : l'image occupe déjà toute la zone.",
+ "Cancel": "Annuler",
+ "Canvas Size": "Taille de la toile",
+ "Center": "Centre",
+ "Center x:": "Centrage x :",
+ "Center y:": "Centrage y :",
+ "Center:": "Centre :",
+ "Change Composition": "Changer la composition",
+ "Change Layer Details": "Modifier les détails du calque",
+ "Change Opacity": "Changer l'opacité",
+ "Channel:": "Niveau :",
+ "Circle": "Cercle",
+ "Clarendon": "Clarendon",
+ "Clear": "Effacer",
+ "Clear Selection": "Effacer la sélection",
+ "Clone Tool": "Outil de clonage",
+ "Clone count:": "Nombre de clones:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Outil de clonage désactivé pour l'image redimensionnée. Veuillez d'abord pixelliser.",
+ "Cloned edges": "Bords clonés",
+ "Close": "Fermer",
+ "Color #": "Couleur #",
+ "Color Corrections": "Correction des couleurs",
+ "Color Palette": "Palette de couleurs",
+ "Color Zoom": "Eclat",
+ "Color alpha value can not be zero.": "La valeur alpha de la couleur ne peut pas être nulle.",
+ "Color to Alpha": "Rendre transparent",
+ "Color zoom": "Zoom couleur",
+ "Color:": "Couleur :",
+ "Colors": "Couleurs",
+ "Colors:": "Couleurs :",
+ "Common Filters": "Filtres communs",
+ "Composition": "Composition",
+ "Composition:": "Composition :",
+ "Content Fill": "Remplissage de contenu",
+ "Contrast": "Contraste",
+ "Contrast:": "Contraste :",
+ "Convert layer to raster": "Convertir le calque en raster",
+ "Convert to Raster": "Convertir en raster",
+ "Copy Selection": "Copier",
+ "Copy to Clipboard": "Copier dans le presse-papier",
+ "Courier": "Courier",
+ "Crop Tool": "Outil de recadrage",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Le recadrage sur le calque pivoté n'est pas pris en charge. Convertissez-le en raster pour continuer.",
+ "Ctrl + C": "Ctrl+C",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl + V",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "Actuel",
+ "Current Color Preview": "Aperçu de la couleur actuelle",
+ "Custom": "Personnalisé",
+ "Data URL": "URL de données",
+ "Data URL:": "URL de données:",
+ "Decrease": "Diminution",
+ "Decrease Color Depth": "Postériser",
+ "Degree:": "Degré:",
+ "Del": "Supp",
+ "Delete": "Supprimer",
+ "Delete Selection": "Effacer la sélection",
+ "Denoise": "Réduire le bruit",
+ "Desaturate Tool": "Outil de désaturation",
+ "Description:": "Description :",
+ "Deutsch": "Deutsch",
+ "Differences": "Détection des bords",
+ "Differences Down": "Détection des bords...",
+ "Direction:": "Direction:",
+ "Dither": "Ajouter du bruit",
+ "Dithering:": "Trame :",
+ "Dominant color:": "Couleur dominante:",
+ "Dot Screen": "Demi-teinte",
+ "Down": "Vers le bas",
+ "Duplicate": "Dupliquer",
+ "Duplicate Layer": "Dupliquer le calque",
+ "Duplicate layer": "Dupliquer le calque",
+ "Dynamic": "Dynamique",
+ "Edge": "Détection des bords",
+ "Edit": "Edition",
+ "Edit text...": "Éditer le texte...",
+ "Effect browser": "Navigateur d'effets",
+ "Effects": "Effets",
+ "Effects browser": "Navigateur d'effets",
+ "Email:": "Email :",
+ "Emboss": "Embossage",
+ "Empty selection": "Sélection vide",
+ "Empty selection or type not image.": "Sélection vide ou tapez pas d'image.",
+ "Enable autoresize:": "Activer le redimensionnement automatique :",
+ "End": "Fin",
+ "English": "Anglais",
+ "English (UK)": "Anglais Royaume-Uni)",
+ "Enrich": "Améliorer la netteté",
+ "Enter": "Entrer",
+ "Erase Tool": "Outil d'effacement",
+ "Erase on rotate object is disabled. Please rasterize first.": "L'effacement lors de la rotation de l'objet est désactivé. Veuillez d'abord pixelliser.",
+ "Error": "Erreur",
+ "Error connecting to service.": "Erreur lors de la connexion au service.",
+ "Error loading the list of fonts from Google.": "Erreur lors du chargement de la liste des polices de Google.",
+ "Error registering service worker": "Erreur lors de l'enregistrement du technicien de service",
+ "Error: can not find filter:": "Erreur: impossible de trouver le filtre:",
+ "Error: can not find layer with id:": "Erreur: impossible de trouver la couche avec l'ID:",
+ "Error: missing details event target": "Erreur: cible des événements manquants de détails",
+ "Error: unknown layer type:": "Erreur: type de couche inconnu:",
+ "Error: unsupported attribute type:": "Erreur : type d'attribut non pris en charge :",
+ "Esc": "Esc",
+ "Escape": "Échapper",
+ "Español": "Espagnol",
+ "Expand edges": "Développer les bords",
+ "Exponent:": "Exposant :",
+ "Export": "Exporter",
+ "External": "Externe",
+ "Factor:": "Facteur :",
+ "File": "Fichier",
+ "File name:": "Nom de fichier :",
+ "File size:": "Taille du fichier :",
+ "Fill": "Remplir",
+ "Fill Tool": "Outil de remplissage",
+ "Fit": "Fenêtre",
+ "Fit Window": "Remplir la fenêtre",
+ "Fit window": "Ajuster la fenêtre",
+ "Flatten Image": "Fusionner tous les calques",
+ "Flip": "Retourner",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpentine",
+ "Font": "Police de caractère",
+ "Français": "Français",
+ "Full HD, 1080p": "Full HD, 1080p",
+ "Full Screen": "Plein écran",
+ "Full layers data": "Données de couches complètes",
+ "Gap:": "Ecart :",
+ "Gaussian Blur": "Flou gaussien",
+ "Gif delay:": "Gif délai:",
+ "Gingham": "Vichy",
+ "GitHub:": "GitHub :",
+ "Gradient Radius:": "Rayon du dégradé :",
+ "Grains": "Grains",
+ "Graphics Interchange Format": "Format d'échange graphique",
+ "Gray": "Gris",
+ "Grayscale": "Niveaux de gris",
+ "Greek": "grec",
+ "Green": "Vert",
+ "Green channel:": "Niveau de vert :",
+ "Greyscale:": "Noir et blanc :",
+ "Grid": "Grille",
+ "Grid on\/off": "Grille activée \/ désactivée",
+ "Guides": "Guides",
+ "Guides enabled.": "Guides activés.",
+ "H Radius:": "Rayon H :",
+ "H. Align:": "H. Aligner:",
+ "Heatmap": "Zones chaudes",
+ "Height (%):": "Hauteur (%) :",
+ "Height:": "Hauteur :",
+ "Help": "Aide",
+ "Helvetica": "Helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Hex",
+ "Hide": "Cacher",
+ "Histogram": "Histogramme",
+ "Histogram:": "Histogramme :",
+ "Home": "Accueil",
+ "Horizontal": "Horizontalement",
+ "Horizontal Alignment": "Alignement horizontal",
+ "Horizontal blur:": "Flou horizontal:",
+ "Horizontal:": "Horizontal:",
+ "Hue": "Teinte",
+ "Hue Rotate": "Hue Rotate",
+ "Hue:": "Teinte :",
+ "Image": "Image",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Données d'image avec plusieurs couches. Peut être ouvert en utilisant miniPaint -",
+ "Impact": "Impact",
+ "In proportion:": "En proportion:",
+ "Increase": "Augmenter",
+ "Information": "Informations",
+ "Inkwell": "Encrier",
+ "Insert": "Insérer",
+ "Insert guides": "Insérer des guides",
+ "Insert new layer": "Insérer un nouveau calque",
+ "Instagram Filters": "Filtres Instagram",
+ "Invalid Hex Code": "Code hexadécimal non valide",
+ "Italiano": "Italien",
+ "JPG\/JPEG Format": "Format JPG \/ JPEG",
+ "Kerning:": "Crénage:",
+ "Key-Points": "Points clés",
+ "KeyU": "CléU",
+ "Keyboard Shortcuts": "Raccourcis clavier",
+ "Keyword:": "Mot-clé:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Paysage",
+ "Language": "Langue",
+ "Last modified": "Dernière mise à jour",
+ "Layer": "Couche",
+ "Layer details": "Détails de la couche",
+ "Layer is empty.": "Le calque est vide.",
+ "Layer is not compatible with resize": "Le calque n'est pas compatible avec le redimensionnement",
+ "Layer is vector, convert it to raster to apply this tool.": "Le calque est vectoriel, convertissez-le en raster pour appliquer cet outil.",
+ "Layers": "Calques",
+ "Layers:": "Couches:",
+ "Layout:": "Mise en page:",
+ "Left": "à gauche",
+ "Left to Right": "De gauche à droite",
+ "Level:": "Niveau :",
+ "Levels:": "Niveau :",
+ "Lietuvių": "Lituanien",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Luminance :",
+ "Luminosity": "Luminosité",
+ "Magic Eraser Tool": "Outil Gomme magique",
+ "Merge Down": "Fusionner avec le calque inférieur",
+ "Merge Layers": "Fusionner les calques",
+ "Merged": "Fusionné",
+ "Metrics": "Métrique",
+ "Middle": "Milieu",
+ "Missing at least 1 size parameter.": "Il manque au moins 1 paramètre de taille.",
+ "Missing permissions to write to Clipboard.cc": "Autorisations manquantes pour écrire dans Clipboard.cc",
+ "Mode:": "Mode :",
+ "Module function not found.": "Fonction du module introuvable.",
+ "Modules class not found:": "Classe de modules introuvable:",
+ "Monospace": "Monospace",
+ "Mosaic": "Mosaïque",
+ "Mouse:": "Souris :",
+ "Move": "Déplacer",
+ "Move Layer": "Déplacer le calque",
+ "Move layer down": "Déplacer le calque vers le bas",
+ "Move layer up": "Déplacer le calque vers le haut",
+ "Name:": "Nom :",
+ "Negative": "Négatif",
+ "New": "Nouveau...",
+ "New Bezier Layer": "Nouvelle couche de Bézier",
+ "New Brush Layer": "Nouveau calque de pinceau",
+ "New Ellipse Layer": "Nouveau calque Ellipse",
+ "New File": "Nouveau fichier",
+ "New Gradient Layer": "Nouveau calque de dégradé",
+ "New Layer": "Nouvelle Couche",
+ "New Line Layer": "Nouvelle couche de ligne",
+ "New Pencil Layer": "Nouveau calque de crayon",
+ "New Polygon Layer": "Nouveau calque de polygone",
+ "New Rectangle Layer": "Nouveau calque rectangle",
+ "New Text Layer": "Nouveau calque de texte",
+ "New file": "Nouveau fichier",
+ "New from Selection": "Nouveau à partir de la sélection",
+ "New layer": "Nouveau calque",
+ "Next": "Suivant",
+ "Night Vision": "Vision nocturne",
+ "None": "Aucun",
+ "Nothing is selected.": "Rien n'est sélectionné.",
+ "Offset X:": "Décalage X:",
+ "Offset Y:": "Décalage Y:",
+ "Oil": "Peinture à l'huile",
+ "Ok": "OK",
+ "Online image editor.": "Éditeur d'image en ligne.",
+ "Opacity": "Opacité",
+ "Opacity:": "Opacité:",
+ "Open": "Ouvrir",
+ "Open Data URL": "URL de données ouvertes",
+ "Open Directory": "Ouvrir le répertoire",
+ "Open File": "Fichier ouvert",
+ "Open File Data URL": "Ouvrir l'URL des données de fichier",
+ "Open File URL": "Ouvrir l'URL du fichier",
+ "Open File Webcam": "Ouvrir le fichier webcam",
+ "Open Image": "Ouvrir l'image",
+ "Open JSON File": "Ouvrez le fichier JSON",
+ "Open Test Template": "Modèle de test ouvert",
+ "Open URL": "Ouvrir depuis le Web",
+ "Open data URL": "URL de données ouvertes",
+ "Open from Webcam": "Ouvrir depuis la webcam",
+ "Original Size": "Format original",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Convertir l'image en SVG",
+ "PageDown": "Bas de page",
+ "PageUp": "Page Up",
+ "Palette": "Palette",
+ "Parameter #1:": "Paramètre n ° 1:",
+ "Parameter #2:": "Paramètre n ° 2:",
+ "Paste": "Coller",
+ "Pencil": "Crayon",
+ "Percentage:": "Pourcentage:",
+ "Pixels:": "Pixels :",
+ "Placeholder comment for color channels": "Commentaire d'espace réservé pour les canaux de couleur",
+ "Placeholder comment for color picker": "Commentaire d'espace réservé pour le sélecteur de couleurs",
+ "Placeholder comment for color swatches": "Commentaire d'espace réservé pour les échantillons de couleur",
+ "Portable Network Graphics": "Portable Network Graphics",
+ "Portrait": "Portrait",
+ "Português": "Português",
+ "Position:": "Position:",
+ "Power:": "
Tol.<\/abbr> :",
+ "Preview": "Aperçu",
+ "Previous": "précédent",
+ "Previous layer must be image, convert it to raster to apply this tool.": "La couche précédente doit être une image, la convertir en raster pour appliquer cet outil.",
+ "Print": "Imprimer",
+ "Quality:": "Qualité :",
+ "Quick Load": "Chargement rapide",
+ "Quick Save": "Sauvegarde rapide",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Supprimer l'arrière-plan de l'image",
+ "Radial": "Radial",
+ "Radial gradient": "Gradient radial",
+ "Radius:": "Rayon :",
+ "Range:": "Gamme :",
+ "Red": "Rouge",
+ "Red channel:": "Niveau de rouge :",
+ "Redo": "Refaire",
+ "Remove all": "Enlever tout",
+ "Rename": "Renommer",
+ "Rename Layer": "Renommer le calque",
+ "Rendered with errors.": "Rendu avec des erreurs.",
+ "Rendering...": "Le rendu...",
+ "Replace Color": "Remplacer une couleur",
+ "Replace color": "Remplacer une couleur",
+ "Replacement:": "Remplacement :",
+ "Report Issues": "Signaler un problème",
+ "Reset": "Réinitialiser",
+ "Resize": "Redimensionner",
+ "Resize Boundary": "Redimensionner la limite",
+ "Resize Layer": "Redimensionner le calque",
+ "Resize Layers": "Redimensionner les calques",
+ "Resize Text Layer": "Redimensionner le calque de texte",
+ "Resized as background": "Redimensionné comme arrière-plan",
+ "Resized:": "Redimensionné :",
+ "Resolution:": "Taille :",
+ "Restore Alpha": "Restaurer le niveau alpha",
+ "Right": "à droite",
+ "Right angle:": "Angle droit:",
+ "Right to Left": "De droite à gauche",
+ "Rotate": "Faire pivoter",
+ "Rotate Layer": "Faire pivoter le calque",
+ "Rotate is not supported on this type of object. Convert to raster?": "La rotation n'est pas prise en charge sur ce type d'objet. Convertir en raster?",
+ "Rotate left": "Faire pivoter à gauche",
+ "Rotate:": "Tourner:",
+ "Ruler": "Règle",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - Compresser et comparer des images",
+ "Saturate": "Saturer",
+ "Saturation": "Saturation",
+ "Saturation:": "Saturation :",
+ "Save As": "Enregistrer sous",
+ "Save As Data URL": "Enregistrer comme URL de données",
+ "Save as": "Enregistrer sous",
+ "Save as type:": "Enregistrer comme type :",
+ "Save layers:": "Enregistrer les calques :",
+ "Scaling up is not supported in Hermite, using Lanczos.": "La mise à l'échelle n'est pas prise en charge dans Hermite, à l'aide de Lanczos.",
+ "Scroll down": "Défiler vers le bas",
+ "Scroll up": "Défiler",
+ "Search": "Chercher",
+ "Search Images": "Rechercher des images",
+ "Search for Font": "Rechercher une police",
+ "Search:": "Recherche:",
+ "Select All": "Sélectionner tout",
+ "Select Text Layer": "Sélectionnez le calque de texte",
+ "Select object tool": "Déplacer les pixels sélectionnés",
+ "Selected": "Choisi",
+ "Selection Tool": "Outil de sélection",
+ "Sensitivity:": "Sensibilité :",
+ "Separated": "Séparé",
+ "Separated (original types)": "Séparé (types originaux)",
+ "Sepia": "Vieille photo",
+ "Set Image Size": "Définir la taille de l'image",
+ "Settings": "Paramètres",
+ "Shadow": "Ombre",
+ "Shapes": "Formes",
+ "Shapes (H)": "Formes (H)",
+ "Sharpen": "Améliorer la netteté",
+ "Sharpen Tool": "Outil Sharpen",
+ "Sharpen:": "Netteté :",
+ "Shift + S": "Maj + S",
+ "Shortcut Key:": "Touche de raccourci:",
+ "Show": "Montrer",
+ "Show \/ Hide": "Montrer \/ Cacher",
+ "Show file size:": "Calculer la taille du fichier :",
+ "Simple": "Simple",
+ "Size is too big, max": "La taille est trop grande, max",
+ "Size:": "Taille :",
+ "Skip - layer must be image.": "Skip-layer doit être image.",
+ "Solarize": "Solariser",
+ "Sorry, cold not load getUserMedia() data:": "Désolé, ne chargez pas les données getUserMedia () à froid:",
+ "Sorry, image could not be loaded.": "Désolé, l'image n'a pas pu être chargée.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Désolé, l'image n'a pas pu être chargée. Essayez de la copier dans le presse-papier et de la coller à la place.",
+ "Sorry, image is too big, max 5 MB.": "Désolé, l'image est trop grande (5MB max).",
+ "Source coordinates saved.": "Coordonnées source enregistrées.",
+ "Source is empty, right click on image or use long press to save source position.": "La source est vide, cliquez avec le bouton droit sur l'image ou appuyez longuement pour enregistrer la position de la source.",
+ "Sprites": "Sprites",
+ "Square": "Carré",
+ "Stream:": "Courant:",
+ "Strength:": "Force :",
+ "Strict": "Strict",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - Compresser PNG et JPEG",
+ "Tab": "Languette",
+ "Tag Image File Format": "Format de fichier image de balise",
+ "Tahoma": "Tahoma",
+ "Target:": "Cible :",
+ "The quick brown fox jumps over the lazy dog.": "Le renard brun rapide saute par-dessus le chien paresseux.",
+ "There": "Là",
+ "There are no layers behind.": "Il n'y a pas de couches derrière.",
+ "There is only 1 layer.": "Il n'y a qu'une seule couche.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Le calque doit être image, le convertir en raster pour appliquer cet outil.",
+ "Tilt Shift": "Flou artistique",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Grille-pain",
+ "Toggle": "Basculer",
+ "Toggle Color Channels": "Basculer les canaux de couleur",
+ "Toggle Color Picker": "Basculer le sélecteur de couleurs",
+ "Toggle Menu": "Basculer le menu",
+ "Toggle Swatches": "Basculer les nuances",
+ "Tools": "Outils",
+ "Top": "Haut",
+ "Top to Bottom": "De haut en bas",
+ "Total pixels:": "Nombre de pixels :",
+ "Translate": "Traduire",
+ "Translate Layer": "Traduire le calque",
+ "Translate error, can not find dictionary:": "Erreur de traduction, impossible de trouver le dictionnaire :",
+ "Transparent:": "Transparence :",
+ "Trim": "Rogner l'image",
+ "Trim Layers": "Couper les couches",
+ "Trim borders:": "Couper les bordures:",
+ "Trim layer:": "Couche de garniture:",
+ "Trim white color?": "Taillez la couleur blanche?",
+ "Type:": "Taper:",
+ "Türkçe": "Türkçe",
+ "Undo": "Annuler",
+ "Unique colors:": "Couleurs uniques :",
+ "Up": "Vers le haut",
+ "Update": "Mise à jour",
+ "Update Brush Layer": "Mettre à jour le calque de pinceau",
+ "Update Pencil Layer": "Mettre à jour le calque de crayon",
+ "Update guides": "Guides de mise à jour",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Utilisez le raccourci clavier Ctrl + V pour coller à partir du Presse-papiers.",
+ "V Radius:": "Rayon V :",
+ "V. Align:": "V. Aligner:",
+ "Valencia": "Valence",
+ "Verdana": "Verdana",
+ "Version:": "Version:",
+ "Vertical": "Verticalement",
+ "Vertical Alignment": "Alignement vertical",
+ "Vertical blur:": "Flou vertical:",
+ "Vertical:": "Verticale:",
+ "Vibrance": "Vibrance",
+ "View": "Voir",
+ "Vignette": "Vignette",
+ "ViliusL": "ViliusL",
+ "Vintage": "Vintage",
+ "Webcam": "Webcam",
+ "Webcam #": "Webcam #",
+ "Website:": "Site Internet:",
+ "Weppy File Format": "Format de fichier Weppy",
+ "Width (%):": "Largeur (%) :",
+ "Width:": "Largeur :",
+ "Windows Bitmap": "Bitmap Windows",
+ "Word": "Mot",
+ "Word + Letter": "Mot + Lettre",
+ "Wrap At:": "Envelopper à:",
+ "Wrap:": "Emballage:",
+ "Wrong dimensions": "Mauvaises dimensions",
+ "Wrong file type, must be image or json.": "Mauvais type de fichier, image ou json attendu.",
+ "X end:": "Fin X :",
+ "X position:": "Position x :",
+ "X start:": "Début X :",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Fin Y :",
+ "Y position:": "Position y :",
+ "Y start:": "Début Y :",
+ "You can also drag and drop items into browser.": "Vous pouvez également faire glisser et déposer des éléments dans le navigateur.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Votre navigateur ne supporte pas le canevas ou JavaScript n'est pas activé.",
+ "Your browser does not support this format.": "Votre navigateur ne supporte pas ce format.",
+ "Your search did not match any images.": "Votre recherche ne correspond à aucune image.",
+ "Zoom": "Zoom",
+ "Zoom Blur": "Zoom Flou",
+ "Zoom In": "Agrandir",
+ "Zoom Out": "Réduire",
+ "Zoom blur": "Zoom flou",
+ "Zoom in": "Zoomer",
+ "Zoom out": "Dézoomer",
+ "Zoom:": "Zoom :"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/it.json b/paintplus/frontend/src/js/languages/it.json
new file mode 100644
index 0000000..7967ae6
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/it.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Si è verificato un problema durante la rimozione della cronologia degli annullamenti. It",
+ "About": "Di",
+ "Active": "Attivo",
+ "Aden": "Aden",
+ "Advanced": "Avanzate",
+ "All": "Tutti",
+ "Alpha": "Alfa",
+ "Alpha:": "Alfa:",
+ "Anonymous": "Anonimo",
+ "Anti aliasing": "Anti aliasing",
+ "Application markup may have changed,": "Il markup dell'applicazione potrebbe essere cambiato",
+ "Arial": "Arial",
+ "Arrow": "Freccia",
+ "ArrowDown": "ArrowDown",
+ "ArrowLeft": "ArrowLeft",
+ "ArrowRight": "ArrowRight",
+ "ArrowUp": "ArrowUp",
+ "Author:": "Autore:",
+ "Auto Adjust Colors": "Regola automaticamente i colori",
+ "Auto Kerning": "Crenatura automatica",
+ "Average:": "Media:",
+ "Backspace": "Backspace",
+ "Base": "Base",
+ "Basic": "Di base",
+ "Black and White": "Bianco e nero",
+ "Blue": "Blu",
+ "Blue channel:": "Canale blu:",
+ "Blueprint": "Planimetria",
+ "Blur Radius:": "Sfocatura raggio:",
+ "Blur Tool": "Strumento di sfocatura",
+ "Blur power:": "Sfocatura:",
+ "Borders": "frontiere",
+ "Bottom": "Parte inferiore",
+ "Bottom to Top": "Dal basso verso l'alto",
+ "Bounds:": "Limiti:",
+ "Box": "Scatola",
+ "Box Blur": "Box Blur",
+ "Box blur": "Scatola sfocatura",
+ "Brightness": "Luminosità",
+ "Brightness:": "Luminosità:",
+ "Bulge\/Pinch Tool": "Strumento rigonfiamento \/ pizzico",
+ "Burn": "Bruciare",
+ "Can not animate 1 layer.": "Impossibile animare 1 livello.",
+ "Can not find previous layer.": "Impossibile trovare il livello precedente.",
+ "Can not use this tool on current layer: image already takes all area.": "Impossibile utilizzare questo strumento sul livello corrente: l'immagine occupa già tutta l'area.",
+ "Cancel": "Annulla",
+ "Canvas Size": "Dimensioni della tela",
+ "Center": "Centro",
+ "Center x:": "Centro x:",
+ "Center y:": "Centro y:",
+ "Center:": "Centro:",
+ "Change Composition": "Cambia composizione",
+ "Change Layer Details": "Cambia i dettagli del livello",
+ "Change Opacity": "Cambia opacità",
+ "Channel:": "Canale:",
+ "Circle": "Cerchio",
+ "Clarendon": "Clarendon",
+ "Clear": "Chiaro",
+ "Clear Selection": "Cancella selezione",
+ "Clone Tool": "Strumento clone",
+ "Clone count:": "Conteggio dei cloni:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Strumento clone disabilitato per l'immagine ridimensionata. Per favore rasterizza prima.",
+ "Cloned edges": "Bordi clonati",
+ "Close": "Vicino",
+ "Color #": "Colore #",
+ "Color Corrections": "Correzioni di colore",
+ "Color Palette": "Palette dei colori",
+ "Color Zoom": "Zoom a colori",
+ "Color alpha value can not be zero.": "Il valore alfa del colore non può essere zero.",
+ "Color to Alpha": "Colore ad alfa",
+ "Color zoom": "Zoom a colori",
+ "Color:": "Colore:",
+ "Colors": "Colori",
+ "Colors:": "Colori:",
+ "Common Filters": "Filtri comuni",
+ "Composition": "Composizione",
+ "Composition:": "Composizione:",
+ "Content Fill": "Riempimento del contenuto",
+ "Contrast": "Contrasto",
+ "Contrast:": "Contrasto:",
+ "Convert layer to raster": "Converti livello in raster",
+ "Convert to Raster": "Converti in raster",
+ "Copy Selection": "Copia selezione",
+ "Copy to Clipboard": "Copia negli appunti",
+ "Courier": "Corriere",
+ "Crop Tool": "Strumento di ritaglio",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Il ritaglio su livello ruotato non è supportato. Convertilo in raster per continuare.",
+ "Ctrl + C": "CTRL+C",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "CTRL+P",
+ "Ctrl+V": "Ctrl + V",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "attuale",
+ "Current Color Preview": "Anteprima colore corrente",
+ "Custom": "costume",
+ "Data URL": "URL dei dati",
+ "Data URL:": "URL dei dati:",
+ "Decrease": "Diminuire",
+ "Decrease Color Depth": "Diminuisci la profondità del colore",
+ "Degree:": "Grado:",
+ "Del": "del",
+ "Delete": "Elimina",
+ "Delete Selection": "Elimina selezione",
+ "Denoise": "Denoise",
+ "Desaturate Tool": "Strumento di desatura",
+ "Description:": "Descrizione:",
+ "Deutsch": "Tedesco",
+ "Differences": "differenze",
+ "Differences Down": "Differenze giù",
+ "Direction:": "Direzione:",
+ "Dither": "oscillare",
+ "Dithering:": "dithering:",
+ "Dominant color:": "Colore dominante:",
+ "Dot Screen": "Schermo a punti",
+ "Down": "Giù",
+ "Duplicate": "Duplicare",
+ "Duplicate Layer": "Livello duplicato",
+ "Duplicate layer": "Livello duplicato",
+ "Dynamic": "Dinamico",
+ "Edge": "Bordo",
+ "Edit": "modificare",
+ "Edit text...": "Modifica il testo...",
+ "Effect browser": "Browser effetti",
+ "Effects": "effetti",
+ "Effects browser": "Browser degli effetti",
+ "Email:": "E-mail:",
+ "Emboss": "rilievo",
+ "Empty selection": "Selezione vuota",
+ "Empty selection or type not image.": "Selezione vuota o tipo non immagine.",
+ "Enable autoresize:": "Abilita ridimensionamento automatico:",
+ "End": "Fine",
+ "English": "Inglese",
+ "English (UK)": "Inglese (Regno Unito)",
+ "Enrich": "Arricchire",
+ "Enter": "accedere",
+ "Erase Tool": "Strumento di cancellazione",
+ "Erase on rotate object is disabled. Please rasterize first.": "La cancellazione durante la rotazione dell'oggetto è disabilitata. Per favore rasterizza prima.",
+ "Error": "Errore",
+ "Error connecting to service.": "Errore durante la connessione al servizio.",
+ "Error loading the list of fonts from Google.": "Errore durante il caricamento dell'elenco dei caratteri da Google.",
+ "Error registering service worker": "Errore durante la registrazione dell'operatore del servizio",
+ "Error: can not find filter:": "Errore: impossibile trovare il filtro:",
+ "Error: can not find layer with id:": "Errore: impossibile trovare il livello con ID:",
+ "Error: missing details event target": "Errore: manca il bersaglio dell'evento dettagli",
+ "Error: unknown layer type:": "Errore: tipo di livello sconosciuto:",
+ "Error: unsupported attribute type:": "Errore: tipo di attributo non supportato:",
+ "Esc": "Esc",
+ "Escape": "Fuga",
+ "Español": "Español",
+ "Expand edges": "Espandi i bordi",
+ "Exponent:": "Esponente:",
+ "Export": "Esportare",
+ "External": "Esterno",
+ "Factor:": "Fattore:",
+ "File": "File",
+ "File name:": "Nome del file:",
+ "File size:": "Dimensione del file:",
+ "Fill": "Riempire",
+ "Fill Tool": "Strumento di riempimento",
+ "Fit": "In forma",
+ "Fit Window": "Finestra adatta",
+ "Fit window": "Adatta la finestra",
+ "Flatten Image": "Immagine piatta",
+ "Flip": "Flip",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpentina",
+ "Font": "Font",
+ "Français": "Français",
+ "Full HD, 1080p": "Full HD, 1080p",
+ "Full Screen": "A schermo intero",
+ "Full layers data": "Dati a strati completi",
+ "Gap:": "Gap:",
+ "Gaussian Blur": "Sfocatura gaussiana",
+ "Gif delay:": "Ritardo Gif:",
+ "Gingham": "Percalle",
+ "GitHub:": "GitHub:",
+ "Gradient Radius:": "Raggio di pendenza:",
+ "Grains": "Grani",
+ "Graphics Interchange Format": "Formato di interscambio grafico",
+ "Gray": "Grigio",
+ "Grayscale": "Scala di grigi",
+ "Greek": "greco",
+ "Green": "verde",
+ "Green channel:": "Canale Verde:",
+ "Greyscale:": "Scala di grigi:",
+ "Grid": "Griglia",
+ "Grid on\/off": "Griglia on \/ off",
+ "Guides": "Guide",
+ "Guides enabled.": "Guide abilitate.",
+ "H Radius:": "Raggio H:",
+ "H. Align:": "H. Allinea:",
+ "Heatmap": "Mappa di calore",
+ "Height (%):": "Altezza (%):",
+ "Height:": "Altezza:",
+ "Help": "Aiuto",
+ "Helvetica": "Helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Esadecimale",
+ "Hide": "Nascondere",
+ "Histogram": "Istogramma",
+ "Histogram:": "Istogramma:",
+ "Home": "Casa",
+ "Horizontal": "Orizzontale",
+ "Horizontal Alignment": "Allineamento orizzontale",
+ "Horizontal blur:": "Sfocatura orizzontale:",
+ "Horizontal:": "Orizzontale:",
+ "Hue": "Hue",
+ "Hue Rotate": "Tonalità Ruota",
+ "Hue:": "Hue:",
+ "Image": "Immagine",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Dati immagine con multi-layer. Può essere aperto usando miniPaint -",
+ "Impact": "urto",
+ "In proportion:": "In proporzione:",
+ "Increase": "Aumentare",
+ "Information": "Informazione",
+ "Inkwell": "Calamaio",
+ "Insert": "Inserire",
+ "Insert guides": "Inserire le guide",
+ "Insert new layer": "Inserisci un nuovo livello",
+ "Instagram Filters": "Filtri Instagram",
+ "Invalid Hex Code": "Codice esadecimale non valido",
+ "Italiano": "Italiano",
+ "JPG\/JPEG Format": "Formato JPG \/ JPEG",
+ "Kerning:": "Crenatura:",
+ "Key-Points": "Punti chiave",
+ "KeyU": "KeyU",
+ "Keyboard Shortcuts": "Tasti rapidi",
+ "Keyword:": "Parola chiave:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Paesaggio",
+ "Language": "linguaggio",
+ "Last modified": "Ultima modifica",
+ "Layer": "Strato",
+ "Layer details": "Dettagli del livello",
+ "Layer is empty.": "Il livello è vuoto.",
+ "Layer is not compatible with resize": "Il livello non è compatibile con il ridimensionamento",
+ "Layer is vector, convert it to raster to apply this tool.": "Il livello è vettoriale, convertilo in raster per applicare questo strumento.",
+ "Layers": "Livelli",
+ "Layers:": "strati:",
+ "Layout:": "Disposizione:",
+ "Left": "Sinistra",
+ "Left to Right": "Da sinistra a destra",
+ "Level:": "Livello:",
+ "Levels:": "livelli:",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Luminance:",
+ "Luminosity": "Luminosità",
+ "Magic Eraser Tool": "Strumento gomma magica",
+ "Merge Down": "Unisci giù",
+ "Merge Layers": "Unire i livelli",
+ "Merged": "Fusione",
+ "Metrics": "Metrica",
+ "Middle": "Medio",
+ "Missing at least 1 size parameter.": "Manca almeno 1 parametro di dimensione.",
+ "Missing permissions to write to Clipboard.cc": "Mancano i permessi per scrivere su Clipboard.cc",
+ "Mode:": "Modalità:",
+ "Module function not found.": "Funzione del modulo non trovata.",
+ "Modules class not found:": "Classe di moduli non trovata:",
+ "Monospace": "Monospace",
+ "Mosaic": "Mosaico",
+ "Mouse:": "Topo:",
+ "Move": "Mossa",
+ "Move Layer": "Sposta livello",
+ "Move layer down": "Sposta il livello verso il basso",
+ "Move layer up": "Sposta il livello verso l'alto",
+ "Name:": "Nome:",
+ "Negative": "Negativo",
+ "New": "Nuovo",
+ "New Bezier Layer": "Nuovo livello Bezier",
+ "New Brush Layer": "Nuovo livello pennello",
+ "New Ellipse Layer": "Nuovo livello ellisse",
+ "New File": "Nuovo file",
+ "New Gradient Layer": "Nuovo livello sfumato",
+ "New Layer": "Nuovo strato",
+ "New Line Layer": "Nuovo livello di linea",
+ "New Pencil Layer": "Nuovo livello matita",
+ "New Polygon Layer": "Nuovo livello poligono",
+ "New Rectangle Layer": "Nuovo livello rettangolo",
+ "New Text Layer": "Nuovo livello di testo",
+ "New file": "Nuovo file",
+ "New from Selection": "Novità dalla selezione",
+ "New layer": "Nuovo strato",
+ "Next": "Prossimo",
+ "Night Vision": "Visione notturna",
+ "None": "Nessuna",
+ "Nothing is selected.": "Niente è selezionato.",
+ "Offset X:": "Offset X:",
+ "Offset Y:": "Offset Y:",
+ "Oil": "Olio",
+ "Ok": "Ok",
+ "Online image editor.": "Editor di immagini online",
+ "Opacity": "Opacità",
+ "Opacity:": "Opacità:",
+ "Open": "Aperto",
+ "Open Data URL": "Apri URL dati",
+ "Open Directory": "Apri Directory",
+ "Open File": "Apri il file",
+ "Open File Data URL": "Apri URL dati file",
+ "Open File URL": "Apri URL file",
+ "Open File Webcam": "Apri File Webcam",
+ "Open Image": "Apri immagine",
+ "Open JSON File": "Apri file JSON",
+ "Open Test Template": "Apri modello di prova",
+ "Open URL": "Apri URL",
+ "Open data URL": "Apri l'URL dei dati",
+ "Open from Webcam": "Apri da webcam",
+ "Original Size": "Misura originale",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Converti immagine in SVG",
+ "PageDown": "Pagina giù",
+ "PageUp": "Pagina su",
+ "Palette": "Tavolozza",
+ "Parameter #1:": "Parametro n. 1:",
+ "Parameter #2:": "Parametro n. 2:",
+ "Paste": "Incolla",
+ "Pencil": "Matita",
+ "Percentage:": "Percentuale:",
+ "Pixels:": "pixel:",
+ "Placeholder comment for color channels": "Commento segnaposto per i canali di colore",
+ "Placeholder comment for color picker": "Commento segnaposto per il selettore di colori",
+ "Placeholder comment for color swatches": "Commento segnaposto per i campioni di colore",
+ "Portable Network Graphics": "Grafica di rete portatile",
+ "Portrait": "Ritratto",
+ "Português": "Português",
+ "Position:": "Posizione:",
+ "Power:": "Energia:",
+ "Preview": "Anteprima",
+ "Previous": "Precedente",
+ "Previous layer must be image, convert it to raster to apply this tool.": "Il livello precedente deve essere un'immagine, convertirlo in raster per applicare questo strumento.",
+ "Print": "Stampare",
+ "Quality:": "Qualità:",
+ "Quick Load": "Carico rapido",
+ "Quick Save": "Salvataggio veloce",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Rimuovi lo sfondo dell'immagine",
+ "Radial": "Radiale",
+ "Radial gradient": "Gradiente radiale",
+ "Radius:": "Raggio:",
+ "Range:": "Gamma:",
+ "Red": "Rosso",
+ "Red channel:": "Canale Rosso:",
+ "Redo": "Rifare",
+ "Remove all": "Rimuovi tutto",
+ "Rename": "Rinominare",
+ "Rename Layer": "Rinomina livello",
+ "Rendered with errors.": "Resi con errori.",
+ "Rendering...": "Rendering ...",
+ "Replace Color": "Sostituisci colore",
+ "Replace color": "Sostituisci colore",
+ "Replacement:": "Sostituzione:",
+ "Report Issues": "Segnala problemi",
+ "Reset": "Reset",
+ "Resize": "Ridimensiona",
+ "Resize Boundary": "Ridimensiona confine",
+ "Resize Layer": "Ridimensiona livello",
+ "Resize Layers": "Ridimensiona i livelli",
+ "Resize Text Layer": "Ridimensiona il livello del testo",
+ "Resized as background": "Ridimensionato come sfondo",
+ "Resized:": "Ridimensionato:",
+ "Resolution:": "Risoluzione:",
+ "Restore Alpha": "Ripristina alpha",
+ "Right": "Destra",
+ "Right angle:": "Angolo retto:",
+ "Right to Left": "Da destra a sinistra",
+ "Rotate": "Ruotare",
+ "Rotate Layer": "Ruota livello",
+ "Rotate is not supported on this type of object. Convert to raster?": "Ruota non è supportato su questo tipo di oggetto. Converti in raster?",
+ "Rotate left": "Gira a sinistra",
+ "Rotate:": "Ruotare:",
+ "Ruler": "Governate",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - Comprimi e confronta le immagini",
+ "Saturate": "Saturare",
+ "Saturation": "Saturazione",
+ "Saturation:": "Saturazione:",
+ "Save As": "Salva come",
+ "Save As Data URL": "Salva come URL dei dati",
+ "Save as": "Salva come",
+ "Save as type:": "Salva come tipo:",
+ "Save layers:": "Salva livelli:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "L'aumento di scala non è supportato in Hermite, utilizzando Lanczos.",
+ "Scroll down": "Scorri verso il basso",
+ "Scroll up": "Scorrere verso l'alto",
+ "Search": "Ricerca",
+ "Search Images": "Cerca immagini",
+ "Search for Font": "Cerca carattere",
+ "Search:": "Ricerca:",
+ "Select All": "Seleziona tutto",
+ "Select Text Layer": "Seleziona Livello testo",
+ "Select object tool": "Seleziona lo strumento oggetto",
+ "Selected": "Selezionato",
+ "Selection Tool": "Strumento di selezione",
+ "Sensitivity:": "sensibilità:",
+ "Separated": "Separato",
+ "Separated (original types)": "Separati (tipi originali)",
+ "Sepia": "nero di seppia",
+ "Set Image Size": "Imposta la dimensione dell'immagine",
+ "Settings": "impostazioni",
+ "Shadow": "Ombra",
+ "Shapes": "Forme",
+ "Shapes (H)": "Forme (H)",
+ "Sharpen": "Affilare",
+ "Sharpen Tool": "Strumento di nitidezza",
+ "Sharpen:": "Affilare:",
+ "Shift + S": "Maiusc+S",
+ "Shortcut Key:": "Tasto di scelta rapida:",
+ "Show": "Spettacolo",
+ "Show \/ Hide": "Mostra nascondi",
+ "Show file size:": "Mostra la dimensione del file:",
+ "Simple": "Semplice",
+ "Size is too big, max": "La dimensione è troppo grande, max",
+ "Size:": "Dimensione:",
+ "Skip - layer must be image.": "Salta: il livello deve essere un'immagine.",
+ "Solarize": "solarizzare",
+ "Sorry, cold not load getUserMedia() data:": "Spiacenti, non caricare i dati getUserMedia ():",
+ "Sorry, image could not be loaded.": "Spiacenti, impossibile caricare l'immagine.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Spiacenti, l'immagine non può essere caricata. Prova a copiare l'immagine e incollarla.",
+ "Sorry, image is too big, max 5 MB.": "Siamo spiacenti, l'immagine è troppo grande, max 5 MB.",
+ "Source coordinates saved.": "Coordinate di origine salvate.",
+ "Source is empty, right click on image or use long press to save source position.": "La sorgente è vuota, fare clic con il tasto destro sull'immagine o premere a lungo per salvare la posizione della sorgente.",
+ "Sprites": "sprites",
+ "Square": "Piazza",
+ "Stream:": "Stream:",
+ "Strength:": "Forza:",
+ "Strict": "Rigoroso",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - Comprimi PNG e JPEG",
+ "Tab": "Tab",
+ "Tag Image File Format": "Etichetta il formato del file immagine",
+ "Tahoma": "Tahoma",
+ "Target:": "Bersaglio:",
+ "The quick brown fox jumps over the lazy dog.": "La veloce volpe marrone salta sopra il cane pigro.",
+ "There": "Là",
+ "There are no layers behind.": "Non ci sono strati dietro.",
+ "There is only 1 layer.": "C'è solo 1 strato.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Il livello deve essere un'immagine, convertirlo in raster per applicare questo strumento.",
+ "Tilt Shift": "Tilt Shift",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Tostapane",
+ "Toggle": "Toggle",
+ "Toggle Color Channels": "Attiva \/ disattiva i canali colore",
+ "Toggle Color Picker": "Attiva \/ disattiva il selettore dei colori",
+ "Toggle Menu": "Toggle Menu",
+ "Toggle Swatches": "Attiva \/ disattiva campioni",
+ "Tools": "Utensili",
+ "Top": "Superiore",
+ "Top to Bottom": "Dall'alto al basso",
+ "Total pixels:": "Pixel totali:",
+ "Translate": "Tradurre",
+ "Translate Layer": "Traduci Layer",
+ "Translate error, can not find dictionary:": "Traduci errore, impossibile trovare il dizionario:",
+ "Transparent:": "Trasparente:",
+ "Trim": "tagliare",
+ "Trim Layers": "Livelli di taglio",
+ "Trim borders:": "Taglia bordi:",
+ "Trim layer:": "Strato di rifinitura:",
+ "Trim white color?": "Tagliare il colore bianco?",
+ "Type:": "Tipo:",
+ "Türkçe": "Türkçe",
+ "Undo": "Disfare",
+ "Unique colors:": "Colori unici:",
+ "Up": "Su",
+ "Update": "Aggiornamento",
+ "Update Brush Layer": "Aggiorna livello pennello",
+ "Update Pencil Layer": "Aggiorna livello matita",
+ "Update guides": "Guide di aggiornamento",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Usa la scorciatoia da tastiera Ctrl + V per incollare dagli Appunti.",
+ "V Radius:": "V raggio:",
+ "V. Align:": "V. Allinea:",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "Versione:",
+ "Vertical": "Verticale",
+ "Vertical Alignment": "Allineamento verticale",
+ "Vertical blur:": "Sfocatura verticale:",
+ "Vertical:": "Verticale:",
+ "Vibrance": "Vibrance",
+ "View": "Visualizzazione",
+ "Vignette": "vignette",
+ "ViliusL": "ViliusL",
+ "Vintage": "Vintage ▾",
+ "Webcam": "Webcam",
+ "Webcam #": "Webcam #",
+ "Website:": "Sito web:",
+ "Weppy File Format": "Formato file Weppy",
+ "Width (%):": "Larghezza (%):",
+ "Width:": "Larghezza:",
+ "Windows Bitmap": "Bitmap di Windows",
+ "Word": "parola",
+ "Word + Letter": "Parola + Lettera",
+ "Wrap At:": "Avvolgi a:",
+ "Wrap:": "Avvolgere:",
+ "Wrong dimensions": "Dimensioni sbagliate",
+ "Wrong file type, must be image or json.": "Tipo di file errato, deve essere immagine o json.",
+ "X end:": "X fine:",
+ "X position:": "Posizione X:",
+ "X start:": "X inizio:",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Fine Y:",
+ "Y position:": "Posizione Y:",
+ "Y start:": "Y inizio:",
+ "You can also drag and drop items into browser.": "Puoi anche trascinare gli oggetti nel browser.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Il tuo browser non supporta canvas o JavaScript non è abilitato.",
+ "Your browser does not support this format.": "Il tuo browser non supporta questo formato.",
+ "Your search did not match any images.": "La tua ricerca non corrisponde ad alcuna immagine.",
+ "Zoom": "Zoom",
+ "Zoom Blur": "Zoom sfocatura",
+ "Zoom In": "Ingrandire",
+ "Zoom Out": "Zoom indietro",
+ "Zoom blur": "Sfocatura dello zoom",
+ "Zoom in": "Ingrandire",
+ "Zoom out": "Zoom indietro",
+ "Zoom:": "Zoom:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/ja.json b/paintplus/frontend/src/js/languages/ja.json
new file mode 100644
index 0000000..76be0e5
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/ja.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "元に戻す履歴の削除中に問題が発生しました。それ",
+ "About": "開発者について",
+ "Active": "アクティブ",
+ "Aden": "アデン",
+ "Advanced": "上級",
+ "All": "すべて",
+ "Alpha": "アルファ",
+ "Alpha:": "アルファ：",
+ "Anonymous": "匿名",
+ "Anti aliasing": "アンチエイリアシング",
+ "Application markup may have changed,": "アプリケーションのマークアップが変更されている可能性があります。",
+ "Arial": "Arial",
+ "Arrow": "矢印",
+ "ArrowDown": "ArrowDown",
+ "ArrowLeft": "ArrowLeft",
+ "ArrowRight": "ArrowRight",
+ "ArrowUp": "ArrowUp",
+ "Author:": "著者：",
+ "Auto Adjust Colors": "色を自動調整する",
+ "Auto Kerning": "自動カーニング",
+ "Average:": "平均：",
+ "Backspace": "バックスペース",
+ "Base": "ベース",
+ "Basic": "ベーシック",
+ "Black and White": "黒と白",
+ "Blue": "青",
+ "Blue channel:": "ブルーチャンネル：",
+ "Blueprint": "青写真",
+ "Blur Radius:": "ぼかし半径：",
+ "Blur Tool": "ぼかしツール",
+ "Blur power:": "ぼかしパワー：",
+ "Borders": "罫線",
+ "Bottom": "下",
+ "Bottom to Top": "下から上へ",
+ "Bounds:": "境界：",
+ "Box": "ボックス",
+ "Box Blur": "ボックスのぼかし",
+ "Box blur": "ボックスボケ",
+ "Brightness": "輝度",
+ "Brightness:": "輝度：",
+ "Bulge\/Pinch Tool": "バルジ\/ピンチツール",
+ "Burn": "燃やす",
+ "Can not animate 1 layer.": "1つのレイヤーをアニメートできません。",
+ "Can not find previous layer.": "以前のレイヤーが見つかりません。",
+ "Can not use this tool on current layer: image already takes all area.": "現在のレイヤーではこのツールを使用できません: 画像がすでにすべての領域を占めています。",
+ "Cancel": "キャンセル",
+ "Canvas Size": "キャンバスサイズ",
+ "Center": "センター",
+ "Center x:": "センターx：",
+ "Center y:": "センターy：",
+ "Center:": "センター：",
+ "Change Composition": "構成を変更する",
+ "Change Layer Details": "レイヤーの詳細を変更する",
+ "Change Opacity": "不透明度を変更する",
+ "Channel:": "チャネル：",
+ "Circle": "サークル",
+ "Clarendon": "クラレンドン",
+ "Clear": "クリア",
+ "Clear Selection": "明確な選択",
+ "Clone Tool": "クローンツール",
+ "Clone count:": "クローン数：",
+ "Clone tool disabled for resized image. Please rasterize first.": "サイズ変更された画像に対してクローン ツールが無効になりました。まずはラスタライズを行ってください。",
+ "Cloned edges": "クローンエッジ",
+ "Close": "近い",
+ "Color #": "色 ＃",
+ "Color Corrections": "色補正",
+ "Color Palette": "カラーパレット",
+ "Color Zoom": "カラーズーム",
+ "Color alpha value can not be zero.": "色のアルファ値はゼロにすることはできません。",
+ "Color to Alpha": "カラーからアルファ",
+ "Color zoom": "カラーズーム",
+ "Color:": "色：",
+ "Colors": "色",
+ "Colors:": "色：",
+ "Common Filters": "共通フィルター",
+ "Composition": "レイヤーの合成",
+ "Composition:": "レイヤーの合成：",
+ "Content Fill": "コンテンツの埋め込み",
+ "Contrast": "コントラスト",
+ "Contrast:": "コントラスト：",
+ "Convert layer to raster": "レイヤーをラスターに変換",
+ "Convert to Raster": "ラスタに変換する",
+ "Copy Selection": "選択コピー",
+ "Copy to Clipboard": "クリップボードにコピー",
+ "Courier": "宅配便",
+ "Crop Tool": "切り抜きツール",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "回転したレイヤーでのトリミングはサポートされていません。続行するには、ラスターに変換してください。",
+ "Ctrl + C": "Ctrl + C",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl + V",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "現在",
+ "Current Color Preview": "現在のカラープレビュー",
+ "Custom": "カスタム",
+ "Data URL": "データURL",
+ "Data URL:": "データURL：",
+ "Decrease": "減少",
+ "Decrease Color Depth": "色深度を減らす",
+ "Degree:": "度：",
+ "Del": "デル",
+ "Delete": "削除",
+ "Delete Selection": "選択を削除する",
+ "Denoise": "デノアーズ",
+ "Desaturate Tool": "彩度を下げるツール",
+ "Description:": "説明：",
+ "Deutsch": "ドイツ語",
+ "Differences": "相違点",
+ "Differences Down": "相違点",
+ "Direction:": "方向：",
+ "Dither": "ディザ",
+ "Dithering:": "ディザリング：",
+ "Dominant color:": "支配的な色：",
+ "Dot Screen": "ドットスクリーン",
+ "Down": "ダウン",
+ "Duplicate": "重複",
+ "Duplicate Layer": "重複レイヤー",
+ "Duplicate layer": "レイヤーの複製",
+ "Dynamic": "動的",
+ "Edge": "エッジ",
+ "Edit": "編集",
+ "Edit text...": "テキストを編集...",
+ "Effect browser": "エフェクトブラウザ",
+ "Effects": "エフェクト",
+ "Effects browser": "エフェクトブラウザ",
+ "Email:": "Eメール：",
+ "Emboss": "エンボス",
+ "Empty selection": "空の選択",
+ "Empty selection or type not image.": "空の選択またはタイプではない画像。",
+ "Enable autoresize:": "自動サイズ変更を有効にする:",
+ "End": "終わり",
+ "English": "英語",
+ "English (UK)": "英語(イギリス)",
+ "Enrich": "エンリッチ",
+ "Enter": "入る",
+ "Erase Tool": "消去ツール",
+ "Erase on rotate object is disabled. Please rasterize first.": "オブジェクトの回転時の消去は無効になっています。まずはラスタライズを行ってください。",
+ "Error": "エラー",
+ "Error connecting to service.": "サービスに接続中にエラーが発生しました。",
+ "Error loading the list of fonts from Google.": "Google からフォントのリストをロード中にエラーが発生しました。",
+ "Error registering service worker": "Service Worker の登録エラー",
+ "Error: can not find filter:": "エラー：フィルターが見つかりません：",
+ "Error: can not find layer with id:": "エラー：IDのレイヤーが見つかりません：",
+ "Error: missing details event target": "エラー：詳細イベントターゲットがありません",
+ "Error: unknown layer type:": "エラー：不明なレイヤータイプ：",
+ "Error: unsupported attribute type:": "エラー: サポートされていない属性タイプ:",
+ "Esc": "ESC",
+ "Escape": "逃れる",
+ "Español": "スペイン語",
+ "Expand edges": "エッジを開く",
+ "Exponent:": "指数：",
+ "Export": "エクスポート",
+ "External": "外部サイト",
+ "Factor:": "因子：",
+ "File": "ファイル",
+ "File name:": "ファイル名：",
+ "File size:": "ファイルサイズ：",
+ "Fill": "塗りつぶす",
+ "Fill Tool": "塗りつぶしツール",
+ "Fit": "フィット",
+ "Fit Window": "ウィンドウに合わせる",
+ "Fit window": "ウィンドウにフィット",
+ "Flatten Image": "画像を平ら",
+ "Flip": "反転",
+ "FloydSteinberg-serpentine": "FloydSteinberg-蛇紋文字",
+ "Font": "フォント",
+ "Français": "フランス語",
+ "Full HD, 1080p": "フルHD、1080p",
+ "Full Screen": "全画面表示",
+ "Full layers data": "フルレイヤーデータ",
+ "Gap:": "ギャップ：",
+ "Gaussian Blur": "ガウスぼかし",
+ "Gif delay:": "GIF遅延：",
+ "Gingham": "ギンガム",
+ "GitHub:": "GitHub：",
+ "Gradient Radius:": "勾配半径：",
+ "Grains": "フィルムグレイン",
+ "Graphics Interchange Format": "グラフィック交換フォーマット",
+ "Gray": "グレー",
+ "Grayscale": "グレースケール",
+ "Greek": "ギリシャ語",
+ "Green": "緑",
+ "Green channel:": "グリーンチャネル：",
+ "Greyscale:": "グレースケール：",
+ "Grid": "グリッド",
+ "Grid on\/off": "グリッドのオン\/オフ",
+ "Guides": "ガイド",
+ "Guides enabled.": "ガイドが有効になりました。",
+ "H Radius:": "H半径：",
+ "H. Align:": "H.整列：",
+ "Heatmap": "ヒートマップ",
+ "Height (%):": "高さ （％）：",
+ "Height:": "高さ：",
+ "Help": "Help",
+ "Helvetica": "ヘルベチカ",
+ "Hermite": "エルミート",
+ "Hex": "16進数",
+ "Hide": "隠れる",
+ "Histogram": "ヒストグラム",
+ "Histogram:": "ヒストグラム：",
+ "Home": "ホーム",
+ "Horizontal": "水平",
+ "Horizontal Alignment": "水平方向の配置",
+ "Horizontal blur:": "水平ブラー：",
+ "Horizontal:": "水平:",
+ "Hue": "色相",
+ "Hue Rotate": "色相回転",
+ "Hue:": "色相：",
+ "Image": "画像",
+ "Image data with multi-layers. Can be opened using miniPaint -": "マルチレイヤーの画像データ。 miniPaintを使用して開くことができます -",
+ "Impact": "影響",
+ "In proportion:": "比例して:",
+ "Increase": "増加する",
+ "Information": "情報",
+ "Inkwell": "インク壺",
+ "Insert": "追加",
+ "Insert guides": "インサートガイド",
+ "Insert new layer": "新しいレイヤーを挿入",
+ "Instagram Filters": "Instagramフィルター",
+ "Invalid Hex Code": "無効な16進コード",
+ "Italiano": "イタリア語",
+ "JPG\/JPEG Format": "JPG \/ JPEG形式",
+ "Kerning:": "字詰め：",
+ "Key-Points": "キーポイント",
+ "KeyU": "キーユー",
+ "Keyboard Shortcuts": "キーボードショートカット",
+ "Keyword:": "キーワード：",
+ "Lanczos": "ランチョス",
+ "Landscape": "風景",
+ "Language": "言語",
+ "Last modified": "最終更新日",
+ "Layer": "レイヤー",
+ "Layer details": "レイヤの詳細",
+ "Layer is empty.": "レイヤーが空です。",
+ "Layer is not compatible with resize": "レイヤーはサイズ変更と互換性がありません",
+ "Layer is vector, convert it to raster to apply this tool.": "レイヤーはベクターです。このツールを適用するには、レイヤーをラスターに変換してください。",
+ "Layers": "レイヤー",
+ "Layers:": "レイヤー：",
+ "Layout:": "レイアウト：",
+ "Left": "左",
+ "Left to Right": "左から右へ",
+ "Level:": "レベル：",
+ "Levels:": "レベル：",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "ローファイ",
+ "Luminance:": "輝度：",
+ "Luminosity": "光度",
+ "Magic Eraser Tool": "魔法の消しゴムツール",
+ "Merge Down": "マージダウン",
+ "Merge Layers": "レイヤーをマージする",
+ "Merged": "合併",
+ "Metrics": "指標",
+ "Middle": "中間",
+ "Missing at least 1 size parameter.": "少なくとも1つのサイズパラメータがありません。",
+ "Missing permissions to write to Clipboard.cc": "Clipboard.ccに書き込むためのアクセス許可がありません",
+ "Mode:": "モード：",
+ "Module function not found.": "モジュール機能が見つかりません。",
+ "Modules class not found:": "モジュールクラスが見つかりません：",
+ "Monospace": "モノスペース",
+ "Mosaic": "モザイク",
+ "Mouse:": "マウス：",
+ "Move": "移動",
+ "Move Layer": "レイヤーを移動",
+ "Move layer down": "レイヤーを下に移動します",
+ "Move layer up": "レイヤーを上に移動",
+ "Name:": "名：",
+ "Negative": "負",
+ "New": "新しい",
+ "New Bezier Layer": "新しいベジェ層",
+ "New Brush Layer": "新しいブラシレイヤー",
+ "New Ellipse Layer": "新しい楕円レイヤー",
+ "New File": "新しいファイル",
+ "New Gradient Layer": "新しいグラデーションレイヤー",
+ "New Layer": "新しいレイヤー",
+ "New Line Layer": "新しいラインレイヤー",
+ "New Pencil Layer": "新しい鉛筆レイヤー",
+ "New Polygon Layer": "新しいポリゴンレイヤー",
+ "New Rectangle Layer": "新しい長方形レイヤー",
+ "New Text Layer": "新しいテキストレイヤー",
+ "New file": "新しいファイル",
+ "New from Selection": "新しい選択から",
+ "New layer": "新しいレイヤー",
+ "Next": "次",
+ "Night Vision": "暗視ゴーグル 緑",
+ "None": "なし",
+ "Nothing is selected.": "何も選択されていません。",
+ "Offset X:": "オフセットX：",
+ "Offset Y:": "オフセットY：",
+ "Oil": "油",
+ "Ok": "OK",
+ "Online image editor.": "オンラインイメージエディタ。",
+ "Opacity": "不透明度",
+ "Opacity:": "不透明度：",
+ "Open": "開く",
+ "Open Data URL": "公開データURL",
+ "Open Directory": "ディレクトリを開く",
+ "Open File": "ファイルを開く",
+ "Open File Data URL": "ファイルデータのURLを開く",
+ "Open File URL": "ファイルのURLを開く",
+ "Open File Webcam": "ファイルWebカメラを開く",
+ "Open Image": "画像を開く",
+ "Open JSON File": "JSONファイルを開く",
+ "Open Test Template": "テストテンプレートを開く",
+ "Open URL": "URLを開く",
+ "Open data URL": "公開データURL",
+ "Open from Webcam": "ウェブカメラから開く",
+ "Original Size": "オリジナルサイズ",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - 画像をSVGに変換",
+ "PageDown": "ページダウン",
+ "PageUp": "ページアップ",
+ "Palette": "パレット",
+ "Parameter #1:": "パラメータ＃1：",
+ "Parameter #2:": "パラメータ＃2：",
+ "Paste": "ペースト",
+ "Pencil": "鉛筆",
+ "Percentage:": "パーセンテージ：",
+ "Pixels:": "ピクセル：",
+ "Placeholder comment for color channels": "カラーチャンネルのプレースホルダーコメント",
+ "Placeholder comment for color picker": "カラーピッカーのプレースホルダーコメント",
+ "Placeholder comment for color swatches": "色見本のプレースホルダーコメント",
+ "Portable Network Graphics": "ポータブルネットワークグラフィックス",
+ "Portrait": "肖像画",
+ "Português": "ポルトガル語",
+ "Position:": "位置：",
+ "Power:": "力：",
+ "Preview": "プレビュー",
+ "Previous": "前",
+ "Previous layer must be image, convert it to raster to apply this tool.": "前のレイヤーはイメージでなければならず、このツールを適用するにはラスターに変換する必要があります。",
+ "Print": "印刷",
+ "Quality:": "品質：",
+ "Quick Load": "クイックロード",
+ "Quick Save": "クイックセーブ",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - 画像の背景を削除する",
+ "Radial": "ラジアル",
+ "Radial gradient": "放射グラジエント",
+ "Radius:": "半径：",
+ "Range:": "範囲：",
+ "Red": "赤",
+ "Red channel:": "赤いチャンネル：",
+ "Redo": "やり直し",
+ "Remove all": "すべて削除する",
+ "Rename": "名前を変更する",
+ "Rename Layer": "レイヤーの名前を変更",
+ "Rendered with errors.": "エラーでレンダリングされました。",
+ "Rendering...": "レンダリング...",
+ "Replace Color": "色を置き換える",
+ "Replace color": "色を交換する",
+ "Replacement:": "置換：",
+ "Report Issues": "レポートの問題",
+ "Reset": "リセット",
+ "Resize": "サイズを変更する",
+ "Resize Boundary": "境界のサイズ変更",
+ "Resize Layer": "レイヤーのサイズ変更",
+ "Resize Layers": "レイヤーのサイズ変更",
+ "Resize Text Layer": "テキストレイヤーのサイズ変更",
+ "Resized as background": "背景としてサイズ変更",
+ "Resized:": "サイズ変更:",
+ "Resolution:": "解像度(ppi)：",
+ "Restore Alpha": "アルファを復元する",
+ "Right": "右",
+ "Right angle:": "直角：",
+ "Right to Left": "右から左へ",
+ "Rotate": "回転する",
+ "Rotate Layer": "レイヤーを回転",
+ "Rotate is not supported on this type of object. Convert to raster?": "このタイプのオブジェクトでは、回転はサポートされていません。ラスタに変換しますか？",
+ "Rotate left": "左に回転",
+ "Rotate:": "回転：",
+ "Ruler": "ルーラー",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - 画像を圧縮して比較する",
+ "Saturate": "飽和",
+ "Saturation": "飽和",
+ "Saturation:": "飽和：",
+ "Save As": "名前を付けて保存",
+ "Save As Data URL": "データURLとして保存",
+ "Save as": "名前を付けて保存",
+ "Save as type:": "タイプとして保存：",
+ "Save layers:": "レイヤーを保存：",
+ "Scaling up is not supported in Hermite, using Lanczos.": "ランチョスを使用したエルミートでは、スケールアップはサポートされていません。",
+ "Scroll down": "下へスクロール",
+ "Scroll up": "スクロールアップする",
+ "Search": "サーチ",
+ "Search Images": "画像を検索する",
+ "Search for Font": "フォントの検索",
+ "Search:": "検索：",
+ "Select All": "すべて選択",
+ "Select Text Layer": "テキストレイヤーを選択",
+ "Select object tool": "オブジェクトツールを選択",
+ "Selected": "選択された",
+ "Selection Tool": "選択ツール",
+ "Sensitivity:": "感度：",
+ "Separated": "分離",
+ "Separated (original types)": "セパレート（オリジナルタイプ）",
+ "Sepia": "セピア",
+ "Set Image Size": "画像サイズを設定する",
+ "Settings": "設定",
+ "Shadow": "影",
+ "Shapes": "形",
+ "Shapes (H)": "形状(H)",
+ "Sharpen": "シャープ",
+ "Sharpen Tool": "シャープツール",
+ "Sharpen:": "シャープ：",
+ "Shift + S": "Shift + S",
+ "Shortcut Key:": "ショートカットキー：",
+ "Show": "見せる",
+ "Show \/ Hide": "表示\/非表示",
+ "Show file size:": "ファイルサイズを表示：",
+ "Simple": "シンプル",
+ "Size is too big, max": "サイズが大きすぎます",
+ "Size:": "サイズ：",
+ "Skip - layer must be image.": "スキップ - レイヤはイメージでなければなりません。",
+ "Solarize": "ソラリゼーション",
+ "Sorry, cold not load getUserMedia() data:": "申し訳ありませんが、getUserMedia（）データをロードしないでください：",
+ "Sorry, image could not be loaded.": "申し訳ありませんが、画像を読み込めませんでした。",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "申し訳ありませんが、画像を読み込めませんでした。イメージをコピーして貼り付けてみてください。",
+ "Sorry, image is too big, max 5 MB.": "申し訳ありませんが、イメージが大きすぎます（最大5 MB）。",
+ "Source coordinates saved.": "保存されたソース座標。",
+ "Source is empty, right click on image or use long press to save source position.": "ソースが空です。画像を右クリックするか、長押ししてソースの位置を保存します。",
+ "Sprites": "スプライト",
+ "Square": "平方",
+ "Stream:": "ストリーム：",
+ "Strength:": "力：",
+ "Strict": "厳格",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - PNGとJPEGを圧縮します",
+ "Tab": "タブ",
+ "Tag Image File Format": "タグ画像ファイル形式",
+ "Tahoma": "タホマ",
+ "Target:": "ターゲット：",
+ "The quick brown fox jumps over the lazy dog.": "素早い茶色のキツネが怠惰な犬を飛び越えます。",
+ "There": "そこ",
+ "There are no layers behind.": "後ろに層がありません。",
+ "There is only 1 layer.": "レイヤーは1つしかありません。",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "レイヤはイメージでなければならず、このツールを適用するにはラスタに変換する必要があります。",
+ "Tilt Shift": "チルトシフト",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "トースター",
+ "Toggle": "トグル",
+ "Toggle Color Channels": "カラーチャンネルを切り替えます",
+ "Toggle Color Picker": "トグルカラーピッカー",
+ "Toggle Menu": "トグルメニュー",
+ "Toggle Swatches": "トグルスウォッチ",
+ "Tools": "ツール",
+ "Top": "上",
+ "Top to Bottom": "上から下へ",
+ "Total pixels:": "合計ピクセル数：",
+ "Translate": "画像を移動",
+ "Translate Layer": "翻訳レイヤー",
+ "Translate error, can not find dictionary:": "翻訳エラー、辞書が見つかりません：",
+ "Transparent:": "トランスペアレント：",
+ "Trim": "トリム",
+ "Trim Layers": "レイヤーのトリム",
+ "Trim borders:": "境界線をトリミングします。",
+ "Trim layer:": "トリムレイヤー：",
+ "Trim white color?": "白い色をトリム？",
+ "Type:": "タイプ：",
+ "Türkçe": "Türkçe",
+ "Undo": "元に戻す",
+ "Unique colors:": "ユニークな色：",
+ "Up": "アップ",
+ "Update": "アップデート",
+ "Update Brush Layer": "ブラシレイヤーを更新する",
+ "Update Pencil Layer": "鉛筆レイヤーを更新する",
+ "Update guides": "アップデートガイド",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Ctrl + Vキーボードショートカットを使用してクリップボードから貼り付けます。",
+ "V Radius:": "V半径：",
+ "V. Align:": "V.整列：",
+ "Valencia": "バレンシア",
+ "Verdana": "ヴェルダナ",
+ "Version:": "バージョン：",
+ "Vertical": "垂直",
+ "Vertical Alignment": "垂直方向の配置",
+ "Vertical blur:": "垂直方向のぼかし：",
+ "Vertical:": "垂直：",
+ "Vibrance": "バイブランス",
+ "View": "ビュー",
+ "Vignette": "ビネット",
+ "ViliusL": "ViliusL",
+ "Vintage": "ビンテージ",
+ "Webcam": "ウェブカメラ",
+ "Webcam #": "ウェブカメラ ＃",
+ "Website:": "ウェブサイト：",
+ "Weppy File Format": "Weppyファイル形式",
+ "Width (%):": "幅（％）：",
+ "Width:": "幅：",
+ "Windows Bitmap": "Windowsビットマップ",
+ "Word": "語",
+ "Word + Letter": "単語+文字",
+ "Wrap At:": "ラップ場所：",
+ "Wrap:": "ラップ：",
+ "Wrong dimensions": "間違った寸法",
+ "Wrong file type, must be image or json.": "間違ったファイルタイプです。画像またはjsonでなければなりません。",
+ "X end:": "X end：",
+ "X position:": "X位置：",
+ "X start:": "Xスタート：",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Y end：",
+ "Y position:": "Y位置：",
+ "Y start:": "Y開始：",
+ "You can also drag and drop items into browser.": "アイテムをブラウザにドラッグアンドドロップすることもできます。",
+ "Your browser does not support canvas or JavaScript is not enabled.": "ブラウザがキャンバスをサポートしていないか、JavaScriptが有効になっていません。",
+ "Your browser does not support this format.": "お使いのブラウザはこの形式をサポートしていません。",
+ "Your search did not match any images.": "あなたの検索はどの画像にも一致しませんでした。",
+ "Zoom": "ズーム",
+ "Zoom Blur": "ズームぼかし",
+ "Zoom In": "ズームイン",
+ "Zoom Out": "ズームアウトする",
+ "Zoom blur": "ズームブラー",
+ "Zoom in": "ズームイン",
+ "Zoom out": "ズームアウトする",
+ "Zoom:": "ズーム："
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/ko.json b/paintplus/frontend/src/js/languages/ko.json
new file mode 100644
index 0000000..194f365
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/ko.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "실행 취소 기록을 제거하는 동안 문제가 발생했습니다. 그것",
+ "About": "약",
+ "Active": "유효한",
+ "Aden": "아덴",
+ "Advanced": "많은",
+ "All": "모든",
+ "Alpha": "알파",
+ "Alpha:": "알파 :",
+ "Anonymous": "익명",
+ "Anti aliasing": "안티 앨리어싱",
+ "Application markup may have changed,": "애플리케이션 마크업이 변경되었을 수 있습니다.",
+ "Arial": "Arial",
+ "Arrow": "화살",
+ "ArrowDown": "ArrowDown",
+ "ArrowLeft": "ArrowLeft",
+ "ArrowRight": "ArrowRight",
+ "ArrowUp": "ArrowUp",
+ "Author:": "저자:",
+ "Auto Adjust Colors": "색상 자동 조정",
+ "Auto Kerning": "자동 커닝",
+ "Average:": "평균:",
+ "Backspace": "역행 키이",
+ "Base": "베이스",
+ "Basic": "기본",
+ "Black and White": "검정색과 흰색",
+ "Blue": "푸른",
+ "Blue channel:": "파란색 채널 :",
+ "Blueprint": "청사진",
+ "Blur Radius:": "흐리게 반경 :",
+ "Blur Tool": "블러 도구",
+ "Blur power:": "흐림 효과 :",
+ "Borders": "테두리",
+ "Bottom": "바닥",
+ "Bottom to Top": "아래에서 위로",
+ "Bounds:": "범위:",
+ "Box": "상자",
+ "Box Blur": "상자 흐림 효과",
+ "Box blur": "상자 흐림 효과",
+ "Brightness": "명도",
+ "Brightness:": "명도:",
+ "Bulge\/Pinch Tool": "벌지 \/ 핀치 도구",
+ "Burn": "화상",
+ "Can not animate 1 layer.": "1 개의 레이어를 애니메이션으로 만들 수 없습니다.",
+ "Can not find previous layer.": "이전 레이어를 찾을 수 없습니다.",
+ "Can not use this tool on current layer: image already takes all area.": "현재 레이어에서는 이 도구를 사용할 수 없습니다. 이미지가 이미 모든 영역을 차지하고 있습니다.",
+ "Cancel": "취소",
+ "Canvas Size": "캔버스 크기",
+ "Center": "센터",
+ "Center x:": "센터 x :",
+ "Center y:": "센터 y :",
+ "Center:": "센터:",
+ "Change Composition": "구성 변경",
+ "Change Layer Details": "레이어 세부 정보 변경",
+ "Change Opacity": "불투명도 변경",
+ "Channel:": "채널:",
+ "Circle": "원",
+ "Clarendon": "Clarendon",
+ "Clear": "명확한",
+ "Clear Selection": "명확한 선택",
+ "Clone Tool": "복제 도구",
+ "Clone count:": "클론 횟수 :",
+ "Clone tool disabled for resized image. Please rasterize first.": "크기가 조정된 이미지에 대해 복제 도구가 비활성화되었습니다. 먼저 래스터화해 주세요.",
+ "Cloned edges": "복제 된 가장자리",
+ "Close": "닫다",
+ "Color #": "색깔 #",
+ "Color Corrections": "색상 보정",
+ "Color Palette": "색상 팔레트",
+ "Color Zoom": "색상 확대 \/ 축소",
+ "Color alpha value can not be zero.": "색상 알파 값은 0 일 수 없습니다.",
+ "Color to Alpha": "알파에서 색상으로",
+ "Color zoom": "색상 확대 \/ 축소",
+ "Color:": "색깔:",
+ "Colors": "그림 물감",
+ "Colors:": "그림 물감:",
+ "Common Filters": "공통 필터",
+ "Composition": "구성",
+ "Composition:": "구성:",
+ "Content Fill": "콘텐츠 채우기",
+ "Contrast": "대조",
+ "Contrast:": "대조:",
+ "Convert layer to raster": "레이어를 래스터로 변환",
+ "Convert to Raster": "래스터로 변환",
+ "Copy Selection": "선택 항목 복사",
+ "Copy to Clipboard": "클립 보드에 복사",
+ "Courier": "급사",
+ "Crop Tool": "자르기 도구",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "회전 된 레이어에서 자르기는 지원되지 않습니다. 계속하려면 래스터로 변환하십시오.",
+ "Ctrl + C": "Ctrl + C",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl + V",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "흐름",
+ "Current Color Preview": "현재 색상 미리보기",
+ "Custom": "관습",
+ "Data URL": "데이터 URL",
+ "Data URL:": "데이터 URL :",
+ "Decrease": "감소",
+ "Decrease Color Depth": "색상 심도 감소",
+ "Degree:": "정도:",
+ "Del": "델",
+ "Delete": "지우다",
+ "Delete Selection": "선택 항목 삭제",
+ "Denoise": "데니스 이스",
+ "Desaturate Tool": "채도 제거 도구",
+ "Description:": "기술:",
+ "Deutsch": "Deutsch",
+ "Differences": "차이점",
+ "Differences Down": "차이점",
+ "Direction:": "방향:",
+ "Dither": "떨림",
+ "Dithering:": "디더링 :",
+ "Dominant color:": "주된 색깔 :",
+ "Dot Screen": "도트 스크린",
+ "Down": "하위",
+ "Duplicate": "복제",
+ "Duplicate Layer": "중복 레이어",
+ "Duplicate layer": "레이어 복제",
+ "Dynamic": "동적",
+ "Edge": "가장자리",
+ "Edit": "편집하다",
+ "Edit text...": "텍스트 수정 ...",
+ "Effect browser": "효과 브라우저",
+ "Effects": "효과",
+ "Effects browser": "효과 브라우저",
+ "Email:": "이메일:",
+ "Emboss": "엠보싱",
+ "Empty selection": "빈 선택",
+ "Empty selection or type not image.": "이미지를 선택하지 않거나 입력하지 마십시오.",
+ "Enable autoresize:": "자동 크기 조정 활성화:",
+ "End": "종료",
+ "English": "영어",
+ "English (UK)": "영어(영국)",
+ "Enrich": "높이다",
+ "Enter": "시작하다",
+ "Erase Tool": "지우기 도구",
+ "Erase on rotate object is disabled. Please rasterize first.": "개체 회전 시 지우기가 비활성화됩니다. 먼저 래스터화해 주세요.",
+ "Error": "오류",
+ "Error connecting to service.": "서비스에 연결하는 중 오류가 발생했습니다.",
+ "Error loading the list of fonts from Google.": "Google에서 글꼴 목록을 로드하는 중에 오류가 발생했습니다.",
+ "Error registering service worker": "서비스 워커 등록 오류",
+ "Error: can not find filter:": "오류 : 필터를 찾을 수 없음 :",
+ "Error: can not find layer with id:": "오류 : ID가있는 레이어를 찾을 수 없습니다.",
+ "Error: missing details event target": "오류 : 세부 정보 이벤트 대상이 누락되었습니다.",
+ "Error: unknown layer type:": "오류 : 알 수없는 레이어 유형 :",
+ "Error: unsupported attribute type:": "오류: 지원되지 않는 속성 유형:",
+ "Esc": "Esc",
+ "Escape": "탈출",
+ "Español": "스페인어",
+ "Expand edges": "가장자리 확장",
+ "Exponent:": "멱지수:",
+ "Export": "내보내다",
+ "External": "외부",
+ "Factor:": "인자:",
+ "File": "파일",
+ "File name:": "파일 이름:",
+ "File size:": "파일 크기 :",
+ "Fill": "가득 따르다",
+ "Fill Tool": "채우기 도구",
+ "Fit": "적당한",
+ "Fit Window": "창에 맞추기",
+ "Fit window": "창 맞추기",
+ "Flatten Image": "납작한 이미지",
+ "Flip": "튀기다",
+ "FloydSteinberg-serpentine": "FloydSteinberg- 사문석",
+ "Font": "폰트",
+ "Français": "Français",
+ "Full HD, 1080p": "풀 HD, 1080p",
+ "Full Screen": "전체 화면",
+ "Full layers data": "전체 레이어 데이터",
+ "Gap:": "갭:",
+ "Gaussian Blur": "가우스 흐림",
+ "Gif delay:": "GIF 지연 :",
+ "Gingham": "깅엄",
+ "GitHub:": "GitHub :",
+ "Gradient Radius:": "기울기 반경 :",
+ "Grains": "작살",
+ "Graphics Interchange Format": "그래픽 교환 형식",
+ "Gray": "회색",
+ "Grayscale": "그레이 스케일",
+ "Greek": "그리스 어",
+ "Green": "녹색",
+ "Green channel:": "녹색 통로:",
+ "Greyscale:": "그레이 스케일 :",
+ "Grid": "그리드",
+ "Grid on\/off": "그리드 켜기 \/ 끄기",
+ "Guides": "가이드",
+ "Guides enabled.": "가이드가 활성화되었습니다.",
+ "H Radius:": "H 반경 :",
+ "H. Align:": "H. 정렬 :",
+ "Heatmap": "히트 맵",
+ "Height (%):": "높이 (%) :",
+ "Height:": "신장:",
+ "Help": "도움",
+ "Helvetica": "헬 베티 카",
+ "Hermite": "허 마이트",
+ "Hex": "마녀",
+ "Hide": "숨다",
+ "Histogram": "히스토그램",
+ "Histogram:": "히스토그램 :",
+ "Home": "집",
+ "Horizontal": "수평",
+ "Horizontal Alignment": "수평 정렬",
+ "Horizontal blur:": "가로 흐리게 :",
+ "Horizontal:": "수평의:",
+ "Hue": "색조",
+ "Hue Rotate": "색조 회전",
+ "Hue:": "색조:",
+ "Image": "영상",
+ "Image data with multi-layers. Can be opened using miniPaint -": "다중 레이어가있는 이미지 데이터. miniPaint를 사용하여 열 수 있습니다 -",
+ "Impact": "충격",
+ "In proportion:": "비례:",
+ "Increase": "증가하다",
+ "Information": "정보",
+ "Inkwell": "잉크 그릇",
+ "Insert": "끼워 넣다",
+ "Insert guides": "가이드 삽입",
+ "Insert new layer": "새 레이어 삽입",
+ "Instagram Filters": "Instagram 필터",
+ "Invalid Hex Code": "잘못된 16 진수 코드",
+ "Italiano": "이탈리아어",
+ "JPG\/JPEG Format": "JPG \/ JPEG 형식",
+ "Kerning:": "커닝 :",
+ "Key-Points": "키 포인트",
+ "KeyU": "키유",
+ "Keyboard Shortcuts": "키보드 단축키",
+ "Keyword:": "예어:",
+ "Lanczos": "Lanczos",
+ "Landscape": "풍경",
+ "Language": "언어",
+ "Last modified": "최종 수정일",
+ "Layer": "층",
+ "Layer details": "레이어 세부 정보",
+ "Layer is empty.": "레이어가 비어 있습니다.",
+ "Layer is not compatible with resize": "레이어는 크기 조정과 호환되지 않습니다.",
+ "Layer is vector, convert it to raster to apply this tool.": "레이어는 벡터이므로 래스터로 변환하여이 도구를 적용합니다.",
+ "Layers": "레이어",
+ "Layers:": "레이어 :",
+ "Layout:": "공들여 나열한 것:",
+ "Left": "왼쪽",
+ "Left to Right": "좌에서 우로",
+ "Level:": "수평:",
+ "Levels:": "레벨 :",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "Lo-Fi",
+ "Luminance:": "휘도 :",
+ "Luminosity": "밝기",
+ "Magic Eraser Tool": "매직 지우개 도구",
+ "Merge Down": "병합",
+ "Merge Layers": "계층을 병합하다",
+ "Merged": "병합 됨",
+ "Metrics": "지표",
+ "Middle": "가운데",
+ "Missing at least 1 size parameter.": "크기 매개 변수가 1 개 이상 누락되었습니다.",
+ "Missing permissions to write to Clipboard.cc": "Clipboard.cc에 쓸 수있는 권한이 없습니다.",
+ "Mode:": "방법:",
+ "Module function not found.": "모듈 기능을 찾을 수 없습니다.",
+ "Modules class not found:": "모듈 클래스를 찾을 수 없음 :",
+ "Monospace": "고정 폭",
+ "Mosaic": "모자이크",
+ "Mouse:": "쥐:",
+ "Move": "움직임",
+ "Move Layer": "레이어 이동",
+ "Move layer down": "레이어를 아래로 이동",
+ "Move layer up": "레이어를 위로 이동",
+ "Name:": "이름:",
+ "Negative": "부정",
+ "New": "새로운",
+ "New Bezier Layer": "새로운 베지어 레이어",
+ "New Brush Layer": "새 브러시 레이어",
+ "New Ellipse Layer": "새 타원 레이어",
+ "New File": "새로운 파일",
+ "New Gradient Layer": "새로운 그라디언트 레이어",
+ "New Layer": "새 레이어",
+ "New Line Layer": "새 라인 레이어",
+ "New Pencil Layer": "새 연필 레이어",
+ "New Polygon Layer": "새로운 폴리곤 레이어",
+ "New Rectangle Layer": "새로운 직사각형 레이어",
+ "New Text Layer": "새 텍스트 레이어",
+ "New file": "새로운 파일",
+ "New from Selection": "선택 항목의 새로운 기능",
+ "New layer": "새 레이어",
+ "Next": "다음",
+ "Night Vision": "나이트 비전",
+ "None": "없음",
+ "Nothing is selected.": "아무것도 선택되지 않았습니다.",
+ "Offset X:": "오프셋 X :",
+ "Offset Y:": "오프셋 Y :",
+ "Oil": "기름",
+ "Ok": "승인",
+ "Online image editor.": "온라인 이미지 편집기.",
+ "Opacity": "불투명",
+ "Opacity:": "불투명:",
+ "Open": "열다",
+ "Open Data URL": "공개 데이터 URL",
+ "Open Directory": "오픈 디렉토리",
+ "Open File": "파일 열기",
+ "Open File Data URL": "파일 데이터 URL 열기",
+ "Open File URL": "파일 URL 열기",
+ "Open File Webcam": "파일 열기 웹캠",
+ "Open Image": "이미지 열기",
+ "Open JSON File": "JSON 파일 열기",
+ "Open Test Template": "테스트 템플릿 열기",
+ "Open URL": "URL 열기",
+ "Open data URL": "공개 데이터 URL",
+ "Open from Webcam": "웹캠에서 열기",
+ "Original Size": "원본 크기",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG-이미지를 SVG로 변환",
+ "PageDown": "PageDown",
+ "PageUp": "페이지 위로",
+ "Palette": "팔레트",
+ "Parameter #1:": "매개 변수 # 1 :",
+ "Parameter #2:": "매개 변수 # 2 :",
+ "Paste": "풀",
+ "Pencil": "연필",
+ "Percentage:": "백분율:",
+ "Pixels:": "픽셀 :",
+ "Placeholder comment for color channels": "색상 채널에 대한 자리 표시 자 주석",
+ "Placeholder comment for color picker": "색상 선택기에 대한 자리 표시 자 주석",
+ "Placeholder comment for color swatches": "색상 견본에 대한 자리 표시 자 주석",
+ "Portable Network Graphics": "휴대용 네트워크 그래픽",
+ "Portrait": "초상화",
+ "Português": "Português",
+ "Position:": "위치:",
+ "Power:": "힘:",
+ "Preview": "시사",
+ "Previous": "너무 이른",
+ "Previous layer must be image, convert it to raster to apply this tool.": "이전 레이어는 이미지 여야하며이 도구를 적용하려면 래스터로 변환해야합니다.",
+ "Print": "인쇄",
+ "Quality:": "품질:",
+ "Quick Load": "빠른로드",
+ "Quick Save": "빠른 저장",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG-이미지 배경 제거",
+ "Radial": "방사형",
+ "Radial gradient": "방사형 그래디언트",
+ "Radius:": "반지름:",
+ "Range:": "범위:",
+ "Red": "빨간",
+ "Red channel:": "적색 통로:",
+ "Redo": "다시 하다",
+ "Remove all": "모두 제거",
+ "Rename": "이름 바꾸기",
+ "Rename Layer": "레이어 이름 변경",
+ "Rendered with errors.": "오류와 함께 렌더링됩니다.",
+ "Rendering...": "표현...",
+ "Replace Color": "색상 바꾸기",
+ "Replace color": "색상 바꾸기",
+ "Replacement:": "바꿔 놓음:",
+ "Report Issues": "문제 신고",
+ "Reset": "다시 놓기",
+ "Resize": "크기 조정",
+ "Resize Boundary": "경계 크기 조정",
+ "Resize Layer": "레이어 크기 조정",
+ "Resize Layers": "레이어 크기 조정",
+ "Resize Text Layer": "텍스트 레이어 크기 조정",
+ "Resized as background": "배경으로 크기 조정",
+ "Resized:": "크기 조정됨:",
+ "Resolution:": "해결:",
+ "Restore Alpha": "알파 복원",
+ "Right": "권리",
+ "Right angle:": "직각:",
+ "Right to Left": "오른쪽에서 왼쪽으로",
+ "Rotate": "회전",
+ "Rotate Layer": "레이어 회전",
+ "Rotate is not supported on this type of object. Convert to raster?": "회전은이 유형의 객체에서 지원되지 않습니다. 래스터로 변환 하시겠습니까?",
+ "Rotate left": "왼쪽으로 회전",
+ "Rotate:": "회전 :",
+ "Ruler": "자",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH-이미지 압축 및 비교",
+ "Saturate": "가득한",
+ "Saturation": "포화",
+ "Saturation:": "포화:",
+ "Save As": "다른 이름으로 저장",
+ "Save As Data URL": "데이터 URL로 저장",
+ "Save as": "다른 이름으로 저장",
+ "Save as type:": "유형으로 저장 :",
+ "Save layers:": "레이어 저장 :",
+ "Scaling up is not supported in Hermite, using Lanczos.": "Lanczos를 사용하는 Hermite에서는 확장이 지원되지 않습니다.",
+ "Scroll down": "아래로 스크롤",
+ "Scroll up": "스크롤",
+ "Search": "수색",
+ "Search Images": "이미지 검색",
+ "Search for Font": "글꼴 검색",
+ "Search:": "찾다:",
+ "Select All": "모두 선택",
+ "Select Text Layer": "텍스트 레이어 선택",
+ "Select object tool": "오브젝트 도구 선택",
+ "Selected": "선택된",
+ "Selection Tool": "선택 도구",
+ "Sensitivity:": "감광도:",
+ "Separated": "분리됨",
+ "Separated (original types)": "분리형(원본 유형)",
+ "Sepia": "세피아",
+ "Set Image Size": "이미지 크기 설정",
+ "Settings": "설정",
+ "Shadow": "그림자",
+ "Shapes": "모양",
+ "Shapes (H)": "모양(H)",
+ "Sharpen": "갈다",
+ "Sharpen Tool": "선명 도구",
+ "Sharpen:": "갈다:",
+ "Shift + S": "쉬프트 + S",
+ "Shortcut Key:": "바로 가기 키:",
+ "Show": "보여주다",
+ "Show \/ Hide": "표시 \/ 숨기기",
+ "Show file size:": "파일 크기 표시 :",
+ "Simple": "단순한",
+ "Size is too big, max": "크기가 너무 큽니다.",
+ "Size:": "크기:",
+ "Skip - layer must be image.": "건너 뛰기 - 레이어가 이미지 여야합니다.",
+ "Solarize": "솔라 이즈",
+ "Sorry, cold not load getUserMedia() data:": "죄송합니다. getUserMedia () 데이터를로드하지 마세요.",
+ "Sorry, image could not be loaded.": "죄송합니다. 이미지를로드 할 수 없습니다.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "죄송합니다. 이미지를로드 할 수 없습니다. 이미지 복사 및 붙여 넣기를 시도하십시오.",
+ "Sorry, image is too big, max 5 MB.": "죄송합니다. 이미지가 너무 크고 최대 5MB입니다.",
+ "Source coordinates saved.": "소스 좌표가 저장되었습니다.",
+ "Source is empty, right click on image or use long press to save source position.": "소스가 비어 있습니다. 이미지를 마우스 오른쪽 버튼으로 클릭하거나 길게 눌러 소스 위치를 저장하세요.",
+ "Sprites": "스프라이트",
+ "Square": "광장",
+ "Stream:": "흐름:",
+ "Strength:": "힘:",
+ "Strict": "엄격한",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG-PNG 및 JPEG 압축",
+ "Tab": "탭",
+ "Tag Image File Format": "태그 이미지 파일 형식",
+ "Tahoma": "타호 마",
+ "Target:": "목표:",
+ "The quick brown fox jumps over the lazy dog.": "날렵한 갈색여우가 게으른 개를 뛰어넘습니다.",
+ "There": "그곳에",
+ "There are no layers behind.": "뒤에 레이어가 없습니다.",
+ "There is only 1 layer.": "단 하나의 레이어가 있습니다.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "이 레이어에는 이미지가 있어야합니다. 이 도구를 적용하려면 래스터로 변환하십시오.",
+ "Tilt Shift": "경사 변화",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "토스터에",
+ "Toggle": "비녀장",
+ "Toggle Color Channels": "색상 채널 전환",
+ "Toggle Color Picker": "색상 선택기 전환",
+ "Toggle Menu": "토글 메뉴",
+ "Toggle Swatches": "견본 전환",
+ "Tools": "도구들",
+ "Top": "상단",
+ "Top to Bottom": "위에서 아래로",
+ "Total pixels:": "총 픽셀 수 :",
+ "Translate": "옮기다",
+ "Translate Layer": "레이어 번역",
+ "Translate error, can not find dictionary:": "번역 오류, 사전을 찾을 수 없음 :",
+ "Transparent:": "투명한:",
+ "Trim": "손질",
+ "Trim Layers": "레이어 트림",
+ "Trim borders:": "테두리 자르기 :",
+ "Trim layer:": "레이어 다듬기 :",
+ "Trim white color?": "흰색을 다듬을까요?",
+ "Type:": "유형:",
+ "Türkçe": "Türkçe",
+ "Undo": "끄르다",
+ "Unique colors:": "독특한 색상 :",
+ "Up": "쪽으로",
+ "Update": "업데이트",
+ "Update Brush Layer": "브러시 레이어 업데이트",
+ "Update Pencil Layer": "연필 레이어 업데이트",
+ "Update guides": "가이드 업데이트",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Ctrl + V 키보드 단축키를 사용하여 클립 보드에서 붙여 넣기하십시오.",
+ "V Radius:": "V 반경 :",
+ "V. Align:": "V. 정렬 :",
+ "Valencia": "발렌시아",
+ "Verdana": "Verdana",
+ "Version:": "번역:",
+ "Vertical": "수직선",
+ "Vertical Alignment": "수직 정렬",
+ "Vertical blur:": "수직 흐림 효과 :",
+ "Vertical:": "수직의:",
+ "Vibrance": "활기찬",
+ "View": "보다",
+ "Vignette": "삽화",
+ "ViliusL": "ViliusL",
+ "Vintage": "포도 수확",
+ "Webcam": "웹캠",
+ "Webcam #": "웹캠 #",
+ "Website:": "웹 사이트 :",
+ "Weppy File Format": "Weppy 파일 형식",
+ "Width (%):": "너비 (%) :",
+ "Width:": "폭:",
+ "Windows Bitmap": "Windows 비트 맵",
+ "Word": "워드",
+ "Word + Letter": "단어 + 문자",
+ "Wrap At:": "줄 바꿈 :",
+ "Wrap:": "싸다:",
+ "Wrong dimensions": "잘못된 치수",
+ "Wrong file type, must be image or json.": "잘못된 파일 유형. 이미지 또는 json이어야합니다.",
+ "X end:": "X 끝 :",
+ "X position:": "X 위치 :",
+ "X start:": "X 시작 :",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Y 끝 :",
+ "Y position:": "Y 위치 :",
+ "Y start:": "Y 시작 :",
+ "You can also drag and drop items into browser.": "항목을 브라우저로 끌어다 놓을 수도 있습니다.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "브라우저가 캔버스를 지원하지 않거나 JavaScript가 활성화되어 있지 않습니다.",
+ "Your browser does not support this format.": "브라우저가이 형식을 지원하지 않습니다.",
+ "Your search did not match any images.": "검색어와 일치하는 이미지가 없습니다.",
+ "Zoom": "줌",
+ "Zoom Blur": "줌 블러",
+ "Zoom In": "확대",
+ "Zoom Out": "축소",
+ "Zoom blur": "줌 흐림 효과",
+ "Zoom in": "확대",
+ "Zoom out": "축소",
+ "Zoom:": "줌:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/lt.json b/paintplus/frontend/src/js/languages/lt.json
new file mode 100644
index 0000000..5d03684
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/lt.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Pašalinant anuliavimo istoriją įvyko problema. Tai",
+ "About": "Apie",
+ "Active": "Aktyvus",
+ "Aden": "Aden",
+ "Advanced": "Pažangus",
+ "All": "Visi",
+ "Alpha": "Alfa",
+ "Alpha:": "Alfa:",
+ "Anonymous": "Anoniminis",
+ "Anti aliasing": "Sulieti",
+ "Application markup may have changed,": "Programos žymėjimas galėjo pasikeisti,",
+ "Arial": "Arial",
+ "Arrow": "Rodyklė",
+ "ArrowDown": "Rodyklė žemyn",
+ "ArrowLeft": "Rodyklė kairėn",
+ "ArrowRight": "RodyklėDešinė",
+ "ArrowUp": "„ArrowUp“",
+ "Author:": "Autorius:",
+ "Auto Adjust Colors": "Sureguliuoti spalvas",
+ "Auto Kerning": "„Auto Kerning“",
+ "Average:": "Vidurkis:",
+ "Backspace": "Backspace",
+ "Base": "Bazė",
+ "Basic": "Paprastas",
+ "Black and White": "Juoda ir balta",
+ "Blue": "Mėlynas",
+ "Blue channel:": "Mėlyna kanalas:",
+ "Blueprint": "Techninis piešinys",
+ "Blur Radius:": "Migla spindulys:",
+ "Blur Tool": "Neryškus įrankis",
+ "Blur power:": "Blur stiprumas:",
+ "Borders": "Ribojasi",
+ "Bottom": "Apačia",
+ "Bottom to Top": "Iš apačios į viršų",
+ "Bounds:": "Ribos:",
+ "Box": "Dėžė",
+ "Box Blur": "Box Blur",
+ "Box blur": "Langelis blur",
+ "Brightness": "Ryškumas",
+ "Brightness:": "Ryškumas:",
+ "Bulge\/Pinch Tool": "Išsipūtimo \/ prispaudimo įrankis",
+ "Burn": "Deginti",
+ "Can not animate 1 layer.": "Negalima animuoti 1 sluoksniu.",
+ "Can not find previous layer.": "Negaliu rasti ankstesnio sluoksnio.",
+ "Can not use this tool on current layer: image already takes all area.": "Negalima naudoti šio įrankio dabartiniame sluoksnyje: vaizdas jau užima visą plotą.",
+ "Cancel": "Atšaukti",
+ "Canvas Size": "Paveikslo Dydis",
+ "Center": "Centras",
+ "Center x:": "Centras x:",
+ "Center y:": "Centras y:",
+ "Center:": "Centras:",
+ "Change Composition": "Keisti kompoziciją",
+ "Change Layer Details": "Keisti išsamią informaciją",
+ "Change Opacity": "Pakeiskite neskaidrumą",
+ "Channel:": "Kanalas:",
+ "Circle": "Ratas",
+ "Clarendon": "Klarendonas",
+ "Clear": "Aiškus",
+ "Clear Selection": "Išvalyti pasirinkimą",
+ "Clone Tool": "Klonų įrankis",
+ "Clone count:": "Klonų skaičius:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Klonavimo įrankis išjungtas norint pakeisti vaizdo dydį. Pirmiausia rastruokite.",
+ "Cloned edges": "Klonuoti kraštai",
+ "Close": "Uždaryti",
+ "Color #": "Spalva #",
+ "Color Corrections": "Spalvų korekcijos",
+ "Color Palette": "Spalvų paletė",
+ "Color Zoom": "Spalvų mastelio keitimas",
+ "Color alpha value can not be zero.": "Spalvų alfa vertė negali būti lygi nuliui.",
+ "Color to Alpha": "Spalva alfa",
+ "Color zoom": "Spalvų priartinimas",
+ "Color:": "Spalva:",
+ "Colors": "Spalvos",
+ "Colors:": "Spalvos:",
+ "Common Filters": "Bendri filtrai",
+ "Composition": "Kompozicija",
+ "Composition:": "Sudėtis:",
+ "Content Fill": "Turinio užpildymas",
+ "Contrast": "Kontrastas",
+ "Contrast:": "Kontrastas:",
+ "Convert layer to raster": "Konvertuoti sluoksnį į rastrinį",
+ "Convert to Raster": "Konvertuoti į rastrą",
+ "Copy Selection": "Kopijuoti pasirinkimą",
+ "Copy to Clipboard": "Nukopijuoti į iškarpinę",
+ "Courier": "Courier",
+ "Crop Tool": "Apkarpymo įrankis",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Apkarpyti pasuktą sluoksnį negalima. Konvertuokite jį į rastrą, kad galėtumėte tęsti.",
+ "Ctrl + C": "Ctrl + C",
+ "Ctrl+A": "Ctrl+A",
+ "Ctrl+C": "Ctrl+C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl+V",
+ "Ctrl+Y": "Ctrl+Y",
+ "Ctrl+Z": "Ctrl+Z",
+ "Current": "Dabartinis",
+ "Current Color Preview": "Dabartinė spalvų peržiūra",
+ "Custom": "Kitas",
+ "Data URL": "Duomenų adresas",
+ "Data URL:": "Duomenų adresas:",
+ "Decrease": "Mažinti",
+ "Decrease Color Depth": "Sumažinti spalvų gylį",
+ "Degree:": "Laipsnis:",
+ "Del": "Del",
+ "Delete": "Ištrinti",
+ "Delete Selection": "Ištrinti pasirinkimą",
+ "Denoise": "Sumažinti triukšmą",
+ "Desaturate Tool": "Desaturato įrankis",
+ "Description:": "Aprašymas:",
+ "Deutsch": "Deutsch",
+ "Differences": "Skirtumai",
+ "Differences Down": "Skirtumai žemyn",
+ "Direction:": "Kryptis:",
+ "Dither": "Papildymas",
+ "Dithering:": "Papildymu:",
+ "Dominant color:": "Dominuojanti spalva:",
+ "Dot Screen": "Taškų ekranas",
+ "Down": "Žemyn",
+ "Duplicate": "Pasikartojantis",
+ "Duplicate Layer": "Pasikartojantis sluoksnis",
+ "Duplicate layer": "Dubliuoti sluoksnį",
+ "Dynamic": "Dinamiškas",
+ "Edge": "Kraštas",
+ "Edit": "Redaguoti",
+ "Edit text...": "Redaguoti tekstą ...",
+ "Effect browser": "Poveikio naršyklė",
+ "Effects": "Efektai",
+ "Effects browser": "Efektų naršyklė",
+ "Email:": "El. paštas:",
+ "Emboss": "Įspausti",
+ "Empty selection": "Tuščias pasirinkimas",
+ "Empty selection or type not image.": "Tuščias pasirinkimas arba įveskite ne vaizdą.",
+ "Enable autoresize:": "Įjungti automatinį dydžio nustatymą:",
+ "End": "Galas",
+ "English": "Anglų",
+ "English (UK)": "anglų (JK)",
+ "Enrich": "Praturtinti",
+ "Enter": "Įveskite",
+ "Erase Tool": "Ištrinti įrankį",
+ "Erase on rotate object is disabled. Please rasterize first.": "Ištrynimas sukant objektą išjungtas. Pirmiausia rastruokite.",
+ "Error": "Klaida",
+ "Error connecting to service.": "Klaida prisijungiant prie paslaugos.",
+ "Error loading the list of fonts from Google.": "Įkeliant šriftų sąrašą iš „Google“ įvyko klaida.",
+ "Error registering service worker": "Klaida registruojant aptarnavimo darbuotoją",
+ "Error: can not find filter:": "Klaida: nepavyksta rasti filtro:",
+ "Error: can not find layer with id:": "Klaida: nepavyksta rasti sluoksnio su ID:",
+ "Error: missing details event target": "Klaida: trūksta detalių įvykio tikslo",
+ "Error: unknown layer type:": "Klaida: nežinomas sluoksnio tipas:",
+ "Error: unsupported attribute type:": "Klaida: nepalaikomas atributo tipas:",
+ "Esc": "Esc",
+ "Escape": "Pabegti",
+ "Español": "Español",
+ "Expand edges": "Išskleiskite kraštus",
+ "Exponent:": "Eksponentė:",
+ "Export": "Eksportuoti",
+ "External": "Išorinis",
+ "Factor:": "Veiksnys:",
+ "File": "Failas",
+ "File name:": "Failo pavadinimas:",
+ "File size:": "Failo dydis:",
+ "Fill": "Pildyti",
+ "Fill Tool": "Užpildymo įrankis",
+ "Fit": "Talpinti",
+ "Fit Window": "Tinkamas langas",
+ "Fit window": "Pritaikyti langą",
+ "Flatten Image": "Išlyginti vaizdą",
+ "Flip": "Apversti",
+ "FloydSteinberg-serpentine": "Floydsteinberg-serpentinas",
+ "Font": "Šriftas",
+ "Français": "Français",
+ "Full HD, 1080p": "Full HD, 1080p",
+ "Full Screen": "Per visą ekraną",
+ "Full layers data": "Visų sluoksnių duomenys",
+ "Gap:": "Atotrūkis:",
+ "Gaussian Blur": "Gauso suliejimo",
+ "Gif delay:": "Gif delsimas:",
+ "Gingham": "Gingamas",
+ "GitHub:": "Github:",
+ "Gradient Radius:": "Gradientas spindulys:",
+ "Grains": "Grūdėtumas",
+ "Graphics Interchange Format": "Grafikos mainų formatas",
+ "Gray": "Pilkas",
+ "Grayscale": "Pelės skalė",
+ "Greek": "graikų",
+ "Green": "Žalias",
+ "Green channel:": "Žalias kanalas:",
+ "Greyscale:": "Pilkieji pustoniai:",
+ "Grid": "Tinklelis",
+ "Grid on\/off": "Tinklelis",
+ "Guides": "Vadovai",
+ "Guides enabled.": "Vadovai įjungti.",
+ "H Radius:": "H spindulys:",
+ "H. Align:": "H. Lygiuoti:",
+ "Heatmap": "Spalvinė diagrama",
+ "Height (%):": "Aukštis (%):",
+ "Height:": "Aukštis:",
+ "Help": "Pagalba",
+ "Helvetica": "Helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Hex",
+ "Hide": "Slėpti",
+ "Histogram": "Histograma",
+ "Histogram:": "Histograma:",
+ "Home": "Namai",
+ "Horizontal": "Horizontali",
+ "Horizontal Alignment": "Horizontalus išlyginimas",
+ "Horizontal blur:": "Horizontalus miglotas vaizdas:",
+ "Horizontal:": "Horizontalus:",
+ "Hue": "Atspalvis",
+ "Hue Rotate": "Atspalvis pasukti",
+ "Hue:": "Atspalvis:",
+ "Image": "Vaizdas",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Vaizdo duomenys su kelių sluoksnių. gali būti atidarytas naudojant minipaint -",
+ "Impact": "Poveikis",
+ "In proportion:": "Proporcingai:",
+ "Increase": "Padidinti",
+ "Information": "Informacija",
+ "Inkwell": "Rašalo kasykla",
+ "Insert": "Įdėti",
+ "Insert guides": "Įdėkite vadovus",
+ "Insert new layer": "Įdėkite naują sluoksnį",
+ "Instagram Filters": "„Instagram“ filtrai",
+ "Invalid Hex Code": "Netinkamas šešiakampis kodas",
+ "Italiano": "Italų kalba",
+ "JPG\/JPEG Format": "JPG \/ JPEG formatas",
+ "Kerning:": "Kerningas:",
+ "Key-Points": "Pagrindiniai klausimai",
+ "KeyU": "KeyU",
+ "Keyboard Shortcuts": "Klaviatūros nuorodos",
+ "Keyword:": "Raktinis žodis:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Peizažas",
+ "Language": "Kalba",
+ "Last modified": "Paskutinį kartą keistas",
+ "Layer": "Sluoksnis",
+ "Layer details": "Sluoksnio detalės",
+ "Layer is empty.": "Sluoksnis tuščias.",
+ "Layer is not compatible with resize": "Sluoksnis nesuderinamas su dydžio keitimu",
+ "Layer is vector, convert it to raster to apply this tool.": "Sluoksnis yra vektorius, konvertuokite jį į rastrą, kad pritaikytumėte šį įrankį.",
+ "Layers": "Sluoksniai",
+ "Layers:": "Sluoksniai:",
+ "Layout:": "Išdėstymas:",
+ "Left": "Kairėje",
+ "Left to Right": "Iš kairės į dešinę",
+ "Level:": "Lygis:",
+ "Levels:": "Lygiais:",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Skaisčio:",
+ "Luminosity": "Šviesumas",
+ "Magic Eraser Tool": "„Magic Eraser“ įrankis",
+ "Merge Down": "Sujungti žemyn",
+ "Merge Layers": "Sujungti sluoksnius",
+ "Merged": "Sujungta",
+ "Metrics": "Metrika",
+ "Middle": "Vidurinis",
+ "Missing at least 1 size parameter.": "Trūksta bent 1 dydžio parametro.",
+ "Missing permissions to write to Clipboard.cc": "Trūksta leidimų rašyti į „Clipboard.cc“",
+ "Mode:": "Režimas:",
+ "Module function not found.": "Modulio funkcija nerasta.",
+ "Modules class not found:": "Modulio klasė nerasta:",
+ "Monospace": "Monospace",
+ "Mosaic": "Mozaika",
+ "Mouse:": "Pelė:",
+ "Move": "Perkelti",
+ "Move Layer": "Perkelti sluoksnį",
+ "Move layer down": "Perkelkite sluoksnį žemyn",
+ "Move layer up": "Perkelti sluoksnį aukštyn",
+ "Name:": "Vardas:",
+ "Negative": "Neigiamas",
+ "New": "Naujas",
+ "New Bezier Layer": "Naujas Bezier sluoksnis",
+ "New Brush Layer": "Naujas teptuko sluoksnis",
+ "New Ellipse Layer": "Naujas elipsės sluoksnis",
+ "New File": "Naujas failas",
+ "New Gradient Layer": "Naujas gradiento sluoksnis",
+ "New Layer": "Naujas sluoksnis",
+ "New Line Layer": "Naujas eilutės sluoksnis",
+ "New Pencil Layer": "Naujas pieštukų sluoksnis",
+ "New Polygon Layer": "Naujas daugiakampio sluoksnis",
+ "New Rectangle Layer": "Naujas stačiakampio sluoksnis",
+ "New Text Layer": "Naujas teksto sluoksnis",
+ "New file": "Naujas failas",
+ "New from Selection": "Nauja iš pasirinkimo",
+ "New layer": "Nauja sluoksnis",
+ "Next": "Kitas",
+ "Night Vision": "Naktinis matymas",
+ "None": "Nė vienas",
+ "Nothing is selected.": "Niekas nėra pasirinktas.",
+ "Offset X:": "Nuokrypis x:",
+ "Offset Y:": "Kompensuoti:",
+ "Oil": "Aliejus",
+ "Ok": "Gerai",
+ "Online image editor.": "Internetinis vaizdo redaktorius.",
+ "Opacity": "Nepermatomumas",
+ "Opacity:": "Nepermatomumas:",
+ "Open": "Atidaryti",
+ "Open Data URL": "Atidaryti duomenų URL",
+ "Open Directory": "Atidaryti katalogą",
+ "Open File": "Atidaryti failą",
+ "Open File Data URL": "Atidarykite failo duomenų URL",
+ "Open File URL": "Atidarykite failo URL",
+ "Open File Webcam": "Atidarykite „File Webcam“",
+ "Open Image": "Atidarykite vaizdą",
+ "Open JSON File": "Atidarykite JSON failą",
+ "Open Test Template": "Atidarykite testavimo šabloną",
+ "Open URL": "Atidaryti url",
+ "Open data URL": "Atidaryti duomenų url",
+ "Open from Webcam": "Atidarykite iš interneto kameros",
+ "Original Size": "Originalus dydis",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - konvertuoti vaizdą į SVG",
+ "PageDown": "„PageDown“",
+ "PageUp": "Į viršų",
+ "Palette": "Paletė",
+ "Parameter #1:": "Parametras Nr. 1:",
+ "Parameter #2:": "Parametras # 2:",
+ "Paste": "Įkelti",
+ "Pencil": "Pieštukas",
+ "Percentage:": "Procentas:",
+ "Pixels:": "Taškai:",
+ "Placeholder comment for color channels": "Spalvotų kanalų vietos rezervatorius",
+ "Placeholder comment for color picker": "Spalvų parinkiklio vietos komentaras",
+ "Placeholder comment for color swatches": "Spalvų pavyzdžių vietos komentaras",
+ "Portable Network Graphics": "Nešiojama tinklo grafika",
+ "Portrait": "Portretas",
+ "Português": "Português",
+ "Position:": "Padėtis:",
+ "Power:": "Galia:",
+ "Preview": "Peržiūrėti",
+ "Previous": "Ankstesnis",
+ "Previous layer must be image, convert it to raster to apply this tool.": "Ankstesnis sluoksnis turi būti vaizdas, konvertuoti jį į rastrą, kad būtų taikomas šis įrankis.",
+ "Print": "Spausdinti",
+ "Quality:": "Kokybė:",
+ "Quick Load": "Greitas įkrovimas",
+ "Quick Save": "Greitas išsaugojimas",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Pašalinti vaizdo foną",
+ "Radial": "Radialinis",
+ "Radial gradient": "Radialinis gradientas",
+ "Radius:": "Spindulys:",
+ "Range:": "Kategorijos:",
+ "Red": "Raudonas",
+ "Red channel:": "Raudonasis kanalas:",
+ "Redo": "Perdaryti",
+ "Remove all": "Pašalinti visus",
+ "Rename": "Pervadinti",
+ "Rename Layer": "Pervardyti sluoksnį",
+ "Rendered with errors.": "Pateikta su klaidomis.",
+ "Rendering...": "Perduodama ...",
+ "Replace Color": "Pakeiskite spalvą",
+ "Replace color": "Pakeiskite spalvą",
+ "Replacement:": "Pakeitimas:",
+ "Report Issues": "Pranešti apie problemas",
+ "Reset": "Atstatyti",
+ "Resize": "Keisti dydį",
+ "Resize Boundary": "Keisti ribos dydį",
+ "Resize Layer": "Keisti sluoksnio dydį",
+ "Resize Layers": "Keisti sluoksnių dydį",
+ "Resize Text Layer": "Keisti teksto sluoksnio dydį",
+ "Resized as background": "Pakeista kaip fonas",
+ "Resized:": "Pakeistas dydis:",
+ "Resolution:": "Rezoliucija:",
+ "Restore Alpha": "Atkurti alfa",
+ "Right": "Teisingai",
+ "Right angle:": "Dešinysis kampas:",
+ "Right to Left": "Iš dešinės į kairę",
+ "Rotate": "Sukti",
+ "Rotate Layer": "Pasukti sluoksnį",
+ "Rotate is not supported on this type of object. Convert to raster?": "Šio tipo objektuose nepavyksta pakeisti rotacijos. konvertuoti į rastrą?",
+ "Rotate left": "Pasukti į kairę",
+ "Rotate:": "Pasukti:",
+ "Ruler": "Valdovas",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - suspauskite ir palyginkite vaizdus",
+ "Saturate": "Saturate",
+ "Saturation": "Sodrumas",
+ "Saturation:": "Spalvingumas:",
+ "Save As": "Išsaugoti kaip",
+ "Save As Data URL": "Išsaugoti kaip duomenų URL",
+ "Save as": "Išsaugoti kaip",
+ "Save as type:": "Išsaugoti kaip:",
+ "Save layers:": "Išsaugoti sluoksnius:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "„Hermite“, naudojant „Lanczos“, mastelio didinimas nepalaikomas.",
+ "Scroll down": "Slinkti žemyn",
+ "Scroll up": "Slinkite aukštyn",
+ "Search": "Paieška",
+ "Search Images": "Ieškoti vaizdų",
+ "Search for Font": "Ieškoti šrifto",
+ "Search:": "Paieška:",
+ "Select All": "Pasirinkti viską",
+ "Select Text Layer": "Pasirinkite Teksto sluoksnis",
+ "Select object tool": "Pasirinkite objektas įrankis",
+ "Selected": "Pasirinkti",
+ "Selection Tool": "Pasirinkimo įrankis",
+ "Sensitivity:": "Jautrumas:",
+ "Separated": "Atskirtas",
+ "Separated (original types)": "Atskirti (originali tipai)",
+ "Sepia": "Sepia",
+ "Set Image Size": "Nustatykite vaizdo dydį",
+ "Settings": "Nustatymai",
+ "Shadow": "Šešėlis",
+ "Shapes": "Formos",
+ "Shapes (H)": "Formos (H)",
+ "Sharpen": "Pagaląsti",
+ "Sharpen Tool": "Aštrinimo įrankis",
+ "Sharpen:": "Paryškinti:",
+ "Shift + S": "Shift + S",
+ "Shortcut Key:": "Spartusis klavišas:",
+ "Show": "Rodyti",
+ "Show \/ Hide": "Rodyti \/ Slėpti",
+ "Show file size:": "Rodyti failo dydį:",
+ "Simple": "Paprastas",
+ "Size is too big, max": "Dydis yra per didelis, maks",
+ "Size:": "Dydis:",
+ "Skip - layer must be image.": "Praleisti - sluoksnis turi būti vaizdas.",
+ "Solarize": "Soliarizacija",
+ "Sorry, cold not load getUserMedia() data:": "Deja, šalta, neįkelkite „getUserMedia“ () duomenų:",
+ "Sorry, image could not be loaded.": "Deja, nepavyko įkelti vaizdo.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Deja, vaizdas negali būti įkeltas. pabandykite kopijuoti nuotrauką ir įklijuoti ją.",
+ "Sorry, image is too big, max 5 MB.": "Atsiprašome, vaizdas yra per didelis, daugiausiai 5 MB.",
+ "Source coordinates saved.": "Šaltinio koordinatės išsaugotos.",
+ "Source is empty, right click on image or use long press to save source position.": "Šaltinis tuščias, dešiniuoju pelės mygtuku spustelėkite vaizdą arba naudokite ilgą paspaudimą, kad išsaugotumėte šaltinio padėtį.",
+ "Sprites": "Sprites",
+ "Square": "Langelis",
+ "Stream:": "Srautas:",
+ "Strength:": "Jėga:",
+ "Strict": "Griežtas",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - suspausti PNG ir JPEG",
+ "Tab": "Tab",
+ "Tag Image File Format": "Žymės vaizdo failo formatas",
+ "Tahoma": "Tahoma",
+ "Target:": "Tikslas:",
+ "The quick brown fox jumps over the lazy dog.": "Greita rudoji lapė peršoka per tinginį šunį.",
+ "There": "Ten",
+ "There are no layers behind.": "Už sluoksnių nėra.",
+ "There is only 1 layer.": "Yra tik 1 sluoksnis.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Sluoksnis turi būti paveiksliukas, konvertuokite jį į rastrą, kad pritaikyti šį įrankį.",
+ "Tilt Shift": "Tento perkelimas",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Skrudintuvas",
+ "Toggle": "Perjungti",
+ "Toggle Color Channels": "Perjungti spalvų kanalus",
+ "Toggle Color Picker": "Perjungti spalvų rinkiklį",
+ "Toggle Menu": "Perjungti meniu",
+ "Toggle Swatches": "Perjungti pavyzdžius",
+ "Tools": "Įrankiai",
+ "Top": "Į viršų",
+ "Top to Bottom": "Nuo viršaus iki apačios",
+ "Total pixels:": "Iš viso taškų:",
+ "Translate": "Versti",
+ "Translate Layer": "Versti sluoksnį",
+ "Translate error, can not find dictionary:": "Versti klaidą, negali rasti žodyną:",
+ "Transparent:": "Skaidri:",
+ "Trim": "Apkarpyti",
+ "Trim Layers": "Apdailos sluoksniai",
+ "Trim borders:": "Apkirpti kraštus:",
+ "Trim layer:": "Trim sluoksnis:",
+ "Trim white color?": "Trim balta spalva?",
+ "Type:": "Tipas:",
+ "Türkçe": "Türkçe",
+ "Undo": "Anuliuoti",
+ "Unique colors:": "Unikalios spalvos:",
+ "Up": "Aukštyn",
+ "Update": "Atnaujinti",
+ "Update Brush Layer": "Atnaujinti teptuko sluoksnį",
+ "Update Pencil Layer": "Atnaujinkite pieštukų sluoksnį",
+ "Update guides": "Atnaujinti vadovus",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Naudokite \"ctrl + v\" spartieji klavišai, kuriuos norite įklijuoti iš iškarpinės.",
+ "V Radius:": "V spindulys:",
+ "V. Align:": "V. Sulyginti:",
+ "Valencia": "Valensija",
+ "Verdana": "Verdana",
+ "Version:": "Versija:",
+ "Vertical": "Vertikalus",
+ "Vertical Alignment": "Vertikalus išlyginimas",
+ "Vertical blur:": "Vertikalus plyšimas:",
+ "Vertical:": "Vertikalus:",
+ "Vibrance": "Rezonansas",
+ "View": "Žiūrėti",
+ "Vignette": "Vinjetė",
+ "ViliusL": "Viliusl",
+ "Vintage": "Senoviškas",
+ "Webcam": "Internetinė kamera",
+ "Webcam #": "Internetinė kamera #",
+ "Website:": "Interneto svetainė:",
+ "Weppy File Format": "Weppy failo formatas",
+ "Width (%):": "Plotis (%):",
+ "Width:": "Plotis:",
+ "Windows Bitmap": "„Windows Bitmap“",
+ "Word": "Žodis",
+ "Word + Letter": "Žodis + laiškas",
+ "Wrap At:": "Apvyniokite:",
+ "Wrap:": "Apvyniojimas:",
+ "Wrong dimensions": "Neteisingi matmenys",
+ "Wrong file type, must be image or json.": "Neteisingas failo tipas, turi būti paveikslėlis arba json.",
+ "X end:": "X pabaiga:",
+ "X position:": "X pozicija:",
+ "X start:": "X pradžia::",
+ "X-Pro II": "„X-Pro II“",
+ "Y end:": "Y pabaiga:",
+ "Y position:": "Y pozicija:",
+ "Y start:": "Y pradžia:",
+ "You can also drag and drop items into browser.": "Taip pat galite vilkti elementus į naršyklę.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Jūsų naršyklė nepalaiko drobės ar javascript nėra įjungtas.",
+ "Your browser does not support this format.": "Jūsų naršyklė nepalaiko šio formato.",
+ "Your search did not match any images.": "Jūsų paieška neatitiko jokių vaizdų.",
+ "Zoom": "Zoom",
+ "Zoom Blur": "Zoom Blur",
+ "Zoom In": "Priartinti",
+ "Zoom Out": "Nutolinti",
+ "Zoom blur": "Padidinti blur",
+ "Zoom in": "Priartinti",
+ "Zoom out": "Nutolinti",
+ "Zoom:": "Priartinimas:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/nl.json b/paintplus/frontend/src/js/languages/nl.json
new file mode 100644
index 0000000..a625384
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/nl.json
@@ -0,0 +1,514 @@
+{
+ "A problem occurred while removing undo history. It": "Er is een probleem opgetreden bij het verwijderen van de ongedaanmaakgeschiedenis. Het",
+ "About": "Over",
+ "Active": "Actief",
+ "Aden": "Aden",
+ "Advanced": "Geavanceerd",
+ "All": "Alle",
+ "Alpha": "Alpha",
+ "Alpha:": "Alpha:",
+ "Anonymous": "Anoniem",
+ "Anti aliasing": "Anti-aliasing",
+ "Application markup may have changed,": "De opmaak van de applicatie is mogelijk gewijzigd,",
+ "Arial": "Arial",
+ "Arrow": "Pijl",
+ "ArrowDown": "ArrowDown",
+ "ArrowLeft": "Pijl naar links",
+ "ArrowRight": "Pijl naar rechts",
+ "ArrowUp": "Pijl omhoog",
+ "Author:": "Auteur:",
+ "Auto Adjust Colors": "Automatisch kleuren aanpassen",
+ "Auto Kerning": "Automatisch letterafstand aanpassen",
+ "Average:": "Gemiddelde:",
+ "Backspace": "Rugpijn",
+ "Base": "Basis",
+ "Basic": "BASIS",
+ "Black and White": "Zwart en Wit",
+ "Blue": "Blauw",
+ "Blue channel:": "Blauw kanaal:",
+ "Blueprint": "Blauwdruk",
+ "Blur Radius:": "Vervagingsstraal:",
+ "Blur Tool": "Vervagingsgereedschap",
+ "Blur power:": "Vervagingskracht:",
+ "Borders": "Randen",
+ "Bottom": "Onderkant",
+ "Bottom to Top": "Van onder naar boven",
+ "Bounds:": "Grenzen:",
+ "Box": "Doos",
+ "Box Blur": "Doos vervagen",
+ "Box blur": "Doos vervagen",
+ "Brightness": "Helderheid",
+ "Brightness:": "Helderheid:",
+ "Bulge\/Pinch Tool": "Uitzetten\/knijpen gereedschap",
+ "Burn": "Branden",
+ "Can not animate 1 layer.": "Kan geen 1 laag animeren.",
+ "Can not find previous layer.": "Kan de vorige laag niet vinden.",
+ "Can not use this tool on current layer: image already takes all area.": "Kan dit gereedschap niet gebruiken op de huidige laag: de afbeelding neemt al het hele gebied in beslag.",
+ "Cancel": "Annuleren",
+ "Canvas Size": "Canvas grootte",
+ "Center": "Midden",
+ "Center x:": "Middelpunt x:",
+ "Center y:": "Middelpunt y:",
+ "Center:": "Midden:",
+ "Change Composition": "Compositie wijzigen",
+ "Change Layer Details": "Laagdetails wijzigen",
+ "Change Opacity": "Wijzig de dekking",
+ "Channel:": "Kanaal:",
+ "Circle": "Cirkel",
+ "Clarendon": "Clarendon",
+ "Clear": "Wissen",
+ "Clear Selection": "Selectie wissen",
+ "Clone Tool": "Kloon gereedschap",
+ "Clone count:": "Aantal klonen:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Kloontool uitgeschakeld voor afbeelding met gewijzigd formaat. Gelieve eerst te rasteren.",
+ "Cloned edges": "Gekloonde randen",
+ "Close": "Dichtbij",
+ "Color #": "Kleur #",
+ "Color Corrections": "Kleurcorrecties",
+ "Color Palette": "Kleurenpalet",
+ "Color Zoom": "Kleurzoom",
+ "Color alpha value can not be zero.": "Kleur alfa-waarde kan niet nul zijn.",
+ "Color to Alpha": "Kleur naar Alpha",
+ "Color zoom": "Kleurzoom",
+ "Color:": "Kleur:",
+ "Colors": "Kleuren",
+ "Colors:": "Kleuren:",
+ "Common Filters": "Gemeenschappelijke filters",
+ "Composition": "Samenstelling",
+ "Composition:": "Samenstelling:",
+ "Content Fill": "Inhoud vullen",
+ "Contrast": "Contrast",
+ "Contrast:": "Contrast:",
+ "Convert layer to raster": "Converteer laag naar raster",
+ "Convert to Raster": "Converteren naar raster",
+ "Copy Selection": "Selectie kopiëren",
+ "Copy to Clipboard": "Kopiëren naar klembord",
+ "Courier": "Koerier",
+ "Crop Tool": "Bijsnijdgereedschap",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Bijsnijden op geroteerde laag wordt niet ondersteund. Converteer het naar raster om door te gaan.",
+ "Ctrl + C": "Ctrl+C",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl + V",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "Huidige",
+ "Current Color Preview": "Huidige kleurvoorbeeld",
+ "Custom": "Aangepast",
+ "Data URL": "Gegevens-URL",
+ "Data URL:": "Gegevens-URL:",
+ "Decrease": "Verminderen",
+ "Decrease Color Depth": "Kleurdiepte verminderen",
+ "Degree:": "Graad:",
+ "Del": "Del",
+ "Delete": "Verwijderen",
+ "Delete Selection": "Selectie verwijderen",
+ "Denoise": "Ruis verminderen",
+ "Desaturate Tool": "Ontzadigen gereedschap",
+ "Description:": "Beschrijving:",
+ "Deutsch": "Duits",
+ "Differences": "Verschillen",
+ "Differences Down": "Verschillen omlaag",
+ "Direction:": "Richting:",
+ "Dither": "Dither",
+ "Dithering:": "Dithering:",
+ "Dominant color:": "Dominante kleur:",
+ "Dot Screen": "Puntenscherm",
+ "Down": "Omlaag",
+ "Duplicate": "Dupliceren",
+ "Duplicate Layer": "Dupliceer laag",
+ "Duplicate layer": "Dubbele laag",
+ "Dutch": "Nederlands",
+ "Dynamic": "Dynamisch",
+ "Edge": "Rand",
+ "Edit": "Bewerken",
+ "Edit text...": "Tekst bewerken...",
+ "Effect browser": "Effectenbrowser",
+ "Effects": "Effecten",
+ "Effects browser": "Effectenbrowser",
+ "Email:": "E-mail:",
+ "Emboss": "In reliëf",
+ "Empty selection": "Lege selectie",
+ "Empty selection or type not image.": "Lege selectie of type geen afbeelding.",
+ "Enable autoresize:": "Automatisch aanpassen van formaat inschakelen:",
+ "End": "Einde",
+ "English": "Engels",
+ "English (UK)": "Engels (VK)",
+ "Enrich": "Verrijken",
+ "Enter": "Invoeren",
+ "Erase Tool": "Wismiddel",
+ "Erase on rotate object is disabled. Please rasterize first.": "Wissen bij roteren van object is uitgeschakeld. Gelieve eerst te rasteren.",
+ "Error": "Fout",
+ "Error connecting to service.": "Fout bij het verbinden met de service.",
+ "Error loading the list of fonts from Google.": "Fout bij het laden van de lijst met lettertypen van Google.",
+ "Error registering service worker": "Fout bij registreren van servicemedewerker",
+ "Error: can not find filter:": "Fout: kan filter niet vinden:",
+ "Error: can not find layer with id:": "Fout: kan laag met id niet vinden:",
+ "Error: missing details event target": "Fout: ontbrekend doelevenementdoel",
+ "Error: unknown layer type:": "Fout: onbekend laagtype:",
+ "Error: unsupported attribute type:": "Fout: niet-ondersteund attribuuttype:",
+ "Esc": "Esc",
+ "Escape": "Ontsnappen",
+ "Español": "Spaans",
+ "Expand edges": "Randen uitbreiden",
+ "Exponent:": "Exponent:",
+ "Export": "Exporteren",
+ "External": "Extern",
+ "Factor:": "Factor:",
+ "File": "Bestand",
+ "File name:": "Bestandsnaam:",
+ "File size:": "Bestandsgrootte:",
+ "Fill": "Vullen",
+ "Fill Tool": "Vulmiddel",
+ "Fit": "Passend maken",
+ "Fit Window": "Venster passend maken",
+ "Fit window": "Venster passen",
+ "Flatten Image": "Afbeelding afvlakken",
+ "Flip": "Omdraaien",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpentijn",
+ "Font": "Lettertype",
+ "Français": "Frans",
+ "Full HD, 1080p": "Volledig HD, 1080p",
+ "Full Screen": "Volledig scherm",
+ "Full layers data": "Volledige laaggegevens",
+ "Gap:": "Spleet:",
+ "Gaussian Blur": "Gaussische vervaging",
+ "Gif delay:": "Gif-vertraging:",
+ "Gingham": "Gingham",
+ "GitHub:": "GitHub:",
+ "Gradient Radius:": "Gradiëntradius:",
+ "Grains": "Korrels",
+ "Graphics Interchange Format": "Grafische uitwisselingsformaat",
+ "Gray": "Grijs",
+ "Grayscale": "Grijstinten",
+ "Greek": "Grieks",
+ "Green": "Groen",
+ "Green channel:": "Groen kanaal:",
+ "Greyscale:": "Grijstinten:",
+ "Grid": "Raster",
+ "Grid on\/off": "Raster aan\/uit",
+ "Guides": "Gidsen",
+ "Guides enabled.": "Gidsen ingeschakeld.",
+ "H Radius:": "H Radius:",
+ "H. Align:": "H. Uitlijnen:",
+ "Heatmap": "Warmtekaart",
+ "Height (%):": "Hoogte (%):",
+ "Height:": "Hoogte:",
+ "Help": "Help",
+ "Helvetica": "Helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Hex",
+ "Hide": "Verbergen",
+ "Histogram": "Histogram",
+ "Histogram:": "Histogram:",
+ "Home": "Start",
+ "Horizontal": "Horizontaal",
+ "Horizontal Alignment": "Horizontale uitlijning",
+ "Horizontal blur:": "Horizontale vervaging:",
+ "Horizontal:": "Horizontaal:",
+ "Hue": "Tint",
+ "Hue Rotate": "Hue Rotate",
+ "Hue:": "Tint:",
+ "Image": "Afbeelding",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Afbeeldingsgegevens met meerdere lagen. Kan worden geopend met miniPaint -",
+ "Impact": "Impact",
+ "In proportion:": "In proportie:",
+ "Increase": "Verhogen",
+ "Information": "Informatie",
+ "Inkwell": "Inktpot",
+ "Insert": "Invoegen",
+ "Insert guides": "Gidsen plaatsen",
+ "Insert new layer": "Nieuwe laag invoegen",
+ "Instagram Filters": "Instagram Filters",
+ "Invalid Hex Code": "Ongeldige Hex Code",
+ "Italiano": "Italiaans",
+ "JPG\/JPEG Format": "JPG\/JPEG Formaat",
+ "Kerning:": "Kerning:",
+ "Key-Points": "Belangrijke Punten",
+ "KeyU": "SleutelU",
+ "Keyboard Shortcuts": "Sneltoetsen",
+ "Keyword:": "Sleutelwoord:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Landschap",
+ "Language": "Taal",
+ "Last modified": "Laatst gewijzigd",
+ "Layer": "Laag",
+ "Layer details": "Laagdetails",
+ "Layer is empty.": "Laag is leeg.",
+ "Layer is not compatible with resize": "Laag is niet compatibel met formaatwijziging",
+ "Layer is vector, convert it to raster to apply this tool.": "Laag is vector, converteer deze naar raster om dit gereedschap toe te passen.",
+ "Layers": "Lagen",
+ "Layers:": "Lagen:",
+ "Layout:": "Indeling:",
+ "Left": "Links",
+ "Left to Right": "Links naar Rechts",
+ "Level:": "Niveau:",
+ "Levels:": "Niveaus:",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Luminantie:",
+ "Luminosity": "Luminositeit",
+ "Magic Eraser Tool": "Tovergummi",
+ "Merge Down": "Samenvoegen Omlaag",
+ "Merge Layers": "Lagen Samenvoegen",
+ "Merged": "Samengevoegd",
+ "Metrics": "Metrieken",
+ "Middle": "Midden",
+ "Missing at least 1 size parameter.": "Minstens 1 grootteparameter ontbreekt.",
+ "Missing permissions to write to Clipboard.cc": "Machtigingen ontbreken om naar Clipboard.cc te schrijven",
+ "Mode:": "Modus:",
+ "Module function not found.": "Modulefunctie niet gevonden.",
+ "Modules class not found:": "Modulesklasse niet gevonden:",
+ "Monospace": "Monospace",
+ "Mosaic": "Mozaïek",
+ "Mouse:": "Muis:",
+ "Move": "Verplaatsen",
+ "Move Layer": "Laag Verplaatsen",
+ "Move layer down": "Verplaats laag naar beneden",
+ "Move layer up": "Verplaats laag naar boven",
+ "Name:": "Naam:",
+ "Negative": "Negatief",
+ "New": "Nieuw",
+ "New Bezier Layer": "Nieuwe Bezier-laag",
+ "New Brush Layer": "Nieuwe Kwastlaag",
+ "New Ellipse Layer": "Nieuwe Ellipslaag",
+ "New File": "Nieuw Bestand",
+ "New Gradient Layer": "Nieuwe Gradiëntlaag",
+ "New Layer": "Nieuwe Laag",
+ "New Line Layer": "Nieuwe Lijnlaag",
+ "New Pencil Layer": "Nieuwe Potloodlaag",
+ "New Polygon Layer": "Nieuwe veelhoeklaag",
+ "New Rectangle Layer": "Nieuwe Rechthoekige Laag",
+ "New Text Layer": "Nieuwe Tekstlaag",
+ "New file": "Nieuw bestand",
+ "New from Selection": "Nieuw vanuit Selectie",
+ "New layer": "Nieuwe laag",
+ "Next": "Volgende",
+ "Night Vision": "Nachtkijker",
+ "None": "Geen",
+ "Nothing is selected.": "Niets is geselecteerd.",
+ "Offset X:": "Verschuiving X:",
+ "Offset Y:": "Verschuiving Y:",
+ "Oil": "Olie",
+ "Ok": "Oké",
+ "Online image editor.": "Online afbeelding editor",
+ "Opacity": "Dekking",
+ "Opacity:": "Dekking:",
+ "Open": "Openen",
+ "Open Data URL": "Open Data-URL",
+ "Open Directory": "Open Map",
+ "Open File": "Open Bestand",
+ "Open File Data URL": "Open Bestand Data-URL",
+ "Open File URL": "Open Bestand-URL",
+ "Open File Webcam": "Open Bestand Webcam",
+ "Open Image": "Open Afbeelding",
+ "Open JSON File": "Open JSON Bestand",
+ "Open Test Template": "Open Test Sjabloon",
+ "Open URL": "Open URL",
+ "Open data URL": "Open data-URL",
+ "Open from Webcam": "Open van Webcam",
+ "Original Size": "Origineel Formaat",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Afbeelding converteren naar SVG",
+ "PageDown": "Pagina Omlaag",
+ "PageUp": "Pagina Omhoog",
+ "Palette": "Palet",
+ "Parameter #1:": "Parameter #1:",
+ "Parameter #2:": "Parameter #2:",
+ "Paste": "Plakken",
+ "Pencil": "Potlood",
+ "Percentage:": "Percentage:",
+ "Pixels:": "Pixels:",
+ "Placeholder comment for color channels": "Plaatsvervangend commentaar voor kleurkanalen",
+ "Placeholder comment for color picker": "Plaatsvervangend commentaar voor kleurkiezer",
+ "Placeholder comment for color swatches": "Plaatsvervangend commentaar voor kleurenstaaltjes",
+ "Portable Network Graphics": "Portable Network Graphics",
+ "Portrait": "Portret",
+ "Português": "Portugees",
+ "Position:": "Positie:",
+ "Power:": "Kracht:",
+ "Preview": "Voorbeeld",
+ "Previous": "Vorige",
+ "Previous layer must be image, convert it to raster to apply this tool.": "De vorige laag moet een afbeelding zijn, zet deze om naar raster om deze tool toe te passen.",
+ "Print": "Afdrukken",
+ "Quality:": "Kwaliteit:",
+ "Quick Load": "Snel laden",
+ "Quick Save": "Snel opslaan",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Verwijder Achtergrond van Afbeelding",
+ "Radial": "Radiaal",
+ "Radial gradient": "Radiale gradiënt",
+ "Radius:": "Straal:",
+ "Range:": "Bereik:",
+ "Red": "Rood",
+ "Red channel:": "Rood kanaal:",
+ "Redo": "Opnieuw",
+ "Remove all": "Verwijder alles",
+ "Rename": "Hernoemen",
+ "Rename Layer": "Laag hernoemen",
+ "Rendered with errors.": "Weergegeven met fouten.",
+ "Rendering...": "Renderen...",
+ "Replace Color": "Kleur vervangen",
+ "Replace color": "Kleur vervangen",
+ "Replacement:": "Vervanging:",
+ "Report Issues": "Problemen rapporteren",
+ "Reset": "Resetten",
+ "Resize": "Formaat wijzigen",
+ "Resize Boundary": "Formaat van grens wijzigen",
+ "Resize Layer": "Formaat van laag wijzigen",
+ "Resize Layers": "Formaat van lagen wijzigen",
+ "Resize Text Layer": "Formaat van tekstlaag wijzigen",
+ "Resized as background": "Hernoemd als achtergrond",
+ "Resized:": "Formaat gewijzigd:",
+ "Resolution:": "Resolutie:",
+ "Restore Alpha": "Alfa herstellen",
+ "Right": "Rechts",
+ "Right angle:": "Rechte hoek:",
+ "Right to Left": "Van rechts naar links",
+ "Rotate": "Roteren",
+ "Rotate Layer": "Laag roteren",
+ "Rotate is not supported on this type of object. Convert to raster?": "Roteren wordt niet ondersteund voor dit type object. Omzetten naar raster?",
+ "Rotate left": "Links roteren",
+ "Rotate:": "Roteren:",
+ "Ruler": "Liniaal",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - Afbeeldingen comprimeren en vergelijken",
+ "Saturate": "Verzadigen",
+ "Saturation": "Verzadiging",
+ "Saturation:": "Verzadiging:",
+ "Save As": "Opslaan als",
+ "Save As Data URL": "Opslaan als gegevens-URL",
+ "Save as": "Opslaan als",
+ "Save as type:": "Opslaan als type:",
+ "Save layers:": "Lagen opslaan:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "Opschalen wordt niet ondersteund in Hermite, Lanczos wordt gebruikt.",
+ "Scroll down": "Omlaag scrollen",
+ "Scroll up": "Omhoog scrollen",
+ "Search": "Zoeken",
+ "Search Images": "Afbeeldingen zoeken",
+ "Search for Font": "Zoek naar lettertype",
+ "Search:": "Zoekopdracht:",
+ "Select All": "Alles selecteren",
+ "Select Text Layer": "Tekstlaag selecteren",
+ "Select object tool": "Objectgereedschap selecteren",
+ "Selected": "Geselecteerd",
+ "Selection Tool": "Selectiegereedschap",
+ "Sensitivity:": "Gevoeligheid:",
+ "Separated": "Gescheiden",
+ "Separated (original types)": "Gescheiden (originele typen)",
+ "Sepia": "Sepia",
+ "Set Image Size": "Afbeeldingsgrootte instellen",
+ "Settings": "Instellingen",
+ "Shadow": "Schaduw",
+ "Shapes": "Vormen",
+ "Shapes (H)": "Vormen (H)",
+ "Sharpen": "Verscherpen",
+ "Sharpen Tool": "Verscherpgereedschap",
+ "Sharpen:": "Verscherpen:",
+ "Shift + S": "Shift + S",
+ "Shortcut Key:": "Sneltoets:",
+ "Show": "Show",
+ "Show \/ Hide": "Tonen \/ Verbergen",
+ "Show file size:": "Toon bestandsgrootte:",
+ "Simple": "Eenvoudig",
+ "Size is too big, max": "Grootte is te groot, maximaal",
+ "Size:": "Grootte:",
+ "Skip - layer must be image.": "Overslaan - laag moet een afbeelding zijn.",
+ "Solarize": "Solariseren",
+ "Sorry, cold not load getUserMedia() data:": "Sorry, kon getUserMedia() gegevens niet laden:",
+ "Sorry, image could not be loaded.": "Sorry, afbeelding kon niet worden geladen.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Sorry, afbeelding kon niet worden geladen. Probeer de afbeelding te kopiëren en te plakken.",
+ "Sorry, image is too big, max 5 MB.": "Sorry, afbeelding is te groot, maximaal 5 MB.",
+ "Source coordinates saved.": "Broncoördinaten opgeslagen.",
+ "Source is empty, right click on image or use long press to save source position.": "Bron is leeg, klik met de rechtermuisknop op de afbeelding of gebruik een lange druk om de bronpositie op te slaan.",
+ "Sprites": "Sprites",
+ "Square": "Vierkant",
+ "Stream:": "Stroom:",
+ "Strength:": "Kracht:",
+ "Strict": "Strikt",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - Comprimeer PNG en JPEG",
+ "Tab": "Tabblad",
+ "Tag Image File Format": "Tag afbeelding bestandsformaat",
+ "Tahoma": "Tahoma",
+ "Target:": "Doel:",
+ "The quick brown fox jumps over the lazy dog.": "De snelle bruine vos springt over de luie hond heen.",
+ "There": "Daar",
+ "There are no layers behind.": "Er zijn geen lagen achter.",
+ "There is only 1 layer.": "Er is slechts 1 laag.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Deze laag moet een afbeelding bevatten. Converteer deze alstublieft naar raster om deze tool toe te passen.",
+ "Tilt Shift": "Kantelverschuiving",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Broodrooster",
+ "Toggle": "Schakelen",
+ "Toggle Color Channels": "Schakel kleurkanalen",
+ "Toggle Color Picker": "Schakel kleurkiezer",
+ "Toggle Menu": "Schakel menu",
+ "Toggle Swatches": "Schakel kleurstalen",
+ "Tools": "Gereedschappen",
+ "Top": "Bovenkant",
+ "Top to Bottom": "Van boven naar beneden",
+ "Total pixels:": "Totaal aantal pixels:",
+ "Translate": "Vertalen",
+ "Translate Layer": "Vertaal laag",
+ "Translate error, can not find dictionary:": "Vertaalfout, kan woordenboek niet vinden:",
+ "Transparent:": "Transparant:",
+ "Trim": "Bijsnijden",
+ "Trim Layers": "Bijsnijden van lagen",
+ "Trim borders:": "Bijsnijden van randen:",
+ "Trim layer:": "Bijsnijden van laag:",
+ "Trim white color?": "Witte kleur bijsnijden?",
+ "Type:": "Type:",
+ "Türkçe": "Türkçe",
+ "Undo": "Ongedaan maken",
+ "Unique colors:": "Unieke kleuren:",
+ "Up": "Omhoog",
+ "Update": "Update",
+ "Update Brush Layer": "Werk penseel laag bij",
+ "Update Pencil Layer": "Werk potlood laag bij",
+ "Update guides": "Gidsen bijwerken",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Gebruik Ctrl+V sneltoets om te plakken vanaf het Klembord.",
+ "V Radius:": "V Straal:",
+ "V. Align:": "V. Uitlijnen:",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "Versie:",
+ "Vertical": "Verticaal",
+ "Vertical Alignment": "Verticale uitlijning",
+ "Vertical blur:": "Verticaal vervagen:",
+ "Vertical:": "Verticaal:",
+ "Vibrance": "Levendigheid",
+ "View": "Weergave",
+ "Vignette": "Vignet",
+ "ViliusL": "ViliusL",
+ "Vintage": "Vintage",
+ "Webcam": "Webcam",
+ "Webcam #": "Webcam #",
+ "Website:": "Website:",
+ "Weppy File Format": "Weppy bestandsformaat",
+ "Width (%):": "Breedte (%):",
+ "Width:": "Breedte:",
+ "Windows Bitmap": "Windows Bitmap",
+ "Word": "Woord",
+ "Word + Letter": "Woord + Letter",
+ "Wrap At:": "Omzetten bij:",
+ "Wrap:": "Omzetten:",
+ "Wrong dimensions": "Verkeerde afmetingen",
+ "Wrong file type, must be image or json.": "Verkeerd bestandstype, moet afbeelding of json zijn.",
+ "X end:": "X eind:",
+ "X position:": "X positie:",
+ "X start:": "X start:",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Y eind:",
+ "Y position:": "Y positie:",
+ "Y start:": "Y start:",
+ "You can also drag and drop items into browser.": "U kunt ook items naar de browser slepen en neerzetten.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Uw browser ondersteunt geen canvas of JavaScript is niet ingeschakeld.",
+ "Your browser does not support this format.": "Uw browser ondersteunt dit formaat niet.",
+ "Your search did not match any images.": "Uw zoekopdracht leverde geen overeenkomende afbeeldingen op.",
+ "Zoom": "Zoomen",
+ "Zoom Blur": "Zoomvervaging",
+ "Zoom In": "Inzoomen",
+ "Zoom Out": "Uitzoomen",
+ "Zoom blur": "Zoomvervaging",
+ "Zoom in": "Inzoomen",
+ "Zoom out": "Uitzoomen",
+ "Zoom:": "Zoom:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/pt.json b/paintplus/frontend/src/js/languages/pt.json
new file mode 100644
index 0000000..6f968ea
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/pt.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Ocorreu um problema ao remover o histórico de desfazer. isto",
+ "About": "Sobre",
+ "Active": "Ativo",
+ "Aden": "Aden",
+ "Advanced": "Avançado",
+ "All": "Todos",
+ "Alpha": "Alfa",
+ "Alpha:": "Alfa:",
+ "Anonymous": "Anônimo",
+ "Anti aliasing": "Anti-aliasing",
+ "Application markup may have changed,": "A marcação do aplicativo pode ter mudado,",
+ "Arial": "Arial",
+ "Arrow": "Flecha",
+ "ArrowDown": "Seta para baixo",
+ "ArrowLeft": "Seta para a esquerda",
+ "ArrowRight": "Seta para a direita",
+ "ArrowUp": "Seta para cima",
+ "Author:": "Autor:",
+ "Auto Adjust Colors": "Cores de ajuste automático",
+ "Auto Kerning": "Auto Kerning",
+ "Average:": "Média:",
+ "Backspace": "Backspace",
+ "Base": "Base",
+ "Basic": "Básico",
+ "Black and White": "Preto e branco",
+ "Blue": "Azul",
+ "Blue channel:": "Canal azul:",
+ "Blueprint": "Blueprint",
+ "Blur Radius:": "Raio de desfoque:",
+ "Blur Tool": "Ferramenta de desfoque",
+ "Blur power:": "Intensidade do desfoque:",
+ "Borders": "Bordas",
+ "Bottom": "Inferior",
+ "Bottom to Top": "De baixo para cima",
+ "Bounds:": "Limites:",
+ "Box": "Caixa",
+ "Box Blur": "Desfoque de caixa",
+ "Box blur": "Desfoque de caixa",
+ "Brightness": "Brilho",
+ "Brightness:": "Brilho:",
+ "Bulge\/Pinch Tool": "Ferramenta Bulge \/ Pinch",
+ "Burn": "Queimar",
+ "Can not animate 1 layer.": "Não é possível animar 1 camada.",
+ "Can not find previous layer.": "Não é possível encontrar a camada anterior.",
+ "Can not use this tool on current layer: image already takes all area.": "Não é possível usar esta ferramenta na camada atual: a imagem já ocupa toda a área.",
+ "Cancel": "Cancelar",
+ "Canvas Size": "Tamanho da tela",
+ "Center": "Centro",
+ "Center x:": "Centro x:",
+ "Center y:": "Centro y:",
+ "Center:": "Centro:",
+ "Change Composition": "Alterar composição",
+ "Change Layer Details": "Alterar os detalhes da camada",
+ "Change Opacity": "Alterar opacidade",
+ "Channel:": "Canal:",
+ "Circle": "Círculo",
+ "Clarendon": "Clarendon",
+ "Clear": "Limpar",
+ "Clear Selection": "Limpar seleção",
+ "Clone Tool": "Ferramenta Clone",
+ "Clone count:": "Contagem de clones:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Ferramenta de clonagem desativada para imagem redimensionada. Por favor, rasterize primeiro.",
+ "Cloned edges": "Bordas clonadas",
+ "Close": "Fechar",
+ "Color #": "Cor #",
+ "Color Corrections": "Correções de cores",
+ "Color Palette": "Paleta de cores",
+ "Color Zoom": "Zoom de cor",
+ "Color alpha value can not be zero.": "O valor alfa da cor não pode ser zero.",
+ "Color to Alpha": "Cor para alfa",
+ "Color zoom": "Zoom de cor",
+ "Color:": "Cor:",
+ "Colors": "Cores",
+ "Colors:": "Cores:",
+ "Common Filters": "Filtros Comuns",
+ "Composition": "Composição",
+ "Composition:": "Composição:",
+ "Content Fill": "Preenchimento de conteúdo",
+ "Contrast": "Contraste",
+ "Contrast:": "Contraste:",
+ "Convert layer to raster": "Rasterizar camada",
+ "Convert to Raster": "Rasterizar",
+ "Copy Selection": "Seleção de cópia",
+ "Copy to Clipboard": "Copiar para área de transferência",
+ "Courier": "Courier",
+ "Crop Tool": "Ferramenta de corte",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "O corte na camada girada não é compatível. Rasterize a camada para continuar.",
+ "Ctrl + C": "Ctrl + C",
+ "Ctrl+A": "Ctrl+A",
+ "Ctrl+C": "Ctrl+C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl+V",
+ "Ctrl+Y": "Ctrl+Y",
+ "Ctrl+Z": "Ctrl+Z",
+ "Current": "Atual",
+ "Current Color Preview": "Pré-visualização da cor atual",
+ "Custom": "personalizado",
+ "Data URL": "URL de dados",
+ "Data URL:": "URL de dados:",
+ "Decrease": "Diminuir",
+ "Decrease Color Depth": "Diminuir a profundidade de cor",
+ "Degree:": "Grau:",
+ "Del": "Del",
+ "Delete": "Excluir",
+ "Delete Selection": "Excluir seleção",
+ "Denoise": "Reduzir ruído",
+ "Desaturate Tool": "Ferramenta de dessaturação",
+ "Description:": "Descrição:",
+ "Deutsch": "Deutsch",
+ "Differences": "Diferenças",
+ "Differences Down": "Diferenças para baixo",
+ "Direction:": "Direção:",
+ "Dither": "Dither",
+ "Dithering:": "Dithering:",
+ "Dominant color:": "Cor dominante:",
+ "Dot Screen": "Tela de ponto",
+ "Down": "Abaixo",
+ "Duplicate": "Duplicado",
+ "Duplicate Layer": "Duplicar Camada",
+ "Duplicate layer": "Duplicar Camada",
+ "Dynamic": "Dinâmico",
+ "Edge": "Borda",
+ "Edit": "Editar",
+ "Edit text...": "Editar texto...",
+ "Effect browser": "Buscador de efeitos",
+ "Effects": "Efeitos",
+ "Effects browser": "Buscador de efeitos",
+ "Email:": "Email:",
+ "Emboss": "Em relevo",
+ "Empty selection": "Seleção vazia",
+ "Empty selection or type not image.": "Seleção vazia ou tipo selecionado não é uma imagem.",
+ "Enable autoresize:": "Ativar redimensionamento automático:",
+ "End": "Fim",
+ "English": "English",
+ "English (UK)": "English (UK)",
+ "Enrich": "Enriquecer",
+ "Enter": "Entrar",
+ "Erase Tool": "Ferramenta Apagar",
+ "Erase on rotate object is disabled. Please rasterize first.": "Apagar ao girar o objeto está desativado. Por favor, rasterize o objeto primeiro.",
+ "Error": "Erro",
+ "Error connecting to service.": "Erro ao conectar-se ao serviço.",
+ "Error loading the list of fonts from Google.": "Erro ao carregar a lista de fontes do Google.",
+ "Error registering service worker": "Erro ao registrar o service worker",
+ "Error: can not find filter:": "Erro: não foi possível encontrar o filtro:",
+ "Error: can not find layer with id:": "Erro: não foi possível encontrar camada com id:",
+ "Error: missing details event target": "Erro: faltam detalhes do alvo do evento",
+ "Error: unknown layer type:": "Erro: tipo de camada desconhecido:",
+ "Error: unsupported attribute type:": "Erro: tipo de atributo não suportado:",
+ "Esc": "Esc",
+ "Escape": "Escapar",
+ "Español": "Español",
+ "Expand edges": "Expandir bordas",
+ "Exponent:": "Expoente:",
+ "Export": "Exportar",
+ "External": "Externo",
+ "Factor:": "Fator:",
+ "File": "Arquivo",
+ "File name:": "Nome do arquivo:",
+ "File size:": "Tamanho do arquivo:",
+ "Fill": "Preencher",
+ "Fill Tool": "Ferramenta de Preenchimento",
+ "Fit": "Ajustar",
+ "Fit Window": "Ajuste de Janela",
+ "Fit window": "Ajustar janela",
+ "Flatten Image": "Achatar imagem",
+ "Flip": "Giro",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpentine",
+ "Font": "Fonte",
+ "Français": "Français",
+ "Full HD, 1080p": "Full HD, 1080p",
+ "Full Screen": "Tela cheia",
+ "Full layers data": "Dados de camadas completas",
+ "Gap:": "Espaçamento:",
+ "Gaussian Blur": "Desfoque Gaussiano",
+ "Gif delay:": "Atraso do GIF:",
+ "Gingham": "Tecido de algodão",
+ "GitHub:": "GitHub:",
+ "Gradient Radius:": "Raio do Gradiente:",
+ "Grains": "Grãos",
+ "Graphics Interchange Format": "Formato de intercâmbio de gráficos",
+ "Gray": "Cinza",
+ "Grayscale": "Escala de cinza",
+ "Greek": "Ελληνικά (Greek)",
+ "Green": "Verde",
+ "Green channel:": "Canal verde:",
+ "Greyscale:": "Escala de cinza:",
+ "Grid": "Grade",
+ "Grid on\/off": "Grades Ligado \/ Desligado",
+ "Guides": "Guias",
+ "Guides enabled.": "Guias ativados.",
+ "H Radius:": "Raio H.",
+ "H. Align:": "Alinhamento H.",
+ "Heatmap": "Mapa de calor",
+ "Height (%):": "Altura (%):",
+ "Height:": "Altura:",
+ "Help": "Ajuda",
+ "Helvetica": "helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Hex",
+ "Hide": "Ocultar",
+ "Histogram": "Histograma",
+ "Histogram:": "Histograma:",
+ "Home": "Início",
+ "Horizontal": "Horizontal",
+ "Horizontal Alignment": "Alinhamento horizontal",
+ "Horizontal blur:": "Desfoque horizontal:",
+ "Horizontal:": "Horizontal:",
+ "Hue": "Matiz",
+ "Hue Rotate": "Rotação de Matiz",
+ "Hue:": "Matiz:",
+ "Image": "Imagem",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Dados de imagem com várias camadas. Pode ser aberto usando o miniPaint -",
+ "Impact": "Impact",
+ "In proportion:": "Na proporção:",
+ "Increase": "Aumentar",
+ "Information": "Informação",
+ "Inkwell": "Tinteiro",
+ "Insert": "Inserir",
+ "Insert guides": "Inserir guias",
+ "Insert new layer": "Inserir nova camada",
+ "Instagram Filters": "Filtros de Instagram",
+ "Invalid Hex Code": "Código Hex inválido",
+ "Italiano": "Italiano",
+ "JPG\/JPEG Format": "Formato JPG \/ JPEG",
+ "Kerning:": "Kerning:",
+ "Key-Points": "Pontos-chave",
+ "KeyU": "KeyU",
+ "Keyboard Shortcuts": "Atalhos de teclado",
+ "Keyword:": "Palavra-chave:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Paisagem",
+ "Language": "Idioma",
+ "Last modified": "Última modificação",
+ "Layer": "Camada",
+ "Layer details": "Detalhes da camada",
+ "Layer is empty.": "A camada está vazia.",
+ "Layer is not compatible with resize": "Camada não é compatível com redimensionamento",
+ "Layer is vector, convert it to raster to apply this tool.": "A camada é um vetor, rasterize-a para usar esta ferramenta.",
+ "Layers": "Camadas",
+ "Layers:": "Camadas:",
+ "Layout:": "Disposição:",
+ "Left": "Esquerda",
+ "Left to Right": "Da esquerda para direita",
+ "Level:": "Nível:",
+ "Levels:": "Níveis:",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Luminância:",
+ "Luminosity": "Luminosidade",
+ "Magic Eraser Tool": "Ferramenta de borracha mágica",
+ "Merge Down": "Mesclar para Baixo",
+ "Merge Layers": "Mesclar Camadas",
+ "Merged": "Mesclado",
+ "Metrics": "Métricas",
+ "Middle": "Meio",
+ "Missing at least 1 size parameter.": "Falta pelo menos 1 parâmetro de tamanho.",
+ "Missing permissions to write to Clipboard.cc": "Permissões ausentes para gravar em Clipboard.cc",
+ "Mode:": "Modo:",
+ "Module function not found.": "Função do módulo não encontrada.",
+ "Modules class not found:": "Classe de módulos não encontrada:",
+ "Monospace": "Monospace",
+ "Mosaic": "mosaico",
+ "Mouse:": "Mouse:",
+ "Move": "Mover",
+ "Move Layer": "Mover Camada",
+ "Move layer down": "Mover camada para baixo",
+ "Move layer up": "Mover camada para cima",
+ "Name:": "Nome:",
+ "Negative": "Negativo",
+ "New": "Novo",
+ "New Bezier Layer": "Nova camada de Bézier",
+ "New Brush Layer": "Nova Camada de Pincel",
+ "New Ellipse Layer": "Nova Camada de Elipse",
+ "New File": "Novo arquivo",
+ "New Gradient Layer": "Nova Camada de Gradiente",
+ "New Layer": "Nova camada",
+ "New Line Layer": "Nova Camada de Linha",
+ "New Pencil Layer": "Nova Camada de Lápis",
+ "New Polygon Layer": "Nova camada de polígono",
+ "New Rectangle Layer": "Nova Camada de Retângulo",
+ "New Text Layer": "Nova Camada de Texto",
+ "New file": "Novo arquivo",
+ "New from Selection": "Novo da seleção",
+ "New layer": "Nova camada",
+ "Next": "Próximo",
+ "Night Vision": "Visão noturna",
+ "None": "Nenhum",
+ "Nothing is selected.": "Não há nada selecionado.",
+ "Offset X:": "Deslocamento X:",
+ "Offset Y:": "Deslocamento Y:",
+ "Oil": "Óleo",
+ "Ok": "Ok",
+ "Online image editor.": "Editor de imagens online.",
+ "Opacity": "Opacidade",
+ "Opacity:": "Opacidade:",
+ "Open": "Aberto",
+ "Open Data URL": "Abrir URL de dados",
+ "Open Directory": "Diretório aberto",
+ "Open File": "Abrir arquivo",
+ "Open File Data URL": "URL de dados de arquivo aberta",
+ "Open File URL": "URL do arquivo aberta",
+ "Open File Webcam": "Abrir arquivo da webcam",
+ "Open Image": "Abrir Imagem",
+ "Open JSON File": "Abrir arquivo JSON",
+ "Open Test Template": "Abrir modelo de teste",
+ "Open URL": "Abrir URL",
+ "Open data URL": "Abrir URL de dados",
+ "Open from Webcam": "Abrir na webcam",
+ "Original Size": "Tamanho original",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Converter imagem para SVG",
+ "PageDown": "PageDown",
+ "PageUp": "PageUp",
+ "Palette": "Paleta",
+ "Parameter #1:": "Parâmetro #1:",
+ "Parameter #2:": "Parâmetro #2:",
+ "Paste": "Colar",
+ "Pencil": "Lápis",
+ "Percentage:": "Porcentagem:",
+ "Pixels:": "Píxeis:",
+ "Placeholder comment for color channels": "Comentário reservado para canais de cores",
+ "Placeholder comment for color picker": "Comentário reservado para posição para o seletor de cores",
+ "Placeholder comment for color swatches": "Comentário reservado para amostras de cores",
+ "Portable Network Graphics": "Gráficos Portáteis de Rede",
+ "Portrait": "Retrato",
+ "Português": "Português",
+ "Position:": "Posição:",
+ "Power:": "Poder:",
+ "Preview": "Pré-visualização",
+ "Previous": "Anterior",
+ "Previous layer must be image, convert it to raster to apply this tool.": "A camada anterior deve ser uma imagem, rasterize-a para aplicar esta ferramenta.",
+ "Print": "Imprimir",
+ "Quality:": "Qualidade:",
+ "Quick Load": "Carregamento Rápido",
+ "Quick Save": "Salvamento Rápido",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Remover fundo da imagem",
+ "Radial": "Radial",
+ "Radial gradient": "Gradiente radial",
+ "Radius:": "Raio:",
+ "Range:": "Alcance:",
+ "Red": "Vermelho",
+ "Red channel:": "Canal vermelho:",
+ "Redo": "Refazer",
+ "Remove all": "Remover tudo",
+ "Rename": "Renomear",
+ "Rename Layer": "Renomear Camada",
+ "Rendered with errors.": "Renderizado com erros.",
+ "Rendering...": "Renderizando...",
+ "Replace Color": "Substituir Cor",
+ "Replace color": "Substitua cor",
+ "Replacement:": "Substituição:",
+ "Report Issues": "Relatar problemas",
+ "Reset": "Redefinir",
+ "Resize": "Redimensionar",
+ "Resize Boundary": "Redimensionar limite",
+ "Resize Layer": "Camada de redimensionamento",
+ "Resize Layers": "Camadas de redimensionamento",
+ "Resize Text Layer": "Redimensionar Camada de Texto",
+ "Resized as background": "Redimensionado como plano de fundo",
+ "Resized:": "Redimensionado:",
+ "Resolution:": "Resolução:",
+ "Restore Alpha": "Restaurar alfa",
+ "Right": "Direita",
+ "Right angle:": "Ângulo direito:",
+ "Right to Left": "Direita para a esquerda",
+ "Rotate": "Rotacionar",
+ "Rotate Layer": "Rotacionar Camada",
+ "Rotate is not supported on this type of object. Convert to raster?": "Rotacionar não é suportado neste tipo de objeto. Rasterizar objeto?",
+ "Rotate left": "Rotacionar à esquerda",
+ "Rotate:": "Rotacionar:",
+ "Ruler": "Régua",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - Comprimir e comparar imagens",
+ "Saturate": "Saturar",
+ "Saturation": "Saturação",
+ "Saturation:": "Saturação:",
+ "Save As": "Salvar como",
+ "Save As Data URL": "Salvar como URL de dados",
+ "Save as": "Salvar como",
+ "Save as type:": "Salvar como tipo:",
+ "Save layers:": "Salvar camadas:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "O aumento de escala não é compatível com Hermite, usando Lanczos.",
+ "Scroll down": "Deslize para baixo",
+ "Scroll up": "Deslize para cima",
+ "Search": "Pesquisar",
+ "Search Images": "Pesquisar Imagens",
+ "Search for Font": "Pesquisar Fonte",
+ "Search:": "Pesquisar:",
+ "Select All": "Selecionar tudo",
+ "Select Text Layer": "Selecione Camada de Texto",
+ "Select object tool": "Selecione a ferramenta de objeto",
+ "Selected": "Selecionado",
+ "Selection Tool": "Ferramenta de Seleção",
+ "Sensitivity:": "Sensibilidade:",
+ "Separated": "Separados",
+ "Separated (original types)": "Separados (tipos originais)",
+ "Sepia": "Sépia",
+ "Set Image Size": "Definir tamanho da imagem",
+ "Settings": "Configurações",
+ "Shadow": "Sombra",
+ "Shapes": "Formas",
+ "Shapes (H)": "Formas (H)",
+ "Sharpen": "Afiar",
+ "Sharpen Tool": "Ferramenta de Afiar",
+ "Sharpen:": "Afiar:",
+ "Shift + S": "Shift + S",
+ "Shortcut Key:": "Tecla de atalho:",
+ "Show": "Mostrar",
+ "Show \/ Hide": "Mostrar \/ Ocultar",
+ "Show file size:": "Mostrar tamanho do arquivo:",
+ "Simple": "Simples",
+ "Size is too big, max": "O tamanho é muito grande, máximo",
+ "Size:": "Tamanho:",
+ "Skip - layer must be image.": "Pular - camada deve ser uma imagem.",
+ "Solarize": "Solarize",
+ "Sorry, cold not load getUserMedia() data:": "Desculpe, não foi possível carregar dados de getUserMedia():",
+ "Sorry, image could not be loaded.": "Desculpe, não foi possível carregar a imagem.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Desculpe, a imagem não pôde ser carregada. Tente copiar a imagem e cole-a.",
+ "Sorry, image is too big, max 5 MB.": "Desculpe, a imagem é muito grande, ultrapassa o máximo permitido de 5 MB.",
+ "Source coordinates saved.": "Coordenadas da fonte salvas.",
+ "Source is empty, right click on image or use long press to save source position.": "A fonte está vazia, clique com o botão direito na imagem ou pressione e segure para salvar a posição da fonte.",
+ "Sprites": "Sprites",
+ "Square": "Quadrado",
+ "Stream:": "Transmissão:",
+ "Strength:": "Força:",
+ "Strict": "Estrito",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - Compactar PNG e JPEG",
+ "Tab": "Aba",
+ "Tag Image File Format": "Formato de Arquivo de Imagem Tag",
+ "Tahoma": "Tahoma",
+ "Target:": "Alvo:",
+ "The quick brown fox jumps over the lazy dog.": "A rápida raposa marrom salta sobre o cachorro preguiçoso.",
+ "There": "Lá",
+ "There are no layers behind.": "Não há camadas atrás.",
+ "There is only 1 layer.": "Existe apenas uma camada.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Esta camada deve ser uma imagem, rasterize-a para aplicar esta ferramenta.",
+ "Tilt Shift": "Desvio de Inclinação",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Torradeira",
+ "Toggle": "Alternar",
+ "Toggle Color Channels": "Alternar canais de cores",
+ "Toggle Color Picker": "Alternar seletor de cores",
+ "Toggle Menu": "Alternar menu",
+ "Toggle Swatches": "Alternar amostras",
+ "Tools": "Ferramentas",
+ "Top": "Topo",
+ "Top to Bottom": "De cima para baixo",
+ "Total pixels:": "Total de pixels:",
+ "Translate": "Traduzir",
+ "Translate Layer": "Traduzir Camada",
+ "Translate error, can not find dictionary:": "Erro de tradução, não foi possível encontrar dicionários:",
+ "Transparent:": "Transparente:",
+ "Trim": "Aparar",
+ "Trim Layers": "Aparar Camadas",
+ "Trim borders:": "Aparar Bordas:",
+ "Trim layer:": "Aparar camada:",
+ "Trim white color?": "Aparar cor branca?",
+ "Type:": "Tipo:",
+ "Türkçe": "Türkçe",
+ "Undo": "Desfazer",
+ "Unique colors:": "Cores únicas:",
+ "Up": "Acima",
+ "Update": "Atualizar",
+ "Update Brush Layer": "Atualizar Camada de Pincel",
+ "Update Pencil Layer": "Atualizar Camada de Lápis",
+ "Update guides": "Atualizar guias",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Use o atalho de teclado Ctrl + V para colar da área de transferência.",
+ "V Radius:": "Raio V.",
+ "V. Align:": "Alinhamento V.",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "Versão:",
+ "Vertical": "Vertical",
+ "Vertical Alignment": "Alinhamento vertical",
+ "Vertical blur:": "Desfoque vertical:",
+ "Vertical:": "Vertical:",
+ "Vibrance": "Vibração",
+ "View": "Visualizar",
+ "Vignette": "Vinheta",
+ "ViliusL": "ViliusL",
+ "Vintage": "Vintage",
+ "Webcam": "Webcam",
+ "Webcam #": "Webcam #",
+ "Website:": "Website:",
+ "Weppy File Format": "Formato de arquivo Weppy",
+ "Width (%):": "Largura (%):",
+ "Width:": "Largura:",
+ "Windows Bitmap": "Bitmap do Windows",
+ "Word": "Palavra",
+ "Word + Letter": "Palavra + Letra",
+ "Wrap At:": "Embrulhar em:",
+ "Wrap:": "Embrulho:",
+ "Wrong dimensions": "Dimensões erradas",
+ "Wrong file type, must be image or json.": "Tipo de arquivo errado, deve ser um arquivo do tipo imagem ou json.",
+ "X end:": "X final:",
+ "X position:": "Posição X:",
+ "X start:": "X inicial:",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Y final:",
+ "Y position:": "Posição Y:",
+ "Y start:": "Y inicial:",
+ "You can also drag and drop items into browser.": "Você também pode arrastar e soltar itens no navegador.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Seu navegador não é compatível com o HTML CANVAS ou o JavaScript não está habilitado.",
+ "Your browser does not support this format.": "Seu navegador não suporta este formato.",
+ "Your search did not match any images.": "Sua pesquisa não corresponde a nenhuma imagem.",
+ "Zoom": "Zoom",
+ "Zoom Blur": "Desfoque de zoom",
+ "Zoom In": "Mais Zoom",
+ "Zoom Out": "Menos zoom",
+ "Zoom blur": "Desfoque de zoom",
+ "Zoom in": "Mais Zoom",
+ "Zoom out": "Menos zoom",
+ "Zoom:": "Zoom:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/ru.json b/paintplus/frontend/src/js/languages/ru.json
new file mode 100644
index 0000000..25c572e
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/ru.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Ошибка при удалении истории отмен. Это",
+ "About": "О проекте",
+ "Active": "Активный",
+ "Aden": "Aden",
+ "Advanced": "Продвинутый",
+ "All": "Все",
+ "Alpha": "Альфа",
+ "Alpha:": "Альфа:",
+ "Anonymous": "Анонимное",
+ "Anti aliasing": "Сглаживание",
+ "Application markup may have changed,": "Разметка приложения могла измениться,",
+ "Arial": "Arial",
+ "Arrow": "Стрелка",
+ "ArrowDown": "Стрелка вниз",
+ "ArrowLeft": "Стрелка влево",
+ "ArrowRight": "Стрелка вправо",
+ "ArrowUp": "Стрелка вверх",
+ "Author:": "Автор:",
+ "Auto Adjust Colors": "Автоматическая настройка цвета",
+ "Auto Kerning": "Автоматический кернинг",
+ "Average:": "В среднем:",
+ "Backspace": "Backspace",
+ "Base": "База",
+ "Basic": "Основа",
+ "Black and White": "Черный и Белый",
+ "Blue": "Синий",
+ "Blue channel:": "Синий канал:",
+ "Blueprint": "Чертеж",
+ "Blur Radius:": "Радиус Размытия:",
+ "Blur Tool": "Инструмент Размытия",
+ "Blur power:": "Сила размытия:",
+ "Borders": "Границы",
+ "Bottom": "Дно",
+ "Bottom to Top": "Снизу вверх",
+ "Bounds:": "Границы:",
+ "Box": "Коробка",
+ "Box Blur": "Размытие по рамке",
+ "Box blur": "Размытие по рамке",
+ "Brightness": "Яркость",
+ "Brightness:": "Яркость:",
+ "Bulge\/Pinch Tool": "Вдавливание\/вытяжение",
+ "Burn": "Выжигание",
+ "Can not animate 1 layer.": "Невозможно анимировать 1 слой.",
+ "Can not find previous layer.": "Не удается найти предыдущий слой.",
+ "Can not use this tool on current layer: image already takes all area.": "Невозможно использовать этот инструмент на текущем слое: изображение уже занимает всю область.",
+ "Cancel": "Отмена",
+ "Canvas Size": "Размер холста",
+ "Center": "Центр",
+ "Center x:": "Центр x:",
+ "Center y:": "Центр y:",
+ "Center:": "Центр:",
+ "Change Composition": "Изменить состав",
+ "Change Layer Details": "Изменить сведения о слое",
+ "Change Opacity": "Изменить непрозрачность",
+ "Channel:": "Источник:",
+ "Circle": "Круг",
+ "Clarendon": "Clarendon",
+ "Clear": "Очистить",
+ "Clear Selection": "Очистить Выбор",
+ "Clone Tool": "Инструмент клонирования",
+ "Clone count:": "Количество клонов:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Инструмент клонирования отключен для изображения с измененным размером. Пожалуйста, сначала растрируйте.",
+ "Cloned edges": "Клонированные края",
+ "Close": "Закрывать",
+ "Color #": "Цвет #",
+ "Color Corrections": "Коррекция цвета",
+ "Color Palette": "Цветовая палитра",
+ "Color Zoom": "Усиление цвета",
+ "Color alpha value can not be zero.": "Значение цвета не может быть равно нулю.",
+ "Color to Alpha": "Цвет в прозрачность",
+ "Color zoom": "Усиление цвета",
+ "Color:": "Цвет:",
+ "Colors": "Цвета",
+ "Colors:": "Цвета:",
+ "Common Filters": "Обычные фильтры",
+ "Composition": "Состав",
+ "Composition:": "Состав:",
+ "Content Fill": "Заполнение содержимого",
+ "Contrast": "Контраст",
+ "Contrast:": "Контраст:",
+ "Convert layer to raster": "Растрировать слой",
+ "Convert to Raster": "Растрировать",
+ "Copy Selection": "Копировать выделение",
+ "Copy to Clipboard": "Скопировать в буфер",
+ "Courier": "Courier",
+ "Crop Tool": "Инструмент для Обрезки",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Обрезка повернутого слоя не поддерживается. Растрируйте его, чтобы продолжить.",
+ "Ctrl + C": "Ctrl + С",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "Ctrl+П",
+ "Ctrl+V": "Ctrl + V,",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "Выбранный",
+ "Current Color Preview": "Выбранный цвет",
+ "Custom": "Свой",
+ "Data URL": "URL данных",
+ "Data URL:": "URL данных:",
+ "Decrease": "Уменьшить",
+ "Decrease Color Depth": "Уменьшить глубину цвета",
+ "Degree:": "Градус:",
+ "Del": "Del",
+ "Delete": "Удалить",
+ "Delete Selection": "Удалить выделение",
+ "Denoise": "Шумоподавление",
+ "Desaturate Tool": "Инструмент обесцвечивания",
+ "Description:": "Описание:",
+ "Deutsch": "Deutsch",
+ "Differences": "Различия",
+ "Differences Down": "Разница вниз",
+ "Direction:": "Направление:",
+ "Dither": "Сгладить",
+ "Dithering:": "Сглаживание:",
+ "Dominant color:": "Доминирующий:",
+ "Dot Screen": "Точечный экран",
+ "Down": "Вниз",
+ "Duplicate": "Дублировать",
+ "Duplicate Layer": "Дублировать слой",
+ "Duplicate layer": "Дублировать слой",
+ "Dynamic": "Динамический",
+ "Edge": "Край",
+ "Edit": "Редактировать",
+ "Edit text...": "Редактировать текст...",
+ "Effect browser": "Подборка фильтров",
+ "Effects": "Фильтры",
+ "Effects browser": "Подборка фильтров",
+ "Email:": "Email:",
+ "Emboss": "Тиснение",
+ "Empty selection": "Пустой выбор",
+ "Empty selection or type not image.": "Пустой выбор или введите не изображение.",
+ "Enable autoresize:": "Автоматически увеличивать холст:",
+ "End": "Конец",
+ "English": "English",
+ "English (UK)": "английский (Великобритания)",
+ "Enrich": "Насытить",
+ "Enter": "Войти",
+ "Erase Tool": "Ластик",
+ "Erase on rotate object is disabled. Please rasterize first.": "Стирание при повороте объекта отключено. Пожалуйста, сначала растрируйте.",
+ "Error": "Ошибка",
+ "Error connecting to service.": "Ошибка подключения к сервису.",
+ "Error loading the list of fonts from Google.": "Ошибка загрузки списка шрифтов из Google.",
+ "Error registering service worker": "Ошибка регистрации сервис-воркера",
+ "Error: can not find filter:": "Ошибка: не удалось найти фильтр:",
+ "Error: can not find layer with id:": "Ошибка: не удается найти слой с идентификатором:",
+ "Error: missing details event target": "Ошибка: отсутствует цель события",
+ "Error: unknown layer type:": "Ошибка: неизвестный тип слоя:",
+ "Error: unsupported attribute type:": "Ошибка: неподдерживаемый тип атрибута:",
+ "Esc": "Esc",
+ "Escape": "ESC",
+ "Español": "Español",
+ "Expand edges": "Развернуть края",
+ "Exponent:": "Экспонент:",
+ "Export": "Экспорт",
+ "External": "Внешние инструменты",
+ "Factor:": "Фактор:",
+ "File": "Файл",
+ "File name:": "Имя файла:",
+ "File size:": "Размер файла:",
+ "Fill": "Заливка",
+ "Fill Tool": "Инструмент Заливки",
+ "Fit": "Вписать",
+ "Fit Window": "Вписать в окно",
+ "Fit window": "Вписать в окно",
+ "Flatten Image": "Свести изображение",
+ "Flip": "Отразить",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpentine",
+ "Font": "Шрифт",
+ "Français": "Français",
+ "Full HD, 1080p": "Full HD, 1080p",
+ "Full Screen": "Полноэкранный",
+ "Full layers data": "Данные полных слоев",
+ "Gap:": "Зазор:",
+ "Gaussian Blur": "Гауссовское Размытие",
+ "Gif delay:": "Задержка Gif:",
+ "Gingham": "Зонтик",
+ "GitHub:": "GitHub:",
+ "Gradient Radius:": "Радиус градиента:",
+ "Grains": "Зерна",
+ "Graphics Interchange Format": "Формат обмена графикой",
+ "Gray": "Серый",
+ "Grayscale": "Оттенки серого",
+ "Greek": "Греческий",
+ "Green": "Зеленый",
+ "Green channel:": "Зеленый канал:",
+ "Greyscale:": "Оттенки серого:",
+ "Grid": "Сетка",
+ "Grid on\/off": "Сетка вкл\/выкл",
+ "Guides": "Гайдлайны",
+ "Guides enabled.": "Гайдлайны включены",
+ "H Radius:": "H Радиус:",
+ "H. Align:": "H. Выравнивание:",
+ "Heatmap": "Тепловая карта",
+ "Height (%):": "Высота (%):",
+ "Height:": "Высота:",
+ "Help": "Помощь",
+ "Helvetica": "Helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Hex",
+ "Hide": "Скрыть",
+ "Histogram": "Гистограмма",
+ "Histogram:": "Гистограмма:",
+ "Home": "Главная",
+ "Horizontal": "Горизонтально",
+ "Horizontal Alignment": "Горизонтальное выравнивание",
+ "Horizontal blur:": "Горизонтальное размытие:",
+ "Horizontal:": "Горизонтальный:",
+ "Hue": "Оттенок",
+ "Hue Rotate": "Вращение оттенка",
+ "Hue:": "Оттенок:",
+ "Image": "Изображение",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Данные изображения с несколькими слоями. Может быть открыт с помощью miniPaint -",
+ "Impact": "Влиять",
+ "In proportion:": "Сохранять пропорции:",
+ "Increase": "Увеличить",
+ "Information": "Информация",
+ "Inkwell": "Inkwell",
+ "Insert": "Вставить",
+ "Insert guides": "Добавить гайд",
+ "Insert new layer": "Новый слой",
+ "Instagram Filters": "Фильтры Instagram",
+ "Invalid Hex Code": "Неверный HEX код",
+ "Italiano": "Italiano",
+ "JPG\/JPEG Format": "JPG\/JPEG Формат",
+ "Kerning:": "Интервал:",
+ "Key-Points": "Ключевые точки",
+ "KeyU": "КлючU",
+ "Keyboard Shortcuts": "Горячие клавиши",
+ "Keyword:": "Ключевое слово:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Альбомная",
+ "Language": "Язык",
+ "Last modified": "Последнее изменение",
+ "Layer": "Слой",
+ "Layer details": "Активный слой",
+ "Layer is empty.": "Слой пуст.",
+ "Layer is not compatible with resize": "Слой несовместим с изменением размера",
+ "Layer is vector, convert it to raster to apply this tool.": "Слой является векторным, преобразуйте его в растровый, чтобы применить этот инструмент.",
+ "Layers": "Слои",
+ "Layers:": "Слои:",
+ "Layout:": "Ориентация:",
+ "Left": "Слева",
+ "Left to Right": "Слева направо",
+ "Level:": "Уровень:",
+ "Levels:": "Уровни:",
+ "Lietuvių": "Lietuvių",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Освещенность:",
+ "Luminosity": "Освещенность",
+ "Magic Eraser Tool": "Волшебный ластик",
+ "Merge Down": "Соединить вниз",
+ "Merge Layers": "Соединить слои",
+ "Merged": "Объединенное",
+ "Metrics": "Метрики",
+ "Middle": "Средний",
+ "Missing at least 1 size parameter.": "Отсутствует хотя бы 1 параметр размера.",
+ "Missing permissions to write to Clipboard.cc": "Отсутствуют разрешения на запись в Clipboard.cc",
+ "Mode:": "Режим:",
+ "Module function not found.": "Функция модуля не найдена.",
+ "Modules class not found:": "Класс модулей не найден:",
+ "Monospace": "Моноширинный",
+ "Mosaic": "Мозаика",
+ "Mouse:": "Мышь:",
+ "Move": "Переместить",
+ "Move Layer": "Переместить слой",
+ "Move layer down": "Опустить слой ниже",
+ "Move layer up": "Поднять слой выше",
+ "Name:": "Имя:",
+ "Negative": "Негатив",
+ "New": "Новый",
+ "New Bezier Layer": "Новый слой Безье",
+ "New Brush Layer": "Новый слой Кисти",
+ "New Ellipse Layer": "Новый слой Эллипса",
+ "New File": "Новый файл",
+ "New Gradient Layer": "Новый слой Градиента",
+ "New Layer": "Новый слой",
+ "New Line Layer": "Новый слой Линии",
+ "New Pencil Layer": "Новый слой Карандаша",
+ "New Polygon Layer": "Новый полигональный слой",
+ "New Rectangle Layer": "Новый слой Прямоугольника",
+ "New Text Layer": "Новый Текстовый слой",
+ "New file": "Новый файл",
+ "New from Selection": "Новое из выделения",
+ "New layer": "Новый слой",
+ "Next": "Следующий",
+ "Night Vision": "Ночное видение",
+ "None": "Ничего",
+ "Nothing is selected.": "Ничего не выбрано.",
+ "Offset X:": "Смещение X:",
+ "Offset Y:": "Смещение Y:",
+ "Oil": "Масло",
+ "Ok": "ОК",
+ "Online image editor.": "Онлайн редактор изображений.",
+ "Opacity": "Непрозрачность",
+ "Opacity:": "Прозрачность:",
+ "Open": "Открыть",
+ "Open Data URL": "Открыть URL-адрес",
+ "Open Directory": "Открыть каталог",
+ "Open File": "Открыть файл",
+ "Open File Data URL": "URL-адрес файла",
+ "Open File URL": "Открыть URL-адрес",
+ "Open File Webcam": "Изображение с веб-камеры",
+ "Open Image": "Открыть файл",
+ "Open JSON File": "Открыть Файл JSON",
+ "Open Test Template": "Шаблон открытого теста",
+ "Open URL": "Открыть URL",
+ "Open data URL": "Открыть URL-адрес",
+ "Open from Webcam": "Изображение с веб-камеры",
+ "Original Size": "Оригинальный размер",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Конвертировать изображение в SVG",
+ "PageDown": "Листать вниз",
+ "PageUp": "Листать вверх",
+ "Palette": "Палитра",
+ "Parameter #1:": "Параметр #1:",
+ "Parameter #2:": "Параметр #2:",
+ "Paste": "Вставить",
+ "Pencil": "Карандаш",
+ "Percentage:": "Процент:",
+ "Pixels:": "Пиксели:",
+ "Placeholder comment for color channels": "Комментарий-заполнитель для цветовых каналов",
+ "Placeholder comment for color picker": "Комментарий-заполнитель для палитры цветов",
+ "Placeholder comment for color swatches": "Комментарий-заполнитель для образцов цвета",
+ "Portable Network Graphics": "Портативная Сетевая Графика",
+ "Portrait": "Портретная",
+ "Português": "Português",
+ "Position:": "Позиция:",
+ "Power:": "Сила:",
+ "Preview": "Навигация",
+ "Previous": "Предыдущий",
+ "Previous layer must be image, convert it to raster to apply this tool.": "Предыдущий слой должен быть изображением, растрируйте его, чтобы применить этот инструмент.",
+ "Print": "Распечатать",
+ "Quality:": "Качество:",
+ "Quick Load": "Быстрое открытие",
+ "Quick Save": "Быстрое сохранение",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Удалить Фон Изображения",
+ "Radial": "Радиальный",
+ "Radial gradient": "Радиальный градиент",
+ "Radius:": "Радиус:",
+ "Range:": "Диапазон:",
+ "Red": "Красный",
+ "Red channel:": "Красный канал:",
+ "Redo": "Повторить",
+ "Remove all": "Удалить все",
+ "Rename": "Переименовать",
+ "Rename Layer": "Переименовать слой",
+ "Rendered with errors.": "Отрисовано с ошибками.",
+ "Rendering...": "Отрисовка ...",
+ "Replace Color": "Заменить цвет",
+ "Replace color": "Заменить цвет",
+ "Replacement:": "Замена:",
+ "Report Issues": "Сообщить о проблемах",
+ "Reset": "Сброс",
+ "Resize": "Изменить размер",
+ "Resize Boundary": "Изменить размер границы",
+ "Resize Layer": "Изменить размер слоя",
+ "Resize Layers": "Изменить размер слоев",
+ "Resize Text Layer": "Изменить размер текстового слоя",
+ "Resized as background": "Изменено в качестве фона",
+ "Resized:": "Изменён размер:",
+ "Resolution:": "Разрешение:",
+ "Restore Alpha": "Восстановить прозрачность",
+ "Right": "Вправо",
+ "Right angle:": "Прямой угол:",
+ "Right to Left": "Справа налево",
+ "Rotate": "Повернуть",
+ "Rotate Layer": "Повернуть слой",
+ "Rotate is not supported on this type of object. Convert to raster?": "Поворот на этом типе объекта не поддерживается. Растрировать?",
+ "Rotate left": "Повернуть влево",
+ "Rotate:": "Поворот:",
+ "Ruler": "Линейки",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - Сжатие и сравнение изображений",
+ "Saturate": "Насытить",
+ "Saturation": "Насыщенность",
+ "Saturation:": "Насыщенность:",
+ "Save As": "Сохранить как",
+ "Save As Data URL": "Сохранить как base64",
+ "Save as": "Сохранить как",
+ "Save as type:": "Сохранить как тип:",
+ "Save layers:": "Сохранить слои:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "В Hermite с использованием Lanczos масштабирование не поддерживается.",
+ "Scroll down": "Прокрутить вниз",
+ "Scroll up": "Прокрутка вверх",
+ "Search": "Поиск",
+ "Search Images": "Поиск изображений",
+ "Search for Font": "Поиск шрифта",
+ "Search:": "Поиск:",
+ "Select All": "Выбрать все",
+ "Select Text Layer": "Выбрать текстовый слой",
+ "Select object tool": "Выбор объекта",
+ "Selected": "Выбранный",
+ "Selection Tool": "Инструмент выделения",
+ "Sensitivity:": "Чувствительность:",
+ "Separated": "Отдельно",
+ "Separated (original types)": "Отдельно (оригинальный формат)",
+ "Sepia": "Сепия",
+ "Set Image Size": "Установить размер изображения",
+ "Settings": "Настройки",
+ "Shadow": "Тень",
+ "Shapes": "Фигуры",
+ "Shapes (H)": "Фигуры (H)",
+ "Sharpen": "Резкость",
+ "Sharpen Tool": "Инструмент резкости",
+ "Sharpen:": "Повысить четкость:",
+ "Shift + S": "Шифт + С",
+ "Shortcut Key:": "Быстрая клавиша:",
+ "Show": "Показывать",
+ "Show \/ Hide": "Показать \/ Спрятать",
+ "Show file size:": "Считать размер:",
+ "Simple": "Простой",
+ "Size is too big, max": "Размер слишком большой, максимум",
+ "Size:": "Размер:",
+ "Skip - layer must be image.": "Пропуск - слой должен быть изображением.",
+ "Solarize": "Высветлить",
+ "Sorry, cold not load getUserMedia() data:": "К сожалению, не удалось загрузить данные getUserMedia():",
+ "Sorry, image could not be loaded.": "К сожалению, изображение не может быть загружено.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "К сожалению, изображение не может быть загружено. Попробуйте скопировать изображение и вставьте его.",
+ "Sorry, image is too big, max 5 MB.": "К сожалению, изображение слишком большое, максимум 5 МБ.",
+ "Source coordinates saved.": "Исходные координаты сохранены.",
+ "Source is empty, right click on image or use long press to save source position.": "Источник пуст, щелкните изображение правой кнопкой мыши или нажмите и удерживайте, чтобы сохранить исходное положение.",
+ "Sprites": "Спрайты",
+ "Square": "Квадрат",
+ "Stream:": "Поток:",
+ "Strength:": "Прочность:",
+ "Strict": "Строго",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - Сжатие PNG и JPEG",
+ "Tab": "Вкладка",
+ "Tag Image File Format": "Формат файла изображения тега",
+ "Tahoma": "Tahoma",
+ "Target:": "Цель:",
+ "The quick brown fox jumps over the lazy dog.": "Быстрая коричневая лиса прыгает через ленивую собаку.",
+ "There": "Там",
+ "There are no layers behind.": "Позади нет слоев.",
+ "There is only 1 layer.": "Есть только 1 слой.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Слой должен содержать изображение, растрируйте его, чтобы применить этот инструмент.",
+ "Tilt Shift": "Tilt Shift",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Toaster",
+ "Toggle": " ",
+ "Toggle Color Channels": "Цветовые каналы",
+ "Toggle Color Picker": "Цветовая палитра",
+ "Toggle Menu": "Меню",
+ "Toggle Swatches": "Коллекция цветов",
+ "Tools": "Инструменты",
+ "Top": "Вверх",
+ "Top to Bottom": "Сверху вниз",
+ "Total pixels:": "Всего пикселей:",
+ "Translate": "Сдвинуть",
+ "Translate Layer": "Сдвинуть слой",
+ "Translate error, can not find dictionary:": "Ошибка перевода, не удалось найти словарь:",
+ "Transparent:": "Прозрачность:",
+ "Trim": "Обрезать",
+ "Trim Layers": "Обрезать слои",
+ "Trim borders:": "Обрезать границы:",
+ "Trim layer:": "Обрезной слой:",
+ "Trim white color?": "Обрезать белый цвет?",
+ "Type:": "Тип:",
+ "Türkçe": "Türkçe",
+ "Undo": "Отменить",
+ "Unique colors:": "Уникальные цвета:",
+ "Up": "Вверх",
+ "Update": "Обновить",
+ "Update Brush Layer": "Обновить слой Кисти",
+ "Update Pencil Layer": "Обновить слой карандаша",
+ "Update guides": "Обновить руководства",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Используйте комбинацию клавиш Ctrl + V для вставки из буфера обмена.",
+ "V Radius:": "В радиус:",
+ "V. Align:": "В. Выровнять:",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "Версия:",
+ "Vertical": "Вертикально",
+ "Vertical Alignment": "Вертикальное Выравнивание",
+ "Vertical blur:": "Вертикальное размытие:",
+ "Vertical:": "Вертикальное:",
+ "Vibrance": "Вибрация",
+ "View": "Вид",
+ "Vignette": "Виньетка",
+ "ViliusL": "ViliusL",
+ "Vintage": "Винтаж",
+ "Webcam": "Веб-камера",
+ "Webcam #": "Веб-камера #",
+ "Website:": "Веб-сайт:",
+ "Weppy File Format": "Формат файла Weppy",
+ "Width (%):": "Ширина (%):",
+ "Width:": "Ширина:",
+ "Windows Bitmap": "Растровое изображение Windows",
+ "Word": "Слово",
+ "Word + Letter": "Слово + Буква",
+ "Wrap At:": "Обернуть в:",
+ "Wrap:": "Обвернуть:",
+ "Wrong dimensions": "Неправильные размеры",
+ "Wrong file type, must be image or json.": "Неверный тип файла, тип файла должен быть изображением или json.",
+ "X end:": "X конец:",
+ "X position:": "X позиция:",
+ "X start:": "X начало:",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Y конец:",
+ "Y position:": "Y позиция:",
+ "Y start:": "Y начало:",
+ "You can also drag and drop items into browser.": "Вы также можете перетаскивать элементы в браузер.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Ваш браузер не поддерживает холст или JavaScript не включен.",
+ "Your browser does not support this format.": "Ваш браузер не поддерживает этот формат.",
+ "Your search did not match any images.": "Ваш поиск не соответствовал изображениям.",
+ "Zoom": "Приблизить",
+ "Zoom Blur": "Размытие Приближения",
+ "Zoom In": "Приблизить",
+ "Zoom Out": "Отдалить",
+ "Zoom blur": "Масштабирование",
+ "Zoom in": "Приблизить",
+ "Zoom out": "Отдалить",
+ "Zoom:": "Приблизить:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/tr.json b/paintplus/frontend/src/js/languages/tr.json
new file mode 100644
index 0000000..9231da5
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/tr.json
@@ -0,0 +1,513 @@
+{
+ "A problem occurred while removing undo history. It": "Geri alma geçmişini kaldırırken bir sorun oluştu. O",
+ "About": "hakkında",
+ "Active": "Aktif",
+ "Aden": "Aden",
+ "Advanced": "ileri",
+ "All": "Herşey",
+ "Alpha": "Alfa",
+ "Alpha:": "Alfa:",
+ "Anonymous": "Anonim",
+ "Anti aliasing": "Örtüşme önleme",
+ "Application markup may have changed,": "Uygulama işaretlemesi değişmiş olabilir,",
+ "Arial": "Arial",
+ "Arrow": "Ok",
+ "ArrowDown": "Aşağı ok",
+ "ArrowLeft": "ArrowLeft",
+ "ArrowRight": "ArrowRight",
+ "ArrowUp": "Yukarı ok",
+ "Author:": "Yazar:",
+ "Auto Adjust Colors": "Renkleri otomatik ayarla",
+ "Auto Kerning": "Otomatik Karakter Aralığı",
+ "Average:": "Ortalama:",
+ "Backspace": "Geri tuşu",
+ "Base": "baz",
+ "Basic": "Temel",
+ "Black and White": "Siyah ve beyaz",
+ "Blue": "Mavi",
+ "Blue channel:": "Mavi kanal:",
+ "Blueprint": "Taslak",
+ "Blur Radius:": "Bulanıklaştırma Yarıçapı:",
+ "Blur Tool": "Bulanıklık aracı",
+ "Blur power:": "Blur gücü:",
+ "Borders": "Sınırlar",
+ "Bottom": "Alt",
+ "Bottom to Top": "Alttan Üste",
+ "Bounds:": "Sınırlar:",
+ "Box": "Kutu",
+ "Box Blur": "Kutu bulanıklığı",
+ "Box blur": "Kutu bulanıklığı",
+ "Brightness": "Parlaklık",
+ "Brightness:": "Parlaklık:",
+ "Bulge\/Pinch Tool": "Bulge \/ Kıstırma Aracı",
+ "Burn": "Yanmak",
+ "Can not animate 1 layer.": "1 katmana canlandırma yapılamıyor.",
+ "Can not find previous layer.": "Önceki katmanı bulamıyorum.",
+ "Can not use this tool on current layer: image already takes all area.": "Bu araç geçerli katmanda kullanılamıyor: görüntü zaten tüm alanı kaplıyor.",
+ "Cancel": "İptal etmek",
+ "Canvas Size": "Tuval Boyutu",
+ "Center": "merkez",
+ "Center x:": "Merkez x:",
+ "Center y:": "Merkez y:",
+ "Center:": "merkez:",
+ "Change Composition": "Kompozisyonu Değiştir",
+ "Change Layer Details": "Katman Ayrıntılarını Değiştir",
+ "Change Opacity": "Opaklığı Değiştir",
+ "Channel:": "Kanal:",
+ "Circle": "Daire",
+ "Clarendon": "Clarendon",
+ "Clear": "Açık",
+ "Clear Selection": "Seçimi Temizle",
+ "Clone Tool": "Klonlama Aracı",
+ "Clone count:": "Klon sayısı:",
+ "Clone tool disabled for resized image. Please rasterize first.": "Yeniden boyutlandırılan resim için klonlama aracı devre dışı bırakıldı. Lütfen önce rasterleştirin.",
+ "Cloned edges": "Klonlanmış kenarlar",
+ "Close": "Kapalı",
+ "Color #": "Renk #",
+ "Color Corrections": "Renk düzeltmeleri",
+ "Color Palette": "Renk paleti",
+ "Color Zoom": "Renkli Zoom",
+ "Color alpha value can not be zero.": "Renkli alfa değeri sıfır olamaz.",
+ "Color to Alpha": "Alfanın renkleri",
+ "Color zoom": "Renkli yakınlaştırma",
+ "Color:": "Renk:",
+ "Colors": "Renkler",
+ "Colors:": "Renkler:",
+ "Common Filters": "Ortak Filtreler",
+ "Composition": "bileştirme, kompozisyon",
+ "Composition:": "Bileştirme, kompozisyon:",
+ "Content Fill": "İçerik doldurma",
+ "Contrast": "Kontrast",
+ "Contrast:": "Kontrast:",
+ "Convert layer to raster": "Katmanı raster'a dönüştür",
+ "Convert to Raster": "Rastera dönüştürün",
+ "Copy Selection": "Seçimi kopyala",
+ "Copy to Clipboard": "Panoya kopyala",
+ "Courier": "Kurye",
+ "Crop Tool": "Kırpma aracı",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "Döndürülmüş katmanda kırpma desteklenmez. Devam etmek için raster'e dönüştürün.",
+ "Ctrl + C": "Ctrl + C",
+ "Ctrl+A": "Ctrl + A",
+ "Ctrl+C": "Ctrl + C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl + V",
+ "Ctrl+Y": "Ctrl + Y",
+ "Ctrl+Z": "Ctrl + Z",
+ "Current": "şimdiki",
+ "Current Color Preview": "Mevcut Renk Önizlemesi",
+ "Custom": "görenek",
+ "Data URL": "Veri URL'si",
+ "Data URL:": "Veri URL'si:",
+ "Decrease": "Azaltmak",
+ "Decrease Color Depth": "Renk derinliğini azalt",
+ "Degree:": "Derece:",
+ "Del": "Del",
+ "Delete": "silmek",
+ "Delete Selection": "Seçimi sil",
+ "Denoise": "Denoise",
+ "Desaturate Tool": "Doygunluğu Azaltma Aracı",
+ "Description:": "Açıklama:",
+ "Deutsch": "Deutsch",
+ "Differences": "farklılıklar",
+ "Differences Down": "Farklar Aşağı",
+ "Direction:": "Yön:",
+ "Dither": "titreme",
+ "Dithering:": "taklidi:",
+ "Dominant color:": "Hakim renk:",
+ "Dot Screen": "Nokta Ekranı",
+ "Down": "Aşağı",
+ "Duplicate": "Çift",
+ "Duplicate Layer": "Yinelenen katman",
+ "Duplicate layer": "Yinelenen katman",
+ "Dynamic": "Dinamik",
+ "Edge": "kenar",
+ "Edit": "Düzenle",
+ "Edit text...": "Metni düzenle...",
+ "Effect browser": "Efekt tarayıcısı",
+ "Effects": "Etkileri",
+ "Effects browser": "Efekt tarayıcısı",
+ "Email:": "E-posta:",
+ "Emboss": "kabartma yapmak",
+ "Empty selection": "Boş seçim",
+ "Empty selection or type not image.": "Boş seçim veya resim değil yazın.",
+ "Enable autoresize:": "Otomatik yeniden boyutlandırmayı etkinleştir:",
+ "End": "Son",
+ "English": "ingilizce",
+ "English (UK)": "İngilizce (İngiltere)",
+ "Enrich": "Zenginleştirmek",
+ "Enter": "Giriş",
+ "Erase Tool": "Silme Aracı",
+ "Erase on rotate object is disabled. Please rasterize first.": "Nesneyi döndürürken silme devre dışı bırakılır. Lütfen önce rasterleştirin.",
+ "Error": "Hata",
+ "Error connecting to service.": "Hizmete bağlanırken hata oluştu.",
+ "Error loading the list of fonts from Google.": "Google'dan yazı tipi listesi yüklenirken hata oluştu.",
+ "Error registering service worker": "Hizmet çalışanı kaydedilirken hata oluştu",
+ "Error: can not find filter:": "Hata: filtre bulunamıyor:",
+ "Error: can not find layer with id:": "Hata: kimliğine sahip katman bulunamıyor:",
+ "Error: missing details event target": "Hata: eksik olan ayrıntılar etkinlik hedefi",
+ "Error: unknown layer type:": "Hata: bilinmeyen katman türü:",
+ "Error: unsupported attribute type:": "Hata: desteklenmeyen özellik türü:",
+ "Esc": "ESC",
+ "Escape": "Kaçış",
+ "Español": "Español",
+ "Expand edges": "Kenarları genişlet",
+ "Exponent:": "Üs:",
+ "Export": "İhracat",
+ "External": "Harici",
+ "Factor:": "Faktör:",
+ "File": "Dosya",
+ "File name:": "Dosya adı:",
+ "File size:": "Dosya boyutu:",
+ "Fill": "doldurmak",
+ "Fill Tool": "Doldurma Aracı",
+ "Fit": "Fit",
+ "Fit Window": "Pencereye sığdır",
+ "Fit window": "Pencereyi sığdır",
+ "Flatten Image": "Resmi Düzleştir",
+ "Flip": "fiske",
+ "FloydSteinberg-serpentine": "FloydSteinberg-serpantin",
+ "Font": "Yazı tipi",
+ "Français": "Français",
+ "Full HD, 1080p": "Tam HD, 1080p",
+ "Full Screen": "Tam ekran",
+ "Full layers data": "Tam katman verileri",
+ "Gap:": "boşluk:",
+ "Gaussian Blur": "Gauss Bulanıklığı",
+ "Gif delay:": "Gif gecikmesi:",
+ "Gingham": "Şemsiye",
+ "GitHub:": "GitHub:",
+ "Gradient Radius:": "Gradyan Yarıçapı:",
+ "Grains": "Taneler",
+ "Graphics Interchange Format": "Grafik Değişim Biçimi",
+ "Gray": "Gri",
+ "Grayscale": "Gri tonlama",
+ "Greek": "Yunan",
+ "Green": "Yeşil",
+ "Green channel:": "Yeşil kanal:",
+ "Greyscale:": "Gri tonlama:",
+ "Grid": "Kafes",
+ "Grid on\/off": "Izgara açık \/ kapalı",
+ "Guides": "Kılavuzlar",
+ "Guides enabled.": "Kılavuzlar etkinleştirildi.",
+ "H Radius:": "H Radius:",
+ "H. Align:": "H. Hizala:",
+ "Heatmap": "Sıcaklık haritası",
+ "Height (%):": "Yükseklik (%):",
+ "Height:": "Yükseklik:",
+ "Help": "yardım et",
+ "Helvetica": "Helvetica",
+ "Hermite": "Hermite",
+ "Hex": "Hex",
+ "Hide": "Saklamak",
+ "Histogram": "Histogram",
+ "Histogram:": "Histogram:",
+ "Home": "Ev",
+ "Horizontal": "Yatay",
+ "Horizontal Alignment": "Yatay hizalama",
+ "Horizontal blur:": "Yatay bulanıklık:",
+ "Horizontal:": "Yatay:",
+ "Hue": "Ton",
+ "Hue Rotate": "Ton Döndür",
+ "Hue:": "Ton:",
+ "Image": "görüntü",
+ "Image data with multi-layers. Can be opened using miniPaint -": "Çok katmanlı görüntü verileri. MiniPaint ile açılabilir -",
+ "Impact": "darbe",
+ "In proportion:": "Orantılı olarak:",
+ "Increase": "Artırmak",
+ "Information": "Bilgi",
+ "Inkwell": "Inkwell",
+ "Insert": "Sokmak",
+ "Insert guides": "Kılavuzları ekle",
+ "Insert new layer": "Yeni katman ekle",
+ "Instagram Filters": "Instagram Filtreleri",
+ "Invalid Hex Code": "Geçersiz Hex Kodu",
+ "Italiano": "Italiano",
+ "JPG\/JPEG Format": "JPG \/ JPEG Biçimi",
+ "Kerning:": "Karakter aralığı:",
+ "Key-Points": "Anahtar noktaları",
+ "KeyU": "KeyU",
+ "Keyboard Shortcuts": "Klavye kısayolları",
+ "Keyword:": "Anahtar kelime:",
+ "Lanczos": "Lanczos",
+ "Landscape": "Manzara",
+ "Language": "Dil",
+ "Last modified": "Son düzenleme",
+ "Layer": "Katman",
+ "Layer details": "Katman ayrıntıları",
+ "Layer is empty.": "Katman boş.",
+ "Layer is not compatible with resize": "Katman yeniden boyutlandırmayla uyumlu değil",
+ "Layer is vector, convert it to raster to apply this tool.": "Katman vektördür, bu aracı uygulamak için onu raster'e dönüştürün.",
+ "Layers": "Katmanlar",
+ "Layers:": "Katmanlar:",
+ "Layout:": "Düzen:",
+ "Left": "Ayrıldı",
+ "Left to Right": "Soldan sağa",
+ "Level:": "Seviye:",
+ "Levels:": "Seviyeleri:",
+ "Lietuvių": "Litvanya",
+ "Lo-fi": "Lo-fi",
+ "Luminance:": "Parlaklık:",
+ "Luminosity": "Parlaklık",
+ "Magic Eraser Tool": "Sihirli Silgi Aracı",
+ "Merge Down": "Aşağı Birleştir",
+ "Merge Layers": "Katmanları birleştirmek",
+ "Merged": "Birleştirilmiş",
+ "Metrics": "Metrikler",
+ "Middle": "Orta",
+ "Missing at least 1 size parameter.": "En az 1 boyut parametresi eksik.",
+ "Missing permissions to write to Clipboard.cc": "Clipboard.cc'ye yazma izinleri eksik",
+ "Mode:": "Mod:",
+ "Module function not found.": "Modül işlevi bulunamadı.",
+ "Modules class not found:": "Modüller sınıf bulunamadı:",
+ "Monospace": "Tek aralıklı",
+ "Mosaic": "Mozaik",
+ "Mouse:": "Fare:",
+ "Move": "Hareket",
+ "Move Layer": "Katmanı Taşı",
+ "Move layer down": "Katmanı aşağı taşı",
+ "Move layer up": "Katmanı yukarı taşı",
+ "Name:": "Adı:",
+ "Negative": "Negatif",
+ "New": "Yeni",
+ "New Bezier Layer": "Yeni Bezier Katmanı",
+ "New Brush Layer": "Yeni Fırça Katmanı",
+ "New Ellipse Layer": "Yeni Elips Katmanı",
+ "New File": "Yeni dosya",
+ "New Gradient Layer": "Yeni Gradyan Katmanı",
+ "New Layer": "Yeni tabaka",
+ "New Line Layer": "Yeni Çizgi Katmanı",
+ "New Pencil Layer": "Yeni Kalem Katmanı",
+ "New Polygon Layer": "Yeni Çokgen Katmanı",
+ "New Rectangle Layer": "Yeni Dikdörtgen Katman",
+ "New Text Layer": "Yeni Metin Katmanı",
+ "New file": "Yeni dosya",
+ "New from Selection": "Seçimden yeni",
+ "New layer": "Yeni katman",
+ "Next": "Sonraki",
+ "Night Vision": "Gece görüşü",
+ "None": "Yok",
+ "Nothing is selected.": "Hiçbir şey seçilmedi.",
+ "Offset X:": "Ofset X:",
+ "Offset Y:": "Ofset Y:",
+ "Oil": "Sıvı yağ",
+ "Ok": "Tamam",
+ "Online image editor.": "Çevrimiçi görüntü düzenleyici.",
+ "Opacity": "opaklık",
+ "Opacity:": "Saydamlık:",
+ "Open": "Açık",
+ "Open Data URL": "Açık Veri URL'si",
+ "Open Directory": "Açık sözlük",
+ "Open File": "Açık dosya",
+ "Open File Data URL": "Dosya Verileri URL'sini Aç",
+ "Open File URL": "Dosya URL'sini Aç",
+ "Open File Webcam": "Dosya Web Kamerasını Aç",
+ "Open Image": "Resmi Aç",
+ "Open JSON File": "JSON Dosyasını Aç",
+ "Open Test Template": "Test Şablonunu Aç",
+ "Open URL": "Link aç",
+ "Open data URL": "Açık veri URL'si",
+ "Open from Webcam": "Web Kamerasından Aç",
+ "Original Size": "Orijinal boyut",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - Resmi SVG'ye Dönüştür",
+ "PageDown": "PageDown",
+ "PageUp": "Sayfa yukarı",
+ "Palette": "palet",
+ "Parameter #1:": "Parametre # 1:",
+ "Parameter #2:": "Parametre # 2:",
+ "Paste": "Yapıştırmak",
+ "Pencil": "Kalem",
+ "Percentage:": "Yüzde:",
+ "Pixels:": "Piksel:",
+ "Placeholder comment for color channels": "Renk kanalları için yer tutucu yorumu",
+ "Placeholder comment for color picker": "Renk seçici için yer tutucu yorumu",
+ "Placeholder comment for color swatches": "Renk örnekleri için yer tutucu yorumu",
+ "Portable Network Graphics": "taşınabilir Ağ Grafikleri",
+ "Portrait": "Vesika",
+ "Português": "Português",
+ "Position:": "Konum:",
+ "Power:": "Güç:",
+ "Preview": "Ön izleme",
+ "Previous": "Önceki",
+ "Previous layer must be image, convert it to raster to apply this tool.": "Önceki katman resim olmalıdır, bu aracı uygulamak için raster haline getirin.",
+ "Print": "baskı",
+ "Quality:": "Kalite:",
+ "Quick Load": "Hızlı yükleme",
+ "Quick Save": "Hızlı kaydet",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - Resim Arka Planını Kaldır",
+ "Radial": "Radyal",
+ "Radial gradient": "Radyal degrade",
+ "Radius:": "radius:",
+ "Range:": "aralık:",
+ "Red": "Kırmızı",
+ "Red channel:": "Kırmızı kanal:",
+ "Redo": "Yeniden yap",
+ "Remove all": "Hepsini kaldır",
+ "Rename": "Adını değiştirmek",
+ "Rename Layer": "Katmanı Yeniden Adlandır",
+ "Rendered with errors.": "Hatalarla oluşturuldu.",
+ "Rendering...": "Oluşturuluyor ...",
+ "Replace Color": "Renk Değiştir",
+ "Replace color": "Rengi değiştir",
+ "Replacement:": "Değiştirme:",
+ "Report Issues": "Sorunları bildir",
+ "Reset": "Reset",
+ "Resize": "yeniden boyutlandırma",
+ "Resize Boundary": "Sınırı Yeniden Boyutlandır",
+ "Resize Layer": "Katmanı Yeniden Boyutlandır",
+ "Resize Layers": "Katmanları Yeniden Boyutlandır",
+ "Resize Text Layer": "Metin Katmanını Yeniden Boyutlandır",
+ "Resized as background": "Arka plan olarak yeniden boyutlandırıldı",
+ "Resized:": "Yeniden boyutlandırıldı:",
+ "Resolution:": "Çözüm:",
+ "Restore Alpha": "Alfa geri yükle",
+ "Right": "Sağ",
+ "Right angle:": "Doğru açı:",
+ "Right to Left": "Sağdan sola",
+ "Rotate": "Döndürme",
+ "Rotate Layer": "Katmanı Döndür",
+ "Rotate is not supported on this type of object. Convert to raster?": "Döndürme, bu tür nesne üzerinde desteklenmiyor. Rastere dönüştürün?",
+ "Rotate left": "Sola dön",
+ "Rotate:": "Dönüşümlü:",
+ "Ruler": "Cetvel",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - Resimleri Sıkıştır ve Karşılaştır",
+ "Saturate": "bombalamak",
+ "Saturation": "Doyma",
+ "Saturation:": "Doyma:",
+ "Save As": "Farklı kaydet",
+ "Save As Data URL": "Veri URL'si olarak kaydet",
+ "Save as": "Farklı kaydet",
+ "Save as type:": "Türünü kaydet:",
+ "Save layers:": "Katmanları kaydet:",
+ "Scaling up is not supported in Hermite, using Lanczos.": "Lanczos kullanılarak Hermite'de ölçek büyütme desteklenmez.",
+ "Scroll down": "Aşağı kaydır",
+ "Scroll up": "Yukarı kaydırmak",
+ "Search": "Arama",
+ "Search Images": "Resimleri ara",
+ "Search for Font": "Yazı Tipi Ara",
+ "Search:": "Aramak:",
+ "Select All": "Hepsini seç",
+ "Select Text Layer": "Metin Katmanı Seçin",
+ "Select object tool": "Nesne aracını seçin",
+ "Selected": "seçilmiş",
+ "Selection Tool": "Seçim aracı",
+ "Sensitivity:": "Duyarlılık:",
+ "Separated": "Ayrılmış",
+ "Separated (original types)": "Ayrılmış (orijinal türler)",
+ "Sepia": "Sepya",
+ "Set Image Size": "Görüntü Boyutunu Ayarla",
+ "Settings": "Ayarlar",
+ "Shadow": "Gölge",
+ "Shapes": "Şekiller",
+ "Shapes (H)": "Şekiller (H)",
+ "Sharpen": "keskinleştirmek",
+ "Sharpen Tool": "Aleti keskinleştir",
+ "Sharpen:": "keskinleştir:",
+ "Shift + S": "Üst Karakter + S",
+ "Shortcut Key:": "Kısayol tuşu:",
+ "Show": "Göstermek",
+ "Show \/ Hide": "Göster \/ gizle",
+ "Show file size:": "Dosya boyutunu göster:",
+ "Simple": "Basit",
+ "Size is too big, max": "Boyut çok büyük, maks.",
+ "Size:": "Boyut:",
+ "Skip - layer must be image.": "Atlama - katman resim olmalıdır.",
+ "Solarize": "güneşte bırakmak",
+ "Sorry, cold not load getUserMedia() data:": "Maalesef getUserMedia () verilerini yükleme değil:",
+ "Sorry, image could not be loaded.": "Maalesef resim yüklenemedi.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Üzgünüz, resim yüklenemedi. Resmi kopyala ve yapıştırmayı deneyin.",
+ "Sorry, image is too big, max 5 MB.": "Maalesef, resim çok büyük, maksimum 5 MB.",
+ "Source coordinates saved.": "Kaynak koordinatlar kaydedildi.",
+ "Source is empty, right click on image or use long press to save source position.": "Kaynak boş, görüntüye sağ tıklayın veya kaynak konumunu kaydetmek için uzun basın.",
+ "Sprites": "Spritelar",
+ "Square": "Kare",
+ "Stream:": "Akış:",
+ "Strength:": "Sertlik:",
+ "Strict": "sıkı",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - PNG ve JPEG'i sıkıştır",
+ "Tab": "Sekme",
+ "Tag Image File Format": "Etiket Görüntüsü Dosya Formatı",
+ "Tahoma": "Tahoma",
+ "Target:": "Hedef:",
+ "The quick brown fox jumps over the lazy dog.": "Hızlı kahverengi tilki tembel köpeğin üzerinden atlıyor.",
+ "There": "Orada",
+ "There are no layers behind.": "Arkada hiçbir katman yok.",
+ "There is only 1 layer.": "Sadece bir tabaka var.",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Katman görüntü olmalı, onu uygulamak için rastgele dönüştürmelidir.",
+ "Tilt Shift": "Eğim Kaydırma",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Tost makinası",
+ "Toggle": "geçiş",
+ "Toggle Color Channels": "Renk Kanallarını Değiştir",
+ "Toggle Color Picker": "Renk Seçiciyi Değiştir",
+ "Toggle Menu": "Menüyü Değiştir",
+ "Toggle Swatches": "Renk Örneklerini Aç \/ Kapat",
+ "Tools": "Araçlar",
+ "Top": "Üst",
+ "Top to Bottom": "Yukarıdan Aşağıya",
+ "Total pixels:": "Toplam piksel:",
+ "Translate": "Çevirmek",
+ "Translate Layer": "Katmanı Çevir",
+ "Translate error, can not find dictionary:": "Çeviri hatası, sözlük bulunamadı:",
+ "Transparent:": "Şeffaf:",
+ "Trim": "düzeltmek",
+ "Trim Layers": "Katmanları Kırp",
+ "Trim borders:": "Kenarlıkları kırp:",
+ "Trim layer:": "Döşeme tabakası:",
+ "Trim white color?": "Beyaz rengini keser misin?",
+ "Type:": "Tip:",
+ "Türkçe": "Türkçe",
+ "Undo": "Geri alma",
+ "Unique colors:": "Eşsiz renkler:",
+ "Up": "yukarı",
+ "Update": "Güncelleme",
+ "Update Brush Layer": "Fırça Katmanını Güncelle",
+ "Update Pencil Layer": "Kalem Katmanını Güncelle",
+ "Update guides": "Kılavuzları güncelleyin",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "Pano'dan yapıştırmak için Ctrl + V klavye kısayolunu kullanın.",
+ "V Radius:": "V Yarıçapı:",
+ "V. Align:": "V. Hizala:",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "Versiyon:",
+ "Vertical": "Dikey",
+ "Vertical Alignment": "Dikey hizalama",
+ "Vertical blur:": "Dikey bulanıklık:",
+ "Vertical:": "Dikey:",
+ "Vibrance": "Titreşim",
+ "View": "Görüş",
+ "Vignette": "skeç",
+ "ViliusL": "ViliusL",
+ "Vintage": "bağbozumu",
+ "Webcam": "Web kamerası",
+ "Webcam #": "Web kamerası #",
+ "Website:": "Web sitesi:",
+ "Weppy File Format": "Weppy Dosya Biçimi",
+ "Width (%):": "Genişlik (%):",
+ "Width:": "Genişlik:",
+ "Windows Bitmap": "Windows Bit Eşlem",
+ "Word": "Kelime",
+ "Word + Letter": "Kelime + Harf",
+ "Wrap At:": "Şuraya Sar:",
+ "Wrap:": "Paketlemek:",
+ "Wrong dimensions": "Yanlış boyutlar",
+ "Wrong file type, must be image or json.": "Yanlış dosya türü, resim veya json olmalı.",
+ "X end:": "X sonu:",
+ "X position:": "X konumu:",
+ "X start:": "X start:",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Sonum:",
+ "Y position:": "Y pozisyonu:",
+ "Y start:": "Y başlatın:",
+ "You can also drag and drop items into browser.": "Ayrıca öğeleri tarayıcıya sürükleyip bırakabilirsiniz.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "Tarayıcınız tuvali desteklemiyor veya JavaScript etkin değil.",
+ "Your browser does not support this format.": "Tarayıcınız bu biçimi desteklemiyor.",
+ "Your search did not match any images.": "Aramanız herhangi bir resimle eşleşmedi.",
+ "Zoom": "yakınlaştırma",
+ "Zoom Blur": "Zum Bulanıklığı",
+ "Zoom In": "Yakınlaştır",
+ "Zoom Out": "Uzaklaştır",
+ "Zoom blur": "Yakınlaştırma bulanıklığı",
+ "Zoom in": "Yakınlaştır",
+ "Zoom out": "Uzaklaştır",
+ "Zoom:": "zum:"
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/uk.json b/paintplus/frontend/src/js/languages/uk.json
new file mode 100644
index 0000000..65009ec
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/uk.json
@@ -0,0 +1,507 @@
+{
+ "24-Points star": "",
+ "A problem occurred while removing undo history. It": "Sorry, a problem occurred while removing the undo history.",
+ "About": "",
+ "Active": "",
+ "Add Borders": "",
+ "Aden": "",
+ "Advanced": "",
+ "All": "",
+ "Alpha": "",
+ "Alpha:": "",
+ "Anonymous": "",
+ "Anti aliasing": "",
+ "Application markup may have changed,": "The application markup may have changed",
+ "Arial": "",
+ "Arrow": "",
+ "ArrowDown": "",
+ "ArrowLeft": "",
+ "ArrowRight": "",
+ "ArrowUp": "",
+ "Author:": "",
+ "Auto Adjust Colors": "Auto Adjust the Colours",
+ "Auto Kerning": "",
+ "Average:": "",
+ "Backspace": "",
+ "Base": "",
+ "Basic": "",
+ "Black and White": "",
+ "Blue": "",
+ "Blue channel:": "",
+ "Blueprint": "",
+ "Blur Radius:": "",
+ "Blur Tool": "",
+ "Blur power:": "",
+ "Borders": "",
+ "Bottom": "",
+ "Bottom to Top": "",
+ "Bounds:": "",
+ "Box": "",
+ "Box Blur": "",
+ "Box blur": "",
+ "Brightness": "",
+ "Brightness:": "",
+ "Bulge\/Pinch Tool": "",
+ "Burn": "",
+ "Can not animate 1 layer.": "Sorry, you can not animate just 1 layer, you need at least 2 layers.",
+ "Can not find previous layer.": "Sorry, I can not find the previous layer.",
+ "Cancel": "",
+ "Canvas Size": "",
+ "Canvas size": "",
+ "Center": "Centre",
+ "Center x:": "Centre x:",
+ "Center y:": "Centre y:",
+ "Center:": "Centre:",
+ "Change Composition": "",
+ "Change Layer Details": "",
+ "Change Opacity": "",
+ "Channel:": "",
+ "Circle": "",
+ "Clarendon": "",
+ "Clear": "",
+ "Clear Selection": "",
+ "Clone Tool": "",
+ "Clone count:": "",
+ "Clone tool disabled for resized image. Sorry.": "Sorry, the clone tool is disabled for use on a resized asset (image). Undo the resize, clone the asset (image) then resize it again.",
+ "Cloned edges": "",
+ "Color #": "Colour #",
+ "Color Corrections": "Colour Corrections",
+ "Color Palette": "Colour Palette",
+ "Color Zoom": "Colour Zoom",
+ "Color alpha value can not be zero.": "The colour alpha value can not be zero. Please change it.",
+ "Color to Alpha": "Colour to Alpha",
+ "Color zoom": "Colour zoom",
+ "Color:": "Colour:",
+ "Colors": "Colours",
+ "Colors:": "Colours:",
+ "Common Filters": "",
+ "Composition": "",
+ "Composition:": "",
+ "Content Fill": "",
+ "Contrast": "",
+ "Contrast:": "",
+ "Convert to Raster": "Convert to a Raster",
+ "Copy Selection": "",
+ "Copy to Clipboard": "",
+ "Copy:": "",
+ "Courier": "",
+ "Crop Tool": "",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "You can not crop a rotated layer. Please convert it to a raster to continue.",
+ "Ctrl+A": "",
+ "Ctrl+C": "",
+ "Ctrl+V": "",
+ "Ctrl+Y": "",
+ "Ctrl+Z": "",
+ "Ctrl-P": "",
+ "Current": "",
+ "Current Color Preview": "Current Colour Preview",
+ "Custom": "",
+ "Data URL": "",
+ "Data URL:": "",
+ "Decrease": "",
+ "Decrease Color Depth": "Decrease Colour Depth",
+ "Degree:": "",
+ "Del": "",
+ "Delete": "",
+ "Delete Selection": "",
+ "Denoise": "",
+ "Desaturate Tool": "",
+ "Description:": "",
+ "Deutsch": "",
+ "Differences": "",
+ "Differences Down": "",
+ "Direction:": "",
+ "Dither": "",
+ "Dithering:": "",
+ "Dominant color:": "Dominant colour:",
+ "Dot Screen": "",
+ "Down": "",
+ "Duplicate": "",
+ "Duplicate Layer": "",
+ "Dynamic": "",
+ "Edge": "",
+ "Edit": "",
+ "Edit text...": "",
+ "Effect browser": "",
+ "Effects": "",
+ "Effects browser": "",
+ "Email:": "",
+ "Emboss": "",
+ "Empty selection": "",
+ "Empty selection or type not image.": "You have selected nothing or the asset is not an image.",
+ "Enable guides:": "",
+ "Enable snap:": "",
+ "End": "",
+ "English": "English UK",
+ "Enrich": "",
+ "Enter": "",
+ "Erase Tool": "",
+ "Erase on rotate object is disabled. Sorry.": "Sorry you can not erase on rotated asset (object). Remove the rotation then you can delete it.",
+ "Error": "",
+ "Error connecting to service.": "",
+ "Error loading the list of fonts from Google.": "There is an error loading the list of fonts from Google. Please report this.",
+ "Error registering service worker": "",
+ "Error: can not find filter:": "",
+ "Error: can not find layer with id:": "",
+ "Error: missing details event target": "",
+ "Error: unknown layer type:": "",
+ "Esc": "",
+ "Escape": "",
+ "Español": "",
+ "Exit confirmation:": "",
+ "Expand edges": "",
+ "Exponent:": "",
+ "Export": "",
+ "External": "",
+ "Factor:": "",
+ "File": "",
+ "File name:": "",
+ "File size:": "",
+ "Fill": "",
+ "Fill Tool": "",
+ "Fit": "",
+ "Fit Window": "",
+ "Flatten Image": "",
+ "Flip": "",
+ "FloydSteinberg-serpentine": "",
+ "Font": "",
+ "Français": "",
+ "Full HD, 1080p": "",
+ "Full Screen": "",
+ "Full layers data": "",
+ "Gap:": "",
+ "Gaussian Blur": "",
+ "Gif delay:": "",
+ "Gingham": "",
+ "GitHub:": "",
+ "Gradient Radius:": "",
+ "Grains": "",
+ "Graphics Interchange Format": "",
+ "Gray": "",
+ "Grayscale": "",
+ "Greek": "",
+ "Green": "",
+ "Green channel:": "",
+ "Greyscale:": "",
+ "Grid": "",
+ "Grid on\/off": "",
+ "Guides": "",
+ "Guides enabled.": "",
+ "H Radius:": "",
+ "H. Align:": "",
+ "Heatmap": "",
+ "Height (%):": "",
+ "Height:": "",
+ "Help": "",
+ "Helvetica": "",
+ "Hermite": "",
+ "Hex": "",
+ "Histogram": "",
+ "Histogram:": "",
+ "Home": "",
+ "Horizontal": "",
+ "Horizontal Alignment": "",
+ "Horizontal blur:": "",
+ "Horizontal:": "",
+ "Hue": "",
+ "Hue Rotate": "",
+ "Hue:": "",
+ "Image": "",
+ "Image data with multi-layers. Can be opened using miniPaint -": "You can open asset (image) data with multi-layers using miniPaint. -",
+ "Impact": "",
+ "Increase": "",
+ "Information": "",
+ "Inkwell": "",
+ "Insert": "",
+ "Insert guides": "",
+ "Insert:": "",
+ "Instagram Filters": "",
+ "Invalid Hex Code": "",
+ "Italiano": "",
+ "JPG\/JPEG Format": "",
+ "Kerning:": "",
+ "Key-Points": "",
+ "KeyU": "",
+ "Keyboard Shortcuts": "",
+ "Keyword:": "",
+ "Lanczos": "",
+ "Language": "",
+ "Last modified": "",
+ "Layer": "",
+ "Layer details": "",
+ "Layer is not compatible with resize": "Sorry, this layer is not compatible with resize",
+ "Layer is vector, convert it to raster to apply this tool.": "Sorry this layer is a vector, please convert it to a raster to apply this tool. (Layer, Convert to a Raster)",
+ "Layers": "",
+ "Layers:": "",
+ "Left": "",
+ "Left to Right": "",
+ "Level:": "",
+ "Levels:": "",
+ "Lietuvių": "",
+ "Lo-fi": "",
+ "Luminance:": "",
+ "Luminosity": "",
+ "Magic Eraser Tool": "",
+ "Merge Down": "",
+ "Merge Layers": "",
+ "Merged": "",
+ "Metrics": "",
+ "Middle": "",
+ "Missing at least 1 size parameter.": "Sorry, you are missing at least 1 size parameter.",
+ "Missing permissions to write to Clipboard.cc": "",
+ "Mode:": "",
+ "Module function not found.": "",
+ "Modules class not found:": "",
+ "Monospace": "",
+ "Mosaic": "",
+ "Mouse:": "",
+ "Move": "",
+ "Move Layer": "",
+ "Move down": "",
+ "Move up": "",
+ "Name:": "",
+ "Needs at least 2 layers.": "You need at least 2 layers. Please make another layer using Layer, New or dragging a new asset (image) into the browser.",
+ "Negative": "",
+ "New": "",
+ "New Brush Layer": "",
+ "New Ellipse Layer": "",
+ "New File": "",
+ "New Gradient Layer": "",
+ "New Layer": "",
+ "New Line Layer": "",
+ "New Pencil Layer": "",
+ "New Rectangle Layer": "",
+ "New Text Layer": "",
+ "New file": "",
+ "New from Selection": "",
+ "New layer": "",
+ "New width can not be smaller then current width": "You can not make the new width smaller then current width.",
+ "Night Vision": "",
+ "None": "",
+ "Nothing is selected.": "Sorry, you have not selected anything, please try again.",
+ "Offset X:": "",
+ "Offset Y:": "",
+ "Oil": "",
+ "Ok": "",
+ "Online image editor.": "",
+ "Opacity": "",
+ "Opacity:": "",
+ "Open": "",
+ "Open Data URL": "",
+ "Open Directory": "",
+ "Open File": "",
+ "Open File Data URL": "",
+ "Open File URL": "",
+ "Open File Webcam": "",
+ "Open Image": "",
+ "Open JSON File": "",
+ "Open Test Template": "",
+ "Open URL": "",
+ "Open data URL": "",
+ "Open from Webcam": "",
+ "Original Size": "",
+ "PNGTOSVG - Convert Image to SVG": "",
+ "PageDown": "",
+ "PageUp": "",
+ "Palette": "",
+ "Parameter #1:": "",
+ "Parameter #2:": "",
+ "Paste": "",
+ "Pencil": "",
+ "Percentage:": "",
+ "Pixels:": "",
+ "Placeholder comment for color channels": "Placeholder comment for colour channels",
+ "Placeholder comment for color picker": "Placeholder comment for colour picker",
+ "Placeholder comment for color swatches": "Placeholder comment for colour swatches",
+ "Portable Network Graphics": "",
+ "Português": "",
+ "Position:": "",
+ "Power:": "",
+ "Preview": "",
+ "Previous": "",
+ "Previous layer must be image, convert it to raster to apply this tool.": "The previous layer must be an asset (image), please convert it to a raster to apply this tool.",
+ "Print": "",
+ "Quality:": "",
+ "Quick Load": "",
+ "Quick Save": "",
+ "REMOVE.BG - Remove Image Background": "",
+ "Radial": "",
+ "Radial gradient": "",
+ "Radius:": "",
+ "Range:": "",
+ "Red": "",
+ "Red channel:": "",
+ "Redo": "",
+ "Remove all": "",
+ "Rename": "",
+ "Rename Layer": "",
+ "Rendered with errors.": "",
+ "Rendering...": "",
+ "Replace Color": "Replace Colour",
+ "Replace color": "Replace colour",
+ "Replacement:": "",
+ "Report Issues": "",
+ "Reset": "",
+ "Resize": "",
+ "Resize Boundary": "",
+ "Resize Layer": "",
+ "Resize Layers": "",
+ "Resize Text Layer": "",
+ "Resized as background": "",
+ "Resized:": "",
+ "Resolution:": "",
+ "Restore Alpha": "",
+ "Right": "",
+ "Right angle:": "",
+ "Right to Left": "",
+ "Rotate": "",
+ "Rotate Layer": "",
+ "Rotate is not supported on this type of object. Convert to raster?": "Sorry, rotate is not supported on this type of asset (object), would you like to convert it to a raster?",
+ "Rotate left": "",
+ "Rotate:": "",
+ "Ruler": "",
+ "SQUOOSH - Compress and Compare Images": "",
+ "Safe search:": "",
+ "Saturate": "",
+ "Saturation": "",
+ "Saturation:": "",
+ "Save (Export)": "",
+ "Save As": "",
+ "Save As Data URL": "",
+ "Save as": "",
+ "Save as type:": "",
+ "Save layers:": "",
+ "Scaling up is not supported in Hermite, using Lanczos.": "",
+ "Scroll down": "",
+ "Scroll up": "",
+ "Search": "",
+ "Search Images": "",
+ "Search for Font": "",
+ "Select All": "",
+ "Select Text Layer": "",
+ "Select object tool": "",
+ "Selected": "",
+ "Selection Tool": "",
+ "Sensitivity:": "",
+ "Separated": "",
+ "Separated (original types)": "",
+ "Sepia": "",
+ "Set Image Size": "",
+ "Settings": "",
+ "Shadow": "",
+ "Shadow:": "",
+ "Shapes": "",
+ "Sharpen": "",
+ "Sharpen Tool": "",
+ "Sharpen:": "",
+ "Shortcut Key:": "",
+ "Show \/ Hide": "",
+ "Show file size:": "",
+ "Simple": "",
+ "Size is too big, max": "",
+ "Size:": "",
+ "Skip - layer must be image.": "Skip - layer must be an asset (image).",
+ "Solarize": "",
+ "Sorry, cold not load getUserMedia() data:": "Sorry, I could not load getUserMedia() data:",
+ "Sorry, image could not be loaded.": "Sorry, the asset (image) could not be loaded.",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "Sorry, the asset (image) could not be loaded. Try copying the image and pasting it.",
+ "Sorry, image is too big, max 5 MB.": "Sorry, the asset (image) is too big, max size is 5 MB.",
+ "Source coordinates saved.": "",
+ "Source is empty, right click on image or use long press to save source position.": "Sorry, the source is empty, right click on the asset (image) or use a long press to save source position.",
+ "Sprites": "",
+ "Square": "",
+ "Stream:": "",
+ "Strength:": "",
+ "Strict": "",
+ "TINYPNG - Compress PNG and JPEG": "",
+ "Tab": "",
+ "Tag Image File Format": "",
+ "Tahoma": "",
+ "Target:": "",
+ "The quick brown fox jumps over the lazy dog.": "",
+ "Theme": "",
+ "There": "",
+ "There are no layers behind.": "",
+ "There is only 1 layer.": "",
+ "Thick guides:": "",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "Sorry, this layer must contain an asset (image). Please convert it to a raster to apply this tool.",
+ "Tilt Shift": "",
+ "Times New Roman": "",
+ "Toaster": "",
+ "Toggle": "",
+ "Toggle Color Channels": "Toggle Colour Channels",
+ "Toggle Color Picker": "Toggle Colour Picker",
+ "Toggle Menu": "",
+ "Toggle Swatches": "",
+ "Tools": "",
+ "Top": "",
+ "Top to Bottom": "",
+ "Total pixels:": "",
+ "Translate": "",
+ "Translate Layer": "",
+ "Translate error, can not find dictionary:": "Translate error, I can not find the dictionary:",
+ "Transparency background:": "",
+ "Transparent:": "",
+ "Trim": "",
+ "Trim Layers": "",
+ "Trim borders:": "",
+ "Trim layer:": "",
+ "Trim white color?": "Trim white colour?",
+ "Type:": "",
+ "Türkçe": "",
+ "Undo": "",
+ "Unique colors:": "Unique colours:",
+ "Units": "",
+ "Up": "",
+ "Update": "",
+ "Update Brush Layer": "",
+ "Update Pencil Layer": "",
+ "Update guides": "",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "You can use Ctrl+V on the keyboard shortcut to paste from the Clipboard.",
+ "V Radius:": "",
+ "V. Align:": "",
+ "Valencia": "",
+ "Verdana": "",
+ "Version:": "",
+ "Vertical": "",
+ "Vertical Alignment": "",
+ "Vertical blur:": "",
+ "Vertical:": "",
+ "Vibrance": "",
+ "View": "",
+ "Vignette": "",
+ "ViliusL": "",
+ "Vintage": "",
+ "Webcam": "",
+ "Webcam #": "",
+ "Website:": "",
+ "Weppy File Format": "",
+ "Width (%):": "",
+ "Width:": "",
+ "Windows Bitmap": "",
+ "Word": "",
+ "Word + Letter": "",
+ "Wrap At:": "",
+ "Wrap:": "",
+ "Wrong dimensions": "",
+ "Wrong file type, must be image or json.": "This is the wrong file type, it must be an asset (image) or json.",
+ "X end:": "",
+ "X position:": "",
+ "X start:": "",
+ "X-Pro II": "",
+ "Y end:": "",
+ "Y position:": "",
+ "Y start:": "",
+ "You can also drag and drop items into browser.": "You can also drag and drop assets (items) into browser.",
+ "Your browser does not support canvas or JavaScript is not enabled.": "",
+ "Your browser does not support this format.": "",
+ "Your search did not match any images.": "Your search did not match any assets (images).",
+ "Zoom": "",
+ "Zoom Blur": "",
+ "Zoom In": "",
+ "Zoom Out": "",
+ "Zoom blur": "",
+ "Zoom in": "",
+ "Zoom out": "",
+ "Zoom:": ""
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/languages/zh.json b/paintplus/frontend/src/js/languages/zh.json
new file mode 100644
index 0000000..5858f53
--- /dev/null
+++ b/paintplus/frontend/src/js/languages/zh.json
@@ -0,0 +1,535 @@
+{
+ "A problem occurred while removing undo history. It": "删除撤销历史记录时发生问题。它",
+ "About": "关于",
+ "Active": "活动",
+ "Aden": "Aden",
+ "Advanced": "高级",
+ "All": "全部",
+ "Alpha": "透明度",
+ "Alpha:": "透明度：",
+ "Animation": "动画",
+ "Anonymous": "匿名",
+ "Anti aliasing": "抗锯齿",
+ "Application markup may have changed,": "应用标记可能已更改，",
+ "Arial": "Arial",
+ "Arrow": "箭头",
+ "ArrowDown": "向下箭头",
+ "ArrowLeft": "向左箭头",
+ "ArrowRight": "向右箭头",
+ "ArrowUp": "向上箭头",
+ "Author:": "作者：",
+ "Auto Adjust Colors": "自动调整颜色",
+ "Auto Kerning": "自动紧排",
+ "Auto select": "自动选择",
+ "Average:": "平均值：",
+ "Backspace": "退格键",
+ "Base": "基础",
+ "Basic": "基本",
+ "Black and White": "黑白",
+ "Blue": "蓝色",
+ "Blue channel:": "蓝色通道：",
+ "Blueprint": "蓝图",
+ "Blur": "模糊工具",
+ "Blur Radius:": "模糊半径：",
+ "Blur Tool": "模糊工具",
+ "Blur power:": "模糊强度：",
+ "Borders": "边框",
+ "Bottom": "底部",
+ "Bottom to Top": "从底部到顶部",
+ "Bounds:": "边界：",
+ "Box": "方框",
+ "Box Blur": "方框模糊",
+ "Box blur": "方框模糊",
+ "Brightness": "亮度",
+ "Brightness:": "亮度：",
+ "Brush": "刷子工具",
+ "Bulge": "凸出",
+ "Bulge/Pinch Tool": "凸出/收缩工具",
+ "Burn": "加深",
+ "Can not animate 1 layer.": "无法对1个图层进行动画。",
+ "Can not find previous layer.": "找不到上一个图层。",
+ "Can not use this tool on current layer: image already takes all area.": "无法在当前图层上使用此工具：图像已覆盖整个区域。",
+ "Cancel": "取消",
+ "Canvas Size": "画布尺寸",
+ "Center": "中心",
+ "Center x:": "中心x：",
+ "Center y:": "中心y：",
+ "Center:": "中心：",
+ "Change Composition": "更改合成",
+ "Change Layer Details": "更改图层详情",
+ "Change Opacity": "更改不透明度",
+ "Channel:": "通道：",
+ "Circle": "圆圈",
+ "Clarendon": "Clarendon",
+ "Clear": "清除",
+ "Clear Selection": "清除选区",
+ "Clone": "克隆工具",
+ "Clone Tool": "克隆工具",
+ "Clone count:": "克隆数量：",
+ "Clone tool disabled for resized image. Please rasterize first.": "对已调整大小的图像禁用克隆工具。请先栅格化。",
+ "Cloned edges": "克隆边缘",
+ "Close": "关闭",
+ "Color 1:": "颜色 1：",
+ "Color 2:": "颜色 2：",
+ "Color #": "颜色 #",
+ "Color Corrections": "颜色校正",
+ "Color Palette": "颜色调色板",
+ "Color Zoom": "颜色缩放",
+ "Color alpha value can not be zero.": "颜色的 alpha 值不能为零。",
+ "Color to Alpha": "颜色转换为透明",
+ "Color zoom": "颜色缩放",
+ "Color:": "颜色：",
+ "Colors": "颜色",
+ "Colors:": "颜色：",
+ "Common Filters": "常见滤镜",
+ "Composition": "合成",
+ "Composition:": "合成：",
+ "Content Fill": "内容填充",
+ "Contiguous": "连续",
+ "Contrast": "对比度",
+ "Contrast:": "对比度：",
+ "Convert layer to raster": "将图层转换为栅格图",
+ "Convert to Raster": "转换为栅格图",
+ "Copy Selection": "复制选区",
+ "Copy to Clipboard": "复制到剪贴板",
+ "Courier": "Courier",
+ "Crop": "裁剪工具",
+ "Crop Tool": "裁剪工具",
+ "Crop on rotated layer is not supported. Convert it to raster to continue.": "不支持旋转图层上的裁剪。请将其转换为位图以继续。",
+ "Ctrl + C": "Ctrl + C",
+ "Ctrl+A": "Ctrl+A",
+ "Ctrl+C": "Ctrl+C",
+ "Ctrl+P": "Ctrl+P",
+ "Ctrl+V": "Ctrl+V",
+ "Ctrl+Y": "Ctrl+Y",
+ "Ctrl+Z": "Ctrl+Z",
+ "Current": "当前",
+ "Current Color Preview": "当前颜色预览",
+ "Custom": "自定义",
+ "Data URL": "数据 URL",
+ "Data URL:": "数据 URL：",
+ "Decrease": "减少",
+ "Decrease Color Depth": "减少色彩深度",
+ "Degree:": "角度：",
+ "Del": "删除",
+ "Delay:": "延迟：",
+ "Delete": "删除",
+ "Delete Selection": "删除选区",
+ "Denoise": "降噪",
+ "Desaturate Tool": "去色工具",
+ "Description:": "描述：",
+ "Deutsch": "德语",
+ "Differences": "差异",
+ "Differences Down": "差异缩小",
+ "Direction:": "方向：",
+ "Dither": "抖动",
+ "Dithering:": "抖动：",
+ "Dominant color:": "主色调：",
+ "Dot Screen": "点阵",
+ "Down": "向下",
+ "Duplicate": "复制",
+ "Duplicate Layer": "复制图层",
+ "Duplicate layer": "复制图层",
+ "Dynamic": "动态",
+ "Edge": "边缘",
+ "Edit": "编辑",
+ "Edit text...": "编辑文本...",
+ "Effect browser": "特效浏览器",
+ "Effects": "特效",
+ "Effects browser": "特效浏览器",
+ "Email:": "邮箱：",
+ "Emboss": "浮雕",
+ "Empty selection": "空选区",
+ "Empty selection or type not image.": "空选区或未输入图像。",
+ "Enable autoresize:": "启用自动调整大小：",
+ "End": "结束",
+ "English": "英语",
+ "English (UK)": "英语（英国）",
+ "Enrich": "增强",
+ "Enter": "输入",
+ "Erase Tool": "橡皮擦工具",
+ "Erase on rotate object is disabled. Please rasterize first.": "禁用旋转对象上的橡皮擦。请先栅格化。",
+ "Error": "错误",
+ "Error connecting to service.": "连接到服务时出错。",
+ "Error loading the list of fonts from Google.": "加载 Google 字体列表时出错。",
+ "Error registering service worker": "注册服务工作者时出错",
+ "Error: can not find filter:": "错误：无法找到滤镜：",
+ "Error: can not find layer with id:": "错误：无法找到带有 ID 的图层：",
+ "Error: missing details event target": "错误：缺少详细信息事件目标",
+ "Error: unknown layer type:": "错误：未知的图层类型：",
+ "Error: unsupported attribute type:": "错误：不支持的属性类型：",
+ "Esc": "退出",
+ "Escape": "逃脱",
+ "Español": "西班牙语",
+ "Expand edges": "扩展边缘",
+ "Exponent:": "指数：",
+ "Export": "导出",
+ "External": "外部",
+ "Erase": "橡皮擦工具",
+ "Factor:": "因子：",
+ "File": "文件",
+ "File name:": "文件名：",
+ "File size:": "文件大小：",
+ "Fill": "填充",
+ "Fill:": "填充：",
+ "Fill Tool": "填充工具",
+ "Fit": "适应",
+ "Fit Window": "适应窗口",
+ "Fit window": "适应窗口",
+ "Flatten Image": "图像拉平",
+ "Flip": "翻转",
+ "FloydSteinberg-serpentine": "FloydSteinberg-蛇形",
+ "Font": "字体",
+ "Font:": "字体：",
+ "Français": "法语",
+ "Full HD, 1080p": " 全高清，1080p",
+ "Full Screen": "全屏",
+ "Full layers data": "全层数据",
+ "Gap:": "间距：",
+ "Gaussian Blur": "高斯模糊",
+ "Gif delay:": "动图延迟：",
+ "Gingham": "方格",
+ "GitHub:": "GitHub：",
+ "Gradient": "渐变工具",
+ "Gradient Radius:": "渐变半径：",
+ "Grains": "颗粒",
+ "Graphics Interchange Format": "图形交换格式",
+ "Gray": "灰色",
+ "Grayscale": "灰度",
+ "Greek": "希腊语",
+ "Green": "绿色",
+ "Green channel:": "绿色通道：",
+ "Greyscale:": "灰度：",
+ "Grid": "网格",
+ "Grid on/off": "打开/关闭网格",
+ "Guides": "参考线",
+ "Guides enabled.": "参考线已启用。",
+ "H Radius:": "水平半径：",
+ "H. Align:": "水平对齐：",
+ "Heatmap": "热力图",
+ "Height (%):": "高度（%）：",
+ "Height:": "高度：",
+ "Help": "帮助",
+ "Helvetica": "黑体",
+ "Hermite": "Hermite",
+ "Hex": "十六进制",
+ "Hide": "隐藏",
+ "Histogram": "直方图",
+ "Histogram:": "直方图：",
+ "Home": "主页",
+ "Horizontal": "水平",
+ "Horizontal Alignment": "水平对齐",
+ "Horizontal blur:": "水平模糊：",
+ "Horizontal:": "水平：",
+ "Hue": "色调",
+ "Hue Rotate": "色调旋转",
+ "Hue:": "色调：",
+ "Image": "图片",
+ "Image data with multi-layers. Can be opened using miniPaint -": "图像数据带有多层。可使用miniPaint打开 -",
+ "Impact": "影响",
+ "In proportion:": "按比例：",
+ "Increase": "增加",
+ "Information": "信息",
+ "Inkwell": "墨井",
+ "Insert": "插入",
+ "Insert guides": "插入参考线",
+ "Insert new layer": "插入新图层",
+ "Instagram Filters": "Instagram 滤镜",
+ "Invalid Hex Code": "无效的十六进制代码",
+ "Italiano": "意大利语",
+ "JPG/JPEG Format": "JPG / JPEG格式",
+ "Kerning:": "字距：",
+ "Key-Points": "关键点",
+ "KeyU": "键 U",
+ "Keyboard Shortcuts": "键盘快捷键",
+ "Keyword:": "关键字：",
+ "Lanczos": "Lanczos",
+ "Landscape": "横向",
+ "Language": "语言",
+ "Last modified": "上次修改",
+ "Layer": "图层",
+ "Layer details": "图层详情",
+ "Layer is empty.": "图层为空。",
+ "Layer is not compatible with resize": "图层不兼容调整大小",
+ "Layer is vector, convert it to raster to apply this tool.": "图层为矢量，转换为栅格以应用此工具。",
+ "Layers": "图层",
+ "Layers:": "图层：",
+ "Layout:": "布局：",
+ "Leading:": "行距：",
+ "Left": "左",
+ "Left to Right": "左到右",
+ "Level:": "层级：",
+ "Levels:": "层级：",
+ "Lietuvių": "立陶宛语",
+ "Lo-fi": "低保真",
+ "Luminance:": "亮度：",
+ "Luminosity": "亮度",
+ "Magic Eraser Tool": "魔术橡皮擦工具",
+ "Merge Down": "向下合并",
+ "Merge Layers": "合并图层",
+ "Merged": "已合并",
+ "Metrics": "指标",
+ "Middle": "居中",
+ "Missing at least 1 size parameter.": "至少缺少1个尺寸参数。",
+ "Missing permissions to write to Clipboard.cc": "缺少写入Clipboard.cc的权限",
+ "Mode:": "模式：",
+ "Module function not found.": "未找到模块功能。",
+ "Modules class not found:": "未找到模块类：",
+ "Monospace": "等宽字体",
+ "Mosaic": "马赛克",
+ "Mouse:": "鼠标：",
+ "Move": "移动",
+ "Move Layer": "移动图层",
+ "Move layer down": "向下移动图层",
+ "Move layer up": "向上移动图层",
+ "Name:": "名称：",
+ "Negative": "负片",
+ "New": "新建",
+ "New Bezier Layer": "新贝塞尔曲线图层",
+ "New Brush Layer": "新画笔图层",
+ "New Ellipse Layer": "新椭圆图层",
+ "New File": "新建文件",
+ "New Gradient Layer": "新渐变图层",
+ "New Layer": "新建图层",
+ "New Line Layer": "新线条图层",
+ "New Pencil Layer": "新铅笔图层",
+ "New Polygon Layer": "新多边形图层",
+ "New Rectangle Layer": "新矩形图层",
+ "New Text Layer": "新文本图层",
+ "New file": "新建文件",
+ "New from Selection": "从选择新建",
+ "New layer": "新建图层",
+ "Next": "下一个",
+ "Night Vision": "夜视",
+ "None": "无",
+ "Nothing is selected.": "未选择任何内容。",
+ "Offset X:": "X偏移：",
+ "Offset Y:": "Y偏移：",
+ "Oil": "油画",
+ "Ok": "确定",
+ "Online image editor.": "在线图像编辑器。",
+ "Opacity": "不透明度",
+ "Opacity:": "不透明度：",
+ "Open": "打开",
+ "Open Data URL": "打开数据URL",
+ "Open Directory": "打开目录",
+ "Open File": "打开文件",
+ "Open File Data URL": "打开数据URL文件",
+ "Open File URL": "打开文件网址",
+ "Open File Webcam": "打开网络摄像头文件",
+ "Open Image": "打开图像",
+ "Open JSON File": "打开JSON文件",
+ "Open Test Template": "打开测试模板",
+ "Open URL": "打开网址",
+ "Open data URL": "打开数据URL",
+ "Open from Webcam": "从摄像头打开",
+ "Original Size": "原始大小",
+ "PNGTOSVG - Convert Image to SVG": "PNGTOSVG - 将图像转换为SVG格式",
+ "PageDown": "下一页",
+ "PageUp": "上一页",
+ "Palette": "调色板",
+ "Parameter #1:": "参数1：",
+ "Parameter #2:": "参数2：",
+ "Paste": "粘贴",
+ "Pencil": "铅笔工具",
+ "Percentage:": "百分比：",
+ "Pick color": "吸管工具",
+ "Pixels:": "像素：",
+ "Placeholder comment for color channels": "颜色通道的占位符注释",
+ "Placeholder comment for color picker": "颜色选择器的占位符注释",
+ "Placeholder comment for color swatches": "颜色样本的占位符注释",
+ "Play": "播放",
+ "Portable Network Graphics": "便携式网络图形",
+ "Portrait": "纵向",
+ "Português": "葡萄牙语",
+ "Position:": "位置：",
+ "Power:": "功率：",
+ "Preview": "预览",
+ "Previous": "上一个",
+ "Previous layer must be image, convert it to raster to apply this tool.": "前一图层必须为图像，将其转换为栅格以应用此工具。",
+ "Print": "打印",
+ "Quality:": "质量：",
+ "Quick Load": "快速加载",
+ "Quick Save": "快速保存",
+ "REMOVE.BG - Remove Image Background": "REMOVE.BG - 移除图像背景",
+ "Radial": "径向",
+ "Radial gradient": "径向渐变",
+ "Radius:": "半径：",
+ "Range:": "范围：",
+ "Red": "红色",
+ "Red channel:": "红色通道：",
+ "Redo": "重做",
+ "Remove all": "移除全部",
+ "Rename": "重命名",
+ "Rename Layer": "重命名图层",
+ "Rendered with errors.": "渲染出现错误。",
+ "Rendering...": "渲染中...",
+ "Replace Color": "替换颜色",
+ "Replace color": "替换颜色",
+ "Replacement:": "替换：",
+ "Report Issues": "报告问题",
+ "Reset": "重置",
+ "Resize": "调整大小",
+ "Resize Boundary": "调整边界",
+ "Resize Layer": "调整图层大小",
+ "Resize Layers": "调整图层大小",
+ "Resize Text Layer": "调整文本图层大小",
+ "Resized as background": "调整为背景",
+ "Resized:": "调整大小：",
+ "Resolution:": "分辨率：",
+ "Restore Alpha": "恢复透明度",
+ "Right": "右",
+ "Right angle:": "直角：",
+ "Right to Left": "从右到左",
+ "Rotate": "旋转",
+ "Rotate Layer": "旋转图层",
+ "Rotate is not supported on this type of object. Convert to raster?": "此类型对象不支持旋转。转换为栅格图？",
+ "Rotate left": "向左旋转",
+ "Rotate:": "旋转：",
+ "Ruler": "标尺",
+ "SQUOOSH - Compress and Compare Images": "SQUOOSH - 压缩和比较图像",
+ "Saturate": "饱和度",
+ "Saturation": "饱和度",
+ "Saturation:": "饱和度：",
+ "Save As": "另存为",
+ "Save As Data URL": "另存为数据URL",
+ "Save as": "另存为",
+ "Save as type:": "另存为类型：",
+ "Save layers:": "保存图层：",
+ "Scaling up is not supported in Hermite, using Lanczos.": "Hermite不支持放大，请使用Lanczos。",
+ "Scroll down": "向下滚动",
+ "Scroll up": "向上滚动",
+ "Search": "搜索",
+ "Search Images": "搜索图像",
+ "Search for Font": "搜索字体",
+ "Search:": "搜索：",
+ "Select All": "全选",
+ "Select Text Layer": "选择文本图层",
+ "Select object tool": "选择对象工具",
+ "Selected": "已选择",
+ "Selection": "选择工具",
+ "Selection Tool": "选择工具",
+ "Sensitivity:": "灵敏度：",
+ "Separated": "分离",
+ "Separated (original types)": "分离（原始类型）",
+ "Sepia": "棕褐色",
+ "Set Image Size": "设置图像尺寸",
+ "Settings": "设置",
+ "Shadow": "阴影",
+ "Shapes": "形状",
+ "Shapes (H)": "形状 (H)",
+ "Sharpen": "锐化",
+ "Sharpen Tool": "锐化工具",
+ "Sharpen:": "锐化：",
+ "Shift + S": "Shift + S",
+ "Shortcut Key:": "快捷键：",
+ "Show": "显示",
+ "Show \/ Hide": "显示 \/ 隐藏",
+ "Show file size:": "显示文件大小：",
+ "Simple": "简单",
+ "Size is too big, max": "尺寸太大，最大值为",
+ "Size:": "尺寸：",
+ "Skip - layer must be image.": "跳过 - 图层必须是图像。",
+ "Solarize": "曝光反转",
+ "Sorry, cold not load getUserMedia() data:": "抱歉，无法加载 getUserMedia() 数据:",
+ "Sorry, image could not be loaded.": "抱歉，无法加载图片。",
+ "Sorry, image could not be loaded. Try copy image and paste it.": "抱歉，图片无法加载。尝试复制图像并粘贴。",
+ "Sorry, image is too big, max 5 MB.": "抱歉，图片太大，最大值为5 MB。",
+ "Source coordinates saved.": "源坐标已保存。",
+ "Source is empty, right click on image or use long press to save source position.": "源为空，右键单击图像或长按保存源位置。",
+ "Source layer:": "源图层：",
+ "Sprites": "图像精灵",
+ "Square": "正方形",
+ "Stream:": "流：",
+ "Strength:": "强度：",
+ "Strict": "严格",
+ "Stroke size:": "线条粗细：",
+ "TINYPNG - Compress PNG and JPEG": "TINYPNG - 压缩PNG和JPEG",
+ "Tab": "标签",
+ "Tag Image File Format": "标记图像文件格式",
+ "Tahoma": "Tahoma",
+ "Target:": "目标：",
+ "The quick brown fox jumps over the lazy dog.": "敏捷的棕色狐狸跳过了懒狗。",
+ "There": "那里",
+ "There are no layers behind.": "背后没有图层。",
+ "There is only 1 layer.": "只有1个图层。",
+ "This layer must contain an image. Please convert it to raster to apply this tool.": "此图层必须包含图像。请将其转换为光栅以应用此工具。",
+ "Tilt Shift": "视角移位",
+ "Times New Roman": "Times New Roman",
+ "Toaster": "Toaster",
+ "Toggle": "切换",
+ "Toggle Color Channels": "切换颜色通道",
+ "Toggle Color Picker": "切换颜色选择器",
+ "Toggle Menu": "切换菜单",
+ "Toggle Swatches": "切换样本",
+ "Tools": "工具",
+ "Top": "顶部",
+ "Top to Bottom": "从上到下",
+ "Total pixels:": "总像素数：",
+ "Translate": "翻译",
+ "Translate Layer": "翻译图层",
+ "Translate error, can not find dictionary:": "翻译错误，找不到字典：",
+ "Transparent:": "透明：",
+ "Trim": "裁剪",
+ "Trim Layers": "裁剪图层",
+ "Trim borders:": "裁剪边框：",
+ "Trim layer:": "裁剪图层：",
+ "Trim white color?": "裁剪白色吗？",
+ "Text": " 文本工具",
+ "Type:": "类型：",
+ "Türkçe": "土耳其语",
+ "Undo": "撤销",
+ "Unique colors:": "唯一颜色：",
+ "Up": "向上",
+ "Update": "更新",
+ "Update Brush Layer": "更新画笔图层",
+ "Update Pencil Layer": "更新铅笔图层",
+ "Update guides": "更新指南",
+ "Use Ctrl+V keyboard shortcut to paste from Clipboard.": "使用 Ctrl+V 快捷键从剪贴板粘贴。",
+ "V Radius:": "垂直半径：",
+ "V. Align:": "垂直对齐：",
+ "Valencia": "Valencia",
+ "Verdana": "Verdana",
+ "Version:": "版本：",
+ "Vertical": "垂直",
+ "Vertical Alignment": "垂直对齐",
+ "Vertical blur:": "垂直模糊：",
+ "Vertical:": "垂直：",
+ "Vibrance": "饱和度",
+ "View": "视图",
+ "Vignette": "晕影",
+ "ViliusL": "ViliusL",
+ "Vintage": "复古",
+ "Webcam": "摄像头",
+ "Webcam #": "摄像头 #",
+ "Website:": "网站：",
+ "Weppy File Format": "Weppy文件格式",
+ "Width (%):": "宽度（%）：",
+ "Width:": "宽度：",
+ "Windows Bitmap": "Windows位图",
+ "Word": "词",
+ "Word + Letter": "词 + 字母",
+ "Wrap At:": "在此处换行：",
+ "Wrap:": "自动换行：",
+ "Wrong dimensions": "尺寸错误",
+ "Wrong file type, must be image or json.": "文件类型错误，必须是图像或JSON。",
+ "X end:": "X 结束：",
+ "X position:": "X 位置：",
+ "X start:": "X 开始：",
+ "X-Pro II": "X-Pro II",
+ "Y end:": "Y 结束：",
+ "Y position:": "Y 位置：",
+ "Y start:": "Y 开始：",
+ "You can also drag and drop items into browser.": "您也可以将项目拖放到浏览器中。",
+ "Your browser does not support canvas or JavaScript is not enabled.": "您的浏览器不支持画布或JavaScript未启用。",
+ "Your browser does not support this format.": "您的浏览器不支持此格式。",
+ "Your search did not match any images.": "您的搜索未匹配任何图片。",
+ "Zoom": "缩放",
+ "Zoom Blur": "缩放模糊",
+ "Zoom In": "放大",
+ "Zoom Out": "缩小",
+ "Zoom blur": "缩放模糊",
+ "Zoom in": "放大",
+ "Zoom out": "缩小",
+ "Zoom:": "缩放："
+}
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/canvastotiff.js b/paintplus/frontend/src/js/libs/canvastotiff.js
new file mode 100644
index 0000000..9f4a472
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/canvastotiff.js
@@ -0,0 +1,309 @@
+/*!
+ canvas-to-tiff version 1.0.0
+ By Epistemex (c) 2015-2016
+ www.epistemex.com
+ MIT License (this header required)
+*/
+
+/**
+ * Static helper object that can convert a CORS-compliant canvas element
+ * to a 32-bits TIFF file (buffer, Blob and data-URI). The TIFF is by
+ * default saved in big-endian format with interleaved RGBA data.
+ *
+ * @type {{toArrayBuffer: Function, toBlob: Function, toDataURL: Function}}
+ * @namespace
+ */
+var CanvasToTIFF = {
+
+ /**
+ * @private
+ */
+ _dly: 9,
+
+ /**
+ * @private
+ */
+ _error: null,
+
+ /**
+ * Add error handler (function) in case of any error
+ * @param fn
+ */
+ setErrorHandler: function(fn) {
+ this._error = fn
+ },
+
+ /**
+ * Convert a canvas element to ArrayBuffer containing a TIFF file
+ * with support for alpha. The call is asynchronous
+ * so a callback must be provided.
+ *
+ * Note that CORS requirement must be fulfilled.
+ *
+ * @param {HTMLCanvasElement} canvas - the canvas element to convert
+ * @param {function} callback - called when conversion is done. Argument is ArrayBuffer
+ * @param {object} [options] - an option object
+ * @param {boolean} [options.littleEndian=false] - set to true to produce a little-endian based TIFF
+ * @param {number} [options.dpi=96] - DPI for both X and Y directions. Default 96 DPI (PPI).
+ * @param {number} [options.dpiX=96] - DPI for X directions (overrides options.dpi).
+ * @param {number} [options.dpiY=96] - DPI for Y directions (overrides options.dpi).
+ * @static
+ */
+ toArrayBuffer: function(canvas, callback, options) {
+
+ options = options || {};
+
+ var me = this;
+
+ try {
+ var w = canvas.width,
+ h = canvas.height,
+ offset = 0,
+ iOffset = 258, // todo calc based on offset field length, add to final offset when compiled
+ //iOffsetPtr,
+ entries = 0,
+ offsetList = [],
+ idfOffset,
+ sid = "\x63\x61\x6e\x76\x61\x73\x2d\x74\x6f\x2d\x74\x69\x66\x66\x20\x30\x2e\x34\0",
+ lsb = !!options.littleEndian,
+ dpiX = +(options.dpiX || options.dpi || 96)|0,
+ dpiY = +(options.dpiY || options.dpi || 96)|0,
+ idata = canvas.getContext("2d").getImageData(0, 0, w, h),
+ length = idata.data.length,
+ fileLength = iOffset + length,
+ file = new ArrayBuffer(fileLength),
+ file8 = new Uint8Array(file),
+ view = new DataView(file),
+ pos = 0,
+ date = new Date(),
+ dateStr;
+
+ // Header
+ set16(lsb ? 0x4949 : 0x4d4d); // II or MM
+ set16(42); // magic 42
+ set32(8); // offset to first IFD
+
+ // IFD
+ addIDF(); // IDF start
+ addEntry(0xfe, 4, 1, 0); // NewSubfileType
+ addEntry(0x100, 4, 1, w); // ImageWidth
+ addEntry(0x101, 4, 1, h); // ImageLength (height)
+ addEntry(0x102, 3, 4, offset, 8); // BitsPerSample
+ addEntry(0x103, 3, 1, 1); // Compression
+ addEntry(0x106, 3, 1, 2); // PhotometricInterpretation: RGB
+ addEntry(0x111, 4, 1, iOffset, 0); // StripOffsets
+ addEntry(0x115, 3, 1, 4); // SamplesPerPixel
+ addEntry(0x117, 4, 1, length); // StripByteCounts
+ addEntry(0x11a, 5, 1, offset, 8); // XResolution
+ addEntry(0x11b, 5, 1, offset, 8); // YResolution
+ addEntry(0x128, 3, 1, 2); // ResolutionUnit: inch
+ addEntry(0x131, 2, sid.length, offset, getStrLen(sid)); // sid
+ addEntry(0x132, 2, 0x14, offset, 0x14); // Datetime
+ addEntry(0x152, 3, 1, 2); // ExtraSamples
+ endIDF();
+
+ // Fields section > long ---------------------------
+
+ // BitsPerSample (2x4), 8,8,8,8
+ set32(0x00080008);
+ set32(0x00080008);
+
+ // StripOffset to bitmap data
+ //set32(iOffset);
+
+ // StripByteCounts
+ //set32(length);
+
+ // XRes PPI
+ set32(dpiX);
+ set32(1);
+
+ // YRes PPI
+ set32(dpiY);
+ set32(1);
+
+ // sid
+ setStr(sid);
+
+ // date
+ dateStr = date.getFullYear() + ":" + pad2(date.getMonth() + 1) + ":" + pad2(date.getDate()) + " ";
+ dateStr += pad2(date.getHours()) + ":" + pad2(date.getMinutes()) + ":" + pad2(date.getSeconds());
+ setStr(dateStr);
+
+ // Image data here (todo if very large, split into block based copy)
+ file8.set(idata.data, iOffset);
+
+ // make actual async
+ setTimeout(function() { callback(file) }, me._dly);
+ }
+ catch(err) {
+ if (me._error) me._error(err.toString())
+ }
+
+ function pad2(str) {
+ str += "";
+ return str.length === 1 ? "0" + str : str
+ }
+
+ // helper method to move current buffer position
+ function set16(data) {
+ view.setUint16(pos, data, lsb);
+ pos += 2
+ }
+
+ function set32(data) {
+ view.setUint32(pos, data, lsb);
+ pos += 4
+ }
+
+ function setStr(str) {
+ var i = 0;
+ while(i < str.length) view.setUint8(pos++, str.charCodeAt(i++) & 0xff, lsb);
+ if (pos & 1) pos++
+ }
+
+ function getStrLen(str) {
+ var l = str.length;
+ return l & 1 ? l + 1 : l
+ }
+
+ function addEntry(tag, type, count, value, dltOffset) {
+ set16(tag);
+ set16(type);
+ set32(count);
+
+ if (dltOffset) {
+ //if (tag === 0x111) iOffsetPtr = pos;
+ //iOffset += dltOffset;
+ offset += dltOffset;
+ offsetList.push(pos);
+ }
+
+ if (count === 1 && type === 3 && !dltOffset) {
+ set16(value);
+ set16(0); // pad
+ }
+ else {
+ set32(value);
+ }
+
+ entries++
+ }
+
+ function addIDF(offset) {
+ idfOffset = offset || pos;
+ pos += 2;
+ }
+
+ function endIDF() {
+ view.setUint16(idfOffset, entries, lsb);
+ set32(0);
+
+ var delta = 14 + entries * 12; // 14 = offset to IDF (8) + IDF count (2) + end pointer (4)
+
+ // compile offsets
+ for(var i = 0, p, o; i < offsetList.length; i++) {
+ p = offsetList[i];
+ o = view.getUint32(p, lsb);
+ view.setUint32(p, o + delta, lsb);
+ }
+
+ //view.setUint32(iOffsetPtr, iOffset + delta, lsb);
+ }
+ },
+
+ /**
+ * Converts a canvas to TIFF file, returns a Blob representing the
+ * file. This can be used with URL.createObjectURL(). The call is
+ * asynchronous so a callback must be provided.
+ *
+ * Note that CORS requirement must be fulfilled.
+ *
+ * @param {HTMLCanvasElement} canvas - the canvas element to convert
+ * @param {function} callback - called when conversion is done. Argument is a Blob
+ * @param {object} [options] - an option object - see toArrayBuffer for details
+ * @static
+ */
+ toBlob: function(canvas, callback, options) {
+ this.toArrayBuffer(canvas, function(file) {
+ callback(new Blob([file], {type: "image/tiff"}));
+ }, options || {});
+ },
+
+ /**
+ * Converts a canvas to TIFF file, returns an ObjectURL (for Blob)
+ * representing the file. The call is asynchronous so a callback
+ * must be provided.
+ *
+ * **Important**: To avoid memory-leakage you must revoke the returned
+ * ObjectURL when no longer needed:
+ *
+ * var _URL = self.URL || self.webkitURL || self;
+ * _URL.revokeObjectURL(url);
+ *
+ * Note that CORS requirement must be fulfilled.
+ *
+ * @param {HTMLCanvasElement} canvas - the canvas element to convert
+ * @param {function} callback - called when conversion is done. Argument is a Blob
+ * @param {object} [options] - an option object - see toArrayBuffer for details
+ * @static
+ */
+ toObjectURL: function(canvas, callback, options) {
+ this.toBlob(canvas, function(blob) {
+ var url = self.URL || self.webkitURL || self;
+ callback(url.createObjectURL(blob))
+ }, options || {});
+ },
+
+ /**
+ * Converts the canvas to a data-URI representing a BMP file. The
+ * call is asynchronous so a callback must be provided.
+ *
+ * Note that CORS requirement must be fulfilled.
+ *
+ * @param {HTMLCanvasElement} canvas - the canvas element to convert
+ * @param {function} callback - called when conversion is done. Argument is an data-URI (string)
+ * @param {object} [options] - an option object - see toArrayBuffer for details
+ * @static
+ */
+ toDataURL: function(canvas, callback, options) {
+
+ var me = this;
+
+ me.toArrayBuffer(canvas, function(file) {
+ var buffer = new Uint8Array(file),
+ blockSize = 1<<20,
+ block = blockSize,
+ bs = "", base64 = "", i = 0, l = buffer.length;
+
+ // This is a necessary step before we can use btoa. We can
+ // replace this later with a direct byte-buffer to Base-64 routine.
+ // Will do for now, impacts only with very large bitmaps (in which
+ // case toBlob should be used).
+ (function prepBase64() {
+ while(i < l && block-- > 0) bs += String.fromCharCode(buffer[i++]);
+
+ if (i < l) {
+ block = blockSize;
+ setTimeout(prepBase64, me._dly);
+ }
+ else {
+ // convert string to Base-64
+ i = 0;
+ l = bs.length;
+ block = 180000; // must be divisible by 3
+
+ (function toBase64() {
+ base64 += btoa(bs.substr(i, block));
+ i += block;
+ (i < l)
+ ? setTimeout(toBase64, me._dly)
+ : callback("data:image/tiff;base64," + base64);
+ })();
+ }
+ })();
+ }, options || {});
+ }
+};
+
+export default CanvasToTIFF;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/clipboard.js b/paintplus/frontend/src/js/libs/clipboard.js
new file mode 100644
index 0000000..c885551
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/clipboard.js
@@ -0,0 +1,152 @@
+import Helper_class from './helpers.js';
+
+/**
+ * image pasting into canvas
+ *
+ * @param {string} canvas_id - canvas id
+ * @param {boolean} autoresize - if canvas will be resized
+ */
+class Clipboard_class {
+
+ constructor(on_paste) {
+ var _self = this;
+
+ this.Helper = new Helper_class();
+
+ this.on_paste = on_paste;
+ this.ctrl_pressed = false;
+ this.command_pressed = false;
+ this.pasteCatcher;
+ this.paste_mode;
+
+ //handlers
+ document.addEventListener('keydown', function (e) {
+ _self.on_keyboard_action(e);
+ }, false); //firefox fix
+ document.addEventListener('keyup', function (e) {
+ _self.on_keyboardup_action(e);
+ }, false); //firefox fix
+ document.addEventListener('paste', function (e) {
+ _self.paste_auto(e);
+ }, false); //official paste handler
+
+ this.init();
+ }
+
+ //constructor - prepare
+ init() {
+ var _self = this;
+
+ //if using auto
+ if (window.Clipboard)
+ return true;
+
+ this.pasteCatcher = document.createElement("div");
+ this.pasteCatcher.setAttribute("id", "paste_ff");
+ this.pasteCatcher.setAttribute("contenteditable", "");
+ this.pasteCatcher.style.cssText = 'opacity:0;position:fixed;top:0px;left:0px;';
+ this.pasteCatcher.style.marginLeft = "-20px";
+ this.pasteCatcher.style.width = "10px";
+ document.body.appendChild(this.pasteCatcher);
+
+ // create an observer instance
+ var observer = new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutation) {
+ if (this.paste_mode == 'auto' || this.ctrl_pressed == false || mutation.type != 'childList')
+ return true;
+
+ //if paste handle failed - capture pasted object manually
+ if (mutation.addedNodes.length == 1) {
+ if (mutation.addedNodes[0].src != undefined) {
+ //image
+ _self.paste_createImage(mutation.addedNodes[0].src);
+ }
+ //register cleanup after some time.
+ setTimeout(function () {
+ this.pasteCatcher.innerHTML = '';
+ }, 20);
+ }
+ });
+ });
+ var target = document.getElementById('paste_ff');
+ var config = {attributes: true, childList: true, characterData: true};
+ observer.observe(target, config);
+ }
+
+ //default paste action
+ paste_auto(e) {
+ if (this.Helper.is_input(e.target))
+ return;
+
+ this.paste_mode = '';
+ if (!window.Clipboard) {
+ this.pasteCatcher.innerHTML = '';
+ }
+ if (e.clipboardData) {
+ var items = e.clipboardData.items;
+ if (items) {
+ this.paste_mode = 'auto';
+ //access data directly
+ for (var i = 0; i < items.length; i++) {
+ if (items[i].type.indexOf("image") !== -1) {
+ //image
+ var blob = items[i].getAsFile();
+ var URLObj = window.URL || window.webkitURL;
+ var source = URLObj.createObjectURL(blob);
+ this.paste_createImage(source);
+ }
+ }
+ e.preventDefault();
+ }
+ else {
+ //wait for DOMSubtreeModified event
+ //https://bugzilla.mozilla.org/show_bug.cgi?id=891247
+ }
+ }
+ }
+
+ //on keyboard press
+ on_keyboard_action(event) {
+ var k = event.keyCode;
+ //ctrl
+ if (k == 17 || event.metaKey || event.ctrlKey) {
+ if (this.ctrl_pressed == false)
+ this.ctrl_pressed = true;
+ }
+ //v
+ if (k == 86) {
+ if (this.Helper.is_input(document.activeElement)) {
+ return false;
+ }
+
+ if (this.ctrl_pressed == true && !window.Clipboard)
+ this.pasteCatcher.focus();
+ }
+ }
+
+ //on kaybord release
+ on_keyboardup_action(event) {
+ //ctrl
+ if (event.ctrlKey == false && this.ctrl_pressed == true) {
+ this.ctrl_pressed = false;
+ }
+ //command
+ else if (event.metaKey == false && this.command_pressed == true) {
+ this.command_pressed = false;
+ this.ctrl_pressed = false;
+ }
+ }
+
+ //draw image
+ paste_createImage(source) {
+ var pastedImage = new Image();
+ var _this = this;
+
+ pastedImage.onload = function () {
+ _this.on_paste(source, pastedImage.width, pastedImage.height);
+ };
+ pastedImage.src = source;
+ }
+}
+
+export default Clipboard_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/color-matrix.js b/paintplus/frontend/src/js/libs/color-matrix.js
new file mode 100644
index 0000000..1d38577
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/color-matrix.js
@@ -0,0 +1,115 @@
+/**
+ * Color Matrix
+ *
+ * A simplification of the color matrix class provided by
+ * EaselJS
+ *
+ * www.createjs.com/docs/easeljs/files/easeljs_filters_ColorFilter.js.html#l41
+ */
+
+class colorMatrix {
+
+ constructor(on_paste) {
+ this.DELTA_INDEX = [
+ 0, 0.01, 0.02, 0.04, 0.05, 0.06, 0.07, 0.08, 0.1, 0.11,
+ 0.12, 0.14, 0.15, 0.16, 0.17, 0.18, 0.20, 0.21, 0.22, 0.24,
+ 0.25, 0.27, 0.28, 0.30, 0.32, 0.34, 0.36, 0.38, 0.40, 0.42,
+ 0.44, 0.46, 0.48, 0.5, 0.53, 0.56, 0.59, 0.62, 0.65, 0.68,
+ 0.71, 0.74, 0.77, 0.80, 0.83, 0.86, 0.89, 0.92, 0.95, 0.98,
+ 1.0, 1.06, 1.12, 1.18, 1.24, 1.30, 1.36, 1.42, 1.48, 1.54,
+ 1.60, 1.66, 1.72, 1.78, 1.84, 1.90, 1.96, 2.0, 2.12, 2.25,
+ 2.37, 2.50, 2.62, 2.75, 2.87, 3.0, 3.2, 3.4, 3.6, 3.8,
+ 4.0, 4.3, 4.7, 4.9, 5.0, 5.5, 6.0, 6.5, 6.8, 7.0,
+ 7.3, 7.5, 7.8, 8.0, 8.4, 8.7, 9.0, 9.4, 9.6, 9.8,
+ 10.0
+ ];
+ }
+
+ multiply (a, b) {
+ var i, j, k, col = [];
+
+ for (i=0;i<5;i++) {
+ for (j=0;j<5;j++) {
+ col[j] = a[j+i*5];
+ }
+ for (j=0;j<5;j++) {
+ var val=0;
+ for (k=0;k<5;k++) {
+ val += b[j+k*5]*col[k];
+ }
+ a[j+i*5] = val;
+ }
+ }
+ }
+
+ colorMatrix (imageData, options) {
+ var brightness = options.brightness || 0;
+ var contrast = options.contrast || 0;
+
+ var matrix = [
+ 1,0,0,0,0,
+ 0,1,0,0,0,
+ 0,0,1,0,0,
+ 0,0,0,1,0,
+ 0,0,0,0,1
+ ];
+
+ // Contrast
+ var x;
+ if (contrast < 0) {
+ x = 127 + contrast / 100 * 127;
+ } else {
+ x = contrast % 1;
+
+ if (x == 0) {
+ x = this.DELTA_INDEX[contrast];
+ } else {
+ x = this.DELTA_INDEX[(contrast<<0)]*(1-x)+this.DELTA_INDEX[(contrast<<0)+1] * x;
+ }
+
+ x = x * 127 + 127;
+ }
+
+ this.multiply (matrix, [
+ x/127,0,0,0,0.5*(127-x),
+ 0,x/127,0,0,0.5*(127-x),
+ 0,0,x/127,0,0.5*(127-x),
+ 0,0,0,1,0,
+ 0,0,0,0,1
+ ]);
+
+ // Brightness
+ this.multiply (matrix,[
+ 1,0,0,0, brightness,
+ 0,1,0,0, brightness,
+ 0,0,1,0, brightness,
+ 0,0,0,1,0,
+ 0,0,0,0,1
+ ])
+
+ // Apply Filter
+ var data = imageData.data;
+ var l = data.length;
+ var r,g,b,a;
+ var m0 = matrix[0], m1 = matrix[1], m2 = matrix[2], m3 = matrix[3], m4 = matrix[4];
+ var m5 = matrix[5], m6 = matrix[6], m7 = matrix[7], m8 = matrix[8], m9 = matrix[9];
+ var m10 = matrix[10], m11 = matrix[11], m12 = matrix[12], m13 = matrix[13], m14 = matrix[14];
+ var m15 = matrix[15], m16 = matrix[16], m17 = matrix[17], m18 = matrix[18], m19 = matrix[19];
+
+ for (var i=0; i 256) {
+ colorCount = 10;
+ }
+ if (typeof quality === 'undefined' || quality < 1) {
+ quality = 10;
+ }
+
+ // Create custom CanvasImage object
+ var image = new CanvasImage(sourceImage);
+ var imageData = image.getImageData();
+ var pixels = imageData.data;
+ var pixelCount = image.getPixelCount();
+
+ // Store the RGB values in an array format suitable for quantize function
+ var pixelArray = [];
+ for (var i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) {
+ offset = i * 4;
+ r = pixels[offset + 0];
+ g = pixels[offset + 1];
+ b = pixels[offset + 2];
+ a = pixels[offset + 3];
+ // If pixel is mostly opaque and not white
+ if (a >= 125) {
+ if (!(r > 250 && g > 250 && b > 250)) {
+ pixelArray.push([r, g, b]);
+ }
+ }
+ }
+
+ // Send array to quantize function which clusters values
+ // using median cut algorithm
+ var cmap = MMCQ.quantize(pixelArray, colorCount);
+ var palette = cmap? cmap.palette() : null;
+
+ // Clean up
+ image.removeCanvas();
+
+ return palette;
+};
+
+ColorThief.prototype.getColorFromUrl = function(imageUrl, callback, quality) {
+ sourceImage = document.createElement("img");
+ var thief = this;
+ sourceImage.addEventListener('load' , function(){
+ var palette = thief.getPalette(sourceImage, 5, quality);
+ var dominantColor = palette[0];
+ callback(dominantColor, imageUrl);
+ });
+ sourceImage.src = imageUrl
+};
+
+
+ColorThief.prototype.getImageData = function(imageUrl, callback) {
+ xhr = new XMLHttpRequest();
+ xhr.open('GET', imageUrl, true);
+ xhr.responseType = 'arraybuffer'
+ xhr.onload = function(e) {
+ if (this.status == 200) {
+ uInt8Array = new Uint8Array(this.response)
+ i = uInt8Array.length
+ binaryString = new Array(i);
+ for (var i = 0; i < uInt8Array.length; i++){
+ binaryString[i] = String.fromCharCode(uInt8Array[i])
+ }
+ data = binaryString.join('')
+ base64 = window.btoa(data)
+ callback ("data:image/png;base64,"+base64)
+ }
+ }
+ xhr.send();
+};
+
+ColorThief.prototype.getColorAsync = function(imageUrl, callback, quality) {
+ var thief = this;
+ this.getImageData(imageUrl, function(imageData){
+ sourceImage = document.createElement("img");
+ sourceImage.addEventListener('load' , function(){
+ var palette = thief.getPalette(sourceImage, 5, quality);
+ var dominantColor = palette[0];
+ callback(dominantColor, this);
+ });
+ sourceImage.src = imageData;
+ });
+};
+
+
+
+/*!
+ * quantize.js Copyright 2008 Nick Rabinowitz.
+ * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
+ * @license
+ */
+
+// fill out a couple protovis dependencies
+/*!
+ * Block below copied from Protovis: http://mbostock.github.com/protovis/
+ * Copyright 2010 Stanford Visualization Group
+ * Licensed under the BSD License: http://www.opensource.org/licenses/bsd-license.php
+ * @license
+ */
+if (!pv) {
+ var pv = {
+ map: function(array, f) {
+ var o = {};
+ return f ? array.map(function(d, i) { o.index = i; return f.call(o, d); }) : array.slice();
+ },
+ naturalOrder: function(a, b) {
+ return (a < b) ? -1 : ((a > b) ? 1 : 0);
+ },
+ sum: function(array, f) {
+ var o = {};
+ return array.reduce(f ? function(p, d, i) { o.index = i; return p + f.call(o, d); } : function(p, d) { return p + d; }, 0);
+ },
+ max: function(array, f) {
+ return Math.max.apply(null, f ? pv.map(array, f) : array);
+ }
+ };
+}
+
+
+
+/**
+ * Basic Javascript port of the MMCQ (modified median cut quantization)
+ * algorithm from the Leptonica library (http://www.leptonica.com/).
+ * Returns a color map you can use to map original pixels to the reduced
+ * palette. Still a work in progress.
+ *
+ * @author Nick Rabinowitz
+ * @example
+
+// array of pixels as [R,G,B] arrays
+var myPixels = [[190,197,190], [202,204,200], [207,214,210], [211,214,211], [205,207,207]
+ // etc
+ ];
+var maxColors = 4;
+
+var cmap = MMCQ.quantize(myPixels, maxColors);
+var newPalette = cmap.palette();
+var newPixels = myPixels.map(function(p) {
+ return cmap.map(p);
+});
+
+ */
+var MMCQ = (function() {
+ // private constants
+ var sigbits = 5,
+ rshift = 8 - sigbits,
+ maxIterations = 1000,
+ fractByPopulations = 0.75;
+
+ // get reduced-space color index for a pixel
+ function getColorIndex(r, g, b) {
+ return (r << (2 * sigbits)) + (g << sigbits) + b;
+ }
+
+ // Simple priority queue
+ function PQueue(comparator) {
+ var contents = [],
+ sorted = false;
+
+ function sort() {
+ contents.sort(comparator);
+ sorted = true;
+ }
+
+ return {
+ push: function(o) {
+ contents.push(o);
+ sorted = false;
+ },
+ peek: function(index) {
+ if (!sorted) sort();
+ if (index===undefined) index = contents.length - 1;
+ return contents[index];
+ },
+ pop: function() {
+ if (!sorted) sort();
+ return contents.pop();
+ },
+ size: function() {
+ return contents.length;
+ },
+ map: function(f) {
+ return contents.map(f);
+ },
+ debug: function() {
+ if (!sorted) sort();
+ return contents;
+ }
+ };
+ }
+
+ // 3d color space box
+ function VBox(r1, r2, g1, g2, b1, b2, histo) {
+ var vbox = this;
+ vbox.r1 = r1;
+ vbox.r2 = r2;
+ vbox.g1 = g1;
+ vbox.g2 = g2;
+ vbox.b1 = b1;
+ vbox.b2 = b2;
+ vbox.histo = histo;
+ }
+ VBox.prototype = {
+ volume: function(force) {
+ var vbox = this;
+ if (!vbox._volume || force) {
+ vbox._volume = ((vbox.r2 - vbox.r1 + 1) * (vbox.g2 - vbox.g1 + 1) * (vbox.b2 - vbox.b1 + 1));
+ }
+ return vbox._volume;
+ },
+ count: function(force) {
+ var vbox = this,
+ histo = vbox.histo;
+ if (!vbox._count_set || force) {
+ var npix = 0,
+ index, i, j, k;
+ for (i = vbox.r1; i <= vbox.r2; i++) {
+ for (j = vbox.g1; j <= vbox.g2; j++) {
+ for (k = vbox.b1; k <= vbox.b2; k++) {
+ index = getColorIndex(i,j,k);
+ npix += (histo[index] || 0);
+ }
+ }
+ }
+ vbox._count = npix;
+ vbox._count_set = true;
+ }
+ return vbox._count;
+ },
+ copy: function() {
+ var vbox = this;
+ return new VBox(vbox.r1, vbox.r2, vbox.g1, vbox.g2, vbox.b1, vbox.b2, vbox.histo);
+ },
+ avg: function(force) {
+ var vbox = this,
+ histo = vbox.histo;
+ if (!vbox._avg || force) {
+ var ntot = 0,
+ mult = 1 << (8 - sigbits),
+ rsum = 0,
+ gsum = 0,
+ bsum = 0,
+ hval,
+ i, j, k, histoindex;
+ for (i = vbox.r1; i <= vbox.r2; i++) {
+ for (j = vbox.g1; j <= vbox.g2; j++) {
+ for (k = vbox.b1; k <= vbox.b2; k++) {
+ histoindex = getColorIndex(i,j,k);
+ hval = histo[histoindex] || 0;
+ ntot += hval;
+ rsum += (hval * (i + 0.5) * mult);
+ gsum += (hval * (j + 0.5) * mult);
+ bsum += (hval * (k + 0.5) * mult);
+ }
+ }
+ }
+ if (ntot) {
+ vbox._avg = [~~(rsum/ntot), ~~(gsum/ntot), ~~(bsum/ntot)];
+ } else {
+ vbox._avg = [
+ ~~(mult * (vbox.r1 + vbox.r2 + 1) / 2),
+ ~~(mult * (vbox.g1 + vbox.g2 + 1) / 2),
+ ~~(mult * (vbox.b1 + vbox.b2 + 1) / 2)
+ ];
+ }
+ }
+ return vbox._avg;
+ },
+ contains: function(pixel) {
+ var vbox = this,
+ rval = pixel[0] >> rshift;
+ gval = pixel[1] >> rshift;
+ bval = pixel[2] >> rshift;
+ return (rval >= vbox.r1 && rval <= vbox.r2 &&
+ gval >= vbox.g1 && gval <= vbox.g2 &&
+ bval >= vbox.b1 && bval <= vbox.b2);
+ }
+ };
+
+ // Color map
+ function CMap() {
+ this.vboxes = new PQueue(function(a,b) {
+ return pv.naturalOrder(
+ a.vbox.count()*a.vbox.volume(),
+ b.vbox.count()*b.vbox.volume()
+ );
+ });
+ }
+ CMap.prototype = {
+ push: function(vbox) {
+ this.vboxes.push({
+ vbox: vbox,
+ color: vbox.avg()
+ });
+ },
+ palette: function() {
+ return this.vboxes.map(function(vb) { return vb.color; });
+ },
+ size: function() {
+ return this.vboxes.size();
+ },
+ map: function(color) {
+ var vboxes = this.vboxes;
+ for (var i=0; i 251
+ var idx = vboxes.length-1,
+ highest = vboxes[idx].color;
+ if (highest[0] > 251 && highest[1] > 251 && highest[2] > 251)
+ vboxes[idx].color = [255,255,255];
+ }
+ };
+
+ // histo (1-d array, giving the number of pixels in
+ // each quantized region of color space), or null on error
+ function getHisto(pixels) {
+ var histosize = 1 << (3 * sigbits),
+ histo = new Array(histosize),
+ index, rval, gval, bval;
+ pixels.forEach(function(pixel) {
+ rval = pixel[0] >> rshift;
+ gval = pixel[1] >> rshift;
+ bval = pixel[2] >> rshift;
+ index = getColorIndex(rval, gval, bval);
+ histo[index] = (histo[index] || 0) + 1;
+ });
+ return histo;
+ }
+
+ function vboxFromPixels(pixels, histo) {
+ var rmin=1000000, rmax=0,
+ gmin=1000000, gmax=0,
+ bmin=1000000, bmax=0,
+ rval, gval, bval;
+ // find min/max
+ pixels.forEach(function(pixel) {
+ rval = pixel[0] >> rshift;
+ gval = pixel[1] >> rshift;
+ bval = pixel[2] >> rshift;
+ if (rval < rmin) rmin = rval;
+ else if (rval > rmax) rmax = rval;
+ if (gval < gmin) gmin = gval;
+ else if (gval > gmax) gmax = gval;
+ if (bval < bmin) bmin = bval;
+ else if (bval > bmax) bmax = bval;
+ });
+ return new VBox(rmin, rmax, gmin, gmax, bmin, bmax, histo);
+ }
+
+ function medianCutApply(histo, vbox) {
+ if (!vbox.count()) return;
+
+ var rw = vbox.r2 - vbox.r1 + 1,
+ gw = vbox.g2 - vbox.g1 + 1,
+ bw = vbox.b2 - vbox.b1 + 1,
+ maxw = pv.max([rw, gw, bw]);
+ // only one pixel, no split
+ if (vbox.count() == 1) {
+ return [vbox.copy()];
+ }
+ /* Find the partial sum arrays along the selected axis. */
+ var total = 0,
+ partialsum = [],
+ lookaheadsum = [],
+ i, j, k, sum, index;
+ if (maxw == rw) {
+ for (i = vbox.r1; i <= vbox.r2; i++) {
+ sum = 0;
+ for (j = vbox.g1; j <= vbox.g2; j++) {
+ for (k = vbox.b1; k <= vbox.b2; k++) {
+ index = getColorIndex(i,j,k);
+ sum += (histo[index] || 0);
+ }
+ }
+ total += sum;
+ partialsum[i] = total;
+ }
+ }
+ else if (maxw == gw) {
+ for (i = vbox.g1; i <= vbox.g2; i++) {
+ sum = 0;
+ for (j = vbox.r1; j <= vbox.r2; j++) {
+ for (k = vbox.b1; k <= vbox.b2; k++) {
+ index = getColorIndex(j,i,k);
+ sum += (histo[index] || 0);
+ }
+ }
+ total += sum;
+ partialsum[i] = total;
+ }
+ }
+ else { /* maxw == bw */
+ for (i = vbox.b1; i <= vbox.b2; i++) {
+ sum = 0;
+ for (j = vbox.r1; j <= vbox.r2; j++) {
+ for (k = vbox.g1; k <= vbox.g2; k++) {
+ index = getColorIndex(j,k,i);
+ sum += (histo[index] || 0);
+ }
+ }
+ total += sum;
+ partialsum[i] = total;
+ }
+ }
+ partialsum.forEach(function(d,i) {
+ lookaheadsum[i] = total-d;
+ });
+ function doCut(color) {
+ var dim1 = color + '1',
+ dim2 = color + '2',
+ left, right, vbox1, vbox2, d2, count2=0;
+ for (i = vbox[dim1]; i <= vbox[dim2]; i++) {
+ if (partialsum[i] > total / 2) {
+ vbox1 = vbox.copy();
+ vbox2 = vbox.copy();
+ left = i - vbox[dim1];
+ right = vbox[dim2] - i;
+ if (left <= right)
+ d2 = Math.min(vbox[dim2] - 1, ~~(i + right / 2));
+ else d2 = Math.max(vbox[dim1], ~~(i - 1 - left / 2));
+ // avoid 0-count boxes
+ while (!partialsum[d2]) d2++;
+ count2 = lookaheadsum[d2];
+ while (!count2 && partialsum[d2-1]) count2 = lookaheadsum[--d2];
+ // set dimensions
+ vbox1[dim2] = d2;
+ vbox2[dim1] = vbox1[dim2] + 1;
+ return [vbox1, vbox2];
+ }
+ }
+
+ }
+ // determine the cut planes
+ return maxw == rw ? doCut('r') :
+ maxw == gw ? doCut('g') :
+ doCut('b');
+ }
+
+ function quantize(pixels, maxcolors) {
+ // short-circuit
+ if (!pixels.length || maxcolors < 2 || maxcolors > 256) {
+ return false;
+ }
+
+ // XXX: check color content and convert to grayscale if insufficient
+
+ var histo = getHisto(pixels),
+ histosize = 1 << (3 * sigbits);
+
+ // check that we aren't below maxcolors already
+ var nColors = 0;
+ histo.forEach(function() { nColors++; });
+ if (nColors <= maxcolors) {
+ // XXX: generate the new colors from the histo and return
+ }
+
+ // get the beginning vbox from the colors
+ var vbox = vboxFromPixels(pixels, histo),
+ pq = new PQueue(function(a,b) { return pv.naturalOrder(a.count(), b.count()); });
+ pq.push(vbox);
+
+ // inner function to do the iteration
+ function iter(lh, target) {
+ var ncolors = 1,
+ niters = 0,
+ vbox;
+ while (niters < maxIterations) {
+ vbox = lh.pop();
+ if (!vbox.count()) { /* just put it back */
+ lh.push(vbox);
+ niters++;
+ continue;
+ }
+ // do the cut
+ var vboxes = medianCutApply(histo, vbox),
+ vbox1 = vboxes[0],
+ vbox2 = vboxes[1];
+
+ if (!vbox1) {
+ return;
+ }
+ lh.push(vbox1);
+ if (vbox2) { /* vbox2 can be null */
+ lh.push(vbox2);
+ ncolors++;
+ }
+ if (ncolors >= target) return;
+ if (niters++ > maxIterations) {
+ return;
+ }
+ }
+ }
+
+ // first set of colors, sorted by population
+ iter(pq, fractByPopulations * maxcolors);
+
+ // Re-sort by the product of pixel occupancy times the size in color space.
+ var pq2 = new PQueue(function(a,b) {
+ return pv.naturalOrder(a.count()*a.volume(), b.count()*b.volume());
+ });
+ while (pq.size()) {
+ pq2.push(pq.pop());
+ }
+
+ // next set - generate the median cuts using the (npix * vol) sorting.
+ iter(pq2, maxcolors - pq2.size());
+
+ // calculate the actual colors
+ var cmap = new CMap();
+ while (pq2.size()) {
+ cmap.push(pq2.pop());
+ }
+
+ return cmap;
+ }
+
+ return {
+ quantize: quantize
+ };
+})();
+export default ColorThief;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/color_utils.js b/paintplus/frontend/src/js/libs/color_utils.js
new file mode 100644
index 0000000..40ab7ba
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/color_utils.js
@@ -0,0 +1,106 @@
+/**
+ * Color conversion and Pantone matching utilities.
+ *
+ * hexToRgb(hex) → { r, g, b }
+ * rgbToHsl(r,g,b) → { h, s, l } (h=0-360, s/l=0-100)
+ * rgbToLab(r,g,b) → { L, a, b } (CIE LAB D65)
+ * deltaE(lab1, lab2) → number (CIE76, lower = more similar)
+ * nearestPantone(hex) → { name, hex, deltaE }
+ */
+
+import PANTONE_COLORS from './../data/pantone_colors.js';
+
+// Pre-convert Pantone database to LAB once at module load
+const _pantonelab = PANTONE_COLORS.map(([name, hex]) => {
+ const { r, g, b } = hexToRgb(hex);
+ return { name, hex, lab: rgbToLab(r, g, b) };
+});
+
+export function hexToRgb(hex) {
+ const h = hex.replace('#', '');
+ const n = parseInt(h.length === 3
+ ? h.split('').map(c => c + c).join('')
+ : h, 16);
+ return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
+}
+
+export function rgbToHex(r, g, b) {
+ return '#' + [r, g, b].map(v => v.toString(16).padStart(2, '0')).join('');
+}
+
+export function rgbToHsl(r, g, b) {
+ r /= 255; g /= 255; b /= 255;
+ const max = Math.max(r, g, b), min = Math.min(r, g, b);
+ let h, s, l = (max + min) / 2;
+ if (max === min) {
+ h = s = 0;
+ } else {
+ const d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+ case g: h = ((b - r) / d + 2) / 6; break;
+ case b: h = ((r - g) / d + 4) / 6; break;
+ }
+ }
+ return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+
+export function rgbToLab(r, g, b) {
+ // sRGB → linear
+ let R = r / 255, G = g / 255, B = b / 255;
+ R = R > 0.04045 ? Math.pow((R + 0.055) / 1.055, 2.4) : R / 12.92;
+ G = G > 0.04045 ? Math.pow((G + 0.055) / 1.055, 2.4) : G / 12.92;
+ B = B > 0.04045 ? Math.pow((B + 0.055) / 1.055, 2.4) : B / 12.92;
+
+ // linear RGB → XYZ (D65)
+ let X = R * 0.4124564 + G * 0.3575761 + B * 0.1804375;
+ let Y = R * 0.2126729 + G * 0.7151522 + B * 0.0721750;
+ let Z = R * 0.0193339 + G * 0.1191920 + B * 0.9503041;
+
+ // XYZ → LAB (D65 white = 0.95047, 1.0, 1.08883)
+ const f = v => v > 0.008856 ? Math.cbrt(v) : 7.787 * v + 16 / 116;
+ X = f(X / 0.95047); Y = f(Y / 1.0); Z = f(Z / 1.08883);
+
+ return { L: 116 * Y - 16, a: 500 * (X - Y), b: 200 * (Y - Z) };
+}
+
+export function deltaE(lab1, lab2) {
+ const dL = lab1.L - lab2.L;
+ const da = lab1.a - lab2.a;
+ const db = lab1.b - lab2.b;
+ return Math.sqrt(dL * dL + da * da + db * db);
+}
+
+/**
+ * Find the closest Pantone color to a hex value.
+ * Returns { name, hex, deltaE, quality }
+ * quality: 'excellent' (<2), 'good' (2-5), 'fair' (5-10), 'poor' (>10)
+ */
+export function nearestPantone(hex) {
+ const { r, g, b } = hexToRgb(hex);
+ const lab = rgbToLab(r, g, b);
+
+ let best = null, bestDE = Infinity;
+ for (const entry of _pantonelab) {
+ const de = deltaE(lab, entry.lab);
+ if (de < bestDE) { bestDE = de; best = entry; }
+ }
+
+ const de = Math.round(bestDE * 10) / 10;
+ const quality = de < 2 ? 'excellent' : de < 5 ? 'good' : de < 10 ? 'fair' : 'poor';
+ return { name: best.name, hex: best.hex, deltaE: de, quality };
+}
+
+/**
+ * Quality label + color for ΔE badge.
+ */
+export function deltaEBadge(quality) {
+ const map = {
+ excellent: { label: 'Excellent match', color: '#4ade80' },
+ good: { label: 'Good match', color: '#86efac' },
+ fair: { label: 'Fair match', color: '#fbbf24' },
+ poor: { label: 'Poor match — color may shift in print', color: '#f87171' },
+ };
+ return map[quality] || map.poor;
+}
diff --git a/paintplus/frontend/src/js/libs/gifjs/gif.js b/paintplus/frontend/src/js/libs/gifjs/gif.js
new file mode 100644
index 0000000..f17a5c2
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/gifjs/gif.js
@@ -0,0 +1,2 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.GIF=e():t.GIF=e()}(this,function(){return function(t){function e(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){var n,r,s,o=function(t,e){function i(){this.constructor=t}for(var n in e)a.call(e,n)&&(t[n]=e[n]);return i.prototype=e.prototype,t.prototype=new i,t.__super__=e.prototype,t},a={}.hasOwnProperty,h=[].indexOf||function(t){for(var e=0,i=this.length;e0&&i.data&&(this.groups.has(i.data)?this.groups.get(i.data).push(r):this.groups.set(i.data,[r])),this.frames.push(i)},e.prototype.render=function(){var t,e,i,n;if(this.running)throw new Error("Already running");if(null==this.options.width||null==this.options.height)throw new Error("Width and height must be set prior to rendering");if(this.running=!0,this.nextFrame=0,this.finishedFrames=0,this.imageParts=function(){var e,i,n;for(n=[],t=e=0,i=this.frames.length;0<=i?ei;t=0<=i?++e:--e)n.push(null);return n}.call(this),i=this.spawnWorkers(),this.options.globalPalette===!0)this.renderNextFrame();else for(t=e=0,n=i;0<=n?en;t=0<=n?++e:--e)this.renderNextFrame();return this.emit("start"),this.emit("progress",0)},e.prototype.abort=function(){for(var t;;){if(t=this.activeWorkers.shift(),null==t)break;this.log("killing active worker"),t.terminate()}return this.running=!1,this.emit("abort")},e.prototype.spawnWorkers=function(){var t,e,i;return t=Math.min(this.options.workers,this.frames.length),function(){i=[];for(var n=e=this.freeWorkers.length;e<=t?nt;e<=t?n++:n--)i.push(n);return i}.apply(this).forEach(function(t){return function(e){var i;return t.log("spawning worker "+e),i=new Worker(t.options.workerScript),i.onmessage=function(e){return t.activeWorkers.splice(t.activeWorkers.indexOf(i),1),t.freeWorkers.push(i),t.frameFinished(e.data,!1)},t.freeWorkers.push(i)}}(this)),t},e.prototype.frameFinished=function(t,e){var i,n,r,s,o;if(this.finishedFrames++,e?(n=this.frames.indexOf(t),r=this.groups.get(t.data)[0],this.log("frame "+(n+1)+" is duplicate of "+r+" - "+this.activeWorkers.length+" active"),this.imageParts[n]={indexOfFirstInGroup:r}):(this.log("frame "+(t.index+1)+" finished - "+this.activeWorkers.length+" active"),this.emit("progress",this.finishedFrames/this.frames.length),this.imageParts[t.index]=t),this.options.globalPalette===!0&&!e&&(this.options.globalPalette=t.globalPalette,this.log("global palette analyzed"),this.frames.length>2))for(i=s=1,o=this.freeWorkers.length;1<=o?so;i=1<=o?++s:--s)this.renderNextFrame();return h.call(this.imageParts,null)>=0?this.renderNextFrame():this.finishRendering()},e.prototype.finishRendering=function(){var t,e,i,n,r,s,o,a,h,l,f,p,u,d,c,g,v,m,y,_;for(v=this.imageParts,r=s=0,l=v.length;s=this.frames.length))return t=this.frames[this.nextFrame++],e=this.frames.indexOf(t),e>0&&this.groups.has(t.data)&&this.groups.get(t.data)[0]!==e?void setTimeout(function(e){return function(){return e.frameFinished(t,!0)}}(this),0):(n=this.freeWorkers.shift(),i=this.getTask(t),this.log("starting frame "+(i.index+1)+" of "+this.frames.length),this.activeWorkers.push(n),n.postMessage(i))},e.prototype.getContextData=function(t){return t.getImageData(0,0,this.options.width,this.options.height).data},e.prototype.getImageData=function(t){var e;return null==this._canvas&&(this._canvas=document.createElement("canvas"),this._canvas.width=this.options.width,this._canvas.height=this.options.height),e=this._canvas.getContext("2d"),e.setFill=this.options.background,e.fillRect(0,0,this.options.width,this.options.height),e.drawImage(t,0,0),this.getContextData(e)},e.prototype.getTask=function(t){var e,i;if(e=this.frames.indexOf(t),i={index:e,last:e===this.frames.length-1,delay:t.delay,transparent:t.transparent,width:this.options.width,height:this.options.height,quality:this.options.quality,dither:this.options.dither,globalPalette:this.options.globalPalette,repeat:this.options.repeat,canTransfer:!0},null!=t.data)i.data=t.data;else if(null!=t.context)i.data=this.getContextData(t.context);else{if(null==t.image)throw new Error("Invalid frame");i.data=this.getImageData(t.image)}return i},e.prototype.log=function(t){if(this.options.debug)return console.log(t)},e}(n),t.exports=r},function(t,e){function i(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function n(t){return"function"==typeof t}function r(t){return"number"==typeof t}function s(t){return"object"==typeof t&&null!==t}function o(t){return void 0===t}t.exports=i,i.EventEmitter=i,i.prototype._events=void 0,i.prototype._maxListeners=void 0,i.defaultMaxListeners=10,i.prototype.setMaxListeners=function(t){if(!r(t)||t<0||isNaN(t))throw TypeError("n must be a positive number");return this._maxListeners=t,this},i.prototype.emit=function(t){var e,i,r,a,h,l;if(this._events||(this._events={}),"error"===t&&(!this._events.error||s(this._events.error)&&!this._events.error.length)){if(e=arguments[1],e instanceof Error)throw e;var f=new Error('Uncaught, unspecified "error" event. ('+e+")");throw f.context=e,f}if(i=this._events[t],o(i))return!1;if(n(i))switch(arguments.length){case 1:i.call(this);break;case 2:i.call(this,arguments[1]);break;case 3:i.call(this,arguments[1],arguments[2]);break;default:a=Array.prototype.slice.call(arguments,1),i.apply(this,a)}else if(s(i))for(a=Array.prototype.slice.call(arguments,1),l=i.slice(),r=l.length,h=0;h0&&this._events[t].length>r&&(this._events[t].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[t].length),"function"==typeof console.trace&&console.trace())),this},i.prototype.on=i.prototype.addListener,i.prototype.once=function(t,e){function i(){this.removeListener(t,i),r||(r=!0,e.apply(this,arguments))}if(!n(e))throw TypeError("listener must be a function");var r=!1;return i.listener=e,this.on(t,i),this},i.prototype.removeListener=function(t,e){var i,r,o,a;if(!n(e))throw TypeError("listener must be a function");if(!this._events||!this._events[t])return this;if(i=this._events[t],o=i.length,r=-1,i===e||n(i.listener)&&i.listener===e)delete this._events[t],this._events.removeListener&&this.emit("removeListener",t,e);else if(s(i)){for(a=o;a-- >0;)if(i[a]===e||i[a].listener&&i[a].listener===e){r=a;break}if(r<0)return this;1===i.length?(i.length=0,delete this._events[t]):i.splice(r,1),this._events.removeListener&&this.emit("removeListener",t,e)}return this},i.prototype.removeAllListeners=function(t){var e,i;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[t]&&delete this._events[t],this;if(0===arguments.length){for(e in this._events)"removeListener"!==e&&this.removeAllListeners(e);return this.removeAllListeners("removeListener"),this._events={},this}if(i=this._events[t],n(i))this.removeListener(t,i);else if(i)for(;i.length;)this.removeListener(t,i[i.length-1]);return delete this._events[t],this},i.prototype.listeners=function(t){var e;return e=this._events&&this._events[t]?n(this._events[t])?[this._events[t]]:this._events[t].slice():[]},i.prototype.listenerCount=function(t){if(this._events){var e=this._events[t];if(n(e))return 1;if(e)return e.length}return 0},i.listenerCount=function(t,e){return t.listenerCount(e)}},function(t,e){var i,n,r,s,o;o=navigator.userAgent.toLowerCase(),s=navigator.platform.toLowerCase(),i=o.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,"unknown",0],r="ie"===i[1]&&document.documentMode,n={name:"version"===i[1]?i[3]:i[1],version:r||parseFloat("opera"===i[1]&&i[4]?i[4]:i[2]),platform:{name:o.match(/ip(?:ad|od|hone)/)?"ios":(o.match(/(?:webos|android)/)||s.match(/mac|win|linux/)||["other"])[0]}},n[n.name]=!0,n[n.name+parseInt(n.version,10)]=!0,n.platform[n.platform.name]=!0,t.exports=n}])});
+//# sourceMappingURL=gif.js.map
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/gifjs/gif.worker.js b/paintplus/frontend/src/js/libs/gifjs/gif.worker.js
new file mode 100644
index 0000000..28b1f18
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/gifjs/gif.worker.js
@@ -0,0 +1,2 @@
+!function(t){function e(r){if(i[r])return i[r].exports;var s=i[r]={exports:{},id:r,loaded:!1};return t[r].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){var r,s;r=i(1),s=function(t){var e,i,s,o;return e=new r(t.width,t.height),0===t.index?e.writeHeader():e.firstFrame=!1,e.setTransparent(t.transparent),e.setRepeat(t.repeat),e.setDelay(t.delay),e.setQuality(t.quality),e.setDither(t.dither),e.setGlobalPalette(t.globalPalette),e.addFrame(t.data),t.last&&e.finish(),t.globalPalette===!0&&(t.globalPalette=e.getGlobalPalette()),s=e.stream(),t.data=s.pages,t.cursor=s.cursor,t.pageSize=s.constructor.pageSize,t.canTransfer?(o=function(){var e,r,s,o;for(s=t.data,o=[],e=0,r=s.length;e=r.pageSize&&this.newPage(),this.pages[this.page][this.cursor++]=t},r.prototype.writeUTFBytes=function(t){for(var e=t.length,i=0;i=0&&(this.dispose=t)},s.prototype.setRepeat=function(t){this.repeat=t},s.prototype.setTransparent=function(t){this.transparent=t},s.prototype.addFrame=function(t){this.image=t,this.colorTab=this.globalPalette&&this.globalPalette.slice?this.globalPalette:null,this.getImagePixels(),this.analyzePixels(),this.globalPalette===!0&&(this.globalPalette=this.colorTab),this.firstFrame&&(this.writeLSD(),this.writePalette(),this.repeat>=0&&this.writeNetscapeExt()),this.writeGraphicCtrlExt(),this.writeImageDesc(),this.firstFrame||this.globalPalette||this.writePalette(),this.writePixels(),this.firstFrame=!1},s.prototype.finish=function(){this.out.writeByte(59)},s.prototype.setQuality=function(t){t<1&&(t=1),this.sample=t},s.prototype.setDither=function(t){t===!0&&(t="FloydSteinberg"),this.dither=t},s.prototype.setGlobalPalette=function(t){this.globalPalette=t},s.prototype.getGlobalPalette=function(){return this.globalPalette&&this.globalPalette.slice&&this.globalPalette.slice(0)||this.globalPalette},s.prototype.writeHeader=function(){this.out.writeUTFBytes("GIF89a")},s.prototype.analyzePixels=function(){this.colorTab||(this.neuQuant=new o(this.pixels,this.sample),this.neuQuant.buildColormap(),this.colorTab=this.neuQuant.getColormap()),this.dither?this.ditherPixels(this.dither.replace("-serpentine",""),null!==this.dither.match(/-serpentine/)):this.indexPixels(),this.pixels=null,this.colorDepth=8,this.palSize=7,null!==this.transparent&&(this.transIndex=this.findClosest(this.transparent,!0))},s.prototype.indexPixels=function(){var t=this.pixels.length/3;this.indexedPixels=new Uint8Array(t);for(var e=0,i=0;i=0&&S+u=0&&T+l>16,(65280&t)>>8,255&t,e)},s.prototype.findClosestRGB=function(t,e,i,r){if(null===this.colorTab)return-1;if(this.neuQuant&&!r)return this.neuQuant.lookupRGB(t,e,i);for(var s=0,o=16777216,n=this.colorTab.length,a=0,h=0;a=0&&(e=7&dispose),e<<=2,this.out.writeByte(0|e|0|t),this.writeShort(this.delay),this.out.writeByte(this.transIndex),this.out.writeByte(0)},s.prototype.writeImageDesc=function(){this.out.writeByte(44),this.writeShort(0),this.writeShort(0),this.writeShort(this.width),this.writeShort(this.height),this.firstFrame||this.globalPalette?this.out.writeByte(0):this.out.writeByte(128|this.palSize)},s.prototype.writeLSD=function(){this.writeShort(this.width),this.writeShort(this.height),this.out.writeByte(240|this.palSize),this.out.writeByte(0),this.out.writeByte(0)},s.prototype.writeNetscapeExt=function(){this.out.writeByte(33),this.out.writeByte(255),this.out.writeByte(11),this.out.writeUTFBytes("NETSCAPE2.0"),this.out.writeByte(3),this.out.writeByte(1),this.writeShort(this.repeat),this.out.writeByte(0)},s.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);for(var t=768-this.colorTab.length,e=0;e>8&255)},s.prototype.writePixels=function(){var t=new n(this.width,this.height,this.indexedPixels,this.colorDepth);t.encode(this.out)},s.prototype.stream=function(){return this.out},t.exports=s},function(t,e){function i(t,e){function i(){z=[],E=new Int32Array(256),R=new Int32Array(s),U=new Int32Array(s),Q=new Int32Array(s>>3);var t,e;for(t=0;t>=n,z[t][1]>>=n,z[t][2]>>=n,z[t][3]=t}function w(t,e,i,r,s){z[e][0]-=t*(z[e][0]-i)/b,z[e][1]-=t*(z[e][1]-r)/b,z[e][2]-=t*(z[e][2]-s)/b}function x(t,e,i,r,o){for(var n,a,h=Math.abs(e-t),l=Math.min(e+t,s),u=e+1,p=e-1,f=1;uh;)a=Q[f++],uh&&(n=z[p--],n[0]-=a*(n[0]-i)/B,n[1]-=a*(n[1]-r)/B,n[2]-=a*(n[2]-o)/B)}function v(t,e,i){t=0|t,e=0|e,i=0|i;var r,o,h,c,y,w=~(1<<31),d=w,g=-1,x=g;for(r=0;r>a-n),c>u,U[r]-=y,R[r]+=y<>1,e=h+1;e>1,e=h+1;e<256;e++)E[e]=o}function C(t,e,i){t=0|t,e=0|e,i=0|i;for(var r,o,n,a=1e3,h=-1,l=0|E[e],u=l-1;l=0;)l=a?l=s:(l++,n<0&&(n=-n),r=(0|o[0])-t,r<0&&(r=-r),n+=r,n=0&&(o=z[u],n=e-(0|o[1]),n>=a?u=-1:(u--,n<0&&(n=-n),r=(0|o[0])-t,r<0&&(r=-r),n+=r,n>y;for(p<=1&&(p=0),i=0;i=s&&(I-=s),i++,0===h&&(h=1),i%h===0)for(l-=l/o,u-=u/g,p=u>>y,p<=1&&(p=0),C=0;C>u,f=h<>3,y=6,w=1<=254&&c(e)}function l(t){u(o),A=P+2,C=!0,d(P,t)}function u(t){for(var e=0;e=0){p=f-a,0===a&&(p=1);do if((a-=p)<0&&(a+=f),T[a]===i){h=M[a];continue t}while(T[a]>=0)}d(h,e),h=n,A<1<0&&(t.writeByte(x),t.writeBytes(S,0,x),x=0)}function y(t){return(1<0?g|=t<=8;)h(255&g,e),g>>=8,F-=8;if((A>b||C)&&(C?(b=y(n_bits=v),C=!1):(++n_bits,b=n_bits==s?1<0;)h(255&g,e),g>>=8,F-=8;c(e)}}var g,x,b,v,P,m,B=Math.max(2,a),S=new Uint8Array(256),T=new Int32Array(o),M=new Int32Array(o),F=0,A=0,C=!1;this.encode=f}var r=-1,s=12,o=5003,n=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];t.exports=i}]);
+//# sourceMappingURL=gif.worker.js.map
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/glfx.js b/paintplus/frontend/src/js/libs/glfx.js
new file mode 100644
index 0000000..61022d8
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/glfx.js
@@ -0,0 +1,61 @@
+/*
+ * glfx.js
+ * http://evanw.github.com/glfx.js/
+ *
+ * Copyright 2011 Evan Wallace
+ * Released under the MIT license
+ */
+var fx=function(){function q(a,d,c){return Math.max(a,Math.min(d,c))}function w(b){return{_:b,loadContentsOf:function(b){a=this._.gl;this._.loadContentsOf(b)},destroy:function(){a=this._.gl;this._.destroy()}}}function A(a){return w(r.fromElement(a))}function B(b,d){var c=a.UNSIGNED_BYTE;if(a.getExtension("OES_texture_float")&&a.getExtension("OES_texture_float_linear")){var e=new r(100,100,a.RGBA,a.FLOAT);try{e.drawTo(function(){c=a.FLOAT})}catch(g){}e.destroy()}this._.texture&&this._.texture.destroy();
+this._.spareTexture&&this._.spareTexture.destroy();this.width=b;this.height=d;this._.texture=new r(b,d,a.RGBA,c);this._.spareTexture=new r(b,d,a.RGBA,c);this._.extraTexture=this._.extraTexture||new r(0,0,a.RGBA,c);this._.flippedShader=this._.flippedShader||new h(null,"uniform sampler2D texture;varying vec2 texCoord;void main(){gl_FragColor=texture2D(texture,vec2(texCoord.x,1.0-texCoord.y));}");this._.isInitialized=!0}function C(a,d,c){this._.isInitialized&&
+a._.width==this.width&&a._.height==this.height||B.call(this,d?d:a._.width,c?c:a._.height);a._.use();this._.texture.drawTo(function(){h.getDefaultShader().drawRect()});return this}function D(){this._.texture.use();this._.flippedShader.drawRect();return this}function f(a,d,c,e){(c||this._.texture).use();this._.spareTexture.drawTo(function(){a.uniforms(d).drawRect()});this._.spareTexture.swapWith(e||this._.texture)}function E(a){a.parentNode.insertBefore(this,a);a.parentNode.removeChild(a);return this}
+function F(){var b=new r(this._.texture.width,this._.texture.height,a.RGBA,a.UNSIGNED_BYTE);this._.texture.use();b.drawTo(function(){h.getDefaultShader().drawRect()});return w(b)}function G(){var b=this._.texture.width,d=this._.texture.height,c=new Uint8Array(4*b*d);this._.texture.drawTo(function(){a.readPixels(0,0,b,d,a.RGBA,a.UNSIGNED_BYTE,c)});return c}function k(b){return function(){a=this._.gl;return b.apply(this,arguments)}}function x(a,d,c,e,g,l,n,p){var m=c-g,h=e-l,f=n-g,k=p-l;g=a-c+g-n;l=
+d-e+l-p;var q=m*k-f*h,f=(g*k-f*l)/q,m=(m*l-g*h)/q;return[c-a+f*c,e-d+f*e,f,n-a+m*n,p-d+m*p,m,a,d,1]}function y(a){var d=a[0],c=a[1],e=a[2],g=a[3],l=a[4],n=a[5],p=a[6],m=a[7];a=a[8];var f=d*l*a-d*n*m-c*g*a+c*n*p+e*g*m-e*l*p;return[(l*a-n*m)/f,(e*m-c*a)/f,(c*n-e*l)/f,(n*p-g*a)/f,(d*a-e*p)/f,(e*g-d*n)/f,(g*m-l*p)/f,(c*p-d*m)/f,(d*l-c*g)/f]}function z(a){var d=a.length;this.xa=[];this.ya=[];this.u=[];this.y2=[];a.sort(function(a,b){return a[0]-b[0]});for(var c=0;c0.0){color.rgb=(color.rgb-0.5)/(1.0-contrast)+0.5;}else{color.rgb=(color.rgb-0.5)*(1.0+contrast)+0.5;}gl_FragColor=color;}");
+f.call(this,a.brightnessContrast,{brightness:q(-1,b,1),contrast:q(-1,d,1)});return this}function t(a){a=new z(a);for(var d=[],c=0;256>c;c++)d.push(q(0,Math.floor(256*a.interpolate(c/255)),255));return d}function I(b,d,c){b=t(b);1==arguments.length?d=c=b:(d=t(d),c=t(c));for(var e=[],g=0;256>g;g++)e.splice(e.length,0,b[g],d[g],c[g],255);this._.extraTexture.initFromBytes(256,1,e);this._.extraTexture.use(1);a.curves=a.curves||new h(null,"uniform sampler2D texture;uniform sampler2D map;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color.r=texture2D(map,vec2(color.r)).r;color.g=texture2D(map,vec2(color.g)).g;color.b=texture2D(map,vec2(color.b)).b;gl_FragColor=color;}");
+a.curves.textures({map:1});f.call(this,a.curves,{});return this}function J(b){a.denoise=a.denoise||new h(null,"uniform sampler2D texture;uniform float exponent;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;void main(){vec4 center=texture2D(texture,texCoord);vec4 color=vec4(0.0);float total=0.0;for(float x=-4.0;x<=4.0;x+=1.0){for(float y=-4.0;y<=4.0;y+=1.0){vec4 sample=texture2D(texture,texCoord+vec2(x,y)/texSize);float weight=1.0-abs(dot(sample.rgb-center.rgb,vec3(0.25)));weight=pow(weight,exponent);color+=sample*weight;total+=weight;}}gl_FragColor=color/total;}");
+for(var d=0;2>d;d++)f.call(this,a.denoise,{exponent:Math.max(0,b),texSize:[this.width,this.height]});return this}function K(b,d){a.hueSaturation=a.hueSaturation||new h(null,"uniform sampler2D texture;uniform float hue;uniform float saturation;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float angle=hue*3.14159265;float s=sin(angle),c=cos(angle);vec3 weights=(vec3(2.0*c,-sqrt(3.0)*s-c,sqrt(3.0)*s-c)+1.0)/3.0;float len=length(color.rgb);color.rgb=vec3(dot(color.rgb,weights.xyz),dot(color.rgb,weights.zxy),dot(color.rgb,weights.yzx));float average=(color.r+color.g+color.b)/3.0;if(saturation>0.0){color.rgb+=(average-color.rgb)*(1.0-1.0/(1.001-saturation));}else{color.rgb+=(average-color.rgb)*(-saturation);}gl_FragColor=color;}");
+f.call(this,a.hueSaturation,{hue:q(-1,b,1),saturation:q(-1,d,1)});return this}function L(b){a.noise=a.noise||new h(null,"uniform sampler2D texture;uniform float amount;varying vec2 texCoord;float rand(vec2 co){return fract(sin(dot(co.xy,vec2(12.9898,78.233)))*43758.5453);}void main(){vec4 color=texture2D(texture,texCoord);float diff=(rand(texCoord)-0.5)*amount;color.r+=diff;color.g+=diff;color.b+=diff;gl_FragColor=color;}");
+f.call(this,a.noise,{amount:q(0,b,1)});return this}function M(b){a.sepia=a.sepia||new h(null,"uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float r=color.r;float g=color.g;float b=color.b;color.r=min(1.0,(r*(1.0-(0.607*amount)))+(g*(0.769*amount))+(b*(0.189*amount)));color.g=min(1.0,(r*0.349*amount)+(g*(1.0-(0.314*amount)))+(b*0.168*amount));color.b=min(1.0,(r*0.272*amount)+(g*0.534*amount)+(b*(1.0-(0.869*amount))));gl_FragColor=color;}");
+f.call(this,a.sepia,{amount:q(0,b,1)});return this}function N(b,d){a.unsharpMask=a.unsharpMask||new h(null,"uniform sampler2D blurredTexture;uniform sampler2D originalTexture;uniform float strength;uniform float threshold;varying vec2 texCoord;void main(){vec4 blurred=texture2D(blurredTexture,texCoord);vec4 original=texture2D(originalTexture,texCoord);gl_FragColor=mix(blurred,original,1.0+strength);}");
+this._.extraTexture.ensureFormat(this._.texture);this._.texture.use();this._.extraTexture.drawTo(function(){h.getDefaultShader().drawRect()});this._.extraTexture.use(1);this.triangleBlur(b);a.unsharpMask.textures({originalTexture:1});f.call(this,a.unsharpMask,{strength:d});this._.extraTexture.unuse(1);return this}function O(b){a.vibrance=a.vibrance||new h(null,"uniform sampler2D texture;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;float mx=max(color.r,max(color.g,color.b));float amt=(mx-average)*(-amount*3.0);color.rgb=mix(color.rgb,vec3(mx),amt);gl_FragColor=color;}");
+f.call(this,a.vibrance,{amount:q(-1,b,1)});return this}function P(b,d){a.vignette=a.vignette||new h(null,"uniform sampler2D texture;uniform float size;uniform float amount;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);float dist=distance(texCoord,vec2(0.5,0.5));color.rgb*=smoothstep(0.8,size*0.799,dist*(amount+size));gl_FragColor=color;}");
+f.call(this,a.vignette,{size:q(0,b,1),amount:q(0,d,1)});return this}function Q(b,d,c){a.lensBlurPrePass=a.lensBlurPrePass||new h(null,"uniform sampler2D texture;uniform float power;varying vec2 texCoord;void main(){vec4 color=texture2D(texture,texCoord);color=pow(color,vec4(power));gl_FragColor=vec4(color);}");var e="uniform sampler2D texture0;uniform sampler2D texture1;uniform vec2 delta0;uniform vec2 delta1;uniform float power;varying vec2 texCoord;"+
+s+"vec4 sample(vec2 delta){float offset=random(vec3(delta,151.7182),0.0);vec4 color=vec4(0.0);float total=0.0;for(float t=0.0;t<=30.0;t++){float percent=(t+offset)/30.0;color+=texture2D(texture0,texCoord+delta*percent);total+=1.0;}return color/total;}";
+a.lensBlur0=a.lensBlur0||new h(null,e+"void main(){gl_FragColor=sample(delta0);}");a.lensBlur1=a.lensBlur1||new h(null,e+"void main(){gl_FragColor=(sample(delta0)+sample(delta1))*0.5;}");a.lensBlur2=a.lensBlur2||(new h(null,e+"void main(){vec4 color=(sample(delta0)+2.0*texture2D(texture1,texCoord))/3.0;gl_FragColor=pow(color,vec4(power));}")).textures({texture1:1});for(var e=
+[],g=0;3>g;g++){var l=c+2*g*Math.PI/3;e.push([b*Math.sin(l)/this.width,b*Math.cos(l)/this.height])}b=Math.pow(10,q(-1,d,1));f.call(this,a.lensBlurPrePass,{power:b});this._.extraTexture.ensureFormat(this._.texture);f.call(this,a.lensBlur0,{delta0:e[0]},this._.texture,this._.extraTexture);f.call(this,a.lensBlur1,{delta0:e[1],delta1:e[2]},this._.extraTexture,this._.extraTexture);f.call(this,a.lensBlur0,{delta0:e[1]});this._.extraTexture.use(1);f.call(this,a.lensBlur2,{power:1/b,delta0:e[2]});return this}
+function R(b,d,c,e,g,l){a.tiltShift=a.tiltShift||new h(null,"uniform sampler2D texture;uniform float blurRadius;uniform float gradientRadius;uniform vec2 start;uniform vec2 end;uniform vec2 delta;uniform vec2 texSize;varying vec2 texCoord;"+s+"void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);vec2 normal=normalize(vec2(start.y-end.y,end.x-start.x));float radius=smoothstep(0.0,1.0,abs(dot(texCoord*texSize-start,normal))/gradientRadius)*blurRadius;for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta/texSize*percent*radius);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+var n=c-b,p=e-d,m=Math.sqrt(n*n+p*p);f.call(this,a.tiltShift,{blurRadius:g,gradientRadius:l,start:[b,d],end:[c,e],delta:[n/m,p/m],texSize:[this.width,this.height]});f.call(this,a.tiltShift,{blurRadius:g,gradientRadius:l,start:[b,d],end:[c,e],delta:[-p/m,n/m],texSize:[this.width,this.height]});return this}function S(b){a.triangleBlur=a.triangleBlur||new h(null,"uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;"+s+"void main(){vec4 color=vec4(0.0);float total=0.0;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec4 sample=texture2D(texture,texCoord+delta*percent);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+f.call(this,a.triangleBlur,{delta:[b/this.width,0]});f.call(this,a.triangleBlur,{delta:[0,b/this.height]});return this}function T(b,d,c){a.zoomBlur=a.zoomBlur||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float strength;uniform vec2 texSize;varying vec2 texCoord;"+s+"void main(){vec4 color=vec4(0.0);float total=0.0;vec2 toCenter=center-texCoord*texSize;float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=0.0;t<=40.0;t++){float percent=(t+offset)/40.0;float weight=4.0*(percent-percent*percent);vec4 sample=texture2D(texture,texCoord+toCenter*percent*strength/texSize);sample.rgb*=sample.a;color+=sample*weight;total+=weight;}gl_FragColor=color/total;gl_FragColor.rgb/=gl_FragColor.a+0.00001;}");
+f.call(this,a.zoomBlur,{center:[b,d],strength:c,texSize:[this.width,this.height]});return this}function U(b,d,c,e){a.colorHalftone=a.colorHalftone||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(float angle){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);vec3 cmy=1.0-color.rgb;float k=min(cmy.x,min(cmy.y,cmy.z));cmy=(cmy-k)/(1.0-k);cmy=clamp(cmy*10.0-3.0+vec3(pattern(angle+0.26179),pattern(angle+1.30899),pattern(angle)),0.0,1.0);k=clamp(k*10.0-5.0+pattern(angle+0.78539),0.0,1.0);gl_FragColor=vec4(1.0-cmy-k,color.a);}");
+f.call(this,a.colorHalftone,{center:[b,d],angle:c,scale:Math.PI/e,texSize:[this.width,this.height]});return this}function V(b,d,c,e){a.dotScreen=a.dotScreen||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float angle;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;float pattern(){float s=sin(angle),c=cos(angle);vec2 tex=texCoord*texSize-center;vec2 point=vec2(c*tex.x-s*tex.y,s*tex.x+c*tex.y)*scale;return(sin(point.x)*sin(point.y))*4.0;}void main(){vec4 color=texture2D(texture,texCoord);float average=(color.r+color.g+color.b)/3.0;gl_FragColor=vec4(vec3(average*10.0-5.0+pattern()),color.a);}");
+f.call(this,a.dotScreen,{center:[b,d],angle:c,scale:Math.PI/e,texSize:[this.width,this.height]});return this}function W(b){a.edgeWork1=a.edgeWork1||new h(null,"uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;"+s+"void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec3 sample=texture2D(texture,texCoord+delta*percent).rgb;float average=(sample.r+sample.g+sample.b)/3.0;color.x+=average*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=average*weight;total.y+=weight;}}gl_FragColor=vec4(color/total,0.0,1.0);}");
+a.edgeWork2=a.edgeWork2||new h(null,"uniform sampler2D texture;uniform vec2 delta;varying vec2 texCoord;"+s+"void main(){vec2 color=vec2(0.0);vec2 total=vec2(0.0);float offset=random(vec3(12.9898,78.233,151.7182),0.0);for(float t=-30.0;t<=30.0;t++){float percent=(t+offset-0.5)/30.0;float weight=1.0-abs(percent);vec2 sample=texture2D(texture,texCoord+delta*percent).xy;color.x+=sample.x*weight;total.x+=weight;if(abs(t)<15.0){weight=weight*2.0-1.0;color.y+=sample.y*weight;total.y+=weight;}}float c=clamp(10000.0*(color.y/total.y-color.x/total.x)+0.5,0.0,1.0);gl_FragColor=vec4(c,c,c,1.0);}");
+f.call(this,a.edgeWork1,{delta:[b/this.width,0]});f.call(this,a.edgeWork2,{delta:[0,b/this.height]});return this}function X(b,d,c){a.hexagonalPixelate=a.hexagonalPixelate||new h(null,"uniform sampler2D texture;uniform vec2 center;uniform float scale;uniform vec2 texSize;varying vec2 texCoord;void main(){vec2 tex=(texCoord*texSize-center)/scale;tex.y/=0.866025404;tex.x-=tex.y*0.5;vec2 a;if(tex.x+tex.y-floor(tex.x)-floor(tex.y)<1.0)a=vec2(floor(tex.x),floor(tex.y));else a=vec2(ceil(tex.x),ceil(tex.y));vec2 b=vec2(ceil(tex.x),floor(tex.y));vec2 c=vec2(floor(tex.x),ceil(tex.y));vec3 TEX=vec3(tex.x,tex.y,1.0-tex.x-tex.y);vec3 A=vec3(a.x,a.y,1.0-a.x-a.y);vec3 B=vec3(b.x,b.y,1.0-b.x-b.y);vec3 C=vec3(c.x,c.y,1.0-c.x-c.y);float alen=length(TEX-A);float blen=length(TEX-B);float clen=length(TEX-C);vec2 choice;if(alen0.0){coord*=mix(1.0,smoothstep(0.0,radius/distance,percent),strength*0.75);}else{coord*=mix(1.0,pow(percent,1.0+strength*0.75)*radius/distance,1.0-percent);}}coord+=center;");
+f.call(this,a.bulgePinch,{radius:c,strength:q(-1,e,1),center:[b,d],texSize:[this.width,this.height]});return this}function $(b,d,c){a.matrixWarp=a.matrixWarp||u("uniform mat3 matrix;uniform bool useTextureSpace;","if(useTextureSpace)coord=coord/texSize*2.0-1.0;vec3 warp=matrix*vec3(coord,1.0);coord=warp.xy/warp.z;if(useTextureSpace)coord=(coord*0.5+0.5)*texSize;");b=Array.prototype.concat.apply([],b);if(4==b.length)b=
+[b[0],b[1],0,b[2],b[3],0,0,0,1];else if(9!=b.length)throw"can only warp with 2x2 or 3x3 matrix";f.call(this,a.matrixWarp,{matrix:d?y(b):b,texSize:[this.width,this.height],useTextureSpace:c|0});return this}function aa(a,d){var c=x.apply(null,d),e=x.apply(null,a),c=y(c);return this.matrixWarp([c[0]*e[0]+c[1]*e[3]+c[2]*e[6],c[0]*e[1]+c[1]*e[4]+c[2]*e[7],c[0]*e[2]+c[1]*e[5]+c[2]*e[8],c[3]*e[0]+c[4]*e[3]+c[5]*e[6],c[3]*e[1]+c[4]*e[4]+c[5]*e[7],c[3]*e[2]+c[4]*e[5]+c[5]*e[8],c[6]*e[0]+c[7]*e[3]+c[8]*e[6],
+c[6]*e[1]+c[7]*e[4]+c[8]*e[7],c[6]*e[2]+c[7]*e[5]+c[8]*e[8]])}function ba(b,d,c,e){a.swirl=a.swirl||u("uniform float radius;uniform float angle;uniform vec2 center;","coord-=center;float distance=length(coord);if(distance>1;this.xa[e]>a?c=e:d=e}var e=this.xa[c]-
+this.xa[d],g=(this.xa[c]-a)/e;a=(a-this.xa[d])/e;return g*this.ya[d]+a*this.ya[c]+((g*g*g-g)*this.y2[d]+(a*a*a-a)*this.y2[c])*e*e/6};var r=function(){function b(b,c,d,f){this.gl=a;this.id=a.createTexture();this.width=b;this.height=c;this.format=d;this.type=f;a.bindTexture(a.TEXTURE_2D,this.id);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MAG_FILTER,a.LINEAR);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_MIN_FILTER,a.LINEAR);a.texParameteri(a.TEXTURE_2D,a.TEXTURE_WRAP_S,a.CLAMP_TO_EDGE);a.texParameteri(a.TEXTURE_2D,
+a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE);b&&c&&a.texImage2D(a.TEXTURE_2D,0,this.format,b,c,0,this.format,this.type,null)}function d(a){null==c&&(c=document.createElement("canvas"));c.width=a.width;c.height=a.height;a=c.getContext("2d");a.clearRect(0,0,c.width,c.height);return a}b.fromElement=function(c){var d=new b(0,0,a.RGBA,a.UNSIGNED_BYTE);d.loadContentsOf(c);return d};b.prototype.loadContentsOf=function(b){this.width=b.width||b.videoWidth;this.height=b.height||b.videoHeight;a.bindTexture(a.TEXTURE_2D,
+this.id);a.texImage2D(a.TEXTURE_2D,0,this.format,this.format,this.type,b)};b.prototype.initFromBytes=function(b,c,d){this.width=b;this.height=c;this.format=a.RGBA;this.type=a.UNSIGNED_BYTE;a.bindTexture(a.TEXTURE_2D,this.id);a.texImage2D(a.TEXTURE_2D,0,a.RGBA,b,c,0,a.RGBA,this.type,new Uint8Array(d))};b.prototype.destroy=function(){a.deleteTexture(this.id);this.id=null};b.prototype.use=function(b){a.activeTexture(a.TEXTURE0+(b||0));a.bindTexture(a.TEXTURE_2D,this.id)};b.prototype.unuse=function(b){a.activeTexture(a.TEXTURE0+
+(b||0));a.bindTexture(a.TEXTURE_2D,null)};b.prototype.ensureFormat=function(b,c,d,f){if(1==arguments.length){var h=arguments[0];b=h.width;c=h.height;d=h.format;f=h.type}if(b!=this.width||c!=this.height||d!=this.format||f!=this.type)this.width=b,this.height=c,this.format=d,this.type=f,a.bindTexture(a.TEXTURE_2D,this.id),a.texImage2D(a.TEXTURE_2D,0,this.format,b,c,0,this.format,this.type,null)};b.prototype.drawTo=function(b){a.framebuffer=a.framebuffer||a.createFramebuffer();a.bindFramebuffer(a.FRAMEBUFFER,
+a.framebuffer);a.framebufferTexture2D(a.FRAMEBUFFER,a.COLOR_ATTACHMENT0,a.TEXTURE_2D,this.id,0);if(a.checkFramebufferStatus(a.FRAMEBUFFER)!==a.FRAMEBUFFER_COMPLETE)throw Error("incomplete framebuffer");a.viewport(0,0,this.width,this.height);b();a.bindFramebuffer(a.FRAMEBUFFER,null)};var c=null;b.prototype.fillUsingCanvas=function(b){b(d(this));this.format=a.RGBA;this.type=a.UNSIGNED_BYTE;a.bindTexture(a.TEXTURE_2D,this.id);a.texImage2D(a.TEXTURE_2D,0,a.RGBA,a.RGBA,a.UNSIGNED_BYTE,c);return this};
+b.prototype.toImage=function(b){this.use();h.getDefaultShader().drawRect();var f=4*this.width*this.height,k=new Uint8Array(f),n=d(this),p=n.createImageData(this.width,this.height);a.readPixels(0,0,this.width,this.height,a.RGBA,a.UNSIGNED_BYTE,k);for(var m=0;m 0) {
+ var begin = document.cookie.indexOf(NameOfCookie + "=");
+ if (begin != -1) {
+ begin += NameOfCookie.length + 1;
+ var end = document.cookie.indexOf(";", begin);
+ if (end == -1)
+ end = document.cookie.length;
+ return document.cookie.substring(begin, end);
+ }
+ }
+ return '';
+ }
+
+ _setCookie(NameOfCookie, value, expire_days) {
+ if (expire_days == undefined)
+ expire_days = 180;
+ var ExpireDate = new Date();
+ ExpireDate.setTime(ExpireDate.getTime() + (expire_days * 24 * 3600 * 1000));
+ document.cookie = NameOfCookie + "=" + value +
+ ((expire_days == null) ? "" : "; expires=" + ExpireDate.toGMTString());
+ }
+
+ delCookie(NameOfCookie) {
+ if (this.getCookie(NameOfCookie)) {
+ document.cookie = NameOfCookie + "=" +
+ "; expires=Thu, 01-Jan-70 00:00:01 GMT";
+ }
+ }
+
+ getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ font_pixel_to_height(px) {
+ return Math.round(px * 0.75);
+ }
+
+ hex(x) {
+ x = parseInt(x);
+ return ("0" + x.toString(16)).slice(-2);
+ }
+
+ hex_set_hsl(hex, newHsl) {
+ const rgb = this.hexToRgb(hex);
+ const hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+ if ('h' in newHsl) {
+ hsl.h = newHsl.h;
+ }
+ if ('s' in newHsl) {
+ hsl.s = newHsl.s;
+ }
+ if ('l' in newHsl) {
+ hsl.l = newHsl.l;
+ }
+ return this.hslToHex(hsl.h, hsl.s, hsl.l);
+ }
+
+ rgbToHex(r, g, b) {
+ if (r > 255 || g > 255 || b > 255)
+ throw "Invalid color component";
+ var tmp = ((r << 16) | (g << 8) | b).toString(16);
+
+ return "#" + ("000000" + tmp).slice(-6);
+ }
+
+ hexToRgb(hex) {
+ if (hex[0] == "#")
+ hex = hex.substr(1);
+ if (hex.length == 3) {
+ var temp = hex;
+ hex = '';
+ temp = /^([a-f0-9])([a-f0-9])([a-f0-9])$/i.exec(temp).slice(1);
+ for (var i = 0; i < 3; i++)
+ hex += temp[i] + temp[i];
+ }
+ var triplets = /^([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/i.exec(hex).slice(1);
+ return {
+ r: parseInt(triplets[0], 16),
+ g: parseInt(triplets[1], 16),
+ b: parseInt(triplets[2], 16),
+ a: 255
+ };
+ }
+
+ hslToHex(h, s, l) {
+ const rgb = this.hslToRgb(h, s, l);
+ return this.rgbToHex(rgb.r, rgb.g, rgb.b);
+ }
+
+ hsvToHex(h, s, v) {
+ const rgb = this.hsvToRgb(h, s, v);
+ return this.rgbToHex(rgb.r, rgb.g, rgb.b);
+ }
+
+ hueToRgb(p, q, t) {
+ if (t < 0)
+ t += 1;
+ if (t > 1)
+ t -= 1;
+ if (t < 1 / 6)
+ return p + (q - p) * 6 * t;
+ if (t < 1 / 2)
+ return q;
+ if (t < 2 / 3)
+ return p + (q - p) * (2 / 3 - t) * 6;
+ return p;
+ }
+
+ /**
+ * Converts an HSL color value to RGB.
+ * Assumes h, s, and l are contained in the set [0, 1]
+ * Returns r, g, and b in the set [0, 255].
+ *
+ * Credit: https://gist.github.com/mjackson/5311256
+ *
+ * @param {number} h The hue
+ * @param {number} s The saturation
+ * @param {number} l The lightness
+ * @return {Object} The RGB representation, r,g,b as keys.
+ */
+ hslToRgb(h, s, l) {
+ var r, g, b;
+
+ if (s == 0) {
+ r = g = b = l; // achromatic
+ }
+ else {
+ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+ var p = 2 * l - q;
+ r = this.hueToRgb(p, q, h + 1 / 3);
+ g = this.hueToRgb(p, q, h);
+ b = this.hueToRgb(p, q, h - 1 / 3);
+ }
+
+ return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+ }
+
+ /**
+ * Converts an RGB color value to HSL. Values are in range 0-1.
+ * But real ranges are 0-360, 0-100%, 0-100%
+ *
+ * Credit: https://gist.github.com/mjackson/5311256
+ *
+ * @param {number} r red color value
+ * @param {number} g green color value
+ * @param {number} b blue color value
+ * @return {object} The HSL representation
+ */
+ rgbToHsl(r, g, b) {
+ r /= 255;
+ g /= 255;
+ b /= 255;
+ var max = Math.max(r, g, b), min = Math.min(r, g, b);
+ var h, s, l = (max + min) / 2;
+
+ if (max == min) {
+ h = s = 0; // achromatic
+ }
+ else {
+ var d = max - min;
+ s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+ switch (max) {
+ case r:
+ h = (g - b) / d + (g < b ? 6 : 0);
+ break;
+ case g:
+ h = (b - r) / d + 2;
+ break;
+ case b:
+ h = (r - g) / d + 4;
+ break;
+ }
+ h /= 6;
+ }
+
+ return { h, s, l };
+ }
+
+ /**
+ * Converts an RGB color value to HSV.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and v in the set [0, 1].
+ *
+ * Credit: https://gist.github.com/mjackson/5311256
+ *
+ * @param Number r The red color value
+ * @param Number g The green color value
+ * @param Number b The blue color value
+ * @return {object} The HSL representation
+ */
+ rgbToHsv(r, g, b) {
+ r /= 255, g /= 255, b /= 255;
+ var max = Math.max(r, g, b), min = Math.min(r, g, b);
+ var h, s, v = max;
+ var d = max - min;
+ s = max == 0 ? 0 : d / max;
+ if (max == min) {
+ h = 0; // achromatic
+ } else {
+ switch (max) {
+ case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+ case g: h = (b - r) / d + 2; break;
+ case b: h = (r - g) / d + 4; break;
+ }
+ h /= 6;
+ }
+ return { h, s, v };
+ }
+
+ /**
+ * Converts an HSV color value to RGB.
+ * Assumes h, s, and v are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * Credit: https://gist.github.com/mjackson/5311256
+ *
+ * @param Number h The hue
+ * @param Number s The saturation
+ * @param Number v The value
+ * @return {object} The RGB representation
+ */
+ hsvToRgb(h, s, v) {
+ var r, g, b;
+
+ var i = Math.floor(h * 6);
+ var f = h * 6 - i;
+ var p = v * (1 - s);
+ var q = v * (1 - f * s);
+ var t = v * (1 - (1 - f) * s);
+
+ switch (i % 6) {
+ case 0: r = v, g = t, b = p; break;
+ case 1: r = q, g = v, b = p; break;
+ case 2: r = p, g = v, b = t; break;
+ case 3: r = p, g = q, b = v; break;
+ case 4: r = t, g = p, b = v; break;
+ case 5: r = v, g = p, b = q; break;
+ }
+
+ return { r: r * 255, g: g * 255, b: b * 255 };
+ }
+
+ /**
+ * Converts an HSV color value to HSL.
+ * Assumes h, s, and v are contained in the set [0, 1] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @param Number h The hue
+ * @param Number s The saturation
+ * @param Number v The value
+ * @return {object} The HSL representation
+ */
+ hsvToHsl(h, s, v) {
+ return {
+ h,
+ s: s * v / Math.max(0.00000001, ((h = (2 - s) * v) < 1 ? h : 2 - h)),
+ l: h / 2
+ };
+ }
+
+ /**
+ * Converts an HSL color value to HSV.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns h, s, and v in the set [0, 1].
+ *
+ * @param Number h The hue
+ * @param Number s The saturation
+ * @param Number l The value
+ * @return {object} The HSV representation
+ */
+ hslToHsv(h, s, l) {
+ s *= l < .5 ? l : 1 - l;
+ return {
+ h,
+ s: 2 * s / Math.max(0.00000001, (l + s)),
+ v: l + s
+ };
+ }
+
+ remove_selection() {
+ if (window.getSelection) {
+ if (window.getSelection().empty) // Chrome
+ window.getSelection().empty();
+ else if (window.getSelection().removeAllRanges) // Firefox
+ window.getSelection().removeAllRanges();
+ }
+ else if (document.selection) // IE?
+ document.selection.empty();
+ }
+
+ //credits: richard maloney 2006
+ darkenColor(color, v) {
+ if (color.length > 6) {
+ color = color.substring(1, color.length);
+ }
+ var rgb = parseInt(color, 16);
+ var r = Math.abs(((rgb >> 16) & 0xFF) + v);
+ if (r > 255)
+ r = r - (r - 255);
+ var g = Math.abs(((rgb >> 8) & 0xFF) + v);
+ if (g > 255)
+ g = g - (g - 255);
+ var b = Math.abs((rgb & 0xFF) + v);
+ if (b > 255)
+ b = b - (b - 255);
+ r = Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16);
+ if (r.length == 1)
+ r = '0' + r;
+ g = Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16);
+ if (g.length == 1)
+ g = '0' + g;
+ b = Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16);
+ if (b.length == 1)
+ b = '0' + b;
+ return "#" + r + g + b;
+ }
+
+ /**
+ * JavaScript Number Formatter, author: KPL, KHL
+ *
+ * @param {int} n
+ * @param {int} maximumFractionDigits
+ * @returns {string}
+ */
+ number_format(n, maximumFractionDigits) {
+ let x = parseFloat(n);
+ var number = x.toLocaleString('us', {minimumFractionDigits: 0, maximumFractionDigits: maximumFractionDigits});
+ number = number.replaceAll(',', '');
+ number = parseFloat(number);
+
+ return number;
+ }
+
+ check_input_color_support() {
+ var i = document.createElement("input");
+ i.setAttribute("type", "color");
+ return i.type !== "text";
+ }
+
+ b64toBlob(b64Data, contentType, sliceSize) {
+ contentType = contentType || '';
+ sliceSize = sliceSize || 512;
+
+ var byteCharacters = atob(b64Data);
+ var byteArrays = [];
+
+ for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+ var slice = byteCharacters.slice(offset, offset + sliceSize);
+
+ var byteNumbers = new Array(slice.length);
+ for (var i = 0; i < slice.length; i++) {
+ byteNumbers[i] = slice.charCodeAt(i);
+ }
+
+ var byteArray = new Uint8Array(byteNumbers);
+
+ byteArrays.push(byteArray);
+ }
+
+ var blob = new Blob(byteArrays, {type: contentType});
+ return blob;
+ }
+
+ escapeHtml(text) {
+ return text
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+ }
+
+ isNumeric(n) {
+ return !isNaN(parseFloat(n)) && isFinite(n);
+ }
+
+ ucfirst(string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+ }
+
+ /**
+ * change canvas size without loosing data
+ *
+ * @param {canvas} canvas
+ * @param {int} width
+ * @param {int} height
+ * @param {int} offset_x
+ * @param {int} offset_y
+ */
+ change_canvas_size(canvas, width, height, offset_x, offset_y) {
+ if (offset_x == undefined)
+ offset_x = 0;
+ if (offset_y == undefined)
+ offset_y = 0;
+
+ //copy data;
+ var tmp = document.createElement('canvas');
+ var ctx = tmp.getContext("2d");
+ tmp.width = canvas.width;
+ tmp.height = canvas.height;
+ ctx.drawImage(canvas, 0, 0);
+
+ canvas.width = Math.max(1, width);
+ canvas.height = Math.max(1, height);
+
+ //restore image
+ canvas.getContext("2d").drawImage(tmp, -offset_x, -offset_y);
+ }
+
+ image_round(ctx_main, mouse_x, mouse_y, size_w, size_h, img_data, anti_aliasing = false) {
+ //create tmp canvas
+ var canvasTmp = document.createElement('canvas');
+ canvasTmp.width = size_w;
+ canvasTmp.height = size_h;
+
+ var size_half_w = Math.round(size_w / 2);
+ var size_half_h = Math.round(size_h / 2);
+ var ctx = canvasTmp.getContext("2d");
+ var width = canvasTmp.width;
+ var height = canvasTmp.height;
+ var xx = mouse_x - size_half_w;
+ var yy = mouse_y - size_half_h;
+
+ ctx.clearRect(0, 0, width, height);
+ ctx.save();
+ //draw main data
+ ctx.putImageData(img_data, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+
+ //create form
+ var gradient = ctx.createRadialGradient(size_half_w, size_half_h, 0, size_half_w, size_half_h, size_half_w);
+ gradient.addColorStop(0, '#ffffff');
+ if (anti_aliasing == true)
+ gradient.addColorStop(0.8, '#ffffff');
+ else
+ gradient.addColorStop(0.99, '#ffffff');
+ gradient.addColorStop(1, 'rgba(255,255,255,0');
+ ctx.fillStyle = gradient;
+
+ ctx.beginPath();
+ ctx.ellipse(size_half_w, size_half_h, size_w * 2, size_h * 2, 0, 0, 2 * Math.PI);
+ ctx.fill();
+ ctx_main.drawImage(canvasTmp, 0, 0, size_w, size_h, xx, yy, size_w, size_h);
+ //reset
+ ctx.restore();
+ ctx.clearRect(0, 0, width, height);
+ }
+
+ is_input(element) {
+ if (!element) {
+ return false;
+ }
+ if (element.type == 'text' || element.tagName == 'INPUT' || element.type == 'textarea') {
+ return true;
+ } else {
+ return element.closest('.ui_color_picker_gradient, .ui_number_input, .ui_range, .ui_swatches') != null;
+ }
+ }
+
+ //if IE 11 or Edge
+ is_edge_or_ie() {
+ //ie11
+ if( !(window.ActiveXObject) && "ActiveXObject" in window )
+ return true;
+ //edge
+ if( navigator.userAgent.indexOf('Edge/') != -1 )
+ return true;
+ return false;
+ }
+
+ // Credit: https://stackoverflow.com/questions/27078285/simple-throttle-in-js
+ throttle(func, wait, options) {
+ var context, args, result;
+ var timeout = null;
+ var previous = 0;
+ if (!options) options = {};
+ var later = function() {
+ previous = options.leading === false ? 0 : Date.now();
+ timeout = null;
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ };
+ return function() {
+ var now = Date.now();
+ if (!previous && options.leading === false) previous = now;
+ var remaining = wait - (now - previous);
+ context = this;
+ args = arguments;
+ if (remaining <= 0 || remaining > wait) {
+ if (timeout) {
+ clearTimeout(timeout);
+ timeout = null;
+ }
+ previous = now;
+ result = func.apply(context, args);
+ if (!timeout) context = args = null;
+ } else if (!timeout && options.trailing !== false) {
+ timeout = setTimeout(later, remaining);
+ }
+ return result;
+ };
+ };
+
+ /**
+ * draws line that is visible on white and black backgrounds.
+ *
+ * @param ctx
+ * @param start_x
+ * @param start_y
+ * @param end_x
+ * @param end_y
+ */
+ draw_special_line(ctx, start_x, start_y, end_x, end_y){
+ const wholeLineWidth = 2 / config.ZOOM;
+ const halfLineWidth = wholeLineWidth / 2;
+
+ ctx.lineWidth = wholeLineWidth;
+ ctx.strokeStyle = 'rgb(255, 255, 255)';
+ ctx.beginPath();
+ ctx.moveTo(start_x - halfLineWidth, start_y);
+ ctx.lineTo(end_x - halfLineWidth, end_y);
+ ctx.stroke();
+
+ ctx.lineWidth = halfLineWidth;
+ ctx.strokeStyle = 'rgb(0, 0, 0)';
+ ctx.beginPath();
+ ctx.moveTo(start_x - halfLineWidth, start_y);
+ ctx.lineTo(end_x - halfLineWidth, end_y);
+ ctx.stroke();
+ }
+
+ /**
+ * draws control point that is visible on white and black backgrounds.
+ *
+ * @param ctx
+ * @param x
+ * @param y
+ * @returns {Path2D}
+ */
+ draw_control_point(ctx, x, y) {
+ var dx = 0;
+ var dy = 0;
+ var block_size = 12 / config.ZOOM;
+ const wholeLineWidth = 2 / config.ZOOM;
+
+ ctx.strokeStyle = "#000000";
+ ctx.fillStyle = "#ffffff";
+ ctx.lineWidth = wholeLineWidth;
+
+ //create path
+ const circle = new Path2D();
+ circle.arc(x + dx * block_size, y + dy * block_size, block_size / 2, 0, 2 * Math.PI);
+
+ //draw
+ ctx.fill(circle);
+ ctx.stroke(circle);
+
+ return circle;
+ }
+
+ /**
+ * converts internal unit (pixel) to user defined
+ *
+ * @param data
+ * @param type
+ * @param resolution
+ * @returns {string|number}
+ */
+ get_user_unit(data, type, resolution){
+ data = parseFloat(data);
+
+ if(type == 'pixels'){
+ //no conversion
+ return parseInt(data);
+ }
+ else if(type == 'inches'){
+ return this.number_format(data / resolution, 3);
+ }
+ else if(type == 'centimeters'){
+ return this.number_format(data / resolution * 2.54, 3);
+ }
+ else if(type == 'millimetres'){
+ return this.number_format(data / resolution * 25.4, 3);
+ }
+ }
+
+ /**
+ * converts user defined unit to internal (pixels)
+ *
+ * @param data
+ * @param type
+ * @param resolution
+ * @returns {number}
+ */
+ get_internal_unit(data, type, resolution){
+ data = parseFloat(data);
+
+ if(type == 'pixels'){
+ //no conversion
+ return parseInt(data);
+ }
+ else if(type == 'inches'){
+ return Math.ceil(data * resolution);
+ }
+ else if(type == 'centimeters'){
+ return Math.ceil(data * resolution / 2.54);
+ }
+ else if(type == 'millimetres'){
+ return Math.ceil(data * resolution / 25.4);
+ }
+ }
+
+}
+export default Helper_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/imagefilters.js b/paintplus/frontend/src/js/libs/imagefilters.js
new file mode 100644
index 0000000..5047b2c
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/imagefilters.js
@@ -0,0 +1,2006 @@
+//about - A Javascript Image filter library for the HTML5 Canvas tag.
+//author - https://github.com/arahaya/ImageFilters.js
+//demo - http://www.arahaya.com/imagefilters/
+
+var ImageFilters = {};
+ImageFilters.utils = {
+ initSampleCanvas: function () {
+ var _canvas = document.createElement('canvas'),
+ _context = _canvas.getContext('2d');
+
+ _canvas.width = 0;
+ _canvas.height = 0;
+
+ this.getSampleCanvas = function () {
+ return _canvas;
+ };
+ this.getSampleContext = function () {
+ return _context;
+ };
+ this.createImageData = (_context.createImageData) ? function (w, h) {
+ return _context.createImageData(w, h);
+ } : function (w, h) {
+ return new ImageData(w, h);
+ };
+ },
+ getSampleCanvas: function () {
+ this.initSampleCanvas();
+ return this.getSampleCanvas();
+ },
+ getSampleContext: function () {
+ this.initSampleCanvas();
+ return this.getSampleContext();
+ },
+ createImageData: function (w, h) {
+ this.initSampleCanvas();
+ return this.createImageData(w, h);
+ },
+ clamp: function (value) {
+ return value > 255 ? 255 : value < 0 ? 0 : value;
+ },
+ buildMap: function (f) {
+ for (var m = [], k = 0, v; k < 256; k += 1) {
+ m[k] = (v = f(k)) > 255 ? 255 : v < 0 ? 0 : v | 0;
+ }
+ return m;
+ },
+ applyMap: function (src, dst, map) {
+ for (var i = 0, l = src.length; i < l; i += 4) {
+ dst[i] = map[src[i]];
+ dst[i + 1] = map[src[i + 1]];
+ dst[i + 2] = map[src[i + 2]];
+ dst[i + 3] = src[i + 3];
+ }
+ },
+ mapRGB: function (src, dst, func) {
+ this.applyMap(src, dst, this.buildMap(func));
+ },
+ getPixelIndex: function (x, y, width, height, edge) {
+ if (x < 0 || x >= width || y < 0 || y >= height) {
+ switch (edge) {
+ case 1: // clamp
+ x = x < 0 ? 0 : x >= width ? width - 1 : x;
+ y = y < 0 ? 0 : y >= height ? height - 1 : y;
+ break;
+ case 2: // wrap
+ x = (x %= width) < 0 ? x + width : x;
+ y = (y %= height) < 0 ? y + height : y;
+ break;
+ default: // transparent
+ return null;
+ }
+ }
+ return (y * width + x) << 2;
+ },
+ getPixel: function (src, x, y, width, height, edge) {
+ if (x < 0 || x >= width || y < 0 || y >= height) {
+ switch (edge) {
+ case 1: // clamp
+ x = x < 0 ? 0 : x >= width ? width - 1 : x;
+ y = y < 0 ? 0 : y >= height ? height - 1 : y;
+ break;
+ case 2: // wrap
+ x = (x %= width) < 0 ? x + width : x;
+ y = (y %= height) < 0 ? y + height : y;
+ break;
+ default: // transparent
+ return 0;
+ }
+ }
+
+ var i = (y * width + x) << 2;
+
+ // ARGB
+ return src[i + 3] << 24 | src[i] << 16 | src[i + 1] << 8 | src[i + 2];
+ },
+ getPixelByIndex: function (src, i) {
+ return src[i + 3] << 24 | src[i] << 16 | src[i + 1] << 8 | src[i + 2];
+ },
+ /**
+ * one of the most important functions in this library.
+ * I want to make this as fast as possible.
+ */
+ copyBilinear: function (src, x, y, width, height, dst, dstIndex, edge) {
+ var fx = x < 0 ? x - 1 | 0 : x | 0, // Math.floor(x)
+ fy = y < 0 ? y - 1 | 0 : y | 0, // Math.floor(y)
+ wx = x - fx,
+ wy = y - fy,
+ i,
+ nw = 0, ne = 0, sw = 0, se = 0,
+ cx, cy,
+ r, g, b, a;
+
+ if (fx >= 0 && fx < (width - 1) && fy >= 0 && fy < (height - 1)) {
+ // in bounds, no edge actions required
+ i = (fy * width + fx) << 2;
+
+ if (wx || wy) {
+ nw = src[i + 3] << 24 | src[i] << 16 | src[i + 1] << 8 | src[i + 2];
+
+ i += 4;
+ ne = src[i + 3] << 24 | src[i] << 16 | src[i + 1] << 8 | src[i + 2];
+
+ i = (i - 8) + (width << 2);
+ sw = src[i + 3] << 24 | src[i] << 16 | src[i + 1] << 8 | src[i + 2];
+
+ i += 4;
+ se = src[i + 3] << 24 | src[i] << 16 | src[i + 1] << 8 | src[i + 2];
+ } else {
+ // no interpolation required
+ dst[dstIndex] = src[i];
+ dst[dstIndex + 1] = src[i + 1];
+ dst[dstIndex + 2] = src[i + 2];
+ dst[dstIndex + 3] = src[i + 3];
+ return;
+ }
+ } else {
+ // edge actions required
+ nw = this.getPixel(src, fx, fy, width, height, edge);
+
+ if (wx || wy) {
+ ne = this.getPixel(src, fx + 1, fy, width, height, edge);
+ sw = this.getPixel(src, fx, fy + 1, width, height, edge);
+ se = this.getPixel(src, fx + 1, fy + 1, width, height, edge);
+ } else {
+ // no interpolation required
+ dst[dstIndex] = nw >> 16 & 0xFF;
+ dst[dstIndex + 1] = nw >> 8 & 0xFF;
+ dst[dstIndex + 2] = nw & 0xFF;
+ dst[dstIndex + 3] = nw >> 24 & 0xFF;
+ return;
+ }
+ }
+
+ cx = 1 - wx;
+ cy = 1 - wy;
+ r = ((nw >> 16 & 0xFF) * cx + (ne >> 16 & 0xFF) * wx) * cy + ((sw >> 16 & 0xFF) * cx + (se >> 16 & 0xFF) * wx) * wy;
+ g = ((nw >> 8 & 0xFF) * cx + (ne >> 8 & 0xFF) * wx) * cy + ((sw >> 8 & 0xFF) * cx + (se >> 8 & 0xFF) * wx) * wy;
+ b = ((nw & 0xFF) * cx + (ne & 0xFF) * wx) * cy + ((sw & 0xFF) * cx + (se & 0xFF) * wx) * wy;
+ a = ((nw >> 24 & 0xFF) * cx + (ne >> 24 & 0xFF) * wx) * cy + ((sw >> 24 & 0xFF) * cx + (se >> 24 & 0xFF) * wx) * wy;
+
+ dst[dstIndex] = r > 255 ? 255 : r < 0 ? 0 : r | 0;
+ dst[dstIndex + 1] = g > 255 ? 255 : g < 0 ? 0 : g | 0;
+ dst[dstIndex + 2] = b > 255 ? 255 : b < 0 ? 0 : b | 0;
+ dst[dstIndex + 3] = a > 255 ? 255 : a < 0 ? 0 : a | 0;
+ },
+ /**
+ * @param r 0 <= n <= 255
+ * @param g 0 <= n <= 255
+ * @param b 0 <= n <= 255
+ * @return Array(h, s, l)
+ */
+ rgbToHsl: function (r, g, b) {
+ r /= 255;
+ g /= 255;
+ b /= 255;
+
+// var max = Math.max(r, g, b),
+// min = Math.min(r, g, b),
+ var max = (r > g) ? (r > b) ? r : b : (g > b) ? g : b,
+ min = (r < g) ? (r < b) ? r : b : (g < b) ? g : b,
+ chroma = max - min,
+ h = 0,
+ s = 0,
+ // Lightness
+ l = (min + max) / 2;
+
+ if (chroma !== 0) {
+ // Hue
+ if (r === max) {
+ h = (g - b) / chroma + ((g < b) ? 6 : 0);
+ } else if (g === max) {
+ h = (b - r) / chroma + 2;
+ } else {
+ h = (r - g) / chroma + 4;
+ }
+ h /= 6;
+
+ // Saturation
+ s = (l > 0.5) ? chroma / (2 - max - min) : chroma / (max + min);
+ }
+
+ return [h, s, l];
+ },
+ /**
+ * @param h 0.0 <= n <= 1.0
+ * @param s 0.0 <= n <= 1.0
+ * @param l 0.0 <= n <= 1.0
+ * @return Array(r, g, b)
+ */
+ hslToRgb: function (h, s, l) {
+ var m1, m2, hue,
+ r, g, b,
+ rgb = [];
+
+ if (s === 0) {
+ r = g = b = l * 255 + 0.5 | 0;
+ rgb = [r, g, b];
+ } else {
+ if (l <= 0.5) {
+ m2 = l * (s + 1);
+ } else {
+ m2 = l + s - l * s;
+ }
+
+ m1 = l * 2 - m2;
+ hue = h + 1 / 3;
+
+ var tmp;
+ for (var i = 0; i < 3; i += 1) {
+ if (hue < 0) {
+ hue += 1;
+ } else if (hue > 1) {
+ hue -= 1;
+ }
+
+ if (6 * hue < 1) {
+ tmp = m1 + (m2 - m1) * hue * 6;
+ } else if (2 * hue < 1) {
+ tmp = m2;
+ } else if (3 * hue < 2) {
+ tmp = m1 + (m2 - m1) * (2 / 3 - hue) * 6;
+ } else {
+ tmp = m1;
+ }
+
+ rgb[i] = tmp * 255 + 0.5 | 0;
+
+ hue -= 1 / 3;
+ }
+ }
+
+ return rgb;
+ }
+};
+
+
+ImageFilters.Translate = function (srcImageData, x, y, interpolation) {
+
+};
+ImageFilters.Scale = function (srcImageData, scaleX, scaleY, interpolation) {
+
+};
+ImageFilters.Rotate = function (srcImageData, originX, originY, angle, resize, interpolation) {
+
+};
+ImageFilters.Affine = function (srcImageData, matrix, resize, interpolation) {
+
+};
+ImageFilters.UnsharpMask = function (srcImageData, level) {
+
+};
+
+ImageFilters.ConvolutionFilter = function (srcImageData, matrixX, matrixY, matrix, divisor, bias, preserveAlpha, clamp, color, alpha) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ divisor = divisor || 1;
+ bias = bias || 0;
+
+ // default true
+ (preserveAlpha !== false) && (preserveAlpha = true);
+ (clamp !== false) && (clamp = true);
+
+ color = color || 0;
+ alpha = alpha || 0;
+
+ var index = 0,
+ rows = matrixX >> 1,
+ cols = matrixY >> 1,
+ clampR = color >> 16 & 0xFF,
+ clampG = color >> 8 & 0xFF,
+ clampB = color & 0xFF,
+ clampA = alpha * 0xFF;
+
+ for (var y = 0; y < srcHeight; y += 1) {
+ for (var x = 0; x < srcWidth; x += 1, index += 4) {
+ var r = 0,
+ g = 0,
+ b = 0,
+ a = 0,
+ replace = false,
+ mIndex = 0,
+ v;
+
+ for (var row = -rows; row <= rows; row += 1) {
+ var rowIndex = y + row,
+ offset;
+
+ if (0 <= rowIndex && rowIndex < srcHeight) {
+ offset = rowIndex * srcWidth;
+ } else if (clamp) {
+ offset = y * srcWidth;
+ } else {
+ replace = true;
+ }
+
+ for (var col = -cols; col <= cols; col += 1) {
+ var m = matrix[mIndex++];
+
+ if (m !== 0) {
+ var colIndex = x + col;
+
+ if (!(0 <= colIndex && colIndex < srcWidth)) {
+ if (clamp) {
+ colIndex = x;
+ } else {
+ replace = true;
+ }
+ }
+
+ if (replace) {
+ r += m * clampR;
+ g += m * clampG;
+ b += m * clampB;
+ a += m * clampA;
+ } else {
+ var p = (offset + colIndex) << 2;
+ r += m * srcPixels[p];
+ g += m * srcPixels[p + 1];
+ b += m * srcPixels[p + 2];
+ a += m * srcPixels[p + 3];
+ }
+ }
+ }
+ }
+
+ dstPixels[index] = (v = r / divisor + bias) > 255 ? 255 : v < 0 ? 0 : v | 0;
+ dstPixels[index + 1] = (v = g / divisor + bias) > 255 ? 255 : v < 0 ? 0 : v | 0;
+ dstPixels[index + 2] = (v = b / divisor + bias) > 255 ? 255 : v < 0 ? 0 : v | 0;
+ dstPixels[index + 3] = preserveAlpha ? srcPixels[index + 3] : (v = a / divisor + bias) > 255 ? 255 : v < 0 ? 0 : v | 0;
+ }
+ }
+
+ return dstImageData;
+};
+
+/**
+ * @param threshold 0.0 <= n <= 1.0
+ */
+ImageFilters.Binarize = function (srcImageData, threshold) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ if (isNaN(threshold)) {
+ threshold = 0.5;
+ }
+
+ threshold *= 255;
+
+ for (var i = 0; i < srcLength; i += 4) {
+ var avg = srcPixels[i] + srcPixels[i + 1] + srcPixels[i + 2] / 3;
+
+ dstPixels[i] = dstPixels[i + 1] = dstPixels[i + 2] = avg <= threshold ? 0 : 255;
+ dstPixels[i + 3] = 255;
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.BlendAdd = function (srcImageData, blendImageData, dx, dy) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data,
+ blendPixels = blendImageData.data;
+
+ var v;
+
+ for (var i = 0; i < srcLength; i += 4) {
+ dstPixels[i] = ((v = srcPixels[i] + blendPixels[i]) > 255) ? 255 : v;
+ dstPixels[i + 1] = ((v = srcPixels[i + 1] + blendPixels[i + 1]) > 255) ? 255 : v;
+ dstPixels[i + 2] = ((v = srcPixels[i + 2] + blendPixels[i + 2]) > 255) ? 255 : v;
+ dstPixels[i + 3] = 255;
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.BlendSubtract = function (srcImageData, blendImageData, dx, dy) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data,
+ blendPixels = blendImageData.data;
+
+ var v;
+
+ for (var i = 0; i < srcLength; i += 4) {
+ dstPixels[i] = ((v = srcPixels[i] - blendPixels[i]) < 0) ? 0 : v;
+ dstPixels[i + 1] = ((v = srcPixels[i + 1] - blendPixels[i + 1]) < 0) ? 0 : v;
+ dstPixels[i + 2] = ((v = srcPixels[i + 2] - blendPixels[i + 2]) < 0) ? 0 : v;
+ dstPixels[i + 3] = 255;
+ }
+
+ return dstImageData;
+};
+
+/**
+ * Algorithm based on BoxBlurFilter.java by Huxtable.com
+ * @see http://www.jhlabs.com/ip/blurring.html
+ * Copyright 2005 Huxtable.com. All rights reserved.
+ */
+ImageFilters.BoxBlur = (function () {
+ var blur = function (src, dst, width, height, radius) {
+ var tableSize = radius * 2 + 1;
+ var radiusPlus1 = radius + 1;
+ var widthMinus1 = width - 1;
+
+ var r, g, b, a;
+
+ var srcIndex = 0;
+ var dstIndex;
+ var p, next, prev;
+ var i, l, x, y,
+ nextIndex, prevIndex;
+
+ var sumTable = [];
+ for (i = 0, l = 256 * tableSize; i < l; i += 1) {
+ sumTable[i] = i / tableSize | 0;
+ }
+
+ for (y = 0; y < height; y += 1) {
+ r = g = b = a = 0;
+ dstIndex = y;
+
+ p = srcIndex << 2;
+ r += radiusPlus1 * src[p];
+ g += radiusPlus1 * src[p + 1];
+ b += radiusPlus1 * src[p + 2];
+ a += radiusPlus1 * src[p + 3];
+
+ for (i = 1; i <= radius; i += 1) {
+ p = (srcIndex + (i < width ? i : widthMinus1)) << 2;
+ r += src[p];
+ g += src[p + 1];
+ b += src[p + 2];
+ a += src[p + 3];
+ }
+
+ for (x = 0; x < width; x += 1) {
+ p = dstIndex << 2;
+ dst[p] = sumTable[r];
+ dst[p + 1] = sumTable[g];
+ dst[p + 2] = sumTable[b];
+ dst[p + 3] = sumTable[a];
+
+ nextIndex = x + radiusPlus1;
+ if (nextIndex > widthMinus1) {
+ nextIndex = widthMinus1;
+ }
+
+ prevIndex = x - radius;
+ if (prevIndex < 0) {
+ prevIndex = 0;
+ }
+
+ next = (srcIndex + nextIndex) << 2;
+ prev = (srcIndex + prevIndex) << 2;
+
+ r += src[next] - src[prev];
+ g += src[next + 1] - src[prev + 1];
+ b += src[next + 2] - src[prev + 2];
+ a += src[next + 3] - src[prev + 3];
+
+ dstIndex += height;
+ }
+ srcIndex += width;
+ }
+ };
+
+ return function (srcImageData, hRadius, vRadius, quality) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data,
+ tmpImageData = this.utils.createImageData(srcWidth, srcHeight),
+ tmpPixels = tmpImageData.data;
+
+ for (var i = 0; i < quality; i += 1) {
+ // only use the srcPixels on the first loop
+ blur(i ? dstPixels : srcPixels, tmpPixels, srcWidth, srcHeight, hRadius);
+ blur(tmpPixels, dstPixels, srcHeight, srcWidth, vRadius);
+ }
+
+ return dstImageData;
+ };
+}());
+
+/**
+ * @ param strength 1 <= n <= 4
+ */
+ImageFilters.GaussianBlur = function (srcImageData, strength) {
+ var size, matrix, divisor;
+
+ switch (strength) {
+ case 2:
+ size = 5;
+ matrix = [
+ 1, 1, 2, 1, 1,
+ 1, 2, 4, 2, 1,
+ 2, 4, 8, 4, 2,
+ 1, 2, 4, 2, 1,
+ 1, 1, 2, 1, 1
+ ];
+ divisor = 52;
+ break;
+ case 3:
+ size = 7;
+ matrix = [
+ 1, 1, 2, 2, 2, 1, 1,
+ 1, 2, 2, 4, 2, 2, 1,
+ 2, 2, 4, 8, 4, 2, 2,
+ 2, 4, 8, 16, 8, 4, 2,
+ 2, 2, 4, 8, 4, 2, 2,
+ 1, 2, 2, 4, 2, 2, 1,
+ 1, 1, 2, 2, 2, 1, 1
+ ];
+ divisor = 140;
+ break;
+ case 4:
+ size = 15;
+ matrix = [
+ 2, 2, 3, 4, 5, 5, 6, 6, 6, 5, 5, 4, 3, 2, 2,
+ 2, 3, 4, 5, 7, 7, 8, 8, 8, 7, 7, 5, 4, 3, 2,
+ 3, 4, 6, 7, 9, 10, 10, 11, 10, 10, 9, 7, 6, 4, 3,
+ 4, 5, 7, 9, 10, 12, 13, 13, 13, 12, 10, 9, 7, 5, 4,
+ 5, 7, 9, 11, 13, 14, 15, 16, 15, 14, 13, 11, 9, 7, 5,
+ 5, 7, 10, 12, 14, 16, 17, 18, 17, 16, 14, 12, 10, 7, 5,
+ 6, 8, 10, 13, 15, 17, 19, 19, 19, 17, 15, 13, 10, 8, 6,
+ 6, 8, 11, 13, 16, 18, 19, 20, 19, 18, 16, 13, 11, 8, 6,
+ 6, 8, 10, 13, 15, 17, 19, 19, 19, 17, 15, 13, 10, 8, 6,
+ 5, 7, 10, 12, 14, 16, 17, 18, 17, 16, 14, 12, 10, 7, 5,
+ 5, 7, 9, 11, 13, 14, 15, 16, 15, 14, 13, 11, 9, 7, 5,
+ 4, 5, 7, 9, 10, 12, 13, 13, 13, 12, 10, 9, 7, 5, 4,
+ 3, 4, 6, 7, 9, 10, 10, 11, 10, 10, 9, 7, 6, 4, 3,
+ 2, 3, 4, 5, 7, 7, 8, 8, 8, 7, 7, 5, 4, 3, 2,
+ 2, 2, 3, 4, 5, 5, 6, 6, 6, 5, 5, 4, 3, 2, 2
+ ];
+ divisor = 2044;
+ break;
+ default:
+ size = 3;
+ matrix = [
+ 1, 2, 1,
+ 2, 4, 2,
+ 1, 2, 1
+ ];
+ divisor = 16;
+ break;
+ }
+ return this.ConvolutionFilter(srcImageData, size, size, matrix, divisor, 0, false);
+};
+
+/**
+ * Stack Blur Algorithm by Mario Klingemann
+ * @see http://incubator.quasimondo.com/processing/fast_blur_deluxe.php
+ */
+/*
+ Copyright (c) 2010 Mario Klingemann
+
+ Permission is hereby granted, free of charge, to any person
+ obtaining a copy of this software and associated documentation
+ files (the "Software"), to deal in the Software without
+ restriction, including without limitation the rights to use,
+ copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the
+ Software is furnished to do so, subject to the following
+ conditions:
+
+ The above copyright notice and this permission notice shall be
+ included in all copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+ OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+ HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+ WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.
+ */
+ImageFilters.StackBlur = (function () {
+ var mul_table = [
+ 512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512,
+ 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512,
+ 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456,
+ 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512,
+ 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328,
+ 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456,
+ 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335,
+ 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512,
+ 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405,
+ 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328,
+ 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271,
+ 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456,
+ 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388,
+ 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335,
+ 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
+ 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259];
+
+
+ var shg_table = [
+ 9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17,
+ 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19,
+ 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
+ 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
+ 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
+ 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22,
+ 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
+ 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23,
+ 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
+ 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
+ 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
+ 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+ 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+ 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+ 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
+ 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24];
+
+ function BlurStack() {
+ this.r = 0;
+ this.g = 0;
+ this.b = 0;
+ this.a = 0;
+ this.next = null;
+ }
+
+ return function (srcImageData, radius) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.Clone(srcImageData),
+ dstPixels = dstImageData.data;
+
+ var x, y, i, p, yp, yi, yw,
+ r_sum, g_sum, b_sum, a_sum,
+ r_out_sum, g_out_sum, b_out_sum, a_out_sum,
+ r_in_sum, g_in_sum, b_in_sum, a_in_sum,
+ pr, pg, pb, pa, rbs,
+ div = radius + radius + 1,
+ w4 = srcWidth << 2,
+ widthMinus1 = srcWidth - 1,
+ heightMinus1 = srcHeight - 1,
+ radiusPlus1 = radius + 1,
+ sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2,
+ stackStart = new BlurStack(),
+ stack = stackStart,
+ stackIn, stackOut, stackEnd,
+ mul_sum = mul_table[radius],
+ shg_sum = shg_table[radius];
+
+ for (i = 1; i < div; i += 1) {
+ stack = stack.next = new BlurStack();
+ if (i == radiusPlus1) {
+ stackEnd = stack;
+ }
+ }
+
+ stack.next = stackStart;
+ yw = yi = 0;
+
+ for (y = 0; y < srcHeight; y += 1) {
+ r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
+
+ r_out_sum = radiusPlus1 * (pr = dstPixels[yi]);
+ g_out_sum = radiusPlus1 * (pg = dstPixels[yi + 1]);
+ b_out_sum = radiusPlus1 * (pb = dstPixels[yi + 2]);
+ a_out_sum = radiusPlus1 * (pa = dstPixels[yi + 3]);
+
+ r_sum += sumFactor * pr;
+ g_sum += sumFactor * pg;
+ b_sum += sumFactor * pb;
+ a_sum += sumFactor * pa;
+
+ stack = stackStart;
+
+ for (i = 0; i < radiusPlus1; i += 1) {
+ stack.r = pr;
+ stack.g = pg;
+ stack.b = pb;
+ stack.a = pa;
+ stack = stack.next;
+ }
+
+ for (i = 1; i < radiusPlus1; i += 1) {
+ p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
+ r_sum += (stack.r = (pr = dstPixels[p])) * (rbs = radiusPlus1 - i);
+ g_sum += (stack.g = (pg = dstPixels[p + 1])) * rbs;
+ b_sum += (stack.b = (pb = dstPixels[p + 2])) * rbs;
+ a_sum += (stack.a = (pa = dstPixels[p + 3])) * rbs;
+
+ r_in_sum += pr;
+ g_in_sum += pg;
+ b_in_sum += pb;
+ a_in_sum += pa;
+
+ stack = stack.next;
+ }
+
+ stackIn = stackStart;
+ stackOut = stackEnd;
+
+ for (x = 0; x < srcWidth; x += 1) {
+ dstPixels[yi] = (r_sum * mul_sum) >> shg_sum;
+ dstPixels[yi + 1] = (g_sum * mul_sum) >> shg_sum;
+ dstPixels[yi + 2] = (b_sum * mul_sum) >> shg_sum;
+ dstPixels[yi + 3] = (a_sum * mul_sum) >> shg_sum;
+
+ r_sum -= r_out_sum;
+ g_sum -= g_out_sum;
+ b_sum -= b_out_sum;
+ a_sum -= a_out_sum;
+
+ r_out_sum -= stackIn.r;
+ g_out_sum -= stackIn.g;
+ b_out_sum -= stackIn.b;
+ a_out_sum -= stackIn.a;
+
+ p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;
+
+ r_in_sum += (stackIn.r = dstPixels[p]);
+ g_in_sum += (stackIn.g = dstPixels[p + 1]);
+ b_in_sum += (stackIn.b = dstPixels[p + 2]);
+ a_in_sum += (stackIn.a = dstPixels[p + 3]);
+
+ r_sum += r_in_sum;
+ g_sum += g_in_sum;
+ b_sum += b_in_sum;
+ a_sum += a_in_sum;
+
+ stackIn = stackIn.next;
+
+ r_out_sum += (pr = stackOut.r);
+ g_out_sum += (pg = stackOut.g);
+ b_out_sum += (pb = stackOut.b);
+ a_out_sum += (pa = stackOut.a);
+
+ r_in_sum -= pr;
+ g_in_sum -= pg;
+ b_in_sum -= pb;
+ a_in_sum -= pa;
+
+ stackOut = stackOut.next;
+
+ yi += 4;
+ }
+
+ yw += srcWidth;
+ }
+
+ for (x = 0; x < srcWidth; x += 1) {
+ g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
+
+ yi = x << 2;
+ r_out_sum = radiusPlus1 * (pr = dstPixels[yi]);
+ g_out_sum = radiusPlus1 * (pg = dstPixels[yi + 1]);
+ b_out_sum = radiusPlus1 * (pb = dstPixels[yi + 2]);
+ a_out_sum = radiusPlus1 * (pa = dstPixels[yi + 3]);
+
+ r_sum += sumFactor * pr;
+ g_sum += sumFactor * pg;
+ b_sum += sumFactor * pb;
+ a_sum += sumFactor * pa;
+
+ stack = stackStart;
+
+ for (i = 0; i < radiusPlus1; i += 1) {
+ stack.r = pr;
+ stack.g = pg;
+ stack.b = pb;
+ stack.a = pa;
+ stack = stack.next;
+ }
+
+ yp = srcWidth;
+
+ for (i = 1; i <= radius; i += 1) {
+ yi = (yp + x) << 2;
+
+ r_sum += (stack.r = (pr = dstPixels[yi])) * (rbs = radiusPlus1 - i);
+ g_sum += (stack.g = (pg = dstPixels[yi + 1])) * rbs;
+ b_sum += (stack.b = (pb = dstPixels[yi + 2])) * rbs;
+ a_sum += (stack.a = (pa = dstPixels[yi + 3])) * rbs;
+
+ r_in_sum += pr;
+ g_in_sum += pg;
+ b_in_sum += pb;
+ a_in_sum += pa;
+
+ stack = stack.next;
+
+ if (i < heightMinus1) {
+ yp += srcWidth;
+ }
+ }
+
+ yi = x;
+ stackIn = stackStart;
+ stackOut = stackEnd;
+
+ for (y = 0; y < srcHeight; y += 1) {
+ p = yi << 2;
+ dstPixels[p] = (r_sum * mul_sum) >> shg_sum;
+ dstPixels[p + 1] = (g_sum * mul_sum) >> shg_sum;
+ dstPixels[p + 2] = (b_sum * mul_sum) >> shg_sum;
+ dstPixels[p + 3] = (a_sum * mul_sum) >> shg_sum;
+
+ r_sum -= r_out_sum;
+ g_sum -= g_out_sum;
+ b_sum -= b_out_sum;
+ a_sum -= a_out_sum;
+
+ r_out_sum -= stackIn.r;
+ g_out_sum -= stackIn.g;
+ b_out_sum -= stackIn.b;
+ a_out_sum -= stackIn.a;
+
+ p = (x + (((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * srcWidth)) << 2;
+
+ r_sum += (r_in_sum += (stackIn.r = dstPixels[p]));
+ g_sum += (g_in_sum += (stackIn.g = dstPixels[p + 1]));
+ b_sum += (b_in_sum += (stackIn.b = dstPixels[p + 2]));
+ a_sum += (a_in_sum += (stackIn.a = dstPixels[p + 3]));
+
+ stackIn = stackIn.next;
+
+ r_out_sum += (pr = stackOut.r);
+ g_out_sum += (pg = stackOut.g);
+ b_out_sum += (pb = stackOut.b);
+ a_out_sum += (pa = stackOut.a);
+
+ r_in_sum -= pr;
+ g_in_sum -= pg;
+ b_in_sum -= pb;
+ a_in_sum -= pa;
+
+ stackOut = stackOut.next;
+
+ yi += srcWidth;
+ }
+ }
+
+ return dstImageData;
+ }
+}());
+
+/**
+ * TV based algorithm
+ */
+ImageFilters.Brightness = function (srcImageData, brightness) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ value += brightness;
+ return (value > 255) ? 255 : value;
+ });
+
+ return dstImageData;
+};
+
+/**
+ * GIMP algorithm modified. pretty close to fireworks
+ * @param brightness -100 <= n <= 100
+ * @param contrast -100 <= n <= 100
+ */
+ImageFilters.BrightnessContrastGimp = function (srcImageData, brightness, contrast) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data,
+ p4 = Math.PI / 4;
+
+ // fix to -1 <= n <= 1
+ brightness /= 100;
+
+ // fix to -99 <= n <= 99
+ contrast *= 0.99;
+ // fix to -1 < n < 1
+ contrast /= 100;
+ // apply GIMP formula
+ contrast = Math.tan((contrast + 1) * p4);
+
+ // get the average color
+ for (var avg = 0, i = 0; i < srcLength; i += 4) {
+ avg += (srcPixels[i] * 19595 + srcPixels[i + 1] * 38470 + srcPixels[i + 2] * 7471) >> 16;
+ }
+ avg = avg / (srcLength / 4);
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ if (brightness < 0) {
+ value = value * (1 + brightness);
+ } else if (brightness > 0) {
+ value = value + ((255 - value) * brightness);
+ }
+ //value += brightness;
+
+ if (contrast !== 0) {
+ value = (value - avg) * contrast + avg;
+ }
+ return value + 0.5 | 0;
+ });
+ return dstImageData;
+};
+
+/**
+ * more like the new photoshop algorithm
+ * @param brightness -100 <= n <= 100
+ * @param contrast -100 <= n <= 100
+ */
+ImageFilters.BrightnessContrastPhotoshop = function (srcImageData, brightness, contrast) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ // fix to 0 <= n <= 2;
+ brightness = (brightness + 100) / 100;
+ contrast = (contrast + 100) / 100;
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ value *= brightness;
+ value = (value - 127.5) * contrast + 127.5;
+ return value + 0.5 | 0;
+ });
+ return dstImageData;
+};
+
+ImageFilters.Channels = function (srcImageData, channel) {
+ var matrix;
+
+ switch (channel) {
+ case 2: // green
+ matrix = [
+ 0, 1, 0, 0, 0,
+ 0, 1, 0, 0, 0,
+ 0, 1, 0, 0, 0,
+ 0, 0, 0, 1, 0
+ ];
+ break;
+ case 3: // blue
+ matrix = [
+ 0, 0, 1, 0, 0,
+ 0, 0, 1, 0, 0,
+ 0, 0, 1, 0, 0,
+ 0, 0, 0, 1, 0
+ ];
+ break;
+ default: // red
+ matrix = [
+ 1, 0, 0, 0, 0,
+ 1, 0, 0, 0, 0,
+ 1, 0, 0, 0, 0,
+ 0, 0, 0, 1, 0
+ ];
+ break;
+
+ }
+
+ return this.ColorMatrixFilter(srcImageData, matrix);
+};
+
+ImageFilters.Clone = function (srcImageData) {
+ return this.Copy(srcImageData, this.utils.createImageData(srcImageData.width, srcImageData.height));
+};
+
+/**
+ * slower
+ */
+ImageFilters.CloneBuiltin = function (srcImageData) {
+ var srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ canvas = this.utils.getSampleCanvas(),
+ context = this.utils.getSampleContext(),
+ dstImageData;
+
+ canvas.width = srcWidth;
+ canvas.height = srcHeight;
+
+ context.putImageData(srcImageData, 0, 0);
+ dstImageData = context.getImageData(0, 0, srcWidth, srcHeight);
+
+ canvas.width = 0;
+ canvas.height = 0;
+
+ return dstImageData;
+};
+
+ImageFilters.ColorMatrixFilter = function (srcImageData, matrix) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ var m0 = matrix[0],
+ m1 = matrix[1],
+ m2 = matrix[2],
+ m3 = matrix[3],
+ m4 = matrix[4],
+ m5 = matrix[5],
+ m6 = matrix[6],
+ m7 = matrix[7],
+ m8 = matrix[8],
+ m9 = matrix[9],
+ m10 = matrix[10],
+ m11 = matrix[11],
+ m12 = matrix[12],
+ m13 = matrix[13],
+ m14 = matrix[14],
+ m15 = matrix[15],
+ m16 = matrix[16],
+ m17 = matrix[17],
+ m18 = matrix[18],
+ m19 = matrix[19];
+
+ var value, i, r, g, b, a;
+ for (i = 0; i < srcLength; i += 4) {
+ r = srcPixels[i];
+ g = srcPixels[i + 1];
+ b = srcPixels[i + 2];
+ a = srcPixels[i + 3];
+
+ dstPixels[i] = (value = r * m0 + g * m1 + b * m2 + a * m3 + m4) > 255 ? 255 : value < 0 ? 0 : value | 0;
+ dstPixels[i + 1] = (value = r * m5 + g * m6 + b * m7 + a * m8 + m9) > 255 ? 255 : value < 0 ? 0 : value | 0;
+ dstPixels[i + 2] = (value = r * m10 + g * m11 + b * m12 + a * m13 + m14) > 255 ? 255 : value < 0 ? 0 : value | 0;
+ dstPixels[i + 3] = (value = r * m15 + g * m16 + b * m17 + a * m18 + m19) > 255 ? 255 : value < 0 ? 0 : value | 0;
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.ColorTransformFilter = function (
+ srcImageData, redMultiplier, greenMultiplier, blueMultiplier, alphaMultiplier,
+ redOffset, greenOffset, blueOffset, alphaOffset) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ var i, v;
+ for (i = 0; i < srcLength; i += 4) {
+ dstPixels[i] = (v = srcPixels[i] * redMultiplier + redOffset) > 255 ? 255 : v < 0 ? 0 : v;
+ dstPixels[i + 1] = (v = srcPixels[i + 1] * greenMultiplier + greenOffset) > 255 ? 255 : v < 0 ? 0 : v;
+ dstPixels[i + 2] = (v = srcPixels[i + 2] * blueMultiplier + blueOffset) > 255 ? 255 : v < 0 ? 0 : v;
+ dstPixels[i + 3] = (v = srcPixels[i + 3] * alphaMultiplier + alphaOffset) > 255 ? 255 : v < 0 ? 0 : v;
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.Copy = function (srcImageData, dstImageData) {
+ var srcPixels = srcImageData.data,
+ srcLength = srcPixels.length,
+ dstPixels = dstImageData.data;
+
+ while (srcLength--) {
+ dstPixels[srcLength] = srcPixels[srcLength];
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.Crop = function (srcImageData, x, y, width, height) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(width, height),
+ dstPixels = dstImageData.data;
+
+ var srcLeft = Math.max(x, 0),
+ srcTop = Math.max(y, 0),
+ srcRight = Math.min(x + width, srcWidth),
+ srcBottom = Math.min(y + height, srcHeight),
+ dstLeft = srcLeft - x,
+ dstTop = srcTop - y,
+ srcRow, srcCol, srcIndex, dstIndex;
+
+ for (srcRow = srcTop, dstRow = dstTop; srcRow < srcBottom; srcRow += 1, dstRow += 1) {
+ for (srcCol = srcLeft, dstCol = dstLeft; srcCol < srcRight; srcCol += 1, dstCol += 1) {
+ srcIndex = (srcRow * srcWidth + srcCol) << 2;
+ dstIndex = (dstRow * width + dstCol) << 2;
+ dstPixels[dstIndex] = srcPixels[srcIndex];
+ dstPixels[dstIndex + 1] = srcPixels[srcIndex + 1];
+ dstPixels[dstIndex + 2] = srcPixels[srcIndex + 2];
+ dstPixels[dstIndex + 3] = srcPixels[srcIndex + 3];
+ }
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.CropBuiltin = function (srcImageData, x, y, width, height) {
+ var srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ canvas = this.utils.getSampleCanvas(),
+ context = this.utils.getSampleContext();
+
+ canvas.width = srcWidth;
+ canvas.height = srcHeight;
+ context.putImageData(srcImageData, 0, 0);
+ var result = context.getImageData(x, y, width, height);
+
+ canvas.width = 0;
+ canvas.height = 0;
+
+ return result;
+};
+
+/**
+ * sets to the average of the highest and lowest contrast
+ */
+ImageFilters.Desaturate = function (srcImageData) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ for (var i = 0; i < srcLength; i += 4) {
+ var r = srcPixels[i],
+ g = srcPixels[i + 1],
+ b = srcPixels[i + 2],
+ max = (r > g) ? (r > b) ? r : b : (g > b) ? g : b,
+ min = (r < g) ? (r < b) ? r : b : (g < b) ? g : b,
+ avg = ((max + min) / 2) + 0.5 | 0;
+
+ dstPixels[i] = dstPixels[i + 1] = dstPixels[i + 2] = avg;
+ dstPixels[i + 3] = srcPixels[i + 3];
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.DisplacementMapFilter = function (srcImageData, mapImageData, mapX, mapY, componentX, componentY, scaleX, scaleY, mode) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = ImageFilters.Clone(srcImageData),
+ dstPixels = dstImageData.data;
+
+ mapX || (mapX = 0);
+ mapY || (mapY = 0);
+ componentX || (componentX = 0); // red?
+ componentY || (componentY = 0);
+ scaleX || (scaleX = 0);
+ scaleY || (scaleY = 0);
+ mode || (mode = 2); // wrap
+
+ var mapWidth = mapImageData.width,
+ mapHeight = mapImageData.height,
+ mapPixels = mapImageData.data,
+ mapRight = mapWidth + mapX,
+ mapBottom = mapHeight + mapY,
+ dstIndex, srcIndex, mapIndex,
+ cx, cy, tx, ty, x, y;
+
+ for (x = 0; x < srcWidth; x += 1) {
+ for (y = 0; y < srcHeight; y += 1) {
+
+ dstIndex = (y * srcWidth + x) << 2;
+
+ if (x < mapX || y < mapY || x >= mapRight || y >= mapBottom) {
+ // out of the map bounds
+ // copy src to dst
+ srcIndex = dstIndex;
+ } else {
+ // apply map
+ mapIndex = ((y - mapY) * mapWidth + (x - mapX)) << 2;
+
+ // tx = x + ((componentX(x, y) - 128) * scaleX) / 256
+ cx = mapPixels[mapIndex + componentX];
+ tx = x + (((cx - 128) * scaleX) >> 8);
+
+ // tx = y + ((componentY(x, y) - 128) * scaleY) / 256
+ cy = mapPixels[mapIndex + componentY];
+ ty = y + (((cy - 128) * scaleY) >> 8);
+
+ srcIndex = ImageFilters.utils.getPixelIndex(tx + 0.5 | 0, ty + 0.5 | 0, srcWidth, srcHeight, mode);
+ if (srcIndex === null) {
+ // if mode == ignore and (tx,ty) is out of src bounds
+ // then copy (x,y) to dst
+ srcIndex = dstIndex;
+ }
+ }
+
+ dstPixels[dstIndex] = srcPixels[srcIndex];
+ dstPixels[dstIndex + 1] = srcPixels[srcIndex + 1];
+ dstPixels[dstIndex + 2] = srcPixels[srcIndex + 2];
+ dstPixels[dstIndex + 3] = srcPixels[srcIndex + 3];
+ }
+ }
+
+ return dstImageData;
+};
+
+/**
+ * Floyd-Steinberg algorithm
+ * @param levels 2 <= n <= 255
+ */
+ImageFilters.Dither = function (srcImageData, levels) {
+ var srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ dstImageData = this.Clone(srcImageData),
+ dstPixels = dstImageData.data;
+
+ levels = levels < 2 ? 2 : levels > 255 ? 255 : levels;
+
+ // Build a color map using the same algorithm as the posterize filter.
+ var posterize,
+ levelMap = [],
+ levelsMinus1 = levels - 1,
+ j = 0,
+ k = 0,
+ i;
+
+ for (i = 0; i < levels; i += 1) {
+ levelMap[i] = (255 * i) / levelsMinus1;
+ }
+
+ posterize = this.utils.buildMap(function (value) {
+ var ret = levelMap[j];
+
+ k += levels;
+
+ if (k > 255) {
+ k -= 255;
+ j += 1;
+ }
+
+ return ret;
+ });
+
+ // Apply the dithering algorithm to each pixel
+ var x, y,
+ index,
+ old_r, old_g, old_b,
+ new_r, new_g, new_b,
+ err_r, err_g, err_b,
+ nbr_r, nbr_g, nbr_b,
+ srcWidthMinus1 = srcWidth - 1,
+ srcHeightMinus1 = srcHeight - 1,
+ A = 7 / 16,
+ B = 3 / 16,
+ C = 5 / 16,
+ D = 1 / 16;
+
+ for (y = 0; y < srcHeight; y += 1) {
+ for (x = 0; x < srcWidth; x += 1) {
+ // Get the current pixel.
+ index = (y * srcWidth + x) << 2;
+
+ old_r = dstPixels[index];
+ old_g = dstPixels[index + 1];
+ old_b = dstPixels[index + 2];
+
+ // Quantize using the color map
+ new_r = posterize[old_r];
+ new_g = posterize[old_g];
+ new_b = posterize[old_b];
+
+ // Set the current pixel.
+ dstPixels[index] = new_r;
+ dstPixels[index + 1] = new_g;
+ dstPixels[index + 2] = new_b;
+
+ // Quantization errors
+ err_r = old_r - new_r;
+ err_g = old_g - new_g;
+ err_b = old_b - new_b;
+
+ // Apply the matrix.
+ // x + 1, y
+ index += 1 << 2;
+ if (x < srcWidthMinus1) {
+ nbr_r = dstPixels[index] + A * err_r;
+ nbr_g = dstPixels[index + 1] + A * err_g;
+ nbr_b = dstPixels[index + 2] + A * err_b;
+
+ dstPixels[index] = nbr_r > 255 ? 255 : nbr_r < 0 ? 0 : nbr_r | 0;
+ dstPixels[index + 1] = nbr_g > 255 ? 255 : nbr_g < 0 ? 0 : nbr_g | 0;
+ dstPixels[index + 2] = nbr_b > 255 ? 255 : nbr_b < 0 ? 0 : nbr_b | 0;
+ }
+
+ // x - 1, y + 1
+ index += (srcWidth - 2) << 2;
+ if (x > 0 && y < srcHeightMinus1) {
+ nbr_r = dstPixels[index] + B * err_r;
+ nbr_g = dstPixels[index + 1] + B * err_g;
+ nbr_b = dstPixels[index + 2] + B * err_b;
+
+ dstPixels[index] = nbr_r > 255 ? 255 : nbr_r < 0 ? 0 : nbr_r | 0;
+ dstPixels[index + 1] = nbr_g > 255 ? 255 : nbr_g < 0 ? 0 : nbr_g | 0;
+ dstPixels[index + 2] = nbr_b > 255 ? 255 : nbr_b < 0 ? 0 : nbr_b | 0;
+ }
+
+ // x, y + 1
+ index += 1 << 2;
+ if (y < srcHeightMinus1) {
+ nbr_r = dstPixels[index] + C * err_r;
+ nbr_g = dstPixels[index + 1] + C * err_g;
+ nbr_b = dstPixels[index + 2] + C * err_b;
+
+ dstPixels[index] = nbr_r > 255 ? 255 : nbr_r < 0 ? 0 : nbr_r | 0;
+ dstPixels[index + 1] = nbr_g > 255 ? 255 : nbr_g < 0 ? 0 : nbr_g | 0;
+ dstPixels[index + 2] = nbr_b > 255 ? 255 : nbr_b < 0 ? 0 : nbr_b | 0;
+ }
+
+ // x + 1, y + 1
+ index += 1 << 2;
+ if (x < srcWidthMinus1 && y < srcHeightMinus1) {
+ nbr_r = dstPixels[index] + D * err_r;
+ nbr_g = dstPixels[index + 1] + D * err_g;
+ nbr_b = dstPixels[index + 2] + D * err_b;
+
+ dstPixels[index] = nbr_r > 255 ? 255 : nbr_r < 0 ? 0 : nbr_r | 0;
+ dstPixels[index + 1] = nbr_g > 255 ? 255 : nbr_g < 0 ? 0 : nbr_g | 0;
+ dstPixels[index + 2] = nbr_b > 255 ? 255 : nbr_b < 0 ? 0 : nbr_b | 0;
+ }
+ }
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.Edge = function (srcImageData) {
+ //pretty close to Fireworks 'Find Edges' effect
+ return this.ConvolutionFilter(srcImageData, 3, 3, [
+ -1, -1, -1,
+ -1, 8, -1,
+ -1, -1, -1
+ ]);
+};
+
+ImageFilters.Emboss = function (srcImageData) {
+ return this.ConvolutionFilter(srcImageData, 3, 3, [
+ -2, -1, 0,
+ -1, 1, 1,
+ 0, 1, 2
+ ]);
+};
+
+ImageFilters.Enrich = function (srcImageData) {
+ return this.ConvolutionFilter(srcImageData, 3, 3, [
+ 0, -2, 0,
+ -2, 20, -2,
+ 0, -2, 0
+ ], 10, -40);
+};
+
+ImageFilters.Flip = function (srcImageData, vertical) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ var x, y, srcIndex, dstIndex, i;
+
+ for (y = 0; y < srcHeight; y += 1) {
+ for (x = 0; x < srcWidth; x += 1) {
+ srcIndex = (y * srcWidth + x) << 2;
+ if (vertical) {
+ dstIndex = ((srcHeight - y - 1) * srcWidth + x) << 2;
+ } else {
+ dstIndex = (y * srcWidth + (srcWidth - x - 1)) << 2;
+ }
+
+ dstPixels[dstIndex] = srcPixels[srcIndex];
+ dstPixels[dstIndex + 1] = srcPixels[srcIndex + 1];
+ dstPixels[dstIndex + 2] = srcPixels[srcIndex + 2];
+ dstPixels[dstIndex + 3] = srcPixels[srcIndex + 3];
+ }
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.Gamma = function (srcImageData, gamma) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ value = (255 * Math.pow(value / 255, 1 / gamma) + 0.5);
+ return value > 255 ? 255 : value + 0.5 | 0;
+ });
+
+ return dstImageData;
+};
+
+ImageFilters.GrayScale = function (srcImageData) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ for (var i = 0; i < srcLength; i += 4) {
+ var intensity = (srcPixels[i] * 19595 + srcPixels[i + 1] * 38470 + srcPixels[i + 2] * 7471) >> 16;
+ //var intensity = (srcPixels[i] * 0.3086 + srcPixels[i + 1] * 0.6094 + srcPixels[i + 2] * 0.0820) | 0;
+ dstPixels[i] = dstPixels[i + 1] = dstPixels[i + 2] = intensity;
+ dstPixels[i + 3] = srcPixels[i + 3];
+ }
+
+ return dstImageData;
+};
+
+/**
+ * @param hueDelta -180 <= n <= 180
+ * @param satDelta -100 <= n <= 100
+ * @param lightness -100 <= n <= 100
+ */
+ImageFilters.HSLAdjustment = function (srcImageData, hueDelta, satDelta, lightness) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ hueDelta /= 360;
+ satDelta /= 100;
+ lightness /= 100;
+
+ var rgbToHsl = this.utils.rgbToHsl;
+ var hslToRgb = this.utils.hslToRgb;
+ var h, s, l, hsl, rgb, i;
+
+ for (i = 0; i < srcLength; i += 4) {
+ // convert to HSL
+ hsl = rgbToHsl(srcPixels[i], srcPixels[i + 1], srcPixels[i + 2]);
+
+ // hue
+ h = hsl[0] + hueDelta;
+ while (h < 0) {
+ h += 1;
+ }
+ while (h > 1) {
+ h -= 1;
+ }
+
+ // saturation
+ s = hsl[1] + hsl[1] * satDelta;
+ if (s < 0) {
+ s = 0;
+ } else if (s > 1) {
+ s = 1;
+ }
+
+ // lightness
+ l = hsl[2];
+ if (lightness > 0) {
+ l += (1 - l) * lightness;
+ } else if (lightness < 0) {
+ l += l * lightness;
+ }
+
+ // convert back to rgb
+ rgb = hslToRgb(h, s, l);
+
+ dstPixels[i] = rgb[0];
+ dstPixels[i + 1] = rgb[1];
+ dstPixels[i + 2] = rgb[2];
+ dstPixels[i + 3] = srcPixels[i + 3];
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.Invert = function (srcImageData) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ return 255 - value;
+ });
+
+ return dstImageData;
+};
+
+ImageFilters.Mosaic = function (srcImageData, blockSize) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ var cols = Math.ceil(srcWidth / blockSize),
+ rows = Math.ceil(srcHeight / blockSize),
+ row, col,
+ x_start, x_end, y_start, y_end,
+ x, y, yIndex, index, size,
+ r, g, b, a;
+
+ for (row = 0; row < rows; row += 1) {
+ y_start = row * blockSize;
+ y_end = y_start + blockSize;
+
+ if (y_end > srcHeight) {
+ y_end = srcHeight;
+ }
+
+ for (col = 0; col < cols; col += 1) {
+ x_start = col * blockSize;
+ x_end = x_start + blockSize;
+
+ if (x_end > srcWidth) {
+ x_end = srcWidth;
+ }
+
+ // get the average color from the src
+ r = g = b = a = 0;
+ size = (x_end - x_start) * (y_end - y_start);
+
+ for (y = y_start; y < y_end; y += 1) {
+ yIndex = y * srcWidth;
+
+ for (x = x_start; x < x_end; x += 1) {
+ index = (yIndex + x) << 2;
+ r += srcPixels[index];
+ g += srcPixels[index + 1];
+ b += srcPixels[index + 2];
+ a += srcPixels[index + 3];
+ }
+ }
+
+ r = (r / size) + 0.5 | 0;
+ g = (g / size) + 0.5 | 0;
+ b = (b / size) + 0.5 | 0;
+ a = (a / size) + 0.5 | 0;
+
+ // fill the dst with that color
+ for (y = y_start; y < y_end; y += 1) {
+ yIndex = y * srcWidth;
+
+ for (x = x_start; x < x_end; x += 1) {
+ index = (yIndex + x) << 2;
+ dstPixels[index] = r;
+ dstPixels[index + 1] = g;
+ dstPixels[index + 2] = b;
+ dstPixels[index + 3] = a;
+ }
+ }
+ }
+ }
+
+ return dstImageData;
+};
+
+/**
+ * @param range 1 <= n <= 5
+ * @param levels 1 <= n <= 256
+ */
+ImageFilters.Oil = function (srcImageData, range, levels) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ var index = 0,
+ rh = [],
+ gh = [],
+ bh = [],
+ rt = [],
+ gt = [],
+ bt = [],
+ x, y, i, row, col,
+ rowIndex, colIndex, offset, srcIndex,
+ sr, sg, sb, ri, gi, bi,
+ r, g, b;
+
+ for (y = 0; y < srcHeight; y += 1) {
+ for (x = 0; x < srcWidth; x += 1) {
+ for (i = 0; i < levels; i += 1) {
+ rh[i] = gh[i] = bh[i] = rt[i] = gt[i] = bt[i] = 0;
+ }
+
+ for (row = -range; row <= range; row += 1) {
+ rowIndex = y + row;
+
+ if (rowIndex < 0 || rowIndex >= srcHeight) {
+ continue;
+ }
+
+ offset = rowIndex * srcWidth;
+
+ for (col = -range; col <= range; col += 1) {
+ colIndex = x + col;
+ if (colIndex < 0 || colIndex >= srcWidth) {
+ continue;
+ }
+
+ srcIndex = (offset + colIndex) << 2;
+ sr = srcPixels[srcIndex];
+ sg = srcPixels[srcIndex + 1];
+ sb = srcPixels[srcIndex + 2];
+ ri = (sr * levels) >> 8;
+ gi = (sg * levels) >> 8;
+ bi = (sb * levels) >> 8;
+ rt[ri] += sr;
+ gt[gi] += sg;
+ bt[bi] += sb;
+ rh[ri] += 1;
+ gh[gi] += 1;
+ bh[bi] += 1;
+ }
+ }
+
+ r = g = b = 0;
+ for (i = 1; i < levels; i += 1) {
+ if (rh[i] > rh[r]) {
+ r = i;
+ }
+ if (gh[i] > gh[g]) {
+ g = i;
+ }
+ if (bh[i] > bh[b]) {
+ b = i;
+ }
+ }
+
+ dstPixels[index] = rt[r] / rh[r] | 0;
+ dstPixels[index + 1] = gt[g] / gh[g] | 0;
+ dstPixels[index + 2] = bt[b] / bh[b] | 0;
+ dstPixels[index + 3] = srcPixels[index + 3];
+ index += 4;
+ }
+ }
+
+ return dstImageData;
+};
+
+ImageFilters.OpacityFilter = function (srcImageData, opacity) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ for (var i = 0; i < srcLength; i += 4) {
+ dstPixels[i] = srcPixels[i];
+ dstPixels[i + 1] = srcPixels[i + 1];
+ dstPixels[i + 2] = srcPixels[i + 2];
+ dstPixels[i + 3] = opacity;
+ }
+
+ return dstImageData;
+};
+
+/**
+ * @param levels 2 <= n <= 255
+ */
+ImageFilters.Posterize = function (srcImageData, levels) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ levels = levels < 2 ? 2 : levels > 255 ? 255 : levels;
+
+ var levelMap = [],
+ levelsMinus1 = levels - 1,
+ j = 0,
+ k = 0,
+ i;
+
+ for (i = 0; i < levels; i += 1) {
+ levelMap[i] = (255 * i) / levelsMinus1;
+ }
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ var ret = levelMap[j];
+
+ k += levels;
+
+ if (k > 255) {
+ k -= 255;
+ j += 1;
+ }
+
+ return ret;
+ });
+
+ return dstImageData;
+};
+
+/**
+ * @param scale 0.0 <= n <= 5.0
+ */
+ImageFilters.Rescale = function (srcImageData, scale) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ value *= scale;
+ return (value > 255) ? 255 : value + 0.5 | 0;
+ });
+
+ return dstImageData;
+};
+
+/**
+ * Nearest neighbor
+ */
+ImageFilters.ResizeNearestNeighbor = function (srcImageData, width, height) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(width, height),
+ dstPixels = dstImageData.data;
+
+ var xFactor = srcWidth / width,
+ yFactor = srcHeight / height,
+ dstIndex = 0, srcIndex,
+ x, y, offset;
+
+ for (y = 0; y < height; y += 1) {
+ offset = ((y * yFactor) | 0) * srcWidth;
+
+ for (x = 0; x < width; x += 1) {
+ srcIndex = (offset + x * xFactor) << 2;
+
+ dstPixels[dstIndex] = srcPixels[srcIndex];
+ dstPixels[dstIndex + 1] = srcPixels[srcIndex + 1];
+ dstPixels[dstIndex + 2] = srcPixels[srcIndex + 2];
+ dstPixels[dstIndex + 3] = srcPixels[srcIndex + 3];
+ dstIndex += 4;
+ }
+ }
+
+ return dstImageData;
+};
+
+/**
+ * Bilinear
+ */
+ImageFilters.Resize = function (srcImageData, width, height) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(width, height),
+ dstPixels = dstImageData.data;
+
+ var xFactor = srcWidth / width,
+ yFactor = srcHeight / height,
+ dstIndex = 0,
+ x, y;
+
+ for (y = 0; y < height; y += 1) {
+ for (x = 0; x < width; x += 1) {
+ this.utils.copyBilinear(srcPixels, x * xFactor, y * yFactor, srcWidth, srcHeight, dstPixels, dstIndex, 0);
+ dstIndex += 4;
+ }
+ }
+
+ return dstImageData;
+};
+
+
+/**
+ * faster resizing using the builtin context.scale()
+ * the resizing algorithm may be different between browsers
+ * this might not work if the image is transparent.
+ * to fix that we probably need two contexts
+ */
+ImageFilters.ResizeBuiltin = function (srcImageData, width, height) {
+ var srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ canvas = this.utils.getSampleCanvas(),
+ context = this.utils.getSampleContext(),
+ dstImageData;
+
+ canvas.width = Math.max(srcWidth, width);
+ canvas.height = Math.max(srcHeight, height);
+ context.save();
+
+ context.putImageData(srcImageData, 0, 0);
+ context.scale(width / srcWidth, height / srcHeight);
+ context.drawImage(canvas, 0, 0);
+
+ dstImageData = context.getImageData(0, 0, width, height);
+
+ context.restore();
+ canvas.width = 0;
+ canvas.height = 0;
+
+ return dstImageData;
+};
+
+ImageFilters.Sepia = function (srcImageData) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ var r, g, b, i, value;
+
+ for (i = 0; i < srcLength; i += 4) {
+ r = srcPixels[i];
+ g = srcPixels[i + 1];
+ b = srcPixels[i + 2];
+
+ dstPixels[i] = (value = r * 0.393 + g * 0.769 + b * 0.189) > 255 ? 255 : value < 0 ? 0 : value + 0.5 | 0;
+ dstPixels[i + 1] = (value = r * 0.349 + g * 0.686 + b * 0.168) > 255 ? 255 : value < 0 ? 0 : value + 0.5 | 0;
+ dstPixels[i + 2] = (value = r * 0.272 + g * 0.534 + b * 0.131) > 255 ? 255 : value < 0 ? 0 : value + 0.5 | 0;
+ dstPixels[i + 3] = srcPixels[i + 3];
+ }
+
+ return dstImageData;
+};
+
+/**
+ * @param factor 1 <= n
+ */
+ImageFilters.Sharpen = function (srcImageData, factor) {
+ //Convolution formula from VIGRA
+ return this.ConvolutionFilter(srcImageData, 3, 3, [
+ -factor / 16, -factor / 8, -factor / 16,
+ -factor / 8, factor * 0.75 + 1, -factor / 8,
+ -factor / 16, -factor / 8, -factor / 16
+ ]);
+};
+
+ImageFilters.Solarize = function (srcImageData) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ this.utils.mapRGB(srcPixels, dstPixels, function (value) {
+ return value > 127 ? (value - 127.5) * 2 : (127.5 - value) * 2;
+ });
+
+ return dstImageData;
+};
+
+ImageFilters.Transpose = function (srcImageData) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcHeight, srcWidth),
+ dstPixels = dstImageData.data;
+
+ var srcIndex, dstIndex;
+
+ for (y = 0; y < srcHeight; y += 1) {
+ for (x = 0; x < srcWidth; x += 1) {
+ srcIndex = (y * srcWidth + x) << 2;
+ dstIndex = (x * srcHeight + y) << 2;
+
+ dstPixels[dstIndex] = srcPixels[srcIndex];
+ dstPixels[dstIndex + 1] = srcPixels[srcIndex + 1];
+ dstPixels[dstIndex + 2] = srcPixels[srcIndex + 2];
+ dstPixels[dstIndex + 3] = srcPixels[srcIndex + 3];
+ }
+ }
+
+ return dstImageData;
+};
+
+/**
+ * @param centerX 0.0 <= n <= 1.0
+ * @param centerY 0.0 <= n <= 1.0
+ * @param radius
+ * @param angle(degree)
+ * @param smooth
+ */
+ImageFilters.Twril = function (srcImageData, centerX, centerY, radius, angle, edge, smooth) {
+ var srcPixels = srcImageData.data,
+ srcWidth = srcImageData.width,
+ srcHeight = srcImageData.height,
+ srcLength = srcPixels.length,
+ dstImageData = this.utils.createImageData(srcWidth, srcHeight),
+ dstPixels = dstImageData.data;
+
+ //convert position to px
+ centerX = srcWidth * centerX;
+ centerY = srcHeight * centerY;
+
+ // degree to radian
+ angle *= (Math.PI / 180);
+
+ var radius2 = radius * radius,
+ max_y = srcHeight - 1,
+ max_x = srcWidth - 1,
+ dstIndex = 0,
+ x, y, dx, dy, distance, a, tx, ty, srcIndex, pixel, i;
+
+ for (y = 0; y < srcHeight; y += 1) {
+ for (x = 0; x < srcWidth; x += 1) {
+ dx = x - centerX;
+ dy = y - centerY;
+ distance = dx * dx + dy * dy;
+
+ if (distance > radius2) {
+ // out of the effected area. just copy the pixel
+ dstPixels[dstIndex] = srcPixels[dstIndex];
+ dstPixels[dstIndex + 1] = srcPixels[dstIndex + 1];
+ dstPixels[dstIndex + 2] = srcPixels[dstIndex + 2];
+ dstPixels[dstIndex + 3] = srcPixels[dstIndex + 3];
+ } else {
+ // main formula
+ distance = Math.sqrt(distance);
+ a = Math.atan2(dy, dx) + (angle * (radius - distance)) / radius;
+ tx = centerX + distance * Math.cos(a);
+ ty = centerY + distance * Math.sin(a);
+
+ // copy target pixel
+ if (smooth) {
+ // bilinear
+ this.utils.copyBilinear(srcPixels, tx, ty, srcWidth, srcHeight, dstPixels, dstIndex, edge);
+ } else {
+ // nearest neighbor
+ // round tx, ty
+ srcIndex = ((ty + 0.5 | 0) * srcWidth + (tx + 0.5 | 0)) << 2;
+ dstPixels[dstIndex] = srcPixels[srcIndex];
+ dstPixels[dstIndex + 1] = srcPixels[srcIndex + 1];
+ dstPixels[dstIndex + 2] = srcPixels[srcIndex + 2];
+ dstPixels[dstIndex + 3] = srcPixels[srcIndex + 3];
+ }
+ }
+
+ dstIndex += 4;
+ }
+ }
+
+ return dstImageData;
+};
+
+export default ImageFilters;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/jquery.translate.js b/paintplus/frontend/src/js/libs/jquery.translate.js
new file mode 100644
index 0000000..b5cfa21
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/jquery.translate.js
@@ -0,0 +1,65 @@
+// https://github.com/jorgejeferson/translate.js/tree/39be8237666a76035fc210a28d8e431f1416579e
+(function ($) {
+ $.fn.translate = function (options) {
+ var that = this; //a reference to ourselves
+ var settings = {
+ css: "trn",
+ attrs: ["alt", "placeholder", "title"],
+ lang: "pt",
+ langDefault: "pt",
+ };
+ settings = $.extend(settings, options || {});
+ if (settings.css.lastIndexOf(".", 0) !== 0) { //doesn't start with '.'
+ settings.css = "." + settings.css;
+ }
+ var t = settings.t;
+ //public methods
+ this.lang = function (l) {
+ if (l) {
+ settings.lang = l;
+ this.translate(settings); //translate everything
+ }
+ return settings.lang;
+ };
+ this.get = function (index) {
+ var res = index;
+
+ try {
+ res = t[index][settings.lang];
+ }
+ catch (err) { //not found, return index
+ return index;
+ }
+ if (res) {
+ return res;
+ }
+ else {
+ return index;
+ }
+ };
+ this.g = this.get;
+ //main
+ this.find(settings.css).each(function (i) {
+ var $this = $(this);
+
+ var trn_key = $this.attr("data-trn-key");
+ if (!trn_key) {
+ trn_key = $this.html();
+ $this.attr("data-trn-key", trn_key);
+ }
+ // Filtering attr
+ $.each(this.attributes, function () {
+ if ($.inArray(this.name, settings.attrs) !== -1) {
+ var trn_attr_key = $this.attr("data-trn-attr");
+ if (!trn_attr_key) {
+ trn_attr_key = $this.attr(this.name);
+ $this.attr("data-trn-attr", trn_attr_key);
+ }
+ $this.attr(this.name, that.get(trn_attr_key));
+ }
+ });
+ $this.html(that.get(trn_key));
+ });
+ return this;
+ };
+})(jQuery);
diff --git a/paintplus/frontend/src/js/libs/pdf-writer.js b/paintplus/frontend/src/js/libs/pdf-writer.js
new file mode 100644
index 0000000..93433e2
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/pdf-writer.js
@@ -0,0 +1,240 @@
+/**
+ * Minimal pure-JS PDF writer for image export.
+ *
+ * Supports:
+ * - Single-page and multipage (one page per canvas)
+ * - RGB color space: images JPEG-encoded (browser-native, small files)
+ * - CMYK color space: raw DeviceCMYK bytes (print-ready, no alpha)
+ *
+ * PDF-1.4 structure used. No external dependencies.
+ *
+ * Usage:
+ * PdfWriter.fromCanvases(canvases, { colorMode: 'rgb'|'cmyk', quality: 0.9, dpi: 300 })
+ * .then(blob => FileSaver.saveAs(blob, 'file.pdf'));
+ */
+
+import { rgbToCmyk } from './tiff-writer.js';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Encode a JS string to a Uint8Array of bytes (Latin-1 safe). */
+function strBytes(s) {
+ var a = new Uint8Array(s.length);
+ for (var i = 0; i < s.length; i++) a[i] = s.charCodeAt(i) & 0xff;
+ return a;
+}
+
+/** Concatenate multiple Uint8Arrays / ArrayBuffers into one Uint8Array. */
+function concat(parts) {
+ var total = 0;
+ for (var i = 0; i < parts.length; i++)
+ total += parts[i].byteLength || parts[i].length;
+ var out = new Uint8Array(total), pos = 0;
+ for (var i = 0; i < parts.length; i++) {
+ var p = parts[i] instanceof ArrayBuffer ? new Uint8Array(parts[i]) : parts[i];
+ out.set(p, pos);
+ pos += p.length;
+ }
+ return out;
+}
+
+/** canvas → raw CMYK Uint8Array (W*H*4 bytes, alpha discarded). */
+function canvasToCmykBytes(canvas) {
+ var idata = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height).data;
+ var out = new Uint8Array(canvas.width * canvas.height * 4);
+ for (var px = 0, i = 0, len = idata.length; px < len; px += 4, i += 4) {
+ var cmyk = rgbToCmyk(idata[px], idata[px + 1], idata[px + 2]);
+ out[i] = cmyk[0];
+ out[i + 1] = cmyk[1];
+ out[i + 2] = cmyk[2];
+ out[i + 3] = cmyk[3];
+ }
+ return out;
+}
+
+/** canvas → JPEG Uint8Array via browser encoding. Returns a Promise. */
+function canvasToJpegBytes(canvas, quality) {
+ return new Promise(function(resolve) {
+ canvas.toBlob(function(blob) {
+ blob.arrayBuffer().then(function(buf) {
+ resolve(new Uint8Array(buf));
+ });
+ }, 'image/jpeg', quality || 0.92);
+ });
+}
+
+// ---------------------------------------------------------------------------
+// PDF object builder
+// ---------------------------------------------------------------------------
+
+/**
+ * Build a complete PDF byte stream for an array of pages.
+ *
+ * @param {Array<{width, height, colorSpace, imgBytes, filter}>} pages
+ * @param {number} dpi — used for MediaBox sizing (px → pt: pt = px * 72 / dpi)
+ * @returns {Uint8Array}
+ */
+function buildPDF(pages, dpi) {
+ dpi = dpi || 300;
+ var px2pt = 72 / dpi;
+
+ // Object registry: we'll collect byte-offset of each object for xref.
+ var objs = []; // each element is the raw bytes of "N 0 obj ... endobj\n"
+ var objNums = {}; // logical name → 1-based index
+
+ function addObj(name, content) {
+ var n = objs.length + 1;
+ if (name) objNums[name] = n;
+ var s = n + ' 0 obj\n' + content + '\nendobj\n';
+ objs.push(strBytes(s));
+ return n;
+ }
+
+ function addStreamObj(name, dict, dataBytes) {
+ var n = objs.length + 1;
+ if (name) objNums[name] = n;
+ var header = n + ' 0 obj\n' + dict + '\nstream\n';
+ var footer = '\nendstream\nendobj\n';
+ var combined = concat([strBytes(header), dataBytes, strBytes(footer)]);
+ objs.push(combined);
+ return n;
+ }
+
+ // 1. Catalog
+ addObj('catalog', '<< /Type /Catalog /Pages 2 0 R >>');
+
+ // 2. Pages (placeholder — children added later)
+ var pagesIdx = objs.length + 1;
+ addObj('pages', ''); // placeholder
+
+ // 3. Per-page objects
+ var pageObjNums = [];
+ for (var p = 0; p < pages.length; p++) {
+ var pg = pages[p];
+ var W_pt = (pg.width * px2pt).toFixed(3);
+ var H_pt = (pg.height * px2pt).toFixed(3);
+ var imgName = 'Im' + (p + 1);
+ var imgIdx = objs.length + 2; // will be added after content stream
+
+ // Content stream: scale and paint image
+ var contentStr = 'q ' + W_pt + ' 0 0 ' + H_pt + ' 0 0 cm /' + imgName + ' Do Q';
+ var contentNum = addStreamObj(null,
+ '<< /Length ' + contentStr.length + ' >>',
+ strBytes(contentStr));
+
+ // Image XObject
+ var samples = pg.colorSpace === 'DeviceCMYK' ? 4 : 3;
+ var imgDict = '<< /Type /XObject /Subtype /Image'
+ + ' /Width ' + pg.width
+ + ' /Height ' + pg.height
+ + ' /ColorSpace /' + pg.colorSpace
+ + ' /BitsPerComponent 8'
+ + (pg.filter ? ' /Filter /' + pg.filter : '')
+ + ' /Length ' + pg.imgBytes.length
+ + ' >>';
+ var imgNum = addStreamObj(null, imgDict, pg.imgBytes);
+
+ // Page object
+ var pageNum = addObj(null,
+ '<< /Type /Page /Parent ' + pagesIdx + ' 0 R'
+ + ' /MediaBox [0 0 ' + W_pt + ' ' + H_pt + ']'
+ + ' /Contents ' + contentNum + ' 0 R'
+ + ' /Resources << /XObject << /' + imgName + ' ' + imgNum + ' 0 R >> >>'
+ + ' >>');
+ pageObjNums.push(pageNum);
+ }
+
+ // Fill in Pages object properly
+ var kidsStr = pageObjNums.map(function(n) { return n + ' 0 R'; }).join(' ');
+ var pagesContent = '<< /Type /Pages /Kids [' + kidsStr + '] /Count ' + pages.length + ' >>';
+ objs[pagesIdx - 1] = strBytes(pagesIdx + ' 0 obj\n' + pagesContent + '\nendobj\n');
+
+ // ---- Assemble file ----
+ var header = strBytes('%PDF-1.4\n%\xE2\xE3\xCF\xD3\n'); // binary hint comment
+ var offsets = [];
+ var parts = [header];
+ var bytePos = header.length;
+
+ for (var i = 0; i < objs.length; i++) {
+ offsets.push(bytePos);
+ parts.push(objs[i]);
+ bytePos += objs[i].length;
+ }
+
+ // xref table
+ var xrefOffset = bytePos;
+ var xrefLines = 'xref\n0 ' + (objs.length + 1) + '\n';
+ xrefLines += '0000000000 65535 f \n';
+ for (var i = 0; i < offsets.length; i++) {
+ xrefLines += String(offsets[i]).padStart(10, '0') + ' 00000 n \n';
+ }
+ parts.push(strBytes(xrefLines));
+
+ // trailer
+ var trailerStr = 'trailer\n<< /Size ' + (objs.length + 1)
+ + ' /Root 1 0 R >>\nstartxref\n' + xrefOffset + '\n%%EOF\n';
+ parts.push(strBytes(trailerStr));
+
+ return concat(parts);
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+var PdfWriter = {
+
+ /**
+ * Export an array of canvases as a PDF.
+ *
+ * @param {HTMLCanvasElement|HTMLCanvasElement[]} canvases
+ * @param {object} [opts]
+ * @param {'rgb'|'cmyk'} [opts.colorMode='rgb']
+ * @param {number} [opts.quality=0.92] JPEG quality for RGB mode (0–1)
+ * @param {number} [opts.dpi=300] dots-per-inch for page sizing
+ * @returns {Promise}
+ */
+ fromCanvases: function(canvases, opts) {
+ if (!Array.isArray(canvases)) canvases = [canvases];
+ opts = opts || {};
+ var colorMode = opts.colorMode === 'cmyk' ? 'cmyk' : 'rgb';
+ var dpi = +(opts.dpi || 300) | 0;
+ var quality = opts.quality != null ? opts.quality : 0.92;
+
+ if (colorMode === 'cmyk') {
+ // Synchronous path: raw CMYK bytes
+ var pages = canvases.map(function(cv) {
+ return {
+ width: cv.width,
+ height: cv.height,
+ colorSpace: 'DeviceCMYK',
+ filter: null,
+ imgBytes: canvasToCmykBytes(cv),
+ };
+ });
+ var pdfBytes = buildPDF(pages, dpi);
+ return Promise.resolve(new Blob([pdfBytes], { type: 'application/pdf' }));
+ } else {
+ // Async path: JPEG-encode each canvas
+ var promises = canvases.map(function(cv) {
+ return canvasToJpegBytes(cv, quality).then(function(bytes) {
+ return {
+ width: cv.width,
+ height: cv.height,
+ colorSpace: 'DeviceRGB',
+ filter: 'DCTDecode',
+ imgBytes: bytes,
+ };
+ });
+ });
+ return Promise.all(promises).then(function(pages) {
+ var pdfBytes = buildPDF(pages, dpi);
+ return new Blob([pdfBytes], { type: 'application/pdf' });
+ });
+ }
+ },
+};
+
+export default PdfWriter;
diff --git a/paintplus/frontend/src/js/libs/popup.js b/paintplus/frontend/src/js/libs/popup.js
new file mode 100644
index 0000000..bdcdce4
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/popup.js
@@ -0,0 +1,676 @@
+/**
+ * user dialogs library
+ *
+ * @author ViliusL
+ *
+ * Usage:
+ *
+ * import Dialog_class from './libs/popup.js';
+ * var POP = new popup();
+ *
+ * var settings = {
+ * title: 'Differences',
+ * comment: '',
+ * preview: true,
+ * className: '',
+ * params: [
+ * {name: "param1", title: "Parameter #1:", value: "111"},
+ * {name: "param2", title: "Parameter #2:", value: "222"},
+ * ],
+ * on_load: function(params){...},
+ * on_change: function(params, canvas_preview, w, h){...},
+ * on_finish: function(params){...},
+ * on_cancel: function(params){...},
+ * };
+ * this.POP.show(settings);
+ *
+ * Params types:
+ * - name type example
+ * - ---------------------------------------------------------------
+ * - name string 'parameter1'
+ * - title string 'enter value:'
+ * - type string 'select', 'textarea', 'color'
+ * - value string '314'
+ * - values array fo strings ['one', 'two', 'three']
+ * - range numbers interval [0, 255]
+ * - step int/float 1
+ * - placeholder text 'enter number here'
+ * - html html text 'bold '
+ * - function function 'custom_function'
+ */
+import './../../css/popup.css';
+import Base_layers_class from './../core/base-layers.js';
+import Base_gui_class from './../core/base-gui.js';
+import Tools_translate_class from './../modules/tools/translate.js';
+
+var template = `
+ ×
+
+
+ Ok
+ Cancel
+
+`;
+
+class Dialog_class {
+
+ constructor() {
+ if (!window.POP) {
+ window.POP = this;
+ }
+
+ this.previousPOP = null;
+ this.el = null;
+ this.eventHandles = [];
+ this.active = false;
+ this.title = null;
+ this.onfinish = false;
+ this.oncancel = false;
+ this.preview = false;
+ this.preview_padding = 0;
+ this.onload = false;
+ this.onchange = false;
+ this.width_mini = 225;
+ this.height_mini = 200;
+ this.id = 0;
+ this.parameters = [];
+ this.Base_layers = new Base_layers_class();
+ this.Base_gui = new Base_gui_class();
+ this.Tools_translate = new Tools_translate_class();
+ this.last_params_hash = '';
+ this.layer_active_small = document.createElement("canvas");
+ this.layer_active_small_ctx = this.layer_active_small.getContext("2d");
+ this.caller = null;
+ this.resize_clicked = {x: null, y: null}
+ this.element_offset = {x: null, y: null}
+ }
+
+ /**
+ * shows dialog
+ *
+ * @param {array} config
+ */
+ show(config) {
+ this.previousPOP = window.POP;
+ window.POP = this;
+
+ if (this.active == true) {
+ this.hide();
+ }
+
+ this.title = config.title || '';
+ this.parameters = config.params || [];
+ this.onfinish = config.on_finish || false;
+ this.oncancel = config.on_cancel || false;
+ this.preview = config.preview || false;
+ this.preview_padding = config.preview_padding || 0;
+ this.onchange = config.on_change || false;
+ this.onload = config.on_load || false;
+ this.className = config.className || '';
+ this.comment = config.comment || '';
+
+ //reset position
+ this.el = document.createElement('div');
+ this.el.classList = 'popup';
+ this.el.role = 'dialog';
+ document.querySelector('#popups').appendChild(this.el);
+ this.el.style.top = null;
+ this.el.style.left = null;
+
+ this.show_action();
+ this.set_events();
+ }
+
+ /**
+ * hides dialog
+ *
+ * @param {boolean} success
+ * @returns {undefined}
+ */
+ hide(success) {
+ window.POP = this.previousPOP;
+ var params = this.get_params();
+
+ if (success === false && this.oncancel) {
+ this.oncancel(params);
+ }
+ if (this.el && this.el.parentNode) {
+ this.el.parentNode.removeChild(this.el);
+ }
+ this.parameters = [];
+ this.active = false;
+ this.preview = false;
+ this.preview_padding = 0;
+ this.onload = false;
+ this.onchange = false;
+ this.title = null;
+ this.className = '';
+ this.comment = '';
+ this.onfinish = false;
+ this.oncancel = false;
+
+ this.remove_events();
+ }
+
+ get_active_instances() {
+ return document.getElementById('popups').children.length;
+ }
+
+ /* ----------------- private functions ---------------------------------- */
+
+ addEventListener(target, type, listener, options) {
+ target.addEventListener(type, listener, options);
+ const handle = {
+ target, type, listener,
+ remove() {
+ target.removeEventListener(type, listener);
+ }
+ };
+ this.eventHandles.push(handle);
+ }
+
+ set_events() {
+ this.addEventListener(document, 'keydown', (event) => {
+ var code = event.code;
+
+ if (code == "Escape") {
+ //escape
+ this.hide(false);
+ }
+ }, false);
+
+ //register events
+ this.addEventListener(document, 'mousedown', (event) => {
+ if(event.target != this.el.querySelector('h2'))
+ return;
+ event.preventDefault();
+ this.resize_clicked.x = event.pageX;
+ this.resize_clicked.y = event.pageY;
+
+ var target = this.el;
+ this.element_offset.x = target.offsetLeft;
+ this.element_offset.y = target.offsetTop;
+ }, false);
+
+ this.addEventListener(document, 'mousemove', (event) => {
+ if(this.resize_clicked.x != null){
+ var dx = this.resize_clicked.x - event.pageX;
+ var dy = this.resize_clicked.y - event.pageY;
+
+ var target = this.el;
+ target.style.left = (this.element_offset.x - dx) + "px";
+ target.style.top = (this.element_offset.y - dy) + "px";
+ }
+ }, false);
+
+ this.addEventListener(document, 'mouseup', (event) => {
+ if(event.target != this.el.querySelector('h2'))
+ return;
+ event.preventDefault();
+ this.resize_clicked.x = null;
+ this.resize_clicked.y = null;
+ }, false);
+
+ this.addEventListener(window, 'resize', (event) => {
+ var target = this.el;
+ target.style.top = null;
+ target.style.left = null;
+ }, false);
+ }
+
+ remove_events() {
+ for (let handle of this.eventHandles) {
+ handle.remove();
+ }
+ this.eventHandles = [];
+ }
+
+ onChangeEvent(e) {
+ var params = this.get_params();
+
+ var hash = JSON.stringify(params);
+ if (this.last_params_hash == hash && this.onchange == false) {
+ //nothing changed
+ return;
+ }
+ this.last_params_hash = hash;
+
+ if (this.onchange != false) {
+ if (this.preview != false) {
+ var canvas_right = this.el.querySelector('[data-id="pop_post"]');
+ var ctx_right = canvas_right.getContext("2d");
+
+ ctx_right.clearRect(0, 0, this.width_mini, this.height_mini);
+ ctx_right.drawImage(this.layer_active_small,
+ this.preview_padding, this.preview_padding,
+ this.width_mini - this.preview_padding * 2, this.height_mini - this.preview_padding * 2
+ );
+
+ this.onchange(params, ctx_right, this.width_mini, this.height_mini, canvas_right);
+ }
+ else {
+ this.onchange(params);
+ }
+ }
+ }
+
+ //renders preview. If input=range supported, is called on every param update - must be fast...
+ preview_handler(e) {
+ if (this.preview !== false) {
+ this.onChangeEvent(e);
+ }
+ }
+
+ //OK pressed - prepare data and call handlers
+ save() {
+ var params = this.get_params();
+
+ if (this.onfinish) {
+ this.onfinish(params);
+ }
+
+ this.hide(true);
+ }
+
+ //"Cancel" pressed
+ cancel() {
+ if (this.oncancel) {
+ var params = this.get_params();
+ this.oncancel(params);
+ }
+ }
+
+ get_params() {
+ var response = {};
+ if(this.el == undefined){
+ return null;
+ }
+ var inputs = this.el.querySelectorAll('input');
+ for (var i = 0; i < inputs.length; i++) {
+ if (inputs[i].id.substr(0, 9) == 'pop_data_') {
+ var key = inputs[i].id.substr(9);
+ if (this.strpos(key, "_poptmp") != false)
+ key = key.substring(0, this.strpos(key, "_poptmp"));
+ var value = inputs[i].value;
+ if (inputs[i].type == 'radio') {
+ if (inputs[i].checked == true)
+ response[key] = value;
+ }
+ else if (inputs[i].type == 'number') {
+ response[key] = parseFloat(value);
+ }
+ else if (inputs[i].type == 'checkbox') {
+ if (inputs[i].checked == true)
+ response[key] = true;
+ else
+ response[key] = false;
+ }
+ else if (inputs[i].type == 'range') {
+ response[key] = parseFloat(value);
+ }
+ else {
+ response[key] = value;
+ }
+
+ }
+ }
+ var selects = this.el.querySelectorAll('select');
+ for (var i = 0; i < selects.length; i++) {
+ if (selects[i].id.substr(0, 9) == 'pop_data_') {
+ var key = selects[i].id.substr(9);
+ response[key] = selects[i].value;
+ }
+ }
+ var textareas = this.el.querySelectorAll('textarea');
+ for (var i = 0; i < textareas.length; i++) {
+ if (textareas[i].id.substr(0, 9) == 'pop_data_') {
+ var key = textareas[i].id.substr(9);
+ response[key] = textareas[i].value;
+ }
+ }
+
+ return response;
+ }
+
+ /**
+ * show popup window.
+ * used strings: "Ok", "Cancel", "Preview"
+ */
+ show_action() {
+ this.id = this.getRandomInt(0, 999999999);
+ if (this.active == true) {
+ this.hide();
+ return false;
+ }
+ this.active = true;
+
+ //build content
+ var html_pretitle_area = '';
+ var html_preview_content = '';
+ var html_params = '';
+
+ //preview area
+ if (this.preview !== false) {
+ html_preview_content += '';
+ html_preview_content += '
';
+ html_preview_content += '
';
+ html_preview_content += '
';
+ html_preview_content += '
';
+ var title = null;
+ for (var i in this.parameters) {
+ var parameter = this.parameters[i];
+
+ html += '';
+ }
+ html += '
';
+
+ return html;
+ }
+
+ //on key press inside input text
+ onkeyup(event) {
+ if (event.key == 'Enter') {
+ if (event.target.hasAttribute('data-prevent-submission')) {
+ event.preventDefault();
+ } else {
+ this.save();
+ }
+ }
+ }
+
+ getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ strpos(haystack, needle, offset) {
+ var i = (haystack + '').indexOf(needle, (offset || 0));
+ return i === -1 ? false : i;
+ }
+
+ draw_background(canvas, W, H, gap, force) {
+ var transparent = this.Base_gui.get_transparency_support();
+
+ if (transparent == false && force == undefined) {
+ canvas.beginPath();
+ canvas.rect(0, 0, W, H);
+ canvas.fillStyle = "#ffffff";
+ canvas.fill();
+ return false;
+ }
+ if (gap == undefined)
+ gap = 10;
+ var fill = true;
+ for (var i = 0; i < W; i = i + gap) {
+ if (i % (gap * 2) == 0)
+ fill = true;
+ else
+ fill = false;
+ for (var j = 0; j < H; j = j + gap) {
+ if (fill == true) {
+ canvas.fillStyle = '#eeeeee';
+ canvas.fillRect(i, j, gap, gap);
+ fill = false;
+ }
+ else
+ fill = true;
+ }
+ }
+ }
+
+}
+
+export default Dialog_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/progress_overlay.js b/paintplus/frontend/src/js/libs/progress_overlay.js
new file mode 100644
index 0000000..7792e4c
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/progress_overlay.js
@@ -0,0 +1,180 @@
+/**
+ * ProgressOverlay — shared animated progress indicator for long AI operations.
+ *
+ * Usage:
+ * import { showProgress, updateProgress, hideProgress } from './progress_overlay.js';
+ *
+ * showProgress('Generating image…');
+ * updateProgress(50, 'Denoising step 15/30…'); // optional step updates
+ * hideProgress();
+ *
+ * When you don't have real step counts, call showProgress() and hideProgress() only —
+ * the bar animates automatically with a shimmer to signal activity.
+ */
+
+var _overlay = null;
+var _bar = null;
+var _label = null;
+var _shimmerAnim = null;
+var _fakeTimer = null;
+var _currentPct = 0;
+
+// ── SSE progress connection ───────────────────────────────────────────────────
+
+var _sse = null;
+
+/**
+ * Open an EventSource to /api/generate/progress and drive the bar with real
+ * denoising step counts from the local GPU pipeline.
+ *
+ * @param {string} pipeType - 'txt2img' | 'inpaint' | 'img2img'
+ * @param {string} baseUrl - window.API_BASE_URL or ''
+ */
+export function connectProgressSSE(pipeType, baseUrl) {
+ disconnectProgressSSE();
+ try {
+ var url = (baseUrl || '') + '/api/generate/progress';
+ _sse = new EventSource(url);
+ _sse.onmessage = (e) => {
+ try {
+ var states = JSON.parse(e.data);
+ var s = Array.isArray(states)
+ ? states.find(st => st.pipeline === pipeType)
+ : null;
+ if (s && s.state === 'running' && s.total_steps) {
+ var pct = Math.round(s.step / s.total_steps * 85);
+ updateProgress(pct, s.message || `Step ${s.step} / ${s.total_steps}`);
+ }
+ } catch { /* malformed event — ignore */ }
+ };
+ _sse.onerror = () => disconnectProgressSSE();
+ } catch { /* SSE not supported */ }
+}
+
+export function disconnectProgressSSE() {
+ if (_sse) { _sse.close(); _sse = null; }
+}
+
+// ── Progress overlay ──────────────────────────────────────────────────────────
+
+export function showProgress(message, estimatedSeconds) {
+ hideProgress();
+
+ _currentPct = 0;
+
+ // ── Backdrop ──────────────────────────────────────────────────────────────
+ _overlay = document.createElement('div');
+ _overlay.id = 'ai-progress-overlay';
+ _overlay.style.cssText = [
+ 'position:fixed', 'inset:0', 'z-index:99999',
+ 'display:flex', 'flex-direction:column',
+ 'align-items:center', 'justify-content:center',
+ 'background:rgba(0,0,0,0.55)',
+ 'backdrop-filter:blur(2px)',
+ '-webkit-backdrop-filter:blur(2px)',
+ ].join(';');
+
+ // ── Card ──────────────────────────────────────────────────────────────────
+ var card = document.createElement('div');
+ card.style.cssText = [
+ 'background:#1a1a2e',
+ 'border:1px solid #3a3a6a',
+ 'border-radius:14px',
+ 'padding:28px 36px',
+ 'min-width:320px', 'max-width:480px',
+ 'box-shadow:0 12px 48px rgba(0,0,0,0.8)',
+ 'display:flex', 'flex-direction:column', 'gap:14px',
+ 'text-align:center',
+ ].join(';');
+
+ // ── Label ─────────────────────────────────────────────────────────────────
+ _label = document.createElement('div');
+ _label.textContent = message || 'Processing…';
+ _label.style.cssText = 'font-family:sans-serif;font-size:13px;color:#c0c0e0;line-height:1.4;min-height:2.8em';
+
+ // ── Track ─────────────────────────────────────────────────────────────────
+ var track = document.createElement('div');
+ track.style.cssText = [
+ 'width:100%', 'height:6px',
+ 'background:#0f0f2a',
+ 'border-radius:3px',
+ 'overflow:hidden',
+ 'position:relative',
+ ].join(';');
+
+ // ── Shimmer (indeterminate stripe) ────────────────────────────────────────
+ var shimmer = document.createElement('div');
+ shimmer.style.cssText = [
+ 'position:absolute', 'inset:0',
+ 'background:linear-gradient(90deg,transparent 0%,rgba(120,120,255,0.25) 50%,transparent 100%)',
+ 'transform:translateX(-100%)',
+ 'will-change:transform',
+ ].join(';');
+
+ // ── Filled bar ────────────────────────────────────────────────────────────
+ _bar = document.createElement('div');
+ _bar.style.cssText = [
+ 'position:absolute', 'inset-block:0', 'left:0',
+ 'width:0%',
+ 'background:linear-gradient(90deg,#5577ff,#88aaff)',
+ 'border-radius:3px',
+ 'transition:width 0.35s ease',
+ ].join(';');
+
+ // ── Cancel hint ───────────────────────────────────────────────────────────
+ var hint = document.createElement('div');
+ hint.textContent = 'Press Esc to cancel';
+ hint.style.cssText = 'font-family:sans-serif;font-size:10px;color:#444;margin-top:2px';
+
+ track.appendChild(shimmer);
+ track.appendChild(_bar);
+ card.appendChild(_label);
+ card.appendChild(track);
+ card.appendChild(hint);
+ _overlay.appendChild(card);
+ document.body.appendChild(_overlay);
+
+ // Animate shimmer
+ var pos = -100;
+ _shimmerAnim = setInterval(() => {
+ pos += 2.5;
+ if (pos > 200) pos = -100;
+ shimmer.style.transform = `translateX(${pos}%)`;
+ }, 16);
+
+ // Fake progress that creeps toward 90% if no real steps given
+ if (estimatedSeconds) {
+ var totalMs = estimatedSeconds * 1000;
+ var step = 90 / (totalMs / 200);
+ _fakeTimer = setInterval(() => {
+ if (_currentPct < 90) {
+ _currentPct = Math.min(90, _currentPct + step);
+ _bar.style.width = _currentPct + '%';
+ }
+ }, 200);
+ }
+
+ // Esc to cancel
+ _overlay._escHandler = (e) => { if (e.key === 'Escape') hideProgress(); };
+ document.addEventListener('keydown', _overlay._escHandler);
+}
+
+export function updateProgress(pct, message) {
+ if (!_overlay) return;
+ _currentPct = Math.max(_currentPct, Math.min(100, pct));
+ if (_bar) _bar.style.width = _currentPct + '%';
+ if (_label && message) _label.textContent = message;
+}
+
+export function hideProgress() {
+ if (_shimmerAnim) { clearInterval(_shimmerAnim); _shimmerAnim = null; }
+ if (_fakeTimer) { clearInterval(_fakeTimer); _fakeTimer = null; }
+ if (_overlay) {
+ document.removeEventListener('keydown', _overlay._escHandler);
+ _overlay.remove();
+ _overlay = null;
+ }
+ _bar = null;
+ _label = null;
+ _currentPct = 0;
+}
diff --git a/paintplus/frontend/src/js/libs/tiff-writer.js b/paintplus/frontend/src/js/libs/tiff-writer.js
new file mode 100644
index 0000000..be28162
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/tiff-writer.js
@@ -0,0 +1,195 @@
+/**
+ * TIFF writer with support for:
+ * - Single-page RGBA (32-bit, interleaved, with alpha)
+ * - Single-page CMYK (8-bit per channel, no alpha — print-ready)
+ * - Multipage variants of both (one IFD per canvas layer)
+ *
+ * TIFF spec references: TIFF 6.0, ISO 12234-2 (CMYK)
+ * PhotometricInterpretation 2 = RGB, 5 = CMYK
+ */
+
+// --- RGB → CMYK conversion -------------------------------------------
+
+function rgbToCmyk(r, g, b) {
+ var rn = r / 255, gn = g / 255, bn = b / 255;
+ var k = 1 - Math.max(rn, gn, bn);
+ if (k >= 1) return [0, 0, 0, 255];
+ var d = 1 - k;
+ return [
+ Math.round((d - rn) / d * 255),
+ Math.round((d - gn) / d * 255),
+ Math.round((d - bn) / d * 255),
+ Math.round(k * 255),
+ ];
+}
+
+// --- Low-level TIFF binary builder ------------------------------------
+
+/**
+ * Build a multipage TIFF buffer from an array of canvases.
+ *
+ * @param {HTMLCanvasElement[]} canvases
+ * @param {'rgba'|'cmyk'} colorMode
+ * @param {object} [opts]
+ * @param {boolean} [opts.littleEndian=false]
+ * @param {number} [opts.dpi=300]
+ * @returns {ArrayBuffer}
+ */
+function buildTIFF(canvases, colorMode, opts) {
+ opts = opts || {};
+ var lsb = !!opts.littleEndian;
+ var dpi = +(opts.dpi || 300) | 0;
+
+ var isCMYK = colorMode === 'cmyk';
+
+ // IFD field counts differ: RGBA has ExtraSamples tag, CMYK does not.
+ var ENTRY_COUNT = isCMYK ? 14 : 15;
+ var IFD_SIZE = 2 + ENTRY_COUNT * 12 + 4; // count + entries + nextIFD ptr
+ var FIELDS_SIZE = 64; // BPS(8)+XRes(8)+YRes(8)+sw(20)+dt(20)
+ var PAGE_OH = IFD_SIZE + FIELDS_SIZE;
+
+ // Compute page start offsets inside the final buffer.
+ var offsets = [];
+ var total = 8; // TIFF header
+ for (var i = 0; i < canvases.length; i++) {
+ offsets.push(total);
+ total += PAGE_OH + canvases[i].width * canvases[i].height * 4;
+ }
+
+ var buf = new ArrayBuffer(total);
+ var view = new DataView(buf);
+ var u8 = new Uint8Array(buf);
+ var pos = 0;
+
+ function s16(v) { view.setUint16(pos, v, lsb); pos += 2; }
+ function s32(v) { view.setUint32(pos, v, lsb); pos += 4; }
+ function entry(tag, type, count, value) {
+ s16(tag); s16(type); s32(count);
+ // SHORT with count==1 gets packed into the value field with padding.
+ if (type === 3 && count === 1) { s16(value); s16(0); }
+ else { s32(value); }
+ }
+
+ // Date helpers
+ var d = new Date();
+ var p2 = function(n) { return n < 10 ? '0' + n : '' + n; };
+ var dtStr = d.getFullYear() + ':' + p2(d.getMonth() + 1) + ':' + p2(d.getDate())
+ + ' ' + p2(d.getHours()) + ':' + p2(d.getMinutes()) + ':' + p2(d.getSeconds());
+ var swStr = 'tiff-writer 1.0\0\0\0\0\0'; // 20 chars (null-padded)
+
+ // ---- TIFF header ----
+ s16(lsb ? 0x4949 : 0x4d4d);
+ s16(42);
+ s32(8); // offset to first IFD
+
+ // ---- Per-page IFDs + image data ----
+ for (var p = 0; p < canvases.length; p++) {
+ var cv = canvases[p];
+ var W = cv.width, H = cv.height;
+ var pageBase = offsets[p];
+ var fBase = pageBase + IFD_SIZE; // start of fields section
+ var imgBase = fBase + FIELDS_SIZE; // start of image data
+ var nextIFD = p + 1 < canvases.length ? offsets[p + 1] : 0;
+
+ // IFD entry count
+ s16(ENTRY_COUNT);
+
+ entry(0x00fe, 4, 1, 0); // NewSubfileType
+ entry(0x0100, 4, 1, W); // ImageWidth
+ entry(0x0101, 4, 1, H); // ImageLength
+ entry(0x0102, 3, 4, fBase); // BitsPerSample (offset → 4 shorts)
+ entry(0x0103, 3, 1, 1); // Compression: none
+ entry(0x0106, 3, 1, isCMYK ? 5 : 2); // PhotometricInterp: 5=CMYK, 2=RGB
+ entry(0x0111, 4, 1, imgBase); // StripOffsets
+ entry(0x0115, 3, 1, 4); // SamplesPerPixel: 4
+ entry(0x0117, 4, 1, W * H * 4); // StripByteCounts
+ entry(0x011a, 5, 1, fBase + 8); // XResolution
+ entry(0x011b, 5, 1, fBase + 16); // YResolution
+ entry(0x0128, 3, 1, 2); // ResolutionUnit: inch
+ entry(0x0131, 2, 20, fBase + 24); // Software (20 bytes)
+ entry(0x0132, 2, 20, fBase + 44); // DateTime (20 bytes)
+ if (!isCMYK) {
+ entry(0x0152, 3, 1, 2); // ExtraSamples: assoc. alpha (RGBA only)
+ }
+
+ s32(nextIFD);
+
+ // ---- Fields section (64 bytes) ----
+ // BitsPerSample: 8,8,8,8 as four SHORTs (8 bytes)
+ s16(8); s16(8); s16(8); s16(8);
+ // XResolution RATIONAL (8 bytes)
+ s32(dpi); s32(1);
+ // YResolution RATIONAL (8 bytes)
+ s32(dpi); s32(1);
+ // Software string (20 bytes, null-padded)
+ for (var i = 0; i < 20; i++)
+ view.setUint8(pos++, swStr.charCodeAt(i) & 0xff);
+ // DateTime string (20 bytes, null-padded)
+ for (var i = 0; i < 20; i++)
+ view.setUint8(pos++, i < dtStr.length ? dtStr.charCodeAt(i) & 0xff : 0);
+
+ // ---- Image data ----
+ var idata = cv.getContext('2d').getImageData(0, 0, W, H).data;
+ if (isCMYK) {
+ // Convert RGBA → CMYK and write 4 bytes per pixel (alpha discarded)
+ for (var px = 0, len = idata.length; px < len; px += 4) {
+ var cmyk = rgbToCmyk(idata[px], idata[px + 1], idata[px + 2]);
+ u8[pos++] = cmyk[0];
+ u8[pos++] = cmyk[1];
+ u8[pos++] = cmyk[2];
+ u8[pos++] = cmyk[3];
+ }
+ } else {
+ // Write RGBA directly
+ u8.set(idata, pos);
+ pos += idata.length;
+ }
+ }
+
+ return buf;
+}
+
+// --- Public API -------------------------------------------------------
+
+var TiffWriter = {
+
+ /** Single-page 32-bit RGBA TIFF */
+ toRGBA: function(canvas, callback, opts) {
+ setTimeout(function() {
+ callback(buildTIFF([canvas], 'rgba', opts));
+ }, 9);
+ },
+
+ /** Single-page CMYK TIFF (print-ready, no alpha) */
+ toCMYK: function(canvas, callback, opts) {
+ setTimeout(function() {
+ callback(buildTIFF([canvas], 'cmyk', opts));
+ }, 9);
+ },
+
+ /** Multipage RGBA TIFF — one IFD per canvas in the array */
+ toMultipageRGBA: function(canvases, callback, opts) {
+ setTimeout(function() {
+ callback(buildTIFF(canvases, 'rgba', opts));
+ }, 9);
+ },
+
+ /** Multipage CMYK TIFF — one IFD per canvas in the array */
+ toMultipageCMYK: function(canvases, callback, opts) {
+ setTimeout(function() {
+ callback(buildTIFF(canvases, 'cmyk', opts));
+ }, 9);
+ },
+
+ /** Convenience: returns a Blob instead of ArrayBuffer */
+ toBlob: function(canvases, colorMode, callback, opts) {
+ if (!Array.isArray(canvases)) canvases = [canvases];
+ setTimeout(function() {
+ var buf = buildTIFF(canvases, colorMode, opts);
+ callback(new Blob([buf], { type: 'image/tiff' }));
+ }, 9);
+ },
+};
+
+export default TiffWriter;
+export { rgbToCmyk };
diff --git a/paintplus/frontend/src/js/libs/vintage.js b/paintplus/frontend/src/js/libs/vintage.js
new file mode 100644
index 0000000..84fa77d
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/vintage.js
@@ -0,0 +1,295 @@
+import glfx from './glfx.js';
+import ImageFilters from './imagefilters.js';
+
+/**
+ * adds vintage effect
+ *
+ * @author ViliusL
+ *
+ * Functions:
+ * - adjust_color
+ * - lower_contrast
+ * - blur
+ * - light_leak
+ * - chemicals
+ * - exposure
+ * - grains
+ * - grains_big
+ * - optics
+ * - dusts
+ *
+ * Usage: VINTAGE.___function___(canvas,, param1, param2, ...);
+ *
+ * libs:
+ * - imagefilters.js, url: https://github.com/arahaya/ImageFilters.js
+ * - glfx.js url: http://evanw.github.com/glfx.js/
+ */
+class Vintage_class {
+
+ constructor(width, height) {
+ this.fx_filter = false;
+ this.exposure_rand = null;
+ this.lightLeakX = null;
+ this.lightLeakY = null;
+
+ this.reset_random_values(width, height);
+ }
+
+ /**
+ * apply all affect
+ *
+ * @param {canvas} canvas
+ * @param {int} level 0-100
+ */
+ apply_all(canvas, level) {
+ //adjust from scale [0-100] to our scale.
+ var red_offset = level * 1; //[0, 100]
+ var contrast = level / 2; //[0, 50]
+ //var blur = level / 100; //[0, 1]
+ var light_leak = level * 1.5; //[0, 150]
+ var de_saturation = level * 1; //[0, 100]
+ var exposure = level * 1.5; //[0, 150]
+ var grains = level / 2; //[0, 50]
+ var big_grains = level / 5; //[0, 20]
+ var vignette_size = level / 200; //[0, 0.5]
+ var vignette_amount = level / 142; //[0, 0.7]
+ var dust_level = level * 1; //[0, 100]
+
+ this.adjust_color(canvas, red_offset);
+ this.lower_contrast(canvas, contrast);
+ //this.blur(canvas, blur);
+ this.light_leak(canvas, light_leak);
+ this.chemicals(canvas, de_saturation);
+ this.exposure(canvas, exposure);
+ this.grains(canvas, grains);
+ this.grains_big(canvas, big_grains);
+ this.optics(canvas, vignette_size, vignette_amount);
+ this.dusts(canvas, dust_level);
+ }
+
+ /**
+ * reset random values again.
+ *
+ * @param {int} width
+ * @param {int} height
+ */
+ reset_random_values(width, height) {
+ this.exposure_rand = this.getRandomInt(1, 10);
+ this.lightLeakX = this.getRandomInt(0, width);
+ this.lightLeakY = this.getRandomInt(0, height);
+ }
+
+ //increasing red color
+ adjust_color(canvas, level_red) { //level = [0, 200], default 70
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ var param_green = 0;
+ var param_blue = 0;
+ var imageData = context.getImageData(0, 0, W, H);
+ var filtered = ImageFilters.ColorTransformFilter(imageData, 1, 1, 1, 1, level_red, param_green, param_blue, 1);
+ context.putImageData(filtered, 0, 0);
+ }
+
+ //decreasing contrast
+ lower_contrast(canvas, level) { //level = [0, 50], default 15
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+
+ var imageData = context.getImageData(0, 0, W, H);
+ var filtered = ImageFilters.BrightnessContrastPhotoshop(imageData, 0, -level);
+ context.putImageData(filtered, 0, 0);
+ }
+
+ //adding blur
+ blur(canvas, level) { //level = [0, 2], default 0
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+
+ if (level < 1)
+ return context;
+ var imageData = context.getImageData(0, 0, W, H);
+ var filtered = ImageFilters.GaussianBlur(imageData, level);
+ context.putImageData(filtered, 0, 0);
+ }
+
+ //creating transparent #ffa500 radial gradients
+ light_leak(canvas, level) { //level = [0, 150], default 90
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ var click_x = this.lightLeakX;
+ var click_y = this.lightLeakY;
+ var distance = Math.min(W, H) * 0.6;
+ var radgrad = context.createRadialGradient(
+ click_x, click_y, distance * level / 255,
+ click_x, click_y, distance);
+ radgrad.addColorStop(0, "rgba(255, 165, 0, " + level / 255 + ")");
+ radgrad.addColorStop(1, "rgba(255, 255, 255, 0)");
+
+ context.fillStyle = radgrad;
+ context.fillRect(0, 0, W, H);
+ }
+
+ //de-saturate
+ chemicals(canvas, level) { //level = [0, 100], default 40
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ var imageData = context.getImageData(0, 0, W, H);
+ var filtered = ImageFilters.HSLAdjustment(imageData, 0, -level, 0);
+ context.putImageData(filtered, 0, 0);
+ }
+
+ //creating transparent vertical black-to-white gradients
+ exposure(canvas, level) { //level = [0, 150], default 80
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ context.rect(0, 0, W, H);
+ var grd = context.createLinearGradient(0, 0, 0, H);
+ if (this.exposure_rand < 5) {
+ //dark at top
+ grd.addColorStop(0, "rgba(0, 0, 0, " + level / 255 + ")");
+ grd.addColorStop(1, "rgba(255, 255, 255, " + level / 255 + ")");
+ }
+ else {
+ //bright at top
+ grd.addColorStop(0, "rgba(255, 255, 255, " + level / 255 + ")");
+ grd.addColorStop(1, "rgba(0, 0, 0, " + level / 255 + ")");
+ }
+ context.fillStyle = grd;
+ context.fill();
+ }
+
+ //add grains, noise
+ grains(canvas, level) { //level = [0, 50], default 10
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ if (level == 0)
+ return context;
+ var img = context.getImageData(0, 0, W, H);
+ var imgData = img.data;
+ for (var j = 0; j < H; j++) {
+ for (var i = 0; i < W; i++) {
+ var x = (i + j * W) * 4;
+ if (imgData[x + 3] == 0)
+ continue; //transparent
+ //increase it's lightness
+ var delta = this.getRandomInt(0, level);
+ if (delta == 0)
+ continue;
+
+ if (imgData[x] - delta < 0)
+ imgData[x] = -(imgData[x] - delta);
+ else
+ imgData[x] = imgData[x] - delta;
+ if (imgData[x + 1] - delta < 0)
+ imgData[x + 1] = -(imgData[x + 1] - delta);
+ else
+ imgData[x + 1] = imgData[x + 1] - delta;
+ if (imgData[x + 2] - delta < 0)
+ imgData[x + 2] = -(imgData[x + 2] - delta);
+ else
+ imgData[x + 2] = imgData[x + 2] - delta;
+ }
+ }
+ context.putImageData(img, 0, 0);
+ }
+
+ //add big grains, noise
+ grains_big(canvas, level) { //level = [0, 50], default 20
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ if (level == 0)
+ return context;
+ var n = W * H / 100 * level; //density
+ var color = 200;
+ for (var i = 0; i < n; i++) {
+ var power = this.getRandomInt(5, 10 + level);
+ var size = 2;
+ var x = this.getRandomInt(0, W);
+ var y = this.getRandomInt(0, H);
+ context.fillStyle = "rgba(" + color + ", " + color + ", " + color + ", " + power / 255 + ")";
+ context.fillRect(x, y, size, size);
+ }
+ }
+
+ //adding vignette effect - blurred dark borders
+ optics(canvas, param1, param2) { //param1 [0, 0.5], param2 [0, 0.7], default 0.3, 0.5
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var texture = this.fx_filter.texture(context.getImageData(0, 0, W, H));
+ this.fx_filter.draw(texture).vignette(param1, param2).update();
+ context.drawImage(this.fx_filter, 0, 0);
+ }
+
+ //add dust and hairs
+ dusts(canvas, level) { //level = [0, 100], default 70
+ var context = canvas.getContext("2d");
+ var W = canvas.width;
+ var H = canvas.height;
+
+ var n = level / 100 * (W * H) / 1000;
+ //add dust
+ context.fillStyle = "rgba(200, 200, 200, 0.3)";
+ for (var i = 0; i < n; i++) {
+ var x = this.getRandomInt(0, W);
+ var y = this.getRandomInt(0, H);
+ var mode = this.getRandomInt(1, 2);
+ if (mode == 1) {
+ var w = 1;
+ var h = this.getRandomInt(1, 3);
+ }
+ else if (mode == 2) {
+ var w = this.getRandomInt(1, 3);
+ var h = 1;
+ }
+ context.beginPath();
+ context.rect(x, y, w, h);
+ context.fill();
+ }
+
+ //add hairs
+ context.strokeStyle = "rgba(200, 200, 200, 0.2)";
+ for (var i = 0; i < n / 20; i++) {
+ var x = this.getRandomInt(0, W);
+ var y = this.getRandomInt(0, H);
+ var radius = this.getRandomInt(5, 10);
+ var start_nr = this.getRandomInt(0, 20) / 10;
+ var start_angle = Math.PI * start_nr;
+ var end_angle = Math.PI * (start_nr + this.getRandomInt(7, 15) / 10);
+ context.beginPath();
+ context.arc(x, y, radius, start_angle, end_angle);
+ context.stroke();
+ }
+
+ return context;
+ }
+
+ //random number generator
+ getRandomInt(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+}
+
+export default Vintage_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/libs/zoomView.js b/paintplus/frontend/src/js/libs/zoomView.js
new file mode 100644
index 0000000..10c9f4c
--- /dev/null
+++ b/paintplus/frontend/src/js/libs/zoomView.js
@@ -0,0 +1,150 @@
+//handles zoom and pan
+//https://stackoverflow.com/questions/44009094/how-to-bound-image-pan-when-zooming-html-canvas/44015705#44015705
+const zoomView = (() => {
+ const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
+ const invMatrix = [1, 0, 0, 1, 0, 0]; // current inverse view transform
+ var m = matrix; // alias
+ var im = invMatrix; // alias
+ var scale = 1; // current scale
+ const bounds = {
+ top: 0,
+ left: 0,
+ right: 200,
+ bottom: 200,
+ };
+ var useConstraint = true; // if true then limit pan and zoom to
+ // keep bounds within the current context
+
+ var maxScale = 1;
+ const workPoint1 = {x: 0, y: 0};
+ const workPoint2 = {x: 0, y: 0};
+ const wp1 = workPoint1; // alias
+ const wp2 = workPoint2; // alias
+ var ctx;
+ const pos = {// current position of origin
+ x: 0,
+ y: 0,
+ };
+ var dirty = true;
+ const API = {
+ canvasDefault() {
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ },
+ apply() {
+ if (dirty) {
+ this.update();
+ }
+ ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);
+ },
+ getPosition() {
+ return { x: pos.x, y: pos.y };
+ },
+ getContext() {
+ return ctx;
+ },
+ getBounds() {
+ return bounds;
+ },
+ getScale() {
+ return scale;
+ },
+ getMaxScale() {
+ return maxScale;
+ },
+ matrix, // expose the matrix
+ invMatrix, // expose the inverse matrix
+ update() { // call to update transforms
+ dirty = false;
+ m[3] = m[0] = scale;
+ m[1] = m[2] = 0;
+ m[4] = pos.x;
+ m[5] = pos.y;
+ if (useConstraint) {
+ this.constrain();
+ }
+ this.invScale = 1 / scale;
+ // calculate the inverse transformation
+ var cross = m[0] * m[3] - m[1] * m[2];
+ im[0] = m[3] / cross;
+ im[1] = -m[1] / cross;
+ im[2] = -m[2] / cross;
+ im[3] = m[0] / cross;
+ },
+ constrain() {
+ maxScale = Math.min(
+ ctx.canvas.width / (bounds.right - bounds.left),
+ ctx.canvas.height / (bounds.bottom - bounds.top)
+ );
+ if (scale < maxScale) {
+ m[0] = m[3] = scale = maxScale;
+ }
+ wp1.x = bounds.left;
+ wp1.y = bounds.top;
+ this.toScreen(wp1, wp2);
+ if (wp2.x > 0) {
+ m[4] = pos.x -= wp2.x;
+ }
+ if (wp2.y > 0) {
+ m[5] = pos.y -= wp2.y;
+ }
+ wp1.x = bounds.right;
+ wp1.y = bounds.bottom;
+ this.toScreen(wp1, wp2);
+ if (wp2.x < ctx.canvas.width) {
+ m[4] = (pos.x -= wp2.x - ctx.canvas.width);
+ }
+ if (wp2.y < ctx.canvas.height) {
+ m[5] = (pos.y -= wp2.y - ctx.canvas.height);
+ }
+ },
+ toWorld(from_x, from_y) { // convert screen to world coords
+ var xx, yy;
+ var pointW = {};
+ if (dirty) {
+ this.update();
+ }
+ xx = from_x - m[4];
+ yy = from_y - m[5];
+ pointW.x = xx * im[0] + yy * im[2];
+ pointW.y = xx * im[1] + yy * im[3];
+ return pointW;
+ },
+ toScreen(from, point = {}){ // convert world coords to screen coords
+ if (dirty) {
+ this.update();
+ }
+ point.x = from.x * m[0] + from.y * m[2] + m[4];
+ point.y = from.x * m[1] + from.y * m[3] + m[5];
+ return point;
+ },
+ scaleAt(x_from, y_from, amount) { // at in screen coords
+ if (dirty) {
+ this.update();
+ }
+ scale *= amount;
+ pos.x = x_from - (x_from - pos.x) * amount;
+ pos.y = y_from - (y_from - pos.y) * amount;
+ dirty = true;
+ },
+ move(move_x, move_y) { // move is in screen coords
+ pos.x += move_x;
+ pos.y += move_y;
+ dirty = true;
+ },
+ setContext(context) {
+ ctx = context;
+ dirty = true;
+ },
+ setBounds(top, left, right, bottom) {
+ bounds.top = top;
+ bounds.left = left;
+ bounds.right = right;
+ bounds.bottom = bottom;
+ useConstraint = true;
+ dirty = true;
+ }
+ };
+ return API;
+})();
+
+export default zoomView;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/main.js b/paintplus/frontend/src/js/main.js
new file mode 100644
index 0000000..02db30d
--- /dev/null
+++ b/paintplus/frontend/src/js/main.js
@@ -0,0 +1,127 @@
+/**
+ * miniPaint - https://github.com/viliusle/miniPaint
+ * author: Vilius L.
+ */
+
+//css
+import './../css/reset.css';
+import './../css/utility.css';
+import './../css/component.css';
+import './../css/layout.css';
+import './../css/menu.css';
+import './../css/print.css';
+import './../../node_modules/alertifyjs/build/css/alertify.min.css';
+//js
+import app from './app.js';
+import config from './config.js';
+import './core/components/index.js';
+import Base_gui_class from './core/base-gui.js';
+import Base_layers_class from './core/base-layers.js';
+import Base_tools_class from './core/base-tools.js';
+import Base_state_class from './core/base-state.js';
+import Base_search_class from './core/base-search.js';
+import File_open_class from './modules/file/open.js';
+import File_save_class from './modules/file/save.js';
+import * as Actions from './actions/index.js';
+import { mountProviderBadge } from './core/components/provider-badge.js';
+
+window.addEventListener('load', function (e) {
+ // Initiate app
+ var Layers = new Base_layers_class();
+ var Base_tools = new Base_tools_class(true);
+ var GUI = new Base_gui_class();
+ var Base_state = new Base_state_class();
+ var File_open = new File_open_class();
+ var File_save = new File_save_class();
+ var Base_search = new Base_search_class();
+
+ // Register singletons in app module
+ app.Actions = Actions;
+ app.Config = config;
+ app.FileOpen = File_open;
+ app.FileSave = File_save;
+ app.GUI = GUI;
+ app.Layers = Layers;
+ app.State = Base_state;
+ app.Tools = Base_tools;
+
+ // Register as global for quick or external access
+ window.Layers = Layers;
+ window.AppConfig = config;
+ window.State = Base_state;
+ window.FileOpen = File_open;
+ window.FileSave = File_save;
+
+ // Render all
+ GUI.init();
+ Layers.init();
+
+ // Mount provider badge in the tools panel footer
+ mountProviderBadge(document.getElementById('tools_container') || document.body);
+
+ // Collapse right-panel Colors section by default (compact color swatch on left toolbar instead)
+ _collapseColorsPanel();
+ // Mount compact foreground/background color swatches at bottom of left toolbar
+ _mountToolbarColorSwatch();
+}, false);
+
+function _collapseColorsPanel() {
+ var toggle = document.querySelector('[data-target="toggle_colors"]');
+ var panel = document.getElementById('toggle_colors');
+ if (toggle && panel) {
+ // Only collapse if user hasn't explicitly expanded it (no saved cookie)
+ var Helper = { getCookie: (k) => { var m = document.cookie.match('(^|;)\\s*' + k + '\\s*=\\s*([^;]+)'); return m ? m.pop() : null; } };
+ if (Helper.getCookie('toggle_colors') !== '1') {
+ panel.classList.add('hidden');
+ toggle.classList.add('toggled');
+ }
+ }
+}
+
+function _mountToolbarColorSwatch() {
+ var toolbar = document.getElementById('tools_container');
+ if (!toolbar) return;
+
+ // Spacer to push swatch to bottom
+ var spacer = document.createElement('div');
+ spacer.style.cssText = 'flex:1;min-height:8px;width:100%;';
+ toolbar.appendChild(spacer);
+
+ // Foreground / background color squares (click to open full color picker)
+ var wrap = document.createElement('div');
+ wrap.id = 'toolbar_color_swatch';
+ wrap.title = 'Foreground / Background color — click to open color picker';
+ wrap.style.cssText = 'position:relative;width:30px;height:30px;margin:4px 0 4px 5px;cursor:pointer;flex-shrink:0;';
+ wrap.innerHTML = `
+
+
`;
+ toolbar.appendChild(wrap);
+
+ // Keep swatch in sync with config.COLOR
+ function _syncSwatch() {
+ var fg = document.getElementById('tc_fg');
+ var bg = document.getElementById('tc_bg');
+ if (fg) fg.style.background = window.config && config.COLOR ? config.COLOR : '#008000';
+ }
+ setInterval(_syncSwatch, 250);
+
+ // Click → open the right-side color panel
+ wrap.addEventListener('click', function () {
+ var panel = document.getElementById('toggle_colors');
+ var toggle = document.querySelector('[data-target="toggle_colors"]');
+ if (!panel) return;
+ var hidden = panel.classList.contains('hidden');
+ if (hidden) {
+ panel.classList.remove('hidden');
+ if (toggle) toggle.classList.remove('toggled');
+ // Scroll right panel to top so color picker is visible
+ var sidebar = document.querySelector('.sidebar_right');
+ if (sidebar) sidebar.scrollTop = 0;
+ } else {
+ panel.classList.add('hidden');
+ if (toggle) toggle.classList.add('toggled');
+ }
+ });
+}
diff --git a/paintplus/frontend/src/js/modules/edit/copy.js b/paintplus/frontend/src/js/modules/edit/copy.js
new file mode 100644
index 0000000..1e5c55d
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/edit/copy.js
@@ -0,0 +1,82 @@
+import config from "../../config";
+import Base_layers_class from './../../core/base-layers.js';
+import File_save_class from './../file/save.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Copy_class {
+
+ constructor() {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.File_save = new File_save_class();
+
+ //events
+ document.addEventListener('keydown', (event) => {
+ var code = event.key.toLowerCase();
+ var ctrlDown = event.ctrlKey || event.metaKey;
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == "c" && ctrlDown == true) {
+ //copy to clipboard
+ this.copy_to_clipboard();
+ }
+ }, false);
+ }
+
+ async copy_to_clipboard(){
+ var _this = this;
+
+ const canWriteToClipboard = await this.askWritePermission();
+ if (canWriteToClipboard) {
+
+ //get data - current layer
+ var canvas = this.Base_layers.convert_layer_to_canvas();
+ var ctx = canvas.getContext("2d");
+
+ if (config.TRANSPARENCY == false) {
+ //add white background
+ ctx.globalCompositeOperation = 'destination-over';
+ this.File_save.fillCanvasBackground(ctx, '#ffffff');
+ ctx.globalCompositeOperation = 'source-over';
+ }
+
+ //save using lib
+ canvas.toBlob(function (blob) {
+ _this.setToClipboard(blob);
+ });
+ }
+ else{
+ alertify.error('Missing permissions to write to Clipboard.cc');
+ }
+ }
+
+ async setToClipboard(blob) {
+ const data = [new ClipboardItem({ [blob.type]: blob })];
+ await navigator.clipboard.write(data);
+ }
+
+ async askWritePermission() {
+ try {
+ // The clipboard-write permission is granted automatically to pages
+ // when they are the active tab. So it's not required, but it's more safe.
+ const { state } = await navigator.permissions.query({ name: 'clipboard-write' })
+ return state === 'granted';
+ }
+ catch (error) {
+ // Browser compatibility / Security error (ONLY HTTPS) ...
+ return false;
+ }
+ }
+}
+
+export default Copy_class;
diff --git a/paintplus/frontend/src/js/modules/edit/history_panel.js b/paintplus/frontend/src/js/modules/edit/history_panel.js
new file mode 100644
index 0000000..310d829
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/edit/history_panel.js
@@ -0,0 +1,145 @@
+/**
+ * History Panel — visual undo history timeline.
+ * Shows the last N actions as a clickable list. Click any item to undo/redo to that point.
+ * Docks as a floating panel on the right side of the screen.
+ *
+ * Menu target: edit/history_panel.toggle
+ */
+
+import app from './../../app.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Edit_history_panel_class {
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this._panel = null;
+ this._interval = null;
+ }
+
+ toggle() {
+ if (this._panel) {
+ this._stop();
+ } else {
+ this._start();
+ }
+ }
+
+ _start() {
+ this._buildPanel();
+ this._render();
+ // Refresh whenever the history changes (poll lightly)
+ this._interval = setInterval(() => this._render(), 800);
+ }
+
+ _stop() {
+ if (this._interval) { clearInterval(this._interval); this._interval = null; }
+ if (this._panel) { this._panel.remove(); this._panel = null; }
+ }
+
+ _buildPanel() {
+ const panel = document.createElement('div');
+ panel.id = 'history_panel';
+ Object.assign(panel.style, {
+ position: 'fixed',
+ top: '60px',
+ right: '0',
+ width: '200px',
+ maxHeight: 'calc(100vh - 80px)',
+ overflowY: 'auto',
+ background: '#1a1a1a',
+ borderLeft: '1px solid #333',
+ borderBottom: '1px solid #333',
+ borderRadius: '0 0 0 10px',
+ zIndex: '8888',
+ fontFamily: 'sans-serif',
+ fontSize: '12px',
+ color: '#ccc',
+ boxShadow: '-4px 4px 16px rgba(0,0,0,0.4)',
+ userSelect: 'none',
+ });
+ panel.innerHTML = `
+
+ History
+ ×
+
+
`;
+ document.body.appendChild(panel);
+ this._panel = panel;
+ panel.querySelector('#hist-close').addEventListener('click', () => this._stop());
+ }
+
+ _render() {
+ if (!this._panel) return;
+ const list = this._panel.querySelector('#hist-list');
+ if (!list) return;
+
+ const history = app.State.action_history || [];
+ const idx = app.State.action_history_index ?? history.length;
+
+ if (history.length === 0) {
+ list.innerHTML = `No actions yet.
`;
+ return;
+ }
+
+ // Build rows newest-first
+ const rows = [];
+ // "Current state" row at top
+ const atTop = idx >= history.length;
+ rows.push(`
+ ${atTop ? '▶' : '○'} Current state
+
`);
+
+ for (let i = history.length - 1; i >= 0; i--) {
+ const action = history[i];
+ const isCurrent = (i === idx - 1);
+ const isFuture = (i >= idx);
+ const label = action.action_description || action.action_id || `Step ${i + 1}`;
+ rows.push(`
+ ${isCurrent ? '▶' : isFuture ? '○' : '·'} ${_escHtml(label)}
+
`);
+ }
+ list.innerHTML = rows.join('');
+
+ // Wire clicks
+ list.querySelectorAll('[data-idx]').forEach(el => {
+ el.addEventListener('click', () => {
+ const target = parseInt(el.dataset.idx, 10);
+ this._jumpTo(target);
+ });
+ });
+ }
+
+ _jumpTo(targetIdx) {
+ const history = app.State.action_history || [];
+ const current = app.State.action_history_index ?? history.length;
+
+ if (targetIdx === current) return;
+
+ const steps = targetIdx - current;
+ if (steps > 0) {
+ for (let i = 0; i < steps; i++) app.State.redo_action();
+ } else {
+ for (let i = 0; i < Math.abs(steps); i++) app.State.undo_action();
+ }
+ this._render();
+ }
+}
+
+function _escHtml(s) {
+ return String(s).replace(/&/g,'&').replace(//g,'>');
+}
+
+export default Edit_history_panel_class;
diff --git a/paintplus/frontend/src/js/modules/edit/paste.js b/paintplus/frontend/src/js/modules/edit/paste.js
new file mode 100644
index 0000000..acb8ee8
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/edit/paste.js
@@ -0,0 +1,10 @@
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Edit_paste_class {
+
+ paste() {
+ alertify.error('Use Ctrl+V keyboard shortcut to paste from Clipboard.');
+ }
+}
+
+export default Edit_paste_class;
diff --git a/paintplus/frontend/src/js/modules/edit/redo.js b/paintplus/frontend/src/js/modules/edit/redo.js
new file mode 100644
index 0000000..0312b6b
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/edit/redo.js
@@ -0,0 +1,14 @@
+import Base_state_class from './../../core/base-state.js';
+
+class Edit_redo_class {
+
+ constructor() {
+ this.Base_state = new Base_state_class();
+ }
+
+ redo() {
+ this.Base_state.redo();
+ }
+}
+
+export default Edit_redo_class;
diff --git a/paintplus/frontend/src/js/modules/edit/selection.js b/paintplus/frontend/src/js/modules/edit/selection.js
new file mode 100644
index 0000000..bd772ba
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/edit/selection.js
@@ -0,0 +1,26 @@
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Selection_class from './../../tools/selection.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Edit_selection_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ this.Selection = new Selection_class(this.Base_layers.ctx);
+ }
+
+ select_all() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ this.Selection.select_all();
+ }
+
+ delete() {
+ this.Selection.delete_selection();
+ }
+}
+
+export default Edit_selection_class;
diff --git a/paintplus/frontend/src/js/modules/edit/undo.js b/paintplus/frontend/src/js/modules/edit/undo.js
new file mode 100644
index 0000000..bae4a85
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/edit/undo.js
@@ -0,0 +1,31 @@
+import Base_state_class from './../../core/base-state.js';
+
+var instance = null;
+
+class Edit_undo_class {
+
+ constructor() {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_state = new Base_state_class();
+ this.events();
+ }
+
+ events(){
+ var _this = this;
+
+ document.querySelector('#undo_button').addEventListener('click', function (event) {
+ _this.Base_state.undo();
+ });
+ }
+
+ undo() {
+ this.Base_state.undo();
+ }
+}
+
+export default Edit_undo_class;
diff --git a/paintplus/frontend/src/js/modules/effects/abstract/css.js b/paintplus/frontend/src/js/modules/effects/abstract/css.js
new file mode 100644
index 0000000..88c9f70
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/abstract/css.js
@@ -0,0 +1,71 @@
+import app from './../../../app.js';
+import config from './../../../config.js';
+import Dialog_class from './../../../libs/popup.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import Helper_class from './../../../libs/helpers.js';
+
+class Effects_common_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.params = null;
+ }
+
+ show_dialog(type, params, filter_id) {
+ var _this = this;
+ var title = this.Helper.ucfirst(type);
+ title = title.replace(/-/g, ' ');
+
+ var preview_padding = 0;
+ if(typeof this.preview_padding != "undefined"){
+ preview_padding = this.preview_padding;
+ }
+
+ var settings = {
+ title: title,
+ preview: true,
+ preview_padding: preview_padding,
+ effects: true,
+ params: params,
+ on_change: function (params, canvas_preview, w, h) {
+ _this.params = params;
+ canvas_preview.filter = _this.preview(params, type);
+ canvas_preview.drawImage(this.layer_active_small,
+ preview_padding, preview_padding,
+ _this.POP.width_mini - preview_padding * 2, _this.POP.height_mini - preview_padding * 2
+ );
+ },
+ on_finish: function (params) {
+ _this.params = params;
+ _this.save(params, type, filter_id);
+ },
+ };
+ this.Base_layers.disable_filter(filter_id);
+ this.POP.show(settings);
+ this.Base_layers.disable_filter(null);
+ }
+
+ save(params, type, filter_id) {
+ return app.State.do_action(
+ new app.Actions.Add_layer_filter_action(null, type, params, filter_id)
+ );
+ }
+
+ preview(params, type) {
+ if(type == 'shadow'){
+ type = 'drop-shadow';
+ }
+
+ var value = this.convert_value(params.value, params, 'preview');
+ return type + "(" + value + ")";
+ }
+
+ convert_value(value, params) {
+ return value;
+ }
+
+}
+
+export default Effects_common_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/black_and_white.js b/paintplus/frontend/src/js/modules/effects/black_and_white.js
new file mode 100644
index 0000000..6755428
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/black_and_white.js
@@ -0,0 +1,219 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_backAndWhite_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ }
+
+ black_and_white() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //create tmp canvas
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //calc default level
+ var default_level = this.thresholding(ctx, canvas.width, canvas.height, true);
+
+ var settings = {
+ title: 'Black and White',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "level", title: "Level:", value: default_level, range: [0, 255]},
+ {name: "dithering", title: "Dithering:", value: false},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ //check params
+ var level = document.getElementById("pop_data_level");
+ if (params.dithering == false)
+ level.disabled = false;
+ else
+ level.disabled = true;
+
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ var W = data.width;
+ var H = data.height;
+
+ //create tmp canvas
+ var canvas = document.createElement('canvas');
+ canvas.width = W;
+ canvas.height = H;
+
+ var imgData = data.data;
+ var grey, c, quant_error, m;
+ if (params.dithering !== true) {
+ //no differing
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]);
+ if (grey <= params.level)
+ c = 0;
+ else
+ c = 255;
+ imgData[i] = c;
+ imgData[i + 1] = c;
+ imgData[i + 2] = c;
+ }
+ }
+ else {
+ //Floyd–Steinberg dithering
+ var img2 = canvas.getContext("2d").getImageData(0, 0, W, H);
+ var imgData2 = img2.data;
+ for (var j = 0; j < H; j++) {
+ for (var i = 0; i < W; i++) {
+ var k = ((j * (W * 4)) + (i * 4));
+ if (imgData[k + 3] == 0)
+ continue; //transparent
+
+ grey = Math.round(0.2126 * imgData[k] + 0.7152 * imgData[k + 1] + 0.0722 * imgData[k + 2]);
+ grey = grey + imgData2[k]; //add data shft from previous iterations
+ c = Math.floor(grey / 256);
+ if (c == 1)
+ c = 255;
+ imgData[k] = c;
+ imgData[k + 1] = c;
+ imgData[k + 2] = c;
+ quant_error = grey - c;
+ if (i + 1 < W) {
+ m = k + 4;
+ imgData2[m] += Math.round(quant_error * 7 / 16);
+ }
+ if (i - 1 > 0 && j + 1 < H) {
+ m = k - 4 + W * 4;
+ imgData2[m] += Math.round(quant_error * 3 / 16);
+ }
+ if (j + 1 < H) {
+ m = k + W * 4;
+ imgData2[m] += Math.round(quant_error * 5 / 16);
+ }
+ if (i + 1 < W && j + 1 < H) {
+ m = k + 4 + W * 4;
+ imgData2[m] += Math.round(quant_error * 1 / 16);
+ }
+ }
+ }
+ }
+ return data;
+ }
+
+ thresholding(ctx, W, H, only_level) {
+ var img = ctx.getImageData(0, 0, W, H);
+ var imgData = img.data;
+ var hist_data = [];
+ var grey;
+ for (var i = 0; i <= 255; i++)
+ hist_data[i] = 0;
+ for (var i = 0; i < imgData.length; i += 4) {
+ grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]);
+ hist_data[grey]++;
+ }
+ var level = this.otsu(hist_data, W * H);
+ if (only_level === true)
+ return level;
+ var c;
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]);
+ if (grey < level)
+ c = 0;
+ else
+ c = 255;
+ imgData[i] = c;
+ imgData[i + 1] = c;
+ imgData[i + 2] = c;
+ }
+ ctx.putImageData(img, 0, 0);
+ }
+
+ //http://en.wikipedia.org/wiki/Otsu%27s_Method
+ otsu(histogram, total) {
+ var sum = 0;
+ for (var i = 1; i < 256; ++i)
+ sum += i * histogram[i];
+ var mB, mF, between;
+ var sumB = 0;
+ var wB = 0;
+ var wF = 0;
+ var max = 0;
+ var threshold = 0;
+ for (var i = 0; i < 256; ++i) {
+ wB += histogram[i];
+ if (wB == 0)
+ continue;
+ wF = total - wB;
+ if (wF == 0)
+ break;
+ sumB += i * histogram[i];
+ mB = sumB / wB;
+ mF = (sum - sumB) / wF;
+ between = wB * wF * Math.pow(mB - mF, 2);
+ if (between > max) {
+ max = between;
+ threshold = i;
+ }
+ }
+ return threshold;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var default_level = this.thresholding(ctx, canvas_thumb.width, canvas_thumb.height, true);
+ var params = {
+ level: default_level,
+ dithering: false,
+ }
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_backAndWhite_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/blueprint.js b/paintplus/frontend/src/js/modules/effects/blueprint.js
new file mode 100644
index 0000000..7a60163
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/blueprint.js
@@ -0,0 +1,157 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import glfx from './../../libs/glfx.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_blueprint_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.ImageFilters = ImageFilters;
+ this.fx_filter = false;
+ }
+
+ blueprint() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+ var ctx = canvas.getContext("2d");
+
+ //create blue layer
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.fillStyle = '#0e58a3';
+ ctx2.fillRect(0, 0, width, height);
+
+ //apply edges
+ var img = ctx.getImageData(0, 0, width, height);
+ var img = this.ImageFilters.Edge(img);
+ ctx.putImageData(img, 0, 0);
+
+ //denoise
+ var texture = this.fx_filter.texture(canvas);
+ this.fx_filter.draw(texture).denoise(20).update(); //effect
+ canvas = this.fx_filter;
+
+ //Brightness
+ var img = ctx.getImageData(0, 0, width, height);
+ var img = this.ImageFilters.BrightnessContrastPhotoshop(img, 80, 0);
+ ctx.putImageData(img, 0, 0);
+
+ //merge
+ ctx2.globalCompositeOperation = "screen";
+ ctx2.filter = 'grayscale(1)';
+ ctx2.drawImage(canvas, 0, 0);
+ ctx2.globalCompositeOperation = "source-over";
+ ctx2.filter = 'none';
+
+ //draw lines
+ this.draw_grid(ctx2, 20);
+
+ return canvas2;
+ }
+
+ /**
+ * draw grid
+ *
+ * @param {CanvasContext} ctx
+ * @param {Int} size
+ */
+ draw_grid(ctx, size) {
+ if (this.grid == false)
+ return;
+
+ var width = config.WIDTH;
+ var height = config.HEIGHT;
+ var color_main = 'rgba(255, 255, 255, 0.5)';
+ var color_small = 'rgba(255, 255, 255, 0.1)';
+
+ //size
+ if (size != undefined && size != undefined)
+ this.grid_size = [size, size];
+ else {
+ size = this.grid_size[0];
+ size = this.grid_size[1];
+ }
+ size = parseInt(size);
+ size = parseInt(size);
+ ctx.lineWidth = 1;
+ ctx.beginPath();
+ if (size < 2)
+ size = 2;
+ if (size < 2)
+ size = 2;
+ for (var i = size; i < width; i = i + size) {
+ if (size == 0)
+ break;
+ if (i % (size * 5) == 0) {
+ //main lines
+ ctx.strokeStyle = color_main;
+ }
+ else {
+ //small lines
+ ctx.strokeStyle = color_small;
+ }
+ ctx.beginPath();
+ ctx.moveTo(0.5 + i, 0);
+ ctx.lineTo(0.5 + i, height);
+ ctx.stroke();
+ }
+ for (var i = size; i < height; i = i + size) {
+ if (size == 0)
+ break;
+ if (i % (size * 5) == 0) {
+ //main lines
+ ctx.strokeStyle = color_main;
+ }
+ else {
+ //small lines
+ ctx.strokeStyle = color_small;
+ }
+ ctx.beginPath();
+ ctx.moveTo(0, 0.5 + i);
+ ctx.lineTo(width, 0.5 + i);
+ ctx.stroke();
+ }
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var data = this.change(canvas, canvas_thumb.width, canvas_thumb.height);
+ ctx.drawImage(data, 0, 0);
+ }
+}
+
+export default Effects_blueprint_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/borders.js b/paintplus/frontend/src/js/modules/effects/borders.js
new file mode 100644
index 0000000..0ba3ddb
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/borders.js
@@ -0,0 +1,107 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import Effects_browser_class from "./browser";
+
+class Effects_borders_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Effects_browser = new Effects_browser_class();
+ }
+
+ borders(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var _this = this;
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'borders');
+
+ var settings = {
+ title: 'Borders',
+ params: [
+ {name: "color", title: "Color:", value: filter.color ??= config.COLOR, type: 'color'},
+ {name: "size", title: "Size:", value: filter.size ??= 10},
+ ],
+ on_finish: function (params) {
+ var target = Math.min(config.WIDTH, config.HEIGHT);
+ _this.add_borders(params, filter_id);
+ },
+ };
+ var rotate = config.layer.rotate;
+ config.layer.rotate = 0;
+ this.Base_layers.disable_filter(filter_id);
+ this.POP.show(settings);
+ config.layer.rotate = rotate;
+ this.Base_layers.disable_filter(null);
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ ctx.drawImage(canvas_thumb,
+ 5, 5,
+ this.Effects_browser.preview_width - 10, this.Effects_browser.preview_height - 10);
+
+ //add borders
+ ctx.strokeStyle = '#000000';
+ ctx.lineWidth = 10;
+ ctx.beginPath();
+ ctx.rect(0, 0, canvas.width, canvas.height);
+ ctx.stroke();
+ }
+
+ render_pre(ctx, data) {
+
+ }
+
+ render_post(ctx, data, layer){
+ var size = Math.max(0, data.params.size);
+
+ var x = layer.x;
+ var y = layer.y;
+ var width = parseInt(layer.width);
+ var height = parseInt(layer.height);
+
+ //legacy check
+ if(x == null) x = 0;
+ if(y == null) y = 0;
+ if(!width) width = config.WIDTH;
+ if(!height) height = config.HEIGHT;
+
+ ctx.save();
+
+ //set styles
+ ctx.strokeStyle = data.params.color;
+ ctx.lineWidth = size;
+
+ //draw with rotation support
+ ctx.translate(layer.x + width / 2, layer.y + height / 2);
+ ctx.rotate(layer.rotate * Math.PI / 180);
+ var x_new = -width / 2;
+ var y_new = -height / 2;
+
+ ctx.beginPath();
+ ctx.rect(x_new - size * 0.5, y_new - size * 0.5, width + size, height + size);
+ ctx.stroke();
+
+ ctx.restore();
+ }
+
+ add_borders(params, filter_id) {
+ //apply effect
+ return app.State.do_action(
+ new app.Actions.Add_layer_filter_action(config.layer.id, 'borders', params, filter_id)
+ );
+ }
+
+}
+
+export default Effects_borders_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/box_blur.js b/paintplus/frontend/src/js/modules/effects/box_blur.js
new file mode 100644
index 0000000..e3dc1f2
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/box_blur.js
@@ -0,0 +1,88 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_boxBlur_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ box_blur() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Box blur',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "param1", title: "H Radius:", value: 3, range: [1, 20]},
+ {name: "param2", title: "V Radius:", value: 3, range: [1, 20]},
+ {name: "param3", title: "Quality:", value: 3, range: [1, 20]},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ var param1 = params.param1;
+ var param2 = params.param2;
+ var param3 = params.param3;
+
+ var filtered = ImageFilters.BoxBlur(data, param1, param2, param3);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {
+ param1: 20,
+ param2: 1,
+ param3: 1,
+ }
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_boxBlur_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/browser.js b/paintplus/frontend/src/js/modules/effects/browser.js
new file mode 100644
index 0000000..ed57f03
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/browser.js
@@ -0,0 +1,140 @@
+import config from './../../config.js';
+import Base_tools_class from './../../core/base-tools.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_browser_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.POP = new Dialog_class();
+ this.preview_width = 150;
+ this.preview_height = 120;
+ }
+
+ async browser() {
+ var _this = this;
+ var html = '';
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var data = this.get_effects_list();
+
+ for (var i in data) {
+ var title = data[i].title;
+
+ html += '';
+ html += '
';
+ html += '
' + title + '
';
+ html += '
';
+ }
+
+ var settings = {
+ title: 'Effects browser',
+ className: 'wide',
+ on_load: function (params, popup) {
+ var node = document.createElement("div");
+ node.classList.add('flex-container');
+ node.innerHTML = html;
+ popup.el.querySelector('.dialog_content').appendChild(node);
+ //events
+ var targets = popup.el.querySelectorAll('.item canvas');
+ for (var i = 0; i < targets.length; i++) {
+ targets[i].addEventListener('click', function (event) {
+ //we have click
+ var key = this.dataset.key;
+ for (var i in data) {
+ if(data[i].key == key){
+ var function_name = _this.get_function_from_path(key);
+ _this.POP.hide();
+ data[i].object[function_name]();
+ }
+ }
+ });
+ }
+ },
+ };
+ this.POP.show(settings);
+
+ //sleep, lets wait till DOM is finished
+ await new Promise(r => setTimeout(r, 10));
+
+ //generate thumb
+ var active_image = this.Base_layers.convert_layer_to_canvas();
+
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ canvas.width = this.preview_width;
+ canvas.height = this.preview_height;
+
+ ctx.scale(this.preview_width / active_image.width, this.preview_height / active_image.height);
+ ctx.drawImage(active_image, 0, 0);
+ ctx.scale(1, 1);
+
+ //draw demo thumbs
+ for (var i in data) {
+ var title = data[i].title;
+ var function_name = 'demo';
+ if(typeof data[i].object[function_name] == "undefined")
+ continue;
+ data[i].object[function_name]('c_'+data[i].key, canvas);
+ }
+ }
+
+ get_effects_list() {
+ var list = [];
+
+ for (var i in this.Base_gui.modules) {
+ if (i.indexOf("effects") == -1 || i.indexOf("abstract") > -1 || i.indexOf("browser") > -1)
+ continue;
+
+ list.push({
+ title: this.get_filter_title(i),
+ key: i,
+ object: this.Base_gui.modules[i],
+ });
+ }
+
+ list.sort(function(a, b) {
+ var nameA = a.title.toUpperCase();
+ var nameB = b.title.toUpperCase();
+ if (nameA < nameB) return -1;
+ if (nameA > nameB) return 1;
+ return 0;
+ });
+
+ return list;
+ }
+
+ get_filter_title(key) {
+ var parts = key.split("/");
+ var title = parts[parts.length - 1];
+
+ //exceptions
+ if (title == 'negative')
+ title = 'invert';
+
+ title = title.replace(/_/g, ' ');
+ title = title.charAt(0).toUpperCase() + title.slice(1); //make first letter uppercase
+
+ return title;
+ }
+
+ get_function_from_path(path){
+ var parts = path.split("/");
+ var result = parts[parts.length - 1];
+ result = result.replace(/-/, '_');
+
+ return result;
+ }
+}
+
+export default Effects_browser_class;
diff --git a/paintplus/frontend/src/js/modules/effects/common/blur.js b/paintplus/frontend/src/js/modules/effects/common/blur.js
new file mode 100644
index 0000000..254efc0
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/blur.js
@@ -0,0 +1,68 @@
+import config from '../../../config.js';
+import Effects_common_class from '../abstract/css.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_blur_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ blur(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'blur');
+
+ var params = [
+ {name: "value", title: "Percentage:", value: filter.value ??= 5, range: [0, 50]},
+ ];
+ this.show_dialog('blur', params, filter_id);
+ }
+
+ convert_value(value, params, type) {
+
+ //adapt size to real canvas dimensions
+ if (type == 'preview') {
+ var diff = (this.POP.width_mini / this.POP.height_mini) / (config.WIDTH / config.HEIGHT);
+
+ value = value * diff;
+ }
+
+ return value + 'px';
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(5, null, 'preview');
+ ctx.filter = "blur("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'blur(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_blur_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/brightness.js b/paintplus/frontend/src/js/modules/effects/common/brightness.js
new file mode 100644
index 0000000..2fc9368
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/brightness.js
@@ -0,0 +1,68 @@
+import Effects_common_class from '../abstract/css.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import config from "../../../config";
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_brightness_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ brightness(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'brightness');
+
+ var params = [
+ {name: "value", title: "Percentage:", value: filter.value ??= 50, range: [-100, 100]},
+ ];
+ this.show_dialog('brightness', params, filter_id);
+ }
+
+ convert_value(value) {
+ var system_value;
+ if (value > 0) {
+ system_value = value / 100 + 1;
+ }
+ else if (value < 0) {
+ system_value = value / 100 + 1;
+ }
+ else {
+ system_value = 1;
+ }
+
+ return system_value;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(30, null, 'preview');
+ ctx.filter = "brightness("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'brightness(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_brightness_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/contrast.js b/paintplus/frontend/src/js/modules/effects/common/contrast.js
new file mode 100644
index 0000000..6f9126a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/contrast.js
@@ -0,0 +1,69 @@
+import Effects_common_class from '../abstract/css.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import config from "../../../config";
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_contrast_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ contrast(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'contrast');
+
+ var params = [
+ {name: "value", title: "Percentage:", value: filter.value ??= 40, range: [-100, 100]},
+ ];
+ this.show_dialog('contrast', params, filter_id);
+ }
+
+ convert_value(value) {
+ var system_value;
+ if (value > 0) {
+ system_value = value / 100 + 1;
+ }
+ else if (value < 0) {
+ system_value = value / 100 + 1;
+ }
+ else {
+ system_value = 1;
+ }
+
+ return system_value;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(40, null, 'preview');
+ ctx.filter = "contrast("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'contrast(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_contrast_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/grayscale.js b/paintplus/frontend/src/js/modules/effects/common/grayscale.js
new file mode 100644
index 0000000..a811520
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/grayscale.js
@@ -0,0 +1,60 @@
+import Effects_common_class from '../abstract/css.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import config from "../../../config";
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_grayscale_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ grayscale(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'grayscale');
+
+ var params = [
+ {name: "value", title: "Percentage:", value: filter.value ??= 100, range: [0, 100]},
+ ];
+ this.show_dialog('grayscale', params, filter_id);
+ }
+
+ convert_value(value) {
+ var system_value = value / 100;
+
+ return system_value;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(100, null, 'preview');
+ ctx.filter = "grayscale("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'grayscale(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_grayscale_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/hue-rotate.js b/paintplus/frontend/src/js/modules/effects/common/hue-rotate.js
new file mode 100644
index 0000000..cff185a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/hue-rotate.js
@@ -0,0 +1,58 @@
+import Effects_common_class from '../abstract/css.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import config from "../../../config";
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_hueRotate_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ hue_rotate(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'hue-rotate');
+
+ var params = [
+ {name: "value", title: "Degree:", value: filter.value ??= 90, range: [0, 360]},
+ ];
+ this.show_dialog('hue-rotate', params, filter_id);
+ }
+
+ convert_value(value) {
+ return value + 'deg';
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(90, null, 'preview');
+ ctx.filter = "hue-rotate("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'hue-rotate(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_hueRotate_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/invert.js b/paintplus/frontend/src/js/modules/effects/common/invert.js
new file mode 100644
index 0000000..f3ffcb0
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/invert.js
@@ -0,0 +1,59 @@
+import Effects_common_class from '../abstract/css.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import config from "../../../config";
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_invert_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ invert(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'invert');
+
+ var params = [
+ {name: "value", title: "Percentage:", value: filter.value ??= 100, range: [0, 100]},
+ ];
+ this.show_dialog('invert', params, filter_id);
+ }
+
+ convert_value(value) {
+ var system_value = value / 100;
+ return system_value;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(100, null, 'preview');
+ ctx.filter = "invert("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'invert(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_invert_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/saturate.js b/paintplus/frontend/src/js/modules/effects/common/saturate.js
new file mode 100644
index 0000000..05ccc98
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/saturate.js
@@ -0,0 +1,69 @@
+import Effects_common_class from '../abstract/css.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import config from "../../../config";
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_saturate_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ saturate(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'saturate');
+
+ var params = [
+ {name: "value", title: "Percentage:", value: filter.value ??= -50, range: [-100, 100]},
+ ];
+ this.show_dialog('saturate', params, filter_id);
+ }
+
+ convert_value(value) {
+ var system_value;
+ if (value > 0) {
+ system_value = value / 100 + 1;
+ }
+ else if (value < 0) {
+ system_value = value / 100 + 1;
+ }
+ else {
+ system_value = 1;
+ }
+
+ return system_value;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(-50, null, 'preview');
+ ctx.filter = "saturate("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'saturate(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_saturate_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/sepia.js b/paintplus/frontend/src/js/modules/effects/common/sepia.js
new file mode 100644
index 0000000..0e8e15b
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/sepia.js
@@ -0,0 +1,60 @@
+import Effects_common_class from '../abstract/css.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import config from "../../../config";
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_sepia_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ sepia(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'sepia');
+
+ var params = [
+ {name: "value", title: "Percentage:", value: filter.value ??= 60, range: [0, 100]},
+ ];
+ this.show_dialog('sepia', params, filter_id);
+ }
+
+ convert_value(value) {
+ var system_value = value / 100;
+
+ return system_value;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(60, null, 'preview');
+ ctx.filter = "sepia("+size+")";
+ ctx.drawImage(canvas_thumb, 0, 0);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'sepia(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_sepia_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/common/shadow.js b/paintplus/frontend/src/js/modules/effects/common/shadow.js
new file mode 100644
index 0000000..e074ce1
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/common/shadow.js
@@ -0,0 +1,79 @@
+import config from '../../../config.js';
+import Effects_common_class from '../abstract/css.js';
+import Dialog_class from '../../../libs/popup.js';
+import Effects_browser_class from '../browser.js';
+import Base_layers_class from './../../../core/base-layers.js';
+import alertify from './../../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_brightness_class extends Effects_common_class {
+
+ constructor() {
+ super();
+ this.POP = new Dialog_class();
+ this.Effects_browser = new Effects_browser_class();
+ this.Base_layers = new Base_layers_class();
+ this.preview_padding = 20;
+ }
+
+ shadow(filter_id) {
+ if (config.layer.type == null) {
+ alertify.error('Layer is empty.');
+ return;
+ }
+
+ var filter = this.Base_layers.find_filter_by_id(filter_id, 'shadow');
+
+ var params = [
+ {name: "x", title: "Offset X:", value: filter.x ??= 10, range: [-100, 100]},
+ {name: "y", title: "Offset Y:", value: filter.y ??= 10, range: [-100, 100]},
+ {name: "value", title: "Radius:", value: filter.value ??= 5, range: [0, 100]},
+ {name: "color", title: "Color:", value: filter.color ??= "#000000", type: 'color'},
+ ];
+ this.show_dialog('shadow', params, filter_id);
+ }
+
+ convert_value(value, params, type) {
+ var system_value = value;
+
+ //adapt size to real canvas dimensions
+ if (type == 'preview') {
+ var diff = (this.POP.width_mini / this.POP.height_mini) / (config.WIDTH / config.HEIGHT);
+
+ params.x = params.x * (this.POP.width_mini / config.WIDTH);
+ params.y = params.y * (this.POP.height_mini / config.HEIGHT);
+ params.value = params.value * diff;
+ }
+
+ return params.x + "px " + params.y + "px " + params.value + "px " + params.color;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //draw
+ var size = this.convert_value(null, {x: 5, y: 5, value: 5, color: '#000000'}, 'preview');
+ ctx.filter = "drop-shadow("+size+")";
+ ctx.drawImage(canvas_thumb,
+ 10, 10,
+ this.Effects_browser.preview_width - 20, this.Effects_browser.preview_height - 20);
+ ctx.filter = 'none';
+ }
+
+ render_pre(ctx, data) {
+ var value = this.convert_value(data.params.value, data.params, 'save');
+ var filter = 'drop-shadow(' + value + ')';
+
+ if(ctx.filter == 'none')
+ ctx.filter = filter;
+ else
+ ctx.filter += ' ' + filter;
+ }
+
+ render_post(ctx, data){
+ ctx.filter = 'none';
+ }
+
+}
+
+export default Effects_brightness_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/denoise.js b/paintplus/frontend/src/js/modules/effects/denoise.js
new file mode 100644
index 0000000..f28d60c
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/denoise.js
@@ -0,0 +1,89 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import glfx from './../../libs/glfx.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_denoise_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ }
+
+ denoise() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Denoise',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "param1", title: "Exponent:", value: 20, range: [0, 50]},
+ ],
+ on_change: function (params, canvas_preview, w, h, canvas_) {
+ var data = _this.change(canvas_, params);
+ canvas_preview.clearRect(0, 0, canvas_.width, canvas_.height);
+ canvas_preview.drawImage(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, params);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, params) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var param1 = parseFloat(params.param1);
+
+ var texture = this.fx_filter.texture(canvas);
+ this.fx_filter.draw(texture).denoise(param1).update(); //effect
+
+ return this.fx_filter;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var params = {
+ param1: 20,
+ };
+ var data = this.change(canvas_thumb, params);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_denoise_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/dither.js b/paintplus/frontend/src/js/modules/effects/dither.js
new file mode 100644
index 0000000..45ffa9a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/dither.js
@@ -0,0 +1,82 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_dither_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ dither() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Dither',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "param1", title: "Levels:", value: "8", range: [2, 32]},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ var param1 = parseFloat(params.param1);
+
+ var filtered = ImageFilters.Dither(data, param1);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {
+ param1: 8,
+ }
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_dither_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/dot_screen.js b/paintplus/frontend/src/js/modules/effects/dot_screen.js
new file mode 100644
index 0000000..aebe463
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/dot_screen.js
@@ -0,0 +1,89 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import glfx from './../../libs/glfx.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_dotScreen_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ }
+
+ dot_screen() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Dot Screen',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "size", title: "Size:", value: "3", range: [1, 20]},
+ ],
+ on_change: function (params, canvas_preview, w, h, canvas_) {
+ var data = _this.change(canvas_, params);
+ canvas_preview.clearRect(0, 0, canvas_.width, canvas_.height);
+ canvas_preview.drawImage(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, params);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, params) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var size = parseFloat(params.size);
+
+ var texture = this.fx_filter.texture(canvas);
+ this.fx_filter.draw(texture).dotScreen(Math.round(canvas.width / 2), Math.round(canvas.height / 2), 0, size).update();
+
+ return this.fx_filter;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var params = {
+ size: 3,
+ };
+ var data = this.change(canvas_thumb, params);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_dotScreen_class;
diff --git a/paintplus/frontend/src/js/modules/effects/edge.js b/paintplus/frontend/src/js/modules/effects/edge.js
new file mode 100644
index 0000000..e5c1081
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/edge.js
@@ -0,0 +1,55 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_edge_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ edge() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data) {
+ var filtered = ImageFilters.Edge(data);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_edge_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/emboss.js b/paintplus/frontend/src/js/modules/effects/emboss.js
new file mode 100644
index 0000000..281305c
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/emboss.js
@@ -0,0 +1,55 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_emboss_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ emboss() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data) {
+ var filtered = ImageFilters.Emboss(data);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_emboss_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/enrich.js b/paintplus/frontend/src/js/modules/effects/enrich.js
new file mode 100644
index 0000000..9b904e5
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/enrich.js
@@ -0,0 +1,76 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_enrich_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ enrich() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Enrich',
+ preview: true,
+ effects: true,
+ params: [],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ var filtered = ImageFilters.Enrich(data);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {}
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_enrich_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/grains.js b/paintplus/frontend/src/js/modules/effects/grains.js
new file mode 100644
index 0000000..2eeba0f
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/grains.js
@@ -0,0 +1,111 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_grains_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ }
+
+ grains() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Grains',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "level", title: "Level:", value: "30", range: [0, 50]},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ if (params.level == 0)
+ return data;
+ var imgData = data.data;
+
+ var H = data.height;
+ var W = data.width;
+
+ for (var j = 0; j < H; j++) {
+ for (var i = 0; i < W; i++) {
+ var x = (i + j * W) * 4;
+ if (imgData[x + 3] == 0)
+ continue; //transparent
+ //increase it's lightness
+ var delta = this.Helper.getRandomInt(0, params.level);
+ if (delta == 0)
+ continue;
+
+ if (imgData[x] - delta < 0)
+ imgData[x] = -(imgData[x] - delta);
+ else
+ imgData[x] = imgData[x] - delta;
+ if (imgData[x + 1] - delta < 0)
+ imgData[x + 1] = -(imgData[x + 1] - delta);
+ else
+ imgData[x + 1] = imgData[x + 1] - delta;
+ if (imgData[x + 2] - delta < 0)
+ imgData[x + 2] = -(imgData[x + 2] - delta);
+ else
+ imgData[x + 2] = imgData[x + 2] - delta;
+ }
+ }
+
+ return data;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {
+ level: 30,
+ }
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_grains_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/greyscale.js b/paintplus/frontend/src/js/modules/effects/greyscale.js
new file mode 100644
index 0000000..56ac996
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/greyscale.js
@@ -0,0 +1,157 @@
+/**
+ * Greyscale Effect - Convert layer to greyscale (desaturate)
+ * Useful for CNC carving, depth maps, etc.
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Effects_greyscale_class {
+
+ constructor() {
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ greyscale() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster first.');
+ return;
+ }
+
+ var settings = {
+ title: 'Convert to Greyscale',
+ preview: true,
+ effects: true,
+ params: [
+ {
+ name: "method",
+ title: "Method:",
+ values: ["Luminosity (Rec. 709)", "Average", "Lightness", "Red Channel", "Green Channel", "Blue Channel"],
+ value: "Luminosity (Rec. 709)"
+ },
+ {name: "contrast", title: "Contrast:", value: 0, range: [-100, 100]},
+ {name: "brightness", title: "Brightness:", value: 0, range: [-100, 100]},
+ {name: "invert", title: "Invert:", value: false},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.apply_greyscale(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.apply_greyscale(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ apply_greyscale(imageData, params) {
+ var data = imageData.data;
+ var method = params.method;
+ var contrast = (params.contrast || 0) / 100;
+ var brightness = (params.brightness || 0) * 2.55; // Convert to 0-255 range
+ var invert = params.invert || false;
+
+ // Contrast factor
+ var factor = (1 + contrast);
+
+ for (var i = 0; i < data.length; i += 4) {
+ if (data[i + 3] === 0) continue; // Skip transparent pixels
+
+ var r = data[i];
+ var g = data[i + 1];
+ var b = data[i + 2];
+ var grey;
+
+ // Calculate greyscale value based on method
+ switch (method) {
+ case "Luminosity (Rec. 709)":
+ // Standard HDTV (Rec. 709) - most accurate perceptual
+ grey = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ break;
+ case "Average":
+ grey = (r + g + b) / 3;
+ break;
+ case "Lightness":
+ // HSL lightness
+ grey = (Math.max(r, g, b) + Math.min(r, g, b)) / 2;
+ break;
+ case "Red Channel":
+ grey = r;
+ break;
+ case "Green Channel":
+ grey = g;
+ break;
+ case "Blue Channel":
+ grey = b;
+ break;
+ default:
+ grey = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ }
+
+ // Apply brightness
+ grey += brightness;
+
+ // Apply contrast (around middle grey)
+ grey = ((grey - 128) * factor) + 128;
+
+ // Invert if requested
+ if (invert) {
+ grey = 255 - grey;
+ }
+
+ // Clamp to valid range
+ grey = Math.max(0, Math.min(255, Math.round(grey)));
+
+ data[i] = grey;
+ data[i + 1] = grey;
+ data[i + 2] = grey;
+ }
+
+ return imageData;
+ }
+
+ demo(canvas_id, canvas_thumb) {
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {
+ method: "Luminosity (Rec. 709)",
+ contrast: 0,
+ brightness: 0,
+ invert: false
+ };
+ var data = this.apply_greyscale(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+}
+
+export default Effects_greyscale_class;
diff --git a/paintplus/frontend/src/js/modules/effects/heatmap.js b/paintplus/frontend/src/js/modules/effects/heatmap.js
new file mode 100644
index 0000000..31d6949
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/heatmap.js
@@ -0,0 +1,111 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_heatmap_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ heatmap() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data) {
+ var imgData = data.data;
+ var grey, RGB;
+
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ grey = Math.round(0.2126 * imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]);
+ RGB = this.color2heat(grey);
+ imgData[i] = RGB.R;
+ imgData[i + 1] = RGB.G;
+ imgData[i + 2] = RGB.B;
+ }
+
+ return data;
+ }
+
+ color2heat(value) {
+ var RGB = {R: 0, G: 0, B: 0};
+ value = value / 255;
+ if (0 <= value && value <= 1 / 8) {
+ RGB.R = 0;
+ RGB.G = 0;
+ RGB.B = 4 * value + .5; // .5 - 1 // b = 1/2
+ }
+ else if (1 / 8 < value && value <= 3 / 8) {
+ RGB.R = 0;
+ RGB.G = 4 * value - .5; // 0 - 1 // b = - 1/2
+ RGB.B = 1; // small fix
+ }
+ else if (3 / 8 < value && value <= 5 / 8) {
+ RGB.R = 4 * value - 1.5; // 0 - 1 // b = - 3/2
+ RGB.G = 1;
+ RGB.B = -4 * value + 2.5; // 1 - 0 // b = 5/2
+ }
+ else if (5 / 8 < value && value <= 7 / 8) {
+ RGB.R = 1;
+ RGB.G = -4 * value + 3.5; // 1 - 0 // b = 7/2
+ RGB.B = 0;
+ }
+ else if (7 / 8 < value && value <= 1) {
+ RGB.R = -4 * value + 4.5; // 1 - .5 // b = 9/2
+ RGB.G = 0;
+ RGB.B = 0;
+ }
+ else {
+ // should never happen - value > 1
+ RGB.R = .5;
+ RGB.G = 0;
+ RGB.B = 0;
+ }
+ // scale for hex conversion
+ RGB.R *= 255;
+ RGB.G *= 255;
+ RGB.B *= 255;
+
+ RGB.R = Math.round(RGB.R);
+ RGB.G = Math.round(RGB.G);
+ RGB.B = Math.round(RGB.B);
+
+ return RGB;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_heatmap_class;
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/1977.js b/paintplus/frontend/src/js/modules/effects/instagram/1977.js
new file mode 100644
index 0000000..7b5e10a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/1977.js
@@ -0,0 +1,72 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+class Effects_1977_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ //this.Color_matrix = new Color_matrix_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ 1977() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, 0, 0);
+
+ //merge
+ ctx2.globalCompositeOperation = "screen";
+ ctx2.fillStyle = 'rgba(243, 106, 188, 0.3)';
+ ctx2.fillRect(0, 0, width, height);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'contrast(1.1) brightness(1.1) saturate(1.3)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_1977_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/aden.js b/paintplus/frontend/src/js/modules/effects/instagram/aden.js
new file mode 100644
index 0000000..47c7791
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/aden.js
@@ -0,0 +1,74 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+class Effects_aden_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ aden() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ var gradient = ctx2.createLinearGradient(0, 0, width, height);
+ gradient.addColorStop(0, "rgba(66, 10, 14, 0.2)");
+ gradient.addColorStop(1, "rgba(66, 10, 14, 0.2)");
+ ctx2.fillStyle = gradient;
+ ctx2.fillRect(0, 0, width, height);
+
+ //merge
+ ctx2.globalCompositeOperation = "darken";
+ ctx2.drawImage(canvas, 0, 0);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'hue-rotate(-20deg) contrast(0.9) saturate(0.85) brightness(1.2)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_aden_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/clarendon.js b/paintplus/frontend/src/js/modules/effects/instagram/clarendon.js
new file mode 100644
index 0000000..738391e
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/clarendon.js
@@ -0,0 +1,72 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+class Effects_clarendon_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ //this.Color_matrix = new Color_matrix_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ clarendon() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.fillStyle = 'rgba(127, 187, 227, 0.2)';
+ ctx2.fillRect(0, 0, width, height);
+
+ //merge
+ ctx2.globalCompositeOperation = "overlay";
+ ctx2.drawImage(canvas, 0, 0);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'contrast(1.2) saturate(1.35)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_clarendon_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/gingham.js b/paintplus/frontend/src/js/modules/effects/instagram/gingham.js
new file mode 100644
index 0000000..f1fb0aa
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/gingham.js
@@ -0,0 +1,71 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+class Effects_gingham_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ gingham() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, 0, 0);
+
+ //merge
+ ctx2.globalCompositeOperation = "soft-light";
+ ctx2.fillStyle = '#e6e6fa';
+ ctx2.fillRect(0, 0, width, height);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'brightness(1.05) hue-rotate(-10deg)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_gingham_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/inkwell.js b/paintplus/frontend/src/js/modules/effects/instagram/inkwell.js
new file mode 100644
index 0000000..50f8bab
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/inkwell.js
@@ -0,0 +1,69 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+/*
+https://github.com/una/CSSgram/blob/master/source/css/toaster.css
+https://github.com/vigetlabs/canvas-instagram-filters
+*/
+class Effects_inkwell_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ //this.Color_matrix = new Color_matrix_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ inkwell() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+
+ //apply more effects
+ ctx2.filter = 'sepia(0.3) contrast(1.1) brightness(1.1) grayscale(1)';
+ ctx2.drawImage(canvas, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_inkwell_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/lofi.js b/paintplus/frontend/src/js/modules/effects/instagram/lofi.js
new file mode 100644
index 0000000..2422dba
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/lofi.js
@@ -0,0 +1,75 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+class Effects_lofi_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ lofi() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, 0, 0);
+
+ //merge
+ ctx2.globalCompositeOperation = "multiply";
+ var min = Math.min(width, height);
+ var gradient = ctx2.createRadialGradient(width / 2, height / 2, min * 0.7, width / 2, height / 2, min * 1.5);
+ gradient.addColorStop(0, "rgba(0,0,0,0)");
+ gradient.addColorStop(1, "#222222");
+ ctx2.fillStyle = gradient;
+ ctx2.fillRect(0, 0, width, height);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'saturate(1.1) contrast(1.5)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_lofi_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/toaster.js b/paintplus/frontend/src/js/modules/effects/instagram/toaster.js
new file mode 100644
index 0000000..95904bb
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/toaster.js
@@ -0,0 +1,79 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+/*
+https://github.com/una/CSSgram/blob/master/source/css/toaster.css
+https://github.com/vigetlabs/canvas-instagram-filters
+*/
+class Effects_toaster_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ //this.Color_matrix = new Color_matrix_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ toaster() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, 0, 0);
+
+ //merge
+ ctx2.globalCompositeOperation = "screen";
+ var gradient = ctx2.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width * 0.6);
+ gradient.addColorStop(0, "#804e0f");
+ gradient.addColorStop(1, "#3b003b");
+ ctx2.fillStyle = gradient;
+ ctx2.fillRect(0, 0, width, height);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'contrast(1.5) brightness(0.9)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_toaster_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/valencia.js b/paintplus/frontend/src/js/modules/effects/instagram/valencia.js
new file mode 100644
index 0000000..ec3991b
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/valencia.js
@@ -0,0 +1,71 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+class Effects_valencia_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ valencia() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, 0, 0);
+
+ //merge
+ ctx2.globalCompositeOperation = "exclusion";
+ ctx2.fillStyle = '3a0339';
+ ctx2.fillRect(0, 0, width, height);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'contrast(1.08) brightness(1.08) sepia(0.08)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_valencia_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/instagram/xpro2.js b/paintplus/frontend/src/js/modules/effects/instagram/xpro2.js
new file mode 100644
index 0000000..8e8eb40
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/instagram/xpro2.js
@@ -0,0 +1,75 @@
+import app from '../../../app.js';
+import config from '../../../config.js';
+import Dialog_class from '../../../libs/popup.js';
+import Base_layers_class from '../../../core/base-layers.js';
+import alertify from 'alertifyjs/build/alertify.min.js';
+
+class Effects_xpro2_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ xpro2() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+
+ //create temp canvas
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, 0, 0);
+
+ //merge
+ ctx2.globalCompositeOperation = "color-burn";
+ var min = Math.min(width, height);
+ var gradient = ctx2.createRadialGradient(width / 2, height / 2, min * 0.4, width / 2, height / 2, min * 1.1);
+ gradient.addColorStop(0, "#e6e7e0");
+ gradient.addColorStop(1, "rgba(43, 42, 161, 0.6)");
+ ctx2.fillStyle = gradient;
+ ctx2.fillRect(0, 0, width, height);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'sepia(0.3)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_xpro2_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/mosaic.js b/paintplus/frontend/src/js/modules/effects/mosaic.js
new file mode 100644
index 0000000..08841f5
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/mosaic.js
@@ -0,0 +1,86 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_mosaic_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ mosaic() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Mosaic',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "size", title: "Size:", value: 10, range: [1, 100]},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ var size = parseFloat(params.size);
+
+ //convert % to px
+ size = Math.min(data.width, data.height) * size / 100;
+ size = Math.round(size);
+
+ var filtered = ImageFilters.Mosaic(data, size);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {
+ size: 10,
+ }
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_mosaic_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/night_vision.js b/paintplus/frontend/src/js/modules/effects/night_vision.js
new file mode 100644
index 0000000..dfe29ef
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/night_vision.js
@@ -0,0 +1,82 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import glfx from './../../libs/glfx.js';
+import ImageFilters_class from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_nightVision_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ this.ImageFilters = ImageFilters_class;
+ }
+
+ night_vision() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ //create second copy
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, 0, 0);
+
+ // green overlay
+ var img = ctx2.getImageData(0, 0, width, height);
+ //RGB corrections
+ var img = this.ImageFilters.ColorTransformFilter(img, 1, 1, 1, 1, 0, 100, 0, 1);
+ //hue/saturation/luminance
+ var img = this.ImageFilters.HSLAdjustment(img, 0, 0, -50);
+ ctx2.putImageData(img, 0, 0);
+
+ //vignete
+ var texture = this.fx_filter.texture(canvas2);
+ this.fx_filter.draw(texture).vignette(0.2, 0.9).update(); //effect
+ canvas2 = this.fx_filter;
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var params = {};
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_nightVision_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/oil.js b/paintplus/frontend/src/js/modules/effects/oil.js
new file mode 100644
index 0000000..7c52056
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/oil.js
@@ -0,0 +1,85 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_oil_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ oil() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Oil',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "param1", title: "Range:", value: 2, range: [1, 10]},
+ {name: "param2", title: "Levels:", value: "32", range: [1, 256]},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ var param1 = parseFloat(params.param1);
+ var param2 = parseInt(params.param2);
+
+ var filtered = ImageFilters.Oil(data, param1, param2);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {
+ param1: 2,
+ param2: 32,
+ }
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_oil_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/pencil.js b/paintplus/frontend/src/js/modules/effects/pencil.js
new file mode 100644
index 0000000..9837cea
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/pencil.js
@@ -0,0 +1,73 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_pencil_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ pencil() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, canvas.width, canvas.height);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, width, height) {
+ var offset = Math.min(width, height) / 1000;
+ offset = Math.ceil(offset);
+
+ //create second copy
+ var canvas2 = document.createElement('canvas');
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.width = width;
+ canvas2.height = height;
+ ctx2.drawImage(canvas, -offset, -offset);
+
+ //merge
+ ctx2.globalCompositeOperation = "difference";
+ ctx2.drawImage(canvas, 0, 0);
+ ctx2.globalCompositeOperation = "source-over";
+
+ //apply more effects
+ ctx2.filter = 'brightness(2) invert(1) grayscale(1)';
+ ctx2.drawImage(canvas2, 0, 0);
+ ctx2.filter = 'none';
+
+ return canvas2;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var params = {};
+ var data = this.change(canvas_thumb, canvas_thumb.width, canvas_thumb.height);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_pencil_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/sharpen.js b/paintplus/frontend/src/js/modules/effects/sharpen.js
new file mode 100644
index 0000000..d699e8a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/sharpen.js
@@ -0,0 +1,82 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_sharpen_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ sharpen() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Sharpen',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "param1", title: "Factor:", value: "3", range: [1, 10], step: 0.1},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.change(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data, params) {
+ var param1 = parseFloat(params.param1);
+
+ var filtered = ImageFilters.Sharpen(data, param1);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var params = {
+ param1: 3,
+ }
+ var data = this.change(img, params);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_sharpen_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/solarize.js b/paintplus/frontend/src/js/modules/effects/solarize.js
new file mode 100644
index 0000000..fef96f7
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/solarize.js
@@ -0,0 +1,55 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_solarize_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ solarize() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(data) {
+ var filtered = ImageFilters.Solarize(data);
+
+ return filtered;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var img = ctx.getImageData(0, 0, canvas_thumb.width, canvas_thumb.height);
+ var data = this.change(img);
+ ctx.putImageData(data, 0, 0);
+ }
+
+}
+
+export default Effects_solarize_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/tilt_shift.js b/paintplus/frontend/src/js/modules/effects/tilt_shift.js
new file mode 100644
index 0000000..4fa8826
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/tilt_shift.js
@@ -0,0 +1,144 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import ImageFilters from './../../libs/imagefilters.js';
+import glfx from './../../libs/glfx.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_tiltShift_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ }
+
+ tilt_shift() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Tilt Shift',
+ preview: true,
+ effects: true,
+ params: [
+ //extra
+ {name: "param7", title: "Saturation:", value: "3", range: [0, 20]},
+ {name: "param8", title: "Sharpen:", value: "1", range: [0, 5]},
+ //main
+ {name: "param1", title: "Blur Radius:", value: 10, range: [0, 30]},
+ {name: "param2", title: "Gradient Radius:", value: 70, range: [40, 100]},
+ //startX, startY, endX, endY
+ {name: "param3", title: "X start:", value: 0, range: [0, 100]},
+ {name: "param4", title: "Y start:", value: 50, range: [0, 100]},
+ {name: "param5", title: "X end:", value: 100, range: [0, 100]},
+ {name: "param6", title: "Y end:", value: 50, range: [0, 100]},
+ ],
+ on_change: function (params, canvas_preview, w, h, canvas_) {
+ //recalc param by size
+ _this.change(canvas_, params);
+
+ //convert % to px for line
+ params.param3 = canvas_.width * params.param3 / 100;
+ params.param4 = canvas_.height * params.param4 / 100;
+ params.param5 = canvas_.width * params.param5 / 100;
+ params.param6 = canvas_.height * params.param6 / 100;
+
+ //draw line
+ canvas_preview.beginPath();
+ canvas_preview.strokeStyle = "#ff0000";
+ canvas_preview.lineWidth = 1;
+ canvas_preview.moveTo(params.param3 + 0.5, params.param4 + 0.5);
+ canvas_preview.lineTo(params.param5 + 0.5, params.param6 + 0.5);
+ canvas_preview.stroke();
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ this.change(canvas, params);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, params) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var param1 = parseInt(params.param1);
+ var param2 = parseInt(params.param2);
+ var param3 = parseInt(params.param3);
+ var param4 = parseInt(params.param4);
+ var param5 = parseInt(params.param5);
+ var param6 = parseInt(params.param6);
+ var param7 = parseInt(params.param7);
+ var param8 = parseInt(params.param8);
+
+ //convert % to px
+ param1 = canvas.height * param1 / 100;
+ param2 = canvas.height * param2 / 100;
+ param3 = canvas.width * param3 / 100;
+ param4 = canvas.height * param4 / 100;
+ param5 = canvas.width * param5 / 100;
+ param6 = canvas.height * param6 / 100;
+
+ var ctx = canvas.getContext("2d");
+
+ //main effect
+ var texture = this.fx_filter.texture(canvas);
+ this.fx_filter.draw(texture).tiltShift(param3, param4, param5, param6, param1, param2).update();
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(this.fx_filter, 0, 0);
+
+ //saturation
+ var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = ImageFilters.HSLAdjustment(data, 0, param7, 0);
+ ctx.putImageData(data, 0, 0);
+
+ //sharpen
+ var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = ImageFilters.Sharpen(data, param8);
+ ctx.putImageData(data, 0, 0);
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var params = {
+ param7: 3,
+ param8: 1,
+ param1: 10,
+ param2: 70,
+ param3: 0,
+ param4: 50,
+ param5: 100,
+ param6: 50,
+ }
+ var data = this.change(canvas, params);
+ }
+
+}
+
+export default Effects_tiltShift_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/vibrance.js b/paintplus/frontend/src/js/modules/effects/vibrance.js
new file mode 100644
index 0000000..56c31aa
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/vibrance.js
@@ -0,0 +1,89 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import glfx from './../../libs/glfx.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_vibrance_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ }
+
+ vibrance() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Vibrance',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "level", title: "Level:", value: "0.5", range: [-1, 1], step: 0.01},
+ ],
+ on_change: function (params, canvas_preview, w, h, canvas_) {
+ var data = _this.change(canvas_, params);
+ canvas_preview.clearRect(0, 0, canvas_.width, canvas_.height);
+ canvas_preview.drawImage(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, params);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, params) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var param1 = parseFloat(params.level);
+
+ var texture = this.fx_filter.texture(canvas);
+ this.fx_filter.draw(texture).vibrance(param1).update(); //effect
+
+ return this.fx_filter;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var params = {
+ level: 0.5,
+ };
+ var data = this.change(canvas_thumb, params);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_vibrance_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/vignette.js b/paintplus/frontend/src/js/modules/effects/vignette.js
new file mode 100644
index 0000000..e694ae2
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/vignette.js
@@ -0,0 +1,92 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import glfx from './../../libs/glfx.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_vignette_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ }
+
+ vignette() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Vignette',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "param1", title: "Level:", value: "0.5", range: [0, 1], step: 0.01},
+ {name: "param2", title: "Size:", value: "0.5", range: [0, 1], step: 0.01},
+ ],
+ on_change: function (params, canvas_preview, w, h, canvas_) {
+ var data = _this.change(canvas_, params);
+ canvas_preview.clearRect(0, 0, canvas_.width, canvas_.height);
+ canvas_preview.drawImage(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, params);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, params) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var param1 = parseFloat(params.param1);
+ var param2 = parseFloat(params.param2);
+
+ var texture = this.fx_filter.texture(canvas);
+ this.fx_filter.draw(texture).vignette(param1, param2).update(); //effect
+
+ return this.fx_filter;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var params = {
+ param1: 0.5,
+ param2: 0.5,
+ };
+ var data = this.change(canvas_thumb, params);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_vignette_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/vintage.js b/paintplus/frontend/src/js/modules/effects/vintage.js
new file mode 100644
index 0000000..da8ab2a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/vintage.js
@@ -0,0 +1,77 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Vintage_class from './../../libs/vintage.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_vintage_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Vintage = new Vintage_class(config.WIDTH, config.HEIGHT);
+ }
+
+ vintage() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ this.Vintage.reset_random_values(config.WIDTH, config.HEIGHT);
+
+ var settings = {
+ title: 'Vintage',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "level", title: "Level:", value: 50, range: [0, 100]},
+ ],
+ on_change: function (params, canvas_preview, w, h, canvas_) {
+ _this.change(canvas_, params);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ this.change(canvas, params);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, params) {
+ var level = parseInt(params.level);
+
+ this.Vintage.apply_all(canvas, level);
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+ ctx.drawImage(canvas_thumb, 0, 0);
+
+ //now update
+ var params = {
+ level: 50,
+ };
+ this.change(canvas, params);
+ }
+
+}
+
+export default Effects_vintage_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/effects/zoom_blur.js b/paintplus/frontend/src/js/modules/effects/zoom_blur.js
new file mode 100644
index 0000000..3e1459f
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/effects/zoom_blur.js
@@ -0,0 +1,102 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import glfx from './../../libs/glfx.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Effects_zoomBlur_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ }
+
+ zoom_blur() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get layer size
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+
+ var settings = {
+ title: 'Zoom blur',
+ preview: true,
+ effects: true,
+ params: [
+ {name: "param1", title: "Strength:", value: "0.3", range: [0, 1], step: 0.01},
+ {name: "param2", title: "Center x:", value: Math.round(canvas.width / 2), range: [0, canvas.width]},
+ {name: "param3", title: "Center y:", value: Math.round(canvas.height / 2), range: [0, canvas.height]},
+ ],
+ on_change: function (params, canvas_preview, w, h, canvas_) {
+ //recalc param by size
+ params.param2 = params.param2 / canvas.width * w;
+ params.param3 = params.param3 / canvas.height * h;
+
+ var data = _this.change(canvas_, params);
+ canvas_preview.clearRect(0, 0, canvas_.width, canvas_.height);
+ canvas_preview.drawImage(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var data = this.change(canvas, params);
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ ctx.drawImage(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ change(canvas, params) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var param1 = parseFloat(params.param1);
+ var param2 = parseInt(params.param2);
+ var param3 = parseInt(params.param3);
+
+ var texture = this.fx_filter.texture(canvas);
+ this.fx_filter.draw(texture).zoomBlur(param2, param3, param1).update(); //effect
+
+ return this.fx_filter;
+ }
+
+ demo(canvas_id, canvas_thumb){
+ var canvas = document.getElementById(canvas_id);
+ var ctx = canvas.getContext("2d");
+
+ //modify
+ var params = {
+ param1: 0.3,
+ param2: Math.round(canvas_thumb.width / 2),
+ param3: Math.round(canvas_thumb.height / 2),
+ };
+ var data = this.change(canvas_thumb, params);
+
+ //draw
+ ctx.drawImage(data, 0, 0);
+ }
+
+}
+
+export default Effects_zoomBlur_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/file/my_library.js b/paintplus/frontend/src/js/modules/file/my_library.js
new file mode 100644
index 0000000..40d9574
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/file/my_library.js
@@ -0,0 +1,504 @@
+/**
+ * My Library - Save and reuse your own assets (clip art, templates, etc.)
+ * Assets are stored in browser's IndexedDB for persistence
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+// IndexedDB setup
+const DB_NAME = 'miniPaintLibrary';
+const DB_VERSION = 1;
+const STORE_NAME = 'assets';
+
+class File_my_library_class {
+
+ constructor() {
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.db = null;
+
+ this.initDB();
+ }
+
+ /**
+ * Initialize IndexedDB
+ */
+ initDB() {
+ var _this = this;
+
+ var request = indexedDB.open(DB_NAME, DB_VERSION);
+
+ request.onerror = function(event) {
+ console.error('IndexedDB error:', event);
+ };
+
+ request.onsuccess = function(event) {
+ _this.db = event.target.result;
+ };
+
+ request.onupgradeneeded = function(event) {
+ var db = event.target.result;
+
+ if (!db.objectStoreNames.contains(STORE_NAME)) {
+ var store = db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
+ store.createIndex('name', 'name', { unique: false });
+ store.createIndex('category', 'category', { unique: false });
+ store.createIndex('created', 'created', { unique: false });
+ }
+ };
+ }
+
+ /**
+ * Save current layer as a library asset
+ */
+ save_to_library() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer to save');
+ return;
+ }
+
+ var settings = {
+ title: 'Save to My Library',
+ params: [
+ {
+ name: "name",
+ title: "Asset Name:",
+ value: config.layer.name || "My Asset"
+ },
+ {
+ name: "category",
+ title: "Category:",
+ value: "General",
+ values: ["General", "Shapes", "Borders", "Icons", "Templates", "Text Elements", "Backgrounds", "Other"]
+ },
+ {
+ name: "description",
+ title: "Description:",
+ value: ""
+ }
+ ],
+ on_finish: function (params) {
+ _this.do_save_to_library(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ /**
+ * Save current selection to library (uses mask if available)
+ */
+ save_selection_to_library() {
+ var _this = this;
+
+ if (!window.smartSelectMask || !window.smartSelectMask.canvas) {
+ alertify.error('No selection. Use a selection tool first.');
+ return;
+ }
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer');
+ return;
+ }
+
+ var settings = {
+ title: 'Save Selection to Library',
+ params: [
+ {
+ name: "name",
+ title: "Asset Name:",
+ value: "Selection Asset"
+ },
+ {
+ name: "category",
+ title: "Category:",
+ value: "General",
+ values: ["General", "Shapes", "Borders", "Icons", "Templates", "Text Elements", "Backgrounds", "Other"]
+ },
+ {
+ name: "description",
+ title: "Description:",
+ value: ""
+ }
+ ],
+ on_finish: function (params) {
+ _this.do_save_selection_to_library(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ do_save_to_library(params) {
+ var _this = this;
+
+ // Get canvas from current layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(config.layer.id, true, false);
+
+ // Create thumbnail (max 150px)
+ var thumbCanvas = document.createElement('canvas');
+ var maxSize = 150;
+ var scale = Math.min(maxSize / canvas.width, maxSize / canvas.height);
+ thumbCanvas.width = Math.round(canvas.width * scale);
+ thumbCanvas.height = Math.round(canvas.height * scale);
+ var thumbCtx = thumbCanvas.getContext('2d');
+ thumbCtx.drawImage(canvas, 0, 0, thumbCanvas.width, thumbCanvas.height);
+
+ var asset = {
+ name: params.name,
+ category: params.category,
+ description: params.description,
+ width: canvas.width,
+ height: canvas.height,
+ data: canvas.toDataURL('image/png'),
+ thumbnail: thumbCanvas.toDataURL('image/png'),
+ created: new Date().toISOString()
+ };
+
+ this.saveAsset(asset, function() {
+ alertify.success('Saved "' + params.name + '" to library!');
+ });
+ }
+
+ do_save_selection_to_library(params) {
+ var _this = this;
+ var layer = config.layer;
+ var maskCanvas = window.smartSelectMask.canvas;
+
+ // Create canvas with just the selected pixels
+ var canvas = document.createElement('canvas');
+ canvas.width = layer.width_original;
+ canvas.height = layer.height_original;
+ var ctx = canvas.getContext('2d');
+
+ ctx.drawImage(layer.link, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(maskCanvas, 0, 0);
+
+ // Find bounds of selection
+ var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = imageData.data;
+ var minX = canvas.width, minY = canvas.height, maxX = 0, maxY = 0;
+
+ for (var y = 0; y < canvas.height; y++) {
+ for (var x = 0; x < canvas.width; x++) {
+ var i = (y * canvas.width + x) * 4;
+ if (data[i + 3] > 0) {
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ // Crop to selection bounds
+ var cropWidth = maxX - minX + 1;
+ var cropHeight = maxY - minY + 1;
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+ croppedCtx.drawImage(canvas, minX, minY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
+
+ // Create thumbnail
+ var thumbCanvas = document.createElement('canvas');
+ var maxSize = 150;
+ var scale = Math.min(maxSize / cropWidth, maxSize / cropHeight);
+ thumbCanvas.width = Math.round(cropWidth * scale);
+ thumbCanvas.height = Math.round(cropHeight * scale);
+ var thumbCtx = thumbCanvas.getContext('2d');
+ thumbCtx.drawImage(croppedCanvas, 0, 0, thumbCanvas.width, thumbCanvas.height);
+
+ var asset = {
+ name: params.name,
+ category: params.category,
+ description: params.description,
+ width: cropWidth,
+ height: cropHeight,
+ data: croppedCanvas.toDataURL('image/png'),
+ thumbnail: thumbCanvas.toDataURL('image/png'),
+ created: new Date().toISOString()
+ };
+
+ this.saveAsset(asset, function() {
+ alertify.success('Saved selection "' + params.name + '" to library!');
+ });
+ }
+
+ saveAsset(asset, callback) {
+ if (!this.db) {
+ alertify.error('Database not ready, please try again');
+ return;
+ }
+
+ var transaction = this.db.transaction([STORE_NAME], 'readwrite');
+ var store = transaction.objectStore(STORE_NAME);
+ var request = store.add(asset);
+
+ request.onsuccess = function() {
+ if (callback) callback();
+ };
+
+ request.onerror = function(event) {
+ alertify.error('Error saving asset');
+ console.error('Save error:', event);
+ };
+ }
+
+ /**
+ * Browse and insert assets from library
+ */
+ browse_library() {
+ var _this = this;
+
+ this.getAllAssets(function(assets) {
+ _this.showLibraryBrowser(assets);
+ });
+ }
+
+ getAllAssets(callback) {
+ if (!this.db) {
+ alertify.error('Database not ready');
+ callback([]);
+ return;
+ }
+
+ var transaction = this.db.transaction([STORE_NAME], 'readonly');
+ var store = transaction.objectStore(STORE_NAME);
+ var request = store.getAll();
+
+ request.onsuccess = function(event) {
+ callback(event.target.result || []);
+ };
+
+ request.onerror = function() {
+ callback([]);
+ };
+ }
+
+ showLibraryBrowser(assets) {
+ var _this = this;
+
+ if (assets.length === 0) {
+ alertify.warning('Your library is empty. Save some assets first!');
+ return;
+ }
+
+ // Group by category
+ var categories = {};
+ assets.forEach(function(asset) {
+ var cat = asset.category || 'General';
+ if (!categories[cat]) categories[cat] = [];
+ categories[cat].push(asset);
+ });
+
+ // Build HTML for the browser
+ var html = '';
+ html += '
';
+
+ for (var cat in categories) {
+ html += '
';
+ html += '
' + cat + ' ';
+ html += '
';
+
+ categories[cat].forEach(function(asset) {
+ html += '
';
+ html += '
';
+ html += '
' + asset.name + '
';
+ html += '
';
+ html += 'Insert ';
+ html += 'Delete ';
+ html += '
';
+ html += '
';
+ });
+
+ html += '
';
+ }
+
+ html += '
'},
+ ],
+ on_load: function(params){
+ document.getElementById('webcam_container').appendChild(video);
+ },
+ on_finish: function(params){
+ //capture data
+ var width = video.videoWidth;
+ var height = video.videoHeight;
+
+ var tmpCanvas = document.createElement('canvas');
+ var tmpCanvasCtx = tmpCanvas.getContext("2d");
+ tmpCanvas.width = width;
+ tmpCanvas.height = height;
+ tmpCanvasCtx.drawImage(video, 0, 0);
+
+ //create requested layer
+ var new_layer = {
+ name: "Webcam #" + _this.Base_layers.auto_increment,
+ type: 'image',
+ data: tmpCanvas.toDataURL("image/png"),
+ width: width,
+ height: height,
+ width_original: width,
+ height_original: height,
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('open_file_webcam', 'Open File Webcam', [
+ new app.Actions.Insert_layer_action(new_layer),
+ new app.Actions.Autoresize_canvas_action(width, height, null, true, true)
+ ])
+ );
+
+ //destroy
+ if(track != null){
+ track.stop();
+ }
+ video.pause();
+ video.src = "";
+ video.load();
+ },
+ on_cancel: function(params){
+ if(track != null){
+ track.stop();
+ }
+ video.pause();
+ video.src = "";
+ video.load();
+ },
+ };
+ this.POP.show(settings);
+
+ navigator.mediaDevices.getUserMedia({audio: false, video: true})
+ .then(handleSuccess)
+ .catch(handleError);
+ }
+
+ open_dir() {
+ var _this = this;
+
+ document.getElementById("tmp").innerHTML = '';
+ var a = document.createElement('input');
+ a.setAttribute("id", "file_open_dir");
+ a.type = 'file';
+ a.webkitdirectory = 'webkitdirectory';
+ document.getElementById("tmp").appendChild(a);
+ document.getElementById('file_open_dir').addEventListener('change', function (e) {
+ _this.open_handler(e);
+ }, false);
+
+ //force click
+ document.querySelector('#file_open_dir').click();
+ }
+
+ /**
+ * opens data URLs, like: "data:image/png;base64,xxxxxx"
+ *
+ * data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAG0lEQVQYV2N89+7df0FBQQbG/////3///j0DAF9wCsg9spQfAAAAAElFTkSuQmCC
+ */
+ open_data_url() {
+ var _this = this;
+
+ var settings = {
+ title: 'Open data URL',
+ params: [
+ {name: "data", title: "Data URL:", type: "textarea", value: ""},
+ ],
+ on_finish: function (params) {
+ _this.file_open_data_url_handler(params.data);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ file_open_data_url_handler(data) {
+ var _this = this;
+ if (data == '')
+ return;
+
+ var img = new Image();
+ img.crossOrigin = "Anonymous";
+ img.onload = function () {
+ var new_layer = {
+ name: "Data URL",
+ type: 'image',
+ link: img,
+ width: img.width,
+ height: img.height,
+ width_original: img.width,
+ height_original: img.height,
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('open_file_data_url', 'Open File Data URL', [
+ new app.Actions.Insert_layer_action(new_layer),
+ new app.Actions.Autoresize_canvas_action(img.width, img.height, null, true, true)
+ ])
+ );
+ img.onload = function () {
+ config.need_render = true;
+ };
+ };
+ img.onerror = function (ex) {
+ alertify.error('Sorry, image could not be loaded. Try copy image and paste it.');
+ };
+ img.src = data;
+ }
+
+ open_url() {
+ var _this = this;
+
+ var settings = {
+ title: 'Open URL',
+ params: [
+ {name: "url", title: "URL:", value: ""},
+ ],
+ on_finish: function (params) {
+ _this.file_open_url_handler(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ async open_handler(e) {
+ var _this = this;
+ var files = e.target.files;
+
+ var auto_increment = this.Base_layers.auto_increment;
+
+ if (files == undefined) {
+ //drag and drop
+ files = e.dataTransfer.files;
+ }
+
+ //sort
+ var orders = [];
+ for (var i = 0, f; i < files.length; i++) {
+ orders.push(files[i].name);
+ }
+ orders.sort();
+ var order_map = [];
+ for (var i in orders) {
+ order_map[orders[i]] = parseInt(i);
+ }
+
+ //check if dropped directory
+ var dir_opened = false;
+ if (e.dataTransfer && e.dataTransfer.items) {
+ var items = e.dataTransfer.items;
+ for (var i=0; i setTimeout(r, 10));
+ }
+
+ //try to open dropped directory
+ if (e.dataTransfer && e.dataTransfer.items) {
+ var items = e.dataTransfer.items;
+ for (var i=0; i setTimeout(r, 10));
+
+ });
+ }
+ else if (item.isDirectory) {
+ // Get folder contents
+ var dirReader = item.createReader();
+ dirReader.readEntries(function(entries) {
+ for (var i=0; i max_id_order)
+ max_id_order = value.id;
+ if(typeof value.order != undefined && value.order > max_id_order)
+ max_id_order = value.order;
+
+ if (value.type == 'image') {
+ //add image data
+ value.link = null;
+ for (var j in json.data) {
+ if (json.data[j].id == value.id) {
+ value.data = json.data[j].data;
+ }
+ }
+ }
+ actions.push(
+ new app.Actions.Insert_layer_action(value, false)
+ );
+ }
+ if (json.info.layer_active != undefined) {
+ actions.push(
+ new app.Actions.Select_layer_action(json.info.layer_active, true)
+ );
+ }
+ if (json.info.guides != undefined) {
+ config.guides = json.info.guides;
+ }
+ actions.push(
+ new app.Actions.Set_object_property_action(this.Base_layers, 'auto_increment', max_id_order + 1),
+ new app.Actions.Update_config_action({
+ WIDTH: parseInt(json.info.width),
+ HEIGHT: parseInt(json.info.height),
+ }),
+ new app.Actions.Prepare_canvas_action('do')
+ );
+ await app.State.do_action(
+ new app.Actions.Bundle_action('open_json_file', 'Open JSON File', actions)
+ );
+ }
+
+ /**
+ * Returns an action that saves the exif data of the provided object to the current layer
+ */
+ extract_exif(object) {
+ var exif_data = {
+ general: [],
+ exif: [],
+ };
+
+ //exif data
+ EXIF.getData(object, function () {
+ exif_data.exif = this.exifdata;
+ delete this.exifdata.thumbnail;
+ });
+
+ //general
+ if (object.name != undefined)
+ exif_data.general.Name = object.name;
+ if (object.size != undefined)
+ exif_data.general.Size = this.Helper.number_format(object.size / 1000, 2) + ' KB';
+ if (object.type != undefined)
+ exif_data.general.Type = object.type;
+ if (object.lastModified != undefined)
+ exif_data.general['Last modified'] = this.Helper.format_time(object.lastModified);
+
+ return exif_data;
+ }
+
+ search(){
+ this.GUI_tools.activate_tool('media');
+ }
+}
+
+export default File_open_class;
+
diff --git a/paintplus/frontend/src/js/modules/file/print.js b/paintplus/frontend/src/js/modules/file/print.js
new file mode 100644
index 0000000..dbfc77f
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/file/print.js
@@ -0,0 +1,14 @@
+/**
+ * manages files / print
+ *
+ * @author ViliusL
+ */
+class File_print_class {
+
+ print() {
+ window.print();
+ }
+
+}
+
+export default File_print_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/file/quickload.js b/paintplus/frontend/src/js/modules/file/quickload.js
new file mode 100644
index 0000000..c78fae8
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/file/quickload.js
@@ -0,0 +1,46 @@
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import File_open_class from './open.js';
+
+/**
+ * manages files / quick-load
+ *
+ * @author ViliusL
+ */
+class File_quickload_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ this.File_open = new File_open_class();
+
+ this.set_events();
+ }
+
+ set_events() {
+ var _this = this;
+
+ document.addEventListener('keydown', function (event) {
+ var code = event.keyCode;
+
+ if (code == 121) {
+ //F10
+ _this.quickload();
+ event.preventDefault();
+ }
+ }, false);
+ }
+
+ quickload() {
+ //load image data
+ var json = localStorage.getItem('quicksave_data');
+ if (json == '' || json == null) {
+ //nothing was found
+ return false;
+ }
+
+ this.File_open.load_json(json);
+ }
+
+}
+
+export default File_quickload_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/file/quicksave.js b/paintplus/frontend/src/js/modules/file/quicksave.js
new file mode 100644
index 0000000..729c014
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/file/quicksave.js
@@ -0,0 +1,45 @@
+import config from './../../config.js';
+import File_save_class from './save.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+/**
+ * manages files / quick-save
+ *
+ * @author ViliusL
+ */
+class File_quicksave_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.File_save = new File_save_class();
+
+ this.set_events();
+ }
+
+ set_events() {
+ var _this = this;
+
+ document.addEventListener('keydown', function (event) {
+ var code = event.keyCode;
+
+ if (code == 120) {
+ //F9
+ _this.quicksave();
+ }
+ }, false);
+ }
+
+ quicksave() {
+ //save image data
+ var data_json = this.File_save.export_as_json();
+ if (data_json.length > 5000000) {
+ alertify.error('Sorry, image is too big, max 5 MB.');
+ return false;
+ }
+ localStorage.setItem('quicksave_data', data_json);
+ }
+
+}
+
+export default File_quicksave_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/file/save.js b/paintplus/frontend/src/js/modules/file/save.js
new file mode 100644
index 0000000..241dfe5
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/file/save.js
@@ -0,0 +1,827 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Helper_class from './../../libs/helpers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import canvasToBlob from './../../../../node_modules/blueimp-canvas-to-blob/js/canvas-to-blob.min.js';
+import filesaver from './../../../../node_modules/file-saver/dist/FileSaver.min.js';
+import GIF from './../../../../node_modules/gif.js.optimized/';
+import CanvasToTIFF from './../../libs/canvastotiff.js';
+import TiffWriter from './../../libs/tiff-writer.js';
+import PdfWriter from './../../libs/pdf-writer.js';
+import Tools_settings_class from "../tools/settings";
+
+var instance = null;
+
+/**
+ * manages files / save
+ *
+ * @author ViliusL
+ */
+class File_save_class {
+
+ constructor() {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.POP = new Dialog_class();
+ this.Tools_settings = new Tools_settings_class();
+
+ this.set_events();
+
+ //save types config
+ this.SAVE_TYPES = {
+ PNG: "Portable Network Graphics",
+ JPG: "JPG/JPEG Format",
+ //AVIF: "AV1 Image File Format", //just uncomment it in future to make it work
+ JSON: "Full layers data",
+ WEBP: "Weppy File Format",
+ GIF: "Graphics Interchange Format",
+ BMP: "Windows Bitmap",
+ TIFF: "TIFF (RGBA)",
+ TIFF_CMYK: "TIFF (CMYK, print)",
+ TIFF_LAYERS: "TIFF (Multilayer)",
+ PDF: "PDF Document (RGB)",
+ PDF_CMYK: "PDF Document (CMYK, print)",
+ };
+
+ this.default_extension = 'PNG';
+ }
+
+ set_events() {
+ document.addEventListener('keydown', (event) => {
+ var code = event.key.toLowerCase();
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == "s") {
+ if(event.shiftKey){
+ //export
+ this.save();
+ }
+ else{
+ //save
+ this.export();
+ }
+ event.preventDefault();
+ }
+ }, false);
+ }
+
+ /**
+ * saves as non destructive mode (including layers, RAW)
+ */
+ save(){
+ var types = JSON.parse(JSON.stringify(this.SAVE_TYPES));
+ for(var i in types){
+ if(i != 'JSON'){
+ delete types[i];
+ }
+ }
+
+ this.save_general(types, 'Save as');
+
+ }
+
+ /**
+ * save as encoded image
+ */
+ export(){
+ var types = JSON.parse(JSON.stringify(this.SAVE_TYPES));
+ delete types.JSON;
+
+ this.save_general(types, 'Export');
+ }
+
+ save_general(file_types, title) {
+ var _this = this;
+
+ //find default format
+ var save_default = null;
+ var save_default_cookie = this.Helper.getCookie('save_default');
+
+ for(var i in file_types) {
+ if(save_default_cookie == i){
+ save_default = i;
+ break;
+ }
+ }
+ if(save_default == null){
+ save_default = Object.keys(file_types)[0];
+ }
+ save_default = save_default + " - " + file_types[save_default];
+
+ var calc_size_value = false;
+ var calc_size = false;
+ if (config.WIDTH * config.HEIGHT < 1000000) {
+ calc_size_value = true;
+ calc_size = true;
+ }
+
+ var file_name = config.layers[0].name;
+ var parts = file_name.split('.');
+ if (parts.length > 1)
+ file_name = parts[parts.length - 2];
+ file_name = file_name.replace(/ /g, "-");
+ file_name = this.Helper.escapeHtml(file_name);
+
+ var save_types = [];
+ for(var i in file_types) {
+ save_types.push(i + " - " + file_types[i]);
+ }
+
+ var save_layers_types = [
+ 'All',
+ 'Selected',
+ 'Separated',
+ 'Separated (original types)',
+ ];
+ var resolution = this.Tools_settings.get_setting('resolution');
+
+ var settings = {
+ title: title,
+ params: [
+ {name: "name", title: "File name:", value: file_name},
+ {name: "type", title: "Save as type:", values: save_types, value: save_default},
+ {name: "quality", title: "Quality:", value: 90, range: [1, 100]},
+ {title: "File size:", html: '- '},
+ {title: "Resolution:", value: resolution},
+ {name: "calc_size", title: "Show file size:", value: calc_size_value},
+ {name: "layers", title: "Save layers:", values: save_layers_types},
+ {name: "delay", title: "Gif delay:", value: 400},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ _this.save_dialog_onchange(true);
+ },
+ on_finish: function (params) {
+ // These types handle their own layering internally — skip the separated loop.
+ var _type = params.type ? params.type.split(' ')[0] : '';
+ var _multilayerType = _type === 'TIFF_LAYERS' || _type === 'TIFF_CMYK'
+ || _type === 'PDF' || _type === 'PDF_CMYK';
+
+ if (!_multilayerType && (params.layers == 'Separated' || params.layers == 'Separated (original types)')) {
+ var active_layer = config.layer.id;
+ var original_layer_type = params.layers;
+
+ //alter params
+ params.layers = 'Selected';
+
+ for (var i in config.layers) {
+ if (config.layers[i].visible == false)
+ continue;
+
+ //detect type
+ if (original_layer_type == 'Separated (original types)') {
+ //detect type from file name
+ params.type = _this.SAVE_TYPES[_this.default_extension];
+ for (var j in _this.SAVE_TYPES) {
+ if (_this.Helper.strpos(config.layers[i].name.toLowerCase(), '.' + j.toLowerCase()) !== false) {
+ params.type = j;
+ break;
+ }
+ }
+ }
+
+ new app.Actions.Select_layer_action(config.layers[i].id, true).do();
+ _this.save_action(params, true);
+ }
+ new app.Actions.Select_layer_action(active_layer, true).do();
+ }
+ else {
+ _this.save_action(params);
+ }
+ },
+ };
+ this.POP.show(settings);
+
+ document.getElementById("pop_data_name").select();
+
+ if (calc_size == true) {
+ //calc size once
+ this.save_dialog_onchange(true);
+ }
+ else{
+ this.save_dialog_onchange(false);
+ }
+ }
+
+ save_data_url() {
+ var max = 10 * 1000 * 1000;
+ if (config.WIDTH * config.WIDTH > 10 * 1000 * 1000) {
+ alertify.error('Size is too big, max ' + this.Helper.number_format(max, 0) + ' pixels.');
+ return;
+ }
+
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+
+ this.disable_canvas_smooth(ctx);
+
+ //ask data
+ this.Base_layers.convert_layers_to_canvas(ctx, null, false);
+ var data_url = canvas.toDataURL();
+
+ max = 1000 * 1000;
+ if (data_url.length > max) {
+ alertify.error('Size is too big, max ' + this.Helper.number_format(max, 0) + ' bytes.');
+ return;
+ }
+
+ var settings = {
+ title: 'Data URL',
+ params: [
+ {name: "url", title: "URL:", type: "textarea", value: data_url},
+ ],
+ };
+ this.POP.show(settings);
+ }
+
+ update_file_size(file_size) {
+ if (typeof file_size == 'string') {
+ document.getElementById('file_size').innerHTML = file_size;
+ return;
+ }
+
+ if (file_size > 1024 * 1024)
+ file_size = this.Helper.number_format(file_size / 1024 / 1024, 2) + ' MB';
+ else if (file_size > 1024)
+ file_size = this.Helper.number_format(file_size / 1024, 2) + ' KB';
+ else
+ file_size = (file_size) + ' B';
+ document.getElementById('file_size').innerHTML = file_size;
+ }
+
+ /**
+ * /activated on save dialog parameters change - used for calculating file size
+ *
+ * @param {boolean} calculate_file_size
+ */
+ save_dialog_onchange(calculate_file_size) {
+ var _this = this;
+ var user_response = this.POP.get_params();
+
+ var quality = parseInt(user_response.quality);
+ if (quality > 100 || quality < 1 || isNaN(quality) == true)
+ quality = 90;
+ quality = quality / 100;
+
+ //detect type
+ var type = user_response.type;
+ var parts = type.split(" ");
+ type = parts[0];
+
+ if (type == 'JPG' || type == 'WEBP')
+ document.getElementById('popup-tr-quality').style.display = '';
+ else
+ document.getElementById('popup-tr-quality').style.display = 'none';
+
+ if (type == 'GIF')
+ document.getElementById('popup-tr-delay').style.display = '';
+ else
+ document.getElementById('popup-tr-delay').style.display = 'none';
+
+ if (type == 'JSON' || type == 'GIF' || type == 'TIFF_LAYERS' || type == 'TIFF_CMYK' || type == 'PDF_CMYK')
+ document.getElementById('popup-tr-layers').style.display = 'none';
+ else
+ document.getElementById('popup-tr-layers').style.display = '';
+
+ if (user_response.layers == 'Separated')
+ document.getElementById('pop_data_name').disabled = true;
+ else
+ document.getElementById('pop_data_name').disabled = false;
+
+ if (user_response.layers == 'Separated (original types)') {
+ if(document.getElementById('popup-group-type')) {
+ document.getElementById('popup-group-type').style.opacity = "0.5";
+ }
+ document.getElementById('popup-tr-quality').style.display = '';
+ }
+ else {
+ if(document.getElementById('popup-group-type')) {
+ document.getElementById('popup-group-type').style.opacity = "1";
+ }
+ }
+
+ if(calculate_file_size == false){
+ return;
+ }
+
+ this.update_file_size('...');
+
+ if (user_response.calc_size == false || user_response.layers == 'Separated'
+ || user_response.layers == 'Separated (original types)') {
+
+ document.getElementById('file_size').innerHTML = '-';
+ return;
+ }
+
+ if (type != 'JSON') {
+ //create temp canvas
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ this.disable_canvas_smooth(ctx);
+
+ //ask data
+ if (user_response.layers == 'Selected' && type != 'GIF' && config.layer.type != null) {
+ //only current layer !!!
+ var layer = config.layer;
+
+ var initial_x = null;
+ var initial_y = null;
+ if (layer.x != null && layer.y != null && layer.width != null && layer.height != null) {
+ //change position to top left corner
+ initial_x = layer.x;
+ initial_y = layer.y;
+ layer.x = 0;
+ layer.y = 0;
+
+ canvas.width = layer.width;
+ canvas.height = layer.height;
+ }
+
+ this.Base_layers.convert_layers_to_canvas(ctx, layer.id, false);
+
+ if (initial_x != null) {
+ //restore position
+ layer.x = initial_x;
+ layer.y = initial_y;
+ }
+ }
+ else {
+ this.Base_layers.convert_layers_to_canvas(ctx, null, false);
+ }
+ }
+
+ if (type != 'JSON' && (type == 'JPG' || config.TRANSPARENCY == false)) {
+ //add white background
+ ctx.globalCompositeOperation = 'destination-over';
+ this.fillCanvasBackground(ctx, '#ffffff');
+ ctx.globalCompositeOperation = 'source-over';
+ }
+
+ //calc size
+ if (type == 'PNG') {
+ //png
+ canvas.toBlob(function (blob) {
+ _this.update_file_size(blob.size);
+ });
+ }
+ else if (type == 'JPG') {
+ //jpg
+ canvas.toBlob(function (blob) {
+ _this.update_file_size(blob.size);
+ }, "image/jpeg", quality);
+ }
+ else if (type == 'WEBP') {
+ //WEBP
+ var data_header = "image/webp";
+
+ //check support
+ if (this.check_format_support(canvas, data_header, false) == false) {
+ this.update_file_size('-');
+ return;
+ }
+
+ canvas.toBlob(function (blob) {
+ _this.update_file_size(blob.size);
+ }, data_header, quality);
+ }
+ else if (type == 'AVIF') {
+ //AVIF
+ var data_header = "image/avif";
+
+ //check support
+ if (this.check_format_support(canvas, data_header, false) == false) {
+ this.update_file_size('-');
+ return;
+ }
+
+ canvas.toBlob(function (blob) {
+ _this.update_file_size(blob.size);
+ }, data_header, quality);
+ }
+ else if (type == 'BMP') {
+ //bmp
+ var data_header = "image/bmp";
+
+ //check support
+ if (this.check_format_support(canvas, data_header, false) == false) {
+ this.update_file_size('-');
+ return;
+ }
+
+ canvas.toBlob(function (blob) {
+ _this.update_file_size(blob.size);
+ }, data_header);
+ }
+ else if (type == 'TIFF') {
+ CanvasToTIFF.toBlob(canvas, function(blob) {
+ _this.update_file_size(blob.size);
+ }, {});
+ }
+ else if (type == 'TIFF_CMYK' || type == 'TIFF_LAYERS') {
+ // size estimate: W*H*4 bytes of pixel data + small overhead
+ _this.update_file_size(config.WIDTH * config.HEIGHT * 4 + 512);
+ }
+ else if (type == 'PDF' || type == 'PDF_CMYK') {
+ _this.update_file_size('-');
+ }
+ else if (type == 'JSON') {
+ //json
+ var data_json = this.export_as_json();
+
+ var blob = new Blob([data_json], {type: "text/plain"});
+ this.update_file_size(blob.size);
+ }
+ else if (type == 'GIF') {
+ //gif
+ this.update_file_size('-');
+ }
+ }
+
+ /**
+ * saves data in requested way
+ *
+ * @param {object} user_response parameters
+ * @param {boolean} autoname if use name from layer, false by default
+ */
+ save_action(user_response, autoname) {
+ var fname = user_response.name;
+ if(autoname === true && user_response.layers == 'Selected'){
+ fname = config.layer.name;
+ }
+
+ var quality = parseInt(user_response.quality);
+ if (quality > 100 || quality < 1 || isNaN(quality) == true)
+ quality = 90;
+ quality = quality / 100;
+
+ var delay = parseInt(user_response.delay);
+ if (delay < 0 || isNaN(delay) == true)
+ delay = 400;
+
+ //detect type
+ var type = user_response.type;
+ var parts = type.split(" ");
+ type = parts[0];
+
+ //detect type from file name
+ for(var i in this.SAVE_TYPES) {
+ if (this.Helper.strpos(fname, '.' + i.toLowerCase()) !== false) {
+ type = i;
+ }
+ }
+
+ //save default type as cookie
+ if(this.Helper.getCookie('save_default') == '' || this.Helper.getCookie('save_default') != type){
+ this.Helper.setCookie('save_default', type);
+ }
+
+ if (type != 'JSON') {
+ //temp canvas
+ var canvas;
+ var ctx;
+
+ //get data
+ if (user_response.layers == 'Selected' && type != 'GIF') {
+ canvas = this.Base_layers.convert_layer_to_canvas();
+ ctx = canvas.getContext("2d");
+ }
+ else {
+ canvas = document.createElement('canvas');
+ ctx = canvas.getContext("2d");
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ this.disable_canvas_smooth(ctx);
+
+ this.Base_layers.convert_layers_to_canvas(ctx, null, false);
+ }
+ }
+
+ // CMYK and JPG need an opaque white background (no alpha channel in output)
+ if (type != 'JSON' && (type == 'JPG' || type == 'TIFF_CMYK' || config.TRANSPARENCY == false)) {
+ ctx.globalCompositeOperation = 'destination-over';
+ this.fillCanvasBackground(ctx, '#ffffff');
+ ctx.globalCompositeOperation = 'source-over';
+ }
+
+ if (type == 'PNG') {
+ //png - default format
+ if (this.Helper.strpos(fname, '.png') == false)
+ fname = fname + ".png";
+
+ //simple save example
+ //var link = document.createElement('a');
+ //link.download = fname;
+ //link.href = canvas.toDataURL();
+ //link.click();
+
+ //save using lib
+ canvas.toBlob(function (blob) {
+ filesaver.saveAs(blob, fname);
+ });
+ }
+ else if (type == 'JPG') {
+ //jpg
+ if (this.Helper.strpos(fname, '.jpg') == false)
+ fname = fname + ".jpg";
+
+ canvas.toBlob(function (blob) {
+ filesaver.saveAs(blob, fname);
+ }, "image/jpeg", quality);
+ }
+ else if (type == 'WEBP') {
+ //WEBP
+ if (this.Helper.strpos(fname, '.webp') == false)
+ fname = fname + ".webp";
+ var data_header = "image/webp";
+
+ //check support
+ if (this.check_format_support(canvas, data_header) == false)
+ return false;
+
+ canvas.toBlob(function (blob) {
+ filesaver.saveAs(blob, fname);
+ }, data_header, quality);
+ }
+ else if (type == 'AVIF') {
+ //AVIF
+ if (this.Helper.strpos(fname, '.avif') == false)
+ fname = fname + ".avif";
+ var data_header = "image/avif";
+
+ //check support
+ if (this.check_format_support(canvas, data_header) == false)
+ return false;
+
+ canvas.toBlob(function (blob) {
+ filesaver.saveAs(blob, fname);
+ }, data_header, quality);
+ }
+ else if (type == 'BMP') {
+ //bmp
+ if (this.Helper.strpos(fname, '.bmp') == false)
+ fname = fname + ".bmp";
+ var data_header = "image/bmp";
+
+ //check support
+ if (this.check_format_support(canvas, data_header) == false)
+ return false;
+
+ canvas.toBlob(function (blob) {
+ filesaver.saveAs(blob, fname);
+ }, data_header);
+ }
+ else if (type == 'TIFF') {
+ //tiff - single page RGBA (existing behaviour)
+ if (this.Helper.strpos(fname, '.tiff') == false)
+ fname = fname + ".tiff";
+
+ CanvasToTIFF.toBlob(canvas, function(blob) {
+ filesaver.saveAs(blob, fname);
+ }, {});
+ }
+ else if (type == 'TIFF_CMYK') {
+ //tiff - single page CMYK, print-ready
+ if (this.Helper.strpos(fname, '.tiff') == false)
+ fname = fname + ".tiff";
+ var resolution = this.Tools_settings.get_setting('resolution') || 300;
+
+ TiffWriter.toCMYK(canvas, function(buf) {
+ filesaver.saveAs(new Blob([buf], {type: 'image/tiff'}), fname);
+ }, {dpi: resolution});
+ }
+ else if (type == 'TIFF_LAYERS') {
+ //tiff - multipage: one IFD per visible layer
+ if (this.Helper.strpos(fname, '.tiff') == false)
+ fname = fname + ".tiff";
+ var resolution = this.Tools_settings.get_setting('resolution') || 300;
+ var layerCanvases = this._collect_layer_canvases();
+
+ TiffWriter.toMultipageRGBA(layerCanvases, function(buf) {
+ filesaver.saveAs(new Blob([buf], {type: 'image/tiff'}), fname);
+ }, {dpi: resolution});
+ }
+ else if (type == 'PDF') {
+ //pdf - RGB, one page per visible layer
+ if (this.Helper.strpos(fname, '.pdf') == false)
+ fname = fname + ".pdf";
+ var resolution = this.Tools_settings.get_setting('resolution') || 300;
+ var quality_val = quality;
+
+ var pdfCanvases;
+ if (user_response.layers == 'Selected') {
+ pdfCanvases = [canvas];
+ } else {
+ pdfCanvases = this._collect_layer_canvases();
+ }
+
+ PdfWriter.fromCanvases(pdfCanvases, {colorMode: 'rgb', quality: quality_val, dpi: resolution})
+ .then(function(blob) { filesaver.saveAs(blob, fname); });
+ }
+ else if (type == 'PDF_CMYK') {
+ //pdf - CMYK, one page per visible layer, print-ready
+ if (this.Helper.strpos(fname, '.pdf') == false)
+ fname = fname + ".pdf";
+ var resolution = this.Tools_settings.get_setting('resolution') || 300;
+ var layerCanvases = this._collect_layer_canvases();
+
+ PdfWriter.fromCanvases(layerCanvases, {colorMode: 'cmyk', dpi: resolution})
+ .then(function(blob) { filesaver.saveAs(blob, fname); });
+ }
+ else if (type == 'JSON') {
+ //json - full data with layers
+ if (this.Helper.strpos(fname, '.json') == false)
+ fname = fname + ".json";
+
+ var data_json = this.export_as_json();
+
+ var blob = new Blob([data_json], {type: "text/plain"});
+ //var data = window.URL.createObjectURL(blob); //html5
+ filesaver.saveAs(blob, fname);
+ }
+ else if (type == 'GIF') {
+ //gif
+ var cores = navigator.hardwareConcurrency || 4;
+ var gif_settings = {
+ workers: cores,
+ quality: 10, //1-30, lower is better
+ repeat: 0,
+ width: config.WIDTH,
+ height: config.HEIGHT,
+ dither: 'FloydSteinberg-serpentine',
+ workerScript: './src/js/libs/gifjs/gif.worker.js',
+ };
+ if (config.TRANSPARENCY == true) {
+ gif_settings.transparent = 'rgba(0,0,0,0)';
+ }
+ var gif = new GIF(gif_settings);
+
+ //add frames
+ for (var i = 0; i < config.layers.length; i++) {
+ if (config.layers[i].visible == false)
+ continue;
+
+ ctx.clearRect(0, 0, config.WIDTH, config.HEIGHT);
+ if (config.TRANSPARENCY == false) {
+ this.fillCanvasBackground(ctx, '#ffffff');
+ }
+ this.Base_layers.convert_layers_to_canvas(ctx, config.layers[i].id, false);
+
+ gif.addFrame(ctx, {copy: true, delay: delay});
+ }
+ gif.render();
+ gif.on('finished', function (blob) {
+ filesaver.saveAs(blob, fname);
+ });
+ }
+ }
+
+ fillCanvasBackground(ctx, color, width = config.WIDTH, height = config.HEIGHT) {
+ ctx.beginPath();
+ ctx.rect(0, 0, width, height);
+ ctx.fillStyle = color;
+ ctx.fill();
+ }
+
+ check_format_support(canvas, data_header, show_error) {
+ var data = canvas.toDataURL(data_header);
+ var actualType = data.replace(/^data:([^;]*).*/, '$1');
+
+ if (data_header != actualType && data_header != "text/plain") {
+ if (show_error == undefined || show_error == true) {
+ //error - no support
+ alertify.error('Your browser does not support this format.');
+ }
+ return false;
+ }
+ return true;
+ }
+
+ /**
+ * exports all layers to JSON
+ */
+ export_as_json() {
+ //get date
+ var today = new Date();
+ var yyyy = today.getFullYear();
+ var mm = today.getMonth() + 1; //January is 0!
+ var dd = today.getDate();
+ if (dd < 10)
+ dd = '0' + dd;
+ if (mm < 10)
+ mm = '0' + mm;
+ var today = yyyy + '-' + mm + '-' + dd;
+
+ //data
+ var export_data = {};
+ export_data.info = {
+ width: config.WIDTH,
+ height: config.HEIGHT,
+ about: 'Image data with multi-layers. Can be opened using miniPaint - '
+ + 'https://github.com/viliusle/miniPaint',
+ date: today,
+ version: VERSION,
+ layer_active: config.layer.id,
+ guides: config.guides,
+ };
+
+ //fonts
+ export_data.user_fonts = config.user_fonts;
+
+ //layers
+ export_data.layers = [];
+ for (var i in config.layers) {
+ var layer = {};
+ for (var j in config.layers[i]) {
+ if (j[0] == '_' || j == 'link_canvas') {
+ //private data
+ continue;
+ }
+
+ layer[j] = config.layers[i][j];
+ }
+ export_data.layers.push(layer);
+ }
+
+ //image data
+ export_data.data = [];
+ for (var i in config.layers) {
+ if (config.layers[i].type != 'image')
+ continue;
+
+ var canvas = document.createElement('canvas');
+ canvas.width = config.layers[i].width_original;
+ canvas.height = config.layers[i].height_original;
+ this.disable_canvas_smooth(canvas.getContext("2d"));
+
+ canvas.getContext('2d').drawImage(config.layers[i].link, 0, 0);
+
+ var data_tmp = canvas.toDataURL("image/png");
+ export_data.data.push(
+ {
+ id: config.layers[i].id,
+ data: data_tmp,
+ }
+ );
+ canvas.width = 1;
+ canvas.height = 1;
+ }
+
+ return JSON.stringify(export_data, null, "\t");
+ }
+
+ /**
+ * Returns one canvas per visible layer, each composited individually.
+ * Used for multilayer TIFF and multipage PDF export.
+ */
+ _collect_layer_canvases() {
+ var canvases = [];
+ for (var i = 0; i < config.layers.length; i++) {
+ if (config.layers[i].visible == false) continue;
+ var c = document.createElement('canvas');
+ var cx = c.getContext('2d');
+ c.width = config.WIDTH;
+ c.height = config.HEIGHT;
+ this.disable_canvas_smooth(cx);
+ this.Base_layers.convert_layers_to_canvas(cx, config.layers[i].id, false);
+ canvases.push(c);
+ }
+ // Fall back to full composite if no layers found
+ if (canvases.length === 0) {
+ var c = document.createElement('canvas');
+ var cx = c.getContext('2d');
+ c.width = config.WIDTH;
+ c.height = config.HEIGHT;
+ this.disable_canvas_smooth(cx);
+ this.Base_layers.convert_layers_to_canvas(cx, null, false);
+ canvases.push(c);
+ }
+ return canvases;
+ }
+
+ /**
+ * removes smoothing, because it look ugly during zoom
+ *
+ * @param {ctx} ctx
+ */
+ disable_canvas_smooth(ctx) {
+ ctx.webkitImageSmoothingEnabled = false;
+ ctx.oImageSmoothingEnabled = false;
+ ctx.msImageSmoothingEnabled = false;
+ ctx.imageSmoothingEnabled = false;
+ }
+
+}
+
+export default File_save_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/generate/outpaint.js b/paintplus/frontend/src/js/modules/generate/outpaint.js
new file mode 100644
index 0000000..cd7165a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/generate/outpaint.js
@@ -0,0 +1,142 @@
+/**
+ * Outpaint / Expand Canvas — remote provider fills the new region.
+ * Menu target: generate/outpaint.outpaint
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import apiService from './../../services/api.js';
+import { getCapabilities } from './../../api/capabilities.js';
+
+var instance = null;
+
+class Generate_outpaint_class {
+
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this.Base_layers = new Base_layers_class();
+ this.Dialog = new Dialog_class();
+ this.isProcessing = false;
+ }
+
+ async outpaint() {
+ var caps = await getCapabilities();
+ if (!caps.remote || !caps.remote.healthy) {
+ alertify.error(
+ 'Expand Canvas requires a remote AI provider. ' +
+ 'Set AI_PROVIDER (openai / invokeai / comfyui) in .env and restart.'
+ );
+ return;
+ }
+
+ var _this = this;
+
+ this.Dialog.show({
+ title: 'Expand Canvas (Outpaint)',
+ params: [
+ {
+ name: 'direction',
+ title: 'Expand direction:',
+ value: 'right',
+ values: ['right', 'left', 'bottom', 'top'],
+ },
+ {
+ name: 'size',
+ title: 'Pixels to add:',
+ type: 'range',
+ value: 256,
+ range: [64, 1024],
+ step: 64,
+ },
+ {
+ name: 'prompt',
+ title: 'Describe the expansion (optional):',
+ value: '',
+ placeholder: "e.g. 'continue the landscape', 'more sky and clouds'",
+ },
+ ],
+ on_finish: async function (params) {
+ await _this._run(params);
+ },
+ });
+ }
+
+ async _run(params) {
+ if (this.isProcessing) return;
+ if (config.layer.type !== 'image') {
+ alertify.error('Current layer must be an image.');
+ return;
+ }
+
+ this.isProcessing = true;
+ alertify.message('Expanding canvas... please wait', 0);
+
+ try {
+ var layerCanvas = document.createElement('canvas');
+ layerCanvas.width = config.layer.width_original;
+ layerCanvas.height = config.layer.height_original;
+ layerCanvas.getContext('2d').drawImage(config.layer.link, 0, 0);
+ var imageB64 = layerCanvas.toDataURL('image/png').split(',')[1];
+
+ var response = await fetch(
+ (window.API_BASE_URL || '') + '/api/generate/outpaint',
+ {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ image: imageB64,
+ direction: params.direction,
+ size: params.size || 256,
+ prompt: params.prompt || '',
+ }),
+ }
+ );
+ if (!response.ok) {
+ var err = await response.json().catch(() => ({ detail: 'Unknown error' }));
+ throw new Error(err.detail || 'Outpaint failed');
+ }
+ var result = await response.json();
+
+ var img = new Image();
+ img.onload = () => {
+ var newW = img.naturalWidth;
+ var newH = img.naturalHeight;
+ var resultCanvas = document.createElement('canvas');
+ resultCanvas.width = newW;
+ resultCanvas.height = newH;
+ resultCanvas.getContext('2d').drawImage(img, 0, 0);
+
+ // Update canvas dimensions and replace layer
+ config.WIDTH = newW;
+ config.HEIGHT = newH;
+ app.State.do_action(
+ new app.Actions.Bundle_action('outpaint', 'Expand Canvas', [
+ new app.Actions.Resize_canvas_action(newW, newH),
+ new app.Actions.Update_layer_image_action(resultCanvas),
+ ])
+ );
+
+ alertify.dismissAll();
+ alertify.success('Canvas expanded!');
+ this.isProcessing = false;
+ };
+ img.onerror = () => {
+ alertify.dismissAll();
+ alertify.error('Failed to load expanded image.');
+ this.isProcessing = false;
+ };
+ img.src = 'data:image/png;base64,' + result.result;
+
+ } catch (err) {
+ alertify.dismissAll();
+ alertify.error('Outpaint failed: ' + (err.message || err));
+ this.isProcessing = false;
+ }
+ }
+}
+
+export default Generate_outpaint_class;
diff --git a/paintplus/frontend/src/js/modules/generate/text_to_image.js b/paintplus/frontend/src/js/modules/generate/text_to_image.js
new file mode 100644
index 0000000..82b5aa4
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/generate/text_to_image.js
@@ -0,0 +1,216 @@
+/**
+ * Text → Image — generates via remote or local-GPU provider,
+ * pastes result as a new layer on the current canvas.
+ *
+ * Menu target: generate/text_to_image.text_to_image
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import apiService from './../../services/api.js';
+import { getCapabilities } from './../../api/capabilities.js';
+import { showProgress, updateProgress, hideProgress, connectProgressSSE, disconnectProgressSSE } from './../../libs/progress_overlay.js';
+
+var instance = null;
+
+class Generate_text_to_image_class {
+
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this.Base_layers = new Base_layers_class();
+ this.Dialog = new Dialog_class();
+ this.isProcessing = false;
+ }
+
+ async text_to_image() {
+ var caps = await getCapabilities();
+ var hasRemote = caps.remote && caps.remote.healthy;
+ var hasLocal = caps.local && caps.local.local_gpu_available;
+
+ if (!hasRemote && !hasLocal) {
+ alertify.error(
+ 'Text → Image requires an AI provider. ' +
+ 'Set AI_PROVIDER=openai / invokeai / comfyui / local_gpu in .env and restart, ' +
+ 'or configure one in Image → AI Provider Settings.'
+ );
+ return;
+ }
+
+ var _this = this;
+ var canvasW = config.WIDTH || 1024;
+ var canvasH = config.HEIGHT || 1024;
+
+ // Build provider info line
+ var providerHtml = hasRemote
+ ? `● ${caps.remote.provider} `
+ : `● local GPU · ${caps.local.gpu_tier || ''} · ${_shortGpu(caps.local.gpu_device)} `;
+
+ // Model note for local GPU
+ var modelNote = '';
+ if (hasLocal && !hasRemote) {
+ var rec = caps.local.local_gpu_capabilities && caps.local.local_gpu_capabilities.recommended;
+ var m = rec && rec.txt2img;
+ if (m) {
+ modelNote = `Model: ${m.model_id.split('/').pop()} `;
+ if (m.memory_opt && m.memory_opt !== 'none') modelNote += ` · ${m.memory_opt} `;
+ }
+ }
+
+ // Estimate generation time (rough guide for the progress bar)
+ var estSec = hasLocal ? 60 : 15; // local GPU ~1 min; OpenAI ~15s
+
+ var defaultW = Math.min(canvasW, hasLocal ? (caps.local.local_gpu_capabilities?.recommended?.txt2img?.native_res || 1024) : 1024);
+ var defaultH = Math.min(canvasH, defaultW);
+
+ this.Dialog.show({
+ title: 'Text → Image',
+ params: [
+ {
+ title: '',
+ html: `
+ Provider: ${providerHtml}${modelNote ? ' · ' + modelNote : ''}Generation typically takes ${estSec < 30 ? 'a few seconds' : estSec < 90 ? '30–90 seconds on local GPU' : '1–3 minutes on local GPU'}.
+
`,
+ },
+ {
+ name: 'prompt',
+ title: 'Describe your image:',
+ type: 'textarea',
+ value: '',
+ placeholder: "e.g. 'a serene mountain lake at sunset, cinematic lighting'",
+ },
+ {
+ name: 'negative_prompt',
+ title: 'Avoid (optional):',
+ value: '',
+ placeholder: 'blurry, distorted, watermark',
+ },
+ {
+ name: 'width',
+ title: 'Width (px):',
+ value: defaultW,
+ range: [256, 2048],
+ step: 64,
+ type: 'range',
+ },
+ {
+ name: 'height',
+ title: 'Height (px):',
+ value: defaultH,
+ range: [256, 2048],
+ step: 64,
+ type: 'range',
+ },
+ {
+ name: 'placement',
+ title: 'Add as:',
+ value: 'new_layer',
+ values: ['new_layer', 'replace_canvas'],
+ },
+ {
+ name: 'steps',
+ title: 'Steps:',
+ type: 'range',
+ value: 30,
+ range: [10, 60],
+ step: 5,
+ },
+ {
+ name: 'seed',
+ title: 'Seed (0 = random):',
+ value: 0,
+ range: [0, 2147483647],
+ step: 1,
+ type: 'range',
+ },
+ ],
+ on_finish: async function (params) {
+ if (!params.prompt || !params.prompt.trim()) {
+ alertify.warning('Please enter a description.');
+ return;
+ }
+ await _this._generate(params, estSec);
+ },
+ });
+ }
+
+ async _generate(params, estSec) {
+ if (this.isProcessing) return;
+ this.isProcessing = true;
+
+ connectProgressSSE('txt2img', window.API_BASE_URL || '');
+ showProgress('Generating image…', estSec || 60);
+
+ try {
+ var result = await apiService.textToImage(params.prompt, {
+ width: params.width || 1024,
+ height: params.height || 1024,
+ negativePrompt: params.negative_prompt || '',
+ steps: params.steps || 30,
+ seed: params.seed || 0,
+ });
+
+ updateProgress(95, 'Placing image…');
+
+ var img = new Image();
+ img.onload = () => {
+ if (params.placement === 'replace_canvas') {
+ config.WIDTH = img.naturalWidth;
+ config.HEIGHT = img.naturalHeight;
+ var resultCanvas = document.createElement('canvas');
+ resultCanvas.width = img.naturalWidth;
+ resultCanvas.height = img.naturalHeight;
+ resultCanvas.getContext('2d').drawImage(img, 0, 0);
+ app.State.do_action(
+ new app.Actions.Bundle_action('txt2img_replace', 'Text → Image', [
+ new app.Actions.Update_layer_image_action(resultCanvas)
+ ])
+ );
+ } else {
+ app.State.do_action(
+ new app.Actions.Bundle_action('txt2img_layer', 'Text → Image Layer', [
+ new app.Actions.Insert_layer_action({
+ name: params.prompt.slice(0, 30),
+ type: 'image',
+ data: img.src,
+ x: 0, y: 0,
+ width: img.naturalWidth,
+ height: img.naturalHeight,
+ width_original: img.naturalWidth,
+ height_original: img.naturalHeight,
+ })
+ ])
+ );
+ }
+ disconnectProgressSSE();
+ hideProgress();
+ alertify.success('Image generated!');
+ this.isProcessing = false;
+ };
+ img.onerror = () => {
+ disconnectProgressSSE();
+ hideProgress();
+ alertify.error('Failed to load generated image.');
+ this.isProcessing = false;
+ };
+ img.src = 'data:image/png;base64,' + result.result;
+
+ } catch (err) {
+ disconnectProgressSSE();
+ hideProgress();
+ alertify.error('Generation failed: ' + (err.message || err));
+ this.isProcessing = false;
+ }
+ }
+}
+
+function _shortGpu(name) {
+ if (!name) return 'GPU';
+ return name.replace(/^NVIDIA GeForce /i, '').replace(/^NVIDIA /i, '');
+}
+
+export default Generate_text_to_image_class;
diff --git a/paintplus/frontend/src/js/modules/help/about.js b/paintplus/frontend/src/js/modules/help/about.js
new file mode 100644
index 0000000..405f1f3
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/help/about.js
@@ -0,0 +1,36 @@
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+
+class Help_about_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ }
+
+ //about
+ about() {
+ var email = 'www.viliusl@gmail.com';
+
+ var settings = {
+ title: 'About',
+ params: [
+ {title: "", html: 'PaintPlus '},
+ {title: "Version:", value: VERSION},
+ {title: "Description:", value: "Layer-based image editor with AI tools."},
+ {title: "", html: 'miniPaint by ViliusL'},
+ {title: "AI Erase:", html: 'LaMa (Samsung Research) via simple-lama-inpainting '},
+ {title: "Bg Removal:", html: 'rembg / U2Net / OpenCV'},
+ {title: "Smart Select:", html: 'SAM (Meta AI)'},
+ {title: "Remote AI:", html: 'InvokeAI · ComfyUI · OpenAI (user-configured)'},
+ {title: "", html: 'outis1one/EditmaskwithAI '},
+ ],
+ };
+ this.POP.show(settings);
+ }
+
+}
+
+export default Help_about_class;
diff --git a/paintplus/frontend/src/js/modules/help/shortcuts.js b/paintplus/frontend/src/js/modules/help/shortcuts.js
new file mode 100644
index 0000000..0c05a62
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/help/shortcuts.js
@@ -0,0 +1,44 @@
+import Dialog_class from './../../libs/popup.js';
+
+class Help_shortcuts_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ }
+
+ //shortcuts
+ shortcuts() {
+ var settings = {
+ title: 'Keyboard Shortcuts',
+ className: 'shortcuts',
+ params: [
+ {title: "F", value: 'Auto Adjust Colors'},
+ {title: "F3 / ⌘ + F", value: 'Search'},
+ {title: "Ctrl + C", value: 'Copy to Clipboard'},
+ {title: "D", value: 'Duplicate'},
+ {title: "S", value: 'Export'},
+ {title: "G", value: 'Grid on/off'},
+ {title: "I", value: 'Information'},
+ {title: "N", value: 'New layer'},
+ {title: "O", value: 'Open'},
+ {title: "CTRL + V", value: 'Paste'},
+ {title: "F10", value: 'Quick Load'},
+ {title: "F9", value: 'Quick Save'},
+ {title: "R", value: 'Resize'},
+ {title: "L", value: 'Rotate left'},
+ {title: "U", value: 'Ruler'},
+ {title: "Shift + S", value: 'Save As'},
+ {title: "CTRL + A", value: 'Select All'},
+ {title: "H", value: 'Shapes'},
+ {title: "T", value: 'Trim'},
+ {title: "CTRL + Z", value: 'Undo'},
+ {title: "Scroll up", value: 'Zoom in'},
+ {title: "Scroll down", value: 'Zoom out'},
+ ],
+ };
+ this.POP.show(settings);
+ }
+
+}
+
+export default Help_shortcuts_class;
diff --git a/paintplus/frontend/src/js/modules/image/auto_adjust.js b/paintplus/frontend/src/js/modules/image/auto_adjust.js
new file mode 100644
index 0000000..4bda199
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/auto_adjust.js
@@ -0,0 +1,168 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Image_autoAdjust_class {
+
+ constructor() {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+
+ this.set_events();
+ }
+
+ set_events() {
+ document.addEventListener('keydown', (event) => {
+ var code = event.keyCode;
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == 70 && event.ctrlKey != true && event.metaKey != true) {
+ //F - adjust
+ this.auto_adjust();
+ event.preventDefault();
+ }
+ }, false);
+ }
+
+ auto_adjust() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.get_adjust_data(img);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ get_adjust_data(data) {
+ //settings
+ var white = 240; //white color min
+ var black = 30; //black color max
+ var target_white = 1; //how much % white colors should take
+ var target_black = 0.5; //how much % black colors should take
+ var modify = 1.1; //color modify strength
+ var cycles_count = 10; //how much iteration to change colors
+
+ var imgData = data.data;
+ var W = data.width;
+ var H = data.height;
+
+ var n = 0; //pixels count without transparent
+
+ //make sure we have white
+ var n_valid = 0;
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 > white)
+ n_valid++;
+ n++;
+ }
+ var target = target_white;
+ var n_fix_white = 0;
+ var done = false;
+ for (var j = 0; j < cycles_count; j++) {
+ if (n_valid * 100 / n >= target)
+ done = true;
+ if (done == true)
+ break;
+ n_fix_white++;
+
+ //adjust
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ for (var c = 0; c < 3; c++) {
+ var x = i + c;
+ if (imgData[x] < 10)
+ continue;
+ //increase white
+ imgData[x] *= modify;
+ imgData[x] = Math.round(imgData[x]);
+ if (imgData[x] > 255)
+ imgData[x] = 255;
+ }
+ }
+
+ //recheck
+ n_valid = 0;
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 > white)
+ n_valid++;
+ }
+ }
+
+ //make sure we have black
+ n_valid = 0;
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 < black)
+ n_valid++;
+ }
+ target = target_black;
+ var n_fix_black = 0;
+ var done = false;
+ for (var j = 0; j < cycles_count; j++) {
+ if (n_valid * 100 / n >= target)
+ done = true;
+ if (done == true)
+ break;
+ n_fix_black++;
+
+ //adjust
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ for (var c = 0; c < 3; c++) {
+ var x = i + c;
+ if (imgData[x] > 240)
+ continue;
+ //increase black
+ imgData[x] -= (255 - imgData[x]) * modify - (255 - imgData[x]);
+ imgData[x] = Math.round(imgData[x]);
+ }
+ }
+
+ //recheck
+ n_valid = 0;
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+ if ((imgData[i] + imgData[i + 1] + imgData[i + 2]) / 3 < black)
+ n_valid++;
+ }
+ }
+ //log('Iterations: brighten='+n_fix_white+", darken="+n_fix_black);
+
+ return data;
+ }
+}
+
+export default Image_autoAdjust_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/image/auto_enhance.js b/paintplus/frontend/src/js/modules/image/auto_enhance.js
new file mode 100644
index 0000000..e8bd64d
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/auto_enhance.js
@@ -0,0 +1,124 @@
+/**
+ * Auto-Enhance — one-click smart photo improvement.
+ * Applies auto white balance, CLAHE contrast, saturation boost, and mild sharpening.
+ * Strength slider lets the user dial in how strong the effect is.
+ *
+ * Menu target: image/auto_enhance.auto_enhance
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Image_auto_enhance_class {
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this.Dialog = new Dialog_class();
+ this.isProcessing = false;
+ }
+
+ async auto_enhance() {
+ if (!config.layer || config.layer.type !== 'image') {
+ alertify.error('Select an image layer first.');
+ return;
+ }
+ var _this = this;
+ this.Dialog.show({
+ title: 'Auto-Enhance',
+ params: [
+ {
+ title: '',
+ html: `
+ Automatically improves white balance, contrast, saturation, and sharpness.
+
`,
+ },
+ {
+ name: 'strength',
+ title: 'Strength:',
+ value: '100',
+ values: ['25', '50', '75', '100'],
+ type: 'select',
+ },
+ {
+ name: 'new_layer',
+ title: 'Keep original as separate layer:',
+ value: false,
+ },
+ ],
+ on_finish: async function (params) {
+ await _this._run(parseFloat(params.strength) / 100, params.new_layer);
+ },
+ });
+ }
+
+ async _run(strength, newLayer) {
+ if (this.isProcessing) return;
+ this.isProcessing = true;
+ alertify.message('Enhancing…', 0);
+
+ try {
+ const layer = config.layer;
+ const c = document.createElement('canvas');
+ c.width = layer.width_original; c.height = layer.height_original;
+ c.getContext('2d').drawImage(layer.link, 0, 0);
+ const imageB64 = c.toDataURL('image/png').split(',')[1];
+
+ const base = window.API_BASE_URL || '';
+ const r = await fetch(`${base}/api/enhance`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ image: imageB64, strength }),
+ });
+ if (!r.ok) throw new Error((await r.json().catch(() => ({}))).detail || 'Failed');
+ const data = await r.json();
+
+ const img = new Image();
+ img.onload = () => {
+ const rc = document.createElement('canvas');
+ rc.width = img.naturalWidth; rc.height = img.naturalHeight;
+ rc.getContext('2d').drawImage(img, 0, 0);
+
+ if (newLayer) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('auto_enhance', 'Auto-Enhance', [
+ new app.Actions.Insert_layer_action({
+ name: layer.name + ' (Enhanced)',
+ type: 'image',
+ data: img.src,
+ x: layer.x, y: layer.y,
+ width: img.naturalWidth, height: img.naturalHeight,
+ width_original: img.naturalWidth, height_original: img.naturalHeight,
+ })
+ ])
+ );
+ } else {
+ app.State.do_action(
+ new app.Actions.Bundle_action('auto_enhance', 'Auto-Enhance', [
+ new app.Actions.Update_layer_image_action(rc)
+ ])
+ );
+ }
+ alertify.dismissAll();
+ alertify.success('Enhancement applied.');
+ this.isProcessing = false;
+ };
+ img.onerror = () => {
+ alertify.dismissAll();
+ alertify.error('Failed to load result.');
+ this.isProcessing = false;
+ };
+ img.src = 'data:image/png;base64,' + data.result;
+
+ } catch (err) {
+ alertify.dismissAll();
+ alertify.error('Auto-enhance failed: ' + (err.message || err));
+ this.isProcessing = false;
+ }
+ }
+}
+
+export default Image_auto_enhance_class;
diff --git a/paintplus/frontend/src/js/modules/image/color_corrections.js b/paintplus/frontend/src/js/modules/image/color_corrections.js
new file mode 100644
index 0000000..79de61c
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/color_corrections.js
@@ -0,0 +1,134 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+import ImageFilters_class from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Image_colorCorrections_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ImageFilters = ImageFilters_class;
+ }
+
+ color_corrections() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Color Corrections',
+ preview: true,
+ on_change: function (params, canvas_preview, w, h, canvas) {
+ //destructive effects
+ var img = this.layer_active_small_ctx.getImageData(0, 0, w, h);
+ var data = _this.do_corrections(img, params, false);
+ canvas_preview.putImageData(data, 0, 0);
+
+ //non-destructive
+ canvas_preview.filter = "brightness(" + (1 + (params.param_b / 100)) + ")";
+ canvas_preview.filter += " contrast(" + (1 + (params.param_c / 100)) + ")";
+ canvas_preview.filter += " saturate(" + (1 + (params.param_s / 100)) + ")";
+ canvas_preview.filter += " hue-rotate(" + params.param_h + "deg)";
+
+ canvas_preview.drawImage(canvas, 0, 0);
+ },
+ params: [
+ {name: "param_b", title: "Brightness:", value: "0", range: [-100, 100]},
+ {name: "param_c", title: "Contrast:", value: "0", range: [-100, 100]},
+ {name: "param_s", title: "Saturation:", value: "0", range: [-100, 100]},
+ {name: "param_h", title: "Hue:", value: "0", range: [-180, 180]},
+ {},
+ {name: "param_l", title: "Luminance:", value: "0", range: [-100, 100]},
+ {},
+ {name: "param_red", title: "Red channel:", value: "0", range: [-255, 255]},
+ {name: "param_green", title: "Green channel:", value: "0", range: [-255, 255]},
+ {name: "param_blue", title: "Blue channel:", value: "0", range: [-255, 255]},
+ ],
+ on_finish: function (params) {
+ _this.save_changes(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ save_changes(params) {
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.do_corrections(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+
+ //non-destructive filters
+ //multiple do_action() + do_corrections() does not work together yet.
+ if(params.param_b != 0) {
+ var parameters = {value: params.param_b};
+ var filter_id = null;
+ app.State.do_action(
+ new app.Actions.Add_layer_filter_action(null, 'brightness', parameters, filter_id)
+ );
+ }
+ if(params.param_c != 0) {
+ var parameters = {value: params.param_c};
+ var filter_id = null;
+ app.State.do_action(
+ new app.Actions.Add_layer_filter_action(null, 'contrast', parameters, filter_id)
+ );
+ }
+ if(params.param_s != 0) {
+ var parameters = {value: params.param_s};
+ var filter_id = null;
+ app.State.do_action(
+ new app.Actions.Add_layer_filter_action(null, 'saturate', parameters, filter_id)
+ );
+ }
+ if(params.param_h != 0) {
+ var parameters = {value: params.param_h};
+ var filter_id = null;
+ app.State.do_action(
+ new app.Actions.Add_layer_filter_action(null, 'hue-rotate', parameters, filter_id)
+ );
+ }
+ }
+
+ /**
+ * corrections (destructive)
+ *
+ * @param data
+ * @param params
+ * @returns {*}
+ */
+ do_corrections(data, params) {
+ //luminance
+ if(params.param_l != 0) {
+ var data = this.ImageFilters.HSLAdjustment(data, 0, 0, params.param_l);
+ }
+
+ //RGB corrections
+ if(params.param_red != 0 || params.param_green != 0 || params.param_blue != 0) {
+ var data = this.ImageFilters.ColorTransformFilter(data, 1, 1, 1, 1,
+ params.param_red, params.param_green, params.param_blue, 1);
+ }
+
+ return data;
+ }
+
+}
+
+export default Image_colorCorrections_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/image/color_palette.js b/paintplus/frontend/src/js/modules/image/color_palette.js
new file mode 100644
index 0000000..34b13d1
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/color_palette.js
@@ -0,0 +1,114 @@
+/**
+ * Color Palette Extractor — pull dominant colors from the current image layer.
+ * Shows a floating swatch panel; click a swatch to copy the hex or set as active color.
+ *
+ * Menu target: image/color_palette.color_palette
+ */
+
+import config from './../../config.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Image_color_palette_class {
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this._panel = null;
+ }
+
+ async color_palette() {
+ if (!config.layer || config.layer.type !== 'image') {
+ alertify.error('Select an image layer first.');
+ return;
+ }
+ // Toggle: if panel already showing, close it
+ if (this._panel) { this._removePanel(); return; }
+
+ alertify.message('Extracting colors…', 0);
+ try {
+ const layer = config.layer;
+ const c = document.createElement('canvas');
+ c.width = layer.width_original; c.height = layer.height_original;
+ c.getContext('2d').drawImage(layer.link, 0, 0);
+ const imageB64 = c.toDataURL('image/png').split(',')[1];
+
+ const base = window.API_BASE_URL || '';
+ const r = await fetch(`${base}/api/extract-colors`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ image: imageB64, count: 8 }),
+ });
+ if (!r.ok) throw new Error((await r.json().catch(() => ({}))).detail || 'Failed');
+ const data = await r.json();
+
+ alertify.dismissAll();
+ this._showPanel(data.colors);
+ } catch (err) {
+ alertify.dismissAll();
+ alertify.error('Color extraction failed: ' + (err.message || err));
+ }
+ }
+
+ _showPanel(colors) {
+ this._removePanel();
+ const panel = document.createElement('div');
+ panel.id = 'color_palette_panel';
+ Object.assign(panel.style, {
+ position: 'fixed', bottom: '72px', right: '24px',
+ background: '#1a1a1a', border: '1px solid #3a3a3a',
+ borderRadius: '12px', padding: '12px 14px',
+ zIndex: '9998', boxShadow: '0 6px 24px rgba(0,0,0,0.6)',
+ fontFamily: 'sans-serif', fontSize: '12px', color: '#bbb',
+ userSelect: 'none', minWidth: '180px',
+ });
+
+ const swatchesHtml = colors.map(hex => `
+
+
`).join('');
+
+ panel.innerHTML = `
+
+ Image Palette
+ ×
+
+ ${swatchesHtml}
+
+ Click: copy hex · Shift+click: set color
`;
+
+ document.body.appendChild(panel);
+ this._panel = panel;
+
+ // Close button
+ panel.querySelector('#cp-close').addEventListener('click', () => this._removePanel());
+
+ // Swatch clicks
+ panel.querySelectorAll('[data-hex]').forEach(el => {
+ el.addEventListener('click', e => {
+ const hex = el.dataset.hex;
+ if (e.shiftKey) {
+ // Set as active color in miniPaint
+ config.COLOR = hex;
+ const copiedEl = panel.querySelector('#cp-copied');
+ if (copiedEl) copiedEl.textContent = `Active color set to ${hex}`;
+ } else {
+ navigator.clipboard.writeText(hex).catch(() => {});
+ const copiedEl = panel.querySelector('#cp-copied');
+ if (copiedEl) { copiedEl.textContent = `Copied ${hex}`; }
+ }
+ });
+ });
+ }
+
+ _removePanel() {
+ if (this._panel) { this._panel.remove(); this._panel = null; }
+ }
+}
+
+export default Image_color_palette_class;
diff --git a/paintplus/frontend/src/js/modules/image/decrease_colors.js b/paintplus/frontend/src/js/modules/image/decrease_colors.js
new file mode 100644
index 0000000..d81fb7a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/decrease_colors.js
@@ -0,0 +1,174 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+import ImageFilters_class from './../../libs/imagefilters.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Image_decreaseColors_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ImageFilters = ImageFilters_class;
+ }
+
+ decrease_colors() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ var settings = {
+ title: 'Decrease Color Depth',
+ preview: true,
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.get_decreased_data(img, params.colors, params.greyscale);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ params: [
+ {name: "colors", title: "Colors:", value: 10, range: [1, 256]},
+ {name: "greyscale", title: "Greyscale:", value: false},
+ ],
+ on_finish: function (params) {
+ _this.execute(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ execute(params) {
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //change data
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.get_decreased_data(img, params.colors, params.greyscale);
+ ctx.putImageData(data, 0, 0);
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ get_decreased_data(data, colors, greyscale) {
+ var img = data.data;
+ var imgData = data.data;
+ var W = data.width;
+ var H = data.height;
+ var palette = [];
+ var block_size = 10;
+
+ //create tmp canvas
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ canvas.width = W;
+ canvas.height = H;
+
+ //collect top colors
+ ctx.drawImage(config.layer.link, 0, 0, Math.ceil(W / block_size), Math.ceil(H / block_size));
+ var img_p = ctx.getImageData(0, 0, Math.ceil(W / block_size), Math.ceil(H / block_size));
+ var imgData_p = img_p.data;
+ ctx.clearRect(0, 0, W, H);
+
+ for (var i = 0; i < imgData_p.length; i += 4) {
+ if (imgData_p[i + 3] == 0)
+ continue; //transparent
+ var grey = Math.round(0.2126 * imgData_p[i] + 0.7152 * imgData_p[i + 1]
+ + 0.0722 * imgData_p[i + 2]);
+ palette.push([imgData_p[i], imgData_p[i + 1], imgData_p[i + 2], grey]);
+ }
+
+ //calculate weights
+ var grey_palette = [];
+ for (var i = 0; i < 256; i++)
+ grey_palette[i] = 0;
+ for (var i = 0; i < palette.length; i++)
+ grey_palette[palette[i][3]]++;
+
+ //remove similar colors
+ for (var max = 10 * 3; max < 100 * 3; max = max + 10 * 3) {
+ if (palette.length <= colors)
+ break;
+ for (var i = 0; i < palette.length; i++) {
+ if (palette.length <= colors)
+ break;
+ var valid = true;
+ for (var j = 0; j < palette.length; j++) {
+ if (palette.length <= colors)
+ break;
+ if (i == j)
+ continue;
+ if (Math.abs(palette[i][0] - palette[j][0])
+ + Math.abs(palette[i][1] - palette[j][1])
+ + Math.abs(palette[i][2] - palette[j][2]) < max) {
+ if (grey_palette[palette[i][3]] > grey_palette[palette[j][3]]) {
+ //remove color
+ palette.splice(j, 1);
+ j--;
+ }
+ else {
+ valid = false;
+ break;
+ }
+ }
+ }
+ //remove color
+ if (valid == false) {
+ palette.splice(i, 1);
+ i--;
+ }
+ }
+ }
+ palette = palette.slice(0, colors);
+
+ //change
+ var p_n = palette.length;
+ for (var j = 0; j < H; j++) {
+ for (var i = 0; i < W; i++) {
+ var k = ((j * (W * 4)) + (i * 4));
+ if (imgData[k + 3] == 0)
+ continue; //transparent
+
+ //find closest color
+ var index1 = 0;
+ var min = 999999;
+ var diff1;
+ for (var m = 0; m < p_n; m++) {
+ var diff = Math.abs(palette[m][0] - imgData[k])
+ + Math.abs(palette[m][1] - imgData[k + 1])
+ + Math.abs(palette[m][2] - imgData[k + 2]);
+ if (diff < min) {
+ min = diff;
+ index1 = m;
+ diff1 = diff;
+ }
+ }
+
+ imgData[k] = palette[index1][0];
+ imgData[k + 1] = palette[index1][1];
+ imgData[k + 2] = palette[index1][2];
+
+ if (greyscale == true) {
+ var mid = Math.round(0.2126 * imgData[k] + 0.7152 * imgData[k + 1]
+ + 0.0722 * imgData[k + 2]);
+ imgData[k] = mid;
+ imgData[k + 1] = mid;
+ imgData[k + 2] = mid;
+ }
+ }
+ }
+
+ return data;
+ }
+
+}
+
+export default Image_decreaseColors_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/image/flip.js b/paintplus/frontend/src/js/modules/image/flip.js
new file mode 100644
index 0000000..3fa7b34
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/flip.js
@@ -0,0 +1,56 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Image_flip_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ vertical() {
+ this.flip('vertical');
+ }
+
+ horizontal() {
+ this.flip('horizontal');
+ }
+
+ flip(mode) {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ //create destination canvas
+ var canvas2 = document.createElement('canvas');
+ canvas2.width = canvas.width;
+ canvas2.height = canvas.height;
+ var ctx2 = canvas2.getContext("2d");
+ canvas2.dataset.x = canvas.dataset.x;
+ canvas2.dataset.y = canvas.dataset.y;
+
+ //flip
+ if (mode == 'vertical') {
+ ctx2.scale(1, -1);
+ ctx2.drawImage(canvas, 0, canvas2.height * -1);
+ }
+ else if (mode == 'horizontal') {
+ ctx2.scale(-1, 1);
+ ctx2.drawImage(canvas, canvas2.width * -1, 0);
+ }
+
+ //save
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas2)
+ );
+ }
+
+}
+
+export default Image_flip_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/image/frame_fit.js b/paintplus/frontend/src/js/modules/image/frame_fit.js
new file mode 100644
index 0000000..b56bc00
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/frame_fit.js
@@ -0,0 +1,229 @@
+/**
+ * Fit to Frame — resize/extend/crop image to a standard print frame size.
+ *
+ * Modes:
+ * crop — center-crop to aspect ratio, scale to print resolution (no AI needed)
+ * extend — scale to fill one dimension, AI-outpaint the gap (needs provider)
+ * smart — auto-pick: extend if gap < 15% of dimension, else crop
+ *
+ * Menu target: image/frame_fit.frame_fit
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import { getCapabilities } from './../../api/capabilities.js';
+import { showProgress, hideProgress } from './../../libs/progress_overlay.js';
+
+var instance = null;
+
+const FRAME_SIZES = [
+ '4x6', '5x7', '8x10', '11x14', '16x20', '18x24', '20x24', '24x36',
+ '4x4', '8x8', '12x12',
+];
+
+// Pixels at 300 dpi for preview labels
+const FRAME_PX = {
+ '4x6': [1200, 1800], '5x7': [1500, 2100],
+ '8x10': [2400, 3000], '11x14': [3300, 4200],
+ '16x20': [4800, 6000], '18x24': [5400, 7200],
+ '20x24': [6000, 7200], '24x36': [7200, 10800],
+ '4x4': [1200, 1200], '8x8': [2400, 2400], '12x12': [3600, 3600],
+};
+
+class Image_frame_fit_class {
+
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this.Base_layers = new Base_layers_class();
+ this.Dialog = new Dialog_class();
+ this.isProcessing = false;
+ }
+
+ async frame_fit() {
+ if (!config.layer || config.layer.type !== 'image') {
+ alertify.error('Select an image layer first.');
+ return;
+ }
+
+ var caps = await getCapabilities();
+ var hasRemote = caps.remote && caps.remote.healthy;
+
+ var _this = this;
+ var W = config.layer.width_original;
+ var H = config.layer.height_original;
+
+ // Build display labels with pixel sizes
+ var sizeLabels = FRAME_SIZES.map(s => {
+ var px = FRAME_PX[s] || [0, 0];
+ return `${s}" (${px[0]}×${px[1]}px @ 300dpi)`;
+ });
+
+ this.Dialog.show({
+ title: 'Fit to Frame',
+ params: [
+ {
+ title: '',
+ html: `
+ Current image: ${W}×${H}px(no provider configured — extend will use mirror fill) '}.
+
`,
+ },
+ {
+ name: 'frame',
+ title: 'Frame size:',
+ value: sizeLabels[1], // default 5x7
+ values: sizeLabels,
+ type: 'select',
+ },
+ {
+ name: 'orientation',
+ title: 'Orientation:',
+ value: 'auto',
+ values: ['auto', 'portrait', 'landscape'],
+ type: 'select',
+ },
+ {
+ name: 'mode',
+ title: 'Fit mode:',
+ value: 'smart',
+ values: ['smart', 'crop', 'extend'],
+ type: 'select',
+ },
+ {
+ name: 'dpi',
+ title: 'Output DPI:',
+ value: '300',
+ values: ['72', '150', '200', '300'],
+ type: 'select',
+ },
+ {
+ name: 'prompt',
+ title: 'Extend prompt (optional):',
+ value: '',
+ placeholder: 'e.g. "continue the background naturally" — blank works well',
+ },
+ {
+ name: 'new_layer',
+ title: 'Result as new layer (keep original):',
+ value: true,
+ },
+ ],
+ on_finish: async function (params) {
+ var frameKey = params.frame.split('"')[0]; // strip label suffix back to "8x10"
+ await _this._run(frameKey, params);
+ },
+ });
+ }
+
+ async _run(frameKey, params) {
+ if (this.isProcessing) return;
+ this.isProcessing = true;
+
+ var mode = params.mode || 'smart';
+ showProgress(
+ mode === 'extend'
+ ? 'Fitting to frame with AI extension…'
+ : 'Fitting to frame…',
+ mode === 'extend' ? 45 : 5
+ );
+
+ try {
+ var layerCanvas = document.createElement('canvas');
+ layerCanvas.width = config.layer.width_original;
+ layerCanvas.height = config.layer.height_original;
+ layerCanvas.getContext('2d').drawImage(config.layer.link, 0, 0);
+ var imageB64 = layerCanvas.toDataURL('image/png').split(',')[1];
+
+ var base = window.API_BASE_URL || '';
+ var r = await fetch(`${base}/api/print/frame-fit`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ image: imageB64,
+ frame: frameKey,
+ orientation: params.orientation || 'auto',
+ mode: params.mode || 'smart',
+ dpi: parseInt(params.dpi) || 300,
+ prompt: params.prompt || '',
+ }),
+ });
+
+ if (!r.ok) {
+ var err = await r.json().catch(() => ({ detail: 'Server error' }));
+ throw new Error(err.detail || 'Frame fit failed');
+ }
+ var result = await r.json();
+
+ var img = new Image();
+ img.onload = () => {
+ var resultCanvas = document.createElement('canvas');
+ resultCanvas.width = img.naturalWidth;
+ resultCanvas.height = img.naturalHeight;
+ resultCanvas.getContext('2d').drawImage(img, 0, 0);
+
+ var fitW = img.naturalWidth;
+ var fitH = img.naturalHeight;
+
+ if (params.new_layer) {
+ var dataURL = img.src;
+ app.State.do_action(
+ new app.Actions.Bundle_action('frame_fit_layer', 'Fit to Frame', [
+ new app.Actions.Prepare_canvas_action('undo'),
+ new app.Actions.Update_config_action({
+ WIDTH: fitW,
+ HEIGHT: fitH,
+ }),
+ new app.Actions.Insert_layer_action({
+ name: `${frameKey} fit`,
+ type: 'image',
+ data: dataURL,
+ x: 0, y: 0,
+ width: fitW,
+ height: fitH,
+ width_original: fitW,
+ height_original: fitH,
+ }),
+ new app.Actions.Prepare_canvas_action('do'),
+ ])
+ );
+ } else {
+ app.State.do_action(
+ new app.Actions.Bundle_action('frame_fit', 'Fit to Frame', [
+ new app.Actions.Prepare_canvas_action('undo'),
+ new app.Actions.Update_config_action({
+ WIDTH: fitW,
+ HEIGHT: fitH,
+ }),
+ new app.Actions.Update_layer_image_action(resultCanvas),
+ new app.Actions.Prepare_canvas_action('do'),
+ ])
+ );
+ }
+
+ hideProgress();
+ alertify.success(
+ `Done! ${result.output_pixels.width}×${result.output_pixels.height}px` +
+ ` (${result.frame} ${result.orientation}, ${result.mode_used})`
+ );
+ this.isProcessing = false;
+ };
+ img.onerror = () => {
+ hideProgress();
+ alertify.error('Failed to load result.');
+ this.isProcessing = false;
+ };
+ img.src = 'data:image/png;base64,' + result.result;
+
+ } catch (err) {
+ hideProgress();
+ alertify.error('Frame fit failed: ' + (err.message || err));
+ this.isProcessing = false;
+ }
+ }
+}
+
+export default Image_frame_fit_class;
diff --git a/paintplus/frontend/src/js/modules/image/histogram.js b/paintplus/frontend/src/js/modules/image/histogram.js
new file mode 100644
index 0000000..f9786c5
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/histogram.js
@@ -0,0 +1,122 @@
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+
+class Image_histogram_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ }
+
+ histogram() {
+ var _this = this;
+
+ var settings = {
+ title: 'Histogram',
+ on_change: function (params) {
+ _this.histogram_onload(params);
+ },
+ params: [
+ {name: "channel", title: "Channel:", values: ["Gray", "Red", "Green", "Blue"], },
+ {title: 'Histogram:', function: function () {
+ var html = '
+ ${key}"
+ ${effDpi} DPI
+ ${quality}${scaleNote}
+ `;
+ }).join('');
+
+ var aiNote = hasAI
+ ? 'Real-ESRGAN available — will add genuine sharpness (AI reconstructs detail) '
+ : 'No AI provider — will use Lanczos (resizes but doesn\'t add detail) ';
+
+ return `
+
Current image: ${W}×${H}px · ${aiNote}
+
+
200 DPI is fine for 18×24" and larger prints viewed from 2+ feet.
+
} Returns array of actions to perform
+ */
+ async resize_layer(layer, params) {
+ var units = params.units || this.Tools_settings.get_setting('default_units');
+ var resolution = this.Tools_settings.get_setting('resolution');
+ var mode = params.mode;
+ var width = parseFloat(params.width);
+ var height = parseFloat(params.height);
+ var width_100 = parseInt(params.width_percent);
+ var height_100 = parseInt(params.height_percent);
+ var canvas_width = layer.width;
+ var canvas_height = layer.height;
+ var sharpen = params.sharpen;
+ var _this = this;
+
+ //convert units
+ if (isNaN(width) == false){
+ width = this.Helper.get_internal_unit(width, units, resolution);
+ }
+ if (isNaN(height) == false){
+ height = this.Helper.get_internal_unit(height, units, resolution);
+ }
+
+ //if dimension with percent provided
+ if (isNaN(width) && isNaN(height)) {
+ if (isNaN(width_100) == false) {
+ width = Math.round(config.WIDTH * width_100 / 100);
+ canvas_width = Math.round(config.WIDTH * width_100 / 100);
+ }
+ if (isNaN(height_100) == false) {
+ height = Math.round(config.HEIGHT * height_100 / 100);
+ canvas_height = Math.round(config.HEIGHT * height_100 / 100);
+ }
+ }
+
+ //if only 1 dimension was provided
+ if (isNaN(width) || isNaN(height)) {
+ var ratio = layer.width / layer.height;
+ var canvas_ratio = config.WIDTH / config.HEIGHT;
+ if (isNaN(width))
+ width = Math.round(height * ratio);
+ canvas_width = Math.round(canvas_height * canvas_ratio);
+ if (isNaN(height))
+ height = Math.round(width / ratio);
+ canvas_height = Math.round(canvas_width / canvas_ratio);
+ }
+
+ let new_x = params.layers == 'All' ? Math.round(layer.x * width / config.WIDTH) : layer.x;
+ let new_y = params.layers == 'All' ? Math.round(layer.y * height / config.HEIGHT) : layer.y;
+ let xratio = width / config.WIDTH;
+ let yratio = height / config.HEIGHT;
+
+ //is text
+ if (layer.type == 'text') {
+ let data = JSON.parse(JSON.stringify(layer.data));
+ for (let line of data) {
+ for (let span of line) {
+ span.meta.size = Math.ceil((span.meta.size || textMetaDefaults.size) * xratio);
+ span.meta.stroke_size = parseFloat((0.1 * Math.round((span.meta.stroke_size != null ? span.meta.stroke_size : textMetaDefaults.stroke_size) * xratio / 0.1)).toFixed(1));
+ span.meta.kerning = Math.ceil((span.meta.kerning || textMetaDefaults.kerning) * xratio);
+ }
+ }
+
+ // Return actions
+ return [
+ new app.Actions.Update_layer_action(layer.id, {
+ x: new_x,
+ y: new_y,
+ data,
+ width: layer.width * xratio,
+ height: layer.height * yratio
+ })
+ ];
+ }
+
+ //is vector
+ else if (layer.is_vector == true && layer.width != null && layer.height != null) {
+ // Return actions
+ return [
+ new app.Actions.Update_layer_action(layer.id, {
+ x: new_x,
+ y: new_y,
+ width: layer.width * xratio,
+ height: layer.height * yratio
+ })
+ ];
+ }
+
+ //only images supported at this point
+ else if (layer.type != 'image') {
+ //error - no support
+ alertify.error('Layer must be vector or image (convert it to raster).');
+ throw new Error('Layer is not compatible with resize');
+ }
+
+ //get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(layer.id, true, false);
+ var ctx = canvas.getContext("2d");
+
+ //validate
+ if (mode == "Hermite" && (width > canvas.width || height > canvas.height)) {
+ alertify.warning('Scaling up is not supported in Hermite, using Lanczos.');
+ mode = "Lanczos";
+ }
+
+ //resize
+ if (mode == "Lanczos") {
+ //Pica resize with max quality
+
+ var tmp_data = document.createElement("canvas");
+ tmp_data.width = width;
+ tmp_data.height = height;
+
+ await this.pica.resize(canvas, tmp_data, {
+ alpha: true,
+ })
+ .then((result) => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ canvas.width = width;
+ canvas.height = height;
+ ctx.drawImage(tmp_data, 0, 0, width, height);
+ });
+ }
+ else if (mode == "Hermite") {
+ //Hermite resample
+ this.Hermite.resample_single(canvas, width, height, true);
+ }
+ else {
+ //simple resize
+ var tmp_data = document.createElement("canvas");
+ tmp_data.width = canvas.width;
+ tmp_data.height = canvas.height;
+ tmp_data.getContext("2d").drawImage(canvas, 0, 0);
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ canvas.width = width;
+ canvas.height = height;
+
+ ctx.drawImage(tmp_data, 0, 0, width, height);
+ }
+
+ if (sharpen == true) {
+ var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var filtered = _this.ImageFilters.Sharpen(imageData, 1); //add effect
+ ctx.putImageData(filtered, 0, 0);
+ }
+
+ // Return actions
+ return [
+ new app.Actions.Update_layer_image_action(canvas, layer.id),
+ new app.Actions.Update_layer_action(layer.id, {
+ x: new_x,
+ y: new_y,
+ width: canvas.width,
+ height: canvas.height,
+ width_original: canvas.width,
+ height_original: canvas.height
+ })
+ ];
+ }
+
+ resize_gui(params) {
+ var units = params.units || this.Tools_settings.get_setting('default_units');
+ var resolution = this.Tools_settings.get_setting('resolution');
+
+ var width = parseFloat(params.width);
+ var height = parseFloat(params.height);
+ var width_100 = parseInt(params.width_percent);
+ var height_100 = parseInt(params.height_percent);
+
+ //convert units
+ if (isNaN(width) == false){
+ width = this.Helper.get_internal_unit(width, units, resolution);
+ }
+ if (isNaN(height) == false){
+ height = this.Helper.get_internal_unit(height, units, resolution);
+ }
+
+ //if dimension with percent provided
+ if (isNaN(width) && isNaN(height)) {
+ if (isNaN(width_100) == false) {
+ width = Math.round(config.WIDTH * width_100 / 100);
+ }
+ if (isNaN(height_100) == false) {
+ height = Math.round(config.HEIGHT * height_100 / 100);
+ }
+ }
+
+ //if only 1 dimension was provided
+ if (isNaN(width) || isNaN(height)) {
+ var ratio = config.WIDTH / config.HEIGHT;
+ if (isNaN(width))
+ width = Math.round(height * ratio);
+ if (isNaN(height))
+ height = Math.round(width / ratio);
+ }
+
+ return [
+ new app.Actions.Prepare_canvas_action('undo'),
+ new app.Actions.Update_config_action({
+ WIDTH: parseInt(width),
+ HEIGHT: parseInt(height)
+ }),
+ new app.Actions.Prepare_canvas_action('do')
+ ];
+ }
+
+}
+
+export default Image_resize_class;
diff --git a/paintplus/frontend/src/js/modules/image/rotate.js b/paintplus/frontend/src/js/modules/image/rotate.js
new file mode 100644
index 0000000..ad6f35f
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/rotate.js
@@ -0,0 +1,180 @@
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Base_gui_class from './../../core/base-gui.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import app from '../../app.js';
+
+var instance = null;
+
+class Image_rotate_class {
+
+ constructor() {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.Base_gui = new Base_gui_class();
+ this.Helper = new Helper_class();
+ this.Dialog = new Dialog_class();
+
+ this.set_events();
+ }
+
+ set_events() {
+ document.addEventListener('keydown', (event) => {
+ var code = event.keyCode;
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == 76) {
+ //L - rotate left
+ this.left();
+ event.preventDefault();
+ }
+ }, false);
+ }
+
+ rotate() {
+ var _this = this;
+
+ if (config.layer.rotate === null) {
+ alertify.error('Rotate is not supported on this type of object. Convert to raster?');
+ return;
+ }
+
+ var angles = ['Custom', '0', '90', '180', '270'];
+ var initial_angle = config.layer.rotate;
+
+ var settings = {
+ title: 'Rotate',
+ params: [
+ {name: "rotate", title: "Rotate:", value: config.layer.rotate, range: [0, 360]},
+ {name: "right_angle", title: "Right angle:", values: angles},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ _this.rotate_handler(params, false);
+ },
+ on_finish: function (params) {
+ config.layer.rotate = initial_angle;
+ _this.rotate_handler(params);
+ },
+ on_cancel: function (params) {
+ config.layer.rotate = initial_angle;
+ config.need_render = true;
+ },
+ };
+ this.Dialog.show(settings);
+ }
+
+ rotate_handler(data, can_resize = true) {
+ var value = parseInt(data.rotate);
+ if (data.right_angle != 'Custom') {
+ value = parseInt(data.right_angle);
+ }
+
+ if (value < 0)
+ value = 360 + value;
+ if (value >= 360)
+ value = value - 360;
+ let new_rotate = value;
+
+ if (can_resize == true) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('rotate_layer', 'Rotate Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ rotate: new_rotate
+ }),
+ ...this.check_sizes(new_rotate)
+ ])
+ );
+ } else {
+ config.layer.rotate = new_rotate;
+ config.need_render = true;
+ }
+ }
+
+ left() {
+ let new_rotate = config.layer.rotate;
+ new_rotate -= 90;
+ if (new_rotate < 0)
+ new_rotate = 360 + new_rotate;
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('rotate_layer', 'Rotate Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ rotate: new_rotate
+ }),
+ ...this.check_sizes(new_rotate)
+ ])
+ );
+ }
+
+ right() {
+ let new_rotate = config.layer.rotate;
+ new_rotate += 90;
+ if (new_rotate >= 360)
+ new_rotate = new_rotate - 360;
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('rotate_layer', 'Rotate Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ rotate: new_rotate
+ }),
+ ...this.check_sizes(new_rotate)
+ ])
+ );
+ }
+
+ /**
+ * Makes sure image fits all after rotation
+ * @returns {array} actions to perform
+ */
+ check_sizes(new_rotate) {
+ let actions = [];
+ var w = config.layer.width;
+ var h = config.layer.height;
+
+ var o = new_rotate * Math.PI / 180;
+ var new_x = w * Math.abs(Math.cos(o)) + h * Math.abs(Math.sin(o));
+ var new_y = w * Math.abs(Math.sin(o)) + h * Math.abs(Math.cos(o));
+
+ //round values
+ new_x = Math.ceil(Math.round(new_x * 1000) / 1000);
+ new_y = Math.ceil(Math.round(new_y * 1000) / 1000);
+
+ if (new_x > config.WIDTH || new_y > config.HEIGHT) {
+ var dx = 0;
+ var dy = 0;
+ let new_width = config.WIDTH;
+ let new_height = config.HEIGHT;
+ if (new_x > config.WIDTH) {
+ dx = Math.ceil(new_x - new_width) / 2;
+ new_width = new_x;
+ }
+ if (new_y > config.HEIGHT) {
+ dy = Math.ceil(new_y - new_height) / 2;
+ new_height = new_y;
+ }
+ actions.push(
+ new app.Actions.Prepare_canvas_action('undo'),
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: config.layer.x + dx,
+ y: config.layer.y + dy
+ }),
+ new app.Actions.Update_config_action({
+ WIDTH: new_width,
+ HEIGHT: new_height
+ }),
+ new app.Actions.Prepare_canvas_action('do')
+ );
+ }
+ return actions;
+ }
+}
+
+export default Image_rotate_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/image/selection_effects.js b/paintplus/frontend/src/js/modules/image/selection_effects.js
new file mode 100644
index 0000000..724824a
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/selection_effects.js
@@ -0,0 +1,353 @@
+/**
+ * Selection Effects - Apply effects only to the selected area
+ * Works with any selection tool (Smart Select, Brush Select, Magic Wand, Lasso, Ellipse)
+ * Useful for CNC depth maps where you want to modify specific objects
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Image_selection_effects_class {
+
+ constructor() {
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ /**
+ * Check if there's a valid selection
+ */
+ hasSelection() {
+ return window.smartSelectMask && window.smartSelectMask.canvas;
+ }
+
+ /**
+ * Invert colors only in the selected area
+ */
+ invert_selection() {
+ var _this = this;
+
+ if (!this.hasSelection()) {
+ alertify.error('No selection. Use a selection tool first (Smart Select, Brush Select, Magic Wand, etc.)');
+ return;
+ }
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer');
+ return;
+ }
+
+ var settings = {
+ title: 'Invert Selection',
+ preview: true,
+ params: [
+ {
+ name: "strength",
+ title: "Strength:",
+ value: 100,
+ range: [0, 100]
+ },
+ {
+ name: "preserve_luminosity",
+ title: "Preserve Luminosity:",
+ value: false
+ }
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.apply_invert(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save_invert(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ apply_invert(imageData, params) {
+ if (!this.hasSelection()) return imageData;
+
+ var data = imageData.data;
+ var width = imageData.width;
+ var height = imageData.height;
+ var strength = (params.strength || 100) / 100;
+ var preserveLuminosity = params.preserve_luminosity || false;
+
+ // Get mask data
+ var maskCanvas = window.smartSelectMask.canvas;
+ var maskCtx = maskCanvas.getContext('2d');
+
+ // Scale mask to match current canvas size if needed
+ var scaledMask = document.createElement('canvas');
+ scaledMask.width = width;
+ scaledMask.height = height;
+ var scaledCtx = scaledMask.getContext('2d');
+ scaledCtx.drawImage(maskCanvas, 0, 0, width, height);
+
+ var maskData = scaledCtx.getImageData(0, 0, width, height).data;
+
+ for (var i = 0; i < data.length; i += 4) {
+ var maskValue = maskData[i] / 255; // 0-1 range
+
+ if (maskValue > 0.5) { // Inside selection
+ var r = data[i];
+ var g = data[i + 1];
+ var b = data[i + 2];
+
+ // Invert colors
+ var newR = 255 - r;
+ var newG = 255 - g;
+ var newB = 255 - b;
+
+ if (preserveLuminosity) {
+ // Calculate original and new luminosity
+ var oldLum = 0.299 * r + 0.587 * g + 0.114 * b;
+ var newLum = 0.299 * newR + 0.587 * newG + 0.114 * newB;
+
+ // Adjust to preserve luminosity
+ if (newLum > 0) {
+ var ratio = oldLum / newLum;
+ newR = Math.min(255, newR * ratio);
+ newG = Math.min(255, newG * ratio);
+ newB = Math.min(255, newB * ratio);
+ }
+ }
+
+ // Apply strength (blend between original and inverted)
+ data[i] = Math.round(r + (newR - r) * strength);
+ data[i + 1] = Math.round(g + (newG - g) * strength);
+ data[i + 2] = Math.round(b + (newB - b) * strength);
+ }
+ }
+
+ return imageData;
+ }
+
+ save_invert(params) {
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.apply_invert(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ /**
+ * Adjust brightness/contrast only in the selected area
+ */
+ adjust_selection() {
+ var _this = this;
+
+ if (!this.hasSelection()) {
+ alertify.error('No selection. Use a selection tool first.');
+ return;
+ }
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer');
+ return;
+ }
+
+ var settings = {
+ title: 'Adjust Selection',
+ preview: true,
+ params: [
+ {name: "brightness", title: "Brightness:", value: 0, range: [-100, 100]},
+ {name: "contrast", title: "Contrast:", value: 0, range: [-100, 100]},
+ {name: "gamma", title: "Gamma:", value: 1, range: [0.1, 3], step: 0.1},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.apply_adjust(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save_adjust(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ apply_adjust(imageData, params) {
+ if (!this.hasSelection()) return imageData;
+
+ var data = imageData.data;
+ var width = imageData.width;
+ var height = imageData.height;
+ var brightness = (params.brightness || 0) * 2.55;
+ var contrast = (params.contrast || 0) / 100;
+ var gamma = params.gamma || 1;
+
+ var factor = (1 + contrast);
+
+ // Get mask data
+ var maskCanvas = window.smartSelectMask.canvas;
+ var scaledMask = document.createElement('canvas');
+ scaledMask.width = width;
+ scaledMask.height = height;
+ var scaledCtx = scaledMask.getContext('2d');
+ scaledCtx.drawImage(maskCanvas, 0, 0, width, height);
+ var maskData = scaledCtx.getImageData(0, 0, width, height).data;
+
+ for (var i = 0; i < data.length; i += 4) {
+ var maskValue = maskData[i] / 255;
+
+ if (maskValue > 0.5) {
+ for (var c = 0; c < 3; c++) {
+ var value = data[i + c];
+
+ // Apply brightness
+ value += brightness;
+
+ // Apply contrast
+ value = ((value - 128) * factor) + 128;
+
+ // Apply gamma
+ value = 255 * Math.pow(value / 255, 1 / gamma);
+
+ data[i + c] = Math.max(0, Math.min(255, Math.round(value)));
+ }
+ }
+ }
+
+ return imageData;
+ }
+
+ save_adjust(params) {
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.apply_adjust(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+
+ /**
+ * Convert selection to greyscale (useful for depth maps)
+ */
+ greyscale_selection() {
+ var _this = this;
+
+ if (!this.hasSelection()) {
+ alertify.error('No selection. Use a selection tool first.');
+ return;
+ }
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer');
+ return;
+ }
+
+ var settings = {
+ title: 'Greyscale Selection',
+ preview: true,
+ params: [
+ {
+ name: "method",
+ title: "Method:",
+ values: ["Luminosity", "Average", "Lightness"],
+ value: "Luminosity"
+ },
+ {name: "invert", title: "Invert:", value: false},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ var img = canvas_preview.getImageData(0, 0, w, h);
+ var data = _this.apply_greyscale_selection(img, params);
+ canvas_preview.putImageData(data, 0, 0);
+ },
+ on_finish: function (params) {
+ _this.save_greyscale_selection(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ apply_greyscale_selection(imageData, params) {
+ if (!this.hasSelection()) return imageData;
+
+ var data = imageData.data;
+ var width = imageData.width;
+ var height = imageData.height;
+ var method = params.method || "Luminosity";
+ var invert = params.invert || false;
+
+ var maskCanvas = window.smartSelectMask.canvas;
+ var scaledMask = document.createElement('canvas');
+ scaledMask.width = width;
+ scaledMask.height = height;
+ var scaledCtx = scaledMask.getContext('2d');
+ scaledCtx.drawImage(maskCanvas, 0, 0, width, height);
+ var maskData = scaledCtx.getImageData(0, 0, width, height).data;
+
+ for (var i = 0; i < data.length; i += 4) {
+ var maskValue = maskData[i] / 255;
+
+ if (maskValue > 0.5) {
+ var r = data[i];
+ var g = data[i + 1];
+ var b = data[i + 2];
+ var grey;
+
+ switch (method) {
+ case "Luminosity":
+ grey = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ break;
+ case "Average":
+ grey = (r + g + b) / 3;
+ break;
+ case "Lightness":
+ grey = (Math.max(r, g, b) + Math.min(r, g, b)) / 2;
+ break;
+ default:
+ grey = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+ }
+
+ if (invert) {
+ grey = 255 - grey;
+ }
+
+ grey = Math.max(0, Math.min(255, Math.round(grey)));
+
+ data[i] = grey;
+ data[i + 1] = grey;
+ data[i + 2] = grey;
+ }
+ }
+
+ return imageData;
+ }
+
+ save_greyscale_selection(params) {
+ var canvas = this.Base_layers.convert_layer_to_canvas(null, true);
+ var ctx = canvas.getContext("2d");
+
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var data = this.apply_greyscale_selection(img, params);
+ ctx.putImageData(data, 0, 0);
+
+ return app.State.do_action(
+ new app.Actions.Update_layer_image_action(canvas)
+ );
+ }
+}
+
+export default Image_selection_effects_class;
diff --git a/paintplus/frontend/src/js/modules/image/size.js b/paintplus/frontend/src/js/modules/image/size.js
new file mode 100644
index 0000000..f942250
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/size.js
@@ -0,0 +1,243 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_gui_class from './../../core/base-gui.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import Tools_settings_class from './../tools/settings.js';
+import Helper_class from './../../libs/helpers.js';
+import Pica from './../../../../node_modules/pica/dist/pica.js';
+
+// Common print sizes at 300 DPI: [width_px, height_px, display_label]
+const PRINT_SIZES = [
+ [1500, 2100, '5x7" Portrait'],
+ [2100, 1500, '5x7" Landscape'],
+ [2400, 3000, '8x10" Portrait'],
+ [3000, 2400, '8x10" Landscape'],
+ [3300, 4200, '11x14" Portrait'],
+ [4200, 3300, '11x14" Landscape'],
+ [3600, 4800, '18x24" Portrait 200dpi'],
+ [4800, 3600, '18x24" Landscape 200dpi'],
+ [5400, 7200, '18x24" Portrait 300dpi'],
+ [7200, 5400, '18x24" Landscape 300dpi'],
+];
+
+class Image_size_class {
+
+ constructor() {
+ this.Base_gui = new Base_gui_class();
+ this.Base_layers = new Base_layers_class();
+ this.POP = new Dialog_class();
+ this.Tools_settings = new Tools_settings_class();
+ this.Helper = new Helper_class();
+ this.pica = Pica();
+ this._lastUnits = 'pixels';
+ }
+
+ size() {
+ var _this = this;
+ var common_dimensions = this.Base_gui.common_dimensions;
+ var global_units = this.Tools_settings.get_setting('default_units');
+ var resolution = this.Tools_settings.get_setting('resolution');
+ var enable_autoresize = this.Tools_settings.get_setting('enable_autoresize');
+
+ var displayUnits = (global_units === 'inches') ? 'inches' : 'pixels';
+ this._lastUnits = displayUnits;
+
+ var resolutions = ['Custom'];
+ for (var i in common_dimensions) {
+ var value = common_dimensions[i];
+ resolutions.push(value[0] + 'x' + value[1] + ' - ' + value[2]);
+ }
+ // Print size presets — WxH format is parsed by existing resolution logic
+ for (var ps of PRINT_SIZES) {
+ resolutions.push(ps[0] + 'x' + ps[1] + ' - ' + ps[2] + ' Print');
+ }
+
+ var width = this.Helper.get_user_unit(config.WIDTH, displayUnits, resolution);
+ var height = this.Helper.get_user_unit(config.HEIGHT, displayUnits, resolution);
+
+ var settings = {
+ title: 'Canvas Size',
+ params: [
+ {name: "units", title: "Units:", value: displayUnits, values: ["pixels", "inches"]},
+ {name: "w", title: "Width:", value: width, placeholder: width, comment: displayUnits},
+ {name: "h", title: "Height:", value: height, placeholder: height, comment: displayUnits},
+ {name: "resolution", title: "Resolution:", values: resolutions},
+ {name: "layout", title: "Layout:", value: "Custom", values: ["Custom", "Landscape", "Portrait"]},
+ {name: "enable_autoresize", title: "Enable autoresize:", value: enable_autoresize},
+ {name: "in_proportion", title: "In proportion:", value: false},
+ {name: "resize_image", title: "Resize & crop image:", value: false},
+ ],
+ on_change: function(params) {
+ _this.units_change_handler(params);
+ },
+ on_finish: function (params) {
+ _this.size_handler(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ units_change_handler(params) {
+ var units = params.units;
+ if (units === this._lastUnits) return;
+
+ this._lastUnits = units;
+ var resolution = this.Tools_settings.get_setting('resolution');
+
+ // Persist so Resize and other dialogs open with the same units
+ const unitShort = {pixels: 'px', inches: '"', centimeters: 'cm', millimetres: 'mm'};
+ this.Tools_settings.save_setting('default_units', units);
+ this.Tools_settings.save_setting('default_units_short', unitShort[units] || units);
+
+ var newWidth = this.Helper.get_user_unit(config.WIDTH, units, resolution);
+ var newHeight = this.Helper.get_user_unit(config.HEIGHT, units, resolution);
+
+ var wInput = document.getElementById('pop_data_w');
+ var hInput = document.getElementById('pop_data_h');
+ if (wInput) wInput.value = newWidth;
+ if (hInput) hInput.value = newHeight;
+
+ // Update the unit label shown next to each field
+ var wComment = wInput ? wInput.nextElementSibling : null;
+ var hComment = hInput ? hInput.nextElementSibling : null;
+ if (wComment && wComment.classList.contains('field_comment')) wComment.textContent = units;
+ if (hComment && hComment.classList.contains('field_comment')) hComment.textContent = units;
+ }
+
+ async size_handler(data) {
+ var width = parseFloat(data.w);
+ var height = parseFloat(data.h);
+ var canvasRatio = config.WIDTH / config.HEIGHT;
+ var units = data.units || this.Tools_settings.get_setting('default_units');
+ var resolution = this.Tools_settings.get_setting('resolution');
+
+ if (width < 0) width = 1;
+ if (height < 0) height = 1;
+
+ this.Tools_settings.save_setting('enable_autoresize', data.enable_autoresize);
+
+ if (isNaN(width) && isNaN(height)) {
+ alertify.error('Wrong dimensions');
+ return;
+ }
+ if (isNaN(width)) width = height * canvasRatio;
+ if (isNaN(height)) height = width / canvasRatio;
+
+ if (data.resolution != 'Custom') {
+ var dim = data.resolution.split(" ");
+ dim = dim[0].split("x");
+ width = parseInt(dim[0]);
+ height = parseInt(dim[1]);
+
+ // Don't apply layout swap for print presets (orientation is already encoded)
+ if (data.layout == 'Portrait' && !data.resolution.includes('Print')) {
+ var tmp = width;
+ width = height;
+ height = tmp;
+ }
+ } else {
+ width = this.Helper.get_internal_unit(width, units, resolution);
+ height = this.Helper.get_internal_unit(height, units, resolution);
+ }
+
+ width = parseInt(width);
+ height = parseInt(height);
+
+ var actions = [
+ new app.Actions.Prepare_canvas_action('undo'),
+ new app.Actions.Update_config_action({
+ WIDTH: width,
+ HEIGHT: height
+ }),
+ ];
+
+ // Proportional layer repositioning (only when not doing full resize+crop)
+ if (data.in_proportion == true && data.resize_image != true) {
+ var width_ratio = config.WIDTH / width;
+ var height_ratio = config.HEIGHT / height;
+ var maxRatio = Math.max(width_ratio, height_ratio);
+
+ for (var i in config.layers) {
+ var layer = config.layers[i];
+ if (layer.x != null && layer.y != null) {
+ actions.push(new app.Actions.Update_layer_action(layer.id, {
+ x: Math.round(layer.x / width_ratio),
+ y: Math.round(layer.y / height_ratio),
+ }));
+ }
+ if (layer.width != null && layer.height != null) {
+ actions.push(new app.Actions.Update_layer_action(layer.id, {
+ width: Math.round(layer.width / maxRatio),
+ height: Math.round(layer.height / maxRatio),
+ }));
+ }
+ }
+ }
+
+ // Resize & center-crop image layers to fill the new canvas
+ if (data.resize_image == true) {
+ try {
+ var cropActions = await this.get_resize_crop_actions(width, height);
+ actions = actions.concat(cropActions);
+ } catch (error) {
+ alertify.error('Could not resize image: ' + error.message);
+ }
+ }
+
+ actions.push(new app.Actions.Prepare_canvas_action('do'));
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('set_image_size', 'Set Image Size', actions)
+ );
+ }
+
+ /**
+ * Generates actions to scale-and-center-crop all image layers to fill targetWidth × targetHeight.
+ * Uses "cover" scaling: the image is scaled so it fills the target, then cropped from the center.
+ */
+ async get_resize_crop_actions(targetWidth, targetHeight) {
+ var actions = [];
+ var srcWidth = config.WIDTH;
+ var srcHeight = config.HEIGHT;
+
+ var scale = Math.max(targetWidth / srcWidth, targetHeight / srcHeight);
+ var scaledW = Math.round(srcWidth * scale);
+ var scaledH = Math.round(srcHeight * scale);
+ var cropX = Math.round((scaledW - targetWidth) / 2);
+ var cropY = Math.round((scaledH - targetHeight) / 2);
+
+ for (var i in config.layers) {
+ var layer = config.layers[i];
+ if (layer.type !== 'image') continue;
+ if (layer.width == null || layer.height == null) continue;
+
+ var canvas = this.Base_layers.convert_layer_to_canvas(layer.id, true, false);
+ var newLayerW = Math.round(layer.width * scale);
+ var newLayerH = Math.round(layer.height * scale);
+
+ var tmp = document.createElement('canvas');
+ tmp.width = newLayerW;
+ tmp.height = newLayerH;
+ await this.pica.resize(canvas, tmp, {alpha: true});
+
+ var newX = Math.round(layer.x * scale) - cropX;
+ var newY = Math.round(layer.y * scale) - cropY;
+
+ actions.push(new app.Actions.Update_layer_image_action(tmp, layer.id));
+ actions.push(new app.Actions.Update_layer_action(layer.id, {
+ x: newX,
+ y: newY,
+ width: newLayerW,
+ height: newLayerH,
+ width_original: newLayerW,
+ height_original: newLayerH,
+ }));
+ }
+
+ return actions;
+ }
+}
+
+export default Image_size_class;
diff --git a/paintplus/frontend/src/js/modules/image/translate.js b/paintplus/frontend/src/js/modules/image/translate.js
new file mode 100644
index 0000000..4db6bf4
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/translate.js
@@ -0,0 +1,47 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Tools_settings_class from './../tools/settings.js';
+import Helper_class from './../../libs/helpers.js';
+
+class Image_translate_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Tools_settings = new Tools_settings_class();
+ this.Helper = new Helper_class();
+ }
+
+ translate() {
+ var _this = this;
+ var units = this.Tools_settings.get_setting('default_units');
+ var resolution = this.Tools_settings.get_setting('resolution');
+
+ var pos_x = this.Helper.get_user_unit(config.layer.x, units, resolution);
+ var pos_y = this.Helper.get_user_unit(config.layer.y, units, resolution);
+
+ var settings = {
+ title: 'Translate',
+ params: [
+ {name: "x", title: "X position:", value: pos_x},
+ {name: "y", title: "Y position:", value: pos_y},
+ ],
+ on_finish: function (params) {
+ var pos_x = _this.Helper.get_internal_unit(params.x, units, resolution);
+ var pos_y = _this.Helper.get_internal_unit(params.y, units, resolution);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('translate_layer', 'Translate Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: pos_x,
+ y: pos_y,
+ })
+ ])
+ );
+ },
+ };
+ this.POP.show(settings);
+ }
+}
+
+export default Image_translate_class;
diff --git a/paintplus/frontend/src/js/modules/image/trim.js b/paintplus/frontend/src/js/modules/image/trim.js
new file mode 100644
index 0000000..23f6113
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/trim.js
@@ -0,0 +1,305 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_gui_class from './../../core/base-gui.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Image_trim_class {
+
+ constructor() {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.Base_gui = new Base_gui_class();
+ this.Helper = new Helper_class();
+ this.Dialog = new Dialog_class();
+
+ this.set_events();
+ }
+
+ set_events() {
+ document.addEventListener('keydown', (event) => {
+ var code = event.keyCode;
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == 84) {
+ //trim
+ this.trim();
+ event.preventDefault();
+ }
+ }, false);
+ }
+
+ trim() {
+ var _this = this;
+ var removeWhiteColor = false;
+ if(config.TRANSPARENCY == false)
+ removeWhiteColor = true;
+
+ var settings = {
+ title: 'Trim',
+ params: [
+ {name: "trim_layer", title: "Trim layer:", value: true},
+ {name: "trim_all", title: "Trim borders:", value: true},
+ {name: "power", title: "Power:", value: 0, max: 255},
+ {name: "remove_white", title: "Trim white color?", value: removeWhiteColor},
+ ],
+ on_finish: async (params) => {
+ if (params.trim_layer == true) {
+ //first trim
+ let actions = [];
+ actions = actions.concat(this.trim_layer(config.layer.id, params.remove_white, params.power));
+ await app.State.do_action(
+ new app.Actions.Bundle_action('trim_layers', 'Trim Layers', actions)
+ );
+ }
+ if (params.trim_all == true) {
+ //second trim
+ let actions = [];
+ actions = actions.concat(_this.trim_all(params.remove_white, params.power));
+ app.State.do_action(
+ new app.Actions.Bundle_action('trim_layers', 'Trim Layers', actions)
+ );
+ }
+ },
+ };
+ this.Dialog.show(settings);
+ }
+
+ /**
+ * removes empty (white/transparent) area from top, right, bottom and left sides
+ * This affects layer data
+ *
+ * @param layer_id
+ * @param removeWhiteColor
+ * @param {int} power
+ */
+ trim_layer(layer_id, removeWhiteColor = false, power = 0) {
+ var layer = this.Base_layers.get_layer(layer_id);
+
+ if (layer.type != 'image') {
+ alertify.error('Skip - layer must be image.');
+ return false;
+ }
+
+ var trim = this.get_trim_info(layer_id, removeWhiteColor, power);
+ trim = trim.relative;
+
+ //if image was stretched
+ var width_ratio = (layer.width / layer.width_original);
+ var height_ratio = (layer.height / layer.height_original);
+
+ //create smaller canvas
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ canvas.width = trim.width / width_ratio;
+ canvas.height = trim.height / height_ratio;
+
+ //cut required part
+ ctx.translate(-trim.left / width_ratio, -trim.top / height_ratio);
+ canvas.getContext("2d").drawImage(layer.link, 0, 0);
+ ctx.translate(0, 0);
+
+ return [
+ new app.Actions.Update_layer_image_action(canvas, layer.id),
+ new app.Actions.Update_layer_action(layer.id, {
+ x: layer.x + trim.left,
+ y: layer.y + trim.top,
+ width: Math.ceil(canvas.width * width_ratio),
+ height: Math.ceil(canvas.height * height_ratio),
+ width_original: canvas.width,
+ height_original: canvas.height
+ })
+ ];
+ }
+
+ /**
+ * change canvas size, so there is no empty (white/transparent) areas on top, right, bottom and left sides
+ * this affect canvas size and all layers positions
+ *
+ * @param removeWhiteColor
+ * @param {int} power
+ */
+ trim_all(removeWhiteColor = false, power = 0) {
+ let actions = [];
+
+ var all_top = config.HEIGHT;
+ var all_left = config.WIDTH;
+ var all_bottom = config.HEIGHT;
+ var all_right = config.WIDTH;
+
+ if (removeWhiteColor == undefined) {
+ removeWhiteColor = false;
+ if (config.TRANSPARENCY == false) {
+ removeWhiteColor = true;
+ }
+ }
+
+ //collect info
+ for (let i = 0; i < config.layers.length; i++) {
+ let layer = config.layers[i];
+
+ if (layer.width == null || layer.height == null || layer.x == null || layer.y == null) {
+ //layer without dimensions
+ const trim_info = this.get_trim_info(layer.id, removeWhiteColor, power);
+
+ all_top = Math.min(all_top, trim_info.top);
+ all_left = Math.min(all_left, trim_info.left);
+ all_bottom = Math.min(all_bottom, trim_info.bottom);
+ all_right = Math.min(all_right, trim_info.right);
+ }
+ else{
+ all_top = Math.min(all_top, layer.y);
+ all_left = Math.min(all_left, layer.x);
+ all_bottom = Math.min(all_bottom, config.HEIGHT - layer.height - layer.y);
+ all_right = Math.min(all_right, config.WIDTH - layer.width - layer.x);
+ }
+ }
+
+ //move every layer
+ for (let i = 0; i < config.layers.length; i++) {
+ let layer = config.layers[i];
+ if (layer.x == null || layer.y == null || layer.type == null)
+ continue;
+
+ actions.push(
+ new app.Actions.Update_layer_action(layer.id, {
+ x: layer.x - all_left,
+ y: layer.y - all_top
+ })
+ );
+ }
+
+ //resize
+ actions.push(
+ new app.Actions.Prepare_canvas_action('undo'),
+ new app.Actions.Update_config_action({
+ WIDTH: Math.max(1, config.WIDTH - all_left - all_right),
+ HEIGHT: Math.max(1, config.HEIGHT - all_top - all_bottom)
+ }),
+ new app.Actions.Prepare_canvas_action('do')
+ );
+ return actions;
+ }
+
+ /**
+ * get painted area coords
+ *
+ * @param {int} layer_id
+ * @param {boolean} trim_white
+ * @param {int} power
+ * @returns {object} keys: top, left, bottom, right, width, height, relative
+ */
+ get_trim_info(layer_id, trim_white, power) {
+ if (trim_white == undefined) {
+ trim_white = false;
+ if (config.TRANSPARENCY == false) {
+ trim_white = true;
+ }
+ }
+ if (power == undefined) {
+ power = 0;
+ }
+ var layer = this.Base_layers.get_layer(layer_id);
+
+ var canvas = this.Base_layers.convert_layer_to_canvas(layer_id, null, false);
+ var ctx = canvas.getContext("2d");
+ var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var imgData = img.data;
+
+ var top = 0;
+ var left = 0;
+ var bottom = 0;
+ var right = 0;
+
+ //check top
+ main1:
+ for (var y = 0; y < img.height; y++) {
+ for (var x = 0; x < img.width; x++) {
+ var k = ((y * (img.width * 4)) + (x * 4));
+ if (imgData[k + 3] <= power)
+ continue; //transparent
+ if (trim_white == true && imgData[k] >= 255 - power && imgData[k + 1] >= 255 - power
+ && imgData[k + 2] >= 255 - power)
+ continue; //white
+ break main1;
+ }
+ top++;
+ }
+ //check left
+ main2:
+ for (var x = 0; x < img.width; x++) {
+ for (var y = 0; y < img.height; y++) {
+ var k = ((y * (img.width * 4)) + (x * 4));
+ if (imgData[k + 3] <= power)
+ continue; //transparent
+ if (trim_white == true && imgData[k] >= 255 - power && imgData[k + 1] >= 255 - power
+ && imgData[k + 2] >= 255 - power)
+ continue; //white
+ break main2;
+ }
+ left++;
+ }
+ //check bottom
+ main3:
+ for (var y = img.height - 1; y >= 0; y--) {
+ for (var x = img.width - 1; x >= 0; x--) {
+ var k = ((y * (img.width * 4)) + (x * 4));
+ if (imgData[k + 3] <= power)
+ continue; //transparent
+ if (trim_white == true && imgData[k] >= 255 - power && imgData[k + 1] >= 255 - power
+ && imgData[k + 2] >= 255 - power)
+ continue; //white
+ break main3;
+ }
+ bottom++;
+ }
+ //check right
+ main4:
+ for (var x = img.width - 1; x >= 0; x--) {
+ for (var y = img.height - 1; y >= 0; y--) {
+ var k = ((y * (img.width * 4)) + (x * 4));
+ if (imgData[k + 3] <= power)
+ continue; //transparent
+ if (trim_white == true && imgData[k] >= 255 - power && imgData[k + 1] >= 255 - power
+ && imgData[k + 2] >= 255 - power)
+ continue; //white
+ break main4;
+ }
+ right++;
+ }
+
+ var top_rel = top - layer.y;
+ var left_rel = left - layer.x;
+ var bottom_rel = bottom - (config.HEIGHT - layer.y - layer.height);
+ var right_rel = right - (config.WIDTH - layer.x - layer.width);
+
+ return {
+ top: top,
+ left: left,
+ bottom: bottom,
+ right: right,
+ width: canvas.width - left - right,
+ height: canvas.height - top - bottom,
+ relative: {
+ top: top_rel,
+ left: left_rel,
+ bottom: bottom_rel,
+ right: right_rel,
+ width: canvas.width - left - right,
+ height: canvas.height - top - bottom,
+ },
+ };
+ }
+}
+
+export default Image_trim_class;
diff --git a/paintplus/frontend/src/js/modules/image/upscale.js b/paintplus/frontend/src/js/modules/image/upscale.js
new file mode 100644
index 0000000..9947a1f
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/image/upscale.js
@@ -0,0 +1,306 @@
+/**
+ * Upscale — increase image resolution.
+ * Fetches available methods from /api/print/upscale/available on first open.
+ * Auto-selects the recommended method; user can override.
+ * If no AI upscaler is found, polls /api/print/upscale/install-status while
+ * the backend auto-installs Real-ESRGAN NCNN Vulkan, then refreshes and continues.
+ *
+ * Menu target: image/upscale.upscale
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import { showProgress, updateProgress, hideProgress } from './../../libs/progress_overlay.js';
+
+var instance = null;
+
+const METHOD_LABELS = {
+ auto: 'Auto (best available)',
+ realesrgan_pytorch: 'Real-ESRGAN — PyTorch',
+ realesrgan_ncnn: 'Real-ESRGAN — NCNN Vulkan',
+ lanczos: 'Lanczos (fast, no AI)',
+};
+
+class Image_upscale_class {
+
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this.Base_layers = new Base_layers_class();
+ this.Dialog = new Dialog_class();
+ this.isProcessing = false;
+ this._caps = null;
+ }
+
+ async upscale() {
+ if (!config.layer || config.layer.type !== 'image') {
+ alertify.error('Select an image layer first.');
+ return;
+ }
+
+ // If a previous caps fetch showed no AI upscaler, check install progress
+ var caps = await this._fetchCaps();
+ if (!caps.realesrgan_pytorch && !caps.realesrgan_ncnn) {
+ await this._waitForInstall(caps);
+ // Re-fetch caps after install
+ this._caps = null;
+ caps = await this._fetchCaps();
+ }
+
+ this._showDialog(caps);
+ }
+
+ _showDialog(caps) {
+ var W = config.layer.width_original;
+ var H = config.layer.height_original;
+
+ var available = ['auto', ...caps.methods];
+ var methodValues = [...new Set(available)];
+
+ var methodLabels = methodValues.map(m => {
+ var label = METHOD_LABELS[m] || m;
+ if (m === 'auto') {
+ label = `Auto → ${caps.recommended_label}`;
+ } else if (m === caps.recommended && m !== 'auto') {
+ label += ' ★';
+ }
+ return label;
+ });
+
+ var deviceNote = '';
+ if (caps.realesrgan_pytorch) {
+ var dev = caps.realesrgan_pytorch_device;
+ var devLabel = dev === 'cuda' ? 'CUDA GPU'
+ : dev === 'mps' ? 'Apple Silicon'
+ : 'CPU (slow — ~1–3 min for large images)';
+ deviceNote += `PyTorch: ${devLabel}. `;
+ }
+ if (caps.realesrgan_ncnn) {
+ deviceNote += 'NCNN Vulkan binary found. ';
+ }
+ if (!caps.realesrgan_pytorch && !caps.realesrgan_ncnn) {
+ var installState = (caps.ncnn_install_status || {}).state;
+ if (installState === 'skipped') {
+ deviceNote = 'Headless server — no Vulkan GPU. Lanczos only. '
+ + 'Install Real-ESRGAN PyTorch for AI quality on CPU.';
+ } else {
+ deviceNote = 'No AI upscaler available — Lanczos only.';
+ }
+ }
+
+ var _this = this;
+
+ this.Dialog.show({
+ title: 'Upscale Image',
+ params: [
+ {
+ title: '',
+ html: `
+ Current: ${W}×${H}px
`,
+ },
+ {
+ name: 'scale',
+ title: 'Scale factor:',
+ value: '2×',
+ values: ['1.5×', '2×', '3×', '4×'],
+ type: 'select',
+ },
+ {
+ name: 'method',
+ title: 'Method:',
+ value: methodLabels[0],
+ values: methodLabels,
+ type: 'select',
+ },
+ {
+ name: 'new_layer',
+ title: 'Result as new layer (keep original):',
+ value: false,
+ },
+ ],
+ on_finish: async function (params) {
+ var labelIdx = methodLabels.indexOf(params.method);
+ var methodKey = labelIdx >= 0 ? methodValues[labelIdx] : 'auto';
+ var scale = parseFloat(params.scale);
+ await _this._run(scale, methodKey, params.new_layer);
+ },
+ });
+ }
+
+ /**
+ * Poll install-status until done/failed/skipped, showing a progress bar.
+ * On headless machines the server sets state=skipped immediately — no wait.
+ */
+ async _waitForInstall(caps) {
+ var installStatus = caps.ncnn_install_status || {};
+ var terminalStates = ['done', 'failed', 'skipped'];
+ if (terminalStates.includes(installStatus.state)) {
+ if (installStatus.state === 'skipped') {
+ // Headless — just proceed, dialog will show Lanczos or PyTorch CPU
+ alertify.message(installStatus.message || 'No Vulkan GPU — using CPU upscaler.', 4);
+ }
+ return;
+ }
+
+ return new Promise((resolve) => {
+ alertify.message(
+ `Installing Real-ESRGAN AI upscaler…
+
+
0% │ `;
+ return `${b.label} `;
+ }).join('');
+
+ panel.innerHTML = `
+ Align:
+ ${btnHtml}
+ × `;
+
+ document.body.appendChild(panel);
+ this._panel = panel;
+
+ panel.querySelector('#align-close').addEventListener('click', () => this._removePanel());
+ panel.querySelectorAll('[data-align]').forEach(btn => {
+ btn.addEventListener('click', () => this._doAlign(btn.dataset.align));
+ });
+ }
+
+ _doAlign(op) {
+ const layer = config.layer;
+ if (!layer) { alertify.error('Select a layer first.'); return; }
+
+ const cw = config.WIDTH;
+ const ch = config.HEIGHT;
+ const lw = layer.width;
+ const lh = layer.height;
+
+ let newX = layer.x;
+ let newY = layer.y;
+
+ if (op === 'ch' || op === 'cc') newX = Math.round((cw - lw) / 2);
+ if (op === 'cv' || op === 'cc') newY = Math.round((ch - lh) / 2);
+ if (op === 'al') newX = 0;
+ if (op === 'ar') newX = cw - lw;
+ if (op === 'at') newY = 0;
+ if (op === 'ab') newY = ch - lh;
+
+ app.State.do_action(
+ new app.Actions.Update_layer_action(layer.id, { x: newX, y: newY })
+ );
+ }
+
+ _removePanel() {
+ if (this._panel) { this._panel.remove(); this._panel = null; }
+ }
+}
+
+export default Layer_align_class;
diff --git a/paintplus/frontend/src/js/modules/layer/clear.js b/paintplus/frontend/src/js/modules/layer/clear.js
new file mode 100644
index 0000000..dbc758c
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/clear.js
@@ -0,0 +1,19 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+
+class Layer_clear_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ clear() {
+ return app.State.do_action(
+ new app.Actions.Clear_layer_action(config.layer.id)
+ );
+ }
+
+}
+
+export default Layer_clear_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/layer/composition.js b/paintplus/frontend/src/js/modules/layer/composition.js
new file mode 100644
index 0000000..c031e4c
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/composition.js
@@ -0,0 +1,86 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Base_gui_class from "../../core/base-gui.js";
+
+class Layer_composition_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_gui_class = new Base_gui_class();
+ }
+
+ composition() {
+ var compositions = [
+ "-- Default --",
+ "color",
+ "color-burn",
+ "color-dodge",
+ "copy",
+ "darken",
+ "darker",
+ "destination-atop",
+ "destination-in",
+ "destination-out",
+ "destination-over",
+ "difference",
+ "exclusion",
+ "hard-light",
+ "hue",
+ "lighten",
+ "lighter",
+ "luminosity",
+ "multiply",
+ "overlay",
+ "saturation",
+ "screen",
+ "soft-light",
+ "source-atop",
+ "source-in",
+ "source-out",
+ "source-over",
+ "xor",
+ ];
+
+ var initial_composition = config.layer.composition;
+ var _this = this;
+
+ var settings = {
+ title: 'Composition',
+ //preview: true,
+ params: [
+ {name: "composition", title: "Composition:", value: config.layer.composition, values: compositions},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ //redraw preview
+ if (params.composition == '-- Default --') {
+ params.composition = 'source-over';
+ }
+ config.layer.composition = params.composition;
+ config.need_render = true;
+ _this.Base_gui_class.GUI_layers.render_layers();
+ },
+ on_finish: function (params) {
+ config.layer.composition = initial_composition;
+ if (params.composition == '-- Default --') {
+ params.composition = 'source-over';
+ }
+ app.State.do_action(
+ new app.Actions.Bundle_action('change_composition', 'Change Composition', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ composition: params.composition
+ })
+ ])
+ );
+ },
+ on_cancel: function (params) {
+ config.layer.composition = initial_composition;
+ config.need_render = true;
+ _this.Base_gui_class.GUI_layers.render_layers();
+ },
+ };
+ this.POP.show(settings);
+ }
+}
+
+export default Layer_composition_class;
diff --git a/paintplus/frontend/src/js/modules/layer/delete.js b/paintplus/frontend/src/js/modules/layer/delete.js
new file mode 100644
index 0000000..c4a444f
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/delete.js
@@ -0,0 +1,19 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+
+class Layer_delete_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ delete() {
+ app.State.do_action(
+ new app.Actions.Delete_layer_action(config.layer.id)
+ );
+ }
+
+}
+
+export default Layer_delete_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/layer/differences.js b/paintplus/frontend/src/js/modules/layer/differences.js
new file mode 100644
index 0000000..755808d
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/differences.js
@@ -0,0 +1,105 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Layer_differences_class {
+
+ constructor() {
+ this.POP = new Dialog_class();
+ this.Base_layers = new Base_layers_class();
+ }
+
+ differences() {
+ var _this = this;
+ if (this.Base_layers.find_previous(config.layer.id) == null) {
+ alertify.error('There are no layers behind.');
+ return false;
+ }
+
+ var settings = {
+ title: 'Differences',
+ preview: true,
+ params: [
+ {name: "sensitivity", title: "Sensitivity:", value: "0", range: [0, 255]},
+ ],
+ on_change: function (params, canvas_preview, w, h) {
+ _this.calc_differences(params.sensitivity, canvas_preview, w, h);
+ },
+ on_finish: function (params) {
+ _this.calc_differences(params.sensitivity);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ calc_differences(sensitivity, canvas_preview, w, h) {
+ //create tmp canvas
+ var canvas = document.createElement('canvas');
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ var ctx = canvas.getContext("2d");
+
+ //get source data
+ this.Base_layers.render_object(ctx, config.layer);
+ var imgData1 = ctx.getImageData(0, 0, config.WIDTH, config.HEIGHT).data;
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ //get target data
+ var next_layer = this.Base_layers.find_previous(config.layer.id);
+ this.Base_layers.render_object(ctx, next_layer);
+ var imgData2 = ctx.getImageData(0, 0, config.WIDTH, config.HEIGHT).data;
+
+ //prepare background
+ ctx.rect(0, 0, config.WIDTH, config.HEIGHT);
+ ctx.fillStyle = "#ffffff";
+ ctx.fill();
+
+ //generate diff
+ var img3 = ctx.getImageData(0, 0, config.WIDTH, config.HEIGHT);
+ var imgData3 = img3.data;
+ for (var xx = 0; xx < config.WIDTH; xx++) {
+ for (var yy = 0; yy < config.HEIGHT; yy++) {
+ var x = (xx + yy * config.WIDTH) * 4;
+
+ if (Math.abs(imgData1[x] - imgData2[x]) > sensitivity
+ || Math.abs(imgData1[x + 1] - imgData2[x + 1]) > sensitivity
+ || Math.abs(imgData1[x + 2] - imgData2[x + 2]) > sensitivity
+ || Math.abs(imgData1[x + 3] - imgData2[x + 3]) > sensitivity) {
+ imgData3[x] = 255;
+ imgData3[x + 1] = 0;
+ imgData3[x + 2] = 0;
+ imgData3[x + 3] = 255;
+ }
+ }
+ }
+ ctx.putImageData(img3, 0, 0);
+
+ //show
+ if (canvas_preview == undefined) {
+ //main
+ var params = [];
+ params.type = 'image';
+ params.name = 'Differences';
+ params.data = canvas.toDataURL("image/png");
+ app.State.do_action(
+ new app.Actions.Insert_layer_action(params)
+ );
+ }
+ else {
+ //preview
+ canvas_preview.save();
+ canvas_preview.scale(w / config.WIDTH, h / config.HEIGHT);
+ canvas_preview.drawImage(canvas, 0, 0);
+ canvas_preview.restore();
+ }
+
+ canvas.width = 1;
+ canvas.height = 1;
+ }
+
+}
+
+export default Layer_differences_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/layer/duplicate.js b/paintplus/frontend/src/js/modules/layer/duplicate.js
new file mode 100644
index 0000000..59876b1
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/duplicate.js
@@ -0,0 +1,78 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Helper_class from './../../libs/helpers.js';
+
+var instance = null;
+
+class Layer_duplicate_class {
+
+ constructor() {
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+
+ this.set_events();
+ }
+
+ set_events() {
+ document.addEventListener('keydown', (event) => {
+ var code = event.keyCode;
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == 68) {
+ //D - duplicate
+ this.duplicate();
+ event.preventDefault();
+ }
+ }, false);
+ }
+
+ duplicate() {
+ var params = JSON.parse(JSON.stringify(config.layer));
+ delete params.id;
+ delete params.order;
+
+ //generate name
+ var name_number = params.name.match(/^(.*) #([0-9]+)$/);
+ if(name_number == null){
+ //first duplicate
+ params.name = params.name + " #2";
+ }
+ else{
+ //nth duplicate - name like "query #17"
+ params.name = name_number[1] + " #" + (parseInt(name_number[2]) + 1)
+ }
+
+ if(params.x != 0 || params.y != 0 || params.width != config.WIDTH || params.height != config.HEIGHT){
+ params.x += 10;
+ params.y += 10;
+ }
+
+ for (var i in params) {
+ //remove private attributes
+ if (i[0] == '_')
+ delete params[i];
+ }
+
+ if (params.type == 'image') {
+ //image
+ params.link = config.layer.link.cloneNode(true);
+ }
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('duplicate_layer', 'Duplicate Layer', [
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+ }
+
+}
+
+export default Layer_duplicate_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/layer/flatten.js b/paintplus/frontend/src/js/modules/layer/flatten.js
new file mode 100644
index 0000000..cf148f3
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/flatten.js
@@ -0,0 +1,56 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Layer_flatten_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ flatten() {
+ //create tmp canvas
+ var canvas = document.createElement('canvas');
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ var ctx = canvas.getContext("2d");
+
+ var layers_sorted = this.Base_layers.get_sorted_layers();
+
+ //paint layers
+ for (var i = layers_sorted.length - 1; i >= 0; i--) {
+ var layer = layers_sorted[i];
+
+ ctx.globalAlpha = layer.opacity / 100;
+ ctx.globalCompositeOperation = layer.composition;
+
+ this.Base_layers.render_object(ctx, layer);
+ }
+
+ //create requested layer
+ var params = [];
+ params.type = 'image';
+ params.name = 'Merged';
+ params.data = canvas.toDataURL("image/png");
+
+ //remove rest of layers
+ let delete_actions = [];
+ for (var i = config.layers.length - 1; i >= 0; i--) {
+ delete_actions.push(new app.Actions.Delete_layer_action(config.layers[i].id));
+ }
+ // Run actions
+ app.State.do_action(
+ new app.Actions.Bundle_action('flatten_image', 'Flatten Image', [
+ new app.Actions.Insert_layer_action(params),
+ ...delete_actions
+ ])
+ );
+
+ canvas.width = 1;
+ canvas.height = 1;
+ }
+
+}
+
+export default Layer_flatten_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/layer/merge.js b/paintplus/frontend/src/js/modules/layer/merge.js
new file mode 100644
index 0000000..82f093e
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/merge.js
@@ -0,0 +1,59 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import Base_layers_class from './../../core/base-layers.js';
+
+class Layer_merge_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ merge() {
+ if (this.Base_layers.find_previous(config.layer.id) == null) {
+ alertify.error('There are no layers behind.');
+ return false;
+ }
+
+ //create tmp canvas
+ var canvas = document.createElement('canvas');
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ var ctx = canvas.getContext("2d");
+
+ //first layer
+ var previous_layer = this.Base_layers.find_previous(config.layer.id);
+ var previous_id = previous_layer.id;
+ ctx.globalAlpha = previous_layer.opacity / 100;
+ ctx.globalCompositeOperation = previous_layer.composition;
+ this.Base_layers.render_object(ctx, previous_layer);
+
+ //second layer
+ var current_id = config.layer.id;
+ var current_order = config.layer.order;
+ ctx.globalAlpha = config.layer.opacity / 100;
+ ctx.globalCompositeOperation = config.layer.composition;
+ this.Base_layers.render_object(ctx, config.layer);
+
+ //create requested layer
+ var params = [];
+ params.type = 'image';
+ params.name = config.layer.name + ' + merged';
+ params.order = current_order;
+ params.data = canvas.toDataURL("image/png");
+ app.State.do_action(
+ new app.Actions.Bundle_action('merge_layers', 'Merge Layers', [
+ new app.Actions.Insert_layer_action(params),
+ new app.Actions.Delete_layer_action(current_id),
+ new app.Actions.Delete_layer_action(previous_id)
+ ])
+ );
+
+ //free canvas data
+ canvas.width = 1;
+ canvas.height = 1;
+ }
+
+}
+
+export default Layer_merge_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/layer/move.js b/paintplus/frontend/src/js/modules/layer/move.js
new file mode 100644
index 0000000..f27e3a0
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/move.js
@@ -0,0 +1,24 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+
+class Layer_move_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ up() {
+ app.State.do_action(
+ new app.Actions.Reorder_layer_action(config.layer.id, 1)
+ );
+ }
+
+ down() {
+ app.State.do_action(
+ new app.Actions.Reorder_layer_action(config.layer.id, -1)
+ );
+ }
+}
+
+export default Layer_move_class;
diff --git a/paintplus/frontend/src/js/modules/layer/new.js b/paintplus/frontend/src/js/modules/layer/new.js
new file mode 100644
index 0000000..54f0207
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/new.js
@@ -0,0 +1,97 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import GUI_tools_class from './../../core/gui/gui-tools.js';
+import Base_selection_class from './../../core/base-selection.js';
+import Selection_class from './../../tools/selection.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Layer_new_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ this.Selection = new Selection_class();
+ this.Base_selection = new Base_selection_class(this.Base_layers.ctx);
+ this.GUI_tools = new GUI_tools_class();
+ this.Helper = new Helper_class();
+
+ this.set_events();
+ }
+
+ set_events() {
+ document.addEventListener('keydown', (event) => {
+ var code = event.keyCode;
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == 78 && event.ctrlKey != true && event.metaKey != true) {
+ //N
+ this.new();
+ }
+ }, false);
+ }
+
+ new() {
+ app.State.do_action(
+ new app.Actions.Insert_layer_action()
+ );
+ }
+
+ new_selection() {
+ var selection = this.Base_selection.get_selection();
+ var layer = config.layer;
+
+ if (selection.width === null || config.layer.type != 'image') {
+ alertify.error('Empty selection or type not image.');
+ return;
+ }
+ if (config.TOOL.name != 'selection') {
+ alertify.error('Empty selection or type not image.');
+ return;
+ }
+
+ //if image was stretched
+ var width_ratio = (layer.width / layer.width_original);
+ var height_ratio = (layer.height / layer.height_original);
+
+ var left = selection.x - layer.x;
+ var top = selection.y - layer.y;
+
+ //adapt to origin size
+ selection.width = selection.width / width_ratio;
+ selection.height = selection.height / height_ratio;
+
+ //create new layer
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ canvas.width = Math.round(selection.width);
+ canvas.height = Math.round(selection.height);
+
+ ctx.translate(-left / width_ratio, -top / height_ratio);
+ ctx.drawImage(config.layer.link, 0, 0);
+ ctx.translate(0, 0);
+
+ //register it
+ var params = {
+ x: Math.round(selection.x),
+ y: Math.round(selection.y),
+ width: Math.round(selection.width * width_ratio),
+ height: Math.round(selection.height * height_ratio),
+ width_original: Math.round(selection.width),
+ height_original: Math.round(selection.height),
+ type: 'image',
+ data: canvas.toDataURL("image/png"),
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('new_layer', 'New Layer', [
+ new app.Actions.Insert_layer_action(params, false),
+ ...this.Selection.on_leave(),
+ new app.Actions.Activate_tool_action('select')
+ ])
+ );
+ }
+
+}
+
+export default Layer_new_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/layer/raster.js b/paintplus/frontend/src/js/modules/layer/raster.js
new file mode 100644
index 0000000..05f0ef4
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/raster.js
@@ -0,0 +1,38 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Layer_raster_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ raster() {
+ var canvas = this.Base_layers.convert_layer_to_canvas();
+ var current_layer = config.layer;
+ var current_id = current_layer.id;
+
+ //show
+ var params = {
+ type: 'image',
+ name: config.layer.name + ' + raster',
+ data: canvas.toDataURL("image/png"),
+ x: parseInt(canvas.dataset.x),
+ y: parseInt(canvas.dataset.y),
+ width: canvas.width,
+ height: canvas.height,
+ opacity: current_layer.opacity,
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('convert_to_raster', 'Convert to Raster', [
+ new app.Actions.Insert_layer_action(params, false),
+ new app.Actions.Delete_layer_action(current_id)
+ ])
+ );
+ }
+
+}
+
+export default Layer_raster_class;
diff --git a/paintplus/frontend/src/js/modules/layer/rename.js b/paintplus/frontend/src/js/modules/layer/rename.js
new file mode 100644
index 0000000..0d8f217
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/rename.js
@@ -0,0 +1,55 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+
+class Layer_rename_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ this.POP = new Dialog_class();
+ this.Helper = new Helper_class();
+ }
+
+ rename(id = null) {
+ var _this = this;
+
+ var name_ = this.Helper.escapeHtml(config.layer.name);
+
+ var settings = {
+ title: 'Rename',
+ params: [
+ {name: "name", title: "Name:", value: name_},
+ ],
+ on_load: function () {
+ document.querySelector('#pop_data_name').select();
+ },
+ on_finish: function (params) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('rename_layer', 'Rename Layer', [
+ new app.Actions.Refresh_layers_gui_action('undo'),
+ new app.Actions.Update_layer_action(id || config.layer.id, {
+ name: _this.validate_name(params.name)
+ }),
+ new app.Actions.Refresh_layers_gui_action('do')
+ ])
+ );
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ validate_name(text) {
+ text = text
+ .replace(/&/g, "-")
+ .replace(//g, "-")
+ .replace(/"/g, "-")
+ .replace(/'/g, "-");
+
+ return text;
+ }
+}
+
+export default Layer_rename_class;
diff --git a/paintplus/frontend/src/js/modules/layer/scale.js b/paintplus/frontend/src/js/modules/layer/scale.js
new file mode 100644
index 0000000..34a8b50
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/scale.js
@@ -0,0 +1,174 @@
+/**
+ * Layer Scale module - Scale individual layers (like GIMP's Scale Layer)
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+import Pica from './../../../../node_modules/pica/dist/pica.js';
+
+var instance = null;
+
+class Layer_scale_class {
+
+ constructor() {
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.POP = new Dialog_class();
+ this.Helper = new Helper_class();
+ this.pica = Pica();
+ }
+
+ scale() {
+ var _this = this;
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please convert layer to raster first (Layer > Raster)');
+ return;
+ }
+
+ var currentWidth = config.layer.width;
+ var currentHeight = config.layer.height;
+ var aspectRatio = currentWidth / currentHeight;
+
+ var settings = {
+ title: 'Scale Layer',
+ params: [
+ {name: "width", title: "Width:", value: currentWidth, placeholder: currentWidth},
+ {name: "height", title: "Height:", value: currentHeight, placeholder: currentHeight},
+ {name: "width_percent", title: "Width %:", value: 100, placeholder: 100},
+ {name: "height_percent", title: "Height %:", value: 100, placeholder: 100},
+ {name: "maintain_aspect", title: "Maintain Aspect Ratio:", value: true},
+ {name: "interpolation", title: "Interpolation:", values: ["Lanczos (Best)", "Bilinear", "Nearest"]},
+ ],
+ on_change: function(params) {
+ // Auto-adjust to maintain aspect ratio if enabled
+ if (params.maintain_aspect) {
+ var widthInput = document.getElementById("pop_data_width");
+ var heightInput = document.getElementById("pop_data_height");
+ var widthPercentInput = document.getElementById("pop_data_width_percent");
+ var heightPercentInput = document.getElementById("pop_data_height_percent");
+
+ // This is simplified - in practice you'd track which field changed
+ }
+ },
+ on_finish: function (params) {
+ _this.do_scale(params);
+ },
+ };
+ this.POP.show(settings);
+ }
+
+ async do_scale(params) {
+ var layer = config.layer;
+
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var currentWidth = layer.width;
+ var currentHeight = layer.height;
+
+ // Calculate new dimensions
+ var newWidth, newHeight;
+
+ if (params.width && params.width != currentWidth) {
+ newWidth = parseInt(params.width);
+ if (params.maintain_aspect) {
+ newHeight = Math.round(newWidth / (currentWidth / currentHeight));
+ } else {
+ newHeight = params.height ? parseInt(params.height) : currentHeight;
+ }
+ } else if (params.height && params.height != currentHeight) {
+ newHeight = parseInt(params.height);
+ if (params.maintain_aspect) {
+ newWidth = Math.round(newHeight * (currentWidth / currentHeight));
+ } else {
+ newWidth = params.width ? parseInt(params.width) : currentWidth;
+ }
+ } else if (params.width_percent && params.width_percent != 100) {
+ newWidth = Math.round(currentWidth * params.width_percent / 100);
+ if (params.maintain_aspect) {
+ newHeight = Math.round(currentHeight * params.width_percent / 100);
+ } else {
+ newHeight = Math.round(currentHeight * (params.height_percent || 100) / 100);
+ }
+ } else if (params.height_percent && params.height_percent != 100) {
+ newHeight = Math.round(currentHeight * params.height_percent / 100);
+ if (params.maintain_aspect) {
+ newWidth = Math.round(currentWidth * params.height_percent / 100);
+ } else {
+ newWidth = Math.round(currentWidth * (params.width_percent || 100) / 100);
+ }
+ } else {
+ newWidth = parseInt(params.width) || currentWidth;
+ newHeight = parseInt(params.height) || currentHeight;
+ }
+
+ if (newWidth <= 0 || newHeight <= 0) {
+ alertify.error('Invalid dimensions');
+ return;
+ }
+
+ if (newWidth === currentWidth && newHeight === currentHeight) {
+ alertify.warning('No change in size');
+ return;
+ }
+
+ // Get canvas from layer
+ var canvas = this.Base_layers.convert_layer_to_canvas(layer.id, true, false);
+ var ctx = canvas.getContext("2d");
+
+ // Create destination canvas
+ var destCanvas = document.createElement('canvas');
+ destCanvas.width = newWidth;
+ destCanvas.height = newHeight;
+ var destCtx = destCanvas.getContext('2d');
+
+ // Perform resize based on interpolation method
+ if (params.interpolation === "Lanczos (Best)") {
+ await this.pica.resize(canvas, destCanvas, { alpha: true });
+ } else if (params.interpolation === "Bilinear") {
+ destCtx.imageSmoothingEnabled = true;
+ destCtx.imageSmoothingQuality = 'high';
+ destCtx.drawImage(canvas, 0, 0, newWidth, newHeight);
+ } else {
+ // Nearest neighbor
+ destCtx.imageSmoothingEnabled = false;
+ destCtx.drawImage(canvas, 0, 0, newWidth, newHeight);
+ }
+
+ // Calculate new position (keep center in same place)
+ var centerX = layer.x + layer.width / 2;
+ var centerY = layer.y + layer.height / 2;
+ var newX = Math.round(centerX - newWidth / 2);
+ var newY = Math.round(centerY - newHeight / 2);
+
+ // Apply the changes
+ app.State.do_action(
+ new app.Actions.Bundle_action('scale_layer', 'Scale Layer', [
+ new app.Actions.Update_layer_image_action(destCanvas, layer.id),
+ new app.Actions.Update_layer_action(layer.id, {
+ x: newX,
+ y: newY,
+ width: newWidth,
+ height: newHeight,
+ width_original: newWidth,
+ height_original: newHeight
+ })
+ ])
+ );
+
+ alertify.success('Layer scaled to ' + newWidth + 'x' + newHeight);
+ }
+}
+
+export default Layer_scale_class;
diff --git a/paintplus/frontend/src/js/modules/layer/visibility.js b/paintplus/frontend/src/js/modules/layer/visibility.js
new file mode 100644
index 0000000..8e3017c
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/layer/visibility.js
@@ -0,0 +1,19 @@
+import app from './../../app.js';
+import config from './../../config.js';
+import Base_layers_class from './../../core/base-layers.js';
+
+class Layer_visibility_class {
+
+ constructor() {
+ this.Base_layers = new Base_layers_class();
+ }
+
+ toggle() {
+ app.State.do_action(
+ new app.Actions.Toggle_layer_visibility_action(config.layer.id)
+ );
+ }
+
+}
+
+export default Layer_visibility_class;
\ No newline at end of file
diff --git a/paintplus/frontend/src/js/modules/text/text_presets.js b/paintplus/frontend/src/js/modules/text/text_presets.js
new file mode 100644
index 0000000..c3c08a3
--- /dev/null
+++ b/paintplus/frontend/src/js/modules/text/text_presets.js
@@ -0,0 +1,153 @@
+/**
+ * Text Presets — insert a styled text layer with one click.
+ * Presets: Heading, Subheading, Body, Caption, Quote, Bold Label.
+ * Each preset sets font, size, weight, color, and positions on canvas center.
+ *
+ * Menu target: text/text_presets.add_preset
+ */
+
+import app from './../../app.js';
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+const PRESETS = [
+ {
+ label: 'Heading',
+ sample: 'Add a heading',
+ family: 'Montserrat', size: 72, bold: true, italic: false,
+ fill_color: '#ffffff', stroke_size: 0,
+ },
+ {
+ label: 'Subheading',
+ sample: 'Add a subheading',
+ family: 'Montserrat', size: 44, bold: false, italic: false,
+ fill_color: '#e2e8f0', stroke_size: 0,
+ },
+ {
+ label: 'Body',
+ sample: 'Add body text',
+ family: 'Lato', size: 28, bold: false, italic: false,
+ fill_color: '#cbd5e1', stroke_size: 0,
+ },
+ {
+ label: 'Caption',
+ sample: 'Add a caption',
+ family: 'Lato', size: 20, bold: false, italic: true,
+ fill_color: '#94a3b8', stroke_size: 0,
+ },
+ {
+ label: 'Quote',
+ sample: '"Add a quote"',
+ family: 'Playfair Display', size: 36, bold: false, italic: true,
+ fill_color: '#f1f5f9', stroke_size: 0,
+ },
+ {
+ label: 'Bold Label',
+ sample: 'LABEL',
+ family: 'Oswald', size: 32, bold: true, italic: false,
+ fill_color: '#ffffff', stroke_size: 2, stroke_color: '#000000',
+ },
+];
+
+class Text_presets_class {
+ constructor() {
+ if (instance) return instance;
+ instance = this;
+ this.Dialog = new Dialog_class();
+ }
+
+ add_preset() {
+ var _this = this;
+ const labels = PRESETS.map(p => p.label);
+
+ this.Dialog.show({
+ title: 'Add Text',
+ params: [
+ {
+ title: '',
+ html: `
+ ${PRESETS.map((p, i) => `
+
+ ${p.sample}
+ ${p.family} · ${p.size}px
+
`).join('')}
+
● ' + remote.provider + ' — connected '
+ : '● ' + remote.provider + ' — unreachable ')
+ : 'No remote provider configured ';
+
+ var gpuInfoHtml = gpuStatus ? _renderGpuInfo(gpuStatus) : '';
+
+ var providerValues = ['', 'openai', 'invokeai', 'comfyui', 'replicate', 'local_gpu'];
+
+ var params = [
+ {
+ title: 'Status:',
+ html: '' + statusHtml + '
',
+ },
+ ];
+
+ if (gpuInfoHtml) {
+ params.push({
+ title: '',
+ html: 'Detected GPU:
' + gpuInfoHtml + '
Per-operation overrides — blank = use default above
',
+ },
+ {
+ name: 'provider_inpaint',
+ title: 'Inpaint / Replace Selection:',
+ value: ls_get('provider_inpaint', remote.overrides?.inpaint || ''),
+ values: providerValues,
+ type: 'select',
+ },
+ {
+ name: 'provider_txt2img',
+ title: 'Text → Image:',
+ value: ls_get('provider_txt2img', remote.overrides?.txt2img || ''),
+ values: providerValues,
+ type: 'select',
+ },
+ {
+ name: 'provider_img2img',
+ title: 'Image → Image:',
+ value: ls_get('provider_img2img', remote.overrides?.img2img || ''),
+ values: providerValues,
+ type: 'select',
+ },
+ {
+ name: 'provider_outpaint',
+ title: 'Expand Canvas (Outpaint):',
+ value: ls_get('provider_outpaint', remote.overrides?.outpaint || ''),
+ values: providerValues,
+ type: 'select',
+ },
+ // ── OpenAI ────────────────────────────────────────────────
+ {
+ name: 'openai_key',
+ title: 'OpenAI API key:',
+ value: ls_get('openai_key'),
+ placeholder: 'sk-...',
+ },
+ {
+ name: 'openai_model',
+ title: 'OpenAI model:',
+ value: ls_get('openai_model', 'dall-e-3'),
+ values: ['dall-e-3', 'dall-e-2'],
+ type: 'select',
+ },
+ // ── InvokeAI ──────────────────────────────────────────────
+ {
+ name: 'invokeai_url',
+ title: 'InvokeAI URL:',
+ value: ls_get('invokeai_url'),
+ placeholder: 'http://192.168.1.x:9090',
+ },
+ {
+ name: 'invokeai_model',
+ title: 'InvokeAI default model:',
+ value: ls_get('invokeai_model', 'flux-dev'),
+ placeholder: 'flux-dev',
+ },
+ // ── ComfyUI ───────────────────────────────────────────────
+ {
+ name: 'comfyui_url',
+ title: 'ComfyUI URL:',
+ value: ls_get('comfyui_url'),
+ placeholder: 'http://192.168.1.x:8188',
+ },
+ {
+ name: 'comfyui_model',
+ title: 'ComfyUI default checkpoint:',
+ value: ls_get('comfyui_model', 'v1-5-pruned-emaonly.ckpt'),
+ placeholder: 'v1-5-pruned-emaonly.ckpt',
+ },
+ // ── Replicate ─────────────────────────────────────────────
+ {
+ name: 'replicate_key',
+ title: 'Replicate API key:',
+ value: ls_get('replicate_key'),
+ placeholder: 'r8_...',
+ }
+ );
+
+ this.POP.show({
+ title: 'AI Provider Settings',
+ params: params,
+ on_finish: async function (params) {
+ await _this._save(params);
+ },
+ });
+ }
+
+ async _save(params) {
+ // Persist to localStorage
+ ls_set('provider', params.provider || '');
+ ls_set('provider_inpaint', params.provider_inpaint || '');
+ ls_set('provider_txt2img', params.provider_txt2img || '');
+ ls_set('provider_img2img', params.provider_img2img || '');
+ ls_set('provider_outpaint', params.provider_outpaint || '');
+ ls_set('openai_key', params.openai_key || '');
+ ls_set('openai_model', params.openai_model || 'dall-e-3');
+ ls_set('invokeai_url', params.invokeai_url || '');
+ ls_set('invokeai_model', params.invokeai_model || 'flux-dev');
+ ls_set('comfyui_url', params.comfyui_url || '');
+ ls_set('comfyui_model', params.comfyui_model || 'v1-5-pruned-emaonly.ckpt');
+ ls_set('replicate_key', params.replicate_key || '');
+
+ // Push to backend
+ try {
+ var payload = {
+ ai_provider: params.provider || '',
+ ai_provider_inpaint: params.provider_inpaint || '',
+ ai_provider_txt2img: params.provider_txt2img || '',
+ ai_provider_img2img: params.provider_img2img || '',
+ ai_provider_outpaint: params.provider_outpaint || '',
+ openai_api_key: params.openai_key || '',
+ openai_model: params.openai_model || 'dall-e-3',
+ invokeai_url: params.invokeai_url || '',
+ invokeai_default_model: params.invokeai_model || 'flux-dev',
+ comfyui_url: params.comfyui_url || '',
+ comfyui_default_model: params.comfyui_model || '',
+ replicate_api_key: params.replicate_key || '',
+ };
+ var base = window.API_BASE_URL || '';
+ var r = await fetch(`${base}/api/config`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(payload),
+ });
+
+ if (r.ok) {
+ alertify.success('AI provider settings saved. Testing connection...');
+ var { refreshCapabilities } = await import('./../../api/capabilities.js');
+ var caps = await refreshCapabilities();
+ if (caps?.remote?.healthy) {
+ alertify.success('Connected to ' + caps.remote.provider + '!');
+ } else if (params.provider) {
+ if (params.provider === 'local_gpu') {
+ alertify.success('local_gpu set — restart the container with docker-compose.gpu.yml to activate.');
+ } else {
+ alertify.warning('Settings saved but provider is not reachable. Check URL/key.');
+ }
+ }
+ } else {
+ alertify.warning(
+ 'Settings saved locally. To make them permanent, ' +
+ 'set these values in your .env file and restart the server.'
+ );
+ }
+ } catch {
+ alertify.warning(
+ 'Settings saved locally. Set AI_PROVIDER and related keys in .env to make permanent.'
+ );
+ }
+ }
+}
+
+function _renderGpuInfo(g) {
+ var flags = [
+ g.fp16 && 'fp16',
+ g.bf16 && 'bf16',
+ g.fp8 && 'fp8',
+ g.int8 && 'int8',
+ g.tensor_cores && 'tensor-cores',
+ g.xformers && 'xformers',
+ ].filter(Boolean).join(' · ');
+
+ var rows = Object.entries(g.recommended || {})
+ .filter(([, s]) => s)
+ .map(function([op, s]) {
+ var modelName = s.model_id.split('/').pop();
+ return '' +
+ '' + op + ' ' +
+ '' + modelName + ' ' +
+ '' + s.memory_opt + ' ' +
+ ' ';
+ })
+ .join('');
+
+ var warnHtml = (g.warnings || []).length
+ ? '' +
+ g.warnings.map(function(w) { return '⚠ ' + w; }).join('
'
+ : '';
+
+ return '' +
+ '
⬛ ' + (g.device_name || 'GPU') + '
' +
+ '
VRAM: ' + g.vram_total_gb + ' GB total · ' + g.vram_free_gb + ' GB free
' +
+ '
Compute: CC ' + g.compute_capability + ' ' +
+ (flags ? ' ' + flags + ' ' : '') + '
' +
+ '
Effective: ' + g.effective_vram_gb + ' GB ' +
+ ' Tier: ' + g.tier + '
' +
+ (rows ? '
Models selected:
' +
+ '
' : '') +
+ warnHtml +
+ '
}
+ */
+ async getConfig() {
+ try {
+ const response = await fetch(`${this.baseUrl}/api/config`);
+ if (!response.ok) return null;
+ return response.json();
+ } catch {
+ return null;
+ }
+ }
+
+ /**
+ * Fetch GPU status: hardware, feature flags, and selected models per operation.
+ * Only meaningful when AI_PROVIDER=local_gpu.
+ * @returns {Promise}
+ */
+ async getGpuStatus() {
+ try {
+ const response = await fetch(`${this.baseUrl}/api/gpu/status`);
+ if (!response.ok) return null;
+ return response.json();
+ } catch {
+ return null;
+ }
+ }
+
+ /**
+ * Health check for the backend
+ * @returns {Promise}
+ */
+ async healthCheck() {
+ try {
+ const response = await fetch(`${this.baseUrl}/health`);
+ return response.ok;
+ } catch {
+ return false;
+ }
+ }
+}
+
+// Singleton instance
+const apiService = new ApiService();
+export default apiService;
diff --git a/paintplus/frontend/src/js/tools/ai_edit.js b/paintplus/frontend/src/js/tools/ai_edit.js
new file mode 100644
index 0000000..5a5fe39
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/ai_edit.js
@@ -0,0 +1,586 @@
+/**
+ * AI Edit — unified smart selection + inpainting tool.
+ *
+ * Workflow:
+ * 1. CLICK mode (default): click any object → SAM auto-selects it (red overlay)
+ * • Alt+click → subtract from selection (deselect over-selected area)
+ * • Multiple clicks accumulate on the mask
+ * 2. BRUSH + / BRUSH − tabs: paint to add or erase from the mask by hand
+ * (refine what SAM missed or got wrong)
+ * 3. Action bar: Erase | Replace… | Upscale | Expand | Clear
+ *
+ * SAM model (~375 MB) auto-downloads on first click; progress shown inline.
+ * Falls back gracefully to brush-only if SAM is unavailable.
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_layers_class from './../core/base-layers.js';
+import Base_tools_class from './../core/base-tools.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+const BRUSH_DEFAULT = 30;
+const OVERLAY_COLOR = 'rgba(255, 55, 55, 0.50)';
+
+class Tools_ai_edit_class extends Base_tools_class {
+
+ constructor() {
+ super();
+ if (instance) return instance;
+ instance = this;
+ this.Base_layers = new Base_layers_class();
+ this.name = 'ai_edit';
+ this.title = 'AI Edit';
+ // interaction state
+ this._mode = 'sam'; // 'sam' | 'brush_add' | 'brush_sub'
+ this._painting = false;
+ this._samWorking = false;
+ this._isRunning = false;
+ this._hasMask = false;
+ // DOM elements
+ this._maskCanvas = null;
+ this._maskCtx = null;
+ this._overlayEl = null;
+ this._panel = null;
+ }
+
+ // ── Tool lifecycle ────────────────────────────────────────────────────────
+
+ load() {
+ this.default_events();
+ }
+
+ on_activate() {
+ if (!config.layer || config.layer.type !== 'image') {
+ alertify.error('Select an image layer first.');
+ return;
+ }
+ this._initMask();
+ this._mountOverlay();
+ this._mountPanel();
+ }
+
+ on_leave() {
+ this._removeOverlay();
+ this._removePanel();
+ this._painting = false;
+ }
+
+ // ── Input routing ─────────────────────────────────────────────────────────
+
+ mousedown(e) {
+ if (config.TOOL.name !== this.name) return;
+ var mouse = this.get_mouse_info(e);
+ if (!mouse.click_valid) return;
+ if (!config.layer || config.layer.type !== 'image') return;
+ if (this._mode === 'sam') {
+ this._handleSamClick(e, mouse);
+ } else {
+ this._painting = true;
+ this._brushPaint(mouse);
+ }
+ }
+
+ mousemove(e) {
+ if (config.TOOL.name !== this.name) return;
+ if (this._mode !== 'sam' && this._painting) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.is_drag) this._brushPaint(mouse);
+ }
+ }
+
+ mouseup(e) {
+ if (config.TOOL.name !== this.name) return;
+ if (this._painting) {
+ this._painting = false;
+ if (this._hasMask) this._showActions();
+ }
+ }
+
+ // ── Coordinate mapping — uses miniPaint's get_mouse_info ─────────────────
+ // get_mouse_info returns { x, y } already in canvas/layer coordinates.
+ // We still need to know the display scale to size brush strokes on the overlay.
+
+ _mouseToImage(mouse) {
+ // mouse.x/y are already in original image coords from get_mouse_info
+ const scaleX = (config.WIDTH * config.ZOOM) / config.layer.width_original;
+ const scaleY = (config.HEIGHT * config.ZOOM) / config.layer.height_original;
+ return { ix: mouse.x, iy: mouse.y, scaleX, scaleY };
+ }
+
+ // ── SAM click selection ───────────────────────────────────────────────────
+
+ async _handleSamClick(e, mouse) {
+ if (this._samWorking) return;
+ const coords = this._mouseToImage(mouse);
+
+ const label = e.altKey ? 0 : 1; // alt = exclude, normal = include
+ const x = Math.round(coords.ix);
+ const y = Math.round(coords.iy);
+
+ // Clamp to image bounds
+ const w = config.layer.width_original;
+ const h = config.layer.height_original;
+ if (x < 0 || y < 0 || x >= w || y >= h) return;
+
+ this._samWorking = true;
+ this._setSamCursor('wait');
+
+ // Collect any existing points for multi-click accumulation
+ if (!this._samPoints) this._samPoints = [];
+ if (!this._samLabels) this._samLabels = [];
+ this._samPoints.push([x, y]);
+ this._samLabels.push(label);
+
+ try {
+ const imageB64 = this._getLayerB64();
+ const base = window.API_BASE_URL || '';
+ const r = await fetch(`${base}/api/segment/point`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({
+ image: imageB64,
+ points: this._samPoints,
+ labels: this._samLabels,
+ }),
+ });
+
+ if (r.status === 503) {
+ // SAM model downloading — poll and retry
+ const data = await r.json().catch(() => ({}));
+ await this._waitForSamModel(data.detail || '');
+ // Remove the point we just added so user can retry cleanly
+ this._samPoints.pop();
+ this._samLabels.pop();
+ this._samWorking = false;
+ this._setSamCursor('crosshair');
+ return;
+ }
+
+ if (!r.ok) {
+ const err = await r.json().catch(() => ({}));
+ throw new Error(err.detail || 'SAM failed');
+ }
+
+ const data = await r.json();
+ await this._applySamMask(data.mask, label === 0);
+ this._hasMask = true;
+ this._showActions();
+
+ } catch (err) {
+ alertify.error('SAM failed: ' + (err.message || err));
+ // Pop failed point
+ this._samPoints.pop();
+ this._samLabels.pop();
+ }
+
+ this._samWorking = false;
+ this._setSamCursor('crosshair');
+ }
+
+ async _applySamMask(maskB64, isSubtract) {
+ return new Promise((resolve) => {
+ const img = new Image();
+ img.onload = () => {
+ // Draw SAM mask onto our persistent mask canvas
+ const tmp = document.createElement('canvas');
+ tmp.width = this._maskCanvas.width;
+ tmp.height = this._maskCanvas.height;
+ const tctx = tmp.getContext('2d');
+ tctx.drawImage(img, 0, 0, tmp.width, tmp.height);
+
+ if (isSubtract) {
+ // Erase mask where SAM says to subtract
+ this._maskCtx.globalCompositeOperation = 'destination-out';
+ this._maskCtx.drawImage(tmp, 0, 0);
+ this._maskCtx.globalCompositeOperation = 'source-over';
+ } else {
+ this._maskCtx.drawImage(tmp, 0, 0);
+ }
+ this._redrawOverlay();
+ resolve();
+ };
+ img.src = 'data:image/png;base64,' + maskB64;
+ });
+ }
+
+ async _waitForSamModel(detail) {
+ // SAM model is downloading — show progress bar and poll
+ return new Promise((resolve) => {
+ alertify.message(
+ `Downloading SAM model (~375 MB)…
+
+
0%
+
This happens once — click the object again when done.
+
+
Select:
+
✦ Click
+
＋ Brush
+
− Brush
+
+
Click an object to select it. Alt+click to deselect.
+
+
Then:
+
✕ Erase
+
+ ✦ Replace
+ Go →
+
+
⬆ Upscale
+
↔ Expand
+
↺ Clear
+
' +
+ 'Inpaint Mode: AI replaces the selected area with generated content.Transform Mode: Scale, shrink, or enlarge the selection without AI.Tip: To shrink something by 35%, use Transform mode with Scale at 65%.
';
+
+ var dialogContent = el.querySelector('.dialog_content');
+ if (dialogContent && dialogContent.firstChild) {
+ dialogContent.insertBefore(infoDiv, dialogContent.firstChild);
+ }
+ },
+ on_finish: async function (params) {
+ if (params.mode === 'transform') {
+ await _this.executeTransform(params);
+ } else {
+ await _this.executeInpaint(params);
+ }
+ },
+ };
+
+ this.POP.show(settings);
+ }
+
+ /**
+ * Execute transform operation (scale without AI)
+ */
+ async executeTransform(params) {
+ if (this.isProcessing) {
+ alertify.warning('Already processing... please wait');
+ return;
+ }
+
+ // Check if we have an image layer
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer');
+ return;
+ }
+
+ var maskCanvas = window.smartSelectMask?.canvas;
+ if (!maskCanvas) {
+ alertify.error('No selection mask found');
+ return;
+ }
+
+ this.isProcessing = true;
+ alertify.message('Transforming selection...');
+
+ try {
+ var layer = config.layer;
+ var scale = params.scale / 100;
+
+ // Get mask bounds
+ var maskCtx = maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+ var minX = maskCanvas.width, minY = maskCanvas.height;
+ var maxX = 0, maxY = 0;
+
+ for (var y = 0; y < maskCanvas.height; y++) {
+ for (var x = 0; x < maskCanvas.width; x++) {
+ var i = (y * maskCanvas.width + x) * 4;
+ if (imageData.data[i] > 128) {
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ if (maxX <= minX || maxY <= minY) {
+ throw new Error('Selection is too small');
+ }
+
+ var selWidth = maxX - minX + 1;
+ var selHeight = maxY - minY + 1;
+ var centerX = minX + selWidth / 2;
+ var centerY = minY + selHeight / 2;
+
+ // Extract selected pixels
+ var extractCanvas = document.createElement('canvas');
+ extractCanvas.width = layer.width_original;
+ extractCanvas.height = layer.height_original;
+ var extractCtx = extractCanvas.getContext('2d');
+ extractCtx.drawImage(layer.link, 0, 0);
+ extractCtx.globalCompositeOperation = 'destination-in';
+ extractCtx.drawImage(maskCanvas, 0, 0);
+
+ // Create result canvas
+ var resultCanvas = document.createElement('canvas');
+ resultCanvas.width = layer.width_original;
+ resultCanvas.height = layer.height_original;
+ var resultCtx = resultCanvas.getContext('2d');
+
+ // Draw original image
+ resultCtx.drawImage(layer.link, 0, 0);
+
+ // Remove original selection (create hole)
+ resultCtx.globalCompositeOperation = 'destination-out';
+ resultCtx.drawImage(maskCanvas, 0, 0);
+
+ // Calculate scaled dimensions
+ var newWidth = selWidth * scale;
+ var newHeight = selHeight * scale;
+ var newX = centerX - newWidth / 2;
+ var newY = centerY - newHeight / 2;
+
+ // Draw scaled selection back
+ resultCtx.globalCompositeOperation = 'source-over';
+
+ // Create temp canvas for just the selection
+ var selCanvas = document.createElement('canvas');
+ selCanvas.width = selWidth;
+ selCanvas.height = selHeight;
+ var selCtx = selCanvas.getContext('2d');
+ selCtx.drawImage(extractCanvas, minX, minY, selWidth, selHeight, 0, 0, selWidth, selHeight);
+
+ // Draw scaled
+ resultCtx.drawImage(selCanvas, 0, 0, selWidth, selHeight, newX, newY, newWidth, newHeight);
+
+ // Apply result
+ app.State.do_action(
+ new app.Actions.Bundle_action('transform_selection', 'Transform Selection', [
+ new app.Actions.Update_layer_image_action(resultCanvas)
+ ])
+ );
+
+ // Clear selection
+ window.smartSelectMask = null;
+ config.need_render = true;
+
+ alertify.success('Transform complete! Selection scaled to ' + params.scale + '%');
+
+ } catch (error) {
+ console.error('Transform error:', error);
+ alertify.error('Transform failed: ' + error.message);
+ } finally {
+ this.isProcessing = false;
+ }
+ }
+
+ /**
+ * Execute the inpainting operation
+ */
+ async executeInpaint(params) {
+ if (this.isProcessing) {
+ alertify.warning('Already processing... please wait');
+ return;
+ }
+
+ if (!params.prompt || params.prompt.trim() === '') {
+ alertify.error('Please enter a prompt describing what you want');
+ return;
+ }
+
+ // Check if we have an image layer
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer');
+ return;
+ }
+
+ this.isProcessing = true;
+ alertify.message('AI is generating... this may take a moment');
+
+ try {
+ // Get image data
+ var imageData = this.getLayerImageData();
+
+ // Get mask data (from Smart Select or rectangular selection)
+ var maskData = this.getMaskData();
+
+ if (!maskData) {
+ throw new Error('No valid selection/mask found');
+ }
+
+ // Call inpaint API
+ var result = await apiService.inpaint(
+ imageData,
+ maskData,
+ params.prompt,
+ {
+ negativePrompt: params.negative_prompt || '',
+ strength: params.strength / 100
+ }
+ );
+
+ // Apply result to layer
+ await this.applyResult(result.result);
+
+ alertify.success('Inpainting complete!');
+
+ } catch (error) {
+ console.error('Inpaint error:', error);
+ alertify.error('Inpainting failed: ' + error.message);
+ } finally {
+ this.isProcessing = false;
+ }
+ }
+
+ /**
+ * Get the current layer's image data as base64
+ */
+ getLayerImageData() {
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext('2d');
+
+ canvas.width = config.layer.width_original;
+ canvas.height = config.layer.height_original;
+ ctx.drawImage(config.layer.link, 0, 0);
+
+ return canvas.toDataURL('image/png').split(',')[1];
+ }
+
+ /**
+ * Get mask data - either from Smart Select or rectangular selection
+ */
+ getMaskData() {
+ // First try Smart Select mask
+ if (window.smartSelectMask && window.smartSelectMask.canvas) {
+ var maskCanvas = window.smartSelectMask.canvas;
+ return maskCanvas.toDataURL('image/png').split(',')[1];
+ }
+
+ // Fall back to rectangular selection
+ var selection = this.getRectSelection();
+ if (selection) {
+ return this.createRectMask(selection);
+ }
+
+ return null;
+ }
+
+ /**
+ * Get rectangular selection from miniPaint's selection tool
+ */
+ getRectSelection() {
+ // Try to get selection from selection tool
+ var Selection = null;
+ try {
+ var GUI_tools = app.GUI?.GUI_tools || this.Base_layers?.Base_gui?.GUI_tools;
+ if (GUI_tools && GUI_tools.tools_modules && GUI_tools.tools_modules.selection) {
+ Selection = GUI_tools.tools_modules.selection.object;
+ }
+ } catch (e) {
+ // Selection tool not available
+ }
+
+ if (Selection && Selection.selection &&
+ Selection.selection.width > 0 && Selection.selection.height > 0) {
+ return Selection.selection;
+ }
+
+ return null;
+ }
+
+ /**
+ * Create a white rectangle mask from selection coordinates
+ */
+ createRectMask(selection) {
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext('2d');
+
+ canvas.width = config.layer.width_original;
+ canvas.height = config.layer.height_original;
+
+ // Fill with black (unselected)
+ ctx.fillStyle = '#000000';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ // Calculate selection position relative to layer
+ var x = selection.x - config.layer.x;
+ var y = selection.y - config.layer.y;
+ var width = selection.width;
+ var height = selection.height;
+
+ // Scale to original image size
+ var scaleX = config.layer.width_original / config.layer.width;
+ var scaleY = config.layer.height_original / config.layer.height;
+
+ x = x * scaleX;
+ y = y * scaleY;
+ width = width * scaleX;
+ height = height * scaleY;
+
+ // Draw white rectangle (selected area)
+ ctx.fillStyle = '#FFFFFF';
+ ctx.fillRect(x, y, width, height);
+
+ return canvas.toDataURL('image/png').split(',')[1];
+ }
+
+ /**
+ * Apply the inpainted result to the current layer
+ */
+ async applyResult(resultBase64) {
+ var _this = this;
+
+ return new Promise((resolve, reject) => {
+ var img = new Image();
+ img.onload = function() {
+ // Create canvas with result
+ var canvas = document.createElement('canvas');
+ canvas.width = config.layer.width_original;
+ canvas.height = config.layer.height_original;
+ var ctx = canvas.getContext('2d');
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+ // Update layer through action system for undo support
+ app.State.do_action(
+ new app.Actions.Bundle_action('ai_inpaint', 'AI Inpaint', [
+ new app.Actions.Update_layer_image_action(canvas)
+ ])
+ );
+
+ // Clear the smart select mask
+ window.smartSelectMask = null;
+
+ config.need_render = true;
+ resolve();
+ };
+ img.onerror = function() {
+ reject(new Error('Failed to load result image'));
+ };
+ img.src = 'data:image/png;base64,' + resultBase64;
+ });
+ }
+
+ render_overlay(ctx) {
+ // Show visual indicator if there's a selection ready for inpainting
+ if (window.smartSelectMask && window.smartSelectMask.canvas) {
+ // Draw a subtle border around the tool indicating mask is ready
+ ctx.save();
+ ctx.strokeStyle = '#00ff00';
+ ctx.lineWidth = 2;
+ ctx.setLineDash([5, 5]);
+
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ // Get mask bounds
+ var maskCanvas = window.smartSelectMask.canvas;
+ var maskCtx = maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+
+ var minX = maskCanvas.width, minY = maskCanvas.height;
+ var maxX = 0, maxY = 0;
+
+ for (var y = 0; y < maskCanvas.height; y += 4) { // Sample every 4th pixel for speed
+ for (var x = 0; x < maskCanvas.width; x += 4) {
+ var i = (y * maskCanvas.width + x) * 4;
+ if (imageData.data[i] > 128) {
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ if (maxX > minX && maxY > minY) {
+ ctx.strokeRect(
+ config.layer.x + minX * scaleX,
+ config.layer.y + minY * scaleY,
+ (maxX - minX) * scaleX,
+ (maxY - minY) * scaleY
+ );
+ }
+
+ ctx.restore();
+ }
+ }
+}
+
+export default Ai_inpaint_class;
diff --git a/paintplus/frontend/src/js/tools/ai_lama_erase.js b/paintplus/frontend/src/js/tools/ai_lama_erase.js
new file mode 100644
index 0000000..e4616b6
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/ai_lama_erase.js
@@ -0,0 +1,199 @@
+/**
+ * AI Magic Eraser — paint a mask with a brush, send to LaMa backend, apply result.
+ * Works locally (no API key). GPU auto-detected; CPU fallback always available.
+ *
+ * Workflow:
+ * 1. User paints over the object to erase (red overlay shows the mask)
+ * 2. On mouseup, POST image + mask to /api/erase
+ * 3. Result replaces the current layer canvas
+ *
+ * Registered as tool name: "ai_lama_erase"
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import apiService from './../services/api.js';
+
+class Ai_lama_erase_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'ai_lama_erase';
+
+ this.isDrawing = false;
+ this.isProcessing = false;
+
+ // Off-screen canvas used to accumulate the painted mask
+ this.maskCanvas = null;
+ this.maskCtx = null;
+ }
+
+ load() {
+ var _this = this;
+ document.addEventListener('mousedown', function (e) { _this.mousedown(e); });
+ document.addEventListener('mousemove', function (e) { _this.mousemove(e); });
+ document.addEventListener('mouseup', function (e) { _this.mouseup(e); });
+ document.addEventListener('touchstart', function (e) { _this.mousedown(e); }, { passive: false });
+ document.addEventListener('touchmove', function (e) { _this.mousemove(e); }, { passive: false });
+ document.addEventListener('touchend', function (e) { _this.mouseup(e); });
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (!mouse.click_valid) return;
+ if (config.TOOL.name !== this.name) return;
+ if (this.isProcessing) return;
+
+ if (config.layer.type !== 'image') {
+ alertify.error('This layer must contain an image.');
+ return;
+ }
+
+ this._initMask();
+ this.isDrawing = true;
+ this._paint(mouse);
+ }
+
+ mousemove(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name !== this.name) return;
+ var mouse = this.get_mouse_info(e);
+ this._paint(mouse);
+ }
+
+ mouseup(e) {
+ if (!this.isDrawing) return;
+ this.isDrawing = false;
+ if (config.TOOL.name !== this.name) return;
+ this._applyErase();
+ }
+
+ // ── Private ──────────────────────────────────────────────────────────────
+
+ _initMask() {
+ var w = config.layer.width_original;
+ var h = config.layer.height_original;
+
+ if (!this.maskCanvas || this.maskCanvas.width !== w || this.maskCanvas.height !== h) {
+ this.maskCanvas = document.createElement('canvas');
+ this.maskCanvas.width = w;
+ this.maskCanvas.height = h;
+ this.maskCtx = this.maskCanvas.getContext('2d');
+ }
+ this.maskCtx.clearRect(0, 0, w, h);
+ }
+
+ _paint(mouse) {
+ var params = this.getParams();
+ var size = params.size || 30;
+
+ // Map screen coords → layer-original coords
+ var lx = Math.round(this.adaptSize(Math.round(mouse.x) - config.layer.x, 'width'));
+ var ly = Math.round(this.adaptSize(Math.round(mouse.y) - config.layer.y, 'height'));
+
+ this.maskCtx.beginPath();
+ this.maskCtx.arc(lx, ly, size / 2, 0, Math.PI * 2);
+ this.maskCtx.fillStyle = '#ffffff';
+ this.maskCtx.fill();
+
+ // Show red overlay on screen so user can see the painted area
+ this._renderOverlay(lx, ly, size);
+ }
+
+ _renderOverlay(lx, ly, size) {
+ // Draw a translucent red circle on the main canvas for visual feedback
+ var scale = config.ZOOM / 100;
+ var sx = config.layer.x * scale + lx * scale;
+ var sy = config.layer.y * scale + ly * scale;
+ var sRadius = (size / 2) * scale;
+
+ var mainCtx = document.getElementById('canvas_temp')
+ ? document.getElementById('canvas_temp').getContext('2d')
+ : null;
+ if (!mainCtx) return;
+
+ mainCtx.save();
+ mainCtx.beginPath();
+ mainCtx.arc(sx, sy, sRadius, 0, Math.PI * 2);
+ mainCtx.fillStyle = 'rgba(255, 60, 60, 0.4)';
+ mainCtx.fill();
+ mainCtx.restore();
+ }
+
+ async _applyErase() {
+ if (this.isProcessing) return;
+
+ // Check if any mask pixels were painted
+ var maskData = this.maskCtx.getImageData(
+ 0, 0, this.maskCanvas.width, this.maskCanvas.height
+ );
+ var hasPixels = maskData.data.some((v, i) => i % 4 === 3 && v > 0);
+ if (!hasPixels) return;
+
+ this.isProcessing = true;
+ alertify.message('AI erasing... please wait', 0);
+
+ try {
+ // Get current layer as PNG base64
+ var layerCanvas = document.createElement('canvas');
+ layerCanvas.width = config.layer.width_original;
+ layerCanvas.height = config.layer.height_original;
+ var lctx = layerCanvas.getContext('2d');
+ lctx.drawImage(config.layer.link, 0, 0);
+ var imageB64 = layerCanvas.toDataURL('image/png').split(',')[1];
+
+ // Get mask as PNG base64
+ var maskB64 = this.maskCanvas.toDataURL('image/png').split(',')[1];
+
+ // Call backend
+ var result = await apiService.erase(imageB64, maskB64);
+
+ // Apply result back to layer
+ var img = new Image();
+ img.onload = () => {
+ var resultCanvas = document.createElement('canvas');
+ resultCanvas.width = config.layer.width_original;
+ resultCanvas.height = config.layer.height_original;
+ resultCanvas.getContext('2d').drawImage(img, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('ai_lama_erase', 'AI Erase', [
+ new app.Actions.Update_layer_image_action(resultCanvas)
+ ])
+ );
+
+ alertify.dismissAll();
+ alertify.success('Erased! (' + result.method + ')');
+ this.isProcessing = false;
+ this._clearOverlay();
+ };
+ img.onerror = () => {
+ alertify.dismissAll();
+ alertify.error('Failed to load result image.');
+ this.isProcessing = false;
+ };
+ img.src = 'data:image/png;base64,' + result.result;
+
+ } catch (err) {
+ alertify.dismissAll();
+ alertify.error('AI erase failed: ' + (err.message || err));
+ this.isProcessing = false;
+ }
+ }
+
+ _clearOverlay() {
+ var canvas = document.getElementById('canvas_temp');
+ if (canvas) {
+ canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+ }
+ }
+}
+
+export default Ai_lama_erase_class;
diff --git a/paintplus/frontend/src/js/tools/ai_replace_selection.js b/paintplus/frontend/src/js/tools/ai_replace_selection.js
new file mode 100644
index 0000000..f601ac0
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/ai_replace_selection.js
@@ -0,0 +1,218 @@
+/**
+ * AI Replace Selection — pick any selection (Smart Select, Magic Wand, Lasso, Brush Select),
+ * describe what should go there, remote provider fills it in.
+ *
+ * Requires a configured remote provider (InvokeAI / ComfyUI / OpenAI).
+ * Registered as tool name: "ai_replace_selection"
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Dialog_class from './../libs/popup.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import apiService from './../services/api.js';
+import { getCapabilities } from './../api/capabilities.js';
+
+class Ai_replace_selection_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.POP = new Dialog_class();
+ this.ctx = ctx;
+ this.name = 'ai_replace_selection';
+ this.isProcessing = false;
+ }
+
+ load() {}
+
+ async on_activate() {
+ var caps = await getCapabilities();
+ if (!caps.remote || !caps.remote.healthy) {
+ alertify.error(
+ 'Replace Selection requires a remote AI provider. ' +
+ 'Set AI_PROVIDER (openai / invokeai / comfyui) in .env and restart.'
+ );
+ return;
+ }
+
+ var hasMask = window.smartSelectMask?.canvas != null;
+ var hasRect = this._getRectSelection() != null;
+
+ if (!hasMask && !hasRect) {
+ alertify.warning(
+ 'No selection found. Use Smart Select, Magic Wand, Lasso, ' +
+ 'Ellipse Select, or Brush Select first, then activate this tool.'
+ );
+ return;
+ }
+
+ this._showDialog(caps.remote.provider);
+ }
+
+ // ── Private ──────────────────────────────────────────────────────────────
+
+ _getRectSelection() {
+ if (!config.layer) return null;
+ var sel = config.layer.selection;
+ if (!sel) return null;
+ var { x, y, width, height } = sel;
+ if (!width || !height) return null;
+ return { x, y, width, height };
+ }
+
+ _showDialog(providerName) {
+ var _this = this;
+
+ this.POP.show({
+ title: 'AI Replace Selection',
+ params: [
+ {
+ name: 'prompt',
+ title: 'Describe what to place here:',
+ type: 'textarea',
+ value: '',
+ placeholder: "e.g. 'a blooming red rose', 'dark polished wood', 'a smiling golden retriever'",
+ },
+ {
+ name: 'negative_prompt',
+ title: 'Avoid (optional):',
+ value: '',
+ placeholder: 'blurry, distorted, low quality',
+ },
+ {
+ name: 'steps',
+ title: 'Steps:',
+ type: 'range',
+ value: 30,
+ range: [10, 60],
+ step: 5,
+ },
+ {
+ name: 'cfg_scale',
+ title: 'Prompt strength:',
+ type: 'range',
+ value: 75,
+ range: [10, 100],
+ step: 5,
+ },
+ ],
+ on_finish: function (params) {
+ if (!params.prompt || !params.prompt.trim()) {
+ alertify.warning('Please enter a description.');
+ return;
+ }
+ _this._run(params);
+ },
+ });
+ }
+
+ async _run(params) {
+ if (this.isProcessing) return;
+ if (config.layer.type !== 'image') {
+ alertify.error('Current layer must be an image.');
+ return;
+ }
+
+ this.isProcessing = true;
+ alertify.message('Replacing selection... please wait', 0);
+
+ try {
+ // Build mask canvas from current selection
+ var maskCanvas = await this._buildMaskCanvas();
+ if (!maskCanvas) {
+ alertify.dismissAll();
+ alertify.error('Could not build selection mask.');
+ this.isProcessing = false;
+ return;
+ }
+
+ // Get layer as PNG
+ var layerCanvas = document.createElement('canvas');
+ layerCanvas.width = config.layer.width_original;
+ layerCanvas.height = config.layer.height_original;
+ layerCanvas.getContext('2d').drawImage(config.layer.link, 0, 0);
+
+ var imageB64 = layerCanvas.toDataURL('image/png').split(',')[1];
+ var maskB64 = maskCanvas.toDataURL('image/png').split(',')[1];
+
+ var result = await apiService.remoteInpaint(
+ imageB64, maskB64,
+ params.prompt,
+ {
+ negativePrompt: params.negative_prompt || '',
+ steps: params.steps || 30,
+ cfgScale: (params.cfg_scale || 75) / 10,
+ }
+ );
+
+ var img = new Image();
+ img.onload = () => {
+ var resultCanvas = document.createElement('canvas');
+ resultCanvas.width = config.layer.width_original;
+ resultCanvas.height = config.layer.height_original;
+ resultCanvas.getContext('2d').drawImage(img, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('ai_replace_selection', 'AI Replace Selection', [
+ new app.Actions.Update_layer_image_action(resultCanvas)
+ ])
+ );
+
+ alertify.dismissAll();
+ alertify.success('Done!');
+ this.isProcessing = false;
+ };
+ img.onerror = () => {
+ alertify.dismissAll();
+ alertify.error('Failed to load result image.');
+ this.isProcessing = false;
+ };
+ img.src = 'data:image/png;base64,' + result.result;
+
+ } catch (err) {
+ alertify.dismissAll();
+ alertify.error('Replace failed: ' + (err.message || err));
+ this.isProcessing = false;
+ }
+ }
+
+ async _buildMaskCanvas() {
+ var w = config.layer.width_original;
+ var h = config.layer.height_original;
+ var canvas = document.createElement('canvas');
+ canvas.width = w;
+ canvas.height = h;
+ var ctx = canvas.getContext('2d');
+
+ // Prefer smartSelectMask (all selection tools write here)
+ if (window.smartSelectMask?.canvas) {
+ ctx.drawImage(window.smartSelectMask.canvas, 0, 0, w, h);
+ // Ensure pure B&W
+ var d = ctx.getImageData(0, 0, w, h);
+ for (var i = 0; i < d.data.length; i += 4) {
+ var v = d.data[i] > 128 ? 255 : 0;
+ d.data[i] = d.data[i+1] = d.data[i+2] = v;
+ d.data[i+3] = 255;
+ }
+ ctx.putImageData(d, 0, 0);
+ return canvas;
+ }
+
+ // Fall back to rectangular selection
+ var sel = this._getRectSelection();
+ if (sel) {
+ ctx.fillStyle = '#000';
+ ctx.fillRect(0, 0, w, h);
+ ctx.fillStyle = '#fff';
+ ctx.fillRect(sel.x, sel.y, sel.width, sel.height);
+ return canvas;
+ }
+
+ return null;
+ }
+}
+
+export default Ai_replace_selection_class;
diff --git a/paintplus/frontend/src/js/tools/ai_smart_inpaint.js b/paintplus/frontend/src/js/tools/ai_smart_inpaint.js
new file mode 100644
index 0000000..61f6322
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/ai_smart_inpaint.js
@@ -0,0 +1,201 @@
+/**
+ * AI Smart Inpaint — paint a mask, enter a prompt, choose Fast (LaMa) or Quality (remote).
+ *
+ * Fast mode: /api/erase — LaMa local, no API key, seconds
+ * Quality mode: /api/inpaint/remote — InvokeAI / ComfyUI / OpenAI, requires configured provider
+ *
+ * Registered as tool name: "ai_smart_inpaint"
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import Dialog_class from './../libs/popup.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import apiService from './../services/api.js';
+import { getCapabilities } from './../api/capabilities.js';
+
+class Ai_smart_inpaint_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.POP = new Dialog_class();
+ this.ctx = ctx;
+ this.name = 'ai_smart_inpaint';
+
+ this.isDrawing = false;
+ this.isProcessing = false;
+ this.maskCanvas = null;
+ this.maskCtx = null;
+ }
+
+ load() {
+ var _this = this;
+ document.addEventListener('mousedown', function (e) { _this.mousedown(e); });
+ document.addEventListener('mousemove', function (e) { _this.mousemove(e); });
+ document.addEventListener('mouseup', function (e) { _this.mouseup(e); });
+ document.addEventListener('touchstart', function (e) { _this.mousedown(e); }, { passive: false });
+ document.addEventListener('touchmove', function (e) { _this.mousemove(e); }, { passive: false });
+ document.addEventListener('touchend', function (e) { _this.mouseup(e); });
+ }
+
+ on_activate() {
+ // Nothing on activate — tool is drag-to-paint, then dialog on mouseup
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (!mouse.click_valid) return;
+ if (config.TOOL.name !== this.name) return;
+ if (this.isProcessing) return;
+ if (config.layer.type !== 'image') {
+ alertify.error('This layer must contain an image.');
+ return;
+ }
+ this._initMask();
+ this.isDrawing = true;
+ this._paint(mouse);
+ }
+
+ mousemove(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name !== this.name) return;
+ this._paint(this.get_mouse_info(e));
+ }
+
+ mouseup(e) {
+ if (!this.isDrawing) return;
+ this.isDrawing = false;
+ if (config.TOOL.name !== this.name) return;
+
+ var maskData = this.maskCtx.getImageData(
+ 0, 0, this.maskCanvas.width, this.maskCanvas.height
+ );
+ if (!maskData.data.some((v, i) => i % 4 === 3 && v > 0)) return;
+
+ this._showDialog();
+ }
+
+ // ── Private ──────────────────────────────────────────────────────────────
+
+ _initMask() {
+ var w = config.layer.width_original;
+ var h = config.layer.height_original;
+ if (!this.maskCanvas || this.maskCanvas.width !== w || this.maskCanvas.height !== h) {
+ this.maskCanvas = document.createElement('canvas');
+ this.maskCanvas.width = w;
+ this.maskCanvas.height = h;
+ this.maskCtx = this.maskCanvas.getContext('2d');
+ }
+ this.maskCtx.clearRect(0, 0, w, h);
+ }
+
+ _paint(mouse) {
+ var params = this.getParams();
+ var size = params.size || 30;
+ var lx = Math.round(this.adaptSize(Math.round(mouse.x) - config.layer.x, 'width'));
+ var ly = Math.round(this.adaptSize(Math.round(mouse.y) - config.layer.y, 'height'));
+ this.maskCtx.beginPath();
+ this.maskCtx.arc(lx, ly, size / 2, 0, Math.PI * 2);
+ this.maskCtx.fillStyle = '#ffffff';
+ this.maskCtx.fill();
+ }
+
+ async _showDialog() {
+ var caps = await getCapabilities();
+ var hasRemote = caps.remote && caps.remote.healthy;
+
+ var _this = this;
+
+ var settings = {
+ title: 'AI Smart Inpaint',
+ params: [
+ {
+ name: 'quality',
+ title: 'Mode:',
+ value: 'fast',
+ values: hasRemote ? ['fast', 'quality'] : ['fast'],
+ note: hasRemote ? 'Fast = LaMa (local). Quality = remote AI + prompt.' : 'Quality mode requires a remote provider (InvokeAI / ComfyUI / OpenAI).',
+ },
+ {
+ name: 'prompt',
+ title: 'What to put here (Quality mode only):',
+ type: 'textarea',
+ value: '',
+ placeholder: "e.g. 'lush green grass', 'wooden table surface', 'clear blue sky'",
+ },
+ {
+ name: 'negative_prompt',
+ title: 'Avoid (optional):',
+ value: '',
+ placeholder: 'blurry, distorted',
+ },
+ ],
+ on_load: function (params, popup) {},
+ on_finish: function (params) {
+ _this._runInpaint(params.quality, params.prompt, params.negative_prompt);
+ },
+ };
+
+ this.POP.show(settings);
+ }
+
+ async _runInpaint(quality, prompt, negativePrompt) {
+ if (this.isProcessing) return;
+ this.isProcessing = true;
+
+ var modeLabel = quality === 'quality' ? 'Quality (remote)' : 'Fast (LaMa)';
+ alertify.message('Inpainting (' + modeLabel + ')... please wait', 0);
+
+ try {
+ var layerCanvas = document.createElement('canvas');
+ layerCanvas.width = config.layer.width_original;
+ layerCanvas.height = config.layer.height_original;
+ layerCanvas.getContext('2d').drawImage(config.layer.link, 0, 0);
+ var imageB64 = layerCanvas.toDataURL('image/png').split(',')[1];
+ var maskB64 = this.maskCanvas.toDataURL('image/png').split(',')[1];
+
+ var result;
+ if (quality === 'quality') {
+ result = await apiService.remoteInpaint(imageB64, maskB64, prompt || 'fill naturally', { negativePrompt });
+ } else {
+ result = await apiService.erase(imageB64, maskB64);
+ }
+
+ var img = new Image();
+ img.onload = () => {
+ var resultCanvas = document.createElement('canvas');
+ resultCanvas.width = config.layer.width_original;
+ resultCanvas.height = config.layer.height_original;
+ resultCanvas.getContext('2d').drawImage(img, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('ai_smart_inpaint', 'AI Smart Inpaint', [
+ new app.Actions.Update_layer_image_action(resultCanvas)
+ ])
+ );
+
+ alertify.dismissAll();
+ alertify.success('Done!');
+ this.isProcessing = false;
+ };
+ img.onerror = () => {
+ alertify.dismissAll();
+ alertify.error('Failed to load result.');
+ this.isProcessing = false;
+ };
+ img.src = 'data:image/png;base64,' + result.result;
+
+ } catch (err) {
+ alertify.dismissAll();
+ alertify.error('Inpaint failed: ' + (err.message || err));
+ this.isProcessing = false;
+ }
+ }
+}
+
+export default Ai_smart_inpaint_class;
diff --git a/paintplus/frontend/src/js/tools/animation.js b/paintplus/frontend/src/js/tools/animation.js
new file mode 100644
index 0000000..de7d588
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/animation.js
@@ -0,0 +1,116 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import GUI_tools_class from './../core/gui/gui-tools.js';
+import Base_gui_class from './../core/base-gui.js';
+import Base_selection_class from './../core/base-selection.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Animation_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.GUI_tools = new GUI_tools_class();
+ this.Base_gui = new Base_gui_class();
+ this.name = 'animation';
+ this.intervalID = null;
+ this.index = 0;
+ this.toggle_layer_visibility_action = new app.Actions.Toggle_layer_visibility_action();
+
+ this.disable_selection(ctx);
+ }
+
+ load() {
+ //nothing
+ }
+
+ render(ctx, layer) {
+ //nothing
+ }
+
+ /**
+ * disable_selection
+ */
+ disable_selection(ctx) {
+ var sel_config = {
+ enable_background: false,
+ enable_borders: false,
+ enable_controls: false,
+ enable_rotation: false,
+ enable_move: false,
+ data_function: function () {
+ return null;
+ },
+ };
+ this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
+ }
+
+ on_params_update(data) {
+ if(data.key != "play")
+ return;
+
+ var params = this.getParams();
+ if (config.layers.length == 1) {
+ alertify.error('Can not animate 1 layer.');
+ return;
+ }
+ this.stop();
+
+ if (params.play == true) {
+ this.start(params.delay);
+ }
+ }
+
+ on_activate() {
+ return [
+ new app.Actions.Stop_animation_action(false)
+ ];
+ }
+
+ on_leave() {
+ return [
+ new app.Actions.Stop_animation_action(true)
+ ];
+ }
+
+ start(delay) {
+ var _this = this;
+ delay = parseInt(delay);
+ if (delay < 0)
+ delay = 50;
+
+ this.intervalID = window.setInterval(function () {
+ _this.play(_this);
+ }, delay);
+ }
+
+ stop() {
+ new app.Actions.Stop_animation_action(true).do();
+ }
+
+ play(_this) {
+
+ for (var i in config.layers) {
+ config.layers[i].visible = false;
+ }
+
+ //show 1
+ if (config.layers[this.index] != undefined) {
+ this.toggle_layer_visibility_action.layer_id = config.layers[this.index].id;
+ this.toggle_layer_visibility_action.do();
+ }
+
+ //change index
+ if (config.layers[this.index + 1] != undefined) {
+ this.index++;
+ }
+ else {
+ this.index = 0;
+ }
+ }
+
+}
+;
+export default Animation_class;
diff --git a/paintplus/frontend/src/js/tools/blur.js b/paintplus/frontend/src/js/tools/blur.js
new file mode 100644
index 0000000..ab17bfb
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/blur.js
@@ -0,0 +1,140 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import ImageFilters from './../libs/imagefilters.js';
+import Helper_class from './../libs/helpers.js';
+
+class Blur_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'blur';
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ this.started = false;
+ }
+
+ load() {
+ this.default_events();
+ }
+
+ default_dragMove(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousemove(event);
+
+ //mouse cursor
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+ }
+
+ mousedown(e) {
+ this.started = false;
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+ this.started = true;
+
+ //get canvas from layer
+ this.tmpCanvas = document.createElement('canvas');
+ this.tmpCanvasCtx = this.tmpCanvas.getContext("2d");
+ this.tmpCanvas.width = config.layer.width_original;
+ this.tmpCanvas.height = config.layer.height_original;
+ this.tmpCanvasCtx.drawImage(config.layer.link, 0, 0);
+
+ //do blur
+ this.blur_general('click', mouse, params.size, params.strength);
+
+ //register tmp canvas for faster redraw
+ config.layer.link_canvas = this.tmpCanvas;
+ config.need_render = true;
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (this.started == false) {
+ return;
+ }
+
+ //do blur
+ this.blur_general('move', mouse, params.size, params.strength);
+
+ //draw draft preview
+ config.need_render = true;
+ }
+
+ mouseup(e) {
+ if (this.started == false) {
+ return;
+ }
+ delete config.layer.link_canvas;
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('blur_tool', 'Blur Tool', [
+ new app.Actions.Update_layer_image_action(this.tmpCanvas)
+ ])
+ );
+
+ //decrease memory
+ this.tmpCanvas.width = 1;
+ this.tmpCanvas.height = 1;
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ }
+
+ blur_general(type, mouse, size, strength) {
+ var ctx = this.tmpCanvasCtx;
+ var mouse_x = Math.round(mouse.x) - config.layer.x;
+ var mouse_y = Math.round(mouse.y) - config.layer.y;
+
+ //adapt to origin size
+ mouse_x = this.adaptSize(mouse_x, 'width');
+ mouse_y = this.adaptSize(mouse_y, 'height');
+ var size_w = this.adaptSize(size, 'width');
+ var size_h = this.adaptSize(size, 'height');
+
+ //find center
+ var center_x = mouse_x - Math.round(size_w / 2);
+ var center_y = mouse_y - Math.round(size_h / 2);
+
+ //convert float coords to integers
+ center_x = Math.round(center_x);
+ center_y = Math.round(center_y);
+ mouse_x = Math.round(mouse_x);
+ mouse_y = Math.round(mouse_y);
+
+ if (type == 'move') {
+ strength = strength / 2;
+ if (strength < 1)
+ strength = 1;
+ }
+
+ var imageData = ctx.getImageData(center_x, center_y, size_w, size_h);
+ var filtered = ImageFilters.StackBlur(imageData, strength); //add effect
+ this.Helper.image_round(this.tmpCanvasCtx, mouse_x, mouse_y, size_w, size_h, filtered);
+ }
+
+}
+export default Blur_class;
diff --git a/paintplus/frontend/src/js/tools/brush.js b/paintplus/frontend/src/js/tools/brush.js
new file mode 100644
index 0000000..f27ba8a
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/brush.js
@@ -0,0 +1,570 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+
+class Brush_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.name = 'brush';
+ this.layer = {};
+ this.params_hash = false;
+ this.pressure_supported = false;
+ this.pointer_pressure = 0; // has range [0 - 1]
+ this.max_speed = 20;
+ this.power = 2; //how speed affects size
+ this.event_links = [];
+ this.data_index = 0;
+ }
+
+ load() {
+ var _this = this;
+ var is_touch = false;
+
+ //pointer events
+ document.addEventListener('pointerdown', function (event) {
+ _this.pointerdown(event);
+ });
+ document.addEventListener('pointermove', function (event) {
+ _this.pointermove(event);
+ });
+
+ //mouse events
+ document.addEventListener('mousedown', function (event) {
+ if(is_touch)
+ return;
+ _this.dragStart(event);
+ });
+ document.addEventListener('mousemove', function (event) {
+ if(is_touch)
+ return;
+ _this.dragMove(event);
+ });
+ document.addEventListener('mouseup', function (event) {
+ if(is_touch)
+ return;
+ _this.dragEnd(event);
+ });
+
+ // collect touch events
+ document.addEventListener('touchstart', function (event) {
+ is_touch = true;
+ _this.dragStart(event);
+ });
+ document.addEventListener('touchmove', function (event) {
+ _this.dragMove(event);
+ });
+ document.addEventListener('touchend', function (event) {
+ _this.dragEnd(event);
+ });
+ }
+
+ pointerdown(e) {
+ // Devices that don't actually support pen pressure can give 0.5 as a false reading.
+ // It is highly unlikely a real pen will read exactly 0.5 at the start of a stroke.
+ if (e.pressure && e.pressure !== 0 && e.pressure !== 0.5 && e.pressure <= 1) {
+ this.pressure_supported = true;
+ this.pointer_pressure = e.pressure;
+ } else {
+ this.pressure_supported = false;
+ }
+ }
+
+ pointermove(e) {
+ // Pressure of exactly 1 seems to be an input error, sometimes I see it when lifting the pen
+ // off the screen when pressure reading should be near 0.
+ if (this.pressure_supported && e.pressure < 1) {
+ this.pointer_pressure = e.pressure;
+ }
+ }
+
+ dragStart(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ this.click_counter++;
+
+ var mouse = this.get_mouse_info(event);
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ var events = [];
+ if (event.changedTouches) {
+ events = event.changedTouches;
+ }
+ else{
+ events.push(event);
+ }
+ for(var i = 0; i < events.length; i++){
+ var identifier = null;
+ if(typeof events[i].identifier != "undefined") {
+ identifier = events[i].identifier;
+ }
+
+ this.event_links.push({
+ identifier: identifier,
+ index: this.data_index,
+ });
+
+ _this.mousedown_action(events[i], this.data_index, identifier);
+
+ this.data_index++;
+ }
+ }
+
+ dragMove(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+
+ if (typeof event.changedTouches == "undefined") {
+ //mouse cursor
+ var mouse = _this.get_mouse_info(event);
+ var params = _this.getParams();
+ _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+ }
+
+ var mouse = this.get_mouse_info(event);
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ var events = [];
+ if (event.changedTouches) {
+ events = event.changedTouches;
+ }
+ else{
+ events.push(event);
+ }
+ for(var i = 0; i < events.length; i++){
+ var identifier = null;
+ if(typeof events[i].identifier != "undefined") {
+ identifier = events[i].identifier;
+ }
+
+ for(var j = 0; i < this.event_links.length; j++){
+ if(this.event_links[j].identifier == identifier){
+ //found link
+ _this.mousemove_action(events[i], this.event_links[j].index);
+ break;
+ }
+ }
+ }
+ }
+
+ dragEnd(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+
+ var mouse = this.get_mouse_info(event);
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ var events = [];
+ if (event.changedTouches) {
+ events = event.changedTouches;
+ }
+ else{
+ events.push(event);
+ }
+ for(var i = 0; i < events.length; i++){
+ var identifier = null;
+ if(typeof events[i].identifier != "undefined") {
+ //unlink
+ identifier = events[i].identifier;
+ }
+
+ for(var j = 0; i < this.event_links.length; j++){
+ if(this.event_links[j].identifier == identifier){
+ this.event_links.splice(j, 1);
+ break;
+ }
+ }
+
+ _this.mouseup_action(events[i]);
+ }
+ }
+
+ mousedown_action(e, index, event_identifier) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false)
+ return;
+
+ var params_hash = this.get_params_hash();
+
+ if (config.layer.type != this.name || params_hash != this.params_hash) {
+ //register new object - current layer is not ours or params changed
+ this.layer = {
+ type: this.name,
+ data: [[]],
+ params: this.clone(this.getParams()),
+ status: 'draft',
+ render_function: [this.name, 'render'],
+ x: 0,
+ y: 0,
+ width: config.WIDTH,
+ height: config.HEIGHT,
+ hide_selection_if_active: true,
+ rotate: null,
+ is_vector: true,
+ color: config.COLOR
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('new_brush_layer', 'New Brush Layer', [
+ new app.Actions.Insert_layer_action(this.layer)
+ ])
+ );
+ this.params_hash = params_hash;
+
+ //reset event links index
+ this.data_index = 0;
+ index = 0;
+ this.event_links = [];
+ this.event_links.push({
+ identifier: event_identifier,
+ index: this.data_index,
+ });
+ }
+ else {
+ const new_data = JSON.parse(JSON.stringify(config.layer.data));
+ new_data.push([]);
+ app.State.do_action(
+ new app.Actions.Bundle_action('update_brush_layer', 'Update Brush Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ data: new_data
+ })
+ ])
+ );
+ }
+
+ //in case of undo, recalculate index
+ for(var i = index; i >= 0; i++){
+ if(typeof config.layer.data[index] != "undefined"){
+ break;
+ }
+ index--;
+ }
+
+ var current_group = config.layer.data[index];
+ var params = this.getParams();
+
+ //detect line size
+ var size = params.size;
+ var new_size = size;
+
+ if (params.pressure == true) {
+ if (this.pressure_supported) {
+ new_size = size * this.pointer_pressure * 2;
+ }
+ else {
+ new_size = size + size / this.max_speed * mouse.speed_average * this.power;
+ new_size = Math.max(new_size, size / 4);
+ new_size = Math.round(new_size);
+ }
+ }
+
+ var mouse_coords = this.get_mouse_coordinates_from_event(e);
+ var mouse_x = mouse_coords.x;
+ var mouse_y = mouse_coords.y;
+
+ current_group.push([mouse_x - config.layer.x, mouse_y - config.layer.y, new_size]);
+ this.Base_layers.render();
+ }
+
+ mousemove_action(e, index) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ //in case of undo, recalculate index
+ for(var i = index; i >= 0; i++){
+ if(typeof config.layer.data[index] != "undefined"){
+ break;
+ }
+ index--;
+ }
+
+ var params = this.getParams();
+ var current_group = config.layer.data[index];
+
+ //detect line size
+ var size = params.size;
+ var new_size = size;
+
+ if (params.pressure == true) {
+ if (this.pressure_supported) {
+ new_size = size * this.pointer_pressure * 2;
+ }
+ else {
+ new_size = size + size / this.max_speed * mouse.speed_average * this.power;
+ new_size = Math.max(new_size, size / 4);
+ new_size = Math.round(new_size);
+ }
+ }
+
+ var mouse_coords = this.get_mouse_coordinates_from_event(e);
+ var mouse_x = mouse_coords.x;
+ var mouse_y = mouse_coords.y;
+
+ current_group.push([mouse_x - config.layer.x, mouse_y - config.layer.y, new_size]);
+ config.layer.status = 'draft';
+ this.Base_layers.render();
+ }
+
+ mouseup_action(e, index) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false) {
+ config.layer.status = null;
+ return;
+ }
+
+ config.layer.status = null;
+
+ this.check_dimensions();
+ this.Base_layers.render();
+ }
+
+ render(ctx, layer) {
+ if (layer.data.length == 0)
+ return;
+
+ var params = layer.params;
+ var size = params.size;
+
+ //set styles
+ ctx.save();
+ ctx.fillStyle = layer.color;
+ ctx.strokeStyle = layer.color;
+ ctx.lineWidth = params.size;
+ ctx.lineCap = 'round';
+ ctx.lineJoin = 'round';
+
+ ctx.translate(layer.x, layer.y);
+
+ var data = layer.data;
+
+ //check for legacy format
+ data = this.check_legacy_format(data);
+
+ var n = data.length;
+ for (var k = 0; k < n; k++) {
+ var group_data = data[k]; //data from mouse down till mouse release
+ var group_n = group_data.length;
+
+ if (params.pressure == false) {
+ //stabilized lines method does not support multiple line sizes
+ this.render_stabilized(ctx, group_data);
+ }
+ else {
+ if (group_data[0]) {
+ ctx.beginPath();
+ ctx.moveTo(group_data[0][0], group_data[0][1]);
+ for (var i = 1; i < group_n; i++) {
+ if (group_data[i] === null) {
+ //break
+ ctx.beginPath();
+ }
+ else {
+ //line
+
+ ctx.lineWidth = group_data[i][2];
+
+ if (group_data[i - 1] == null && group_data[i + 1] == null) {
+ //exception - point
+ ctx.arc(group_data[i][0], group_data[i][1], size / 2, 0, 2 * Math.PI, false);
+ ctx.fill();
+ }
+ else if (group_data[i - 1] != null) {
+ //lines
+ ctx.lineWidth = group_data[i][2];
+ ctx.beginPath();
+ ctx.moveTo(group_data[i - 1][0], group_data[i - 1][1]);
+ ctx.lineTo(group_data[i][0], group_data[i][1]);
+ ctx.stroke();
+ }
+ }
+ }
+ if (group_data[1] == null) {
+ //point
+ ctx.beginPath();
+ ctx.arc(group_data[0][0], group_data[0][1], size / 2, 0, 2 * Math.PI, false);
+ ctx.fill();
+ }
+ }
+ }
+ }
+
+ ctx.translate(-layer.x, -layer.y);
+ ctx.restore();
+ }
+
+ /**
+ * draw stabilized lines
+ * author: Manoj Verma
+ * source: https://stackoverflow.com/questions/7891740/drawing-smooth-lines-with-canvas/44810470#44810470
+ *
+ * @param ctx
+ * @param queue
+ */
+ render_stabilized(ctx, queue) {
+ var data = JSON.parse(JSON.stringify(queue));
+ var n = data.length;
+
+ if (data.length == 1) {
+ //point
+ var point = data[0];
+ ctx.beginPath();
+ ctx.arc(point[0], point[1], point[2] / 2, 0, 2 * Math.PI, false);
+ ctx.fill();
+ return;
+ }
+ else if (data.length <= 5) {
+ //not enough points yet
+
+ for (var i = 1; i < n; i++) {
+ ctx.beginPath();
+ ctx.moveTo(data[i - 1][0], data[i - 1][1]);
+ ctx.lineTo(data[i][0], data[i][1]);
+ ctx.stroke();
+ }
+ return;
+ }
+
+ //fix for loose ending, so lets duplicate last point
+ data.push([data[n - 1][0], data[n - 1][1]]);
+
+ ctx.beginPath();
+ ctx.moveTo(data[0][0], data[0][1]);
+
+ //prepare
+ var temp_data1 = [data[0]];
+ var c, d;
+ for (var i = 1; i < data.length - 1; i = i+1) {
+ c = (data[i][0] + data[i + 1][0]) / 2;
+ d = (data[i][1] + data[i + 1][1]) / 2;
+ temp_data1.push([c, d]);
+ }
+
+ var temp_data2 = [temp_data1[0]];
+ for (var i = 1; i < temp_data1.length - 1; i = i+1) {
+ c = (temp_data1[i][0] + temp_data1[i + 1][0]) / 2;
+ d = (temp_data1[i][1] + temp_data1[i + 1][1]) / 2;
+ temp_data2.push([c, d]);
+ }
+
+ var temp_data = [temp_data2[0]];
+ for (var i = 1; i < temp_data2.length - 1; i = i+1) {
+ c = (temp_data2[i][0] + temp_data2[i + 1][0]) / 2;
+ d = (temp_data2[i][1] + temp_data2[i + 1][1]) / 2;
+ temp_data.push([c, d]);
+ }
+
+ //draw
+ for (var i = 1; i < temp_data.length - 2; i = i+1) {
+ c = (temp_data[i][0] + temp_data[i + 1][0]) / 2;
+ d = (temp_data[i][1] + temp_data[i + 1][1]) / 2;
+ ctx.quadraticCurveTo(temp_data[i][0], temp_data[i][1], c, d);
+ }
+
+ // For the last 2 points
+ ctx.quadraticCurveTo(
+ temp_data[i][0],
+ temp_data[i][1],
+ temp_data[i+1][0],
+ temp_data[i+1][1]
+ );
+ ctx.stroke();
+ }
+
+ check_legacy_format(data) {
+ //check for legacy format
+ if(data.length > 0 && typeof data[0][0] == "number"){
+ //convert
+ var legacy = JSON.parse(JSON.stringify(data));
+ data = [];
+ data.push([]);
+ var group_index = 0;
+ for(var i in legacy){
+ if(legacy[i] === null){
+ data.push([]);
+ group_index++;
+ }
+ else {
+ data[group_index].push([legacy[i][0], legacy[i][1], legacy[i][2]]);
+ }
+ }
+ }
+
+ return data;
+ }
+
+ /**
+ * recalculate layer x, y, width and height values.
+ */
+ check_dimensions() {
+ var data = JSON.parse(JSON.stringify(config.layer.data)); // Deep copy for history
+ this.check_legacy_format(data);
+
+ if(config.layer.data.length == 0 || data[0].length == 0)
+ return;
+
+ //find bounds
+ var min_x = data[0][0][0];
+ var min_y = data[0][0][1];
+ var max_x = data[0][0][0];
+ var max_y = data[0][0][1];
+
+ var n = data.length;
+ for (var k = 0; k < n; k++) {
+ var group_data = data[k];
+ var group_n = group_data.length;
+
+ for (var i = 1; i < group_n; i++) {
+ min_x = Math.min(min_x, group_data[i][0]);
+ min_y = Math.min(min_y, group_data[i][1]);
+ max_x = Math.max(max_x, group_data[i][0]);
+ max_y = Math.max(max_y, group_data[i][1]);
+ }
+ }
+
+ //move current data
+ for (var k = 0; k < n; k++) {
+ var group_data = data[k];
+ var group_n = group_data.length;
+
+ for (var i = 0; i < group_n; i++) {
+ group_data[i][0] = group_data[i][0] - min_x;
+ group_data[i][1] = group_data[i][1] - min_y;
+ }
+ }
+
+ //change layers bounds
+ app.State.do_action(
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: config.layer.x + min_x,
+ y: config.layer.y + min_y,
+ width: max_x - min_x,
+ height: max_y - min_y,
+ data
+ }),
+ {
+ merge_with_history: ['new_brush_layer', 'update_brush_layer']
+ }
+ );
+ }
+
+}
+
+export default Brush_class;
diff --git a/paintplus/frontend/src/js/tools/brush_select.js b/paintplus/frontend/src/js/tools/brush_select.js
new file mode 100644
index 0000000..9302cd3
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/brush_select.js
@@ -0,0 +1,801 @@
+/**
+ * Brush Select Tool - Canva-style brush-over-to-select with AI (SAM)
+ * Paint over objects to select them - AI detects the actual boundaries
+ * Much more intuitive than click-to-select
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import apiService from './../services/api.js';
+import { SelectionActions, updateLayerWithResult } from './selection_actions.js';
+
+class Brush_select_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'brush_select';
+
+ // Brush state
+ this.isDrawing = false;
+ this.brushPoints = []; // Points collected during brush stroke
+ this.brushPath = []; // Visual path for rendering
+
+ // Store the current mask data
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.selectionBounds = null;
+
+ // Marching ants animation
+ this.marchingAntsOffset = 0;
+
+ // Edge canvas for drawing the mask outline
+ this.edgeCanvas = null;
+
+ // Processing state
+ this.isProcessing = false;
+
+ // Quick-action panel shown after selection
+ this.selectionActions = new SelectionActions(this);
+ }
+
+ load() {
+ var _this = this;
+
+ // Mouse events
+ document.addEventListener('mousedown', function (e) {
+ _this.mousedown(e);
+ });
+ document.addEventListener('mousemove', function (e) {
+ _this.mousemove(e);
+ });
+ document.addEventListener('mouseup', function (e) {
+ _this.mouseup(e);
+ });
+
+ // Touch events
+ document.addEventListener('touchstart', function (e) {
+ _this.mousedown(e);
+ });
+ document.addEventListener('touchmove', function (e) {
+ _this.mousemove(e);
+ });
+ document.addEventListener('touchend', function (e) {
+ _this.mouseup(e);
+ });
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', function(e) {
+ if (config.TOOL.name != _this.name) return;
+ if (_this.Helper.is_input(e.target)) return;
+
+ var code = e.keyCode;
+
+ // Delete - delete selected area
+ if (code == 46 && _this.currentMask) {
+ e.preventDefault();
+ _this.deleteSelection();
+ }
+ // Escape - clear selection
+ if (code == 27) {
+ e.preventDefault();
+ _this.clearSelection();
+ }
+ // Ctrl+C - copy to new layer
+ if (code == 67 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.copyToLayer();
+ }
+ // Ctrl+X - cut to new layer
+ if (code == 88 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.cutToLayer();
+ }
+ });
+
+ // Start marching ants animation
+ this.startMarchingAnts();
+ }
+
+ startMarchingAnts() {
+ var _this = this;
+
+ setInterval(function() {
+ if (_this.currentMask || _this.isDrawing) {
+ _this.marchingAntsOffset++;
+ if (_this.marchingAntsOffset > 16) {
+ _this.marchingAntsOffset = 0;
+ }
+ config.need_render = true;
+ }
+ }, 100);
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+
+ if (config.TOOL.name != this.name) return;
+ if (mouse.click_valid == false) return;
+
+ if (this.isProcessing) {
+ alertify.warning('Processing... please wait');
+ return;
+ }
+
+ // Check if we have an image layer
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer first');
+ return;
+ }
+
+ this.isDrawing = true;
+ this.brushPoints = [];
+ this.brushPath = [];
+
+ // Get first point
+ var point = this.getImagePoint(mouse.x, mouse.y);
+ if (point) {
+ this.brushPoints.push(point);
+ this.brushPath.push({ x: mouse.x, y: mouse.y });
+ }
+
+ config.need_render = true;
+ }
+
+ mousemove(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name != this.name) return;
+
+ var mouse = this.get_mouse_info(e);
+
+ var point = this.getImagePoint(mouse.x, mouse.y);
+ if (point) {
+ // Sample points at intervals (not every pixel)
+ var lastPoint = this.brushPoints[this.brushPoints.length - 1];
+ var dist = Math.sqrt(Math.pow(point.x - lastPoint.x, 2) + Math.pow(point.y - lastPoint.y, 2));
+
+ // Collect points every ~20 pixels for SAM
+ if (dist >= 20) {
+ this.brushPoints.push(point);
+ }
+
+ // Always update visual path
+ this.brushPath.push({ x: mouse.x, y: mouse.y });
+ }
+
+ config.need_render = true;
+ }
+
+ async mouseup(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name != this.name) return;
+
+ this.isDrawing = false;
+
+ if (this.brushPoints.length < 2) {
+ // Too few points - treat as single click
+ if (this.brushPoints.length === 1) {
+ await this.selectWithSinglePoint(this.brushPoints[0]);
+ }
+ this.brushPath = [];
+ config.need_render = true;
+ return;
+ }
+
+ // Check for Shift key - additive selection
+ var isAdditive = e.shiftKey;
+
+ // Process the brush stroke with SAM
+ await this.processBrushSelection(isAdditive);
+
+ this.brushPath = [];
+ config.need_render = true;
+ }
+
+ getImagePoint(mouseX, mouseY) {
+ var x = mouseX - config.layer.x;
+ var y = mouseY - config.layer.y;
+
+ // Adjust for layer scaling
+ if (config.layer.width != config.layer.width_original) {
+ x = x * (config.layer.width_original / config.layer.width);
+ }
+ if (config.layer.height != config.layer.height_original) {
+ y = y * (config.layer.height_original / config.layer.height);
+ }
+
+ // Clamp to image bounds
+ x = Math.max(0, Math.min(config.layer.width_original - 1, Math.round(x)));
+ y = Math.max(0, Math.min(config.layer.height_original - 1, Math.round(y)));
+
+ return { x: x, y: y };
+ }
+
+ /**
+ * Process brush stroke - send multiple points to SAM and combine masks
+ */
+ async processBrushSelection(isAdditive) {
+ this.isProcessing = true;
+ alertify.message('AI is analyzing your selection...');
+
+ try {
+ // Get image data as base64
+ var imageData = this.getLayerImageData();
+
+ // Sample key points from brush stroke (up to 10 points for efficiency)
+ var samplePoints = this.sampleKeyPoints(this.brushPoints, 10);
+
+ // Get mask for each point and combine
+ var combinedMask = null;
+
+ for (var i = 0; i < samplePoints.length; i++) {
+ var point = samplePoints[i];
+
+ try {
+ var result = await apiService.smartSelect(imageData, point.x, point.y);
+
+ // Decode mask
+ var maskCanvas = await this.decodeMask(result.mask);
+
+ if (combinedMask === null) {
+ combinedMask = maskCanvas;
+ } else {
+ // Combine masks (union)
+ var ctx = combinedMask.getContext('2d');
+ ctx.globalCompositeOperation = 'lighter';
+ ctx.drawImage(maskCanvas, 0, 0);
+ }
+ } catch (err) {
+ console.warn(`Point ${i} failed:`, err);
+ }
+ }
+
+ if (combinedMask === null) {
+ throw new Error('No valid masks returned');
+ }
+
+ // Apply the combined mask
+ this.applyMaskCanvas(combinedMask, isAdditive);
+
+ if (isAdditive && this.currentMask) {
+ alertify.success('Added to selection! Shift+brush to add more.');
+ } else {
+ // Offer to float the selection for immediate manipulation (Canva-like)
+ this.offerFloatSelection();
+ }
+
+ } catch (error) {
+ console.error('Brush select error:', error);
+ alertify.error('Selection failed: ' + error.message);
+ } finally {
+ this.isProcessing = false;
+ }
+ }
+
+ /**
+ * Select with a single point (click behavior)
+ */
+ async selectWithSinglePoint(point) {
+ this.isProcessing = true;
+ alertify.message('AI is analyzing...');
+
+ try {
+ var imageData = this.getLayerImageData();
+ var result = await apiService.smartSelect(imageData, point.x, point.y);
+
+ var maskCanvas = await this.decodeMask(result.mask);
+ this.applyMaskCanvas(maskCanvas, false);
+
+ // Offer to float the selection for immediate manipulation
+ this.offerFloatSelection();
+
+ } catch (error) {
+ console.error('Select error:', error);
+ alertify.error('Selection failed: ' + error.message);
+ } finally {
+ this.isProcessing = false;
+ }
+ }
+
+ /**
+ * Show quick-action panel after selection (AI operations, scale, clipboard paste, etc.)
+ */
+ offerFloatSelection() {
+ var imageData = this.getLayerImageData();
+ var maskData = this.maskCanvas
+ ? this.maskCanvas.toDataURL('image/png').split(',')[1]
+ : null;
+ if (maskData) {
+ this.selectionActions.show(imageData, maskData);
+ }
+ }
+
+ /**
+ * Update the current layer canvas with a base64 result from a backend operation.
+ */
+ updateLayerWithResult(base64) {
+ updateLayerWithResult(base64, this);
+ }
+
+ /**
+ * Sample key points from brush stroke for SAM
+ */
+ sampleKeyPoints(points, maxPoints) {
+ if (points.length <= maxPoints) {
+ return points;
+ }
+
+ var sampled = [];
+ var step = (points.length - 1) / (maxPoints - 1);
+
+ for (var i = 0; i < maxPoints; i++) {
+ var idx = Math.round(i * step);
+ sampled.push(points[idx]);
+ }
+
+ return sampled;
+ }
+
+ /**
+ * Decode base64 mask to canvas
+ */
+ decodeMask(maskBase64) {
+ return new Promise((resolve, reject) => {
+ var img = new Image();
+ img.onload = function() {
+ var canvas = document.createElement('canvas');
+ canvas.width = config.layer.width_original;
+ canvas.height = config.layer.height_original;
+ var ctx = canvas.getContext('2d');
+ // Scale the mask image to match the layer dimensions
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+ resolve(canvas);
+ };
+ img.onerror = function(e) {
+ console.error('Failed to decode mask image:', e);
+ reject(e);
+ };
+ img.src = 'data:image/png;base64,' + maskBase64;
+ });
+ }
+
+ /**
+ * Apply a mask canvas as the current selection
+ */
+ applyMaskCanvas(maskCanvas, isAdditive) {
+ // If additive and we have an existing mask, combine them
+ if (isAdditive && this.maskCanvas) {
+ var combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = config.layer.width_original;
+ combinedCanvas.height = config.layer.height_original;
+ var combinedCtx = combinedCanvas.getContext('2d');
+
+ // Draw existing mask
+ combinedCtx.drawImage(this.maskCanvas, 0, 0);
+
+ // Add new mask
+ combinedCtx.globalCompositeOperation = 'lighter';
+ combinedCtx.drawImage(maskCanvas, 0, 0);
+
+ this.maskCanvas = combinedCanvas;
+ } else {
+ this.maskCanvas = maskCanvas;
+ }
+
+ this.currentMask = {
+ canvas: this.maskCanvas
+ };
+
+ // Store globally for AI inpaint and other tools
+ window.smartSelectMask = this.currentMask;
+
+ // Calculate bounds and extract contour
+ this.calculateSelectionBounds();
+ this.extractContourPath();
+
+ config.need_render = true;
+ this.Base_layers.render();
+ }
+
+ /**
+ * Get the current layer's image data as base64
+ */
+ getLayerImageData() {
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext('2d');
+
+ canvas.width = config.layer.width_original;
+ canvas.height = config.layer.height_original;
+ ctx.drawImage(config.layer.link, 0, 0);
+
+ return canvas.toDataURL('image/png').split(',')[1];
+ }
+
+ calculateSelectionBounds() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+
+ var minX = this.maskCanvas.width, minY = this.maskCanvas.height;
+ var maxX = 0, maxY = 0;
+ var hasSelection = false;
+
+ for (var y = 0; y < this.maskCanvas.height; y++) {
+ for (var x = 0; x < this.maskCanvas.width; x++) {
+ var i = (y * this.maskCanvas.width + x) * 4;
+ if (imageData.data[i] > 128) {
+ hasSelection = true;
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ if (hasSelection && maxX > minX && maxY > minY) {
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ this.selectionBounds = {
+ x: config.layer.x + minX * scaleX,
+ y: config.layer.y + minY * scaleY,
+ width: (maxX - minX) * scaleX,
+ height: (maxY - minY) * scaleY,
+ origMinX: minX,
+ origMinY: minY,
+ origMaxX: maxX,
+ origMaxY: maxY
+ };
+ }
+ }
+
+ extractContourPath() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+ var width = this.maskCanvas.width;
+ var height = this.maskCanvas.height;
+ var data = imageData.data;
+
+ this.edgeCanvas = document.createElement('canvas');
+ this.edgeCanvas.width = width;
+ this.edgeCanvas.height = height;
+ var edgeCtx = this.edgeCanvas.getContext('2d');
+ var edgeImageData = edgeCtx.createImageData(width, height);
+ var edgeData = edgeImageData.data;
+
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ var i = (y * width + x) * 4;
+ var isMask = data[i] > 128;
+
+ if (isMask) {
+ var isEdge = false;
+
+ if (x > 0 && data[i - 4] <= 128) isEdge = true;
+ if (x < width - 1 && data[i + 4] <= 128) isEdge = true;
+ if (y > 0 && data[i - width * 4] <= 128) isEdge = true;
+ if (y < height - 1 && data[i + width * 4] <= 128) isEdge = true;
+ if (x == 0 || x == width - 1 || y == 0 || y == height - 1) isEdge = true;
+
+ if (isEdge) {
+ edgeData[i] = 255;
+ edgeData[i + 1] = 255;
+ edgeData[i + 2] = 255;
+ edgeData[i + 3] = 255;
+ }
+ }
+ }
+ }
+
+ edgeCtx.putImageData(edgeImageData, 0, 0);
+ }
+
+ render_overlay(ctx) {
+ // Draw current brush stroke
+ if (this.isDrawing && this.brushPath.length > 1) {
+ ctx.save();
+
+ // Draw brush stroke preview
+ ctx.strokeStyle = 'rgba(0, 200, 255, 0.8)';
+ ctx.lineWidth = 20 / config.ZOOM;
+ ctx.lineCap = 'round';
+ ctx.lineJoin = 'round';
+
+ ctx.beginPath();
+ ctx.moveTo(this.brushPath[0].x, this.brushPath[0].y);
+ for (var i = 1; i < this.brushPath.length; i++) {
+ ctx.lineTo(this.brushPath[i].x, this.brushPath[i].y);
+ }
+ ctx.stroke();
+
+ // Draw dots at sample points
+ ctx.fillStyle = 'rgba(255, 255, 0, 0.9)';
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ for (var j = 0; j < this.brushPoints.length; j++) {
+ var pt = this.brushPoints[j];
+ ctx.beginPath();
+ ctx.arc(
+ config.layer.x + pt.x * scaleX,
+ config.layer.y + pt.y * scaleY,
+ 5 / config.ZOOM, 0, Math.PI * 2
+ );
+ ctx.fill();
+ }
+
+ ctx.restore();
+ }
+
+ // Draw existing selection
+ if (!this.currentMask || !this.maskCanvas) return;
+
+ ctx.save();
+
+ // Draw semi-transparent overlay on non-selected areas
+ var inverseCanvas = document.createElement('canvas');
+ inverseCanvas.width = this.maskCanvas.width;
+ inverseCanvas.height = this.maskCanvas.height;
+ var inverseCtx = inverseCanvas.getContext('2d');
+
+ inverseCtx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+ inverseCtx.fillRect(0, 0, inverseCanvas.width, inverseCanvas.height);
+
+ inverseCtx.globalCompositeOperation = 'destination-out';
+ inverseCtx.drawImage(this.maskCanvas, 0, 0);
+
+ ctx.drawImage(
+ inverseCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+
+ // Draw marching ants
+ if (this.edgeCanvas) {
+ var antsCanvas = document.createElement('canvas');
+ antsCanvas.width = this.maskCanvas.width;
+ antsCanvas.height = this.maskCanvas.height;
+ var antsCtx = antsCanvas.getContext('2d');
+
+ antsCtx.drawImage(this.edgeCanvas, 0, 0);
+ antsCtx.globalCompositeOperation = 'source-in';
+
+ var color = ((Math.floor(this.marchingAntsOffset / 4) % 2) === 0) ? '#00ccff' : '#ffffff';
+ antsCtx.fillStyle = color;
+ antsCtx.fillRect(0, 0, antsCanvas.width, antsCanvas.height);
+
+ ctx.drawImage(
+ antsCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+ }
+
+ ctx.restore();
+ }
+
+ copyToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to copy');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var maskedCanvas = document.createElement('canvas');
+ maskedCanvas.width = layer.width_original;
+ maskedCanvas.height = layer.height_original;
+ var maskedCtx = maskedCanvas.getContext('2d');
+
+ maskedCtx.drawImage(layer.link, 0, 0);
+ maskedCtx.globalCompositeOperation = 'destination-in';
+ maskedCtx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX + 1;
+ var cropHeight = bounds.origMaxY - bounds.origMinY + 1;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ maskedCanvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: Math.round(cropWidth * scaleX),
+ height: Math.round(cropHeight * scaleY),
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: layer.name + ' (Brush Selection)',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('copy_selection_to_layer', 'Copy Selection to Layer', [
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ if (config.TRANSPARENCY == false) {
+ config.TRANSPARENCY = true;
+ this.Base_layers.render();
+ }
+
+ alertify.success('Selection copied to new layer!');
+ }
+
+ cutToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to cut');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var maskedCanvas = document.createElement('canvas');
+ maskedCanvas.width = layer.width_original;
+ maskedCanvas.height = layer.height_original;
+ var maskedCtx = maskedCanvas.getContext('2d');
+
+ maskedCtx.drawImage(layer.link, 0, 0);
+ maskedCtx.globalCompositeOperation = 'destination-in';
+ maskedCtx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX + 1;
+ var cropHeight = bounds.origMaxY - bounds.origMinY + 1;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ maskedCanvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: Math.round(cropWidth * scaleX),
+ height: Math.round(cropHeight * scaleY),
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: layer.name + ' (Cut)',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('cut_selection_to_layer', 'Cut Selection to Layer', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id),
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ if (config.TRANSPARENCY == false) {
+ config.TRANSPARENCY = true;
+ this.Base_layers.render();
+ }
+
+ this.clearSelection();
+ alertify.success('Selection cut to new layer!');
+ }
+
+ deleteSelection() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to delete');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('delete_selection', 'Delete Selection', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id)
+ ])
+ );
+
+ this.clearSelection();
+ alertify.success('Selection deleted!');
+ }
+
+ clearSelection() {
+ this.selectionActions.hide();
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.edgeCanvas = null;
+ this.selectionBounds = null;
+ this.brushPoints = [];
+ this.brushPath = [];
+ window.smartSelectMask = null;
+ config.need_render = true;
+ this.Base_layers.render();
+ }
+
+ on_leave() {
+ this.selectionActions.hide();
+ this.isDrawing = false;
+ this.isProcessing = false;
+ this.brushPath = [];
+ return [];
+ }
+}
+
+export default Brush_select_class;
diff --git a/paintplus/frontend/src/js/tools/bulge_pinch.js b/paintplus/frontend/src/js/tools/bulge_pinch.js
new file mode 100644
index 0000000..d7da4c4
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/bulge_pinch.js
@@ -0,0 +1,118 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import glfx from './../libs/glfx.js';
+import Helper_class from './../libs/helpers.js';
+
+class BulgePinch_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.fx_filter = false;
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'bulge_pinch';
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ this.started = false;
+ }
+
+ load() {
+ this.default_events();
+ }
+
+ default_dragMove(event) {
+ if (config.TOOL.name != this.name)
+ return;
+
+ //mouse cursor
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
+ this.show_mouse_cursor(mouse.x, mouse.y, params.radius, 'circle');
+ }
+
+ mousedown(e) {
+ this.started = false;
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ this.started = true;
+
+ //get canvas from layer
+ this.tmpCanvas = document.createElement('canvas');
+ this.tmpCanvasCtx = this.tmpCanvas.getContext("2d");
+ this.tmpCanvas.width = config.layer.width_original;
+ this.tmpCanvas.height = config.layer.height_original;
+ this.tmpCanvasCtx.drawImage(config.layer.link, 0, 0);
+
+ //apply
+ this.bulgePinch_general(mouse, params.power, params.radius, params.bulge);
+
+ //register tmp canvas for faster redraw
+ config.layer.link_canvas = this.tmpCanvas;
+ config.need_render = true;
+ }
+
+ mouseup(e) {
+ if (this.started == false) {
+ return;
+ }
+ delete config.layer.link_canvas;
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('bulge_pinch_tool', 'Bulge/Pinch Tool', [
+ new app.Actions.Update_layer_image_action(this.tmpCanvas)
+ ])
+ );
+
+ //decrease memory
+ this.tmpCanvas.width = 1;
+ this.tmpCanvas.height = 1;
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ }
+
+ bulgePinch_general(mouse, power, radius, bulge) {
+ if (this.fx_filter == false) {
+ //init glfx lib
+ this.fx_filter = glfx.canvas();
+ }
+
+ var ctx = this.tmpCanvasCtx;
+ var mouse_x = Math.round(mouse.x) - config.layer.x;
+ var mouse_y = Math.round(mouse.y) - config.layer.y;
+
+ //adapt to origin size
+ mouse_x = this.adaptSize(mouse_x, 'width');
+ mouse_y = this.adaptSize(mouse_y, 'height');
+
+ //convert float coords to integers
+ mouse_x = Math.round(mouse_x);
+ mouse_y = Math.round(mouse_y);
+
+ power = power / 100;
+ if (power > 1) {
+ //max 100%
+ power = 1;
+ }
+
+ if (bulge == false)
+ power = -1 * power;
+
+ var texture = this.fx_filter.texture(this.tmpCanvas);
+ this.fx_filter.draw(texture).bulgePinch(mouse_x, mouse_y, radius, power).update(); //effect
+ this.tmpCanvasCtx.clearRect(0, 0, this.tmpCanvas.width, this.tmpCanvas.height);
+ this.tmpCanvasCtx.drawImage(this.fx_filter, 0, 0);
+ }
+
+}
+export default BulgePinch_class;
diff --git a/paintplus/frontend/src/js/tools/clone.js b/paintplus/frontend/src/js/tools/clone.js
new file mode 100644
index 0000000..74694fe
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/clone.js
@@ -0,0 +1,335 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Layer_raster_class from './../modules/layer/raster.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Clone_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Layer_raster = new Layer_raster_class();
+ this.ctx = ctx;
+ this.name = 'clone';
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ this.started = false;
+ this.clone_coords = null;
+ this.pressTimer = null;
+ }
+
+ load() {
+ var _this = this;
+ var is_touch = false;
+
+ //mouse events
+ document.addEventListener('mousedown', function (event) {
+ if(is_touch)
+ return;
+ _this.dragStart(event);
+ });
+ document.addEventListener('mousemove', function (event) {
+ if(is_touch)
+ return;
+ _this.dragMove(event);
+ });
+ document.addEventListener('mouseup', function (event) {
+ if(is_touch)
+ return;
+ _this.dragEnd(event);
+ });
+
+ // collect touch events
+ document.addEventListener('touchstart', function (event) {
+ is_touch = true;
+ _this.dragStart(event);
+ });
+ document.addEventListener('touchmove', function (event) {
+ _this.dragMove(event);
+ });
+ document.addEventListener('touchend', function (event) {
+ _this.dragEnd(event);
+ });
+
+ document.addEventListener('contextmenu', function (event) {
+ _this.mouseRightClick(event);
+ });
+ }
+
+ dragStart(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousedown(event);
+
+ var mouse = this.get_mouse_info(event);
+ if (mouse.click_valid == true) {
+ this.pressTimer = window.setTimeout(function() {
+ //long press success
+ _this.mouseLongClick();
+ }, 2000);
+ }
+ }
+
+ dragMove(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousemove(event);
+
+ //mouse cursor
+ var mouse = _this.get_mouse_info(event);
+ var params = _this.getParams();
+ _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+
+ clearTimeout(this.pressTimer);
+ }
+
+ dragEnd(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mouseup(event);
+
+ clearTimeout(this.pressTimer);
+ }
+
+ on_params_update() {
+ var params = this.getParams();
+ var strict_element = document.getElementById('strict');
+
+ if (params.circle == false) {
+ //hide strict controls
+ strict_element.style.display = 'none';
+ }
+ else {
+ //show strict controls
+ strict_element.style.display = 'block';
+ }
+ }
+
+ mouseRightClick(e) {
+ if (config.TOOL.name != this.name)
+ return;
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+
+ if (e.which == 3 && mouse.valid == true) {
+ e.preventDefault();
+ }
+ if (params.source_layer.value == 'Previous' && config.layer.type === null) {
+ this.Layer_raster.raster();
+ }
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+ if (e.which == 3 && mouse.valid == true) {
+ //right click - save coords
+
+ var mouse_x = this.adaptSize(mouse.x, 'width');
+ var mouse_y = this.adaptSize(mouse.y, 'height');
+
+ this.clone_coords = {
+ x: mouse_x,
+ y: mouse_y,
+ };
+ alertify.success('Source coordinates saved.');
+ }
+ }
+
+ mouseLongClick(){
+ var params = this.getParams();
+ var mouse = this.get_mouse_info();
+
+ if (params.source_layer.value == 'Previous' && config.layer.type === null) {
+ this.Layer_raster.raster();
+ }
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+
+ var mouse_x = this.adaptSize(mouse.x, 'width');
+ var mouse_y = this.adaptSize(mouse.y, 'height');
+
+ this.clone_coords = {
+ x: mouse_x,
+ y: mouse_y,
+ };
+ alertify.success('Source coordinates saved.');
+ }
+
+ mousedown(e) {
+ this.started = false;
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ var layer = config.layer;
+ var previous_layer = this.Base_layers.find_previous(config.layer.id);
+
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ if (params.source_layer.value == 'Previous' && config.layer.type === null) {
+ this.Layer_raster.raster();
+ }
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+ if (this.clone_coords === null) {
+ alertify.error('Source is empty, right click on image or use long press to save source position.');
+ return;
+ }
+ if (layer.width != layer.width_original || layer.height != layer.height_original) {
+ alertify.error('Clone tool disabled for resized image. Please rasterize first.');
+ return;
+ }
+ if (params.source_layer.value == 'Previous' &&
+ (previous_layer.width != previous_layer.width_original
+ || previous_layer.height != previous_layer.height_original)) {
+ alertify.error('Clone tool disabled for resized image. Please rasterize first.');
+ return;
+ }
+ if (params.source_layer.value == 'Previous') {
+ if (previous_layer == null) {
+ alertify.error('Can not find previous layer.');
+ return;
+ }
+ if (previous_layer.type != 'image') {
+ alertify.error('Previous layer must be image, convert it to raster to apply this tool.');
+ return;
+ }
+ }
+ this.started = true;
+
+ //get canvas from layer
+ this.tmpCanvas = document.createElement('canvas');
+ this.tmpCanvasCtx = this.tmpCanvas.getContext("2d");
+ this.tmpCanvas.width = config.layer.width_original;
+ this.tmpCanvas.height = config.layer.height_original;
+ this.tmpCanvasCtx.drawImage(config.layer.link, 0, 0);
+
+ //clone
+ this.clone_general(this.tmpCanvas, this.tmpCanvas, 'click', mouse);
+
+ //register tmp canvas for progress redraw
+ config.layer.link_canvas = this.tmpCanvas;
+ config.need_render = true;
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (this.started == false) {
+ return;
+ }
+
+ //clone
+ this.clone_general(this.tmpCanvas, this.tmpCanvas, 'move', mouse);
+
+ //draw draft preview
+ config.need_render = true;
+ }
+
+ mouseup(e) {
+ if (this.started == false) {
+ return;
+ }
+ delete config.layer.link_canvas;
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('clone_tool', 'Clone Tool', [
+ new app.Actions.Update_layer_image_action(this.tmpCanvas)
+ ])
+ );
+
+ //decrease memory
+ this.tmpCanvas.width = 1;
+ this.tmpCanvas.height = 1;
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ }
+
+ clone_general(canvas_from, canvas_to, type, mouse) {
+ var params = this.getParams();
+
+ var mouse_x = Math.round(mouse.x) - config.layer.x;
+ var mouse_y = Math.round(mouse.y) - config.layer.y;
+ var half = Math.round(params.size / 2);
+
+ //adapt to origin size
+ mouse_x = this.adaptSize(mouse_x, 'width');
+ mouse_y = this.adaptSize(mouse_y, 'height');
+
+ //convert float coords to integers
+ mouse_x = Math.round(mouse_x);
+ mouse_y = Math.round(mouse_y);
+
+ //create source canvas
+ var canvas_source = document.createElement("canvas");
+ var ctx_source = canvas_source.getContext("2d");
+ var w = Math.ceil(params.size);
+ var h = Math.ceil(params.size);
+ canvas_source.width = w;
+ canvas_source.height = h;
+
+ //add data
+ var x_from = Math.round(this.clone_coords.x - (mouse.click_x - mouse_x));
+ var y_from = Math.round(this.clone_coords.y - (mouse.click_y - mouse_y));
+ if (params.anti_aliasing == false) {
+ ctx_source.arc(half, half, half, 0, Math.PI * 2, false);
+ ctx_source.clip();
+ }
+ if (params.source_layer.value == 'Previous') {
+ var previous_layer = this.Base_layers.find_previous(config.layer.id);
+
+ x_from = Math.round(this.clone_coords.x - (mouse.click_x - mouse_x)) - previous_layer.x + config.layer.x;
+ y_from = Math.round(this.clone_coords.y - (mouse.click_y - mouse_y)) - previous_layer.y + config.layer.y;
+
+ ctx_source.drawImage(previous_layer.link, x_from - half, y_from - half, w, h, 0, 0, w, h);
+ }
+ else {
+ ctx_source.drawImage(canvas_from, x_from - half, y_from - half, w, h, 0, 0, w, h);
+ }
+
+ //apply anti aliasing
+ if (params.anti_aliasing == true) {
+ var gradient = ctx_source.createRadialGradient(half, half, 0, half, half, half + 1);
+ gradient.addColorStop(0, 'white');
+ gradient.addColorStop(0.3, 'white');
+ gradient.addColorStop(1, 'transparent');
+ ctx_source.fillStyle = gradient;
+
+ ctx_source.globalCompositeOperation = 'destination-in';
+ ctx_source.fillRect(0, 0, params.size, params.size);
+ ctx_source.globalCompositeOperation = 'source-over';
+ }
+
+ //finish
+ canvas_to.getContext("2d").drawImage(canvas_source, mouse_x - half, mouse_y - half);
+ }
+
+}
+export default Clone_class;
diff --git a/paintplus/frontend/src/js/tools/crop.js b/paintplus/frontend/src/js/tools/crop.js
new file mode 100644
index 0000000..fa53f2d
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/crop.js
@@ -0,0 +1,306 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import GUI_tools_class from './../core/gui/gui-tools.js';
+import Base_gui_class from './../core/base-gui.js';
+import Base_selection_class from './../core/base-selection.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Crop_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ var _this = this;
+ this.Base_layers = new Base_layers_class();
+ this.Base_gui = new Base_gui_class();
+ this.GUI_tools = new GUI_tools_class();
+ this.ctx = ctx;
+ this.name = 'crop';
+ this.selection = {
+ x: null,
+ y: null,
+ width: null,
+ height: null,
+ };
+ var sel_config = {
+ enable_background: true,
+ enable_borders: true,
+ enable_controls: true,
+ crop_lines: true,
+ enable_rotation: false,
+ enable_move: false,
+ data_function: function () {
+ return _this.selection;
+ },
+ };
+ this.mousedown_selection = null;
+ this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
+ }
+
+ load() {
+ this.default_events();
+ }
+
+ default_dragStart(event) {
+ this.is_mousedown_canvas = false;
+ if (config.TOOL.name != this.name)
+ return;
+ if (!event.target.closest('#main_wrapper'))
+ return;
+
+ this.is_mousedown_canvas = true;
+ this.mousedown(event);
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (this.Base_selection.is_drag == false || mouse.click_valid == false)
+ return;
+
+ this.mousedown_selection = JSON.parse(JSON.stringify(this.selection));
+
+ if (this.Base_selection.mouse_lock !== null) {
+ return;
+ }
+
+ //create new selection
+ this.Base_selection.set_selection(mouse.x, mouse.y, 0, 0);
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ if (this.Base_selection.is_drag == false || mouse.is_drag == false) {
+ return;
+ }
+ if (e.type == 'mousedown' && mouse.click_valid == false) {
+ return;
+ }
+ if (this.Base_selection.mouse_lock !== null) {
+ return;
+ }
+
+ var width = mouse.x - mouse.click_x;
+ var height = mouse.y - mouse.click_y;
+
+ if(e.ctrlKey == true || e.metaKey){
+ //ctrl is pressed - crop will be calculated based on global width and height ratio
+ var ratio = config.WIDTH / config.HEIGHT;
+ var width_new = Math.round(height * ratio);
+ var height_new = Math.round(width / ratio);
+
+ if(Math.abs(width * 100 / width_new) > Math.abs(height * 100 / height_new)){
+ if (width * 100 / width_new > 0)
+ height = height_new;
+ else
+ height = -height_new;
+ }
+ else{
+ if (height * 100 / height_new > 0)
+ width = width_new;
+ else
+ width = -width_new;
+ }
+ }
+
+ this.Base_selection.set_selection(null, null, width, height);
+ }
+
+ mouseup(e) {
+ var mouse = this.get_mouse_info(e);
+
+ if (!this.Base_selection.is_drag) {
+ return;
+ }
+ if (e.type == 'mousedown' && mouse.click_valid == false) {
+ return;
+ }
+
+ var width = mouse.x - this.selection.x;
+ var height = mouse.y - this.selection.y;
+
+ if (width == 0 || height == 0) {
+ //cancel selection
+ this.Base_selection.reset_selection();
+ config.need_render = true;
+ return;
+ }
+
+ if (this.selection.width != null) {
+ //make sure coords not negative
+ var details = this.selection;
+ var x = details.x;
+ var y = details.y;
+ if (details.width < 0) {
+ x = x + details.width;
+ }
+ if (details.height < 0) {
+ y = y + details.height;
+ }
+ this.selection = {
+ x: x,
+ y: y,
+ width: Math.abs(details.width),
+ height: Math.abs(details.height),
+ };
+ }
+
+ //control boundaries
+ if (this.selection.x < 0) {
+ this.selection.width += this.selection.x;
+ this.selection.x = 0;
+ }
+ if (this.selection.y < 0) {
+ this.selection.height += this.selection.y;
+ this.selection.y = 0;
+ }
+ if (this.selection.x + this.selection.width > config.WIDTH) {
+ this.selection.width = config.WIDTH - this.selection.x;
+ }
+ if (this.selection.y + this.selection.height > config.HEIGHT) {
+ this.selection.height = config.HEIGHT - this.selection.y;
+ }
+
+ app.State.do_action(
+ new app.Actions.Set_selection_action(this.selection.x, this.selection.y, this.selection.width, this.selection.height, this.mousedown_selection)
+ );
+ }
+
+ render(ctx, layer) {
+ //nothing
+ }
+
+ /**
+ * do actual crop
+ */
+ async on_params_update() {
+ var params = this.getParams();
+ var selection = this.selection;
+ params.crop = true;
+ this.GUI_tools.show_action_attributes();
+
+ if (selection.width == null || selection.width == 0 || selection.height == 0) {
+ alertify.error('Empty selection');
+ return;
+ }
+
+ //check for rotation
+ var rotated_name = false;
+ for (var i in config.layers) {
+ var link = config.layers[i];
+ if (link.type == null)
+ continue;
+
+ if(link.rotate > 0){
+ rotated_name = link.name;
+ break;
+ }
+ }
+ if (rotated_name !== false) {
+ alertify.error('Crop on rotated layer is not supported. Convert it to raster to continue.' + '('+ rotated_name + ')');
+ return;
+ }
+
+ //controll boundaries
+ selection.x = Math.max(selection.x, 0);
+ selection.y = Math.max(selection.y, 0);
+ selection.width = Math.min(selection.width, config.WIDTH);
+ selection.height = Math.min(selection.height, config.HEIGHT);
+
+ let actions = [];
+
+ for (var i in config.layers) {
+ var link = config.layers[i];
+ if (link.type == null)
+ continue;
+
+ let x = link.x;
+ let y = link.y;
+ let width = link.width;
+ let height = link.height;
+ let width_original = link.width_original;
+ let height_original = link.height_original;
+
+ //move
+ x -= parseInt(selection.x);
+ y -= parseInt(selection.y);
+
+ if (link.type == 'image') {
+ //also remove unvisible data
+ let left = 0;
+ if (x < 0)
+ left = -x;
+ let top = 0;
+ if (y < 0)
+ top = -y;
+ let right = 0;
+ if (x + width > selection.width)
+ right = x + width - selection.width;
+ let bottom = 0;
+ if (y + height > selection.height)
+ bottom = y + height - selection.height;
+ let crop_width = width - left - right;
+ let crop_height = height - top - bottom;
+
+ //if image was streched
+ let width_ratio = (width / width_original);
+ let height_ratio = (height / height_original);
+
+ //create smaller canvas
+ let canvas = document.createElement('canvas');
+ let ctx = canvas.getContext("2d");
+ canvas.width = crop_width / width_ratio;
+ canvas.height = crop_height / height_ratio;
+
+ //cut required part
+ ctx.translate(-left / width_ratio, -top / height_ratio);
+ canvas.getContext("2d").drawImage(link.link, 0, 0);
+ ctx.translate(0, 0);
+ actions.push(
+ new app.Actions.Update_layer_image_action(canvas, link.id)
+ );
+
+ //update attributes
+ width = Math.ceil(canvas.width * width_ratio);
+ height = Math.ceil(canvas.height * height_ratio);
+ x += left;
+ y += top;
+ width_original = canvas.width;
+ height_original = canvas.height;
+ }
+
+ actions.push(
+ new app.Actions.Update_layer_action(link.id, {
+ x,
+ y,
+ width,
+ height,
+ width_original,
+ height_original
+ })
+ );
+ }
+
+ actions.push(
+ new app.Actions.Prepare_canvas_action('undo'),
+ new app.Actions.Update_config_action({
+ WIDTH: parseInt(selection.width),
+ HEIGHT: parseInt(selection.height)
+ }),
+ new app.Actions.Prepare_canvas_action('do'),
+ new app.Actions.Reset_selection_action(this.selection)
+ );
+ await app.State.do_action(
+ new app.Actions.Bundle_action('crop_tool', 'Crop Tool', actions)
+ );
+ }
+
+ on_leave() {
+ return [
+ new app.Actions.Reset_selection_action()
+ ];
+ }
+
+}
+
+export default Crop_class;
diff --git a/paintplus/frontend/src/js/tools/desaturate.js b/paintplus/frontend/src/js/tools/desaturate.js
new file mode 100644
index 0000000..0d06d08
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/desaturate.js
@@ -0,0 +1,135 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import ImageFilters from './../libs/imagefilters.js';
+import Helper_class from './../libs/helpers.js';
+
+class Desaturate_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'desaturate';
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ this.started = false;
+ }
+
+ load() {
+ this.default_events();
+ }
+
+ default_dragMove(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousemove(event);
+
+ //mouse cursor
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+ }
+
+ mousedown(e) {
+ this.started = false;
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+ this.started = true;
+
+ //get canvas from layer
+ this.tmpCanvas = document.createElement('canvas');
+ this.tmpCanvasCtx = this.tmpCanvas.getContext("2d");
+ this.tmpCanvas.width = config.layer.width_original;
+ this.tmpCanvas.height = config.layer.height_original;
+
+ this.tmpCanvasCtx.drawImage(config.layer.link, 0, 0);
+
+ //do desaturate
+ this.desaturate_general('click', mouse, params.size, params.anti_aliasing);
+
+ //register tmp canvas for faster redraw
+ config.layer.link_canvas = this.tmpCanvas;
+ config.need_render = true;
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (this.started == false) {
+ return;
+ }
+
+ //do desaturate
+ this.desaturate_general('move', mouse, params.size, params.anti_aliasing);
+
+ //draw draft preview
+ config.need_render = true;
+ }
+
+ mouseup(e) {
+ if (this.started == false) {
+ return;
+ }
+ delete config.layer.link_canvas;
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('desaturate_tool', 'Desaturate Tool', [
+ new app.Actions.Update_layer_image_action(this.tmpCanvas)
+ ])
+ );
+
+ //decrease memory
+ this.tmpCanvas.width = 1;
+ this.tmpCanvas.height = 1;
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ }
+
+ desaturate_general(type, mouse, size, anti_aliasing) {
+ var ctx = this.tmpCanvasCtx;
+ var mouse_x = Math.round(mouse.x) - config.layer.x;
+ var mouse_y = Math.round(mouse.y) - config.layer.y;
+
+ //adapt to origin size
+ mouse_x = this.adaptSize(mouse_x, 'width');
+ mouse_y = this.adaptSize(mouse_y, 'height');
+ var size_w = this.adaptSize(size, 'width');
+ var size_h = this.adaptSize(size, 'height');
+
+ //find center
+ var center_x = mouse_x - Math.round(size_w / 2);
+ var center_y = mouse_y - Math.round(size_h / 2);
+
+ //convert float coords to integers
+ center_x = Math.round(center_x);
+ center_y = Math.round(center_y);
+ mouse_x = Math.round(mouse_x);
+ mouse_y = Math.round(mouse_y);
+
+ var imageData = ctx.getImageData(center_x, center_y, size_w, size_h);
+ var filtered = ImageFilters.GrayScale(imageData); //add effect
+ this.Helper.image_round(this.tmpCanvasCtx, mouse_x, mouse_y, size_w, size_h, filtered, anti_aliasing);
+ }
+
+}
+export default Desaturate_class;
diff --git a/paintplus/frontend/src/js/tools/ellipse_select.js b/paintplus/frontend/src/js/tools/ellipse_select.js
new file mode 100644
index 0000000..724c1e1
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/ellipse_select.js
@@ -0,0 +1,657 @@
+/**
+ * Ellipse Selection Tool - Draw elliptical/circular selections
+ * Drag to create ellipse selection, Shift+Drag for perfect circle
+ * Hold Alt to draw from center
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Ellipse_select_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'ellipse_select';
+
+ // Drawing state
+ this.isDrawing = false;
+ this.startPoint = null;
+ this.currentPoint = null;
+ this.isAdditive = false;
+ this.isCircle = false;
+ this.fromCenter = false;
+
+ // Store the current mask data
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.selectionBounds = null;
+
+ // Marching ants animation
+ this.marchingAntsOffset = 0;
+
+ // Edge canvas for drawing the mask outline
+ this.edgeCanvas = null;
+ }
+
+ load() {
+ var _this = this;
+
+ // Mouse events
+ document.addEventListener('mousedown', function (e) {
+ _this.mousedown(e);
+ });
+ document.addEventListener('mousemove', function (e) {
+ _this.mousemove(e);
+ });
+ document.addEventListener('mouseup', function (e) {
+ _this.mouseup(e);
+ });
+
+ // Touch events
+ document.addEventListener('touchstart', function (e) {
+ _this.mousedown(e);
+ });
+ document.addEventListener('touchmove', function (e) {
+ _this.mousemove(e);
+ });
+ document.addEventListener('touchend', function (e) {
+ _this.mouseup(e);
+ });
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', function(e) {
+ if (config.TOOL.name != _this.name) return;
+ if (_this.Helper.is_input(e.target)) return;
+
+ var code = e.keyCode;
+
+ if (code == 46 && _this.currentMask) {
+ e.preventDefault();
+ _this.deleteSelection();
+ }
+ if (code == 27 && _this.currentMask) {
+ e.preventDefault();
+ _this.clearSelection();
+ }
+ if (code == 67 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.copyToLayer();
+ }
+ if (code == 88 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.cutToLayer();
+ }
+ });
+
+ this.startMarchingAnts();
+ }
+
+ startMarchingAnts() {
+ var _this = this;
+
+ setInterval(function() {
+ if (_this.currentMask || _this.isDrawing) {
+ _this.marchingAntsOffset++;
+ if (_this.marchingAntsOffset > 16) {
+ _this.marchingAntsOffset = 0;
+ }
+ config.need_render = true;
+ }
+ }, 100);
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+
+ if (config.TOOL.name != this.name) return;
+ if (mouse.click_valid == false) return;
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer first');
+ return;
+ }
+
+ this.isDrawing = true;
+ this.isAdditive = e.shiftKey;
+ this.isCircle = false;
+ this.fromCenter = e.altKey;
+
+ this.startPoint = this.getImagePoint(mouse.x, mouse.y);
+ this.currentPoint = this.startPoint;
+
+ config.need_render = true;
+ }
+
+ mousemove(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name != this.name) return;
+
+ var mouse = this.get_mouse_info(e);
+
+ this.currentPoint = this.getImagePoint(mouse.x, mouse.y);
+ this.isCircle = e.shiftKey;
+ this.fromCenter = e.altKey;
+
+ config.need_render = true;
+ }
+
+ mouseup(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name != this.name) return;
+
+ this.isDrawing = false;
+
+ var mouse = this.get_mouse_info(e);
+ this.currentPoint = this.getImagePoint(mouse.x, mouse.y);
+ this.isCircle = e.shiftKey;
+ this.fromCenter = e.altKey;
+
+ // Calculate ellipse bounds
+ var ellipse = this.calculateEllipse();
+
+ if (ellipse.radiusX < 2 || ellipse.radiusY < 2) {
+ alertify.warning('Draw a larger selection');
+ config.need_render = true;
+ return;
+ }
+
+ // Create mask from ellipse
+ this.createMaskFromEllipse(ellipse, this.isAdditive);
+
+ this.startPoint = null;
+ this.currentPoint = null;
+ }
+
+ getImagePoint(mouseX, mouseY) {
+ var x = mouseX - config.layer.x;
+ var y = mouseY - config.layer.y;
+
+ if (config.layer.width != config.layer.width_original) {
+ x = x * (config.layer.width_original / config.layer.width);
+ }
+ if (config.layer.height != config.layer.height_original) {
+ y = y * (config.layer.height_original / config.layer.height);
+ }
+
+ x = Math.max(0, Math.min(config.layer.width_original - 1, Math.round(x)));
+ y = Math.max(0, Math.min(config.layer.height_original - 1, Math.round(y)));
+
+ return { x: x, y: y };
+ }
+
+ calculateEllipse() {
+ if (!this.startPoint || !this.currentPoint) {
+ return { centerX: 0, centerY: 0, radiusX: 0, radiusY: 0 };
+ }
+
+ var x1 = this.startPoint.x;
+ var y1 = this.startPoint.y;
+ var x2 = this.currentPoint.x;
+ var y2 = this.currentPoint.y;
+
+ var width = Math.abs(x2 - x1);
+ var height = Math.abs(y2 - y1);
+
+ // If Shift is held, make it a circle (equal radii)
+ if (this.isCircle) {
+ var maxDim = Math.max(width, height);
+ width = maxDim;
+ height = maxDim;
+ }
+
+ var centerX, centerY, radiusX, radiusY;
+
+ if (this.fromCenter) {
+ // Draw from center
+ centerX = x1;
+ centerY = y1;
+ radiusX = width;
+ radiusY = height;
+ } else {
+ // Draw from corner
+ var left = Math.min(x1, x2);
+ var top = Math.min(y1, y2);
+
+ if (this.isCircle) {
+ // Adjust for circle from corner
+ if (x2 < x1) left = x1 - width;
+ if (y2 < y1) top = y1 - height;
+ }
+
+ centerX = left + width / 2;
+ centerY = top + height / 2;
+ radiusX = width / 2;
+ radiusY = height / 2;
+ }
+
+ return {
+ centerX: centerX,
+ centerY: centerY,
+ radiusX: radiusX,
+ radiusY: radiusY
+ };
+ }
+
+ createMaskFromEllipse(ellipse, isAdditive) {
+ var width = config.layer.width_original;
+ var height = config.layer.height_original;
+
+ var newMaskCanvas = document.createElement('canvas');
+ newMaskCanvas.width = width;
+ newMaskCanvas.height = height;
+ var maskCtx = newMaskCanvas.getContext('2d');
+
+ // Draw filled ellipse
+ maskCtx.fillStyle = 'white';
+ maskCtx.beginPath();
+ maskCtx.ellipse(
+ ellipse.centerX,
+ ellipse.centerY,
+ ellipse.radiusX,
+ ellipse.radiusY,
+ 0, 0, Math.PI * 2
+ );
+ maskCtx.fill();
+
+ // Combine with existing mask if additive
+ if (isAdditive && this.maskCanvas) {
+ var combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = width;
+ combinedCanvas.height = height;
+ var combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.maskCanvas, 0, 0);
+ combinedCtx.globalCompositeOperation = 'lighter';
+ combinedCtx.drawImage(newMaskCanvas, 0, 0);
+
+ this.maskCanvas = combinedCanvas;
+ } else {
+ this.maskCanvas = newMaskCanvas;
+ }
+
+ this.currentMask = {
+ canvas: this.maskCanvas
+ };
+
+ window.smartSelectMask = this.currentMask;
+
+ this.calculateSelectionBounds();
+ this.extractContourPath();
+
+ config.need_render = true;
+ this.Base_layers.render();
+
+ if (isAdditive) {
+ alertify.success('Added to selection!');
+ } else {
+ alertify.success('Selection complete! Hold Shift while dragging to add more.');
+ }
+ }
+
+ calculateSelectionBounds() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+
+ var minX = this.maskCanvas.width, minY = this.maskCanvas.height;
+ var maxX = 0, maxY = 0;
+ var hasSelection = false;
+
+ for (var y = 0; y < this.maskCanvas.height; y++) {
+ for (var x = 0; x < this.maskCanvas.width; x++) {
+ var i = (y * this.maskCanvas.width + x) * 4;
+ if (imageData.data[i] > 128) {
+ hasSelection = true;
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ if (hasSelection && maxX > minX && maxY > minY) {
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ this.selectionBounds = {
+ x: config.layer.x + minX * scaleX,
+ y: config.layer.y + minY * scaleY,
+ width: (maxX - minX) * scaleX,
+ height: (maxY - minY) * scaleY,
+ origMinX: minX,
+ origMinY: minY,
+ origMaxX: maxX,
+ origMaxY: maxY
+ };
+ }
+ }
+
+ extractContourPath() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+ var width = this.maskCanvas.width;
+ var height = this.maskCanvas.height;
+ var data = imageData.data;
+
+ this.edgeCanvas = document.createElement('canvas');
+ this.edgeCanvas.width = width;
+ this.edgeCanvas.height = height;
+ var edgeCtx = this.edgeCanvas.getContext('2d');
+ var edgeImageData = edgeCtx.createImageData(width, height);
+ var edgeData = edgeImageData.data;
+
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ var i = (y * width + x) * 4;
+ var isMask = data[i] > 128;
+
+ if (isMask) {
+ var isEdge = false;
+
+ if (x > 0 && data[i - 4] <= 128) isEdge = true;
+ if (x < width - 1 && data[i + 4] <= 128) isEdge = true;
+ if (y > 0 && data[i - width * 4] <= 128) isEdge = true;
+ if (y < height - 1 && data[i + width * 4] <= 128) isEdge = true;
+ if (x == 0 || x == width - 1 || y == 0 || y == height - 1) isEdge = true;
+
+ if (isEdge) {
+ edgeData[i] = 255;
+ edgeData[i + 1] = 255;
+ edgeData[i + 2] = 255;
+ edgeData[i + 3] = 255;
+ }
+ }
+ }
+ }
+
+ edgeCtx.putImageData(edgeImageData, 0, 0);
+ }
+
+ render_overlay(ctx) {
+ // Draw current ellipse being drawn
+ if (this.isDrawing && this.startPoint && this.currentPoint) {
+ ctx.save();
+
+ var ellipse = this.calculateEllipse();
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ ctx.strokeStyle = '#ffff00';
+ ctx.lineWidth = 2 / config.ZOOM;
+ ctx.setLineDash([5, 5]);
+ ctx.lineDashOffset = -this.marchingAntsOffset;
+
+ ctx.beginPath();
+ ctx.ellipse(
+ config.layer.x + ellipse.centerX * scaleX,
+ config.layer.y + ellipse.centerY * scaleY,
+ ellipse.radiusX * scaleX,
+ ellipse.radiusY * scaleY,
+ 0, 0, Math.PI * 2
+ );
+ ctx.stroke();
+
+ ctx.restore();
+ }
+
+ // Draw existing selection
+ if (!this.currentMask || !this.maskCanvas) return;
+
+ ctx.save();
+
+ // Draw semi-transparent overlay
+ var inverseCanvas = document.createElement('canvas');
+ inverseCanvas.width = this.maskCanvas.width;
+ inverseCanvas.height = this.maskCanvas.height;
+ var inverseCtx = inverseCanvas.getContext('2d');
+
+ inverseCtx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+ inverseCtx.fillRect(0, 0, inverseCanvas.width, inverseCanvas.height);
+
+ inverseCtx.globalCompositeOperation = 'destination-out';
+ inverseCtx.drawImage(this.maskCanvas, 0, 0);
+
+ ctx.drawImage(
+ inverseCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+
+ // Draw marching ants
+ if (this.edgeCanvas) {
+ var antsCanvas = document.createElement('canvas');
+ antsCanvas.width = this.maskCanvas.width;
+ antsCanvas.height = this.maskCanvas.height;
+ var antsCtx = antsCanvas.getContext('2d');
+
+ antsCtx.drawImage(this.edgeCanvas, 0, 0);
+ antsCtx.globalCompositeOperation = 'source-in';
+
+ var color = ((Math.floor(this.marchingAntsOffset / 4) % 2) === 0) ? '#ffff00' : '#ffffff';
+ antsCtx.fillStyle = color;
+ antsCtx.fillRect(0, 0, antsCanvas.width, antsCanvas.height);
+
+ ctx.drawImage(
+ antsCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+ }
+
+ ctx.restore();
+ }
+
+ copyToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to copy');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var canvas = document.createElement('canvas');
+ canvas.width = layer.width_original;
+ canvas.height = layer.height_original;
+ var ctx = canvas.getContext('2d');
+
+ ctx.drawImage(layer.link, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX;
+ var cropHeight = bounds.origMaxY - bounds.origMinY;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ canvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: cropWidth,
+ height: cropHeight,
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: 'Ellipse Selection',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('copy_selection_to_layer', 'Copy Selection to Layer', [
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ alertify.success('Selection copied to new layer!');
+ }
+
+ cutToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to cut');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var canvas = document.createElement('canvas');
+ canvas.width = layer.width_original;
+ canvas.height = layer.height_original;
+ var ctx = canvas.getContext('2d');
+
+ ctx.drawImage(layer.link, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX;
+ var cropHeight = bounds.origMaxY - bounds.origMinY;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ canvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: cropWidth,
+ height: cropHeight,
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: 'Ellipse Cut',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('cut_selection_to_layer', 'Cut Selection to Layer', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id),
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ this.clearSelection();
+ alertify.success('Selection cut to new layer!');
+ }
+
+ deleteSelection() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to delete');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('delete_selection', 'Delete Selection', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id)
+ ])
+ );
+
+ this.clearSelection();
+ alertify.success('Selection deleted!');
+ }
+
+ clearSelection() {
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.edgeCanvas = null;
+ this.selectionBounds = null;
+ this.startPoint = null;
+ this.currentPoint = null;
+ window.smartSelectMask = null;
+ config.need_render = true;
+ this.Base_layers.render();
+ }
+
+ on_leave() {
+ this.isDrawing = false;
+ this.startPoint = null;
+ this.currentPoint = null;
+ return [];
+ }
+}
+
+export default Ellipse_select_class;
diff --git a/paintplus/frontend/src/js/tools/erase.js b/paintplus/frontend/src/js/tools/erase.js
new file mode 100644
index 0000000..6a239e3
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/erase.js
@@ -0,0 +1,207 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Erase_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.ctx = ctx;
+ this.name = 'erase';
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ this.started = false;
+ }
+
+ load() {
+ this.default_events();
+ }
+
+ default_dragMove(event, is_touch) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousemove(event, is_touch);
+
+ //mouse cursor
+ var mouse = this.get_mouse_info(event);
+ var params = this.getParams();
+ if (params.circle == true)
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+ else
+ this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'rect');
+ }
+
+ on_params_update() {
+ var params = this.getParams();
+ var strict_element = document.querySelector('.attributes #strict');
+
+ if (params.circle == false) {
+ //hide strict controls
+ strict_element.style.display = 'none';
+ }
+ else {
+ //show strict controls
+ strict_element.style.display = 'block';
+ }
+ }
+
+ mousedown(e) {
+ this.started = false;
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.is_vector == true) {
+ alertify.error('Layer is vector, convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+ this.started = true;
+
+ //get canvas from layer
+ this.tmpCanvas = document.createElement('canvas');
+ this.tmpCanvasCtx = this.tmpCanvas.getContext("2d");
+ this.tmpCanvas.width = config.layer.width_original;
+ this.tmpCanvas.height = config.layer.height_original;
+ this.tmpCanvasCtx.drawImage(config.layer.link, 0, 0);
+
+ this.tmpCanvasCtx.scale(
+ config.layer.width_original / config.layer.width,
+ config.layer.height_original / config.layer.height
+ );
+
+ //do erase
+ this.erase_general(this.tmpCanvasCtx, 'click', mouse, params.size, params.strict, params.circle);
+
+ //register tmp canvas for faster redraw
+ config.layer.link_canvas = this.tmpCanvas;
+ config.need_render = true;
+ }
+
+ mousemove(e, is_touch) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (this.started == false) {
+ return;
+ }
+ if (mouse.click_x == mouse.x && mouse.click_y == mouse.y) {
+ //same coordinates
+ return;
+ }
+
+ //do erase
+ this.erase_general(this.tmpCanvasCtx, 'move', mouse, params.size, params.strict, params.circle, is_touch);
+
+ //draw draft preview
+ config.need_render = true;
+ }
+
+ mouseup(e) {
+ if (this.started == false) {
+ return;
+ }
+ delete config.layer.link_canvas;
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('erase_tool', 'Erase Tool', [
+ new app.Actions.Update_layer_image_action(this.tmpCanvas)
+ ])
+ );
+
+ //decrease memory
+ this.tmpCanvas.width = 1;
+ this.tmpCanvas.height = 1;
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ }
+
+ erase_general(ctx, type, mouse, size, strict, is_circle, is_touch) {
+ var mouse_x = Math.round(mouse.x) - config.layer.x;
+ var mouse_y = Math.round(mouse.y) - config.layer.y;
+ var alpha = config.ALPHA;
+ var mouse_last_x = parseInt(mouse.last_x) - config.layer.x;
+ var mouse_last_y = parseInt(mouse.last_y) - config.layer.y;
+
+ ctx.beginPath();
+ ctx.lineWidth = size;
+ ctx.lineCap = 'round';
+ ctx.lineJoin = 'round';
+ if (alpha < 255)
+ ctx.strokeStyle = "rgba(255, 255, 255, " + alpha / 255 / 10 + ")";
+ else
+ ctx.strokeStyle = "rgba(255, 255, 255, 1)";
+
+ if (is_circle == false) {
+ //rectangle
+ var size_half = Math.ceil(size / 2);
+ if (size == 1) {
+ //single cell mode
+ mouse_x = Math.floor(mouse.x) - config.layer.x;
+ mouse_y = Math.floor(mouse.y) - config.layer.y;
+ size_half = 0;
+ }
+ ctx.save();
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.fillStyle = "rgba(255, 255, 255, " + alpha / 255 + ")";
+ ctx.fillRect(mouse_x - size_half, mouse_y - size_half, size, size);
+ ctx.restore();
+ }
+ else {
+ //circle
+ ctx.save();
+
+ if (strict == false) {
+ var radgrad = ctx.createRadialGradient(
+ mouse_x, mouse_y, size / 8,
+ mouse_x, mouse_y, size / 2);
+ if (type == 'click')
+ radgrad.addColorStop(0, "rgba(255, 255, 255, " + alpha / 255 + ")");
+ else if (type == 'move')
+ radgrad.addColorStop(0, "rgba(255, 255, 255, " + alpha / 255 / 2 + ")");
+ radgrad.addColorStop(1, "rgba(255, 255, 255, 0)");
+ }
+
+ //set Composite
+ ctx.globalCompositeOperation = 'destination-out';
+ if (strict == true)
+ ctx.fillStyle = "rgba(255, 255, 255, " + alpha / 255 + ")";
+ else
+ ctx.fillStyle = radgrad;
+ ctx.beginPath();
+ ctx.arc(mouse_x, mouse_y, size / 2, 0, Math.PI * 2, true);
+ ctx.fill();
+ ctx.restore();
+ }
+
+ //extra work if mouse moving fast - fill gaps
+ if (type == 'move' && is_circle == true && mouse_last_x != false && mouse_last_y != false && is_touch !== true) {
+ ctx.save();
+ ctx.globalCompositeOperation = 'destination-out';
+
+ ctx.beginPath();
+ ctx.moveTo(mouse_last_x, mouse_last_y);
+ ctx.lineTo(mouse_x, mouse_y);
+ ctx.stroke();
+
+ ctx.restore();
+ }
+ }
+
+}
+export default Erase_class;
diff --git a/paintplus/frontend/src/js/tools/fill.js b/paintplus/frontend/src/js/tools/fill.js
new file mode 100644
index 0000000..d2bdc4a
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/fill.js
@@ -0,0 +1,231 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Fill_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'fill';
+ this.working = false;
+ }
+
+ dragStart(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousedown(event);
+ }
+
+ load() {
+ var _this = this;
+
+ //mouse events
+ document.addEventListener('mousedown', function (event) {
+ _this.dragStart(event);
+ });
+
+ // collect touch events
+ document.addEventListener('touchstart', function (event) {
+ _this.dragStart(event);
+ });
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+
+ this.fill(mouse);
+ }
+
+ async fill(mouse) {
+ var params = this.getParams();
+
+ if(this.working == true){
+ return;
+ }
+
+ if (config.layer.type != 'image' && config.layer.type !== null) {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.is_vector == true) {
+ alertify.error('Layer is vector, convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.ALPHA == 0) {
+ alertify.error('Color alpha value can not be zero.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ if (config.layer.type !== null) {
+ canvas.width = config.layer.width_original;
+ canvas.height = config.layer.height_original;
+ ctx.drawImage(config.layer.link, 0, 0);
+ }
+ else {
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ }
+
+ var mouse_x = Math.round(mouse.x) - config.layer.x;
+ var mouse_y = Math.round(mouse.y) - config.layer.y;
+
+ //adapt to origin size
+ mouse_x = this.adaptSize(mouse_x, 'width');
+ mouse_y = this.adaptSize(mouse_y, 'height');
+
+ //convert float coords to integers
+ mouse_x = Math.round(mouse_x);
+ mouse_y = Math.round(mouse_y);
+
+ var color_to = this.Helper.hexToRgb(config.COLOR);
+ color_to.a = config.ALPHA;
+
+ //change
+ this.working = true;
+ this.fill_general(ctx, config.WIDTH, config.HEIGHT,
+ mouse_x, mouse_y, color_to, params.power, params.anti_aliasing, params.contiguous);
+
+ if (config.layer.type != null) {
+ //update
+ app.State.do_action(
+ new app.Actions.Bundle_action('fill_tool', 'Fill Tool', [
+ new app.Actions.Update_layer_image_action(canvas)
+ ])
+ );
+ }
+ else {
+ //create new
+ var params = [];
+ params.type = 'image';
+ params.name = 'Fill';
+ params.data = canvas.toDataURL("image/png");
+ params.x = parseInt(canvas.dataset.x) || 0;
+ params.y = parseInt(canvas.dataset.y) || 0;
+ params.width = canvas.width;
+ params.height = canvas.height;
+ app.State.do_action(
+ new app.Actions.Bundle_action('fill_tool', 'Fill Tool', [
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+ }
+
+ //prevent crash bug on touch screen - hard to explain and debug
+ await new Promise(r => setTimeout(r, 10));
+ this.working = false;
+ }
+
+ fill_general(context, W, H, x, y, color_to, sensitivity, anti_aliasing, contiguous = false) {
+ sensitivity = sensitivity * 255 / 100; //convert to 0-255 interval
+ x = parseInt(x);
+ y = parseInt(y);
+ var canvasTemp = document.createElement('canvas');
+ canvasTemp.width = W;
+ canvasTemp.height = H;
+ var ctxTemp = canvasTemp.getContext("2d");
+
+ ctxTemp.rect(0, 0, W, H);
+ ctxTemp.fillStyle = "rgba(255, 255, 255, 0)";
+ ctxTemp.fill();
+
+ var img_tmp = ctxTemp.getImageData(0, 0, W, H);
+ var imgData_tmp = img_tmp.data;
+
+ var img = context.getImageData(0, 0, W, H);
+ var imgData = img.data;
+ var k = ((y * (img.width * 4)) + (x * 4));
+ var dx = [0, -1, +1, 0];
+ var dy = [-1, 0, 0, +1];
+ var color_from = {
+ r: imgData[k + 0],
+ g: imgData[k + 1],
+ b: imgData[k + 2],
+ a: imgData[k + 3]
+ };
+ if (color_from.r == color_to.r && color_from.g == color_to.g
+ && color_from.b == color_to.b && color_from.a == color_to.a) {
+ return false;
+ }
+
+ if (contiguous == false) {
+ //check only nearest pixels
+ var stack = [];
+ stack.push([x, y]);
+ while (stack.length > 0) {
+ var curPoint = stack.pop();
+ for (var i = 0; i < 4; i++) {
+ var nextPointX = curPoint[0] + dx[i];
+ var nextPointY = curPoint[1] + dy[i];
+ if (nextPointX < 0 || nextPointY < 0 || nextPointX >= W || nextPointY >= H)
+ continue;
+ var k = (nextPointY * W + nextPointX) * 4;
+ if (imgData_tmp[k + 3] != 0)
+ continue; //already parsed
+
+ //check
+ if (Math.abs(imgData[k + 0] - color_from.r) <= sensitivity &&
+ Math.abs(imgData[k + 1] - color_from.g) <= sensitivity &&
+ Math.abs(imgData[k + 2] - color_from.b) <= sensitivity &&
+ Math.abs(imgData[k + 3] - color_from.a) <= sensitivity) {
+
+ //fill pixel
+ imgData_tmp[k] = color_to.r; //r
+ imgData_tmp[k + 1] = color_to.g; //g
+ imgData_tmp[k + 2] = color_to.b; //b
+ imgData_tmp[k + 3] = color_to.a; //a
+
+ stack.push([nextPointX, nextPointY]);
+ }
+ }
+ }
+ }
+ else {
+ //global mode - contiguous
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+
+ //imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]);
+
+ for (var j = 0; j < 4; j++) {
+ var k = i + j;
+
+ if (Math.abs(imgData[k] - color_from.r) <= sensitivity
+ && Math.abs(imgData[k + 1] - color_from.g) <= sensitivity
+ && Math.abs(imgData[k + 2] - color_from.b) <= sensitivity
+ && Math.abs(imgData[k + 3] - color_from.a) <= sensitivity) {
+ imgData_tmp[k] = color_to.r; //r
+ imgData_tmp[k + 1] = color_to.g; //g
+ imgData_tmp[k + 2] = color_to.b; //b
+ imgData_tmp[k + 3] = color_to.a; //a
+ }
+ }
+ }
+ }
+
+ ctxTemp.putImageData(img_tmp, 0, 0);
+ if (anti_aliasing == true) {
+ context.filter = 'blur(1px)';
+ }
+ context.drawImage(canvasTemp, 0, 0);
+ }
+
+}
+export default Fill_class;
diff --git a/paintplus/frontend/src/js/tools/gradient.js b/paintplus/frontend/src/js/tools/gradient.js
new file mode 100644
index 0000000..0a1008c
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/gradient.js
@@ -0,0 +1,184 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+
+class Gradient_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'gradient';
+ this.layer = {};
+ }
+
+ load() {
+ this.default_events();
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.click_valid == false)
+ return;
+
+ var name = this.name;
+ var is_vector = false;
+ if (params.radial == true) {
+ name = 'Radial gradient';
+ is_vector = true;
+ }
+
+ //register new object - current layer is not ours or params changed
+ this.layer = {
+ type: this.name,
+ name: this.Helper.ucfirst(name) + ' #' + this.Base_layers.auto_increment,
+ params: this.clone(this.getParams()),
+ status: 'draft',
+ render_function: [this.name, 'render'],
+ x: mouse.x,
+ y: mouse.y,
+ rotate: null,
+ is_vector: is_vector,
+ color: null,
+ data: {
+ center_x: mouse.x,
+ center_y: mouse.y,
+ },
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('new_gradient_layer', 'New Gradient Layer', [
+ new app.Actions.Insert_layer_action(this.layer)
+ ])
+ );
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ var width = mouse.x - this.layer.x;
+ var height = mouse.y - this.layer.y;
+
+ if (params.radial == true) {
+ config.layer.x = this.layer.data.center_x - width;
+ config.layer.y = this.layer.data.center_y - height;
+ config.layer.width = width * 2;
+ config.layer.height = height * 2;
+ }
+ else {
+ config.layer.width = width;
+ config.layer.height = height;
+ }
+
+ this.Base_layers.render();
+ }
+
+ mouseup(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.click_valid == false) {
+ config.layer.status = null;
+ return;
+ }
+
+ var width = mouse.x - this.layer.x;
+ var height = mouse.y - this.layer.y;
+
+ if (width == 0 && height == 0) {
+ //same coordinates - cancel
+ app.State.scrap_last_action();
+ return;
+ }
+
+ let new_settings = {};
+ if (params.radial == true) {
+ new_settings = {
+ x: this.layer.data.center_x - width,
+ y: this.layer.data.center_y - height,
+ width: width * 2,
+ height: height * 2
+ }
+ }
+ else {
+ new_settings = {
+ width,
+ height
+ }
+ }
+ new_settings.status = null;
+
+ app.State.do_action(
+ new app.Actions.Update_layer_action(config.layer.id, new_settings),
+ { merge_with_history: 'new_gradient_layer' }
+ );
+
+ this.Base_layers.render();
+ }
+
+ render(ctx, layer) {
+ if (layer.width == 0 && layer.height == 0)
+ return;
+
+ var params = layer.params;
+ var power = params.radial_power;
+ if(power > 99){
+ power = 99;
+ }
+ var alpha = params.alpha / 100 * 255;
+ if(power > 255){
+ power = 255;
+ }
+
+ var color1 = params.color_1;
+ var color2 = params.color_2;
+ var radial = params.radial;
+
+ var color2_rgb = this.Helper.hexToRgb(color2);
+
+ var width = layer.x + layer.width - 1;
+ var height = layer.y + layer.height - 1;
+
+ if (radial == false) {
+ //linear
+ ctx.beginPath();
+ ctx.rect(0, 0, config.WIDTH, config.HEIGHT);
+ var grd = ctx.createLinearGradient(
+ layer.x, layer.y,
+ width, height);
+
+ grd.addColorStop(0, color1);
+ grd.addColorStop(1, "rgba(" + color2_rgb.r + ", " + color2_rgb.g + ", "
+ + color2_rgb.b + ", " + alpha / 255 + ")");
+ ctx.fillStyle = grd;
+ ctx.fill();
+ }
+ else {
+ //radial
+ var dist_x = layer.width;
+ var dist_y = layer.height;
+ var center_x = layer.x + Math.round(layer.width / 2);
+ var center_y = layer.y + Math.round(layer.height / 2);
+ var distance = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y));
+ var radgrad = ctx.createRadialGradient(
+ center_x, center_y, distance * power / 100,
+ center_x, center_y, distance);
+
+ radgrad.addColorStop(0, color1);
+ radgrad.addColorStop(1, "rgba(" + color2_rgb.r + ", " + color2_rgb.g + ", "
+ + color2_rgb.b + ", " + alpha / 255 + ")");
+ ctx.fillStyle = radgrad;
+ ctx.fillRect(0, 0, config.WIDTH, config.HEIGHT);
+ }
+ }
+
+}
+export default Gradient_class;
diff --git a/paintplus/frontend/src/js/tools/lasso.js b/paintplus/frontend/src/js/tools/lasso.js
new file mode 100644
index 0000000..3676e6a
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/lasso.js
@@ -0,0 +1,597 @@
+/**
+ * Lasso Selection Tool - Freehand selection by drawing
+ * Draw around an area to select it, Shift+Draw to add to selection
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Lasso_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'lasso';
+
+ // Drawing state
+ this.isDrawing = false;
+ this.points = [];
+
+ // Store the current mask data
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.selectionBounds = null;
+
+ // Marching ants animation
+ this.marchingAntsOffset = 0;
+
+ // Edge canvas for drawing the mask outline
+ this.edgeCanvas = null;
+ }
+
+ load() {
+ var _this = this;
+
+ // Mouse events
+ document.addEventListener('mousedown', function (e) {
+ _this.mousedown(e);
+ });
+ document.addEventListener('mousemove', function (e) {
+ _this.mousemove(e);
+ });
+ document.addEventListener('mouseup', function (e) {
+ _this.mouseup(e);
+ });
+
+ // Touch events
+ document.addEventListener('touchstart', function (e) {
+ _this.mousedown(e);
+ });
+ document.addEventListener('touchmove', function (e) {
+ _this.mousemove(e);
+ });
+ document.addEventListener('touchend', function (e) {
+ _this.mouseup(e);
+ });
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', function(e) {
+ if (config.TOOL.name != _this.name) return;
+ if (_this.Helper.is_input(e.target)) return;
+
+ var code = e.keyCode;
+
+ if (code == 46 && _this.currentMask) {
+ e.preventDefault();
+ _this.deleteSelection();
+ }
+ if (code == 27 && _this.currentMask) {
+ e.preventDefault();
+ _this.clearSelection();
+ }
+ if (code == 67 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.copyToLayer();
+ }
+ if (code == 88 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.cutToLayer();
+ }
+ });
+
+ this.startMarchingAnts();
+ }
+
+ startMarchingAnts() {
+ var _this = this;
+
+ setInterval(function() {
+ if (_this.currentMask || _this.isDrawing) {
+ _this.marchingAntsOffset++;
+ if (_this.marchingAntsOffset > 16) {
+ _this.marchingAntsOffset = 0;
+ }
+ config.need_render = true;
+ }
+ }, 100);
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+
+ if (config.TOOL.name != this.name) return;
+ if (mouse.click_valid == false) return;
+
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer first');
+ return;
+ }
+
+ this.isDrawing = true;
+ this.points = [];
+
+ // Get point relative to image
+ var point = this.getImagePoint(mouse.x, mouse.y);
+ if (point) {
+ this.points.push(point);
+ }
+
+ config.need_render = true;
+ }
+
+ mousemove(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name != this.name) return;
+
+ var mouse = this.get_mouse_info(e);
+
+ var point = this.getImagePoint(mouse.x, mouse.y);
+ if (point) {
+ this.points.push(point);
+ }
+
+ config.need_render = true;
+ }
+
+ mouseup(e) {
+ if (!this.isDrawing) return;
+ if (config.TOOL.name != this.name) return;
+
+ this.isDrawing = false;
+
+ if (this.points.length < 3) {
+ alertify.warning('Draw a larger selection');
+ this.points = [];
+ config.need_render = true;
+ return;
+ }
+
+ // Check for Shift key - additive selection
+ var isAdditive = e.shiftKey;
+
+ // Create mask from points
+ this.createMaskFromPoints(isAdditive);
+
+ this.points = [];
+ }
+
+ getImagePoint(mouseX, mouseY) {
+ var x = mouseX - config.layer.x;
+ var y = mouseY - config.layer.y;
+
+ // Adjust for layer scaling
+ if (config.layer.width != config.layer.width_original) {
+ x = x * (config.layer.width_original / config.layer.width);
+ }
+ if (config.layer.height != config.layer.height_original) {
+ y = y * (config.layer.height_original / config.layer.height);
+ }
+
+ // Clamp to image bounds
+ x = Math.max(0, Math.min(config.layer.width_original - 1, Math.round(x)));
+ y = Math.max(0, Math.min(config.layer.height_original - 1, Math.round(y)));
+
+ return { x: x, y: y };
+ }
+
+ createMaskFromPoints(isAdditive) {
+ var width = config.layer.width_original;
+ var height = config.layer.height_original;
+
+ // Create new mask canvas
+ var newMaskCanvas = document.createElement('canvas');
+ newMaskCanvas.width = width;
+ newMaskCanvas.height = height;
+ var maskCtx = newMaskCanvas.getContext('2d');
+
+ // Draw filled polygon
+ maskCtx.fillStyle = 'white';
+ maskCtx.beginPath();
+ maskCtx.moveTo(this.points[0].x, this.points[0].y);
+ for (var i = 1; i < this.points.length; i++) {
+ maskCtx.lineTo(this.points[i].x, this.points[i].y);
+ }
+ maskCtx.closePath();
+ maskCtx.fill();
+
+ // If additive and we have an existing mask, combine them
+ if (isAdditive && this.maskCanvas) {
+ var combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = width;
+ combinedCanvas.height = height;
+ var combinedCtx = combinedCanvas.getContext('2d');
+
+ combinedCtx.drawImage(this.maskCanvas, 0, 0);
+ combinedCtx.globalCompositeOperation = 'lighter';
+ combinedCtx.drawImage(newMaskCanvas, 0, 0);
+
+ this.maskCanvas = combinedCanvas;
+ } else {
+ this.maskCanvas = newMaskCanvas;
+ }
+
+ this.currentMask = {
+ canvas: this.maskCanvas
+ };
+
+ window.smartSelectMask = this.currentMask;
+
+ this.calculateSelectionBounds();
+ this.extractContourPath();
+
+ config.need_render = true;
+ this.Base_layers.render();
+
+ if (isAdditive) {
+ alertify.success('Added to selection!');
+ } else {
+ alertify.success('Selection complete! Shift+Draw to add more.');
+ }
+ }
+
+ calculateSelectionBounds() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+
+ var minX = this.maskCanvas.width, minY = this.maskCanvas.height;
+ var maxX = 0, maxY = 0;
+ var hasSelection = false;
+
+ for (var y = 0; y < this.maskCanvas.height; y++) {
+ for (var x = 0; x < this.maskCanvas.width; x++) {
+ var i = (y * this.maskCanvas.width + x) * 4;
+ if (imageData.data[i] > 128) {
+ hasSelection = true;
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ if (hasSelection && maxX > minX && maxY > minY) {
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ this.selectionBounds = {
+ x: config.layer.x + minX * scaleX,
+ y: config.layer.y + minY * scaleY,
+ width: (maxX - minX) * scaleX,
+ height: (maxY - minY) * scaleY,
+ origMinX: minX,
+ origMinY: minY,
+ origMaxX: maxX,
+ origMaxY: maxY
+ };
+ }
+ }
+
+ extractContourPath() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+ var width = this.maskCanvas.width;
+ var height = this.maskCanvas.height;
+ var data = imageData.data;
+
+ this.edgeCanvas = document.createElement('canvas');
+ this.edgeCanvas.width = width;
+ this.edgeCanvas.height = height;
+ var edgeCtx = this.edgeCanvas.getContext('2d');
+ var edgeImageData = edgeCtx.createImageData(width, height);
+ var edgeData = edgeImageData.data;
+
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ var i = (y * width + x) * 4;
+ var isMask = data[i] > 128;
+
+ if (isMask) {
+ var isEdge = false;
+
+ if (x > 0 && data[i - 4] <= 128) isEdge = true;
+ if (x < width - 1 && data[i + 4] <= 128) isEdge = true;
+ if (y > 0 && data[i - width * 4] <= 128) isEdge = true;
+ if (y < height - 1 && data[i + width * 4] <= 128) isEdge = true;
+ if (x == 0 || x == width - 1 || y == 0 || y == height - 1) isEdge = true;
+
+ if (isEdge) {
+ edgeData[i] = 255;
+ edgeData[i + 1] = 255;
+ edgeData[i + 2] = 255;
+ edgeData[i + 3] = 255;
+ }
+ }
+ }
+ }
+
+ edgeCtx.putImageData(edgeImageData, 0, 0);
+ }
+
+ render_overlay(ctx) {
+ // Draw current drawing path
+ if (this.isDrawing && this.points.length > 1) {
+ ctx.save();
+
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ ctx.strokeStyle = '#00ffff';
+ ctx.lineWidth = 2 / config.ZOOM;
+ ctx.setLineDash([5, 5]);
+ ctx.lineDashOffset = -this.marchingAntsOffset;
+
+ ctx.beginPath();
+ ctx.moveTo(
+ config.layer.x + this.points[0].x * scaleX,
+ config.layer.y + this.points[0].y * scaleY
+ );
+ for (var i = 1; i < this.points.length; i++) {
+ ctx.lineTo(
+ config.layer.x + this.points[i].x * scaleX,
+ config.layer.y + this.points[i].y * scaleY
+ );
+ }
+ ctx.stroke();
+
+ ctx.restore();
+ }
+
+ // Draw existing selection
+ if (!this.currentMask || !this.maskCanvas) return;
+
+ ctx.save();
+
+ // Draw semi-transparent overlay
+ var inverseCanvas = document.createElement('canvas');
+ inverseCanvas.width = this.maskCanvas.width;
+ inverseCanvas.height = this.maskCanvas.height;
+ var inverseCtx = inverseCanvas.getContext('2d');
+
+ inverseCtx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+ inverseCtx.fillRect(0, 0, inverseCanvas.width, inverseCanvas.height);
+
+ inverseCtx.globalCompositeOperation = 'destination-out';
+ inverseCtx.drawImage(this.maskCanvas, 0, 0);
+
+ ctx.drawImage(
+ inverseCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+
+ // Draw marching ants
+ if (this.edgeCanvas) {
+ var antsCanvas = document.createElement('canvas');
+ antsCanvas.width = this.maskCanvas.width;
+ antsCanvas.height = this.maskCanvas.height;
+ var antsCtx = antsCanvas.getContext('2d');
+
+ antsCtx.drawImage(this.edgeCanvas, 0, 0);
+ antsCtx.globalCompositeOperation = 'source-in';
+
+ var color = ((Math.floor(this.marchingAntsOffset / 4) % 2) === 0) ? '#00ffff' : '#ffffff';
+ antsCtx.fillStyle = color;
+ antsCtx.fillRect(0, 0, antsCanvas.width, antsCanvas.height);
+
+ ctx.drawImage(
+ antsCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+ }
+
+ ctx.restore();
+ }
+
+ copyToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to copy');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var canvas = document.createElement('canvas');
+ canvas.width = layer.width_original;
+ canvas.height = layer.height_original;
+ var ctx = canvas.getContext('2d');
+
+ ctx.drawImage(layer.link, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX;
+ var cropHeight = bounds.origMaxY - bounds.origMinY;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ canvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: cropWidth,
+ height: cropHeight,
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: 'Lasso Selection',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('copy_selection_to_layer', 'Copy Selection to Layer', [
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ alertify.success('Selection copied to new layer!');
+ }
+
+ cutToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to cut');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var canvas = document.createElement('canvas');
+ canvas.width = layer.width_original;
+ canvas.height = layer.height_original;
+ var ctx = canvas.getContext('2d');
+
+ ctx.drawImage(layer.link, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX;
+ var cropHeight = bounds.origMaxY - bounds.origMinY;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ canvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: cropWidth,
+ height: cropHeight,
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: 'Lasso Cut',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('cut_selection_to_layer', 'Cut Selection to Layer', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id),
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ this.clearSelection();
+ alertify.success('Selection cut to new layer!');
+ }
+
+ deleteSelection() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to delete');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('delete_selection', 'Delete Selection', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id)
+ ])
+ );
+
+ this.clearSelection();
+ alertify.success('Selection deleted!');
+ }
+
+ clearSelection() {
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.edgeCanvas = null;
+ this.selectionBounds = null;
+ this.points = [];
+ window.smartSelectMask = null;
+ config.need_render = true;
+ this.Base_layers.render();
+ }
+
+ on_leave() {
+ this.points = [];
+ this.isDrawing = false;
+ return [];
+ }
+}
+
+export default Lasso_class;
diff --git a/paintplus/frontend/src/js/tools/magic_erase.js b/paintplus/frontend/src/js/tools/magic_erase.js
new file mode 100644
index 0000000..6a1c891
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/magic_erase.js
@@ -0,0 +1,214 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Magic_erase_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.ctx = ctx;
+ this.name = 'magic_erase';
+ this.working = false;
+ }
+
+ dragStart(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousedown(event);
+ }
+
+ load() {
+ var _this = this;
+
+ //mouse events
+ document.addEventListener('mousedown', function (event) {
+ _this.dragStart(event);
+ });
+
+ // collect touch events
+ document.addEventListener('touchstart', function (event) {
+ _this.dragStart(event);
+ });
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false) {
+ return;
+ }
+ if (config.layer.rotate || 0 > 0) {
+ alertify.error('Erase on rotate object is disabled. Please rasterize first.');
+ return;
+ }
+
+ this.magic_erase(mouse);
+ }
+
+ async magic_erase(mouse) {
+ var params = this.getParams();
+
+ if(this.working == true){
+ return;
+ }
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ if (config.layer.is_vector == true) {
+ alertify.error('Layer is vector, convert it to raster to apply this tool.');
+ return;
+ }
+
+ //get canvas from layer
+ var canvas = document.createElement('canvas');
+ var ctx = canvas.getContext("2d");
+ canvas.width = config.layer.width_original;
+ canvas.height = config.layer.height_original;
+ ctx.drawImage(config.layer.link, 0, 0);
+
+ var mouse_x = Math.round(mouse.x) - config.layer.x;
+ var mouse_y = Math.round(mouse.y) - config.layer.y;
+
+ //adapt to origin size
+ mouse_x = this.adaptSize(mouse_x, 'width');
+ mouse_y = this.adaptSize(mouse_y, 'height');
+
+ //convert float coords to integers
+ mouse_x = Math.round(mouse_x);
+ mouse_y = Math.round(mouse_y);
+
+ //change
+ this.working = true;
+ this.magic_erase_general(ctx, config.WIDTH, config.HEIGHT,
+ mouse_x, mouse_y, params.power, params.anti_aliasing, params.contiguous);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('magic_erase_tool', 'Magic Eraser Tool', [
+ new app.Actions.Update_layer_image_action(canvas)
+ ])
+ );
+ //prevent crash bug on touch screen - hard to explain and debug
+ await new Promise(r => setTimeout(r, 10));
+ this.working = false;
+ }
+
+ /**
+ * apply magic erase
+ *
+ * @param {ctx} context
+ * @param {int} W
+ * @param {int} H
+ * @param {int} x
+ * @param {int} y
+ * @param {int} sensitivity max 100
+ * @param {Boolean} anti_aliasing
+ */
+ magic_erase_general(context, W, H, x, y, sensitivity, anti_aliasing, contiguous = false) {
+ sensitivity = sensitivity * 255 / 100; //convert to 0-255 interval
+ x = parseInt(x);
+ y = parseInt(y);
+ var canvasTemp = document.createElement('canvas');
+ canvasTemp.width = W;
+ canvasTemp.height = H;
+ var ctxTemp = canvasTemp.getContext("2d");
+
+ ctxTemp.rect(0, 0, W, H);
+ ctxTemp.fillStyle = "rgba(255, 255, 255, 0)";
+ ctxTemp.fill();
+
+ var img_tmp = ctxTemp.getImageData(0, 0, W, H);
+ var imgData_tmp = img_tmp.data;
+
+ var img = context.getImageData(0, 0, W, H);
+ var imgData = img.data;
+ var k = ((y * (img.width * 4)) + (x * 4));
+ var dx = [0, -1, +1, 0];
+ var dy = [-1, 0, 0, +1];
+ var color_to = {
+ r: 255,
+ g: 255,
+ b: 255,
+ a: 255
+ };
+ var color_from = {
+ r: imgData[k + 0],
+ g: imgData[k + 1],
+ b: imgData[k + 2],
+ a: imgData[k + 3]
+ };
+ if (color_from.r == color_to.r &&
+ color_from.g == color_to.g &&
+ color_from.b == color_to.b &&
+ color_from.a == 0) {
+ return false;
+ }
+ if (contiguous == false) {
+ //check only nearest pixels
+ var stack = [];
+ stack.push([x, y]);
+ while (stack.length > 0) {
+ var curPoint = stack.pop();
+ for (var i = 0; i < 4; i++) {
+ var nextPointX = curPoint[0] + dx[i];
+ var nextPointY = curPoint[1] + dy[i];
+ if (nextPointX < 0 || nextPointY < 0 || nextPointX >= W || nextPointY >= H)
+ continue;
+ var k = (nextPointY * W + nextPointX) * 4;
+ if (imgData_tmp[k + 3] != 0)
+ continue; //already parsed
+
+ if (Math.abs(imgData[k] - color_from.r) <= sensitivity
+ && Math.abs(imgData[k + 1] - color_from.g) <= sensitivity
+ && Math.abs(imgData[k + 2] - color_from.b) <= sensitivity
+ && Math.abs(imgData[k + 3] - color_from.a) <= sensitivity) {
+ //erase
+ imgData_tmp[k] = color_to.r; //r
+ imgData_tmp[k + 1] = color_to.g; //g
+ imgData_tmp[k + 2] = color_to.b; //b
+ imgData_tmp[k + 3] = color_to.a; //a
+
+ stack.push([nextPointX, nextPointY]);
+ }
+ }
+ }
+ }
+ else {
+ //global mode - contiguous
+ for (var i = 0; i < imgData.length; i += 4) {
+ if (imgData[i + 3] == 0)
+ continue; //transparent
+
+ //imgData[i] + 0.7152 * imgData[i + 1] + 0.0722 * imgData[i + 2]);
+
+ for (var j = 0; j < 4; j++) {
+ var k = i + j;
+
+ if (Math.abs(imgData[k] - color_from.r) <= sensitivity
+ && Math.abs(imgData[k + 1] - color_from.g) <= sensitivity
+ && Math.abs(imgData[k + 2] - color_from.b) <= sensitivity
+ && Math.abs(imgData[k + 3] - color_from.a) <= sensitivity) {
+ imgData_tmp[k] = color_to.r; //r
+ imgData_tmp[k + 1] = color_to.g; //g
+ imgData_tmp[k + 2] = color_to.b; //b
+ imgData_tmp[k + 3] = color_to.a; //a
+ }
+ }
+ }
+ }
+
+ //destination-out + blur = anti-aliasing
+ ctxTemp.putImageData(img_tmp, 0, 0);
+ context.globalCompositeOperation = "destination-out";
+ if (anti_aliasing == true) {
+ context.filter = 'blur(1px)';
+ }
+ context.drawImage(canvasTemp, 0, 0);
+ }
+
+}
+export default Magic_erase_class;
diff --git a/paintplus/frontend/src/js/tools/magic_wand.js b/paintplus/frontend/src/js/tools/magic_wand.js
new file mode 100644
index 0000000..24021bb
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/magic_wand.js
@@ -0,0 +1,600 @@
+/**
+ * Magic Wand Selection Tool - Selects areas by color similarity
+ * Click to select similar colors, Shift+Click to add to selection
+ * Like GIMP's magic wand / fuzzy select tool
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Magic_wand_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'magic_wand';
+
+ // Store the current mask data
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.selectionBounds = null;
+
+ // Marching ants animation
+ this.marchingAntsOffset = 0;
+
+ // Edge canvas for drawing the mask outline
+ this.edgeCanvas = null;
+ }
+
+ load() {
+ var _this = this;
+
+ // Mouse click event for selection
+ document.addEventListener('mousedown', function (e) {
+ _this.mousedown(e);
+ });
+
+ // Keyboard shortcuts
+ document.addEventListener('keydown', function(e) {
+ if (config.TOOL.name != _this.name) return;
+ if (_this.Helper.is_input(e.target)) return;
+
+ var code = e.keyCode;
+
+ // Delete - delete selected area
+ if (code == 46 && _this.currentMask) {
+ e.preventDefault();
+ _this.deleteSelection();
+ }
+ // Escape - clear selection
+ if (code == 27 && _this.currentMask) {
+ e.preventDefault();
+ _this.clearSelection();
+ }
+ // Ctrl+C - copy to new layer
+ if (code == 67 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.copyToLayer();
+ }
+ // Ctrl+X - cut to new layer
+ if (code == 88 && (e.ctrlKey || e.metaKey) && _this.currentMask) {
+ e.preventDefault();
+ _this.cutToLayer();
+ }
+ });
+
+ // Start marching ants animation
+ this.startMarchingAnts();
+ }
+
+ startMarchingAnts() {
+ var _this = this;
+
+ setInterval(function() {
+ if (_this.currentMask) {
+ _this.marchingAntsOffset++;
+ if (_this.marchingAntsOffset > 16) {
+ _this.marchingAntsOffset = 0;
+ }
+ config.need_render = true;
+ }
+ }, 100);
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+
+ if (config.TOOL.name != this.name) return;
+ if (mouse.click_valid == false) return;
+
+ // Check if we have an image layer
+ if (config.layer.type != 'image') {
+ alertify.error('Please select an image layer first');
+ return;
+ }
+
+ // Get click coordinates relative to the image
+ var x = mouse.x - config.layer.x;
+ var y = mouse.y - config.layer.y;
+
+ // Adjust for layer scaling
+ if (config.layer.width != config.layer.width_original) {
+ x = x * (config.layer.width_original / config.layer.width);
+ }
+ if (config.layer.height != config.layer.height_original) {
+ y = y * (config.layer.height_original / config.layer.height);
+ }
+
+ x = Math.round(x);
+ y = Math.round(y);
+
+ // Make sure click is within image bounds
+ if (x < 0 || y < 0 || x >= config.layer.width_original || y >= config.layer.height_original) {
+ alertify.error('Click inside the image');
+ return;
+ }
+
+ // Check for Shift key - additive selection
+ var isAdditive = e.shiftKey;
+
+ // Get tool parameters
+ var params = this.getParams();
+ var tolerance = params.tolerance || 30;
+ var contiguous = params.contiguous !== false;
+
+ // Perform the selection
+ this.selectByColor(x, y, tolerance, contiguous, isAdditive);
+ }
+
+ /**
+ * Select pixels by color similarity using flood fill algorithm
+ */
+ selectByColor(startX, startY, tolerance, contiguous, isAdditive) {
+ var layer = config.layer;
+
+ // Get the layer's image data
+ var srcCanvas = document.createElement('canvas');
+ srcCanvas.width = layer.width_original;
+ srcCanvas.height = layer.height_original;
+ var srcCtx = srcCanvas.getContext('2d');
+ srcCtx.drawImage(layer.link, 0, 0);
+
+ var imageData = srcCtx.getImageData(0, 0, srcCanvas.width, srcCanvas.height);
+ var data = imageData.data;
+ var width = srcCanvas.width;
+ var height = srcCanvas.height;
+
+ // Create mask canvas
+ var newMaskCanvas = document.createElement('canvas');
+ newMaskCanvas.width = width;
+ newMaskCanvas.height = height;
+ var maskCtx = newMaskCanvas.getContext('2d');
+ var maskImageData = maskCtx.createImageData(width, height);
+ var maskData = maskImageData.data;
+
+ // Get the color at the clicked point
+ var startIdx = (startY * width + startX) * 4;
+ var targetColor = {
+ r: data[startIdx],
+ g: data[startIdx + 1],
+ b: data[startIdx + 2],
+ a: data[startIdx + 3]
+ };
+
+ // Convert tolerance to 0-255 range
+ var sens = tolerance * 255 / 100;
+
+ if (contiguous) {
+ // Flood fill - only connected pixels
+ var visited = new Uint8Array(width * height);
+ var stack = [[startX, startY]];
+ var dx = [0, -1, +1, 0];
+ var dy = [-1, 0, 0, +1];
+
+ while (stack.length > 0) {
+ var point = stack.pop();
+ var px = point[0];
+ var py = point[1];
+
+ if (px < 0 || py < 0 || px >= width || py >= height) continue;
+
+ var idx = py * width + px;
+ if (visited[idx]) continue;
+ visited[idx] = 1;
+
+ var i = idx * 4;
+
+ // Check color similarity
+ if (Math.abs(data[i] - targetColor.r) <= sens &&
+ Math.abs(data[i + 1] - targetColor.g) <= sens &&
+ Math.abs(data[i + 2] - targetColor.b) <= sens &&
+ Math.abs(data[i + 3] - targetColor.a) <= sens) {
+
+ // Add to mask (white = selected)
+ maskData[i] = 255;
+ maskData[i + 1] = 255;
+ maskData[i + 2] = 255;
+ maskData[i + 3] = 255;
+
+ // Add neighbors to stack
+ for (var d = 0; d < 4; d++) {
+ stack.push([px + dx[d], py + dy[d]]);
+ }
+ }
+ }
+ } else {
+ // Global - all matching pixels regardless of connection
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ var i = (y * width + x) * 4;
+
+ if (Math.abs(data[i] - targetColor.r) <= sens &&
+ Math.abs(data[i + 1] - targetColor.g) <= sens &&
+ Math.abs(data[i + 2] - targetColor.b) <= sens &&
+ Math.abs(data[i + 3] - targetColor.a) <= sens) {
+
+ maskData[i] = 255;
+ maskData[i + 1] = 255;
+ maskData[i + 2] = 255;
+ maskData[i + 3] = 255;
+ }
+ }
+ }
+ }
+
+ maskCtx.putImageData(maskImageData, 0, 0);
+
+ // If additive and we have an existing mask, combine them
+ if (isAdditive && this.maskCanvas) {
+ var combinedCanvas = document.createElement('canvas');
+ combinedCanvas.width = width;
+ combinedCanvas.height = height;
+ var combinedCtx = combinedCanvas.getContext('2d');
+
+ // Draw existing mask
+ combinedCtx.drawImage(this.maskCanvas, 0, 0);
+
+ // Add new mask
+ combinedCtx.globalCompositeOperation = 'lighter';
+ combinedCtx.drawImage(newMaskCanvas, 0, 0);
+
+ this.maskCanvas = combinedCanvas;
+ } else {
+ this.maskCanvas = newMaskCanvas;
+ }
+
+ this.currentMask = {
+ canvas: this.maskCanvas
+ };
+
+ // Store globally for other tools
+ window.smartSelectMask = this.currentMask;
+
+ // Calculate bounds and extract edge
+ this.calculateSelectionBounds();
+ this.extractContourPath();
+
+ config.need_render = true;
+ this.Base_layers.render();
+
+ if (isAdditive) {
+ alertify.success('Added to selection!');
+ } else {
+ alertify.success('Selection complete! Shift+Click to add more.');
+ }
+ }
+
+ calculateSelectionBounds() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+
+ var minX = this.maskCanvas.width, minY = this.maskCanvas.height;
+ var maxX = 0, maxY = 0;
+ var hasSelection = false;
+
+ for (var y = 0; y < this.maskCanvas.height; y++) {
+ for (var x = 0; x < this.maskCanvas.width; x++) {
+ var i = (y * this.maskCanvas.width + x) * 4;
+ if (imageData.data[i] > 128) {
+ hasSelection = true;
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ if (hasSelection && maxX > minX && maxY > minY) {
+ var scaleX = config.layer.width / config.layer.width_original;
+ var scaleY = config.layer.height / config.layer.height_original;
+
+ this.selectionBounds = {
+ x: config.layer.x + minX * scaleX,
+ y: config.layer.y + minY * scaleY,
+ width: (maxX - minX) * scaleX,
+ height: (maxY - minY) * scaleY,
+ origMinX: minX,
+ origMinY: minY,
+ origMaxX: maxX,
+ origMaxY: maxY
+ };
+ }
+ }
+
+ extractContourPath() {
+ if (!this.maskCanvas) return;
+
+ var maskCtx = this.maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+ var width = this.maskCanvas.width;
+ var height = this.maskCanvas.height;
+ var data = imageData.data;
+
+ this.edgeCanvas = document.createElement('canvas');
+ this.edgeCanvas.width = width;
+ this.edgeCanvas.height = height;
+ var edgeCtx = this.edgeCanvas.getContext('2d');
+ var edgeImageData = edgeCtx.createImageData(width, height);
+ var edgeData = edgeImageData.data;
+
+ for (var y = 0; y < height; y++) {
+ for (var x = 0; x < width; x++) {
+ var i = (y * width + x) * 4;
+ var isMask = data[i] > 128;
+
+ if (isMask) {
+ var isEdge = false;
+
+ if (x > 0 && data[i - 4] <= 128) isEdge = true;
+ if (x < width - 1 && data[i + 4] <= 128) isEdge = true;
+ if (y > 0 && data[i - width * 4] <= 128) isEdge = true;
+ if (y < height - 1 && data[i + width * 4] <= 128) isEdge = true;
+ if (x == 0 || x == width - 1 || y == 0 || y == height - 1) isEdge = true;
+
+ if (isEdge) {
+ edgeData[i] = 255;
+ edgeData[i + 1] = 255;
+ edgeData[i + 2] = 255;
+ edgeData[i + 3] = 255;
+ }
+ }
+ }
+ }
+
+ edgeCtx.putImageData(edgeImageData, 0, 0);
+ }
+
+ render_overlay(ctx) {
+ if (!this.currentMask || !this.maskCanvas) return;
+
+ ctx.save();
+
+ // Draw semi-transparent overlay on non-selected areas
+ var inverseCanvas = document.createElement('canvas');
+ inverseCanvas.width = this.maskCanvas.width;
+ inverseCanvas.height = this.maskCanvas.height;
+ var inverseCtx = inverseCanvas.getContext('2d');
+
+ inverseCtx.fillStyle = 'rgba(0, 0, 0, 0.4)';
+ inverseCtx.fillRect(0, 0, inverseCanvas.width, inverseCanvas.height);
+
+ inverseCtx.globalCompositeOperation = 'destination-out';
+ inverseCtx.drawImage(this.maskCanvas, 0, 0);
+
+ ctx.drawImage(
+ inverseCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+
+ // Draw marching ants
+ if (this.edgeCanvas) {
+ var antsCanvas = document.createElement('canvas');
+ antsCanvas.width = this.maskCanvas.width;
+ antsCanvas.height = this.maskCanvas.height;
+ var antsCtx = antsCanvas.getContext('2d');
+
+ antsCtx.drawImage(this.edgeCanvas, 0, 0);
+ antsCtx.globalCompositeOperation = 'source-in';
+
+ var color = ((Math.floor(this.marchingAntsOffset / 4) % 2) === 0) ? '#ff00ff' : '#ffffff';
+ antsCtx.fillStyle = color;
+ antsCtx.fillRect(0, 0, antsCanvas.width, antsCanvas.height);
+
+ ctx.drawImage(
+ antsCanvas,
+ config.layer.x, config.layer.y,
+ config.layer.width, config.layer.height
+ );
+ }
+
+ ctx.restore();
+ }
+
+ copyToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to copy');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var canvas = document.createElement('canvas');
+ canvas.width = layer.width_original;
+ canvas.height = layer.height_original;
+ var ctx = canvas.getContext('2d');
+
+ ctx.drawImage(layer.link, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX;
+ var cropHeight = bounds.origMaxY - bounds.origMinY;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ canvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: cropWidth,
+ height: cropHeight,
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: 'Magic Wand Selection',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('copy_selection_to_layer', 'Copy Selection to Layer', [
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ alertify.success('Selection copied to new layer!');
+ }
+
+ cutToLayer() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to cut');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var bounds = this.selectionBounds;
+ if (!bounds || bounds.origMinX === undefined) {
+ alertify.error('Invalid selection bounds');
+ return;
+ }
+
+ var canvas = document.createElement('canvas');
+ canvas.width = layer.width_original;
+ canvas.height = layer.height_original;
+ var ctx = canvas.getContext('2d');
+
+ ctx.drawImage(layer.link, 0, 0);
+ ctx.globalCompositeOperation = 'destination-in';
+ ctx.drawImage(this.maskCanvas, 0, 0);
+
+ var cropWidth = bounds.origMaxX - bounds.origMinX;
+ var cropHeight = bounds.origMaxY - bounds.origMinY;
+
+ if (cropWidth <= 0 || cropHeight <= 0) {
+ alertify.error('Selection is too small');
+ return;
+ }
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ canvas,
+ bounds.origMinX, bounds.origMinY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + bounds.origMinX * scaleX),
+ y: Math.round(layer.y + bounds.origMinY * scaleY),
+ width: cropWidth,
+ height: cropHeight,
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: 'Magic Wand Cut',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('cut_selection_to_layer', 'Cut Selection to Layer', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id),
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ this.clearSelection();
+ alertify.success('Selection cut to new layer!');
+ }
+
+ deleteSelection() {
+ if (!this.currentMask || !this.maskCanvas) {
+ alertify.error('No selection to delete');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Layer must be an image');
+ return;
+ }
+
+ var holeCanvas = document.createElement('canvas');
+ holeCanvas.width = layer.width_original;
+ holeCanvas.height = layer.height_original;
+ var holeCtx = holeCanvas.getContext('2d');
+
+ holeCtx.drawImage(layer.link, 0, 0);
+ holeCtx.globalCompositeOperation = 'destination-out';
+ holeCtx.drawImage(this.maskCanvas, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('delete_selection', 'Delete Selection', [
+ new app.Actions.Update_layer_image_action(holeCanvas, layer.id)
+ ])
+ );
+
+ this.clearSelection();
+ alertify.success('Selection deleted!');
+ }
+
+ clearSelection() {
+ this.currentMask = null;
+ this.maskCanvas = null;
+ this.edgeCanvas = null;
+ this.selectionBounds = null;
+ window.smartSelectMask = null;
+ config.need_render = true;
+ this.Base_layers.render();
+ }
+
+ on_leave() {
+ return [];
+ }
+}
+
+export default Magic_wand_class;
diff --git a/paintplus/frontend/src/js/tools/media.js b/paintplus/frontend/src/js/tools/media.js
new file mode 100644
index 0000000..797c09e
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/media.js
@@ -0,0 +1,164 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import File_open_class from './../modules/file/open.js';
+import Tools_settings_class from './../modules/tools/settings.js';
+import Dialog_class from './../libs/popup.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Media_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.File_open = new File_open_class();
+ this.Tools_settings = new Tools_settings_class();
+ this.POP = new Dialog_class();
+ this.name = 'media';
+ this.cache = [];
+ this.page = 1;
+ this.per_page = 50;
+ }
+
+ load() {
+ //nothing
+ }
+
+ render(ctx, layer) {
+ //nothing
+ }
+
+ on_activate() {
+ this.search();
+ }
+
+ /**
+ * Image search api
+ *
+ * @param {string} query
+ * @param {array} data
+ * @param pages
+ */
+ search(query = '', data = [], pages = null) {
+ var _this = this;
+ var html = '';
+ var html_paging = '';
+
+ var key = config.pixabay_key;
+ key = key.split("").reverse().join("");
+
+ var safe_search = this.Tools_settings.get_setting('safe_search');
+
+ if (data.length > 0) {
+ for (var i in data) {
+ html += '';
+ html += '
';
+ html += '
';
+ html += '
';
+ html += '
';
+ html += '
';
+
+ //paging
+ html_paging += '';
+ html_paging += '< ';
+ for(var i = 1; i <= Math.min(10, pages); i++) {
+ var selected = '';
+ if(this.page == i){
+ var selected = 'selected';
+ }
+ html_paging += ''+i+' ';
+ }
+ html_paging += '> ';
+ html_paging += '
';
+ }
+ else{
+ this.page = 1;
+ }
+
+ var settings = {
+ title: 'Search',
+ //comment: 'Source: pixabay.com .',
+ className: 'wide',
+ params: [
+ {name: "query", title: "Keyword:", value: query},
+ ],
+ on_load: function (params, popup) {
+ var node = document.createElement("div");
+ node.classList.add('flex-container');
+ node.innerHTML = html + html_paging;
+ popup.el.querySelector('.dialog_content').appendChild(node);
+ //events
+ var targets = popup.el.querySelectorAll('.item img');
+ for (var i = 0; i < targets.length; i++) {
+ targets[i].addEventListener('click', function (event) {
+ //we have click
+ var data = {
+ url: this.dataset.url,
+ };
+ _this.File_open.file_open_url_handler(data);
+ _this.POP.hide();
+
+ new app.Actions.Activate_tool_action('select', true).do();
+ });
+ }
+ var targets = popup.el.querySelectorAll('#media_paging button');
+ for (var i = 0; i < targets.length; i++) {
+ targets[i].addEventListener('click', function (event) {
+ //we have click
+ _this.page = parseInt(this.dataset.value);
+ _this.POP.save();
+ });
+ }
+ },
+ on_finish: function (params) {
+ if (params.query == '')
+ return;
+
+ var URL = "https://pixabay.com/api/?key=" + key
+ + "&page=" + _this.page
+ + "&per_page=" + _this.per_page
+ + "&safesearch=" + safe_search
+ + "&q=" + encodeURIComponent(params.query);
+
+ if (_this.cache[URL] != undefined) {
+ //using cache
+
+ setTimeout(function () {
+ //only call same function after all handlers finishes
+ var data = _this.cache[URL];
+
+ if (parseInt(data.totalHits) == 0) {
+ alertify.error('Your search did not match any images.');
+ }
+
+ var pages = Math.ceil(data.totalHits / _this.per_page);
+ _this.search(params.query, data.hits, pages);
+ }, 100);
+ }
+ else {
+ //query to service
+ $.getJSON(URL, function (data) {
+ _this.cache[URL] = data;
+
+ if (parseInt(data.totalHits) == 0) {
+ alertify.error('Your search did not match any images.');
+ }
+
+ var pages = Math.ceil(data.totalHits / _this.per_page);
+ _this.search(params.query, data.hits, pages);
+ })
+ .fail(function () {
+ alertify.error('Error connecting to service.');
+ });
+ }
+ },
+ };
+ this.POP.show(settings);
+
+ document.getElementById("pop_data_query").select();
+ }
+}
+
+export default Media_class;
diff --git a/paintplus/frontend/src/js/tools/pencil.js b/paintplus/frontend/src/js/tools/pencil.js
new file mode 100644
index 0000000..68957c5
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/pencil.js
@@ -0,0 +1,306 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+
+class Pencil_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.name = 'pencil';
+ this.layer = {};
+ this.params_hash = false;
+ this.pressure_supported = false;
+ this.pointer_pressure = 0; // has range [0 - 1]
+ }
+
+ load() {
+ var _this = this;
+
+ //pointer events
+ document.addEventListener('pointerdown', function (event) {
+ _this.pointerdown(event);
+ });
+ document.addEventListener('pointermove', function (event) {
+ _this.pointermove(event);
+ });
+
+ this.default_events();
+ }
+
+ dragMove(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousemove(event);
+ }
+
+ pointerdown(e) {
+ // Devices that don't actually support pen pressure can give 0.5 as a false reading.
+ // It is highly unlikely a real pen will read exactly 0.5 at the start of a stroke.
+ if (e.pressure && e.pressure !== 0 && e.pressure !== 0.5 && e.pressure <= 1) {
+ this.pressure_supported = true;
+ this.pointer_pressure = e.pressure;
+ } else {
+ this.pressure_supported = false;
+ }
+ }
+
+ pointermove(e) {
+ // Pressure of exactly 1 seems to be an input error, sometimes I see it when lifting the pen
+ // off the screen when pressure reading should be near 0.
+ if (this.pressure_supported && e.pressure < 1) {
+ this.pointer_pressure = e.pressure;
+ }
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false)
+ return;
+
+ var params_hash = this.get_params_hash();
+ var opacity = Math.round(config.ALPHA / 255 * 100);
+
+ if (config.layer.type != this.name || params_hash != this.params_hash) {
+ //register new object - current layer is not ours or params changed
+ this.layer = {
+ type: this.name,
+ data: [],
+ opacity: opacity,
+ params: this.clone(this.getParams()),
+ status: 'draft',
+ render_function: [this.name, 'render'],
+ x: 0,
+ y: 0,
+ width: config.WIDTH,
+ height: config.HEIGHT,
+ hide_selection_if_active: true,
+ rotate: null,
+ is_vector: true,
+ color: config.COLOR
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('new_pencil_layer', 'New Pencil Layer', [
+ new app.Actions.Insert_layer_action(this.layer)
+ ])
+ );
+ this.params_hash = params_hash;
+ }
+ else {
+ //continue adding layer data, just register break
+ const new_data = JSON.parse(JSON.stringify(config.layer.data));
+ new_data.push(null);
+ app.State.do_action(
+ new app.Actions.Bundle_action('update_pencil_layer', 'Update Pencil Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ data: new_data
+ })
+ ])
+ );
+ }
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ //detect line size
+ var size = params.size;
+ var new_size = size;
+
+ if (params.pressure == true && this.pressure_supported) {
+ new_size = size * this.pointer_pressure * 2;
+ }
+
+ //more data
+ config.layer.data.push([
+ Math.ceil(mouse.x - config.layer.x),
+ Math.ceil(mouse.y - config.layer.y),
+ new_size
+ ]);
+ this.Base_layers.render();
+ }
+
+ mouseup(e) {
+ var mouse = this.get_mouse_info(e);
+ var params = this.getParams();
+ if (mouse.click_valid == false) {
+ config.layer.status = null;
+ return;
+ }
+
+ //detect line size
+ var size = params.size;
+ var new_size = size;
+
+ if (params.pressure == true && this.pressure_supported) {
+ new_size = size * this.pointer_pressure * 2;
+ }
+
+ //more data
+ config.layer.data.push([
+ Math.ceil(mouse.x - config.layer.x),
+ Math.ceil(mouse.y - config.layer.y),
+ new_size
+ ]);
+
+ this.check_dimensions();
+
+ config.layer.status = null;
+ this.Base_layers.render();
+ }
+
+ render(ctx, layer) {
+ this.render_aliased(ctx, layer);
+ }
+
+ /**
+ * draw without antialiasing, sharp, ugly mode.
+ *
+ * @param {object} ctx
+ * @param {object} layer
+ */
+ render_aliased(ctx, layer) {
+ if (layer.data.length == 0)
+ return;
+
+ var params = layer.params;
+ var data = layer.data;
+ var n = data.length;
+ var size = params.size;
+
+ //set styles
+ ctx.fillStyle = layer.color;
+ ctx.strokeStyle = layer.color;
+ ctx.translate(layer.x, layer.y);
+
+ //draw
+ ctx.beginPath();
+ ctx.moveTo(data[0][0], data[0][1]);
+ for (var i = 1; i < n; i++) {
+ if (data[i] === null) {
+ //break
+ ctx.beginPath();
+ }
+ else {
+ //line
+ size = data[i][2];
+ if(size == undefined){
+ size = 1;
+ }
+
+ if (data[i - 1] == null) {
+ //exception - point
+ ctx.fillRect(
+ data[i][0] - Math.floor(size / 2) - 1,
+ data[i][1] - Math.floor(size / 2) - 1,
+ size,
+ size
+ );
+ }
+ else {
+ //lines
+ ctx.beginPath();
+ this.draw_simple_line(
+ ctx,
+ data[i - 1][0],
+ data[i - 1][1],
+ data[i][0],
+ data[i][1],
+ size
+ );
+ }
+ }
+ }
+ if (n == 1 || data[1] == null) {
+ //point
+ ctx.beginPath();
+ ctx.fillRect(
+ data[0][0] - Math.floor(size / 2) - 1,
+ data[0][1] - Math.floor(size / 2) - 1,
+ size,
+ size
+ );
+ }
+
+ ctx.translate(-layer.x, -layer.y);
+ }
+
+ /**
+ * draws line without aliasing
+ *
+ * @param {object} ctx
+ * @param {int} from_x
+ * @param {int} from_y
+ * @param {int} to_x
+ * @param {int} to_y
+ * @param {int} size
+ */
+ draw_simple_line(ctx, from_x, from_y, to_x, to_y, size) {
+ var dist_x = from_x - to_x;
+ var dist_y = from_y - to_y;
+ var distance = Math.sqrt((dist_x * dist_x) + (dist_y * dist_y));
+ var radiance = Math.atan2(dist_y, dist_x);
+
+ for (var j = 0; j < distance; j++) {
+ var x_tmp = Math.round(to_x + Math.cos(radiance) * j) - Math.floor(size / 2) - 1;
+ var y_tmp = Math.round(to_y + Math.sin(radiance) * j) - Math.floor(size / 2) - 1;
+
+ ctx.fillRect(x_tmp, y_tmp, size, size);
+ }
+ }
+
+ /**
+ * recalculate layer x, y, width and height values.
+ */
+ check_dimensions() {
+ if(config.layer.data.length == 0)
+ return;
+
+ //find bounds
+ var data = JSON.parse(JSON.stringify(config.layer.data)); // Deep copy for history
+ var min_x = data[0][0];
+ var min_y = data[0][1];
+ var max_x = data[0][0];
+ var max_y = data[0][1];
+ for(var i in data){
+ if(data[i] === null)
+ continue;
+ min_x = Math.min(min_x, data[i][0]);
+ min_y = Math.min(min_y, data[i][1]);
+ max_x = Math.max(max_x, data[i][0]);
+ max_y = Math.max(max_y, data[i][1]);
+ }
+
+ //move current data
+ for(var i in data){
+ if(data[i] === null)
+ continue;
+ data[i][0] = data[i][0] - min_x;
+ data[i][1] = data[i][1] - min_y;
+ }
+
+ //change layers bounds
+ app.State.do_action(
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: config.layer.x + min_x,
+ y: config.layer.y + min_y,
+ width: max_x - min_x,
+ height: max_y - min_y,
+ data
+ }),
+ {
+ merge_with_history: ['new_pencil_layer', 'update_pencil_layer']
+ }
+ );
+ }
+
+}
+
+export default Pencil_class;
diff --git a/paintplus/frontend/src/js/tools/pick_color.js b/paintplus/frontend/src/js/tools/pick_color.js
new file mode 100644
index 0000000..f8c8752
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/pick_color.js
@@ -0,0 +1,211 @@
+/**
+ * Pick Color (Eyedropper) — enhanced with live color tooltip.
+ *
+ * Hover: floating tooltip shows hex, RGB, HSL, and nearest Pantone match with ΔE.
+ * Click: sets as active color AND copies hex to clipboard.
+ * Drag: continuously samples color while dragging.
+ *
+ * ΔE (Delta E) is the color difference between the sampled color and the
+ * nearest Pantone ink. Lower is better:
+ * < 2 = Excellent — nearly identical in print
+ * 2–5 = Good — slight difference, acceptable for most print work
+ * 5–10 = Fair — noticeable difference; specify Pantone manually if color accuracy matters
+ * > 10 = Poor — this color cannot be faithfully reproduced as a single Pantone ink
+ */
+
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Helper_class from './../libs/helpers.js';
+import Base_gui_class from './../core/base-gui.js';
+import { hexToRgb, rgbToHsl, rgbToLab, nearestPantone, deltaEBadge } from './../libs/color_utils.js';
+
+class Pick_color_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.Base_gui = new Base_gui_class();
+ this.ctx = ctx;
+ this.name = 'pick_color';
+ this._tooltip = null;
+ this._lastHex = null;
+ }
+
+ dragStart(event) {
+ if (config.TOOL.name !== this.name) return;
+ this.mousedown(event);
+ }
+
+ dragMove(event) {
+ if (config.TOOL.name !== this.name) return;
+ this.mousemove(event);
+ }
+
+ load() {
+ var _this = this;
+
+ document.addEventListener('mousedown', e => _this.dragStart(e));
+ document.addEventListener('mousemove', e => {
+ if (config.TOOL.name !== _this.name) { _this._hideTooltip(); return; }
+ _this.dragMove(e);
+ });
+ document.addEventListener('mouseup', e => {
+ if (config.TOOL.name !== _this.name) return;
+ var mouse = _this.get_mouse_info(e);
+ if (mouse.click_valid) _this.copy_color_to_clipboard();
+ });
+ document.addEventListener('touchstart', e => _this.dragStart(e));
+ document.addEventListener('touchmove', e => _this.dragMove(e));
+ document.addEventListener('mouseleave', () => _this._hideTooltip());
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (!mouse.click_valid) return;
+ this.pick_color(mouse);
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ // Show tooltip on hover (even without drag)
+ this._sampleAndTooltip(mouse, e.clientX, e.clientY);
+ if (!mouse.is_drag || !mouse.click_valid) return;
+ this.pick_color(mouse);
+ }
+
+ pick_color(mouse) {
+ var params = this.getParams();
+ var canvas, ctx;
+ if (!params.global) {
+ canvas = this.Base_layers.convert_layer_to_canvas(config.layer.id, null, false);
+ ctx = canvas.getContext('2d');
+ } else {
+ canvas = document.createElement('canvas');
+ ctx = canvas.getContext('2d');
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ this.Base_layers.convert_layers_to_canvas(ctx, null, false);
+ }
+
+ var c = ctx.getImageData(mouse.x, mouse.y, 1, 1).data;
+ var hex = this.Helper.rgbToHex(c[0], c[1], c[2]);
+
+ const def = { hex };
+ if (c[3] > 0) def.a = c[3];
+ this.Base_gui.GUI_colors.set_color(def);
+ this._lastHex = hex;
+ }
+
+ copy_color_to_clipboard() {
+ navigator.clipboard.writeText(config.COLOR).catch(() => {});
+ }
+
+ // ── Tooltip ────────────────────────────────────────────────────────────────
+
+ _sampleAndTooltip(mouse, clientX, clientY) {
+ if (!config.layer || !mouse.click_valid) { this._hideTooltip(); return; }
+
+ var params = this.getParams();
+ var canvas, ctx;
+ try {
+ if (!params.global) {
+ canvas = this.Base_layers.convert_layer_to_canvas(config.layer.id, null, false);
+ ctx = canvas.getContext('2d');
+ } else {
+ canvas = document.createElement('canvas');
+ ctx = canvas.getContext('2d');
+ canvas.width = config.WIDTH;
+ canvas.height = config.HEIGHT;
+ this.Base_layers.convert_layers_to_canvas(ctx, null, false);
+ }
+ } catch { this._hideTooltip(); return; }
+
+ var c = ctx.getImageData(mouse.x, mouse.y, 1, 1).data;
+ var r = c[0], g = c[1], b = c[2], a = c[3];
+ if (a === 0) { this._hideTooltip(); return; }
+
+ var hex = this.Helper.rgbToHex(r, g, b);
+ this._showTooltip(hex, r, g, b, clientX, clientY);
+ }
+
+ _showTooltip(hex, r, g, b, cx, cy) {
+ const hsl = rgbToHsl(r, g, b);
+ const pantone = nearestPantone(hex);
+ const badge = deltaEBadge(pantone.quality);
+
+ // Perceived text color for swatch
+ const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
+ const swatchText = brightness > 140 ? '#1a1a1a' : '#ffffff';
+
+ if (!this._tooltip) {
+ const t = document.createElement('div');
+ t.id = 'pick_color_tooltip';
+ Object.assign(t.style, {
+ position: 'fixed',
+ zIndex: '99999',
+ background: '#1a1a1a',
+ border: '1px solid #3a3a3a',
+ borderRadius: '10px',
+ padding: '10px 13px',
+ fontFamily: 'monospace, sans-serif',
+ fontSize: '12px',
+ color: '#ddd',
+ pointerEvents:'none',
+ boxShadow: '0 4px 16px rgba(0,0,0,0.6)',
+ minWidth: '210px',
+ lineHeight: '1.6',
+ });
+ document.body.appendChild(t);
+ this._tooltip = t;
+ }
+
+ const t = this._tooltip;
+
+ t.innerHTML = `
+
+
+
+
+
${hex.toUpperCase()}
+
rgb(${r}, ${g}, ${b})
+
hsl(${hsl.h}°, ${hsl.s}%, ${hsl.l}%)
+
+
+
+
+ ΔE ${pantone.deltaE}
+ ● ${badge.label}
+
+ ${pantone.quality === 'poor'
+ ? `
+ Tip: this color may shift significantly in print.
+
`
+ : ''}
+
Click to copy hex & set active color
`;
+
+ // Position tooltip near cursor, keep on screen
+ const tw = 230, th = 160;
+ let tx = cx + 16, ty = cy + 16;
+ if (tx + tw > window.innerWidth - 8) tx = cx - tw - 8;
+ if (ty + th > window.innerHeight - 8) ty = cy - th - 8;
+ t.style.left = tx + 'px';
+ t.style.top = ty + 'px';
+ t.style.display = 'block';
+ }
+
+ _hideTooltip() {
+ if (this._tooltip) this._tooltip.style.display = 'none';
+ }
+}
+
+export default Pick_color_class;
diff --git a/paintplus/frontend/src/js/tools/select.js b/paintplus/frontend/src/js/tools/select.js
new file mode 100644
index 0000000..dbcc923
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/select.js
@@ -0,0 +1,704 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Base_selection_class from './../core/base-selection.js';
+import Helper_class from './../libs/helpers.js';
+import Dialog_class from './../libs/popup.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Select_tool_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.POP = new Dialog_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'select';
+ this.saved = false;
+ this.mousedown_dimensions = { x: null, y: null, width: null, height: null };
+ this.keyboard_move_start_position = null;
+ this.moving = false;
+ this.resizing = false;
+ this.snap_line_info = {x: null, y: null};
+ this.rotate_initial = null;
+
+ var sel_config = {
+ enable_background: false,
+ enable_borders: true,
+ enable_controls: true,
+ keep_ratio: true,
+ enable_rotation: true,
+ enable_move: true,
+ data_function: function () {
+ return config.layer;
+ },
+ };
+ this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
+ }
+
+ /**
+ * Called when the Select tool is activated
+ * If there's an AI selection, offer to float it so it can be moved
+ */
+ on_activate() {
+ var _this = this;
+
+ // Check if there's an active AI selection (Smart Select, Brush Select, etc.)
+ if (window.smartSelectMask && window.smartSelectMask.canvas) {
+ // Ask user if they want to float the selection
+ alertify.confirm(
+ 'Float Selection',
+ 'You have an active selection. Would you like to copy it to a new layer so you can move and scale it?',
+ function() {
+ // Yes - float the selection
+ _this.floatSelection();
+ },
+ function() {
+ // No - just clear the selection indicator
+ alertify.message('Tip: Use Ctrl+C in selection tools to copy, or Ctrl+X to cut.');
+ }
+ ).set('labels', {ok: 'Yes, Float It', cancel: 'No, Keep Selection'});
+ }
+ }
+
+ /**
+ * Float the current selection to a new layer
+ * This copies the selected pixels to a new layer that can be moved/scaled
+ */
+ floatSelection() {
+ var maskCanvas = window.smartSelectMask?.canvas;
+ if (!maskCanvas) {
+ alertify.error('No selection to float');
+ return;
+ }
+
+ var layer = config.layer;
+ if (layer.type != 'image') {
+ alertify.error('Please select an image layer first');
+ return;
+ }
+
+ // Get mask bounds
+ var maskCtx = maskCanvas.getContext('2d');
+ var imageData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+ var minX = maskCanvas.width, minY = maskCanvas.height;
+ var maxX = 0, maxY = 0;
+ var hasSelection = false;
+
+ for (var y = 0; y < maskCanvas.height; y++) {
+ for (var x = 0; x < maskCanvas.width; x++) {
+ var i = (y * maskCanvas.width + x) * 4;
+ if (imageData.data[i] > 128) {
+ hasSelection = true;
+ minX = Math.min(minX, x);
+ minY = Math.min(minY, y);
+ maxX = Math.max(maxX, x);
+ maxY = Math.max(maxY, y);
+ }
+ }
+ }
+
+ if (!hasSelection || maxX <= minX || maxY <= minY) {
+ alertify.error('Selection is empty or too small');
+ return;
+ }
+
+ // Create masked image
+ var maskedCanvas = document.createElement('canvas');
+ maskedCanvas.width = layer.width_original;
+ maskedCanvas.height = layer.height_original;
+ var maskedCtx = maskedCanvas.getContext('2d');
+
+ maskedCtx.drawImage(layer.link, 0, 0);
+ maskedCtx.globalCompositeOperation = 'destination-in';
+ maskedCtx.drawImage(maskCanvas, 0, 0);
+
+ // Crop to selection bounds
+ var cropWidth = maxX - minX + 1;
+ var cropHeight = maxY - minY + 1;
+
+ var croppedCanvas = document.createElement('canvas');
+ croppedCanvas.width = cropWidth;
+ croppedCanvas.height = cropHeight;
+ var croppedCtx = croppedCanvas.getContext('2d');
+
+ croppedCtx.drawImage(
+ maskedCanvas,
+ minX, minY, cropWidth, cropHeight,
+ 0, 0, cropWidth, cropHeight
+ );
+
+ // Calculate position
+ var scaleX = layer.width / layer.width_original;
+ var scaleY = layer.height / layer.height_original;
+
+ var params = {
+ x: Math.round(layer.x + minX * scaleX),
+ y: Math.round(layer.y + minY * scaleY),
+ width: Math.round(cropWidth * scaleX),
+ height: Math.round(cropHeight * scaleY),
+ width_original: cropWidth,
+ height_original: cropHeight,
+ type: 'image',
+ name: layer.name + ' (Floated)',
+ data: croppedCanvas.toDataURL('image/png')
+ };
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('float_selection', 'Float Selection', [
+ new app.Actions.Insert_layer_action(params)
+ ])
+ );
+
+ // Clear the selection
+ window.smartSelectMask = null;
+
+ // Enable transparency
+ if (config.TRANSPARENCY == false) {
+ config.TRANSPARENCY = true;
+ this.Base_layers.render();
+ }
+
+ alertify.success('Selection floated to new layer! You can now move and scale it.');
+ }
+
+ load() {
+ var _this = this;
+
+ //mouse events
+ document.addEventListener('mousedown', function (e) {
+ _this.dragStart(e);
+ });
+ document.addEventListener('mousemove', function (e) {
+ _this.dragMove(e);
+ });
+ document.addEventListener('mouseup', function (e) {
+ _this.dragEnd(e);
+ });
+
+ // collect touch events
+ document.addEventListener('touchstart', function (e) {
+ _this.dragStart(e);
+ });
+ document.addEventListener('touchmove', function (e) {
+ _this.dragMove(e);
+ });
+ document.addEventListener('touchend', function (e) {
+ _this.dragEnd(e);
+ });
+
+ //keyboard actions
+ document.addEventListener('keydown', (event) => {
+ if (config.TOOL.name != this.name)
+ return;
+ if (this.POP.get_active_instances() > 0) {
+ return;
+ }
+ if (this.Helper.is_input(event.target))
+ return;
+ var k = event.key;
+
+ if (k == "ArrowUp") {
+ this.move(0, -1, event);
+ }
+ else if (k == "ArrowDown") {
+ this.move(0, 1, event);
+ }
+ else if (k == "ArrowRight") {
+ this.move(1, 0, event);
+ }
+ else if (k == "ArrowLeft") {
+ this.move(-1, 0, event);
+ }
+ if (k == "Delete") {
+ if (config.TOOL.name == this.name) {
+ app.State.do_action(
+ new app.Actions.Delete_layer_action(config.layer.id)
+ );
+ }
+ }
+ });
+ document.addEventListener('keyup', (event) => {
+ if (config.TOOL.name != this.name)
+ return;
+ if (this.POP.active == true)
+ return;
+ if (this.Helper.is_input(event.target))
+ return;
+ var k = event.key;
+ if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(k)) {
+ if (this.keyboard_move_start_position) {
+ let x = config.layer.x;
+ let y = config.layer.y;
+ config.layer.x = this.keyboard_move_start_position.x;
+ config.layer.y = this.keyboard_move_start_position.y;
+ app.State.do_action(
+ new app.Actions.Update_layer_action(config.layer.id, { x, y })
+ );
+ this.keyboard_move_start_position = null;
+ }
+ }
+ });
+ }
+
+ dragStart(event) {
+ var mouse = this.get_mouse_info(event);
+ if (config.TOOL.name != this.name)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ this.mousedown(event);
+ }
+
+ dragMove(event) {
+ var mouse = this.get_mouse_info(event);
+ if (config.TOOL.name != this.name)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ this.mousemove(event);
+ }
+
+ dragEnd(event) {
+ var mouse = this.get_mouse_info(event);
+ if (config.TOOL.name != this.name)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ this.mouseup(event);
+ this.Base_layers.render();
+ }
+
+ async mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false || config.mouse_lock === true) {
+ return;
+ }
+
+ this.rotate_initial = config.layer.rotate;
+
+ if (this.Base_selection.mouse_lock != null) {
+ this.resizing = true;
+ this.Base_selection.find_settings().keep_ratio = config.layer.type === 'image';
+ if (config.layer.type === 'text' && config.layer.params && config.layer.params.boundary === 'dynamic') {
+ config.layer.params.boundary = 'box';
+ }
+ }
+ else {
+ this.moving = true;
+ await this.auto_select_object(e);
+ this.Base_selection.find_settings().keep_ratio = config.layer.type === 'image';
+ this.saved = false;
+ }
+
+ this.mousedown_dimensions = {
+ x: Math.round(config.layer.x),
+ y: Math.round(config.layer.y),
+ width: Math.round(config.layer.width),
+ height: Math.round(config.layer.height)
+ };
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.is_drag == false || mouse.click_valid == false || config.mouse_lock === true) {
+ return;
+ }
+ if (this.resizing) {
+
+ //also handle rotation
+ let rotate = this.Base_selection.current_angle
+ if(config.layer.rotate != rotate && rotate !== null){
+ config.layer.rotate = rotate;
+ }
+
+ return;
+ }
+ else if (this.moving) {
+ //move object
+ config.layer.x = Math.round(mouse.x - mouse.click_x + this.mousedown_dimensions.x);
+ config.layer.y = Math.round(mouse.y - mouse.click_y + this.mousedown_dimensions.y);
+
+ //apply snap
+ var snap_info = this.calc_snap(e, config.layer.x, config.layer.y);
+ if(snap_info != null){
+ if(snap_info.x != null) {
+ config.layer.x = snap_info.x;
+ }
+ if(snap_info.y != null) {
+ config.layer.y = snap_info.y;
+ }
+ }
+
+ config.need_render = true;
+ }
+ }
+
+ mouseup(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false || config.mouse_lock === true) {
+ return;
+ }
+ if (this.resizing) {
+ let x = config.layer.x;
+ let y = config.layer.y;
+ let width = config.layer.width;
+ let height = config.layer.height;
+
+ //reset values
+ config.layer.x = this.mousedown_dimensions.x;
+ config.layer.y = this.mousedown_dimensions.y;
+ config.layer.width = this.mousedown_dimensions.width;
+ config.layer.height = this.mousedown_dimensions.height;
+ if (
+ this.mousedown_dimensions.x !== x || this.mousedown_dimensions.y !== y ||
+ this.mousedown_dimensions.width !== width || this.mousedown_dimensions.height !== height
+ ) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('resize_layer', 'Resize Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x, y, width, height
+ })
+ ])
+ );
+ }
+
+ //also handle rotation
+ let rotate = this.Base_selection.current_angle;
+ if(this.rotate_initial != rotate && rotate !== null){
+ //save state
+ config.layer.rotate = this.rotate_initial;
+ app.State.do_action(
+ new app.Actions.Bundle_action('resize_layer', 'Resize Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ rotate
+ })
+ ])
+ );
+ }
+ }
+ else if (this.moving) {
+ var new_x = Math.round(mouse.x - mouse.click_x + this.mousedown_dimensions.x);
+ var new_y = Math.round(mouse.y - mouse.click_y + this.mousedown_dimensions.y);
+ config.layer.x = this.mousedown_dimensions.x;
+ config.layer.y = this.mousedown_dimensions.y;
+
+ if(mouse.x - mouse.click_x || mouse.y - mouse.click_y) {
+ var snap_info = this.calc_snap(e, new_x, new_y);
+ if (snap_info != null) {
+ if (snap_info.x != null) {
+ new_x = snap_info.x;
+ }
+ if (snap_info.y != null) {
+ new_y = snap_info.y;
+ }
+ }
+ }
+
+ if (this.mousedown_dimensions.x !== new_x || this.mousedown_dimensions.y !== new_y) {
+ app.State.do_action(
+ new app.Actions.Bundle_action('move_layer', 'Move Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: new_x,
+ y: new_y
+ })
+ ])
+ );
+ }
+ }
+ this.moving = false;
+ this.resizing = false;
+ }
+
+ render_overlay(ctx){
+ var ctx = this.Base_layers.ctx;
+ var mouse = this.get_mouse_info(event);
+
+ //maybe related tool have additional overlay render handlers?
+ if(config.layer.render_function != null) {
+ var render_class = config.layer.render_function[0];
+ var render_function = 'select';
+ if (
+ typeof this.Base_gui.GUI_tools.tools_modules[render_class].object[
+ render_function
+ ] != "undefined"
+ ) {
+ this.Base_gui.GUI_tools.tools_modules[render_class].object[
+ render_function
+ ](this.ctx);
+ }
+ }
+
+ if (mouse.is_drag == false)
+ return;
+
+ this.render_overlay_parent(ctx);
+ }
+
+ /**
+ * calculates current object snap coordinates and returns it. One of coordinates can be null.
+ *
+ * @param event
+ * @param pos_x
+ * @param pos_y
+ * @returns object|null
+ */
+ calc_snap(event, pos_x, pos_y) {
+ var snap_position = { x: null, y: null };
+ var params = this.getParams();
+
+ if(config.SNAP === false || event.shiftKey == true){
+ this.snap_line_info = {x: null, y: null};
+ return null;
+ }
+
+ //settings
+ var sensitivity = 0.01;
+ var max_distance = (config.WIDTH + config.HEIGHT) / 2 * sensitivity / config.ZOOM;
+
+ //collect snap positions
+ var snap_positions = this.get_snap_positions(config.layer.id);
+
+ //find closest snap positions
+ var min_group = {
+ x: {
+ start: null,
+ center: null,
+ end: null,
+ },
+ y: {
+ start: null,
+ center: null,
+ end: null,
+ },
+ };
+ var min_group_distance = {
+ x: {
+ start: null,
+ center: null,
+ end: null,
+ },
+ y: {
+ start: null,
+ center: null,
+ end: null,
+ },
+ };
+ //x
+ for(var i in snap_positions.x){
+ var distance = Math.abs(pos_x - snap_positions.x[i]);
+ if(distance < max_distance && (distance < min_group_distance.x.start || min_group_distance.x.start === null)){
+ min_group_distance.x.start = distance;
+ min_group.x.start = snap_positions.x[i];
+ }
+
+ var distance = Math.abs(pos_x + config.layer.width/2 - snap_positions.x[i]);
+ if(distance < max_distance && (distance < min_group_distance.x.center || min_group_distance.x.center === null)){
+ min_group_distance.x.center = distance;
+ min_group.x.center = snap_positions.x[i];
+ }
+
+ var distance = Math.abs(pos_x + config.layer.width - snap_positions.x[i]);
+ if(distance < max_distance && (distance < min_group_distance.x.end || min_group_distance.x.end === null)){
+ min_group_distance.x.end = distance;
+ min_group.x.end = snap_positions.x[i];
+ }
+ }
+ //y
+ for(var i in snap_positions.y){
+ var distance = Math.abs(pos_y - snap_positions.y[i]);
+ if(distance < max_distance && (distance < min_group_distance.y.start || min_group_distance.y.start === null)){
+ min_group_distance.y.start = distance;
+ min_group.y.start = snap_positions.y[i];
+ }
+
+ var distance = Math.abs(pos_y + config.layer.height/2 - snap_positions.y[i]);
+ if(distance < max_distance && (distance < min_group_distance.y.center || min_group_distance.y.center === null)){
+ min_group_distance.y.center = distance;
+ min_group.y.center = snap_positions.y[i];
+ }
+
+ var distance = Math.abs(pos_y + config.layer.height - snap_positions.y[i]);
+ if(distance < max_distance && (distance < min_group_distance.y.end || min_group_distance.y.end === null)){
+ min_group_distance.y.end = distance;
+ min_group.y.end = snap_positions.y[i];
+ }
+ }
+
+ //find best begin, center, end
+ var min_distance = {
+ x: null,
+ y: null,
+ };
+ //x
+ if(min_group_distance.x.start != null)
+ min_distance.x = min_group_distance.x.start;
+ if(min_group_distance.x.center != null && (min_group_distance.x.center < min_distance.x || min_distance.x === null))
+ min_distance.x = min_group_distance.x.center;
+ if(min_group_distance.x.end != null && (min_group_distance.x.end < min_distance.x || min_distance.x === null))
+ min_distance.x = min_group_distance.x.end;
+ //y
+ if(min_group_distance.y.start != null)
+ min_distance.y = min_group_distance.y.start;
+ if(min_group_distance.y.center != null && (min_group_distance.y.center < min_distance.y || min_distance.y === null))
+ min_distance.y = min_group_distance.y.center;
+ if(min_group_distance.y.end != null && (min_group_distance.y.end < min_distance.y || min_distance.y === null))
+ min_distance.y = min_group_distance.y.end;
+
+ //apply snap
+ var success = false;
+ //x
+ if(min_group.x.center != null && min_group_distance.x.center == min_distance.x) {
+ snap_position.x = Math.round(min_group.x.center - config.layer.width / 2);
+ success = true;
+ this.snap_line_info.x = {
+ start_x: min_group.x.center,
+ start_y: 0,
+ end_x: min_group.x.center,
+ end_y: config.HEIGHT
+ };
+ }
+ else if(min_group.x.start != null && min_group_distance.x.start == min_distance.x) {
+ snap_position.x = Math.round(min_group.x.start);
+ success = true;
+ this.snap_line_info.x = {
+ start_x: min_group.x.start,
+ start_y: 0,
+ end_x: min_group.x.start,
+ end_y: config.HEIGHT,
+ };
+ }
+ else if(min_group.x.end != null && min_group_distance.x.end == min_distance.x) {
+ snap_position.x = Math.round(min_group.x.end - config.layer.width);
+ success = true;
+ this.snap_line_info.x = {
+ start_x: min_group.x.end,
+ start_y: 0,
+ end_x: min_group.x.end,
+ end_y: config.HEIGHT
+ };
+ }
+ else{
+ this.snap_line_info.x = null;
+ }
+ //y
+ if(min_group.y.center != null && min_group_distance.y.center == min_distance.y) {
+ snap_position.y = Math.round(min_group.y.center - config.layer.height / 2);
+ success = true;
+ this.snap_line_info.y = {
+ start_x: 0,
+ start_y: min_group.y.center,
+ end_x: config.WIDTH,
+ end_y: min_group.y.center,
+ };
+ }
+ else if(min_group.y.start != null && min_group_distance.y.start == min_distance.y) {
+ snap_position.y = Math.round(min_group.y.start);
+ success = true;
+ this.snap_line_info.y = {
+ start_x: 0,
+ start_y: min_group.y.start,
+ end_x: config.WIDTH,
+ end_y: min_group.y.start,
+ };
+ }
+ else if(min_group.y.end != null && min_group_distance.y.end == min_distance.y) {
+ snap_position.y = Math.round(min_group.y.end - config.layer.height);
+ success = true;
+ this.snap_line_info.y = {
+ start_x: 0,
+ start_y: min_group.y.end,
+ end_x: config.WIDTH,
+ end_y: min_group.y.end,
+ };
+ }
+ else{
+ this.snap_line_info.y = null;
+ }
+
+ if(success) {
+ return snap_position;
+ }
+
+ return null;
+ }
+
+ move(direction_x, direction_y, event) {
+ if (!this.keyboard_move_start_position) {
+ this.keyboard_move_start_position = {
+ x: config.layer.x,
+ y: config.layer.y
+ }
+ }
+ var power = 10;
+ if (event.ctrlKey == true || event.metaKey)
+ power = 50;
+ if (event.shiftKey == true)
+ power = 1;
+
+ config.layer.x += direction_x * power;
+ config.layer.y += direction_y * power;
+ config.need_render = true;
+ }
+
+ async auto_select_object(e) {
+ var params = this.getParams();
+ if (params.auto_select == false)
+ return;
+
+ var layers_sorted = this.Base_layers.get_sorted_layers();
+
+ //render main canvas
+ for (var i = 0; i < layers_sorted.length; i++) {
+ var value = layers_sorted[i];
+ var canvas = this.Base_layers.convert_layer_to_canvas(value.id, null, false);
+
+ if (this.check_hit_region(e, canvas.getContext("2d"), value) == true) {
+ await app.State.do_action(
+ new app.Actions.Select_layer_action(value.id)
+ );
+ break;
+ }
+ }
+ }
+
+ check_hit_region(e, ctx, layer) {
+ var mouse = this.get_mouse_info(e);
+
+ if(layer.type == 'image' && Math.abs(layer.width * layer.height / 1000000) > 5){
+ //too big to check using getImageData - use simple way
+ if (mouse.x > layer.x && mouse.x < layer.x + layer.width &&
+ mouse.y > layer.y && mouse.y < layer.y + layer.height) {
+ //hit
+ return true;
+ }
+
+ return false;
+ }
+
+ var data = ctx.getImageData(mouse.x, mouse.y, 1, 1).data;
+ var blank = [0, 0, 0, 0];
+ if (config.TRANSPARENCY == false) {
+ blank = [0, 0, 0, 0];
+ }
+
+ if (data[0] != blank[0] || data[1] != blank[1] || data[2] != blank[2]
+ || data[3] != blank[3]) {
+ //hit
+ return true;
+ }
+
+ return false;
+ }
+
+}
+
+export default Select_tool_class;
diff --git a/paintplus/frontend/src/js/tools/selection.js b/paintplus/frontend/src/js/tools/selection.js
new file mode 100644
index 0000000..395b7c7
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/selection.js
@@ -0,0 +1,348 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Base_selection_class from './../core/base-selection.js';
+import GUI_tools_class from './../core/gui/gui-tools.js';
+import Helper_class from './../libs/helpers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+
+var instance = null;
+
+class Selection_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ var _this = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'selection';
+ this.type = null;
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ this.selection_coords_from = null;
+ this.selection = {
+ x: null,
+ y: null,
+ width: null,
+ height: null,
+ };
+
+ var sel_config = {
+ enable_background: true,
+ enable_borders: true,
+ enable_controls: false,
+ enable_rotation: false,
+ enable_move: false,
+ data_function: function () {
+ return _this.selection;
+ },
+ };
+ this.mousedown_selection = null;
+ this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
+ this.GUI_tools = new GUI_tools_class();
+ }
+
+ load() {
+ var _this = this;
+
+ //mouse events
+ document.addEventListener('mousedown', function (event) {
+ _this.dragStart(event);
+ });
+ document.addEventListener('mousemove', function (event) {
+ _this.dragMove(event);
+ });
+ document.addEventListener('mouseup', function (event) {
+ _this.dragEnd(event);
+ });
+
+ // collect touch events
+ document.addEventListener('touchstart', function (event) {
+ _this.dragStart(event);
+ });
+ document.addEventListener('touchmove', function (event) {
+ _this.dragMove(event);
+ });
+ document.addEventListener('touchend', function (event) {
+ _this.dragEnd(event);
+ });
+
+ document.addEventListener('keydown', (e) => {
+ var code = e.keyCode;
+ if (this.Helper.is_input(e.target))
+ return;
+
+ if (code == 27) {
+ //escape
+ app.State.do_action(new app.Actions.Bundle_action('clear_selection', 'Clear Selection', this.on_leave()));
+ }
+ if (code == 46) {
+ //delete
+ if (config.TOOL.name == this.name) {
+ this.delete_selection();
+ }
+ }
+ if (code == 65 && (e.ctrlKey == true || e.metaKey)) {
+ //A
+ e.preventDefault();
+ this.select_all();
+ }
+ }, false);
+ }
+
+ dragStart(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousedown(event);
+ }
+
+ dragMove(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mousemove(event);
+ }
+
+ dragEnd(event) {
+ var _this = this;
+ if (config.TOOL.name != _this.name)
+ return;
+ _this.mouseup(event);
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ var layer = config.layer;
+ if (this.Base_selection.is_drag == false || mouse.click_valid == false)
+ return;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ this.mousedown_selection = JSON.parse(JSON.stringify(this.selection));
+
+ if (this.selection.width != null && this.selection.height != null
+ && mouse.x > this.selection.x
+ && mouse.x < this.selection.x + this.selection.width
+ && mouse.y > this.selection.y
+ && mouse.y < this.selection.y + this.selection.height
+ && layer.width == layer.width_original && layer.height == layer.height_original
+ ) {
+ //move
+ this.type = 'move';
+
+ if (this.tmpCanvas == null) {
+ this.init_tmp_canvas();
+
+ //register tmp canvas for faster redraw
+ config.layer.link_canvas = this.tmpCanvas;
+ config.need_render = true;
+ }
+ }
+ else {
+ //create new selection
+ this.selection = {
+ x: mouse.x,
+ y: mouse.y,
+ width: 0,
+ height: 0,
+ };
+ this.type = 'create';
+ this.selection_coords_from = {x: mouse.x, y: mouse.y};
+ }
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ if (this.Base_selection.is_drag == false || mouse.is_drag == false)
+ return;
+ if (e.type == 'mousedown' && (mouse.click_valid == false) || config.layer.type != 'image') {
+ return;
+ }
+ if (this.selection_coords_from === null) {
+ return;
+ }
+ if (this.type == 'create') {
+ //create new selection
+ this.selection.width = mouse.x - mouse.click_x;
+ this.selection.height = mouse.y - mouse.click_y;
+ config.need_render = true;
+ }
+ }
+
+ mouseup(e) {
+ var mouse = this.get_mouse_info(e);
+
+ if (!this.Base_selection.is_drag) {
+ return;
+ }
+ if ((e.type == 'mousedown' && mouse.click_valid == false) || config.layer.type != 'image') {
+ return;
+ }
+ if (this.type === 'move') {
+ return; // Translate appears to not work at the moment
+ }
+
+ var width = mouse.x - this.selection.x;
+ var height = mouse.y - this.selection.y;
+
+ if (width == 0 || height == 0) {
+ //cancel selection
+ app.State.do_action(
+ new app.Actions.Bundle_action('clear_selection', 'Clear Selection', this.on_leave())
+ );
+ return;
+ }
+
+ if (this.selection.width != null && this.selection.height != null) {
+ //make sure coords not negative
+ var details = this.selection;
+ var x = details.x;
+ var y = details.y;
+ if (details.width < 0) {
+ x = x + details.width;
+ this.selection_coords_from.x = x;
+ }
+ if (details.height < 0) {
+ y = y + details.height;
+ this.selection_coords_from.y = y;
+ }
+ this.selection = {
+ x: x,
+ y: y,
+ width: Math.abs(details.width),
+ height: Math.abs(details.height),
+ };
+ app.State.do_action(
+ new app.Actions.Set_selection_action(this.selection.x, this.selection.y, this.selection.width, this.selection.height, this.mousedown_selection)
+ );
+ }
+ }
+
+ select_all() {
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+ let actions = [];
+
+ if (config.TOOL.name != this.name) {
+ actions.push(
+ new app.Actions.Activate_tool_action(this.name)
+ );
+ }
+ actions.push(
+ new app.Actions.Set_selection_action(0, 0, config.WIDTH, config.HEIGHT, this.selection)
+ );
+ app.State.do_action(
+ new app.Actions.Bundle_action('select_all', 'Select All', actions)
+ );
+ }
+
+ render(ctx, layer) {
+ //nothing
+ }
+
+ save_translate() {
+ if (this.tmpCanvas == null)
+ return;
+
+ delete config.layer.link_canvas;
+ app.State.do_action(
+ new app.Actions.Bundle_action('selection_tool', 'Selection Tool', [
+ new app.Actions.Update_layer_image_action(this.tmpCanvas)
+ ])
+ );
+
+ this.reset_tmp_canvas();
+ config.need_render = true;
+ }
+
+ delete_selection() {
+ var selection = this.selection;
+ var layer = config.layer;
+
+ if (config.layer.type != 'image') {
+ alertify.error('This layer must contain an image. Please convert it to raster to apply this tool.');
+ return;
+ }
+
+ if (selection == null) {
+ alertify.error('Nothing is selected.');
+ return;
+ }
+
+ this.init_tmp_canvas();
+
+ var mouse_x = selection.x - layer.x;
+ var mouse_y = selection.y - layer.y;
+
+ //adapt to origin size
+ mouse_x = this.adaptSize(mouse_x, 'width');
+ mouse_y = this.adaptSize(mouse_y, 'height');
+ selection.width = this.adaptSize(selection.width, 'width');
+ selection.height = this.adaptSize(selection.height, 'height');
+
+ //do erase
+ this.tmpCanvasCtx.clearRect(mouse_x, mouse_y, selection.width, selection.height);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('delete_selection', 'Delete Selection', [
+ new app.Actions.Update_layer_image_action(this.tmpCanvas),
+ new app.Actions.Reset_selection_action(this.selection)
+ ])
+ );
+
+ this.reset_tmp_canvas();
+ delete config.layer.link_canvas;
+ this.reset_tmp_canvas();
+ }
+
+ init_tmp_canvas() {
+ this.tmpCanvas = document.createElement('canvas');
+ this.tmpCanvasCtx = this.tmpCanvas.getContext("2d");
+ this.tmpCanvas.width = config.layer.width_original;
+ this.tmpCanvas.height = config.layer.height_original;
+ this.tmpCanvasCtx.drawImage(config.layer.link, 0, 0);
+ }
+
+ on_leave() {
+ let actions = [
+ new app.Actions.Reset_selection_action(this.selection)
+ ];
+ delete config.layer.link_canvas;
+ this.reset_tmp_canvas();
+ return actions;
+ }
+
+ clear_selection() {
+ app.State.do_action(
+ new app.Actions.Bundle_action('clear_selection', 'Clear Selection', this.on_leave())
+ );
+ }
+
+ reset_tmp_canvas() {
+ if (this.tmpCanvas == null)
+ return;
+ this.tmpCanvas.width = 1;
+ this.tmpCanvas.height = 1;
+ this.tmpCanvas = null;
+ this.tmpCanvasCtx = null;
+ }
+
+}
+;
+export default Selection_class;
diff --git a/paintplus/frontend/src/js/tools/selection_actions.js b/paintplus/frontend/src/js/tools/selection_actions.js
new file mode 100644
index 0000000..104cc8c
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/selection_actions.js
@@ -0,0 +1,466 @@
+/**
+ * SelectionActions — floating quick-action panel that appears after a SAM selection.
+ *
+ * Surfaces high-value real-world workflows directly in the UI:
+ * • Scale by % — make object 3% (or any %) bigger/smaller, gap AI-filled
+ * • Make less symmetrical — AI redraws the region with organic variation
+ * • Replace with clipboard — paste clipboard image into the selection shape
+ * • Copy / Cut to layer — classic Photoshop workflow
+ * • AI Edit (custom prompt) — full inpaint with user text
+ *
+ * Usage:
+ * this.selectionActions = new SelectionActions(this);
+ * // after successful selection:
+ * this.selectionActions.show(imageBase64, maskBase64);
+ */
+
+import app from './../app.js';
+import config from './../config.js';
+import Base_layers_class from './../core/base-layers.js';
+import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
+import { showProgress, updateProgress, hideProgress, connectProgressSSE, disconnectProgressSSE } from './../libs/progress_overlay.js';
+
+const BASE = window.API_BASE_URL || '';
+
+export class SelectionActions {
+ constructor(tool) {
+ this.tool = tool;
+ this.Base_layers = new Base_layers_class();
+ this._panel = null;
+ this._imageData = null;
+ this._maskData = null;
+ this._escHandler = null;
+ }
+
+ show(imageBase64, maskBase64) {
+ this.hide();
+ this._imageData = imageBase64;
+ this._maskData = maskBase64;
+
+ var panel = document.createElement('div');
+ panel.id = 'sel-actions-panel';
+ panel.style.cssText = [
+ 'position:fixed',
+ 'bottom:80px',
+ 'left:50%',
+ 'transform:translateX(-50%)',
+ 'background:#1a1a2e',
+ 'border:1px solid #3a3a6a',
+ 'border-radius:12px',
+ 'padding:14px 16px',
+ 'z-index:10000',
+ 'font-family:sans-serif',
+ 'font-size:12px',
+ 'color:#d0d0e0',
+ 'min-width:360px',
+ 'max-width:420px',
+ 'box-shadow:0 8px 32px rgba(0,0,0,0.7)',
+ 'display:flex',
+ 'flex-direction:column',
+ 'gap:6px',
+ ].join(';');
+
+ // ── Title row ────────────────────────────────────────────────────────
+ var titleRow = document.createElement('div');
+ titleRow.style.cssText = 'display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2px';
+ var titleBlock = document.createElement('div');
+ var title = document.createElement('div');
+ title.textContent = 'Selection ready';
+ title.style.cssText = 'font-size:13px;font-weight:bold;color:#aaaaff;line-height:1.3';
+ var subtitle = document.createElement('div');
+ subtitle.textContent = 'Nothing has changed yet — choose an action below';
+ subtitle.style.cssText = 'font-size:10px;color:#7777aa;margin-top:1px';
+ titleBlock.appendChild(title);
+ titleBlock.appendChild(subtitle);
+ var closeX = document.createElement('button');
+ closeX.textContent = '✕';
+ closeX.style.cssText = 'background:none;border:none;color:#666;cursor:pointer;font-size:14px;padding:0 0 0 8px;line-height:1;flex-shrink:0';
+ closeX.title = 'Dismiss (keeps your selection active)';
+ closeX.onclick = () => this.hide();
+ titleRow.appendChild(titleBlock);
+ titleRow.appendChild(closeX);
+ panel.appendChild(titleRow);
+
+ // ── Section: AI Actions ──────────────────────────────────────────────
+ panel.appendChild(_sectionLabel('AI Actions'));
+
+ // Scale by %
+ var scaleWrap = document.createElement('div');
+ scaleWrap.style.cssText = 'background:#16213e;border-radius:7px;padding:7px 10px';
+ var scaleRow = document.createElement('div');
+ scaleRow.style.cssText = 'display:flex;align-items:center;gap:6px';
+ var scaleLabel = document.createElement('span');
+ scaleLabel.textContent = 'Scale object by';
+ scaleLabel.style.color = '#aaa';
+ var scaleInput = document.createElement('input');
+ scaleInput.type = 'number';
+ scaleInput.value = '103';
+ scaleInput.min = '1';
+ scaleInput.max = '500';
+ scaleInput.style.cssText = 'width:52px;background:#0f0f1a;color:#fff;border:1px solid #4a4a8a;border-radius:4px;padding:2px 5px;font-size:12px';
+ var scaleUnit = document.createElement('span');
+ scaleUnit.textContent = '%';
+ scaleUnit.style.color = '#888';
+ var scaleHint = document.createElement('span');
+ scaleHint.style.cssText = 'color:#6688aa;font-size:10px;margin-left:2px';
+ scaleHint.textContent = '= 3% bigger';
+ var scaleBtn = _btn('Apply', '#1a2a4a', '#8aacff');
+ scaleBtn.style.marginLeft = 'auto';
+ scaleInput.addEventListener('input', () => {
+ var v = parseFloat(scaleInput.value);
+ if (isNaN(v) || v === 100) scaleHint.textContent = '= no change';
+ else if (v > 100) scaleHint.textContent = '= ' + (v - 100).toFixed(0) + '% bigger';
+ else scaleHint.textContent = '= ' + (100 - v).toFixed(0) + '% smaller';
+ });
+ scaleBtn.onclick = () => {
+ var pct = parseFloat(scaleInput.value) || 103;
+ this._scaleSelection(pct);
+ };
+ scaleRow.appendChild(scaleLabel);
+ scaleRow.appendChild(scaleInput);
+ scaleRow.appendChild(scaleUnit);
+ scaleRow.appendChild(scaleHint);
+ scaleRow.appendChild(scaleBtn);
+ var scaleDesc = document.createElement('div');
+ scaleDesc.textContent = 'Moves the selected object, then AI fills the vacated area';
+ scaleDesc.style.cssText = 'color:#5566aa;font-size:10px;margin-top:4px';
+ scaleWrap.appendChild(scaleRow);
+ scaleWrap.appendChild(scaleDesc);
+ panel.appendChild(scaleWrap);
+
+ // Make less symmetrical
+ panel.appendChild(_actionCard(
+ 'Make less symmetrical',
+ '#1c1a2e', '#cc99ff',
+ 'AI redraws the selection with subtle, natural imperfections',
+ () => this._makeAsymmetric()
+ ));
+
+ // Replace with clipboard
+ panel.appendChild(_actionCard(
+ 'Replace with clipboard',
+ '#1a2a1a', '#88dd88',
+ 'Scales your clipboard image to fit inside the selection shape',
+ () => this._pasteFromClipboard()
+ ));
+
+ // Replace subject from file
+ panel.appendChild(_actionCard(
+ 'Replace subject from file',
+ '#1a2a2a', '#66ddcc',
+ 'Pick any photo — AI extracts its subject and places it here, matching background lighting',
+ () => this._replaceSubjectFromFile()
+ ));
+
+ // Custom AI edit prompt
+ var aiWrap = document.createElement('div');
+ aiWrap.style.cssText = 'background:#16213e;border-radius:7px;padding:7px 10px';
+ var aiRow = document.createElement('div');
+ aiRow.style.cssText = 'display:flex;align-items:center;gap:6px';
+ var aiInput = document.createElement('input');
+ aiInput.type = 'text';
+ aiInput.placeholder = '"add a scar", "make it look aged", "blue eyes" …';
+ aiInput.style.cssText = 'flex:1;background:#0f0f1a;color:#fff;border:1px solid #4a4a8a;border-radius:4px;padding:3px 7px;font-size:11px';
+ var aiBtn = _btn('AI Edit', '#1a2a4a', '#8aacff');
+ aiBtn.onclick = () => {
+ var instruction = aiInput.value.trim();
+ if (!instruction) { alertify.warning('Enter an instruction first — describe what to change.'); return; }
+ this._aiEditRegion(instruction);
+ };
+ aiInput.addEventListener('keydown', (e) => {
+ if (e.key === 'Enter') aiBtn.click();
+ });
+ var aiDesc = document.createElement('div');
+ aiDesc.textContent = 'Inpaints the selected region according to your description';
+ aiDesc.style.cssText = 'color:#5566aa;font-size:10px;margin-top:4px';
+ aiRow.appendChild(aiInput);
+ aiRow.appendChild(aiBtn);
+ aiWrap.appendChild(aiRow);
+ aiWrap.appendChild(aiDesc);
+ panel.appendChild(aiWrap);
+
+ // ── Section: Classic Tools ────────────────────────────────────────────
+ panel.appendChild(_sectionLabel('Classic Tools'));
+ var classicRow = document.createElement('div');
+ classicRow.style.cssText = 'display:flex;gap:6px';
+ var copyBtn = _btn('Copy to layer', '#1a2a1a', '#88cc88');
+ copyBtn.style.flex = '1';
+ copyBtn.title = 'Lift a copy of the selection onto a new layer (non-destructive)';
+ copyBtn.onclick = () => { this.tool.copyToLayer(); this.hide(); };
+ var cutBtn = _btn('Cut to layer', '#2a1a1a', '#cc8888');
+ cutBtn.style.flex = '1';
+ cutBtn.title = 'Cut the selection to a new layer (erases from original)';
+ cutBtn.onclick = () => { this.tool.cutToLayer(); this.hide(); };
+ var delBtn = _btn('Erase', '#2a1a1a', '#ff7766');
+ delBtn.style.flex = '0 0 auto';
+ delBtn.title = 'Delete the selected pixels (transparent / background color)';
+ delBtn.onclick = () => { this.tool.deleteSelection(); this.hide(); };
+ classicRow.appendChild(copyBtn);
+ classicRow.appendChild(cutBtn);
+ classicRow.appendChild(delBtn);
+ panel.appendChild(classicRow);
+
+ document.body.appendChild(panel);
+ this._panel = panel;
+
+ this._escHandler = (e) => { if (e.key === 'Escape') this.hide(); };
+ document.addEventListener('keydown', this._escHandler);
+ }
+
+ hide() {
+ if (this._panel) { this._panel.remove(); this._panel = null; }
+ if (this._escHandler) {
+ document.removeEventListener('keydown', this._escHandler);
+ this._escHandler = null;
+ }
+ }
+
+ // ── Actions ─────────────────────────────────────────────────────────────
+
+ async _scaleSelection(scalePct) {
+ if (!this._check()) return;
+ this.hide();
+ showProgress('Scaling object and AI-filling the gap…', 30);
+ try {
+ var res = await _post('/api/image/scale-selection', {
+ image: this._imageData,
+ mask: this._maskData,
+ scale_pct: scalePct,
+ });
+ this.tool.updateLayerWithResult(res.result);
+ this.tool.clearSelection();
+ hideProgress();
+ alertify.success('Scaled by ' + scalePct + '%!');
+ } catch (e) {
+ hideProgress();
+ alertify.error('Scale failed: ' + e.message);
+ }
+ }
+
+ async _makeAsymmetric() {
+ if (!this._check()) return;
+ this.hide();
+ connectProgressSSE('inpaint', window.API_BASE_URL || '');
+ showProgress('AI is adding natural asymmetry…', 60);
+ try {
+ var res = await _post('/api/image/ai-edit-region', {
+ image: this._imageData,
+ mask: this._maskData,
+ instruction: 'natural asymmetry, slight organic variation, realistic, subtle imperfection',
+ negative_prompt:'perfectly symmetric, mirror image, artificial, identical halves',
+ steps: 30,
+ cfg_scale: 7.5,
+ });
+ this.tool.updateLayerWithResult(res.result);
+ this.tool.clearSelection();
+ disconnectProgressSSE();
+ hideProgress();
+ alertify.success('Made less symmetrical!');
+ } catch (e) {
+ disconnectProgressSSE();
+ hideProgress();
+ alertify.error('AI edit failed: ' + e.message);
+ }
+ }
+
+ async _aiEditRegion(instruction) {
+ if (!this._check()) return;
+ this.hide();
+ connectProgressSSE('inpaint', window.API_BASE_URL || '');
+ showProgress('AI is editing the region…', 60);
+ try {
+ var res = await _post('/api/image/ai-edit-region', {
+ image: this._imageData,
+ mask: this._maskData,
+ instruction: instruction,
+ steps: 30,
+ cfg_scale: 7.5,
+ });
+ this.tool.updateLayerWithResult(res.result);
+ this.tool.clearSelection();
+ disconnectProgressSSE();
+ hideProgress();
+ alertify.success('Done!');
+ } catch (e) {
+ disconnectProgressSSE();
+ hideProgress();
+ alertify.error('AI edit failed: ' + e.message);
+ }
+ }
+
+ async _pasteFromClipboard() {
+ if (!this._check()) return;
+
+ if (!navigator.clipboard || !navigator.clipboard.read) {
+ alertify.error('Clipboard API not available. Use HTTPS or enable clipboard permissions.');
+ return;
+ }
+ try {
+ var items = await navigator.clipboard.read();
+ var clipBlob = null;
+ for (var item of items) {
+ for (var type of item.types) {
+ if (type.startsWith('image/')) {
+ clipBlob = await item.getType(type);
+ break;
+ }
+ }
+ if (clipBlob) break;
+ }
+ if (!clipBlob) {
+ alertify.error('No image in clipboard. Copy an image first (e.g., right-click → Copy image).');
+ return;
+ }
+
+ var clipBase64 = await _blobToBase64(clipBlob);
+ this.hide();
+ showProgress('Pasting clipboard into selection…', 10);
+
+ var res = await _post('/api/image/paste-into-selection', {
+ image: this._imageData,
+ mask: this._maskData,
+ paste_image: clipBase64,
+ });
+ this.tool.updateLayerWithResult(res.result);
+ this.tool.clearSelection();
+ hideProgress();
+ alertify.success('Clipboard pasted into selection!');
+ } catch (e) {
+ hideProgress();
+ alertify.error('Paste failed: ' + e.message);
+ }
+ }
+
+ async _replaceSubjectFromFile() {
+ if (!this._check()) return;
+
+ // Open a file picker — no clipboard API required
+ var fileInput = document.createElement('input');
+ fileInput.type = 'file';
+ fileInput.accept = 'image/*';
+
+ fileInput.onchange = async () => {
+ var file = fileInput.files[0];
+ if (!file) return;
+
+ var subjectBase64 = await _fileToBase64(file);
+ this.hide();
+ showProgress('Extracting subject and compositing…', 15);
+
+ try {
+ var res = await _post('/api/image/replace-subject', {
+ background_image: this._imageData,
+ subject_image: subjectBase64,
+ mask: this._maskData,
+ match_colors: true,
+ });
+ this.tool.updateLayerWithResult(res.result);
+ this.tool.clearSelection();
+ hideProgress();
+ alertify.success('Subject replaced with background color matching!');
+ } catch (e) {
+ hideProgress();
+ alertify.error('Replace subject failed: ' + e.message);
+ }
+ };
+
+ fileInput.click();
+ }
+
+ _check() {
+ if (!this._imageData || !this._maskData) {
+ alertify.error('No selection data. Make a new selection first.');
+ return false;
+ }
+ return true;
+ }
+}
+
+// ── Shared method: patch into both smart_select and brush_select instances ───
+
+/**
+ * Update the active layer canvas with a base64 result image from the backend.
+ * Call as `this.updateLayerWithResult(base64)` on any tool that extends Base_tools_class.
+ */
+export function updateLayerWithResult(base64, tool) {
+ var img = new Image();
+ img.onload = function () {
+ var canvas = document.createElement('canvas');
+ canvas.width = img.width;
+ canvas.height = img.height;
+ canvas.getContext('2d').drawImage(img, 0, 0);
+
+ app.State.do_action(
+ new app.Actions.Bundle_action('ai_transform', 'AI Transform', [
+ new app.Actions.Update_layer_image_action(canvas, config.layer.id)
+ ])
+ );
+ // Trigger re-render
+ config.need_render = true;
+ };
+ img.src = 'data:image/png;base64,' + base64;
+}
+
+// ── Private helpers ──────────────────────────────────────────────────────────
+
+function _btn(text, bg, color) {
+ var b = document.createElement('button');
+ b.textContent = text;
+ b.style.cssText = 'background:' + bg + ';color:' + color + ';border:1px solid #3a3a6a;padding:4px 10px;border-radius:5px;cursor:pointer;font-size:11px;white-space:nowrap';
+ return b;
+}
+
+function _actionCard(text, bg, color, description, handler) {
+ var wrap = document.createElement('div');
+ wrap.style.cssText = 'background:' + bg + ';border-radius:7px;padding:7px 10px;cursor:pointer;border:1px solid transparent';
+ wrap.addEventListener('mouseenter', () => { wrap.style.borderColor = color; });
+ wrap.addEventListener('mouseleave', () => { wrap.style.borderColor = 'transparent'; });
+ wrap.onclick = handler;
+ var label = document.createElement('div');
+ label.textContent = text;
+ label.style.cssText = 'color:' + color + ';font-size:12px;font-weight:500;pointer-events:none';
+ var desc = document.createElement('div');
+ desc.textContent = description;
+ desc.style.cssText = 'color:#5566aa;font-size:10px;margin-top:3px;pointer-events:none';
+ wrap.appendChild(label);
+ wrap.appendChild(desc);
+ return wrap;
+}
+
+function _sectionLabel(text) {
+ var el = document.createElement('div');
+ el.style.cssText = 'font-size:9px;font-weight:bold;letter-spacing:0.08em;color:#555577;text-transform:uppercase;margin-top:2px';
+ el.textContent = text;
+ return el;
+}
+
+async function _post(path, body) {
+ var r = await fetch(BASE + path, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(body),
+ });
+ if (!r.ok) {
+ var err = await r.json().catch(() => ({ detail: r.statusText }));
+ throw new Error(err.detail || 'Request failed');
+ }
+ return r.json();
+}
+
+function _blobToBase64(blob) {
+ return new Promise((resolve, reject) => {
+ var reader = new FileReader();
+ reader.onload = (e) => resolve(e.target.result.split(',')[1]);
+ reader.onerror = reject;
+ reader.readAsDataURL(blob);
+ });
+}
+
+function _fileToBase64(file) {
+ return new Promise((resolve, reject) => {
+ var reader = new FileReader();
+ reader.onload = (e) => resolve(e.target.result.split(',')[1]);
+ reader.onerror = reject;
+ reader.readAsDataURL(file);
+ });
+}
diff --git a/paintplus/frontend/src/js/tools/shape.js b/paintplus/frontend/src/js/tools/shape.js
new file mode 100644
index 0000000..e48f792
--- /dev/null
+++ b/paintplus/frontend/src/js/tools/shape.js
@@ -0,0 +1,272 @@
+import app from './../app.js';
+import config from './../config.js';
+import Base_tools_class from './../core/base-tools.js';
+import Base_layers_class from './../core/base-layers.js';
+import Dialog_class from './../libs/popup.js';
+import GUI_tools_class from './../core/gui/gui-tools.js';
+import File_my_library_class from './../modules/file/my_library.js';
+
+var instance = null;
+
+class Shape_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+
+ //singleton
+ if (instance) {
+ return instance;
+ }
+ instance = this;
+
+ this.Base_layers = new Base_layers_class();
+ this.GUI_tools = new GUI_tools_class();
+ this.POP = new Dialog_class();
+ this.My_library = new File_my_library_class();
+ this.ctx = ctx;
+ this.name = 'shape';
+ this.layer = {};
+ this.preview_width = 150;
+ this.preview_height = 120;
+ this.activeTab = 'shapes'; // 'shapes' or 'library'
+
+ this.set_events();
+ }
+
+ set_events() {
+ document.addEventListener('keydown', (event) => {
+ var code = event.keyCode;
+ if (this.Helper.is_input(event.target))
+ return;
+
+ if (code == 72) {
+ //H
+ this.show_shapes();
+ }
+ }, false);
+ }
+
+ load() {
+
+ }
+
+ on_activate() {
+ this.show_shapes();
+ }
+
+ async show_shapes(){
+ var _this = this;
+
+ // Build tabs HTML
+ var tabsHtml = '';
+ tabsHtml += 'Built-in Shapes ';
+ tabsHtml += 'My Library ';
+ tabsHtml += '
';
+
+ // Build shapes HTML
+ var shapesHtml = '';
+ var data = this.get_shapes();
+
+ for (var i in data) {
+ shapesHtml += '
';
+ shapesHtml += '
';
+ shapesHtml += '
' + data[i].title + '
';
+ shapesHtml += '
';
+ }
+ for (var i = 0; i < 4; i++) {
+ shapesHtml += '
';
+ }
+ shapesHtml += '
';
+ libraryHtml += '
Loading library...
';
+ libraryHtml += '
';
+ html += '
Your library is empty.
';
+ html += '
Use File > My Library > Save to Library to add assets.
';
+ html += '
';
+ html += '
';
+
+ for (var cat in categories) {
+ html += '
';
+ html += '
' + cat + ' (' + categories[cat].length + ') ';
+ html += '
';
+
+ categories[cat].forEach(function(asset) {
+ html += '
';
+ html += '
';
+ html += '
' + asset.name + '
';
+ html += '
';
+ html += 'Insert ';
+ html += 'Delete ';
+ html += '
';
+ html += '
';
+ });
+
+ html += '
';
+ }
+
+ html += '
';
+ for (let i = startIndex; i < startIndex + this.fontsPerPage; i++) {
+ const font = this.fontListFiltered[i];
+ if (!font) break;
+ const isSelected = !!this.selectedFonts[font.family];
+ load_font_family({ family: font.family, variants: font.variants });
+ html += `
+
+
+
+
+ The quick brown fox jumps over the lazy dog.
+
+
+ ${font.family}
+
+
+
+ `;
+ }
+ html += `
+
+ `;
+ this.fontListNode.innerHTML = html;
+
+ // Attempt to remove vertical scroll by decreasing page size.
+ if (this.fontsPerPage > 3 && this.dialogContentNode.scrollHeight > this.dialogContentNode.clientHeight) {
+ this.fontsPerPage--;
+ this.render_font_list(page);
+ return;
+ }
+
+ // Handle checkbox
+ this.fontListNode.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => {
+ checkbox.addEventListener('change', (e) => {
+ if (checkbox.checked) {
+ this.selectedFonts[checkbox.value] = this.fontListFiltered
+ .slice(startIndex, startIndex + this.fontsPerPage)
+ .filter((font) => { return font.family === checkbox.value; })[0];
+ } else {
+ delete this.selectedFonts[checkbox.value];
+ }
+ });
+ });
+
+ // Handle pagination
+ this.fontListNode.querySelector('.pagination').addEventListener('click', (e) => {
+ const page = parseInt(e.target.getAttribute('data-page'), 10);
+ this.render_font_list(page);
+ });
+ }
+
+ show() {
+ this.POP.show({
+ title: 'Search for Font',
+ params: [
+ { name: "query", title: "Search:", value: '', prevent_submission: true }
+ ],
+ on_load: (params, popup) => {
+ this.popup = popup;
+ var node = document.createElement("div");
+ this.dialogContentNode = popup.el.querySelector('.dialog_content');
+ this.dialogContentNode.appendChild(node);
+ this.fontListNode = node;
+
+ const queryInput = popup.el.querySelector('#pop_data_query');
+ queryInput.addEventListener('input', (e) => {
+ const query = (e.target.value || '').toLowerCase();
+ if (!query) {
+ this.fontListFiltered = this.fontList;
+ this.render_font_list();
+ } else {
+ clearTimeout(this.searchTimeoutHandle);
+ this.searchTimeoutHandle = setTimeout(() => {
+ this.fontListFiltered = [];
+ for (let i = 0; i < this.fontList.length; i++) {
+ const fontFamily = this.fontList[i].family.toLowerCase();
+ if (fontFamily.includes(query)) {
+ this.fontListFiltered.push(this.fontList[i]);
+ }
+ }
+ this.render_font_list();
+ }, 350);
+ }
+ });
+
+ const apiKey = config.google_webfonts_key;
+ $.getJSON(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`, (data) => {
+ this.fontList = data.items;
+ this.fontListFiltered = data.items;
+ this.render_font_list();
+ }).fail(function () {
+ alertify.error('Error loading the list of fonts from Google.');
+ });
+ },
+ on_finish: () => {
+ this.popup = null;
+ this.POP = null;
+ if (Object.keys(this.selectedFonts).length > 0) {
+ let firstFont = null;
+ for (let font in this.selectedFonts) {
+ if (!firstFont) {
+ firstFont = font;
+ }
+ config.user_fonts[font] = this.selectedFonts[font];
+ }
+ app.GUI.GUI_tools.action_data().attributes.font.value = firstFont;
+ app.GUI.GUI_tools.show_action_attributes();
+ try {
+ const changeEvent = new Event('change');
+ document.querySelector('#action_attributes select#font').dispatchEvent(changeEvent);
+ } catch (error) {
+ console.warn('Application markup may have changed, ', error);
+ }
+ }
+ }
+ });
+ }
+}
+
+
+class Text_class extends Base_tools_class {
+
+ constructor(ctx) {
+ super();
+ this.Base_layers = new Base_layers_class();
+ this.GUI_tools = new GUI_tools_class();
+ this.Helper = new Helper_class();
+ this.ctx = ctx;
+ this.name = 'text';
+ this.layer = {};
+ this.creating = false;
+ this.selecting = false;
+ this.resizing = false;
+ this.focused = false;
+ this.focusedValue = null;
+ this.mousedownX = 0;
+ this.mousedownY = 0;
+ this.mousedownBounds = {};
+ this.is_fonts_loaded = false;
+ if (ctx) {
+ this.selection = {
+ x: null,
+ y: null,
+ width: null,
+ height: null,
+ };
+ var sel_config = {
+ enable_background: false,
+ enable_borders: true,
+ enable_controls: true,
+ enable_rotation: true,
+ enable_move: false,
+ data_function: () => {
+ return this.selection;
+ },
+ };
+ this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
+
+ // Need a textarea in order to listen for keyboard inputs in an accessible, multi-platform independent way
+ this.textarea = document.createElement('textarea');
+ this.textarea.id = 'text_tool_keyboard_input';
+ this.textarea.setAttribute('autocorrect', 'off');
+ this.textarea.setAttribute('autocapitalize', 'off');
+ this.textarea.setAttribute('autocomplete', 'off');
+ this.textarea.setAttribute('spellcheck', 'false');
+ this.textarea.style = `position: absolute; top: 0; left: 0; padding: 0; width: 1px; height: 1px; background: transparent; border: none; outline: none; color: transparent; opacity: 0.01; pointer-events: none;`;
+ document.body.appendChild(this.textarea);
+
+ this.textarea.addEventListener('focus', () => {
+ this.focused = true;
+ let editor = this.get_editor(this.layer);
+ if (editor) {
+ this.focusedValue = JSON.stringify(editor.document.lines);
+ }
+ }, true);
+
+ this.textarea.addEventListener('blur', () => {
+ this.focused = false;
+ let editor = this.get_editor(this.layer);
+ if (editor) {
+ let value = JSON.stringify(editor.document.lines);
+ if (this.focusedValue !== value) {
+ this.layer.data = JSON.parse(this.focusedValue);
+ app.State.do_action(
+ new app.Actions.Update_layer_action(this.layer.id, { data: JSON.parse(value) })
+ );
+ }
+ }
+ this.focusedValue = null;
+ this.Base_layers.render();
+ }, true);
+
+ let isComposing = false;
+ let beforeImeText = "";
+ this.textarea.addEventListener('compositionstart', () => {
+ beforeImeText = "";
+ isComposing = true;
+ if (config.layer) {
+ const editor = this.get_editor(config.layer);
+ beforeImeText = editor.get_complete_text();
+ }
+ });
+
+ this.textarea.addEventListener('compositionend', (e) => {
+ const editor = this.get_editor(config.layer);
+ editor.set_IME_position(e.target.value);
+ beforeImeText = "";
+ isComposing = false;
+ e.target.value = '';
+ });
+
+ this.textarea.addEventListener('input', (e) => {
+ if(isComposing){
+ const editor = this.get_editor(config.layer);
+ editor.replace_entire_IME_text(beforeImeText, e.target.value);
+ this.Base_layers.render();
+ this.extend_fixed_bounds(config.layer, editor);
+ }
+ else if (config.layer) {
+ const editor = this.get_editor(config.layer);
+ editor.insert_text_at_current_position(e.target.value);
+ e.target.value = '';
+ this.Base_layers.render();
+ this.extend_fixed_bounds(config.layer, editor);
+ }
+ }, true);
+
+ this.textarea.addEventListener('keydown', (e) => {
+ if (config.layer) {
+ let handled = true;
+ const editor = this.get_editor(config.layer);
+ switch (e.key) {
+ case 'Backspace':
+ editor.delete_character_at_current_position(false);
+ break;
+ case 'Delete':
+ editor.delete_character_at_current_position(true);
+ break;
+ case 'Home':
+ editor.selection.move_line_start(e.shiftKey);
+ break;
+ case 'End':
+ editor.selection.move_line_end(e.shiftKey);
+ break;
+ case 'Left': case 'ArrowLeft':
+ if (!e.shiftKey && !editor.selection.is_empty()) {
+ editor.selection.isActiveSideEnd = false;
+ editor.selection.move_character_previous(0, false);
+ } else if (e.ctrlKey) {
+ editor.selection.move_word_previous(e.shiftKey);
+ } else {
+ editor.selection.move_character_previous(1, e.shiftKey);
+ }
+ break;
+ case 'Right': case 'ArrowRight':
+ if (!e.shiftKey && !editor.selection.is_empty()) {
+ editor.selection.isActiveSideEnd = true;
+ editor.selection.move_character_next(0, false);
+ } else if (e.ctrlKey) {
+ editor.selection.move_word_next(e.shiftKey);
+ } else {
+ editor.selection.move_character_next(1, e.shiftKey);
+ }
+ break;
+ case 'Up': case 'ArrowUp':
+ editor.selection.move_line_previous(1, e.shiftKey);
+ break;
+ case 'Down': case 'ArrowDown':
+ editor.selection.move_line_next(1, e.shiftKey);
+ break;
+ case 'a':
+ if (e.ctrlKey) {
+ editor.selection.set_position(0, 0);
+ const lastLine = editor.document.lines.length - 1;
+ editor.selection.set_position(lastLine, editor.document.get_line_character_count(lastLine), true);
+ break;
+ }
+ case 'b':
+ if (e.ctrlKey) {
+ e.preventDefault();
+ document.querySelector('#action_attributes #bold').click();
+ break;
+ }
+ case 'c':
+ if (e.ctrlKey) {
+ e.preventDefault();
+ this.textarea.value = editor.selection.get_text();
+ this.textarea.select();
+ this.textarea.setSelectionRange(0, 99999);
+ document.execCommand('copy');
+ this.textarea.value = '';
+ break;
+ }
+ case 'i':
+ if (e.ctrlKey) {
+ e.preventDefault();
+ document.querySelector('#action_attributes #italic').click();
+ break;
+ }
+ case 'u':
+ if (e.ctrlKey) {
+ e.preventDefault();
+ document.querySelector('#action_attributes #underline').click();
+ break;
+ }
+ case 'x':
+ if (e.ctrlKey) {
+ e.preventDefault();
+ this.textarea.value = editor.selection.get_text();
+ this.textarea.select();
+ this.textarea.setSelectionRange(0, 99999);
+ document.execCommand('copy');
+ this.textarea.value = '';
+ editor.delete_selection();
+ break;
+ }
+ default:
+ handled = false;
+ }
+ if (handled) {
+ this.update_tool_attributes(config.layer, editor);
+ this.Base_layers.render();
+ }
+ this.extend_fixed_bounds(config.layer, editor);
+ return !handled;
+ }
+ }, true);
+ }
+ }
+
+ dragStart(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousedown(event);
+ }
+
+ dragMove(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mousemove(event);
+ }
+
+ dragEnd(event) {
+ if (config.TOOL.name != this.name)
+ return;
+ this.mouseup(event);
+ }
+
+ load() {
+ // Mouse events
+ document.addEventListener('mousedown', (event) => {
+ this.dragStart(event);
+ });
+ document.addEventListener('mousemove', (event) => {
+ this.dragMove(event);
+ });
+ document.addEventListener('mouseup', (event) => {
+ this.dragEnd(event);
+ });
+ document.addEventListener('dblclick', (event) => {
+ this.doubleClick(event);
+ });
+
+ // Touch events
+ document.addEventListener('touchstart', (event) => {
+ this.dragStart(event);
+ });
+ document.addEventListener('touchmove', (event) => {
+ this.dragMove(event);
+ });
+ document.addEventListener('touchend', (event) => {
+ this.dragEnd(event);
+ });
+ }
+
+ mousedown(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false)
+ return;
+
+ this.creating = false;
+ this.selecting = false;
+ this.resizing = false;
+
+ this.mousedownX = mouse.x;
+ this.mousedownY = mouse.y;
+ this.mousedownBounds = {
+ x: config.layer.x,
+ y: config.layer.y,
+ width: config.layer.width,
+ height: config.layer.height,
+ boundary: config.layer.params.boundary
+ };
+
+ if (this.Base_selection.mouse_lock !== null) {
+ this.resizing = true;
+ return;
+ }
+
+ const existingLayer = this.get_text_layer_at_mouse(e);
+ if (existingLayer) {
+ this.selecting = true;
+ this.layer = existingLayer;
+ const editor = this.get_editor(this.layer);
+ editor.trigger_cursor_start(this.layer, -1 + mouse.x - this.layer.x, mouse.y - this.layer.y);
+ app.State.do_action(
+ new app.Actions.Bundle_action('select_text_layer', 'Select Text Layer', [
+ new app.Actions.Select_layer_action(existingLayer.id),
+ new app.Actions.Set_selection_action(this.layer.x, this.layer.y, this.layer.width, this.layer.height)
+ ])
+ );
+ }
+ else {
+ // Create a new text layer
+ this.creating = true;
+ const layer = {
+ type: this.name,
+ params: {
+ boundary: 'dynamic',
+ kerning: 'metrics',
+ text_direction: 'ltr',
+ wrap_direction: 'ttb',
+ halign: 'left',
+ valign: 'top',
+ wrap: 'letter'
+ },
+ render_function: [this.name, 'render'],
+ x: mouse.x,
+ y: mouse.y,
+ rotate: 0,
+ is_vector: true,
+ };
+ app.State.do_action(
+ new app.Actions.Bundle_action('new_text_layer', 'New Text Layer', [
+ new app.Actions.Insert_layer_action(layer),
+ new app.Actions.Set_selection_action(mouse.x, mouse.y, 0, 0)
+ ])
+ );
+ this.layer = config.layer;
+ }
+ }
+
+ mousemove(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.is_drag == false)
+ return;
+ if (mouse.click_valid == false) {
+ return;
+ }
+
+ if (this.resizing) {
+ config.layer.x = this.selection.x;
+ config.layer.y = this.selection.y;
+ config.layer.width = this.selection.width;
+ config.layer.height = this.selection.height;
+ if (config.layer.params.boundary === 'dynamic') {
+ config.layer.params.boundary = 'box';
+ }
+ }
+ else if (this.creating) {
+ const width = Math.abs(mouse.x - this.mousedownX);
+ const height = Math.abs(mouse.y - this.mousedownY);
+
+ //more data
+ if (config.layer.params.boundary === 'dynamic') {
+ config.layer.params.boundary = 'box';
+ }
+ config.layer.x = Math.min(mouse.x, this.mousedownX);
+ config.layer.y = Math.min(mouse.y, this.mousedownY);
+ config.layer.width = width;
+ config.layer.height = height;
+ } else {
+ this.get_editor(this.layer).trigger_cursor_move(this.layer, -1 + mouse.x - this.layer.x, mouse.y - this.layer.y);
+ }
+ this.Base_layers.render();
+ }
+
+ mouseup(e) {
+ var mouse = this.get_mouse_info(e);
+ if (mouse.click_valid == false) {
+ return;
+ }
+ const editor = this.get_editor(this.layer);
+
+ if (this.resizing) {
+ config.layer.x = this.mousedownBounds.x;
+ config.layer.y = this.mousedownBounds.y;
+ config.layer.width = this.mousedownBounds.width;
+ config.layer.height = this.mousedownBounds.height;
+ const new_params = JSON.parse(JSON.stringify(config.layer.params));
+ new_params.boundary = config.layer.params.boundary;
+ config.layer.params.boundary = this.mousedownBounds.boundary;
+ app.State.do_action(
+ new app.Actions.Bundle_action('resize_text_layer', 'Resize Text Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: this.selection.x,
+ y: this.selection.y,
+ width: this.selection.width,
+ height: this.selection.height,
+ params: new_params
+ }),
+ new app.Actions.Set_selection_action(this.selection.x, this.selection.y, this.selection.width, this.selection.height)
+ ])
+ );
+ }
+ else if (this.creating) {
+ let width = Math.abs(mouse.x - this.mousedownX);
+ let height = Math.abs(mouse.y - this.mousedownY);
+
+ if (width == 0 && height == 0) {
+ // Same coordinates - let render figure out dynamic width
+ width = 1;
+ height = 1;
+ }
+ app.State.do_action(
+ new app.Actions.Bundle_action('resize_text_layer', 'Resize Text Layer', [
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: Math.min(mouse.x, this.mousedownX),
+ y: Math.min(mouse.y, this.mousedownY),
+ width,
+ height
+ })
+ ]),
+ { merge_with_history: 'new_text_layer' }
+ );
+ this.textarea.focus();
+ }
+ else if (this.selecting) {
+ editor.trigger_cursor_end();
+ this.textarea.focus();
+
+ if (editor.selection.is_empty() && editor.document.queuedMetaChanges) {
+ let meta = {};
+ const existingMeta = editor.document.get_meta_range(editor.selection.start.line, editor.selection.start.character, editor.selection.end.line, editor.selection.end.character);
+ for (let metaKey in existingMeta) {
+ meta[metaKey] = editor.document.queuedMetaChanges[metaKey] != null ? editor.document.queuedMetaChanges[metaKey] : existingMeta[metaKey][0];
+ }
+ } else {
+ editor.document.queuedMetaChanges = null;
+ this.update_tool_attributes(this.layer, editor);
+ }
+ }
+
+ // Resize layer based on text boundaries.
+ this.extend_fixed_bounds(this.layer, editor);
+ this.Base_layers.render();
+
+ // Center layer on mouse if not click & drag
+ if (this.creating && config.layer.params.boundary === 'dynamic') {
+ requestAnimationFrame(() => {
+ app.State.do_action(
+ new app.Actions.Update_layer_action(config.layer.id, {
+ x: config.layer.x - config.layer.width / 2,
+ y: config.layer.y - config.layer.height / 2
+ }),
+ { merge_with_history: 'new_text_layer' }
+ );
+ });
+ }
+
+ this.resizing = false;
+ this.selecting = false;
+ this.creating = false;
+ }
+
+
+ doubleClick(event) {
+ if (document.activeElement === this.textarea) {
+ const editor = this.get_editor(this.layer);
+ if (editor.selection.is_empty()) {
+ const position = editor.selection.get_position();
+ const wordStart = editor.document.get_word_start_position(position.line, position.character, true);
+ const wordEnd = editor.document.get_word_end_position(position.line, position.character, true);
+ editor.selection.set_position(wordStart.line, wordStart.character);
+ editor.selection.set_position(wordEnd.line, wordEnd.character, true);
+ this.update_tool_attributes(this.layer, editor);
+ }
+ }
+ }
+
+ on_params_update(param) {
+ const editor = this.get_editor(config.layer);
+ const value = param.value;
+ const meta = {};
+ let returnValue = undefined;
+ switch (param.key) {
+ case 'font':
+ if (value.includes('...')) {
+ returnValue = {
+ new_values: {
+ font: ''
+ }
+ };
+ new Google_fonts_search_class().show();
+ }
+ else if (value) meta.family = value;
+ break;
+ case 'size':
+ if (value) meta.size = value;
+ break;
+ case 'bold':
+ meta.bold = value;
+ break;
+ case 'italic':
+ meta.italic = value;
+ break;
+ case 'underline':
+ meta.underline = value;
+ break;
+ case 'strikethrough':
+ meta.strikethrough = value;
+ break;
+ case 'fill':
+ if (value) meta.fill_color = value;
+ break;
+ case 'stroke':
+ if (value) meta.stroke_color = value;
+ break;
+ case 'stroke_size':
+ if (!isNaN(value)) meta.stroke_size = value;
+ break;
+ case 'kerning':
+ if (!isNaN(value)) meta.kerning = value;
+ break;
+ case 'leading':
+ if (!isNaN(value)) meta.leading = value;
+ break;
+ }
+ if (editor.selection.is_empty()) {
+ if (!editor.document.queuedMetaChanges) {
+ editor.document.queuedMetaChanges = {};
+ }
+ for (let metaKey in meta) {
+ editor.document.queuedMetaChanges[metaKey] = meta[metaKey];
+ }
+ } else {
+ editor.document.queuedMetaChanges = null;
+ let oldData = JSON.parse(JSON.stringify(editor.document.lines));
+ editor.document.set_meta_range(editor.selection.start.line, editor.selection.start.character, editor.selection.end.line, editor.selection.end.character, meta);
+ editor.hasValueChanged = true;
+ this.layer.data = oldData;
+ app.State.do_action(
+ new app.Actions.Update_layer_action(this.layer.id, { data: JSON.parse(JSON.stringify(editor.document.lines)) })
+ );
+ this.Base_layers.render();
+ }
+ return returnValue;
+ }
+
+ update_tool_attributes(layer, editor) {
+ if (layer && layer.params) {
+ const meta = editor.document.get_meta_range(editor.selection.start.line, editor.selection.start.character, editor.selection.end.line, editor.selection.end.character);
+ const toolAttributes = this.GUI_tools.action_data().attributes;
+ toolAttributes.font.value = meta.family.length === 1 ? meta.family[0] : '';
+ toolAttributes.size = meta.size.length === 1 ? meta.size[0] : parseFloat(null);
+ toolAttributes.bold.value = meta.bold.includes(false) ? false : true;
+ toolAttributes.italic.value = meta.italic.includes(false) ? false : true;
+ toolAttributes.underline.value = meta.underline.includes(false) ? false : true;
+ toolAttributes.strikethrough.value = meta.strikethrough.includes(false) ? false : true;
+ toolAttributes.fill = meta.fill_color.length === 1 ? meta.fill_color[0] : '#000000';
+ toolAttributes.stroke = meta.stroke_color.length === 1 ? meta.stroke_color[0] : '#000000';
+ toolAttributes.stroke_size.value = meta.stroke_size.length === 1 ? meta.stroke_size[0] : parseFloat(null);
+ toolAttributes.kerning.value = meta.kerning.length === 1 ? meta.kerning[0] : parseFloat(null);
+ toolAttributes.leading.value = meta.leading.length === 1 ? meta.leading[0] : parseFloat(null);
+ this.GUI_tools.show_action_attributes();
+ }
+ }
+
+ resize_to_dynamic_bounds(layer, editor) {
+ if (layer && layer.params && layer.params.boundary === 'dynamic') {
+ let new_width = Math.max(9, editor.textBoundaryWidth + 1);
+ let new_height = Math.max(9, editor.textBoundaryHeight + 1);
+ config.layer.width = new_width;
+ config.layer.height = new_height;
+ }
+ }
+
+ extend_fixed_bounds(layer, editor) {
+ if (layer && layer.params && layer.params.boundary !== 'dynamic') {
+ const isHorizontalTextDirection = ['ltr', 'rtl'].includes(layer.params.textDirection);
+ let new_width = layer.width;
+ let new_height = layer.height;
+ if (isHorizontalTextDirection) {
+ new_width = Math.max(editor.textBoundaryWidth + 1, new_width);
+ } else {
+ new_height = Math.max(editor.textBoundaryHeight + 1, new_height);
+ }
+ config.layer.width = new_width;
+ config.layer.height = new_height;
+ }
+ }
+
+ render(ctx, layer) {
+ if (layer.width == 0 && layer.height == 0)
+ return;
+ var params = layer.params;
+
+ const isActiveLayerAndTextTool = layer === config.layer && config.TOOL.name === 'text';
+ const editor = this.get_editor(layer);
+ editor.selection.set_visible(isActiveLayerAndTextTool);
+ editor.selection.set_cursor_visible(isActiveLayerAndTextTool && (this.selecting || this.focused));
+ editor.render(ctx, layer);
+ if (layer === config.layer) {
+ this.resize_to_dynamic_bounds(layer, editor);
+ }
+ if (!this.resizing && isActiveLayerAndTextTool) {
+ this.selection.x = layer.x;
+ this.selection.y = layer.y;
+ this.selection.width = layer.width;
+ this.selection.height = layer.height;
+ this.selection.rotate = layer.rotate;
+ } else if (config.layer.type !== 'text') {
+ this.selection.x = -100000;
+ this.selection.y = -100000;
+ this.selection.width = 0;
+ this.selection.height = 0;
+ }
+ }
+
+ get_editor(layer) {
+ let editor = layerEditors.get(layer);
+ if (!editor) {
+ editor = new Text_editor_class();
+
+ // Convert legacy to new format
+ if (layer.params && layer.params.text) {
+ const params = layer.params;
+ let lines = [];
+ const textLines = layer.params.text.split('\n');
+ const family = params.family && params.family.value? params.family.value : params.family;
+ for (const textLine of textLines) {
+ lines.push([
+ {
+ text: textLine,
+ meta: {
+ family,
+ size: params.size,
+ bold: params.bold,
+ italic: params.italic,
+ fill_color: params.stroke ? '#ffffff00' : layer.color,
+ stroke_color: params.stroke ? layer.color : '#ffffff00',
+ stroke_size: params.stroke ? params.stroke_size : 0,
+ leading: 0
+ }
+ }
+ ]);
+ }
+ params.boundary = 'box';
+ params.kerning = 'metrics';
+ params.halign = params.align ? (params.align.value ? params.align.value : params.align).toLowerCase() : 'left';
+ params.valign = 'top';
+ params.text_direction = 'ltr';
+ params.wrap_direction = 'ttb';
+ params.wrap = 'word';
+ delete params.text;
+ delete params.family;
+ delete params.size;
+ delete params.bold;
+ delete params.italic;
+ delete params.stroke;
+ delete params.stroke_size;
+ delete params.align;
+ layer.data = lines;
+ layer.x -= 1;
+
+ // Change leading offset so line height matches legacy line height calculation... need to load the font first to do this.
+ // This is an approximate calculation, but seems to be pretty close.
+ load_font_family({ family }, () => {
+ const line = layer.data[0];
+ if (!line) return;
+ const span = line[0];
+ if (!span) return;
+ const fontMetrics = editor.get_span_font_metrics(span, !fontLoadMap.get(span.meta.family || metaDefaults.family));
+ const topBounds = fontMetrics.calculate_letter_bounds('M', 'top');
+ span.meta.leading = (span.meta.size || metaDefaults.size) - fontMetrics.height;
+ layer.y += Math.abs(span.meta.leading) - (fontMetrics.baseline - topBounds.bottom);
+ editor.hasValueChanged = true;
+ editor.Base_layers.render();
+ });
+ }
+
+ // Create initial layer data if new layer
+ if (!layer.data) {
+ const params = this.getParams();
+ layer.data = [[{
+ text: '',
+ meta: {
+ family: params.font.value !== metaDefaults.family && params.font.value ? params.font.value : undefined,
+ size: params.size !== metaDefaults.size && !isNaN(params.size) ? params.size : undefined,
+ bold: params.bold.value !== metaDefaults.bold ? params.bold.value : undefined,
+ italic: params.italic.value !== metaDefaults.italic ? params.italic.value : undefined,
+ underline: params.underline.value !== metaDefaults.underline ? params.underline.value : undefined,
+ strikethrough: params.strikethrough.value !== metaDefaults.strikethrough ? params.strikethrough.value : undefined,
+ fill_color: params.fill !== metaDefaults.fill_color ? params.fill : undefined,
+ stroke_color: params.stroke !== metaDefaults.stroke_color ? params.stroke : undefined,
+ stroke_size: params.stroke_size !== metaDefaults.stroke_size && !isNaN(params.stroke_size) ? params.stroke_size : undefined,
+ kerning: params.kerning !== metaDefaults.kerning && !isNaN(params.kerning) ? params.kerning : undefined,
+ leading: params.leading !== metaDefaults.leading && !isNaN(params.leading) ? params.leading : undefined
+ }
+ }]];
+ }
+
+ editor.set_lines(layer.data);
+ editor.Base_layers = this.Base_layers;
+ editor.layer = layer;
+ layerEditors.set(layer, editor);
+ }
+ if (layer._needs_update_data) {
+ delete layer._needs_update_data;
+ editor.hasValueChanged = true;
+ editor.set_lines(JSON.parse(JSON.stringify(layer.data)));
+ }
+ return editor;
+ }
+
+ get_text_layer_at_mouse(e) {
+ const layers_sorted = this.Base_layers.get_sorted_layers();
+ if (config.layer.type === 'text') {
+ layers_sorted.unshift(config.layer);
+ }
+ const mouse = this.get_mouse_info(e);
+ const clickableMargin = 5;
+ for (let layer of layers_sorted) {
+ if (layer.type === 'text') {
+ // TODO - account for rotation
+ if (mouse.x >= layer.x - clickableMargin && mouse.x <= layer.x + layer.width + clickableMargin && mouse.y >= layer.y - clickableMargin && mouse.y <= layer.y + layer.height + clickableMargin) {
+ return layer;
+ }
+ }
+ }
+ return null;
+ }
+
+}
+
+export default Text_class;
\ No newline at end of file
diff --git a/paintplus/frontend/tools/translator/config.php b/paintplus/frontend/tools/translator/config.php
new file mode 100644
index 0000000..5899050
--- /dev/null
+++ b/paintplus/frontend/tools/translator/config.php
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
diff --git a/paintplus/frontend/tools/translator/libs/GoogleTranslate.php b/paintplus/frontend/tools/translator/libs/GoogleTranslate.php
new file mode 100644
index 0000000..87d9e13
--- /dev/null
+++ b/paintplus/frontend/tools/translator/libs/GoogleTranslate.php
@@ -0,0 +1,137 @@
+
+ * @copyright 2016 Adrián Barrio Andrés
+ * @license https://opensource.org/licenses/GPL-3.0 GNU General Public License 3.0
+ * @version 2.0
+ * @link https://statickidz.com/
+ */
+
+/**
+ * Main class GoogleTranslate
+ *
+ * @package GoogleTranslate
+ *
+ */
+class GoogleTranslate
+{
+
+ /**
+ * Retrieves the translation of a text
+ *
+ * @param string $source
+ * Original language of the text on notation xx. For example: es, en, it, fr...
+ * @param string $target
+ * Language to which you want to translate the text in format xx. For example: es, en, it, fr...
+ * @param string $text
+ * Text that you want to translate
+ *
+ * @return string a simple string with the translation of the text in the target language
+ */
+ public static function translate($source, $target, $text)
+ {
+ // Request translation
+ $response = self::requestTranslation($source, $target, $text);
+
+ // Get translation text
+ // $response = self::getStringBetween("onmouseout=\"this.style.backgroundColor='#fff'\">", "
+
+
+
+
'},
+ {title: "Name:", html: 'PaintPlus'},
+ {title: "Version:", value: VERSION},
+ {title: "Description:", value: "Layer-based image editor with AI tools."},
+ {title: "", html: '