Mirrors/overte-AleziaKurdis
3
0
Fork 0
mirror of https://github.com/AleziaKurdis/overte.git synced 2025-08-17 06:12:14 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Style color picker button

Browse source
This commit is contained in:
David Rowe 2017-08-28 12:06:26 +12:00
parent c8381f32bb
commit 8dd06bc270
3 changed files with 105 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
scripts/vr-edit/assets/tools/color/pick-color-label.svg Normal file
View file

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
<title>noun_792623</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Color-Tool" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Color-Tool---Default" transform="translate(-203.000000, -2070.000000)" fill-rule="nonzero" fill="#E3E3E3">
<g id="noun_792623" transform="translate(202.000000, 2070.000000)">
<path d="M82.9252,65.5368 C82.9852,65.598 83.0488,65.6556 83.1088,65.7132 L40.18,108.6432 C33.5008,115.32 19.054,114.1032 14.2552,118.9008 C9.46,123.6972 -2.6948,111.5316 2.098,106.7412 C6.8884,101.9496 4.672,88.5024 12.3544,80.8188 L55.282,37.89 C55.3408,37.9524 55.3996,38.0148 55.4596,38.0748 L82.9252,65.5368 Z M101.9548,49.4016 L114.7132,36.6432 C123.0952,28.2612 123.0952,14.67 114.712,6.2868 C106.3312,-2.0952 92.7376,-2.0952 84.3556,6.2868 L71.596,19.0452 C67.8832,15.54 62.0296,15.6024 58.3948,19.2384 C54.7588,22.8732 54.6976,28.7244 58.2028,32.4396 C58.2664,32.5068 88.492,62.7324 88.5604,62.796 C92.2756,66.3024 98.1268,66.2388 101.7628,62.604 C105.3976,58.9692 105.4612,53.1168 101.9548,49.4016 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

92
scripts/vr-edit/modules/toolsMenu.js
View file

@ -40,6 +40,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
optionsColorData = [], // Uses same index values as optionsOverlays.
optionsEnabled = [],
optionsSettings = {},
optionsToggles = {}, // For toggle buttons without a setting.
highlightOverlay,
@ -281,7 +282,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
color: UIT.colors.white
}
},
"toggleButton": {
"toggleButton": { // TODO: Delete
overlay: "cube",
properties: {
dimensions: { x: 0.03, y: 0.03, z: 0.01 },
@ -294,6 +295,29 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
onColor: UI_HIGHLIGHT_COLOR,
offColor: UI_BASE_COLOR
},
"newToggleButton": { // TODO: Rename to "toggleButton".
overlay: "cube",
properties: {
dimensions: UIT.dimensions.buttonDimensions,
localRotation: Quat.ZERO,
color: UIT.colors.baseGrayShadow,
alpha: 1.0,
solid: true,
ignoreRayIntersection: false,
visible: true
},
onColor: UIT.colors.greenShadow,
offColor: UIT.colors.baseGrayShadow,
newLabel: { // TODO: Rename to "label".
// Relative to newToggleButton.
localPosition: {
x: 0,
y: 0,
z: UIT.dimensions.buttonDimensions.z / 2 + UIT.dimensions.imageOverlayOffset
},
color: UIT.colors.white
}
},
"swatch": {
overlay: "cube",
properties: {
@ -494,7 +518,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
},
BUTTON_UI_ELEMENTS = ["button", "newButton", "menuButton", "toggleButton", "swatch"],
BUTTON_UI_ELEMENTS = ["button", "newButton", "menuButton", "toggleButton", "newToggleButton", "swatch"],
BUTTON_PRESS_DELTA = { x: 0, y: 0, z: -0.8 * UIT.dimensions.buttonDimensions.z },
SLIDER_UI_ELEMENTS = ["barSlider", "imageSlider"],
@ -708,15 +732,17 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
},
{
id: "pickColor",
type: "button",
type: "newToggleButton",
properties: {
dimensions: { x: 0.0294, y: 0.0280, z: UIT.dimensions.buttonDimensions.z },
localPosition: { x: -0.0935, y: -0.064, z: UIT.dimensions.panel.z / 2 + UIT.dimensions.buttonDimensions.z / 2 },
color: { red: 255, green: 255, blue: 255 }
},
label: " PICK",
callback: {
method: "pickColorTool"
newLabel: {
url: "../assets/tools/color/pick-color-label.svg",
scale: 0.0120
},
command: {
method: "togglePickColor"
}
},
{
@ -1511,7 +1537,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
yDelta: 0.004,
zDimension: 0.001,
properties: {
localPosition: { x: 0, y: 0, z: 0.003 },
localPosition: { x: 0, y: 0, z: 0.001 },
localRotation: Quat.ZERO,
color: { red: 255, green: 255, blue: 0 },
alpha: 0.8,
@ -1533,6 +1559,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
highlightedSourceItems,
isHighlightingButton,
isHighlightingNewButton, // TODO: Delete when no longer needed.
isHighlightingNewToggleButton, // TODO: Rename.
isHighlightingMenuButton,
isHighlightingSlider,
isHighlightingColorCircle,
@ -1767,7 +1794,10 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
uiCommandCallback(optionsItems[i].setting.callback, value);
}
}
} else if (optionsItems[i].type === "newToggleButton") {
optionsToggles[optionsItems[i].id] = false; // Default to off.
}
optionsOverlays.push(Overlays.addOverlay(UI_ELEMENTS[optionsItems[i].type].overlay, properties));
optionsOverlaysIDs.push(optionsItems[i].id);
if (optionsItems[i].label) {
@ -2184,7 +2214,23 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
}
break;
case "togglePickColor":
optionsToggles.pickColor = !optionsToggles.pickColor;
index = optionsOverlaysIDs.indexOf("pickColor");
Overlays.editOverlay(optionsOverlays[index], {
color: optionsToggles.pickColor
? UI_ELEMENTS[optionsItems[index].type].onColor
: UI_ELEMENTS[optionsItems[index].type].offColor
});
uiCommandCallback("pickColorTool", optionsToggles.pickColor);
break;
case "setColorFromPick":
optionsToggles.pickColor = false;
index = optionsOverlaysIDs.indexOf("pickColor");
Overlays.editOverlay(optionsOverlays[index], {
color: UI_ELEMENTS[optionsItems[index].type].offColor
});
setCurrentColor(parameter);
setColorPicker(parameter);
break;
@ -2440,7 +2486,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
visible: false
});
} else if (isHighlightingNewButton) {
// Unhighlight button.
// Unhighlight old button.
if (highlightedSourceItems[highlightedItem].enabledColor !== undefined && optionsEnabled[highlightedItem]) {
color = highlightedSourceItems[highlightedItem].enabledColor;
} else {
@ -2451,6 +2497,14 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
Overlays.editOverlay(highlightedSourceOverlays[highlightedItem], {
color: color
});
} else if (isHighlightingNewToggleButton) {
// Unhighlight old button.
color = optionsToggles[highlightedSourceItems[highlightedItem].id]
? UI_ELEMENTS.newToggleButton.onColor
: UI_ELEMENTS.newToggleButton.offColor;
Overlays.editOverlay(highlightedSourceOverlays[highlightedItem], {
color: color
});
} else if (isHighlightingSlider || isHighlightingColorCircle) {
// Lower old slider or color circle.
Overlays.editOverlay(highlightedSourceOverlays[highlightedItem], {
@ -2462,6 +2516,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
highlightedItems = intersectionItems;
isHighlightingButton = BUTTON_UI_ELEMENTS.indexOf(intersectionItems[highlightedItem].type) !== NONE;
isHighlightingNewButton = intersectionItems[highlightedItem].type === "newButton";
isHighlightingNewToggleButton = intersectionItems[highlightedItem].type === "newToggleButton";
isHighlightingMenuButton = intersectionItems[highlightedItem].type === "menuButton";
isHighlightingSlider = SLIDER_UI_ELEMENTS.indexOf(intersectionItems[highlightedItem].type) !== NONE;
isHighlightingColorCircle = COLOR_CIRCLE_UI_ELEMENTS.indexOf(intersectionItems[highlightedItem].type) !== NONE;
@ -2501,7 +2556,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
color: HIGHLIGHT_PROPERTIES.properties.color,
visible: true
});
} else if (isHighlightingNewButton) {
} else if (isHighlightingNewButton || isHighlightingNewToggleButton) {
if (intersectionEnabled[highlightedItem]) {
Overlays.editOverlay(intersectionOverlays[highlightedItem], {
color: intersectionItems[highlightedItem].highlightColor !== undefined
@ -2546,6 +2601,14 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
Overlays.editOverlay(highlightedSourceOverlays[highlightedItem], {
color: color
});
} else if (isHighlightingNewToggleButton) {
// Unhighlight old button.
color = optionsToggles[highlightedSourceItems[highlightedItem].id]
? UI_ELEMENTS.newToggleButton.onColor
: UI_ELEMENTS.newToggleButton.offColor;
Overlays.editOverlay(highlightedSourceOverlays[highlightedItem], {
color: color
});
} else if (isHighlightingSlider || isHighlightingColorCircle) {
// Lower slider or color circle.
Overlays.editOverlay(highlightedSourceOverlays[highlightedItem], {
@ -2556,6 +2619,7 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
highlightedItem = NONE;
isHighlightingButton = false;
isHighlightingNewButton = false;
isHighlightingNewToggleButton = false;
isHighlightingMenuButton = false;
isHighlightingSlider = false;
isHighlightingColorCircle = false;
@ -2821,10 +2885,18 @@ ToolsMenu = function (side, leftInputs, rightInputs, uiCommandCallback) {
highlightedItem = NONE;
highlightedSourceOverlays = null;
isHighlightingButton = false;
isHighlightingNewButton = false;
isHighlightingNewToggleButton = false;
isHighlightingMenuButton = false;
isHighlightingSlider = false;
isHighlightingColorCircle = false;
isHighlightingPicklist = false;
for (id in optionsToggles) {
if (optionsToggles.hasOwnProperty(id)) {
optionsToggles[id] = false;
}
}
isPicklistOpen = false;
pressedItem = null;
pressedSource = null;

13
scripts/vr-edit/vr-edit.js
View file

@ -1352,10 +1352,15 @@
ui.updateUIEntities();
break;
case "pickColorTool":
grouping.clear();
toolSelected = TOOL_PICK_COLOR;
ui.setToolIcon(ui.COLOR_TOOL);
ui.updateUIEntities();
if (parameter) {
grouping.clear();
toolSelected = TOOL_PICK_COLOR;
ui.updateUIEntities();
} else {
grouping.clear();
toolSelected = TOOL_COLOR;
ui.updateUIEntities();
}
break;
case "physicsTool":
grouping.clear();