From 2860528211979f3f3b63656ecd45122cd6946e2b Mon Sep 17 00:00:00 2001
From: agriyadev5 <agriya.dev5@agriya.in>
Date: Mon, 16 Aug 2021 21:21:02 +0530
Subject: [PATCH] #599 TopPanel x,y and dimension for element, doesn't work

---
 src/editor/components/seSpinInput.js             | 11 ++++++++++-
 .../dialogs/se-elix/define/NumberSpinBox.js      | 16 +++++++++++++++-
 src/editor/panels/TopPanel.js                    |  2 +-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js
index 3aa391de..50074fd2 100644
--- a/src/editor/components/seSpinInput.js
+++ b/src/editor/components/seSpinInput.js
@@ -104,7 +104,9 @@ export class SESpinInput extends HTMLElement {
       this.$img.remove();
       break;
     case 'value':
-      this.$input.value = newValue;
+      if(this.$input.value !== newValue) {
+        this.$input.value = newValue;
+      }
       break;
     default:
       // eslint-disable-next-line no-console
@@ -179,6 +181,13 @@ export class SESpinInput extends HTMLElement {
    * @returns {void}
    */
   connectedCallback () {
+    this.$input.addEventListener('onchange', (e) => {
+      e.preventDefault();
+      if(e.detail !== this.value && e.detail !== "") {
+        const event = new CustomEvent('change', { detail: e.detail });
+        this.dispatchEvent(event);
+      }
+    });
     this.$input.addEventListener('change', (e) => {
       e.preventDefault();
       this.value = e.target.value;
diff --git a/src/editor/dialogs/se-elix/define/NumberSpinBox.js b/src/editor/dialogs/se-elix/define/NumberSpinBox.js
index 034eafbc..e13caad2 100644
--- a/src/editor/dialogs/se-elix/define/NumberSpinBox.js
+++ b/src/editor/dialogs/se-elix/define/NumberSpinBox.js
@@ -1,7 +1,21 @@
 import PlainNumberSpinBox from '../src/plain/PlainNumberSpinBox.js';
+import {
+  stateEffects
+} from 'elix/src/base/internal.js';
 /**
  * @class ElixNumberSpinBox
  */
-export default class ElixNumberSpinBox extends PlainNumberSpinBox {}
+// export default class ElixNumberSpinBox extends PlainNumberSpinBox {}
+
+export default class ElixNumberSpinBox extends PlainNumberSpinBox {
+  [stateEffects](state, changed) {
+    const effects = super[stateEffects];
+    if(changed.value && state.value !== "" && this.value !== undefined) {
+      const event = new CustomEvent('onchange', { detail: state.value });
+      this.dispatchEvent(event);
+    }
+    return effects;
+  }
+}
 
 customElements.define('elix-number-spin-box', ElixNumberSpinBox);
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index b0466cee..351542ab 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -570,7 +570,7 @@ class TopPanel {
    */
   attrChanger(e) {
     const attr = e.target.getAttribute("data-attr");
-    let val = e.target.value;
+    let val = (e.detail || e.target.value);
     const valid = isValidUnit(attr, val, this.selectedElement);
 
     if (!valid) {