Grid based style and pretty number inputs

studio-frontend/src/app/inspector.element.ts

@@ -66,6 +66,9 @@ export class AppElement extends LitElement {
                             }
                         }
                     }
+
+                    font-family: "Fira Sans", sans-serif;
+                    font-size: 14px;
                 }
             </style>
 

studio-frontend/src/dioxus-machine.ts

@@ -17,9 +17,16 @@ function unpack_vnode(
             var attr = node_data["attributes"][i];
             element.setAttribute(attr[0], attr[1]);
         }
+
+        //Create custom elements
+        if (node_data["tag"] == "input" && element["type"] == "number") {
+            create_float_input(element);
+        }
+
         if (node_data["id"] != undefined) {
             element.setAttribute("id", node_data["id"]);
         };
+
         //apply children
         if (node_data["children"] != undefined) {
             for (var j = 0; j < node_data["children"].length; j++) {
@@ -76,6 +83,8 @@ function apply_muts(
                     root.removeChild(root.firstChild);
                 }
                 root.appendChild(element);
+                append_style(root);
+
             } else if (mut["SetAttibute"] != undefined) {
                 let m = mut["SetAttibute"];
                 let id = m["id"];
@@ -120,3 +129,87 @@ document.addEventListener('inspector-dom-changed', (event: CustomEvent) => {
     apply_muts(customEvent);
 });
 
+function create_float_input(element : HTMLInputElement) {
+
+    console.log("create_float_input", element);
+
+    let value = 0; // Начальное значение
+    let isMouseDown = false;
+    let startX = 0;
+
+    element.addEventListener('mousedown', (e: MouseEvent) => {
+        isMouseDown = true;
+        startX = e.clientX;
+        value = parseInt(element.value, 10);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    });
+
+    const onMouseMove = (e: MouseEvent) => {
+        if (isMouseDown) {
+            const dx = e.clientX - startX;
+            element.value = (value + dx / 10).toString(); // Изменение на 1 за каждые 5 пикселей движения мыши
+            //dispatch update event
+            const event = new Event('input', {
+                bubbles: true,
+                cancelable: true,
+            });
+            element.dispatchEvent(event);
+        }
+    };
+
+    const onMouseUp = () => {
+        isMouseDown = false;
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    element.addEventListener('keydown', (e: KeyboardEvent) => {
+        if (!e.key.match(/^[0-9]$/)) {
+            e.preventDefault(); // Предотвратить ввод нечисловых символов
+        }
+    });
+};
+
+function append_style(parent : HTMLElement) {
+    let style = document.createElement('style');
+
+    // Устанавливаем тип содержимого для <style>
+    style.type = 'text/css';
+
+    // Добавляем CSS правила в элемент <style>. Используйте обратные кавычки для многострочного текста
+    style.innerHTML = `
+    input[type="number"] {
+        background-color: #3333336e; /* Темный фон */
+        color: #fff; /* Светлый текст */
+        border: none; /* Убрать стандартную рамку */
+        border-radius: 7px; /* Закругленные границы */
+        padding: 5px; /* Внутренний отступ */
+        outline: none; /* Убрать контур при фокусе */
+    }
+    input[type="number"]:focus {
+        border: 2px solid #555; /* Стиль границы при фокусе */
+        background-color: #222; /* Немного темнее фон при фокусе */
+    }
+
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    input[type="number"] {
+        -moz-appearance: textfield;
+    }
+    
+    .struct-grid {
+        display: grid;
+        grid-template-columns: min-content 1fr;
+        gap: 8px;
+        align-items: center;
+    }
+
+    `;
+
+    parent.appendChild(style);
+}