#223 - guides

images/test-collection.json

@@ -5,7 +5,11 @@
 		"about": "Image data with multi-layers. Can be opened using miniPaint - https://github.com/viliusle/miniPaint",
 		"date": "2021-01-02",
 		"version": "4.5.0",
-		"layer_active": 1
+		"layer_active": 1,
+		"guides": [
+			{ "x": null, "y": 400},
+			{ "x": null, "y": 600}
+		]
 	},
 	"layers": [
 		{

src/js/config-menu.js

@@ -242,6 +242,24 @@ const menuDefinition = [
 				shortcut: 'G',
 				target: 'image/grid.grid'
 			},
+			{
+				name: 'Guides',
+				children: [
+					{
+						name: 'Insert',
+						ellipsis: true,
+						target: 'image/guides.insert'
+					},
+					{
+						name: 'Update',
+						target: 'image/guides.update'
+					},
+					{
+						name: 'Remove all',
+						target: 'image/guides.remove'
+					}
+				]
+			},
 			{
 				divider: true
 			},

src/js/config.js

@@ -22,6 +22,8 @@ config.mouse = {};
 config.swatches = {
 	default: [] // Only default used right now, object format for swatch swapping in future.
 };
+config.guides_enabled = true;
+config.guides = [];
 
 //requires styles in reset.css
 config.themes = [

src/js/core/base-gui.js

@@ -110,6 +110,16 @@ class Base_gui_class {
 		else{
 			config.SNAP = Boolean(snap_cookie);
 		}
+
+		//guides
+		var guides_cookie = this.Helper.getCookie('guides');
+		if (guides_cookie === null) {
+			//default
+			config.guides_enabled = true;
+		}
+		else{
+			config.guides_enabled = Boolean(guides_cookie);
+		}
 	}
 
 	render_main_gui() {
@@ -360,6 +370,37 @@ class Base_gui_class {
 			ctx.stroke();
 		}
 	}
+
+	draw_guides(ctx){
+		if(config.guides_enabled == false){
+			return;
+		}
+
+		for(var i in config.guides) {
+			var guide = config.guides[i];
+
+			if (guide.x === 0 || guide.y === 0) {
+				continue;
+			}
+
+			//set styles
+			ctx.strokeStyle = '#49ffff';
+			ctx.lineWidth = 1;
+
+			ctx.beginPath();
+			if (guide.y === null) {
+				//vertical
+				ctx.moveTo(guide.x, 0);
+				ctx.lineTo(guide.x, config.HEIGHT);
+			}
+			if (guide.x === null) {
+				//horizontal
+				ctx.moveTo(0, guide.y);
+				ctx.lineTo(config.WIDTH, guide.y);
+			}
+			ctx.stroke();
+		}
+	}
 	
 	/**
 	 * change draw area size

src/js/core/base-layers.js

@@ -168,6 +168,9 @@ class Base_layers_class {
 			//grid
 			this.Base_gui.draw_grid(this.ctx);
 
+			//guides
+			this.Base_gui.draw_guides(this.ctx);
+
 			//render selected object controls
 			this.Base_selection.draw_selection();
 
@@ -693,6 +696,15 @@ class Base_layers_class {
 		};
 	}
 
+	/**
+	 * returns all layers
+	 *
+	 * @returns {array}
+	 */
+	get_layers() {
+		return config.layers;
+	}
+
 }
 
 export default Base_layers_class;

src/js/core/base-tools.js

@@ -585,6 +585,16 @@ class Base_tools_class {
 				config.HEIGHT,
 			],
 		};
+		if(config.guides_enabled == true){
+			//use guides
+			for(var i in config.guides){
+				var guide = config.guides[i];
+				if(guide.y === null)
+					snap_positions.x.push(guide.x);
+				else
+					snap_positions.y.push(guide.y);
+			}
+		}
 		for(var i in config.layers){
 			if(exclude_id != null && exclude_id == config.layers[i].id){
 				continue;

src/js/modules/file/open.js

@@ -524,6 +524,9 @@ class File_open_class {
 				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)
 		);

src/js/modules/file/save.js

@@ -594,6 +594,7 @@ class File_save_class {
 			date: today,
 			version: VERSION,
 			layer_active: config.layer.id,
+			guides: config.guides,
 		};
 
 		//layers

src/js/modules/image/guides.js

@@ -0,0 +1,123 @@
+import config from './../../config.js';
+import Dialog_class from './../../libs/popup.js';
+import Helper_class from './../../libs/helpers.js';
+import Base_layers_class from './../../core/base-layers.js';
+import alertify from './../../../../node_modules/alertifyjs/build/alertify.min.js';
+
+class Image_guides_class {
+
+
+	constructor() {
+		this.POP = new Dialog_class();
+		this.Base_layers = new Base_layers_class();
+		this.Helper = new Helper_class();
+	}
+
+	insert() {
+		var _this = this;
+
+		var settings = {
+			title: 'Insert guides',
+			params: [
+				{name: "type", title: "Type:", values: ["Vertical", "Horizontal"], value :"Vertical"},
+				{name: "position", title: "Position:",  value: 20},
+			],
+			on_finish: function (params) {
+				_this.insert_handler(params);
+			},
+		};
+		this.POP.show(settings);
+	}
+
+	insert_handler(data){
+		var type = data.type;
+		var position = parseInt(data.position);
+
+		//check if we have guides layer
+		var layers = this.Base_layers.get_layers();
+		var layer = null;
+		for(var i in layers){
+			if(layers[i].type == 'guides'){
+				layer = layers[i];
+				break;
+			}
+		}
+
+		var x = null;
+		var y = null;
+		if(type == 'Vertical')
+			x = position;
+		if(type == 'Horizontal')
+			y = position;
+
+		//update
+		config.guides.push({x: x, y: y});
+
+		if(config.guides_enabled == false){
+			//was disabled
+			config.guides_enabled = true;
+			this.Helper.setCookie('guides', 1);
+			alertify.warning('Guides enabled.');
+		}
+
+		config.need_render = true;
+	}
+
+	update(){
+		var _this = this;
+
+		var params = [];
+		for(var i in config.guides){
+			var guide = config.guides[i];
+
+			if(guide.y === null)
+				params.push({name: i, title: "Vertical:",  value: guide.x});
+		}
+		for(var i in config.guides){
+			var guide = config.guides[i];
+
+			if(guide.x === null)
+				params.push({name: i, title: "Horizontal:",  value: guide.y});
+		}
+
+		var settings = {
+			title: 'Update guides',
+			params: params,
+			on_finish: function (params) {
+				_this.update_handler(params);
+			},
+		};
+		this.POP.show(settings);
+	}
+
+	update_handler(data){
+		//update
+		for (var i in data) {
+			var key = parseInt(i);
+			var value = parseInt(data[i]);
+
+			if (config.guides[key].x === null)
+				config.guides[key].y = value;
+			else
+				config.guides[key].x = value;
+		}
+
+		//remove empty
+		for (var i = 0; i < config.guides.length; i++) {
+			if(config.guides[i].x === 0 || config.guides[i].y === 0){
+				config.guides.splice(i, 1);
+				i--;
+			}
+		}
+
+		config.need_render = true;
+	}
+
+	remove(params) {
+		config.guides = [];
+		config.need_render = true;
+	}
+
+}
+
+export default Image_guides_class;

src/js/modules/tools/settings.js

@@ -56,6 +56,15 @@ class Tools_settings_class {
 			var snap = Boolean(snap_cookie);
 		}
 
+		//guides
+		var guides_cookie = this.Helper.getCookie('guides');
+		if (guides_cookie === null) {
+			var guides = true; //default
+		}
+		else{
+			var guides = Boolean(guides_cookie);
+		}
+
 		var settings = {
 			title: 'Settings',
 			params: [
@@ -65,6 +74,7 @@ class Tools_settings_class {
 				{name: "theme", title: "Theme", values: config.themes, value: theme},
 				{name: "save_resolution", title: "Save resolution:", value: save_resolution},
 				{name: "snap", title: "Enable snap:", value: snap},
+				{name: "guides", title: "Enable guides:", value: guides},
 			],
 			on_change: function (params) {
 				this.Base_gui.change_theme(params.theme);
@@ -120,6 +130,16 @@ class Tools_settings_class {
 			config.SNAP = false;
 		}
 
+		//guides
+		if (params.guides) {
+			this.Helper.setCookie('guides', 1);
+			config.guides_enabled = true;
+		}
+		else {
+			this.Helper.setCookie('guides', 0);
+			config.guides_enabled = false;
+		}
+
 		//finish
 		this.Base_gui.prepare_canvas();
 		config.need_render = true;