#599 TopPanel x,y and dimension for element, doesn't work

src/editor/components/seSpinInput.js

@@ -104,7 +104,9 @@ export class SESpinInput extends HTMLElement {
       this.$img.remove();
       break;
     case 'value':
+      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;

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);

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) {