From f3a6fa527b2825e3eb8fceaa4c4d607e4608c43d Mon Sep 17 00:00:00 2001 From: Alezia Kurdis <60075796+AleziaKurdis@users.noreply.github.com> Date: Sat, 8 Aug 2020 00:14:26 -0400 Subject: [PATCH] Replace the colorSpread color-picker by a vector Replace the color picker of the attribute particle.colorSpread by a color vec3 To do this, a new type of UI field has been added "vec3rgb" to support the "red, green, blue" vector (non-Color-picker). This addresses issue #593 Fix also the broken particle texture preview that, as for 'atp:/', doesn't support 'file:/'. This will be required for issue #534 --- .../html/js/entityProperties.js | 70 +++++++++++++++++-- 1 file changed, 66 insertions(+), 4 deletions(-) diff --git a/scripts/system/create/entityProperties/html/js/entityProperties.js b/scripts/system/create/entityProperties/html/js/entityProperties.js index 182dddf817..f8f7063828 100644 --- a/scripts/system/create/entityProperties/html/js/entityProperties.js +++ b/scripts/system/create/entityProperties/html/js/entityProperties.js @@ -1133,7 +1133,13 @@ const GROUPS = [ }, { label: "Color Spread", - type: "color", + type: "vec3rgb", + vec3Type: "vec3rgb", + min: 0, + max: 255, + step: 1, + decimals: 0, + subLabels: [ "r", "g", "b" ], propertyID: "colorSpread", }, { @@ -1791,6 +1797,8 @@ function getPropertyInputElement(propertyID) { return { x: property.elNumberX.elInput, y: property.elNumberY.elInput, z: property.elNumberZ.elInput }; case 'color': return { red: property.elNumberR.elInput, green: property.elNumberG.elInput, blue: property.elNumberB.elInput }; + case 'vec3rgb': + return { red: property.elNumberR.elInput, green: property.elNumberG.elInput, blue: property.elNumberB.elInput }; case 'icon': return property.elLabel; case 'dynamic-multiselect': @@ -1889,6 +1897,12 @@ function resetProperties() { property.elNumberB.setValue("", false); break; } + case 'vec3rgb': { + property.elNumberR.setValue("", false); + property.elNumberG.setValue("", false); + property.elNumberB.setValue("", false); + break; + } case 'dropdown': { property.elInput.classList.remove('multi-diff'); property.elInput.value = ""; @@ -1995,7 +2009,7 @@ function isCurrentlyDraggingProperty(propertyName) { return properties[propertyName] && properties[propertyName].dragging === true; } -const SUPPORTED_FALLBACK_TYPES = ['number', 'number-draggable', 'rect', 'vec3', 'vec2', 'color']; +const SUPPORTED_FALLBACK_TYPES = ['number', 'number-draggable', 'rect', 'vec3', 'vec2', 'color', 'vec3rgb']; function getMultiplePropertyValue(originalPropertyName) { // if this is a compound property name (i.e. animation.running) @@ -2051,6 +2065,9 @@ function getMultiplePropertyValue(originalPropertyName) { case 'color': isPropertyNotNumber = isNaN(propertyValue.red) || propertyValue.red === null; break; + case 'vec3rgb': + isPropertyNotNumber = isNaN(propertyValue.red) || propertyValue.red === null; + break; } if (isPropertyNotNumber) { if (fallbackMultiValue === null) { @@ -2662,6 +2679,33 @@ function createVec3Property(property, elProperty) { return elResult; } +function createVec3rgbProperty(property, elProperty) { + let propertyData = property.data; + + elProperty.className = propertyData.vec3Type + " fstuple"; + + let elNumberR = createTupleNumberInput(property, propertyData.subLabels[VECTOR_ELEMENTS.X_NUMBER]); + let elNumberG = createTupleNumberInput(property, propertyData.subLabels[VECTOR_ELEMENTS.Y_NUMBER]); + let elNumberB = createTupleNumberInput(property, propertyData.subLabels[VECTOR_ELEMENTS.Z_NUMBER]); + elProperty.appendChild(elNumberR.elDiv); + elProperty.appendChild(elNumberG.elDiv); + elProperty.appendChild(elNumberB.elDiv); + + elNumberR.setValueChangeFunction(createEmitNumberPropertyComponentUpdateFunction(property, 'red')); + elNumberG.setValueChangeFunction(createEmitNumberPropertyComponentUpdateFunction(property, 'green')); + elNumberB.setValueChangeFunction(createEmitNumberPropertyComponentUpdateFunction(property, 'blue')); + + elNumberR.setMultiDiffStepFunction(createMultiDiffStepFunction(property, 'red')); + elNumberG.setMultiDiffStepFunction(createMultiDiffStepFunction(property, 'green')); + elNumberB.setMultiDiffStepFunction(createMultiDiffStepFunction(property, 'blue')); + + let elResult = []; + elResult[VECTOR_ELEMENTS.X_NUMBER] = elNumberR; + elResult[VECTOR_ELEMENTS.Y_NUMBER] = elNumberG; + elResult[VECTOR_ELEMENTS.Z_NUMBER] = elNumberB; + return elResult; +} + function createVec2Property(property, elProperty) { let propertyData = property.data; @@ -2856,7 +2900,7 @@ function createTextureProperty(property, elProperty) { let imageLoad = function(url) { elDiv.style.display = null; - if (url.slice(0, 5).toLowerCase() === "atp:/") { + if (url.slice(0, 5).toLowerCase() === "atp:/" || url.slice(0, 6).toLowerCase() === "file:/") { elImage.src = ""; elImage.style.display = "none"; elDiv.classList.remove("with-texture"); @@ -3048,6 +3092,13 @@ function createProperty(propertyData, propertyElementID, propertyName, propertyI property.elNumberB = elColor[COLOR_ELEMENTS.BLUE_NUMBER]; break; } + case 'vec3rgb': { + let elVec3 = createVec3rgbProperty(property, elProperty); + property.elNumberR = elVec3[VECTOR_ELEMENTS.X_NUMBER]; + property.elNumberG = elVec3[VECTOR_ELEMENTS.Y_NUMBER]; + property.elNumberB = elVec3[VECTOR_ELEMENTS.Z_NUMBER]; + break; + } case 'dropdown': { property.elInput = createDropdownProperty(property, propertyID, elProperty); break; @@ -4096,6 +4147,13 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) { property.elNumberB.setValue(displayColor.blue); break; } + case 'vec3rgb': { + let detailedNumberDiff = getDetailedNumberMPVDiff(propertyMultiValue, propertyData); + property.elNumberR.setValue(detailedNumberDiff.averagePerPropertyComponent.red, detailedNumberDiff.propertyComponentDiff.red); + property.elNumberG.setValue(detailedNumberDiff.averagePerPropertyComponent.green, detailedNumberDiff.propertyComponentDiff.green); + property.elNumberB.setValue(detailedNumberDiff.averagePerPropertyComponent.blue, detailedNumberDiff.propertyComponentDiff.blue); + break; + } case 'dropdown': { property.elInput.classList.toggle('multi-diff', isMultiDiffValue); property.elInput.value = isMultiDiffValue ? "" : propertyValue; @@ -4350,7 +4408,8 @@ function loaded() { properties[propertyID] = property; } if (propertyData.type === 'number' || propertyData.type === 'number-draggable' || - propertyData.type === 'vec2' || propertyData.type === 'vec3' || propertyData.type === 'rect') { + propertyData.type === 'vec2' || propertyData.type === 'vec3' || + propertyData.type === 'rect' || propertyData.type === 'vec3rgb') { propertyRangeRequests.push(propertyID); } @@ -4435,6 +4494,9 @@ function loaded() { case 'vec2': updateVectorMinMax(properties[property]); break; + case 'vec3rgb': + updateVectorMinMax(properties[property]); + break; case 'rect': updateRectMinMax(properties[property]); break;