Add miniPaint as new frontend base
This commit is contained in:
motion
@@ -0,0 +1,5 @@
|
||||
# Managing Undo History with Actions
|
||||
|
||||
More information on wiki page:
|
||||
|
||||
https://github.com/viliusle/miniPaint/wiki/Undo-Redo-system
|
||||
@@ -0,0 +1,145 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
|
||||
|
||||
export class Activate_tool_action extends Base_action {
|
||||
/**
|
||||
* Groups multiple actions together in the undo/redo history, runs them all at once.
|
||||
*/
|
||||
constructor(key, ignore_same_tool) {
|
||||
super('activate_tool', 'Activate Tool');
|
||||
this.ignore_same_tool = !!ignore_same_tool;
|
||||
this.key = key;
|
||||
this.old_key = null;
|
||||
this.tool_leave_actions = null;
|
||||
this.tool_activate_actions = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
const key = this.key;
|
||||
this.old_key = app.GUI.GUI_tools.active_tool;
|
||||
|
||||
if (this.key !== this.old_key || this.ignore_same_tool) {
|
||||
|
||||
//reset last
|
||||
document.querySelector('#tools_container .' + this.old_key).classList.remove("active");
|
||||
|
||||
//send exit event to old previous tool
|
||||
if (config.TOOL.on_leave != undefined) {
|
||||
var moduleKey = config.TOOL.name;
|
||||
var functionName = config.TOOL.on_leave;
|
||||
this.tool_leave_actions = app.GUI.GUI_tools.tools_modules[moduleKey].object[functionName]();
|
||||
if (this.tool_leave_actions) {
|
||||
for (let action of this.tool_leave_actions) {
|
||||
await action.do();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//change active
|
||||
app.GUI.GUI_tools.active_tool = key;
|
||||
document.querySelector('#tools_container .' + app.GUI.GUI_tools.active_tool)
|
||||
.classList.add("active");
|
||||
for (let i in config.TOOLS) {
|
||||
if (config.TOOLS[i].name == app.GUI.GUI_tools.active_tool) {
|
||||
config.TOOL = config.TOOLS[i];
|
||||
}
|
||||
}
|
||||
|
||||
//check module
|
||||
if (app.GUI.GUI_tools.tools_modules[key] == undefined) {
|
||||
alertify.error('Tools class not found: ' + key);
|
||||
return;
|
||||
}
|
||||
|
||||
//set default cursor
|
||||
const mainWrapper = document.getElementById('main_wrapper');
|
||||
const defaultCursor = config.TOOL && config.TOOL.name === 'text' ? 'text' : 'default';
|
||||
if (mainWrapper.style.cursor != defaultCursor) {
|
||||
mainWrapper.style.cursor = defaultCursor;
|
||||
}
|
||||
|
||||
app.GUI.GUI_tools.show_action_attributes();
|
||||
app.GUI.GUI_tools.Helper.setCookie('active_tool', app.GUI.GUI_tools.active_tool);
|
||||
}
|
||||
|
||||
//send activate event to new tool
|
||||
if (config.TOOL.on_activate != undefined) {
|
||||
var moduleKey = config.TOOL.name;
|
||||
var functionName = config.TOOL.on_activate;
|
||||
this.tool_activate_actions = app.GUI.GUI_tools.tools_modules[moduleKey].object[functionName]();
|
||||
if (this.tool_activate_actions) {
|
||||
for (let action of this.tool_activate_actions) {
|
||||
await action.do();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
|
||||
// Undo activate actions
|
||||
if (this.tool_activate_actions) {
|
||||
for (let action of this.tool_activate_actions) {
|
||||
await action.undo();
|
||||
action.free();
|
||||
}
|
||||
this.tool_activate_actions = null;
|
||||
}
|
||||
|
||||
//reset last
|
||||
document.querySelector('#tools_container .' + this.key)
|
||||
.classList.remove("active");
|
||||
|
||||
//change active
|
||||
app.GUI.GUI_tools.active_tool = this.old_key;
|
||||
document.querySelector('#tools_container .' + app.GUI.GUI_tools.active_tool)
|
||||
.classList.add("active");
|
||||
for (let i in config.TOOLS) {
|
||||
if (config.TOOLS[i].name == app.GUI.GUI_tools.active_tool) {
|
||||
config.TOOL = config.TOOLS[i];
|
||||
}
|
||||
}
|
||||
|
||||
app.GUI.GUI_tools.show_action_attributes();
|
||||
app.GUI.GUI_tools.Helper.setCookie('active_tool', app.GUI.GUI_tools.active_tool);
|
||||
|
||||
//set default cursor
|
||||
const mainWrapper = document.getElementById('main_wrapper');
|
||||
const defaultCursor = config.TOOL && config.TOOL.name === 'text' ? 'text' : 'default';
|
||||
if (mainWrapper.style.cursor != defaultCursor) {
|
||||
mainWrapper.style.cursor = defaultCursor;
|
||||
}
|
||||
|
||||
// Undo leave actions
|
||||
if (this.tool_leave_actions) {
|
||||
for (let action of this.tool_leave_actions) {
|
||||
await action.undo();
|
||||
action.free();
|
||||
}
|
||||
this.tool_leave_actions = null;
|
||||
}
|
||||
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
free() {
|
||||
if (this.tool_activate_actions) {
|
||||
for (let action of this.tool_activate_actions) {
|
||||
action.free();
|
||||
}
|
||||
this.tool_activate_actions = null;
|
||||
}
|
||||
if (this.tool_leave_actions) {
|
||||
for (let action of this.tool_leave_actions) {
|
||||
action.free();
|
||||
}
|
||||
this.tool_leave_actions = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Add_layer_filter_action extends Base_action {
|
||||
/**
|
||||
* register new live filter
|
||||
*
|
||||
* @param {int} layer_id
|
||||
* @param {string} name
|
||||
* @param {object} params
|
||||
*/
|
||||
constructor(layer_id, name, params, filter_id) {
|
||||
super('add_layer_filter', 'Add Layer Filter');
|
||||
if (layer_id == null)
|
||||
layer_id = config.layer.id;
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.name = name;
|
||||
this.params = params;
|
||||
this.filter_id = filter_id;
|
||||
this.reference_layer = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.reference_layer = app.Layers.get_layer(this.layer_id);
|
||||
if (!this.reference_layer) {
|
||||
throw new Error('Aborted - layer with specified id doesn\'t exist');
|
||||
}
|
||||
var filter = {
|
||||
id: this.filter_id,
|
||||
name: this.name,
|
||||
params: this.params,
|
||||
};
|
||||
if(this.filter_id) {
|
||||
//update
|
||||
for(var i in this.reference_layer.filters) {
|
||||
if(this.reference_layer.filters[i].id == this.filter_id){
|
||||
this.reference_layer.filters[i] = filter;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
//insert
|
||||
filter.id = Math.floor(Math.random() * 999999999) + 1; // A good UUID library would
|
||||
this.reference_layer.filters.push(filter);
|
||||
}
|
||||
config.need_render = true;
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.reference_layer) {
|
||||
this.reference_layer.filters.pop();
|
||||
this.reference_layer = null;
|
||||
}
|
||||
config.need_render = true;
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
free() {
|
||||
this.reference_layer = null;
|
||||
this.params = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
import Tools_settings_class from './../modules/tools/settings.js';
|
||||
|
||||
export class Autoresize_canvas_action extends Base_action {
|
||||
/**
|
||||
* autoresize canvas to layer size, based on dimensions, up - always, if 1 layer - down.
|
||||
*
|
||||
* @param {int} width
|
||||
* @param {int} height
|
||||
* @param {int} layer_id
|
||||
* @param {boolean} can_automate
|
||||
*/
|
||||
constructor(width, height, layer_id, can_automate = true, ignore_same_size = false) {
|
||||
super('autoresize_canvas', 'Auto-resize Canvas');
|
||||
this.Tools_settings = new Tools_settings_class();
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.layer_id = layer_id;
|
||||
this.can_automate = can_automate;
|
||||
this.ignore_same_size = ignore_same_size;
|
||||
this.old_config_width = null;
|
||||
this.old_config_height = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
const width = this.width;
|
||||
const height = this.height;
|
||||
const can_automate = this.can_automate;
|
||||
let need_fit = false;
|
||||
let new_config_width = config.WIDTH;
|
||||
let new_config_height = config.HEIGHT;
|
||||
var enable_autoresize = this.Tools_settings.get_setting('enable_autoresize');
|
||||
|
||||
if(enable_autoresize == false){
|
||||
return;
|
||||
}
|
||||
|
||||
// Resize up
|
||||
if (width > new_config_width || height > new_config_height) {
|
||||
const wrapper = document.getElementById('main_wrapper');
|
||||
const page_w = wrapper.clientWidth;
|
||||
const page_h = wrapper.clientHeight;
|
||||
|
||||
if (width > page_w || height > page_h) {
|
||||
need_fit = true;
|
||||
}
|
||||
if (width > new_config_width)
|
||||
new_config_width = parseInt(width);
|
||||
if (height > new_config_height)
|
||||
new_config_height = parseInt(height);
|
||||
}
|
||||
|
||||
// Resize down
|
||||
if (config.layers.length == 1 && can_automate !== false) {
|
||||
if (width < new_config_width)
|
||||
new_config_width = parseInt(width);
|
||||
if (height < new_config_height)
|
||||
new_config_height = parseInt(height);
|
||||
}
|
||||
|
||||
if (new_config_width !== config.WIDTH || new_config_height !== height) {
|
||||
this.old_config_width = config.WIDTH;
|
||||
this.old_config_height = config.HEIGHT;
|
||||
config.WIDTH = new_config_width;
|
||||
config.HEIGHT = new_config_height;
|
||||
app.GUI.prepare_canvas();
|
||||
} else if (!this.ignore_same_size) {
|
||||
throw new Error('Aborted - Resize not necessary')
|
||||
}
|
||||
|
||||
// Fit zoom when after short pause
|
||||
// @todo - remove setTimeout
|
||||
if (need_fit == true) {
|
||||
await new Promise((resolve) => {
|
||||
window.setTimeout(() => {
|
||||
app.GUI.GUI_preview.zoom_auto();
|
||||
resolve();
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.old_config_width != null) {
|
||||
config.WIDTH = this.old_config_width;
|
||||
}
|
||||
if (this.old_config_height != null) {
|
||||
config.HEIGHT = this.old_config_height;
|
||||
}
|
||||
if (this.old_config_width != null || this.old_config_height != null) {
|
||||
app.GUI.prepare_canvas();
|
||||
}
|
||||
this.old_config_width = null;
|
||||
this.old_config_height = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
|
||||
export class Base_action {
|
||||
constructor(action_id, action_description) {
|
||||
this.action_id = action_id;
|
||||
this.action_description = action_description;
|
||||
this.is_done = false;
|
||||
this.memory_estimate = 0; // Estimate of how much memory will be freed when the free() method is called (in bytes)
|
||||
this.database_estimate = 0; // Estimate of how much database space will be freed when the free() method is called (in bytes)
|
||||
}
|
||||
do() {
|
||||
this.is_done = true;
|
||||
}
|
||||
undo() {
|
||||
this.is_done = false;
|
||||
}
|
||||
free() {
|
||||
// Override if need to run tasks to free memory when action is discarded from history
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Bundle_action extends Base_action {
|
||||
/**
|
||||
* Groups multiple actions together in the undo/redo history, runs them all at once.
|
||||
*/
|
||||
constructor(bundle_id, bundle_name, actions_to_do) {
|
||||
super(bundle_id, bundle_name);
|
||||
this.actions_to_do = actions_to_do;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
let error = null;
|
||||
let i = 0;
|
||||
this.memory_estimate = 0;
|
||||
this.database_estimate = 0;
|
||||
for (i = 0; i < this.actions_to_do.length; i++) {
|
||||
try {
|
||||
await this.actions_to_do[i].do();
|
||||
this.memory_estimate += this.actions_to_do[i].memory_estimate;
|
||||
this.database_estimate += this.actions_to_do[i].database_estimate;
|
||||
} catch (e) {
|
||||
error = e;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// One of the actions aborted, undo all previous actions.
|
||||
if (error) {
|
||||
for (i--; i >= 0; i--) {
|
||||
await this.actions_to_do[i].undo();
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
this.memory_estimate = 0;
|
||||
this.database_estimate = 0;
|
||||
for (let i = this.actions_to_do.length - 1; i >= 0; i--) {
|
||||
await this.actions_to_do[i].undo();
|
||||
this.memory_estimate += this.actions_to_do[i].memory_estimate;
|
||||
this.database_estimate += this.actions_to_do[i].database_estimate;
|
||||
}
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
free() {
|
||||
if (this.actions_to_do) {
|
||||
for (let action of this.actions_to_do) {
|
||||
action.free();
|
||||
}
|
||||
this.actions_to_do = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Clear_layer_action extends Base_action {
|
||||
/**
|
||||
* clear layer data
|
||||
*
|
||||
* @param {int} layer_id
|
||||
*/
|
||||
constructor(layer_id) {
|
||||
super('clear_layer', 'Clear Layer');
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.update_layer_action = null;
|
||||
this.delete_layer_settings_action = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
let layer = app.Layers.get_layer(this.layer_id);
|
||||
if (!layer) {
|
||||
throw new Error('Aborted - layer with specified id doesn\'t exist');
|
||||
}
|
||||
let new_settings = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
visible: true,
|
||||
opacity: 100,
|
||||
composition: null,
|
||||
rotate: 0,
|
||||
data: null,
|
||||
params: {},
|
||||
status: null,
|
||||
render_function: null,
|
||||
type: null
|
||||
};
|
||||
if (layer.type == 'image') {
|
||||
//clean image
|
||||
new_settings.link = null;
|
||||
}
|
||||
this.update_layer_action = new app.Actions.Update_layer_action(this.layer_id, new_settings);
|
||||
await this.update_layer_action.do();
|
||||
let delete_setting_names = [];
|
||||
for (let prop_name in layer) {
|
||||
//remove private attributes
|
||||
if (prop_name[0] == '_') {
|
||||
delete_setting_names.push(prop_name);
|
||||
}
|
||||
}
|
||||
if (delete_setting_names.length > 0) {
|
||||
this.delete_layer_settings_action = new app.Actions.Delete_layer_settings_action(this.layer_id, delete_setting_names);
|
||||
await this.delete_layer_settings_action.do();
|
||||
}
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.delete_layer_settings_action) {
|
||||
await this.delete_layer_settings_action.undo();
|
||||
this.delete_layer_settings_action.free();
|
||||
this.delete_layer_settings_action = null;
|
||||
}
|
||||
if (this.update_layer_action) {
|
||||
await this.update_layer_action.undo();
|
||||
this.update_layer_action.free();
|
||||
this.update_layer_action = null;
|
||||
}
|
||||
}
|
||||
|
||||
free() {
|
||||
if (this.update_layer_action) {
|
||||
this.update_layer_action.free();
|
||||
this.update_layer_action = null;
|
||||
}
|
||||
if (this.delete_layer_settings_action) {
|
||||
this.delete_layer_settings_action.free();
|
||||
this.delete_layer_settings_action = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Delete_layer_filter_action extends Base_action {
|
||||
/**
|
||||
* delete live filter
|
||||
*
|
||||
* @param {int} layer_id
|
||||
* @param {string} filter_id
|
||||
*/
|
||||
constructor(layer_id, filter_id) {
|
||||
super('delete_layer_filter', 'Delete Layer Filter');
|
||||
if (layer_id == null)
|
||||
layer_id = config.layer.id;
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.filter_id = filter_id;
|
||||
this.reference_layer = null;
|
||||
this.filter_remove_index = null;
|
||||
this.old_filter = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.reference_layer = app.Layers.get_layer(this.layer_id);
|
||||
if (!this.reference_layer) {
|
||||
throw new Error('Aborted - layer with specified id doesn\'t exist');
|
||||
}
|
||||
this.old_filter = null;
|
||||
for (let i in this.reference_layer.filters) {
|
||||
if (this.reference_layer.filters[i].id == this.filter_id) {
|
||||
this.filter_remove_index = i;
|
||||
this.old_filter = this.reference_layer.filters.splice(i, 1)[0];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!this.old_filter) {
|
||||
throw new Error('Aborted - filter with specified id doesn\'t exist in layer');
|
||||
}
|
||||
config.need_render = true;
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.reference_layer && this.old_filter) {
|
||||
this.reference_layer.filters.splice(this.filter_remove_index, 0, this.old_filter);
|
||||
}
|
||||
this.reference_layer = null;
|
||||
this.old_filter = null;
|
||||
this.filter_remove_index = null;
|
||||
config.need_render = true;
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
free() {
|
||||
this.reference_layer = null;
|
||||
this.old_filter = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Delete_layer_settings_action extends Base_action {
|
||||
/**
|
||||
* Deletes the specified settings in a layer
|
||||
*
|
||||
* @param {int} layer_id
|
||||
* @param {array} setting_names
|
||||
*/
|
||||
constructor(layer_id, setting_names) {
|
||||
super('delete_layer_settings', 'Delete Layer Settings');
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.setting_names = setting_names;
|
||||
this.reference_layer = null;
|
||||
this.old_settings = {};
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.reference_layer = app.Layers.get_layer(this.layer_id);
|
||||
if (!this.reference_layer) {
|
||||
throw new Error('Aborted - layer with specified id doesn\'t exist');
|
||||
}
|
||||
for (let name in this.setting_names) {
|
||||
this.old_settings[name] = this.reference_layer[name];
|
||||
delete this.reference_layer[name];
|
||||
}
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.reference_layer) {
|
||||
for (let i in this.old_settings) {
|
||||
this.reference_layer[i] = this.old_settings[i];
|
||||
}
|
||||
this.old_settings = {};
|
||||
}
|
||||
this.reference_layer = null;
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
free() {
|
||||
this.setting_names = null;
|
||||
this.reference_layer = null;
|
||||
this.old_settings = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
import config from '../config.js';
|
||||
import app from './../app.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Delete_layer_action extends Base_action {
|
||||
/**
|
||||
* removes layer
|
||||
*
|
||||
* @param {int} id
|
||||
* @param {boolean} force - Force to delete first layer?
|
||||
*/
|
||||
constructor(layer_id, force) {
|
||||
super('delete_layer', 'Delete Layer');
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.force = force || false;
|
||||
this.insert_layer_action = null;
|
||||
this.select_layer_action = null;
|
||||
this.delete_index = null;
|
||||
this.deleted_layer = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
const id = this.layer_id;
|
||||
const force = this.force;
|
||||
|
||||
// Determine if there is a layer to delete, abort if not
|
||||
for (var i in config.layers) {
|
||||
if (config.layers[i].id == id) {
|
||||
this.delete_index = i;
|
||||
}
|
||||
}
|
||||
if (this.delete_index === null) {
|
||||
throw new Error('Aborted - Layer to delete not found');
|
||||
}
|
||||
|
||||
if (config.layers.length == 1 && (force == undefined || force == false)) {
|
||||
// Only 1 layer left
|
||||
if (config.layer.type == null) {
|
||||
//STOP
|
||||
throw new Error('Aborted - Will not delete last layer');
|
||||
}
|
||||
else {
|
||||
// Delete it, but before that - create new empty layer
|
||||
this.insert_layer_action = new app.Actions.Insert_layer_action();
|
||||
this.insert_layer_action.do();
|
||||
}
|
||||
}
|
||||
|
||||
if (config.layers.length > 1 && config.layer.id == id) {
|
||||
// Select next or previous layer
|
||||
try {
|
||||
const select_action = new app.Actions.Select_next_layer_action(id);
|
||||
await select_action.do();
|
||||
this.select_layer_action = select_action;
|
||||
} catch (error) {
|
||||
const select_action = new app.Actions.Select_previous_layer_action(id);
|
||||
await select_action.do();
|
||||
this.select_layer_action = select_action;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove layer from list
|
||||
this.deleted_layer = config.layers.splice(this.delete_index, 1)[0];
|
||||
|
||||
// Estimate memory
|
||||
if (this.deleted_layer.link && this.deleted_layer.link.src && typeof this.deleted_layer.link.src === 'string') {
|
||||
this.memory_estimate = new Blob([this.deleted_layer.link.src]).size;
|
||||
}
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.deleted_layer) {
|
||||
config.layers.splice(this.delete_index, 0, this.deleted_layer);
|
||||
this.delete_index = null;
|
||||
this.deleted_layer = null;
|
||||
}
|
||||
if (this.select_layer_action) {
|
||||
await this.select_layer_action.undo();
|
||||
this.select_layer_action.free();
|
||||
this.select_layer_action = null;
|
||||
}
|
||||
if (this.insert_layer_action) {
|
||||
await this.insert_layer_action.undo();
|
||||
this.insert_layer_action.free();
|
||||
this.insert_layer_action = null;
|
||||
}
|
||||
|
||||
// Estimate memory
|
||||
this.memory_estimate = 0;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
free() {
|
||||
if (this.deleted_layer) {
|
||||
delete this.deleted_layer.link;
|
||||
delete this.deleted_layer.data;
|
||||
}
|
||||
if (this.insert_layer_action) {
|
||||
this.insert_layer_action.free();
|
||||
this.insert_layer_action = null;
|
||||
}
|
||||
if (this.select_layer_action) {
|
||||
this.select_layer_action.free();
|
||||
this.select_layer_action = null;
|
||||
}
|
||||
this.deleted_layer = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
export { Activate_tool_action } from './activate-tool.js';
|
||||
export { Add_layer_filter_action } from './add-layer-filter.js';
|
||||
export { Autoresize_canvas_action } from './autoresize-canvas.js';
|
||||
export { Bundle_action } from './bundle.js';
|
||||
export { Clear_layer_action } from './clear-layer.js';
|
||||
export { Delete_layer_action } from './delete-layer.js';
|
||||
export { Delete_layer_filter_action } from './delete-layer-filter.js';
|
||||
export { Delete_layer_settings_action } from './delete-layer-settings.js';
|
||||
export { Init_canvas_zoom_action } from './init-canvas-zoom.js';
|
||||
export { Insert_layer_action } from './insert-layer.js';
|
||||
export { Prepare_canvas_action } from './prepare-canvas.js';
|
||||
export { Reorder_layer_action } from './reorder-layer.js';
|
||||
export { Reset_layers_action } from './reset-layers.js';
|
||||
export { Refresh_action_attributes_action } from './refresh-action-attributes.js';
|
||||
export { Refresh_layers_gui_action } from './refresh-layers-gui.js';
|
||||
export { Reset_selection_action } from './reset-selection.js';
|
||||
export { Select_layer_action } from './select-layer.js';
|
||||
export { Select_next_layer_action } from './select-next-layer.js';
|
||||
export { Select_previous_layer_action } from './select-previous-layer.js';
|
||||
export { Set_object_property_action } from './set-object-property.js';
|
||||
export { Set_selection_action } from './set-selection.js';
|
||||
export { Stop_animation_action } from './stop-animation.js';
|
||||
export { Toggle_layer_visibility_action } from './toggle-layer-visibility.js';
|
||||
export { Update_config_action } from './update-config.js';
|
||||
export { Update_layer_image_action } from './update-layer-image.js';
|
||||
export { Update_layer_action } from './update-layer.js';
|
||||
@@ -0,0 +1,45 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import zoomView from '../libs/zoomView.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Init_canvas_zoom_action extends Base_action {
|
||||
/**
|
||||
* Resets the canvas
|
||||
*/
|
||||
constructor() {
|
||||
super('init_canvas_zoom', 'Initialize Canvas Zoom');
|
||||
this.old_bounds = null;
|
||||
this.old_context = null;
|
||||
this.old_stable_dimensions = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.old_bounds = zoomView.getBounds();
|
||||
this.old_context = zoomView.getContext();
|
||||
this.old_stable_dimensions = app.Layers.stable_dimensions;
|
||||
zoomView.setBounds(0, 0, config.WIDTH, config.HEIGHT);
|
||||
zoomView.setContext(app.Layers.ctx);
|
||||
app.Layers.stable_dimensions = [
|
||||
config.WIDTH,
|
||||
config.HEIGHT
|
||||
];
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
zoomView.setBounds(this.old_bounds.top, this.old_bounds.left, this.old_bounds.right, this.old_bounds.bottom);
|
||||
zoomView.setContext(this.old_context);
|
||||
app.Layers.stable_dimensions = this.old_stable_dimensions;
|
||||
this.old_bounds = null;
|
||||
this.old_context = null;
|
||||
this.old_stable_dimensions = null;
|
||||
}
|
||||
|
||||
free() {
|
||||
this.old_bounds = null;
|
||||
this.old_context = null;
|
||||
this.old_stable_dimensions = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
|
||||
|
||||
export class Insert_layer_action extends Base_action {
|
||||
/**
|
||||
* Creates new layer
|
||||
*
|
||||
* @param {object} settings
|
||||
* @param {boolean} can_automate
|
||||
*/
|
||||
constructor(settings, can_automate = true) {
|
||||
super('insert_layer', 'Insert Layer');
|
||||
this.settings = settings;
|
||||
this.can_automate = can_automate;
|
||||
this.previous_auto_increment = null;
|
||||
this.previous_selected_layer = null;
|
||||
this.inserted_layer_id = null;
|
||||
this.update_layer_action = null;
|
||||
this.delete_layer_action = null;
|
||||
this.autoresize_canvas_action = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
|
||||
this.previous_auto_increment = app.Layers.auto_increment;
|
||||
this.previous_selected_layer = config.layer;
|
||||
let autoresize_as = null;
|
||||
|
||||
// Default data
|
||||
const layer = {
|
||||
id: app.Layers.auto_increment,
|
||||
parent_id: 0,
|
||||
name: config.TOOL.name.charAt(0).toUpperCase() + config.TOOL.name.slice(1) + ' #' + app.Layers.auto_increment,
|
||||
type: null,
|
||||
link: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: null,
|
||||
width_original: null,
|
||||
height: null,
|
||||
height_original: null,
|
||||
visible: true,
|
||||
is_vector: false,
|
||||
hide_selection_if_active: false,
|
||||
opacity: 100,
|
||||
order: app.Layers.auto_increment,
|
||||
composition: 'source-over',
|
||||
rotate: 0,
|
||||
data: null,
|
||||
params: {},
|
||||
status: null,
|
||||
color: config.COLOR,
|
||||
filters: [],
|
||||
render_function: null,
|
||||
};
|
||||
|
||||
// Build data
|
||||
for (let i in this.settings) {
|
||||
if (typeof layer[i] == "undefined" && !i.startsWith('_')) {
|
||||
alertify.error('Error: wrong key: ' + i);
|
||||
continue;
|
||||
}
|
||||
layer[i] = this.settings[i];
|
||||
}
|
||||
|
||||
// Prepare image
|
||||
let image_load_promise;
|
||||
if (layer.type == 'image') {
|
||||
|
||||
if(layer.name.toLowerCase().indexOf('.svg') == layer.name.length - 4){
|
||||
// We have svg
|
||||
layer.is_vector = true;
|
||||
}
|
||||
|
||||
if (config.layers.length == 1 && (config.layer.width == 0 || config.layer.width === null)
|
||||
&& (config.layer.height == 0 || config.layer.height === null) && config.layer.data == null) {
|
||||
// Remove first empty layer
|
||||
|
||||
this.delete_layer_action = new app.Actions.Delete_layer_action(config.layer.id, true);
|
||||
await this.delete_layer_action.do();
|
||||
}
|
||||
|
||||
if (layer.link == null) {
|
||||
if (typeof layer.data == 'object') {
|
||||
// Load actual image
|
||||
if (layer.width == 0 || layer.width === null)
|
||||
layer.width = layer.data.width;
|
||||
if (layer.height == 0 || layer.height === null)
|
||||
layer.height = layer.data.height;
|
||||
layer.link = layer.data.cloneNode(true);
|
||||
layer.link.onload = function () {
|
||||
config.need_render = true;
|
||||
};
|
||||
layer.data = null;
|
||||
autoresize_as = [layer.width, layer.height, null, true, true];
|
||||
//need_autoresize = true;
|
||||
}
|
||||
else if (typeof layer.data == 'string') {
|
||||
image_load_promise = new Promise((resolve, reject) => {
|
||||
// Try loading as imageData
|
||||
layer.link = new Image();
|
||||
layer.link.onload = () => {
|
||||
// Update dimensions
|
||||
if (layer.width == 0 || layer.width === null)
|
||||
layer.width = layer.link.width;
|
||||
if (layer.height == 0 || layer.height === null)
|
||||
layer.height = layer.link.height;
|
||||
if (layer.width_original == null)
|
||||
layer.width_original = layer.width;
|
||||
if (layer.height_original == null)
|
||||
layer.height_original = layer.height;
|
||||
// Free data
|
||||
layer.data = null;
|
||||
autoresize_as = [layer.width, layer.height, layer.id, this.can_automate, true];
|
||||
config.need_render = true;
|
||||
resolve();
|
||||
};
|
||||
layer.link.onerror = (error) => {
|
||||
resolve(error);
|
||||
alertify.error('Sorry, image could not be loaded.');
|
||||
};
|
||||
layer.link.src = layer.data;
|
||||
layer.link.crossOrigin = "Anonymous";
|
||||
});
|
||||
}
|
||||
else {
|
||||
alertify.error('Error: can not load image.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.settings != undefined && config.layers.length > 0
|
||||
&& (config.layer.width == 0 || config.layer.width === null) && (config.layer.height == 0 || config.layer.height === null)
|
||||
&& config.layer.data == null && layer.type != 'image' && this.can_automate !== false) {
|
||||
// Update existing layer, because it's empty
|
||||
this.update_layer_action = new app.Actions.Update_layer_action(config.layer.id, layer);
|
||||
await this.update_layer_action.do();
|
||||
}
|
||||
else {
|
||||
// Create new layer
|
||||
config.layers.push(layer);
|
||||
config.layer = app.Layers.get_layer(layer.id);
|
||||
app.Layers.auto_increment++;
|
||||
|
||||
if (config.layer == null) {
|
||||
config.layer = config.layers[0];
|
||||
}
|
||||
|
||||
this.inserted_layer_id = layer.id;
|
||||
}
|
||||
|
||||
if (layer.id >= app.Layers.auto_increment)
|
||||
app.Layers.auto_increment = layer.id + 1;
|
||||
|
||||
if (image_load_promise) {
|
||||
await image_load_promise;
|
||||
}
|
||||
|
||||
if (autoresize_as) {
|
||||
this.autoresize_canvas_action = new app.Actions.Autoresize_canvas_action(...autoresize_as);
|
||||
try {
|
||||
await this.autoresize_canvas_action.do();
|
||||
} catch(error) {
|
||||
this.autoresize_canvas_action = null;
|
||||
}
|
||||
}
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
app.Layers.auto_increment = this.previous_auto_increment;
|
||||
if (this.autoresize_canvas_action) {
|
||||
await this.autoresize_canvas_action.undo();
|
||||
this.autoresize_canvas_action = null;
|
||||
}
|
||||
if (this.inserted_layer_id) {
|
||||
config.layers.pop();
|
||||
this.inserted_layer_id = null;
|
||||
}
|
||||
if (this.update_layer_action) {
|
||||
await this.update_layer_action.undo();
|
||||
this.update_layer_action.free();
|
||||
this.update_layer_action = null;
|
||||
}
|
||||
if (this.delete_layer_action) {
|
||||
await this.delete_layer_action.undo();
|
||||
this.delete_layer_action.free();
|
||||
this.delete_layer_action = null;
|
||||
}
|
||||
config.layer = this.previous_selected_layer;
|
||||
this.previous_selected_layer = null;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
free() {
|
||||
if (this.delete_layer_action) {
|
||||
this.delete_layer_action.free();
|
||||
this.delete_layer_action = null;
|
||||
}
|
||||
if (this.update_layer_action) {
|
||||
this.update_layer_action.free();
|
||||
this.update_layer_action = null;
|
||||
}
|
||||
this.previous_selected_layer = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Prepare_canvas_action extends Base_action {
|
||||
/**
|
||||
* Resizes/renders the canvas at the specified step. Usually used on both sides of a config update action.
|
||||
*
|
||||
* @param {boolean} call_when
|
||||
*/
|
||||
constructor(call_when = 'undo') {
|
||||
super('prepare_canvas', 'Prepare Canvas');
|
||||
this.call_when = call_when;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
if (this.call_when === 'do') {
|
||||
app.GUI.prepare_canvas();
|
||||
}
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.call_when === 'undo') {
|
||||
app.GUI.prepare_canvas();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Refresh_action_attributes_action extends Base_action {
|
||||
/**
|
||||
* Resizes/renders the canvas at the specified step. Usually used on both sides of a config update action.
|
||||
*
|
||||
* @param {boolean} call_when
|
||||
*/
|
||||
constructor(call_when = 'undo') {
|
||||
super('refresh_action_attributes', 'Refresh Action Attributes');
|
||||
this.call_when = call_when;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
if (this.call_when === 'do') {
|
||||
app.GUI.GUI_tools.show_action_attributes();
|
||||
}
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.call_when === 'undo') {
|
||||
app.GUI.GUI_tools.show_action_attributes();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Refresh_layers_gui_action extends Base_action {
|
||||
/**
|
||||
* Resizes/renders the canvas at the specified step. Usually used on both sides of a config update action.
|
||||
*
|
||||
* @param {boolean} call_when
|
||||
*/
|
||||
constructor(call_when = 'undo') {
|
||||
super('refresh_gui', 'Refresh GUI');
|
||||
this.call_when = call_when;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
if (this.call_when === 'do') {
|
||||
app.Layers.refresh_gui();
|
||||
}
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.call_when === 'undo') {
|
||||
app.Layers.refresh_gui();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Reorder_layer_action extends Base_action {
|
||||
/**
|
||||
* Reorder layer up or down in the layer stack
|
||||
*
|
||||
* @param {int} layer_id
|
||||
* @param {int} direction
|
||||
*/
|
||||
constructor(layer_id, direction) {
|
||||
super('reorder_layer', 'Reorder Layer');
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.direction = direction;
|
||||
this.reference_layer = null;
|
||||
this.reference_target = null;
|
||||
this.old_layer_order = null;
|
||||
this.old_target_order = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.reference_layer = app.Layers.get_layer(this.layer_id);
|
||||
if (!this.reference_layer) {
|
||||
throw new Error('Aborted - layer with specified id doesn\'t exist');
|
||||
}
|
||||
if (this.direction < 0) {
|
||||
this.reference_target = app.Layers.find_previous(this.layer_id);
|
||||
}
|
||||
else {
|
||||
this.reference_target = app.Layers.find_next(this.layer_id);
|
||||
}
|
||||
if (!this.reference_target) {
|
||||
throw new Error('Aborted - layer has nowhere to move');
|
||||
}
|
||||
this.old_layer_order = this.reference_layer.order;
|
||||
this.old_target_order = this.reference_target.order;
|
||||
this.reference_layer.order = this.old_target_order;
|
||||
this.reference_target.order = this.old_layer_order;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.reference_layer) {
|
||||
this.reference_layer.order = this.old_layer_order;
|
||||
this.reference_layer = null;
|
||||
}
|
||||
if (this.reference_target) {
|
||||
this.reference_target.order = this.old_target_order;
|
||||
this.reference_target = null;
|
||||
}
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
free() {
|
||||
this.reference_layer = null;
|
||||
this.reference_target = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Reset_layers_action extends Base_action {
|
||||
/*
|
||||
* removes all layers
|
||||
*/
|
||||
constructor(auto_insert) {
|
||||
super('reset_layers', 'Reset Layers');
|
||||
this.auto_insert = auto_insert;
|
||||
this.previous_auto_increment = null;
|
||||
this.delete_actions = null;
|
||||
this.insert_action = null;
|
||||
}
|
||||
async do() {
|
||||
super.do();
|
||||
const auto_insert = this.auto_insert;
|
||||
this.previous_auto_increment = app.Layers.auto_increment;
|
||||
|
||||
this.delete_actions = [];
|
||||
for (let i = config.layers.length - 1; i >= 0; i--) {
|
||||
const delete_action = new app.Actions.Delete_layer_action(config.layers[i].id, true);
|
||||
await delete_action.do();
|
||||
this.delete_actions.push(delete_action);
|
||||
}
|
||||
app.Layers.auto_increment = 1;
|
||||
|
||||
if (auto_insert != undefined && auto_insert === true) {
|
||||
const settings = {};
|
||||
this.insert_action = new app.Actions.Insert_layer_action(settings);
|
||||
await this.insert_action.do();
|
||||
}
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.insert_action) {
|
||||
await this.insert_action.undo();
|
||||
this.insert_action.free();
|
||||
this.insert_action = null;
|
||||
}
|
||||
for (let i = this.delete_actions.length - 1; i >= 0; i--) {
|
||||
await this.delete_actions[i].undo();
|
||||
this.delete_actions[i].free();
|
||||
}
|
||||
app.Layers.auto_increment = this.previous_auto_increment;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
free() {
|
||||
if (this.insert_action) {
|
||||
this.insert_action.free();
|
||||
this.insert_action = null;
|
||||
}
|
||||
if (this.delete_actions) {
|
||||
for (let action of this.delete_actions) {
|
||||
action.free();
|
||||
}
|
||||
this.delete_actions = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Reset_selection_action extends Base_action {
|
||||
/**
|
||||
* Sets the selection to empty
|
||||
*
|
||||
* @prop {object} [mirror_selection_settings] - Optional object to also set to an empty selection object
|
||||
*/
|
||||
constructor(mirror_selection_settings) {
|
||||
super('reset_selection', 'Reset Selection');
|
||||
this.mirror_selection_settings = mirror_selection_settings;
|
||||
this.settings_reference = null;
|
||||
this.old_settings_data = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.settings_reference = app.Layers.Base_selection.find_settings();
|
||||
this.old_settings_data = JSON.parse(JSON.stringify(this.settings_reference.data));
|
||||
this.settings_reference.data = {
|
||||
x: null,
|
||||
y: null,
|
||||
width: null,
|
||||
height: null
|
||||
}
|
||||
if (this.mirror_selection_settings) {
|
||||
this.mirror_selection_settings.x = null;
|
||||
this.mirror_selection_settings.y = null;
|
||||
this.mirror_selection_settings.width = null;
|
||||
this.mirror_selection_settings.height = null;
|
||||
}
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.old_settings_data) {
|
||||
for (let prop of ['x', 'y', 'width', 'height']) {
|
||||
this.settings_reference.data[prop] = this.old_settings_data[prop];
|
||||
if (this.mirror_selection_settings) {
|
||||
this.mirror_selection_settings[prop] = this.old_settings_data[prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
this.settings_reference = null;
|
||||
this.old_settings_data = null;
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
free() {
|
||||
this.settings_reference = null;
|
||||
this.old_settings_data = null;
|
||||
this.mirror_selection_settings = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Select_layer_action extends Base_action {
|
||||
/**
|
||||
* marks layer as selected, active
|
||||
*
|
||||
* @param {int} layer_id
|
||||
*/
|
||||
constructor(layer_id, ignore_same_selection = false) {
|
||||
super('select_layer', 'Select Layer');
|
||||
this.reset_selection_action = null;
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.ignore_same_selection = ignore_same_selection;
|
||||
this.old_layer = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
|
||||
let old_layer = config.layer;
|
||||
let new_layer = app.Layers.get_layer(this.layer_id);
|
||||
|
||||
if (old_layer !== new_layer) {
|
||||
this.old_layer = old_layer;
|
||||
config.layer = new_layer;
|
||||
} else if (!this.ignore_same_selection) {
|
||||
throw new Error('Aborted - Layer already selected');
|
||||
}
|
||||
|
||||
this.reset_selection_action = new app.Actions.Reset_selection_action();
|
||||
await this.reset_selection_action.do();
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
|
||||
if (this.reset_selection_action) {
|
||||
await this.reset_selection_action.undo();
|
||||
this.reset_selection_action = null;
|
||||
}
|
||||
|
||||
config.layer = this.old_layer;
|
||||
this.old_layer = null;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
free() {
|
||||
this.old_layer = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Select_next_layer_action extends Base_action {
|
||||
constructor(reference_layer_id) {
|
||||
super('select_next_layer', 'Select Next Layer');
|
||||
this.reference_layer_id = reference_layer_id;
|
||||
this.old_config_layer = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
const next_layer = app.Layers.find_next(this.reference_layer_id);
|
||||
if (!next_layer) {
|
||||
throw new Error('Aborted - Next layer to select not found');
|
||||
}
|
||||
this.old_config_layer = config.layer;
|
||||
config.layer = next_layer;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
config.layer = this.old_config_layer;
|
||||
this.old_config_layer = null;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Select_previous_layer_action extends Base_action {
|
||||
constructor(reference_layer_id) {
|
||||
super('select_previous_layer', 'Select Previous Layer');
|
||||
this.reference_layer_id = reference_layer_id;
|
||||
this.old_config_layer = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
const previous_layer = app.Layers.find_previous(this.reference_layer_id);
|
||||
if (!previous_layer) {
|
||||
throw new Error('Aborted - Previous layer to select not found');
|
||||
}
|
||||
this.old_config_layer = config.layer;
|
||||
config.layer = previous_layer;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
config.layer = this.old_config_layer;
|
||||
this.old_config_layer = null;
|
||||
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Set_object_property_action extends Base_action {
|
||||
/**
|
||||
* Sets a generic object property. I recommend against using this as it's generally a hack for edge cases.
|
||||
*
|
||||
* @param {string} layer_id
|
||||
* @param {object} settings
|
||||
*/
|
||||
constructor(object, property_name, value) {
|
||||
super('set_object_property', 'Set Object Property');
|
||||
this.object = object;
|
||||
this.property_name = property_name;
|
||||
this.value = value;
|
||||
this.old_value = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.old_value = this.object[this.property_name];
|
||||
this.object[this.property_name] = this.value;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
this.object[this.property_name] = this.old_value;
|
||||
this.old_value = null;
|
||||
}
|
||||
|
||||
free() {
|
||||
this.object = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Set_selection_action extends Base_action {
|
||||
/**
|
||||
* Sets the selection to the specified position and dimensions
|
||||
*/
|
||||
constructor(x, y, width, height, old_settings_override) {
|
||||
super('set_selection', 'Set Selection');
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
this.settings_reference = null;
|
||||
this.old_settings_data = null;
|
||||
this.old_settings_override = old_settings_override ? JSON.parse(JSON.stringify(old_settings_override)) || null : null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.settings_reference = app.Layers.Base_selection.find_settings();
|
||||
this.old_settings_data = JSON.parse(JSON.stringify(this.settings_reference.data));
|
||||
if (this.x != null)
|
||||
this.settings_reference.data.x = this.x;
|
||||
if (this.y != null)
|
||||
this.settings_reference.data.y = this.y;
|
||||
if (this.width != null)
|
||||
this.settings_reference.data.width = this.width;
|
||||
if (this.height != null)
|
||||
this.settings_reference.data.height = this.height;
|
||||
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo()
|
||||
if (this.old_settings_override) {
|
||||
for (let prop in this.old_settings_override) {
|
||||
this.settings_reference.data[prop] = this.old_settings_override[prop];
|
||||
}
|
||||
} else {
|
||||
for (let prop in this.old_settings_data) {
|
||||
this.settings_reference.data[prop] = this.old_settings_data[prop];
|
||||
}
|
||||
}
|
||||
this.settings_reference = null;
|
||||
this.old_settings_data = null;
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
free() {
|
||||
this.settings_reference = null;
|
||||
this.old_settings_override = null;
|
||||
this.old_settings_data = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Stop_animation_action extends Base_action {
|
||||
/**
|
||||
* Stops the currently playing animation, both do and undo states will stop animation
|
||||
*/
|
||||
constructor(reset_layer_visibility) {
|
||||
super('stop_animation', 'Stop Animation');
|
||||
this.reset_layer_visibility = !!reset_layer_visibility;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
const animation_tool = app.GUI.GUI_tools.tools_modules.animation.object;
|
||||
var params = animation_tool.getParams();
|
||||
if (animation_tool.intervalID == null)
|
||||
return;
|
||||
|
||||
clearInterval(animation_tool.intervalID);
|
||||
params.play = false;
|
||||
animation_tool.index = 0;
|
||||
animation_tool.GUI_tools.show_action_attributes();
|
||||
|
||||
// make all visible
|
||||
if (this.reset_layer_visibility) {
|
||||
for (let i in config.layers) {
|
||||
config.layers[i].visible = true;
|
||||
}
|
||||
}
|
||||
|
||||
animation_tool.Base_gui.GUI_layers.render_layers();
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
const animation_tool = app.GUI.GUI_tools.tools_modules.animation.object;
|
||||
var params = animation_tool.getParams();
|
||||
if (animation_tool.intervalID == null)
|
||||
return;
|
||||
|
||||
clearInterval(animation_tool.intervalID);
|
||||
params.play = false;
|
||||
animation_tool.index = 0;
|
||||
animation_tool.GUI_tools.show_action_attributes();
|
||||
|
||||
// make all visible
|
||||
if (this.reset_layer_visibility) {
|
||||
for (let i in config.layers) {
|
||||
config.layers[i].visible = true;
|
||||
}
|
||||
}
|
||||
|
||||
animation_tool.Base_gui.GUI_layers.render_layers();
|
||||
config.need_render = true;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,222 @@
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
// Get a unique id to identify this tab's history in the database
|
||||
let tabUuid;
|
||||
try {
|
||||
tabUuid = sessionStorage.getItem('history_tab_uuid');
|
||||
} catch (error) {}
|
||||
if (!tabUuid) {
|
||||
tabUuid = uuidv4();
|
||||
try {
|
||||
sessionStorage.setItem('history_tab_uuid', tabUuid);
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
let imageIdCounter = 0;
|
||||
let database = null;
|
||||
let databaseInitPromise = null;
|
||||
const tabPingInterval = 60000;
|
||||
const assumeTabIsClosedTimeout = 300000; // Inactive tabs setInterval is slowed down in most browsers, this should be significantly higher than tabPingInterval
|
||||
|
||||
export default {
|
||||
/**
|
||||
* Initializes the database
|
||||
*/
|
||||
async init() {
|
||||
if (!databaseInitPromise) {
|
||||
databaseInitPromise = new Promise(async (resolveInit) => {
|
||||
try {
|
||||
if (window.indexedDB) {
|
||||
// Delete database from a previous page load, if no other tabs have notified that they're open in a while
|
||||
let shouldDeleteDatabase = true;
|
||||
try {
|
||||
let lastDatabaseTabPing = localStorage.getItem('history_usage_ping');
|
||||
shouldDeleteDatabase = (!lastDatabaseTabPing || parseInt(lastDatabaseTabPing, 10) < new Date().getTime() - assumeTabIsClosedTimeout);
|
||||
} catch (error) {}
|
||||
if (shouldDeleteDatabase) {
|
||||
await new Promise((resolve, reject) => {
|
||||
let deleteRequest = window.indexedDB.deleteDatabase('undoHistoryImageStore');
|
||||
deleteRequest.onerror = () => {
|
||||
reject(deleteRequest.error);
|
||||
};
|
||||
deleteRequest.onsuccess = () => {
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
}
|
||||
// Initialize database
|
||||
await new Promise((resolve, reject) => {
|
||||
let openRequest = window.indexedDB.open('undoHistoryImageStore', 1);
|
||||
openRequest.onupgradeneeded = function(event) {
|
||||
database = openRequest.result;
|
||||
switch (event.oldVersion) {
|
||||
case 0:
|
||||
database.createObjectStore('images', { keyPath: 'id' });
|
||||
break;
|
||||
}
|
||||
};
|
||||
openRequest.onerror = () => {
|
||||
reject(openRequest.error);
|
||||
}
|
||||
openRequest.onsuccess = () => {
|
||||
resolve();
|
||||
database = openRequest.result;
|
||||
}
|
||||
});
|
||||
if (!database) {
|
||||
throw new Error('indexedDB not initialized');
|
||||
}
|
||||
// Delete history from previous session
|
||||
try {
|
||||
await this.delete_all();
|
||||
} catch (error) {}
|
||||
// Ping localStorage for as long as this browser tab is open
|
||||
localStorage.setItem('history_usage_ping', new Date().getTime() + '');
|
||||
setInterval(() => {
|
||||
localStorage.setItem('history_usage_ping', new Date().getTime() + '');
|
||||
}, tabPingInterval);
|
||||
}
|
||||
} catch (error) {
|
||||
database = {
|
||||
isMemory: true,
|
||||
images: {}
|
||||
};
|
||||
}
|
||||
resolveInit();
|
||||
});
|
||||
await databaseInitPromise;
|
||||
} else if (!database) {
|
||||
await databaseInitPromise;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds the specified image to the database. Returns a promise that is resolved with an id that can be used to retrieve it again.
|
||||
*
|
||||
* @param {string | canvas | ImageData} imageData the image data to store
|
||||
* @returns {Promise<string>} resolves with retrieval id
|
||||
*/
|
||||
async add(imageData) {
|
||||
await this.init();
|
||||
let imageId = tabUuid + '-' + (imageIdCounter++);
|
||||
if (database.isMemory) {
|
||||
database.images[imageId] = imageData;
|
||||
} else {
|
||||
await new Promise((resolve, reject) => {
|
||||
const transaction = database.transaction('images', 'readwrite');
|
||||
const images = transaction.objectStore('images');
|
||||
const image = {
|
||||
id: imageId,
|
||||
tabUuid,
|
||||
data: imageData
|
||||
}
|
||||
const request = images.add(image);
|
||||
request.onsuccess = function() {
|
||||
resolve();
|
||||
};
|
||||
request.onerror = function() {
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
return imageId;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the specified image from the database, by imageId retrieved from "add()" method.
|
||||
*
|
||||
* @param {string} imageId the id of the image to get
|
||||
* @returns {Promise<string | canvas | ImageData>} resolves with the image
|
||||
*/
|
||||
async get(imageId) {
|
||||
await this.init();
|
||||
if (database.isMemory) {
|
||||
return database.images[imageId];
|
||||
} else {
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = database.transaction('images', 'readonly');
|
||||
const images = transaction.objectStore('images');
|
||||
const request = images.get(imageId);
|
||||
request.onsuccess = function() {
|
||||
resolve(request.result && request.result.data);
|
||||
};
|
||||
request.onerror = function() {
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Deletes the specified image from the database, by imageId retrieved from "add()" method.
|
||||
*
|
||||
* @param {string} imageId the id of the image to delete
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async delete(imageId) {
|
||||
await this.init();
|
||||
if (database.isMemory) {
|
||||
delete database.images[imageId];
|
||||
} else {
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = database.transaction('images', 'readwrite');
|
||||
const images = transaction.objectStore('images');
|
||||
const request = images.delete(imageId);
|
||||
request.onsuccess = function() {
|
||||
resolve();
|
||||
};
|
||||
request.onerror = function() {
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Deletes all images associated with the current tab.
|
||||
*
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async delete_all() {
|
||||
await this.init();
|
||||
if (database.isMemory) {
|
||||
database.images = {};
|
||||
} else {
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = database.transaction('images', 'readwrite');
|
||||
const images = transaction.objectStore('images');
|
||||
const getAllImagesRequest = images.getAll();
|
||||
getAllImagesRequest.onsuccess = async function () {
|
||||
const allImages = getAllImagesRequest.result;
|
||||
let errorOccurred = false;
|
||||
for (let image of allImages) {
|
||||
if (image.tabUuid === tabUuid) {
|
||||
try {
|
||||
await new Promise((deleteResolve, deleteReject) => {
|
||||
const request = images.delete(image.id);
|
||||
request.onsuccess = function() {
|
||||
deleteResolve();
|
||||
};
|
||||
request.onerror = function() {
|
||||
deleteReject(request.error);
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
errorOccurred = true;
|
||||
// Should eventually be deleted when database is deleted due to timeout
|
||||
}
|
||||
}
|
||||
}
|
||||
if (errorOccurred) {
|
||||
// Use a different uuid to prevent conflicts
|
||||
tabUuid = uuidv4();
|
||||
}
|
||||
resolve();
|
||||
};
|
||||
getAllImagesRequest.onerror = function () {
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
import app from '../app.js';
|
||||
import config from '../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Toggle_layer_visibility_action extends Base_action {
|
||||
/**
|
||||
* toggle layer visibility
|
||||
*
|
||||
* @param {int} layer_id
|
||||
*/
|
||||
constructor(layer_id) {
|
||||
super('toggle_layer_visibility', 'Toggle Layer Visibility');
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.old_visible = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
const layer = app.Layers.get_layer(this.layer_id);
|
||||
this.old_visible = layer.visible;
|
||||
if (layer.visible == false)
|
||||
layer.visible = true;
|
||||
else
|
||||
layer.visible = false;
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
const layer = app.Layers.get_layer(this.layer_id);
|
||||
layer.visible = this.old_visible;
|
||||
this.old_visible = null;
|
||||
app.Layers.render();
|
||||
app.GUI.GUI_layers.render_layers();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Update_config_action extends Base_action {
|
||||
/**
|
||||
* Updates the app config with the provided settings
|
||||
*
|
||||
* @param {object} settings
|
||||
*/
|
||||
constructor(settings) {
|
||||
super('update_config', 'Update Config');
|
||||
this.settings = settings;
|
||||
this.old_settings = {};
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
for (let i in this.settings) {
|
||||
this.old_settings[i] = config[i];
|
||||
config[i] = this.settings[i];
|
||||
}
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
for (let i in this.old_settings) {
|
||||
config[i] = this.old_settings[i];
|
||||
}
|
||||
this.old_settings = {};
|
||||
}
|
||||
|
||||
free() {
|
||||
this.settings = null;
|
||||
this.old_settings = null;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import Helper_class from './../libs/helpers.js';
|
||||
import alertify from './../../../node_modules/alertifyjs/build/alertify.min.js';
|
||||
import image_store from './store/image-store.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
const Helper = new Helper_class();
|
||||
|
||||
export class Update_layer_image_action extends Base_action {
|
||||
/**
|
||||
* updates layer image data
|
||||
*
|
||||
* @param {canvas} canvas
|
||||
* @param {int} layer_id (optional)
|
||||
*/
|
||||
constructor(canvas, layer_id) {
|
||||
super('update_layer_image', 'Update Layer Image');
|
||||
this.canvas = canvas;
|
||||
if (layer_id == null)
|
||||
layer_id = config.layer.id;
|
||||
this.layer_id = parseInt(layer_id);
|
||||
this.reference_layer = null;
|
||||
this.old_image_id = null;
|
||||
this.new_image_id = null;
|
||||
this.old_link_database_id = null;
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.reference_layer = app.Layers.get_layer(this.layer_id);
|
||||
if (!this.reference_layer) {
|
||||
throw new Error('Aborted - layer with specified id doesn\'t exist');
|
||||
}
|
||||
if (this.reference_layer.type != 'image'){
|
||||
alertify.error('Error: layer must be image.');
|
||||
throw new Error('Aborted - layer is not an image');
|
||||
}
|
||||
|
||||
// Get data url representation of image
|
||||
let canvas_data_url;
|
||||
if (this.new_image_id) {
|
||||
try {
|
||||
canvas_data_url = await image_store.get(this.new_image_id);
|
||||
} catch (error) {
|
||||
throw new Error('Aborted - problem retrieving cached image from database');
|
||||
}
|
||||
} else if (this.canvas) {
|
||||
if (Helper.is_edge_or_ie() == false && typeof(FileReader) !== 'undefined') {
|
||||
// Update image using blob and FileReader (async)
|
||||
await new Promise((resolve) => {
|
||||
this.canvas.toBlob((blob) => {
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
canvas_data_url = reader.result;
|
||||
resolve();
|
||||
}
|
||||
reader.readAsDataURL(blob);
|
||||
}, 'image/png');
|
||||
});
|
||||
}
|
||||
else {
|
||||
// Slow way for IE, Edge
|
||||
canvas_data_url = this.canvas.toDataURL();
|
||||
}
|
||||
}
|
||||
|
||||
// Store data url in database
|
||||
try {
|
||||
if (!this.old_image_id) {
|
||||
if (this.reference_layer._link_database_id) {
|
||||
this.old_image_id = this.reference_layer._link_database_id;
|
||||
} else {
|
||||
this.old_image_id = await image_store.add(this.reference_layer.link.src);
|
||||
}
|
||||
}
|
||||
if (!this.new_image_id) {
|
||||
this.new_image_id = await image_store.add(canvas_data_url);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
requestAnimationFrame(() => {
|
||||
app.State.free(0, this.database_estimate || 1)
|
||||
});
|
||||
}
|
||||
|
||||
// Estimate storage size
|
||||
try {
|
||||
this.database_estimate = new Blob([await image_store.get(this.old_image_id)]).size;
|
||||
} catch (e) {}
|
||||
|
||||
// Assign layer properties
|
||||
this.reference_layer.link.src = canvas_data_url;
|
||||
this.old_link_database_id = this.reference_layer._link_database_id;
|
||||
this.reference_layer._link_database_id = this.new_image_id;
|
||||
|
||||
this.canvas = null;
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
|
||||
// Estimate storage size
|
||||
try {
|
||||
this.database_estimate = new Blob([this.reference_layer.link.src]).size;
|
||||
} catch (e) {}
|
||||
|
||||
// Restore old image
|
||||
if (this.old_image_id != null) {
|
||||
try {
|
||||
this.reference_layer.link.src = await image_store.get(this.old_image_id);
|
||||
} catch (error) {
|
||||
throw new Error('Failed to retrieve image from store');
|
||||
}
|
||||
}
|
||||
this.reference_layer._link_database_id = this.old_link_database_id;
|
||||
this.reference_layer = null;
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async free() {
|
||||
let has_error = false;
|
||||
if (this.new_image_id != null) {
|
||||
try {
|
||||
await image_store.delete(this.new_image_id);
|
||||
} catch (error) {
|
||||
has_error = true;
|
||||
}
|
||||
this.new_image_id = null;
|
||||
}
|
||||
if (this.is_done || !this.old_link_database_id) {
|
||||
if (this.old_image_id != null) {
|
||||
try {
|
||||
await image_store.delete(this.old_image_id);
|
||||
} catch (error) {
|
||||
has_error = true;
|
||||
}
|
||||
this.old_image_id = null;
|
||||
}
|
||||
}
|
||||
this.canvas = null;
|
||||
this.old_link_database_id = null;
|
||||
this.reference_layer = null;
|
||||
if (has_error) {
|
||||
alertify.error('A problem occurred while removing undo history. It\'s suggested you save your work and refresh the page in order to free up memory.');
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
import app from './../app.js';
|
||||
import config from './../config.js';
|
||||
import { Base_action } from './base.js';
|
||||
|
||||
export class Update_layer_action extends Base_action {
|
||||
/**
|
||||
* Updates an existing layer with the provided settings
|
||||
* WARNING: If passing objects or arrays into settings, make sure these are new or cloned objects, and not a modified existing object!
|
||||
*
|
||||
* @param {string} layer_id
|
||||
* @param {object} settings
|
||||
*/
|
||||
constructor(layer_id, settings) {
|
||||
super('update_layer', 'Update Layer');
|
||||
this.layer_id = layer_id;
|
||||
this.settings = settings;
|
||||
this.reference_layer = null;
|
||||
this.old_settings = {};
|
||||
}
|
||||
|
||||
async do() {
|
||||
super.do();
|
||||
this.reference_layer = app.Layers.get_layer(this.layer_id);
|
||||
if (!this.reference_layer) {
|
||||
throw new Error('Aborted - layer with specified id doesn\'t exist');
|
||||
}
|
||||
for (let i in this.settings) {
|
||||
if (i == 'id')
|
||||
continue;
|
||||
if (i == 'order')
|
||||
continue;
|
||||
this.old_settings[i] = this.reference_layer[i];
|
||||
this.reference_layer[i] = this.settings[i];
|
||||
}
|
||||
if (this.reference_layer.type === 'text') {
|
||||
this.reference_layer._needs_update_data = true;
|
||||
}
|
||||
if (this.settings.params || this.settings.width || this.settings.height) {
|
||||
config.need_render_changed_params = true;
|
||||
}
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
async undo() {
|
||||
super.undo();
|
||||
if (this.reference_layer) {
|
||||
for (let i in this.old_settings) {
|
||||
this.reference_layer[i] = this.old_settings[i];
|
||||
}
|
||||
if (this.reference_layer.type === 'text') {
|
||||
this.reference_layer._needs_update_data = true;
|
||||
}
|
||||
if (this.old_settings.params || this.old_settings.width || this.old_settings.height) {
|
||||
config.need_render_changed_params = true;
|
||||
}
|
||||
this.old_settings = {};
|
||||
}
|
||||
this.reference_layer = null;
|
||||
config.need_render = true;
|
||||
}
|
||||
|
||||
free() {
|
||||
this.settings = null;
|
||||
this.old_settings = null;
|
||||
this.reference_layer = null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user