Mirrors/overte-thingvellir
3
0
Fork 0
mirror of https://thingvellir.net/git/overte synced 2025-03-27 23:52:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace the colorSpread color-picker by a vector

Browse source 
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
This commit is contained in:
Alezia Kurdis 2020-08-08 00:14:26 -04:00 committed by GitHub
parent 797d18d59d
commit f3a6fa527b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 66 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
scripts/system/create/entityProperties/html/js/entityProperties.js
View file

@ -1133,7 +1133,13 @@ const GROUPS = [
}, },
{ {
label: "Color Spread", label: "Color Spread",
type: "color", type: "vec3rgb",
vec3Type: "vec3rgb",
min: 0,
max: 255,
step: 1,
decimals: 0,
subLabels: [ "r", "g", "b" ],
propertyID: "colorSpread", propertyID: "colorSpread",
}, },
{ {
@ -1791,6 +1797,8 @@ function getPropertyInputElement(propertyID) {
return { x: property.elNumberX.elInput, y: property.elNumberY.elInput, z: property.elNumberZ.elInput }; return { x: property.elNumberX.elInput, y: property.elNumberY.elInput, z: property.elNumberZ.elInput };
case 'color': case 'color':
return { red: property.elNumberR.elInput, green: property.elNumberG.elInput, blue: property.elNumberB.elInput }; 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': case 'icon':
return property.elLabel; return property.elLabel;
case 'dynamic-multiselect': case 'dynamic-multiselect':
@ -1889,6 +1897,12 @@ function resetProperties() {
property.elNumberB.setValue("", false); property.elNumberB.setValue("", false);
break; break;
} }
case 'vec3rgb': {
property.elNumberR.setValue("", false);
property.elNumberG.setValue("", false);
property.elNumberB.setValue("", false);
break;
}
case 'dropdown': { case 'dropdown': {
property.elInput.classList.remove('multi-diff'); property.elInput.classList.remove('multi-diff');
property.elInput.value = ""; property.elInput.value = "";
@ -1995,7 +2009,7 @@ function isCurrentlyDraggingProperty(propertyName) {
return properties[propertyName] && properties[propertyName].dragging === true; 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) { function getMultiplePropertyValue(originalPropertyName) {
// if this is a compound property name (i.e. animation.running) // if this is a compound property name (i.e. animation.running)
@ -2051,6 +2065,9 @@ function getMultiplePropertyValue(originalPropertyName) {
case 'color': case 'color':
isPropertyNotNumber = isNaN(propertyValue.red) || propertyValue.red === null; isPropertyNotNumber = isNaN(propertyValue.red) || propertyValue.red === null;
break; break;
case 'vec3rgb':
isPropertyNotNumber = isNaN(propertyValue.red) || propertyValue.red === null;
break;
} }
if (isPropertyNotNumber) { if (isPropertyNotNumber) {
if (fallbackMultiValue === null) { if (fallbackMultiValue === null) {
@ -2662,6 +2679,33 @@ function createVec3Property(property, elProperty) {
return elResult; 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) { function createVec2Property(property, elProperty) {
let propertyData = property.data; let propertyData = property.data;
@ -2856,7 +2900,7 @@ function createTextureProperty(property, elProperty) {
let imageLoad = function(url) { let imageLoad = function(url) {
elDiv.style.display = null; 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.src = "";
elImage.style.display = "none"; elImage.style.display = "none";
elDiv.classList.remove("with-texture"); elDiv.classList.remove("with-texture");
@ -3048,6 +3092,13 @@ function createProperty(propertyData, propertyElementID, propertyName, propertyI
property.elNumberB = elColor[COLOR_ELEMENTS.BLUE_NUMBER]; property.elNumberB = elColor[COLOR_ELEMENTS.BLUE_NUMBER];
break; 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': { case 'dropdown': {
property.elInput = createDropdownProperty(property, propertyID, elProperty); property.elInput = createDropdownProperty(property, propertyID, elProperty);
break; break;
@ -4096,6 +4147,13 @@ function handleEntitySelectionUpdate(selections, isPropertiesToolUpdate) {
property.elNumberB.setValue(displayColor.blue); property.elNumberB.setValue(displayColor.blue);
break; 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': { case 'dropdown': {
property.elInput.classList.toggle('multi-diff', isMultiDiffValue); property.elInput.classList.toggle('multi-diff', isMultiDiffValue);
property.elInput.value = isMultiDiffValue ? "" : propertyValue; property.elInput.value = isMultiDiffValue ? "" : propertyValue;
@ -4350,7 +4408,8 @@ function loaded() {
properties[propertyID] = property; properties[propertyID] = property;
} }
if (propertyData.type === 'number' || propertyData.type === 'number-draggable' || 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); propertyRangeRequests.push(propertyID);
} }
@ -4435,6 +4494,9 @@ function loaded() {
case 'vec2': case 'vec2':
updateVectorMinMax(properties[property]); updateVectorMinMax(properties[property]);
break; break;
case 'vec3rgb':
updateVectorMinMax(properties[property]);
break;
case 'rect': case 'rect':
updateRectMinMax(properties[property]); updateRectMinMax(properties[property]);
break; break;