artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 11:21:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

snap improvements

Browse Source
This commit is contained in:
viliusle 2021-01-10 20:58:07 +02:00
parent 11624bfbc5
commit 408d9ae62f
5 changed files with 228 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
src/js/core/base-tools.js
View File

@ -27,6 +27,7 @@ class Base_tools_class {
this.speed_average = 0;
this.save_mouse = save_mouse;
this.is_touch = false;
this.shape_mouse_click = {x: null, y: null};
this.prepare();
@ -392,28 +393,31 @@ class Base_tools_class {
if (mouse.valid == false || mouse.click_valid == false)
return;
var x_pos = mouse.x;
var y_pos = mouse.y;
var mouse_x = mouse.x;
var mouse_y = mouse.y;
//apply snap
var snap_info = this.calc_snap_initial(e, x_pos, y_pos);
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y);
if(snap_info != null){
if(snap_info.x != null) {
x_pos = snap_info.x;
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
y_pos = snap_info.y;
mouse_y = snap_info.y;
}
}
this.shape_mouse_click.x = mouse_x;
this.shape_mouse_click.y = mouse_y;
//register new object - current layer is not ours or params changed
this.layer = {
type: this.name,
params: this.clone(this.getParams()),
status: 'draft',
render_function: [this.name, 'render'],
x: Math.round(x_pos),
y: Math.round(y_pos),
x: Math.round(mouse_x),
y: Math.round(mouse_y),
color: null,
is_vector: true
};
@ -436,8 +440,20 @@ class Base_tools_class {
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var click_x = Math.round(this.shape_mouse_click.x);
var click_y = Math.round(this.shape_mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
var x = Math.min(mouse_x, click_x);
var y = Math.min(mouse_y, click_y);
var width = Math.abs(mouse_x - click_x);
@ -464,17 +480,6 @@ class Base_tools_class {
config.layer.width = width;
config.layer.height = height;
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
config.layer.width = snap_info.width;
}
if(snap_info.height != null) {
config.layer.height = snap_info.height;
}
}
this.Base_layers.render();
}
@ -489,8 +494,21 @@ class Base_tools_class {
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var click_x = Math.round(this.shape_mouse_click.x);
var click_y = Math.round(this.shape_mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
this.snap_line_info = {x: null, y: null};
var x = Math.min(mouse_x, click_x);
var y = Math.min(mouse_y, click_y);
var width = Math.abs(mouse_x - click_x);
@ -517,18 +535,6 @@ class Base_tools_class {
return;
}
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
width = snap_info.width;
}
if(snap_info.height != null) {
height = snap_info.height;
}
}
this.snap_line_info = {x: null, y: null};
//more data
app.State.do_action(
new app.Actions.Update_layer_action(config.layer.id, {
@ -580,7 +586,7 @@ class Base_tools_class {
],
};
for(var i in config.layers){
if(typeof exclude_id != "undefined" && exclude_id == config.layers[i].id){
if(exclude_id != null && exclude_id == config.layers[i].id){
continue;
}
if(config.layers[i].visible == false
@ -620,15 +626,16 @@ class Base_tools_class {
}
/**
* calculates initial object snap coordinates (x, y) and returns it. One of coordinates can be null.
* calculates snap coordinates by current mouse position.
*
* @param event
* @param pos_x
* @param pos_y
* @param exclude_id
* @returns object|null
*/
calc_snap_initial(event, pos_x, pos_y) {
var snap_position = { x: null, y: null, width: null, height: null };
calc_snap_position(event, pos_x, pos_y, exclude_id) {
var snap_position = { x: null, y: null };
var params = this.getParams();
if(config.SNAP === false || event.shiftKey == true || (event.ctrlKey == true || event.metaKey == true)){
@ -641,7 +648,10 @@ class Base_tools_class {
var max_distance = (config.WIDTH + config.HEIGHT) / 2 * sensitivity / config.ZOOM;
//collect snap positions
var snap_positions = this.get_snap_positions();
if(typeof exclude_id != "undefined")
var snap_positions = this.get_snap_positions(exclude_id);
else
var snap_positions = this.get_snap_positions();
//find closest snap positions
var min_value = {
@ -708,94 +718,5 @@ class Base_tools_class {
return null;
}
/**
* calculates last object snap coordinates (width, height) and returns it. One of coordinates can be null.
*
* @param event
* @param pos_x
* @param pos_y
* @returns object|null
*/
calc_snap_end(event) {
var snap_position = { x: null, y: null, width: null, height: null };
var params = this.getParams();
if(config.SNAP === false || event.shiftKey == true || (event.ctrlKey == true || event.metaKey == 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_value = {
x: null,
y: null,
};
var min_distance = {
x: null,
y: null,
};
//x
for(var i in snap_positions.x){
var distance = Math.abs(config.layer.x + config.layer.width - snap_positions.x[i]);
if(distance < max_distance && (distance < min_distance.x || min_distance.x === null)){
min_distance.x = distance;
min_value.x = snap_positions.x[i];
}
}
//y
for(var i in snap_positions.y){
var distance = Math.abs(config.layer.y + config.layer.height - snap_positions.y[i]);
if(distance < max_distance && (distance < min_distance.y || min_distance.y === null)){
min_distance.y = distance;
min_value.y = snap_positions.y[i];
}
}
//apply snap
var success = false;
//x
if(min_value.x != null) {
snap_position.width = Math.round(min_value.x - config.layer.x);
success = true;
this.snap_line_info.x = {
start_x: min_value.x,
start_y: 0,
end_x: min_value.x,
end_y: config.HEIGHT
};
}
else{
this.snap_line_info.x = null;
}
//y
if(min_value.y != null) {
snap_position.height = Math.round(min_value.y - config.layer.y);
success = true;
this.snap_line_info.y = {
start_x: 0,
start_y: min_value.y,
end_x: config.WIDTH,
end_y: min_value.y,
};
}
else{
this.snap_line_info.y = null;
}
if(success) {
return snap_position;
}
return null;
}
}
export default Base_tools_class;

82
src/js/tools/shapes/arrow.js
View File

@ -13,6 +13,7 @@ class Arrow_class extends Base_tools_class {
this.layer = {};
this.best_ratio = 1;
this.snap_line_info = {x: null, y: null};
this.mouse_click = {x: null, y: null};
}
load() {
@ -24,28 +25,31 @@ class Arrow_class extends Base_tools_class {
if (mouse.valid == false || mouse.click_valid == false)
return;
var x_pos = mouse.x;
var y_pos = mouse.y;
var mouse_x = mouse.x;
var mouse_y = mouse.y;
//apply snap
var snap_info = this.calc_snap_initial(e, x_pos, y_pos);
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y);
if(snap_info != null){
if(snap_info.x != null) {
x_pos = snap_info.x;
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
y_pos = snap_info.y;
mouse_y = snap_info.y;
}
}
this.mouse_click.x = mouse_x;
this.mouse_click.y = mouse_y;
//register new object - current layer is not ours or params changed
this.layer = {
type: this.name,
params: this.clone(this.getParams()),
status: 'draft',
render_function: [this.name, 'render'],
x: x_pos,
y: y_pos,
x: mouse_x,
y: mouse_y,
rotate: null,
is_vector: true,
color: config.COLOR
@ -65,8 +69,24 @@ class Arrow_class extends Base_tools_class {
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
var width = mouse_x - this.layer.x;
var height = mouse_y - this.layer.y;
if (e.ctrlKey == true || e.metaKey) {
//one direction only
if (Math.abs(width) < Math.abs(height))
@ -79,17 +99,6 @@ class Arrow_class extends Base_tools_class {
config.layer.width = width;
config.layer.height = height;
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
config.layer.width = snap_info.width;
}
if(snap_info.height != null) {
config.layer.height = snap_info.height;
}
}
this.Base_layers.render();
}
@ -100,8 +109,26 @@ class Arrow_class extends Base_tools_class {
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
this.snap_line_info = {x: null, y: null};
var width = mouse_x - this.layer.x;
var height = mouse_y - this.layer.y;
if (width == 0 && height == 0) {
//same coordinates - cancel
@ -117,17 +144,6 @@ class Arrow_class extends Base_tools_class {
height = 0;
}
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
width = snap_info.width;
}
if(snap_info.height != null) {
height = snap_info.height;
}
}
//more data
app.State.do_action(
new app.Actions.Update_layer_action(config.layer.id, {

74
src/js/tools/shapes/ellipse.js
View File

@ -13,6 +13,7 @@ class Ellipse_class extends Base_tools_class {
this.layer = {};
this.best_ratio = 1;
this.snap_line_info = {x: null, y: null};
this.mouse_click = {x: null, y: null};
}
load() {
@ -25,28 +26,31 @@ class Ellipse_class extends Base_tools_class {
if (mouse.valid == false || mouse.click_valid == false)
return;
var x_pos = mouse.x;
var y_pos = mouse.y;
var mouse_x = mouse.x;
var mouse_y = mouse.y;
//apply snap
var snap_info = this.calc_snap_initial(e, x_pos, y_pos);
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y);
if(snap_info != null){
if(snap_info.x != null) {
x_pos = snap_info.x;
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
y_pos = snap_info.y;
mouse_y = snap_info.y;
}
}
this.mouse_click.x = mouse_x;
this.mouse_click.y = mouse_y;
//register new object - current layer is not ours or params changed
this.layer = {
type: this.name,
params: this.clone(this.getParams()),
render_function: [this.name, 'render'],
status: 'draft',
x: x_pos,
y: y_pos,
x: mouse_x,
y: mouse_y,
is_vector: true,
color: null,
data: {
@ -77,8 +81,20 @@ class Ellipse_class extends Base_tools_class {
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
@ -93,17 +109,6 @@ class Ellipse_class extends Base_tools_class {
config.layer.width = width * 2;
config.layer.height = height * 2;
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
config.layer.width = snap_info.width;
}
if(snap_info.height != null) {
config.layer.height = snap_info.height;
}
}
this.Base_layers.render();
}
@ -118,8 +123,21 @@ class Ellipse_class extends Base_tools_class {
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
this.snap_line_info = {x: null, y: null};
var width = Math.abs(mouse_x - click_x);
var height = Math.abs(mouse_y - click_y);
@ -137,18 +155,6 @@ class Ellipse_class extends Base_tools_class {
var new_x = Math.round(this.layer.data.center_x - width);
var new_y = Math.round(this.layer.data.center_y - height);
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
width = snap_info.width / 2;
}
if(snap_info.height != null) {
height = snap_info.height / 2;
}
}
this.snap_line_info = {x: null, y: null};
width = width * 2;
height = height * 2;

83
src/js/tools/shapes/line.js
View File

@ -13,6 +13,7 @@ class Line_class extends Base_tools_class {
this.layer = {};
this.best_ratio = 1;
this.snap_line_info = {x: null, y: null};
this.mouse_click = {x: null, y: null};
}
load() {
@ -24,28 +25,31 @@ class Line_class extends Base_tools_class {
if (mouse.valid == false || mouse.click_valid == false)
return;
var x_pos = mouse.x;
var y_pos = mouse.y;
var mouse_x = mouse.x;
var mouse_y = mouse.y;
//apply snap
var snap_info = this.calc_snap_initial(e, x_pos, y_pos);
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y);
if(snap_info != null){
if(snap_info.x != null) {
x_pos = snap_info.x;
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
y_pos = snap_info.y;
mouse_y = snap_info.y;
}
}
this.mouse_click.x = mouse_x;
this.mouse_click.y = mouse_y;
//register new object - current layer is not ours or params changed
this.layer = {
type: this.name,
params: this.clone(this.getParams()),
status: 'draft',
render_function: [this.name, 'render'],
x: x_pos,
y: y_pos,
x: mouse_x,
y: mouse_y,
rotate: null,
is_vector: true,
color: config.COLOR
@ -65,8 +69,24 @@ class Line_class extends Base_tools_class {
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
var width = mouse_x - this.layer.x;
var height = mouse_y - this.layer.y;
if (e.ctrlKey == true || e.metaKey) {
//one direction only
if (Math.abs(width) < Math.abs(height))
@ -79,17 +99,6 @@ class Line_class extends Base_tools_class {
config.layer.width = width;
config.layer.height = height;
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
config.layer.width = snap_info.width;
}
if(snap_info.height != null) {
config.layer.height = snap_info.height;
}
}
this.Base_layers.render();
}
@ -100,8 +109,26 @@ class Line_class extends Base_tools_class {
return;
}
var width = mouse.x - this.layer.x;
var height = mouse.y - this.layer.y;
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
this.snap_line_info = {x: null, y: null};
var width = mouse_x - this.layer.x;
var height = mouse_y - this.layer.y;
if (width == 0 && height == 0) {
//same coordinates - cancel
@ -117,18 +144,6 @@ class Line_class extends Base_tools_class {
height = 0;
}
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null){
if(snap_info.width != null) {
width = snap_info.width;
}
if(snap_info.height != null) {
height = snap_info.height;
}
}
this.snap_line_info = {x: null, y: null};
//more data
app.State.do_action(
new app.Actions.Update_layer_action(config.layer.id, {

79
src/js/tools/shapes/rectangle.js
View File

@ -13,6 +13,7 @@ class Rectangle_class extends Base_tools_class {
this.layer = {};
this.best_ratio = 1;
this.snap_line_info = {x: null, y: null};
this.mouse_click = {x: null, y: null};
}
load() {
@ -24,28 +25,31 @@ class Rectangle_class extends Base_tools_class {
if (mouse.valid == false || mouse.click_valid == false)
return;
var x_pos = mouse.x;
var y_pos = mouse.y;
var mouse_x = mouse.x;
var mouse_y = mouse.y;
//apply snap
var snap_info = this.calc_snap_initial(e, x_pos, y_pos);
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y);
if(snap_info != null){
if(snap_info.x != null) {
x_pos = snap_info.x;
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
y_pos = snap_info.y;
mouse_y = snap_info.y;
}
}
this.mouse_click.x = mouse_x;
this.mouse_click.y = mouse_y;
//register new object - current layer is not ours or params changed
this.layer = {
type: this.name,
params: this.clone(this.getParams()),
status: 'draft',
render_function: [this.name, 'render'],
x: Math.round(x_pos),
y: Math.round(y_pos),
x: Math.round(mouse_x),
y: Math.round(mouse_y),
color: null,
is_vector: true
};
@ -68,8 +72,20 @@ class Rectangle_class extends Base_tools_class {
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
var x = Math.min(mouse_x, click_x);
var y = Math.min(mouse_y, click_y);
var width = Math.abs(mouse_x - click_x);
@ -96,20 +112,6 @@ class Rectangle_class extends Base_tools_class {
config.layer.width = width;
config.layer.height = height;
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null && params.square == false){
if(snap_info.width != null) {
config.layer.width = snap_info.width;
}
if(snap_info.height != null) {
config.layer.height = snap_info.height;
}
}
else{
this.snap_line_info = {x: null, y: null};
}
this.Base_layers.render();
}
@ -121,11 +123,24 @@ class Rectangle_class extends Base_tools_class {
config.layer.status = null;
return;
}
var mouse_x = Math.round(mouse.x);
var mouse_y = Math.round(mouse.y);
var click_x = Math.round(mouse.click_x);
var click_y = Math.round(mouse.click_y);
var click_x = Math.round(this.mouse_click.x);
var click_y = Math.round(this.mouse_click.y);
//apply snap
var snap_info = this.calc_snap_position(e, mouse_x, mouse_y, config.layer.id);
if(snap_info != null){
if(snap_info.x != null) {
mouse_x = snap_info.x;
}
if(snap_info.y != null) {
mouse_y = snap_info.y;
}
}
this.snap_line_info = {x: null, y: null};
var x = Math.min(mouse_x, click_x);
var y = Math.min(mouse_y, click_y);
var width = Math.abs(mouse_x - click_x);
@ -152,18 +167,6 @@ class Rectangle_class extends Base_tools_class {
return;
}
//apply snap
var snap_info = this.calc_snap_end(e);
if(snap_info != null && params.square == false){
if(snap_info.width != null) {
width = snap_info.width;
}
if(snap_info.height != null) {
height = snap_info.height;
}
}
this.snap_line_info = {x: null, y: null};
//more data
app.State.do_action(
new app.Actions.Update_layer_action(config.layer.id, {