Better float UI (#15774)

BabylonJS · Nov 5, 2024 · 44df9ea · 44df9ea
1 parent 966e9ce
commit 44df9ea
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 5 deletions.
diff --git a/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts b/packages/dev/core/src/Materials/Node/Blocks/Fragment/fragmentOutputBlock.ts
@@ -13,6 +13,18 @@ import type { Mesh } from "../../../../Meshes/mesh";
 import { BindLogDepth } from "../../../materialHelper.functions";
 import { ShaderLanguage } from "core/Materials/shaderLanguage";
 
+/**
+ * Color spaces supported by the fragment output block
+ */
+export enum FragmentOutputBlockColorSpace {
+    /** Unspecified */
+    NoColorSpace,
+    /** Gamma */
+    Gamma,
+    /** Linear */
+    Linear,
+}
+
 /**
  * Block used to output the final color
  */
@@ -36,17 +48,42 @@ export class FragmentOutputBlock extends NodeMaterialBlock {
     }
 
     /** Gets or sets a boolean indicating if content needs to be converted to gamma space */
-    @editableInPropertyPage("Convert to gamma space", PropertyTypeForEdition.Boolean, "PROPERTIES", { notifiers: { update: true } })
     public convertToGammaSpace = false;
 
     /** Gets or sets a boolean indicating if content needs to be converted to linear space */
-    @editableInPropertyPage("Convert to linear space", PropertyTypeForEdition.Boolean, "PROPERTIES", { notifiers: { update: true } })
     public convertToLinearSpace = false;
 
     /** Gets or sets a boolean indicating if logarithmic depth should be used */
-    @editableInPropertyPage("Use logarithmic depth", PropertyTypeForEdition.Boolean, "PROPERTIES")
+    @editableInPropertyPage("Use logarithmic depth", PropertyTypeForEdition.Boolean, "PROPERTIES", { embedded: true })
     public useLogarithmicDepth = false;
 
+    /**
+     * Gets or sets the color space used for the block
+     */
+    @editableInPropertyPage("Color space", PropertyTypeForEdition.List, "ADVANCED", {
+        notifiers: { rebuild: true },
+        embedded: true,
+        options: [
+            { label: "No color space", value: FragmentOutputBlockColorSpace.NoColorSpace },
+            { label: "Gamma", value: FragmentOutputBlockColorSpace.Gamma },
+            { label: "Linear", value: FragmentOutputBlockColorSpace.Linear },
+        ],
+    })
+    public get colorSpace() {
+        if (this.convertToGammaSpace) {
+            return FragmentOutputBlockColorSpace.Gamma;
+        }
+        if (this.convertToLinearSpace) {
+            return FragmentOutputBlockColorSpace.Linear;
+        }
+        return FragmentOutputBlockColorSpace.NoColorSpace;
+    }
+
+    public set colorSpace(value: FragmentOutputBlockColorSpace) {
+        this.convertToGammaSpace = value === FragmentOutputBlockColorSpace.Gamma;
+        this.convertToLinearSpace = value === FragmentOutputBlockColorSpace.Linear;
+    }
+
     /**
      * Gets the current class name
      * @returns the class name

diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.modules.scss b/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.modules.scss
@@ -124,6 +124,7 @@ $iconMargin: 6px;
 .booleanContainer {
     height: 20px;
     display: flex;
+    margin-left: 4px;
     input[type="checkbox"] {
         -webkit-appearance: none;
         -moz-appearance: none;
@@ -183,6 +184,7 @@ $iconMargin: 6px;
         z-index: 1;
         text-align: end;
         padding-right: 5px;
+        cursor: col-resize;
 
         &::-webkit-outer-spin-button,
         &::-webkit-inner-spin-button {
@@ -219,10 +221,10 @@ $iconMargin: 6px;
 }
 
 .listContainer {
-    margin-top: 2px;
+    margin-top: 3px;
     height: 20px;
     display: grid;
-    margin-bottom: 2px;
+    margin-bottom: 3px;
 }
 
 .select {
@@ -252,6 +254,7 @@ $iconMargin: 6px;
     color: white;
     pointer-events: none;
     background: transparent;
+    transform: translateY(-1px);
 }
 
 .active {

diff --git a/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.ts b/packages/dev/sharedUiComponents/src/nodeGraphSystem/graphNode.ts
@@ -692,6 +692,34 @@ export class GraphNode {
                             const label = root.ownerDocument!.createElement("div");
                             label.innerText = displayName;
                             container.appendChild(label);
+
+                            let shouldCapture = false;
+                            numberInput.onpointerdown = (evt) => {
+                                shouldCapture = true;
+                                evt.preventDefault();
+                            };
+                            numberInput.onpointerup = (evt) => {
+                                if (numberInput.hasPointerCapture(evt.pointerId)) {
+                                    numberInput.releasePointerCapture(evt.pointerId);
+                                    shouldCapture = false;
+                                    evt.preventDefault();
+                                } else {
+                                    numberInput.focus();
+                                    numberInput.select();
+                                }
+                            };
+                            numberInput.onpointermove = (evt) => {
+                                if (shouldCapture) {
+                                    numberInput.setPointerCapture(evt.pointerId);
+                                }
+
+                                if (numberInput.hasPointerCapture(evt.pointerId)) {
+                                    numberInput.value = (parseFloat(numberInput.value) + evt.movementX * 0.01).toFixed(2);
+                                    source[propertyName] = parseFloat(numberInput.value);
+                                    this._forceRebuild(source, propertyName, options?.notifiers);
+                                    evt.preventDefault();
+                                }
+                            };
                         } else {
                             container.classList.add(localStyles.sliderContainer);
                             const label = root.ownerDocument!.createElement("label");