From ed94a0fb395db9a206029b84ba3d9c568a1c8fc3 Mon Sep 17 00:00:00 2001
From: Vivek Singh <vikky30singh@gmail.com>
Date: Mon, 15 Feb 2021 22:15:58 +0530
Subject: [PATCH] Text Alignment made easy and convenient. (#1804)

* text alignment made easy

* added description and removed id

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>
---
 examples/lib/defaultHtmlStepUi.js | 22 +++++++++++++++++++++-
 examples/lib/mapHtmltypes.js      |  3 +++
 src/modules/TextOverlay/info.json |  4 ++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/examples/lib/defaultHtmlStepUi.js b/examples/lib/defaultHtmlStepUi.js
index cb22797b..d50caab3 100644
--- a/examples/lib/defaultHtmlStepUi.js
+++ b/examples/lib/defaultHtmlStepUi.js
@@ -121,7 +121,14 @@ function DefaultHtmlStepUi(_sequencer, options) {
               paramVal + '">' + '<span class="input-group-addon"><i></i></span>' +
               '</div>';
           }
-          else { // Non color-picker input types
+          else if(inputDesc.type === 'button'){
+            html = '<div><button name="' + paramName + '" type="' + inputDesc.type + '" >\
+            <i class="fa fa-crosshairs"></i></button>\
+            <span>click to select coordinates</span>\
+            </div>';
+          }
+          else { // Non color-picker input types and other than a button
+
             html =
               '<input class="form-control target" type="' +
               inputDesc.type +
@@ -402,6 +409,19 @@ function DefaultHtmlStepUi(_sequencer, options) {
 
     var img = $(step.imgElement);
 
+    let customXCoord = '20'; //default x coordinate
+    let customYCoord = '20'; //default y coordinate
+
+    const customButton = $('button[name="Custom-Coordinates"]');
+      img.click(function(e) {
+          customXCoord = e.offsetX;
+          customYCoord = e.offsetY;
+          customButton.click(function() {
+            $('input[name="x"]').val(customXCoord);
+            $('input[name="y"]').val(customYCoord);
+          })
+      });
+
     img.mousemove(function(e) {
       var canvas = document.createElement('canvas');
       canvas.width = img.width();
diff --git a/examples/lib/mapHtmltypes.js b/examples/lib/mapHtmltypes.js
index 26add608..c0b2fde8 100644
--- a/examples/lib/mapHtmltypes.js
+++ b/examples/lib/mapHtmltypes.js
@@ -22,6 +22,9 @@ function mapHtmlTypes(inputInfo){
     htmlType = inputInfo.min != undefined ? 'range' : 'text';
     if (htmlType === 'range') inputInfo.step = inputInfo.step || 0.1; // default range step size for float
     break;
+  case 'coordinate-input':
+    htmlType = 'button';
+    break;
   default:
     htmlType = 'text';
     break;
diff --git a/src/modules/TextOverlay/info.json b/src/modules/TextOverlay/info.json
index 9e1c0f52..f853670c 100644
--- a/src/modules/TextOverlay/info.json
+++ b/src/modules/TextOverlay/info.json
@@ -8,6 +8,10 @@
             "desc": "Enter the text to overlay.",
             "default": "Lorem ipsum"
         },
+        "Custom-Coordinates": {
+            "type": "coordinate-input",
+            "desc": "Click to fill Coordinates"
+        },
         "x": {
             "type": "integer",
             "desc": "Starting text horizontal position.",