From 2f2dd0fc564e172f2a33acfb6e3be796f3ce826a Mon Sep 17 00:00:00 2001
From: Agriya Dev5 <agriya.dev5@agriya.in>
Date: Wed, 17 Feb 2021 16:09:20 +0530
Subject: [PATCH] #45 These buttons don't work and dropdown is broken

---
 src/editor/components/seList.js       |  1 +
 src/editor/panels/TopPanelHandlers.js |  6 +++++-
 src/svgcanvas/selected-elem.js        | 14 ++++++++++----
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index 9a6f9405..a68e77fe 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -130,6 +130,7 @@ export class SeList extends HTMLElement {
         const value = this.$dropdown.selectedItem.getAttribute('value');
         const closeEvent = new CustomEvent('change', {detail: {value}});
         currentObj.dispatchEvent(closeEvent);
+        currentObj.value = value;
       }
     });
   }
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
index 813d03f9..97a29804 100644
--- a/src/editor/panels/TopPanelHandlers.js
+++ b/src/editor/panels/TopPanelHandlers.js
@@ -398,7 +398,11 @@ class TopPanelHandlers {
 * @returns {void}
 */
   clickAlign (pos) {
-    this.svgCanvas.alignSelectedElements(pos, $('#align_relative_to').val());
+    let value = $('#tool_align_relative').val();
+    if(value === ''){
+      value = 'selected';
+    }
+    this.svgCanvas.alignSelectedElements(pos, value);
   }
   /**
 *
diff --git a/src/svgcanvas/selected-elem.js b/src/svgcanvas/selected-elem.js
index 1face6f3..36eb643c 100644
--- a/src/svgcanvas/selected-elem.js
+++ b/src/svgcanvas/selected-elem.js
@@ -288,9 +288,9 @@ export const alignSelectedElements = function (type, relativeTo) {
     // now bbox is axis-aligned and handles rotation
     switch (relativeTo) {
     case 'smallest':
-      if (((type === 'l' || type === 'c' || type === 'r') &&
+      if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
     (curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) ||
-    ((type === 't' || type === 'm' || type === 'b') &&
+    ((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
     (curheight === Number.MIN_VALUE || curheight > bboxes[i].height))
       ) {
         minx = bboxes[i].x;
@@ -302,9 +302,9 @@ export const alignSelectedElements = function (type, relativeTo) {
       }
       break;
     case 'largest':
-      if (((type === 'l' || type === 'c' || type === 'r') &&
+      if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
     (curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) ||
-    ((type === 't' || type === 'm' || type === 'b') &&
+    ((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
     (curheight === Number.MIN_VALUE || curheight < bboxes[i].height))
       ) {
         minx = bboxes[i].x;
@@ -341,21 +341,27 @@ export const alignSelectedElements = function (type, relativeTo) {
     dy[i] = 0;
     switch (type) {
     case 'l': // left (horizontal)
+    case 'left': // left (horizontal)
       dx[i] = minx - bbox.x;
       break;
     case 'c': // center (horizontal)
+    case 'center': // center (horizontal)
       dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);
       break;
     case 'r': // right (horizontal)
+    case 'right': // right (horizontal)
       dx[i] = maxx - (bbox.x + bbox.width);
       break;
     case 't': // top (vertical)
+    case 'top': // top (vertical)
       dy[i] = miny - bbox.y;
       break;
     case 'm': // middle (vertical)
+    case 'middle': // middle (vertical)
       dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);
       break;
     case 'b': // bottom (vertical)
+    case 'bottom': // bottom (vertical)
       dy[i] = maxy - (bbox.y + bbox.height);
       break;
     }