text tool update - align, font, fixed styles

santhosh77h · Dec 4, 2017 · fcfed66 · fcfed66
1 parent 89191ce
commit fcfed66
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 13 deletions.
diff --git a/src/css/layout.css b/src/css/layout.css
@@ -443,13 +443,19 @@
 	width: 70px;
 	padding: 3px 5px;
 }
+.block.details select{
+	width: calc(100% - 70px);
+	height: 23px;
+}
 .block.details button{
-	width: 25px;
 	height: 23px;
-	overflow: hidden;
-	opacity: 0.3;
 	border: 1px solid #444;
 	background-color: var(--background-color-medium);
+}
+.block.details button.reset{
+	width: 25px;
+	overflow: hidden;
+	opacity: 0.3;
 	background-image: url(images/sprites.png);
 	background-repeat: no-repeat;
 	background-position: -747px 2px;

diff --git a/src/js/core/gui/gui-details.js b/src/js/core/gui/gui-details.js
@@ -10,17 +10,17 @@ var template = `
 	<div class="row">
 		<span class="trn label">X</span>
 		<input type="number" id="detail_x" />
-		<button class="extra" type="button" id="reset_x" title="Reset">Reset</button>
+		<button class="extra reset" type="button" id="reset_x" title="Reset">Reset</button>
 	</div>
 	<div class="row">
 		<span class="trn label">Y:</span>
 		<input type="number" id="detail_y" />
-		<button class="extra" type="button" id="reset_y" title="Reset">Reset</button>
+		<button class="extra reset" type="button" id="reset_y" title="Reset">Reset</button>
 	</div>
 	<div class="row">
 		<span class="trn label">Width:</span>
 		<input type="number" id="detail_width" />
-		<button class="extra" type="button" id="reset_size" title="Reset">Reset</button>
+		<button class="extra reset" type="button" id="reset_size" title="Reset">Reset</button>
 	</div>
 	<div class="row">
 		<span class="trn label">Height:</span>
@@ -41,18 +41,35 @@ var template = `
 	</div>
 	<div id="params_details">
 		<hr />
-		<div id="params_details">
-			<span class="trn label">Text:</span>
+		<div class="row">
 			<button type="buton" class="" id="detail_param_text">Edit text...</button>
+			<button type="buton" class="" id="detail_param_bold">Bold</button>
+			<button type="buton" class="" id="detail_param_italic">Italic</button>
+			<button type="buton" class="" id="detail_param_stroke">Stroke</button>
 		</div>
 		<div class="row">
 			<span class="trn label">Size:</span>
 			<input type="number" min="1" id="detail_param_size" />
 		</div>
 		<div class="row">
-			<button type="buton" class="" id="detail_param_bold">Bold</button>
-			<button type="buton" class="" id="detail_param_italic">Italic</button>
-			<button type="buton" class="" id="detail_param_stroke">Stroke</button>
+			<span class="trn label">Align:</span>
+			<select id="detail_param_align">
+				<option value="Left">Left</option>
+				<option value="Center">Center</option>
+				<option value="Right">Right</option>
+			</select>
+		</div>
+		<div class="row">
+			<span class="trn label">Font:</span>
+			<select id="detail_param_family">
+				<option value="Arial">Arial</option>
+				<option value="Courier">Courier</option>
+				<option value="Impact">Impact</option>
+				<option value="Helvetica">Helvetica</option>
+				<option value="monospace">monospace</option>
+				<option valueTimes New Roman">Times New Roman</option>
+				<option value="Verdana">Verdana</option>
+			</select>
 		</div>
 		<div class="row">
 			<span class="trn label">Stroke:</span>
@@ -97,6 +114,8 @@ class GUI_details_class {
 		this.render_general_param('italic', events);
 		this.render_general_param('stroke', events);
 		this.render_general_param('stroke_size', events);
+		this.render_general_select_param('align', events);
+		this.render_general_select_param('family', events);
 	}
 
 	render_general(key, events) {
@@ -195,6 +214,32 @@ class GUI_details_class {
 			});
 		}
 	}
+
+	render_general_select_param(key, events){
+		var layer = config.layer;
+
+		if (layer != undefined) {
+			var target = document.getElementById('detail_param_' + key);
+
+			if (layer.params[key] == null) {
+				target.value = '';
+				target.disabled = true;
+			}
+			else {
+				target.value = layer.params[key].value;
+				target.disabled = false;
+			}
+		}
+
+		if (events) {
+			//events
+			document.getElementById('detail_param_' + key).addEventListener('change', function (e) {
+				var value = this.value;
+				config.layer.params[key].value = value;
+				config.need_render = true;
+			});
+		}
+	}
 
 	/**
 	 * item: color

diff --git a/src/js/tools/text.js b/src/js/tools/text.js
@@ -2,13 +2,15 @@ import config from './../config.js';
 import Base_tools_class from './../core/base-tools.js';
 import Base_layers_class from './../core/base-layers.js';
 import Helper_class from './../libs/helpers.js';
+import Dialog_class from './../libs/popup.js';
 
 class Text_class extends Base_tools_class {
 
 	constructor(ctx) {
 		super();
 		this.Base_layers = new Base_layers_class();
 		this.Helper = new Helper_class();
+		this.POP = new Dialog_class();
 		this.ctx = ctx;
 		this.name = 'text';
 		this.layer = {};
@@ -73,6 +75,7 @@ class Text_class extends Base_tools_class {
 
 	mouseup(e) {
 		var mouse = this.get_mouse_info(e);
+		var params = this.getParams();
 		if (mouse.valid == false || mouse.click_valid == false) {
 			return;
 		}
@@ -83,13 +86,29 @@ class Text_class extends Base_tools_class {
 		if (width == 0 && height == 0) {
 			//same coordinates - cancel
 			width = config.WIDTH - this.layer.x - Math.round(config.WIDTH / 50);
-			height = 100;
+			height = params.size;
 		}
-
+		width = Math.max(width, params.size * 0.5 * 12);
+		height = Math.max(height, params.size);
 		//more data
 		config.layer.width = width;
 		config.layer.height = height;
 		this.Base_layers.render();
+
+		//ask for text
+		var settings = {
+			title: 'Edit text',
+			params: [
+				{name: "text", title: "Text:", value: "Text example"},
+			],
+			on_finish: function (params) {
+				if(config.layer.type == 'text' && params.text != ''){
+					config.layer.params.text = params.text;
+					config.need_render = true;
+				}
+			},
+		};
+		this.POP.show(settings);			
 	}
 
 	render(ctx, layer) {