@iwer/devui 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/iwer-devui.js +384 -132
- package/build/iwer-devui.min.js +69 -59
- package/build/iwer-devui.module.js +384 -132
- package/build/iwer-devui.module.min.js +63 -53
- package/lib/components/controller.d.ts +18 -0
- package/lib/components/controller.d.ts.map +1 -0
- package/lib/components/controller.js +104 -0
- package/lib/components/controller.js.map +1 -0
- package/lib/components/controls.d.ts +5 -9
- package/lib/components/controls.d.ts.map +1 -1
- package/lib/components/controls.js +14 -83
- package/lib/components/controls.js.map +1 -1
- package/lib/components/hand.d.ts +18 -0
- package/lib/components/hand.d.ts.map +1 -0
- package/lib/components/hand.js +51 -0
- package/lib/components/hand.js.map +1 -0
- package/lib/components/header.d.ts.map +1 -1
- package/lib/components/header.js +13 -2
- package/lib/components/header.js.map +1 -1
- package/lib/components/icons.d.ts +4 -0
- package/lib/components/icons.d.ts.map +1 -1
- package/lib/components/icons.js +10 -1
- package/lib/components/icons.js.map +1 -1
- package/lib/components/mapper.d.ts +3 -2
- package/lib/components/mapper.d.ts.map +1 -1
- package/lib/components/mapper.js +8 -2
- package/lib/components/mapper.js.map +1 -1
- package/lib/components/pinch.d.ts +16 -0
- package/lib/components/pinch.d.ts.map +1 -0
- package/lib/components/pinch.js +94 -0
- package/lib/components/pinch.js.map +1 -0
- package/lib/components/pose.d.ts +16 -0
- package/lib/components/pose.d.ts.map +1 -0
- package/lib/components/pose.js +62 -0
- package/lib/components/pose.js.map +1 -0
- package/lib/components/styled.d.ts +6 -0
- package/lib/components/styled.d.ts.map +1 -1
- package/lib/components/styled.js +19 -15
- package/lib/components/styled.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib/scene.d.ts.map +1 -1
- package/lib/scene.js +5 -3
- package/lib/scene.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -2
package/build/iwer-devui.js
CHANGED
|
@@ -4740,7 +4740,6 @@
|
|
|
4740
4740
|
border-radius: ${ControlButtonStyles.radiusSolo};
|
|
4741
4741
|
}
|
|
4742
4742
|
`;
|
|
4743
|
-
Button.defaultProps = { $reverse: false };
|
|
4744
4743
|
const HeaderButtonsContainer = dt.div `
|
|
4745
4744
|
padding: 2px;
|
|
4746
4745
|
display: flex;
|
|
@@ -4822,7 +4821,6 @@
|
|
|
4822
4821
|
margin-bottom: 0;
|
|
4823
4822
|
}
|
|
4824
4823
|
`;
|
|
4825
|
-
ButtonContainer.defaultProps = { $reverse: false };
|
|
4826
4824
|
const ButtonGroup = dt.div `
|
|
4827
4825
|
display: flex;
|
|
4828
4826
|
flex-direction: ${({ $reverse }) => ($reverse ? 'row-reverse' : 'row')};
|
|
@@ -4832,7 +4830,6 @@
|
|
|
4832
4830
|
margin: ${({ $reverse }) => ($reverse ? '0 5px 0 0' : '0 0 0 5px')};
|
|
4833
4831
|
gap: 3px;
|
|
4834
4832
|
`;
|
|
4835
|
-
ButtonGroup.defaultProps = { $reverse: false };
|
|
4836
4833
|
dt.button `
|
|
4837
4834
|
background-color: rgba(255, 255, 255, 0.3);
|
|
4838
4835
|
border: none;
|
|
@@ -4895,7 +4892,6 @@
|
|
|
4895
4892
|
border-radius: ${ControlButtonStyles.radiusMiddle};
|
|
4896
4893
|
}
|
|
4897
4894
|
`;
|
|
4898
|
-
RangeSelector$1.defaultProps = { $reverse: false };
|
|
4899
4895
|
dt.div `
|
|
4900
4896
|
display: flex;
|
|
4901
4897
|
flex-direction: column;
|
|
@@ -4910,14 +4906,24 @@
|
|
|
4910
4906
|
justify-content: center;
|
|
4911
4907
|
`;
|
|
4912
4908
|
const FAIcon = dt(FontAwesomeIcon) `
|
|
4913
|
-
height: ${({ $size }) => `${$size}px`};
|
|
4914
|
-
min-height: ${({ $size }) => `${$size}px`};
|
|
4915
|
-
max-height: ${({ $size }) => `${$size}px`};
|
|
4916
|
-
width: ${({ $size }) => `${$size}px`};
|
|
4917
|
-
min-width: ${({ $size }) => `${$size}px`};
|
|
4918
|
-
max-width: ${({ $size }) => `${$size}px`};
|
|
4909
|
+
height: ${({ $size = 14 }) => `${$size}px`};
|
|
4910
|
+
min-height: ${({ $size = 14 }) => `${$size}px`};
|
|
4911
|
+
max-height: ${({ $size = 14 }) => `${$size}px`};
|
|
4912
|
+
width: ${({ $size = 14 }) => `${$size}px`};
|
|
4913
|
+
min-width: ${({ $size = 14 }) => `${$size}px`};
|
|
4914
|
+
max-width: ${({ $size = 14 }) => `${$size}px`};
|
|
4915
|
+
transform: ${({ $reverse }) => ($reverse ? 'scaleX(-1)' : 'unset')};
|
|
4916
|
+
`;
|
|
4917
|
+
const FAControlIcon = dt(FontAwesomeIcon) `
|
|
4918
|
+
height: 18px;
|
|
4919
|
+
min-height: 18px;
|
|
4920
|
+
max-height: 18px;
|
|
4921
|
+
width: 18px;
|
|
4922
|
+
min-width: 18px;
|
|
4923
|
+
max-width: 18px;
|
|
4924
|
+
margin: 6px;
|
|
4925
|
+
transform: ${({ $reverse }) => ($reverse ? 'scaleX(-1)' : 'unset')};
|
|
4919
4926
|
`;
|
|
4920
|
-
FAIcon.defaultProps = { $size: 14 };
|
|
4921
4927
|
const ControlPanel = dt.div `
|
|
4922
4928
|
position: fixed;
|
|
4923
4929
|
padding: 5px;
|
|
@@ -4935,13 +4941,12 @@
|
|
|
4935
4941
|
flex-direction: column;
|
|
4936
4942
|
`;
|
|
4937
4943
|
const SectionBreak = dt.hr `
|
|
4938
|
-
width: ${({ $horizontal }) => ($horizontal ? 'unset' : '1px')};
|
|
4939
|
-
height: ${({ $horizontal }) => ($horizontal ? '1px' : 'unset')};
|
|
4944
|
+
width: ${({ $horizontal = true }) => ($horizontal ? 'unset' : '1px')};
|
|
4945
|
+
height: ${({ $horizontal = true }) => ($horizontal ? '1px' : 'unset')};
|
|
4940
4946
|
background-color: ${Colors.panelBorder};
|
|
4941
4947
|
margin: 5px 3px;
|
|
4942
4948
|
border: none;
|
|
4943
4949
|
`;
|
|
4944
|
-
SectionBreak.defaultProps = { $horizontal: true };
|
|
4945
4950
|
const PanelHeaderButton = dt.button `
|
|
4946
4951
|
background-color: transparent;
|
|
4947
4952
|
border: none;
|
|
@@ -4967,7 +4972,6 @@
|
|
|
4967
4972
|
outline: none;
|
|
4968
4973
|
}
|
|
4969
4974
|
`;
|
|
4970
|
-
PanelHeaderButton.defaultProps = { $isRed: false };
|
|
4971
4975
|
const ValuesContainer = dt.div `
|
|
4972
4976
|
display: flex;
|
|
4973
4977
|
flex-direction: row;
|
|
@@ -5004,6 +5008,137 @@
|
|
|
5004
5008
|
font-size: 10px;
|
|
5005
5009
|
`;
|
|
5006
5010
|
|
|
5011
|
+
const faRightFromBracket = {
|
|
5012
|
+
prefix: 'fas',
|
|
5013
|
+
iconName: 'right-from-bracket',
|
|
5014
|
+
icon: [512, 512, ["sign-out-alt"], "f2f5", "M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"]
|
|
5015
|
+
};
|
|
5016
|
+
const faFingerprint = {
|
|
5017
|
+
prefix: 'fas',
|
|
5018
|
+
iconName: 'fingerprint',
|
|
5019
|
+
icon: [512, 512, [], "f577", "M48 256C48 141.1 141.1 48 256 48c63.1 0 119.6 28.1 157.8 72.5c8.6 10.1 23.8 11.2 33.8 2.6s11.2-23.8 2.6-33.8C403.3 34.6 333.7 0 256 0C114.6 0 0 114.6 0 256l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40zm458.5-52.9c-2.7-13-15.5-21.3-28.4-18.5s-21.3 15.5-18.5 28.4c2.9 13.9 4.5 28.3 4.5 43.1l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40c0-18.1-1.9-35.8-5.5-52.9zM256 80c-19 0-37.4 3-54.5 8.6c-15.2 5-18.7 23.7-8.3 35.9c7.1 8.3 18.8 10.8 29.4 7.9c10.6-2.9 21.8-4.4 33.4-4.4c70.7 0 128 57.3 128 128l0 24.9c0 25.2-1.5 50.3-4.4 75.3c-1.7 14.6 9.4 27.8 24.2 27.8c11.8 0 21.9-8.6 23.3-20.3c3.3-27.4 5-55 5-82.7l0-24.9c0-97.2-78.8-176-176-176zM150.7 148.7c-9.1-10.6-25.3-11.4-33.9-.4C93.7 178 80 215.4 80 256l0 24.9c0 24.2-2.6 48.4-7.8 71.9C68.8 368.4 80.1 384 96.1 384c10.5 0 19.9-7 22.2-17.3c6.4-28.1 9.7-56.8 9.7-85.8l0-24.9c0-27.2 8.5-52.4 22.9-73.1c7.2-10.4 8-24.6-.2-34.2zM256 160c-53 0-96 43-96 96l0 24.9c0 35.9-4.6 71.5-13.8 106.1c-3.8 14.3 6.7 29 21.5 29c9.5 0 17.9-6.2 20.4-15.4c10.5-39 15.9-79.2 15.9-119.7l0-24.9c0-28.7 23.3-52 52-52s52 23.3 52 52l0 24.9c0 36.3-3.5 72.4-10.4 107.9c-2.7 13.9 7.7 27.2 21.8 27.2c10.2 0 19-7 21-17c7.7-38.8 11.6-78.3 11.6-118.1l0-24.9c0-53-43-96-96-96zm24 96c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 24.9c0 59.9-11 119.3-32.5 175.2l-5.9 15.3c-4.8 12.4 1.4 26.3 13.8 31s26.3-1.4 31-13.8l5.9-15.3C267.9 411.9 280 346.7 280 280.9l0-24.9z"]
|
|
5020
|
+
};
|
|
5021
|
+
const faCaretRight = {
|
|
5022
|
+
prefix: 'fas',
|
|
5023
|
+
iconName: 'caret-right',
|
|
5024
|
+
icon: [256, 512, [], "f0da", "M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"]
|
|
5025
|
+
};
|
|
5026
|
+
const faCaretLeft = {
|
|
5027
|
+
prefix: 'fas',
|
|
5028
|
+
iconName: 'caret-left',
|
|
5029
|
+
icon: [256, 512, [], "f0d9", "M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"]
|
|
5030
|
+
};
|
|
5031
|
+
const faGamepad = {
|
|
5032
|
+
prefix: 'fas',
|
|
5033
|
+
iconName: 'gamepad',
|
|
5034
|
+
icon: [640, 512, [], "f11b", "M192 64C86 64 0 150 0 256S86 448 192 448l256 0c106 0 192-86 192-192s-86-192-192-192L192 64zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24l0 32 32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0 0 32c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-32-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l32 0 0-32z"]
|
|
5035
|
+
};
|
|
5036
|
+
const faHand = {
|
|
5037
|
+
prefix: 'fas',
|
|
5038
|
+
iconName: 'hand',
|
|
5039
|
+
icon: [512, 512, [129306, 9995, "hand-paper"], "f256", "M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-176c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 272c0 1.5 0 3.1 .1 4.6L67.6 283c-16-15.2-41.3-14.6-56.6 1.4s-14.6 41.3 1.4 56.6L124.8 448c43.1 41.1 100.4 64 160 64l19.2 0c97.2 0 176-78.8 176-176l0-208c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-176c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 176c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208z"]
|
|
5040
|
+
};
|
|
5041
|
+
const faPlug = {
|
|
5042
|
+
prefix: 'fas',
|
|
5043
|
+
iconName: 'plug',
|
|
5044
|
+
icon: [384, 512, [128268], "f1e6", "M96 0C78.3 0 64 14.3 64 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l0 32c0 77.4 55 142 128 156.8l0 67.2c0 17.7 14.3 32 32 32s32-14.3 32-32l0-67.2C297 398 352 333.4 352 256l0-32c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"]
|
|
5045
|
+
};
|
|
5046
|
+
const faBan = {
|
|
5047
|
+
prefix: 'fas',
|
|
5048
|
+
iconName: 'ban',
|
|
5049
|
+
icon: [512, 512, [128683, "cancel"], "f05e", "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"]
|
|
5050
|
+
};
|
|
5051
|
+
const faArrowRightToBracket = {
|
|
5052
|
+
prefix: 'fas',
|
|
5053
|
+
iconName: 'arrow-right-to-bracket',
|
|
5054
|
+
icon: [512, 512, ["sign-in"], "f090", "M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"]
|
|
5055
|
+
};
|
|
5056
|
+
const faCaretUp = {
|
|
5057
|
+
prefix: 'fas',
|
|
5058
|
+
iconName: 'caret-up',
|
|
5059
|
+
icon: [320, 512, [], "f0d8", "M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"]
|
|
5060
|
+
};
|
|
5061
|
+
const faRotateLeft = {
|
|
5062
|
+
prefix: 'fas',
|
|
5063
|
+
iconName: 'rotate-left',
|
|
5064
|
+
icon: [512, 512, ["rotate-back", "rotate-backward", "undo-alt"], "f2ea", "M48.5 224L40 224c-13.3 0-24-10.7-24-24L16 72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8L48.5 224z"]
|
|
5065
|
+
};
|
|
5066
|
+
const faCirclePlay = {
|
|
5067
|
+
prefix: 'fas',
|
|
5068
|
+
iconName: 'circle-play',
|
|
5069
|
+
icon: [512, 512, [61469, "play-circle"], "f144", "M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"]
|
|
5070
|
+
};
|
|
5071
|
+
const faHandScissors = {
|
|
5072
|
+
prefix: 'fas',
|
|
5073
|
+
iconName: 'hand-scissors',
|
|
5074
|
+
icon: [512, 512, [], "f257", "M40 208c-22.1 0-40 17.9-40 40s17.9 40 40 40l180.2 0c-7.6 8.5-12.2 19.7-12.2 32c0 25.3 19.5 46 44.3 47.9c-7.7 8.5-12.3 19.8-12.3 32.1c0 26.5 21.5 48 48 48l32 0 64 0c70.7 0 128-57.3 128-128l0-113.1c0-40.2-16-78.8-44.4-107.3C444.8 76.8 413.9 64 381.7 64L336 64c-21.3 0-39.3 13.9-45.6 33.1l74.5 23.7c8.4 2.7 13.1 11.7 10.4 20.1s-11.7 13.1-20.1 10.4L288 129.9c0 0 0 .1 0 .1L84 65.8C62.9 59.2 40.5 70.9 33.8 92s5.1 43.5 26.2 50.2L269.5 208 40 208z"]
|
|
5075
|
+
};
|
|
5076
|
+
const faStreetView = {
|
|
5077
|
+
prefix: 'fas',
|
|
5078
|
+
iconName: 'street-view',
|
|
5079
|
+
icon: [512, 512, [], "f21d", "M320 64A64 64 0 1 0 192 64a64 64 0 1 0 128 0zm-96 96c-35.3 0-64 28.7-64 64l0 48c0 17.7 14.3 32 32 32l1.8 0 11.1 99.5c1.8 16.2 15.5 28.5 31.8 28.5l38.7 0c16.3 0 30-12.3 31.8-28.5L318.2 304l1.8 0c17.7 0 32-14.3 32-32l0-48c0-35.3-28.7-64-64-64l-64 0zM132.3 394.2c13-2.4 21.7-14.9 19.3-27.9s-14.9-21.7-27.9-19.3c-32.4 5.9-60.9 14.2-82 24.8c-10.5 5.3-20.3 11.7-27.8 19.6C6.4 399.5 0 410.5 0 424c0 21.4 15.5 36.1 29.1 45c14.7 9.6 34.3 17.3 56.4 23.4C130.2 504.7 190.4 512 256 512s125.8-7.3 170.4-19.6c22.1-6.1 41.8-13.8 56.4-23.4c13.7-8.9 29.1-23.6 29.1-45c0-13.5-6.4-24.5-14-32.6c-7.5-7.9-17.3-14.3-27.8-19.6c-21-10.6-49.5-18.9-82-24.8c-13-2.4-25.5 6.3-27.9 19.3s6.3 25.5 19.3 27.9c30.2 5.5 53.7 12.8 69 20.5c3.2 1.6 5.8 3.1 7.9 4.5c3.6 2.4 3.6 7.2 0 9.6c-8.8 5.7-23.1 11.8-43 17.3C374.3 457 318.5 464 256 464s-118.3-7-157.7-17.9c-19.9-5.5-34.2-11.6-43-17.3c-3.6-2.4-3.6-7.2 0-9.6c2.1-1.4 4.8-2.9 7.9-4.5c15.3-7.7 38.8-14.9 69-20.5z"]
|
|
5080
|
+
};
|
|
5081
|
+
const faGear = {
|
|
5082
|
+
prefix: 'fas',
|
|
5083
|
+
iconName: 'gear',
|
|
5084
|
+
icon: [512, 512, [9881, "cog"], "f013", "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"]
|
|
5085
|
+
};
|
|
5086
|
+
const faCaretDown = {
|
|
5087
|
+
prefix: 'fas',
|
|
5088
|
+
iconName: 'caret-down',
|
|
5089
|
+
icon: [320, 512, [], "f0d7", "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"]
|
|
5090
|
+
};
|
|
5091
|
+
const faDeleteLeft = {
|
|
5092
|
+
prefix: 'fas',
|
|
5093
|
+
iconName: 'delete-left',
|
|
5094
|
+
icon: [576, 512, [9003, "backspace"], "f55a", "M576 128c0-35.3-28.7-64-64-64L205.3 64c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7L512 448c35.3 0 64-28.7 64-64l0-256zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
|
|
5095
|
+
};
|
|
5096
|
+
const faBug = {
|
|
5097
|
+
prefix: 'fas',
|
|
5098
|
+
iconName: 'bug',
|
|
5099
|
+
icon: [512, 512, [], "f188", "M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"]
|
|
5100
|
+
};
|
|
5101
|
+
const faAngleUp = {
|
|
5102
|
+
prefix: 'fas',
|
|
5103
|
+
iconName: 'angle-up',
|
|
5104
|
+
icon: [448, 512, [8963], "f106", "M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"]
|
|
5105
|
+
};
|
|
5106
|
+
const faChevronLeft = {
|
|
5107
|
+
prefix: 'fas',
|
|
5108
|
+
iconName: 'chevron-left',
|
|
5109
|
+
icon: [320, 512, [9001], "f053", "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"]
|
|
5110
|
+
};
|
|
5111
|
+
const faHandLizard = {
|
|
5112
|
+
prefix: 'fas',
|
|
5113
|
+
iconName: 'hand-lizard',
|
|
5114
|
+
icon: [512, 512, [], "f258", "M0 112C0 85.5 21.5 64 48 64l112 0 80 0 46.5 0c36.8 0 71.2 18 92.1 48.2l113.5 164c13 18.7 19.9 41 19.9 63.8l0 12 0 16 0 48c0 17.7-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32l0-13.8L273.9 352 240 352l-80 0-48 0c-26.5 0-48-21.5-48-48s21.5-48 48-48l48 0 80 0c26.5 0 48-21.5 48-48s-21.5-48-48-48l-80 0L48 160c-26.5 0-48-21.5-48-48z"]
|
|
5115
|
+
};
|
|
5116
|
+
const faChevronRight = {
|
|
5117
|
+
prefix: 'fas',
|
|
5118
|
+
iconName: 'chevron-right',
|
|
5119
|
+
icon: [320, 512, [9002], "f054", "M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"]
|
|
5120
|
+
};
|
|
5121
|
+
const faVrCardboard = {
|
|
5122
|
+
prefix: 'fas',
|
|
5123
|
+
iconName: 'vr-cardboard',
|
|
5124
|
+
icon: [640, 512, [], "f729", "M576 64L64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l120.4 0c24.2 0 46.4-13.7 57.2-35.4l32-64c8.8-17.5 26.7-28.6 46.3-28.6s37.5 11.1 46.3 28.6l32 64c10.8 21.7 33 35.4 57.2 35.4L576 448c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64zM96 240a64 64 0 1 1 128 0A64 64 0 1 1 96 240zm384-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"]
|
|
5125
|
+
};
|
|
5126
|
+
const faArrowTurnDown = {
|
|
5127
|
+
prefix: 'fas',
|
|
5128
|
+
iconName: 'arrow-turn-down',
|
|
5129
|
+
icon: [384, 512, ["level-down"], "f149", "M32 64C14.3 64 0 49.7 0 32S14.3 0 32 0l96 0c53 0 96 43 96 96l0 306.7 73.4-73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 402.7 160 96c0-17.7-14.3-32-32-32L32 64z"]
|
|
5130
|
+
};
|
|
5131
|
+
const faCircleXmark = {
|
|
5132
|
+
prefix: 'fas',
|
|
5133
|
+
iconName: 'circle-xmark',
|
|
5134
|
+
icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
|
|
5135
|
+
};
|
|
5136
|
+
const faVideo = {
|
|
5137
|
+
prefix: 'fas',
|
|
5138
|
+
iconName: 'video',
|
|
5139
|
+
icon: [576, 512, ["video-camera"], "f03d", "M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1l0-17.1 0-128 0-17.1 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"]
|
|
5140
|
+
};
|
|
5141
|
+
|
|
5007
5142
|
const IconSize = ControlButtonStyles.height;
|
|
5008
5143
|
const ButtonX = ({ scale = 1.2 }) => (jsxRuntimeExports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: IconSize, height: IconSize, fill: "none", transform: `scale(${scale}, ${scale})`, children: [jsxRuntimeExports.jsx("path", { fill: "#fff", fillRule: "evenodd", d: "M7 13.125a7 7 0 1 0 14 0v1.75a7 7 0 0 1-14 0v-1.75Z", clipRule: "evenodd", style: {
|
|
5009
5144
|
fill: '#fff',
|
|
@@ -5205,6 +5340,10 @@
|
|
|
5205
5340
|
fill: '#fff',
|
|
5206
5341
|
fillOpacity: 1,
|
|
5207
5342
|
} })] }));
|
|
5343
|
+
const PoseL = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": true }));
|
|
5344
|
+
const PoseR = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": false }));
|
|
5345
|
+
const PinchL = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": true }));
|
|
5346
|
+
const PinchR = () => (jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": false }));
|
|
5208
5347
|
// Create a mapping of buttonId to icon component
|
|
5209
5348
|
const buttonIdToIcon = {
|
|
5210
5349
|
'x-button-left': ButtonX,
|
|
@@ -5216,6 +5355,8 @@
|
|
|
5216
5355
|
'thumbstick-down-left': ThumbstickLDown,
|
|
5217
5356
|
'thumbstick-right-left': ThumbstickLRight,
|
|
5218
5357
|
'thumbstick-left-left': ThumbstickLLeft,
|
|
5358
|
+
'pose-left': PoseL,
|
|
5359
|
+
'pinch-left': PinchL,
|
|
5219
5360
|
'thumbstick-right': ThumbstickR,
|
|
5220
5361
|
'thumbstick-up-right': ThumbstickRUp,
|
|
5221
5362
|
'thumbstick-down-right': ThumbstickRDown,
|
|
@@ -5227,6 +5368,8 @@
|
|
|
5227
5368
|
'squeeze-right': GripR,
|
|
5228
5369
|
'thumbrest-left': ThumbrestL,
|
|
5229
5370
|
'thumbrest-right': ThumbrestR,
|
|
5371
|
+
'pose-right': PoseR,
|
|
5372
|
+
'pinch-right': PinchR,
|
|
5230
5373
|
};
|
|
5231
5374
|
const GamepadIcon = ({ buttonName, handedness, }) => {
|
|
5232
5375
|
const buttonId = `${buttonName}-${handedness}`;
|
|
@@ -5276,112 +5419,6 @@
|
|
|
5276
5419
|
fillOpacity: 1,
|
|
5277
5420
|
} })] }));
|
|
5278
5421
|
|
|
5279
|
-
const faRightFromBracket = {
|
|
5280
|
-
prefix: 'fas',
|
|
5281
|
-
iconName: 'right-from-bracket',
|
|
5282
|
-
icon: [512, 512, ["sign-out-alt"], "f2f5", "M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"]
|
|
5283
|
-
};
|
|
5284
|
-
const faFingerprint = {
|
|
5285
|
-
prefix: 'fas',
|
|
5286
|
-
iconName: 'fingerprint',
|
|
5287
|
-
icon: [512, 512, [], "f577", "M48 256C48 141.1 141.1 48 256 48c63.1 0 119.6 28.1 157.8 72.5c8.6 10.1 23.8 11.2 33.8 2.6s11.2-23.8 2.6-33.8C403.3 34.6 333.7 0 256 0C114.6 0 0 114.6 0 256l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40zm458.5-52.9c-2.7-13-15.5-21.3-28.4-18.5s-21.3 15.5-18.5 28.4c2.9 13.9 4.5 28.3 4.5 43.1l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40c0-18.1-1.9-35.8-5.5-52.9zM256 80c-19 0-37.4 3-54.5 8.6c-15.2 5-18.7 23.7-8.3 35.9c7.1 8.3 18.8 10.8 29.4 7.9c10.6-2.9 21.8-4.4 33.4-4.4c70.7 0 128 57.3 128 128l0 24.9c0 25.2-1.5 50.3-4.4 75.3c-1.7 14.6 9.4 27.8 24.2 27.8c11.8 0 21.9-8.6 23.3-20.3c3.3-27.4 5-55 5-82.7l0-24.9c0-97.2-78.8-176-176-176zM150.7 148.7c-9.1-10.6-25.3-11.4-33.9-.4C93.7 178 80 215.4 80 256l0 24.9c0 24.2-2.6 48.4-7.8 71.9C68.8 368.4 80.1 384 96.1 384c10.5 0 19.9-7 22.2-17.3c6.4-28.1 9.7-56.8 9.7-85.8l0-24.9c0-27.2 8.5-52.4 22.9-73.1c7.2-10.4 8-24.6-.2-34.2zM256 160c-53 0-96 43-96 96l0 24.9c0 35.9-4.6 71.5-13.8 106.1c-3.8 14.3 6.7 29 21.5 29c9.5 0 17.9-6.2 20.4-15.4c10.5-39 15.9-79.2 15.9-119.7l0-24.9c0-28.7 23.3-52 52-52s52 23.3 52 52l0 24.9c0 36.3-3.5 72.4-10.4 107.9c-2.7 13.9 7.7 27.2 21.8 27.2c10.2 0 19-7 21-17c7.7-38.8 11.6-78.3 11.6-118.1l0-24.9c0-53-43-96-96-96zm24 96c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 24.9c0 59.9-11 119.3-32.5 175.2l-5.9 15.3c-4.8 12.4 1.4 26.3 13.8 31s26.3-1.4 31-13.8l5.9-15.3C267.9 411.9 280 346.7 280 280.9l0-24.9z"]
|
|
5288
|
-
};
|
|
5289
|
-
const faCaretRight = {
|
|
5290
|
-
prefix: 'fas',
|
|
5291
|
-
iconName: 'caret-right',
|
|
5292
|
-
icon: [256, 512, [], "f0da", "M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"]
|
|
5293
|
-
};
|
|
5294
|
-
const faCaretLeft = {
|
|
5295
|
-
prefix: 'fas',
|
|
5296
|
-
iconName: 'caret-left',
|
|
5297
|
-
icon: [256, 512, [], "f0d9", "M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z"]
|
|
5298
|
-
};
|
|
5299
|
-
const faGamepad = {
|
|
5300
|
-
prefix: 'fas',
|
|
5301
|
-
iconName: 'gamepad',
|
|
5302
|
-
icon: [640, 512, [], "f11b", "M192 64C86 64 0 150 0 256S86 448 192 448l256 0c106 0 192-86 192-192s-86-192-192-192L192 64zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24l0 32 32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0 0 32c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-32-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l32 0 0-32z"]
|
|
5303
|
-
};
|
|
5304
|
-
const faPlug = {
|
|
5305
|
-
prefix: 'fas',
|
|
5306
|
-
iconName: 'plug',
|
|
5307
|
-
icon: [384, 512, [128268], "f1e6", "M96 0C78.3 0 64 14.3 64 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM288 0c-17.7 0-32 14.3-32 32l0 96 64 0 0-96c0-17.7-14.3-32-32-32zM32 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l0 32c0 77.4 55 142 128 156.8l0 67.2c0 17.7 14.3 32 32 32s32-14.3 32-32l0-67.2C297 398 352 333.4 352 256l0-32c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"]
|
|
5308
|
-
};
|
|
5309
|
-
const faBan = {
|
|
5310
|
-
prefix: 'fas',
|
|
5311
|
-
iconName: 'ban',
|
|
5312
|
-
icon: [512, 512, [128683, "cancel"], "f05e", "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z"]
|
|
5313
|
-
};
|
|
5314
|
-
const faArrowRightToBracket = {
|
|
5315
|
-
prefix: 'fas',
|
|
5316
|
-
iconName: 'arrow-right-to-bracket',
|
|
5317
|
-
icon: [512, 512, ["sign-in"], "f090", "M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"]
|
|
5318
|
-
};
|
|
5319
|
-
const faCaretUp = {
|
|
5320
|
-
prefix: 'fas',
|
|
5321
|
-
iconName: 'caret-up',
|
|
5322
|
-
icon: [320, 512, [], "f0d8", "M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8l256 0c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"]
|
|
5323
|
-
};
|
|
5324
|
-
const faRotateLeft = {
|
|
5325
|
-
prefix: 'fas',
|
|
5326
|
-
iconName: 'rotate-left',
|
|
5327
|
-
icon: [512, 512, ["rotate-back", "rotate-backward", "undo-alt"], "f2ea", "M48.5 224L40 224c-13.3 0-24-10.7-24-24L16 72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8L48.5 224z"]
|
|
5328
|
-
};
|
|
5329
|
-
const faCirclePlay = {
|
|
5330
|
-
prefix: 'fas',
|
|
5331
|
-
iconName: 'circle-play',
|
|
5332
|
-
icon: [512, 512, [61469, "play-circle"], "f144", "M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c-7.6 4.2-12.3 12.3-12.3 20.9l0 176c0 8.7 4.7 16.7 12.3 20.9s16.8 4.1 24.3-.5l144-88c7.1-4.4 11.5-12.1 11.5-20.5s-4.4-16.1-11.5-20.5l-144-88c-7.4-4.5-16.7-4.7-24.3-.5z"]
|
|
5333
|
-
};
|
|
5334
|
-
const faStreetView = {
|
|
5335
|
-
prefix: 'fas',
|
|
5336
|
-
iconName: 'street-view',
|
|
5337
|
-
icon: [512, 512, [], "f21d", "M320 64A64 64 0 1 0 192 64a64 64 0 1 0 128 0zm-96 96c-35.3 0-64 28.7-64 64l0 48c0 17.7 14.3 32 32 32l1.8 0 11.1 99.5c1.8 16.2 15.5 28.5 31.8 28.5l38.7 0c16.3 0 30-12.3 31.8-28.5L318.2 304l1.8 0c17.7 0 32-14.3 32-32l0-48c0-35.3-28.7-64-64-64l-64 0zM132.3 394.2c13-2.4 21.7-14.9 19.3-27.9s-14.9-21.7-27.9-19.3c-32.4 5.9-60.9 14.2-82 24.8c-10.5 5.3-20.3 11.7-27.8 19.6C6.4 399.5 0 410.5 0 424c0 21.4 15.5 36.1 29.1 45c14.7 9.6 34.3 17.3 56.4 23.4C130.2 504.7 190.4 512 256 512s125.8-7.3 170.4-19.6c22.1-6.1 41.8-13.8 56.4-23.4c13.7-8.9 29.1-23.6 29.1-45c0-13.5-6.4-24.5-14-32.6c-7.5-7.9-17.3-14.3-27.8-19.6c-21-10.6-49.5-18.9-82-24.8c-13-2.4-25.5 6.3-27.9 19.3s6.3 25.5 19.3 27.9c30.2 5.5 53.7 12.8 69 20.5c3.2 1.6 5.8 3.1 7.9 4.5c3.6 2.4 3.6 7.2 0 9.6c-8.8 5.7-23.1 11.8-43 17.3C374.3 457 318.5 464 256 464s-118.3-7-157.7-17.9c-19.9-5.5-34.2-11.6-43-17.3c-3.6-2.4-3.6-7.2 0-9.6c2.1-1.4 4.8-2.9 7.9-4.5c15.3-7.7 38.8-14.9 69-20.5z"]
|
|
5338
|
-
};
|
|
5339
|
-
const faGear = {
|
|
5340
|
-
prefix: 'fas',
|
|
5341
|
-
iconName: 'gear',
|
|
5342
|
-
icon: [512, 512, [9881, "cog"], "f013", "M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"]
|
|
5343
|
-
};
|
|
5344
|
-
const faCaretDown = {
|
|
5345
|
-
prefix: 'fas',
|
|
5346
|
-
iconName: 'caret-down',
|
|
5347
|
-
icon: [320, 512, [], "f0d7", "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"]
|
|
5348
|
-
};
|
|
5349
|
-
const faDeleteLeft = {
|
|
5350
|
-
prefix: 'fas',
|
|
5351
|
-
iconName: 'delete-left',
|
|
5352
|
-
icon: [576, 512, [9003, "backspace"], "f55a", "M576 128c0-35.3-28.7-64-64-64L205.3 64c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7L512 448c35.3 0 64-28.7 64-64l0-256zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
|
|
5353
|
-
};
|
|
5354
|
-
const faBug = {
|
|
5355
|
-
prefix: 'fas',
|
|
5356
|
-
iconName: 'bug',
|
|
5357
|
-
icon: [512, 512, [], "f188", "M256 0c53 0 96 43 96 96l0 3.6c0 15.7-12.7 28.4-28.4 28.4l-135.1 0c-15.7 0-28.4-12.7-28.4-28.4l0-3.6c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4l112 0c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5l64.3 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6L272 240c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 239.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64.3 0c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"]
|
|
5358
|
-
};
|
|
5359
|
-
const faAngleUp = {
|
|
5360
|
-
prefix: 'fas',
|
|
5361
|
-
iconName: 'angle-up',
|
|
5362
|
-
icon: [448, 512, [8963], "f106", "M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"]
|
|
5363
|
-
};
|
|
5364
|
-
const faVrCardboard = {
|
|
5365
|
-
prefix: 'fas',
|
|
5366
|
-
iconName: 'vr-cardboard',
|
|
5367
|
-
icon: [640, 512, [], "f729", "M576 64L64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l120.4 0c24.2 0 46.4-13.7 57.2-35.4l32-64c8.8-17.5 26.7-28.6 46.3-28.6s37.5 11.1 46.3 28.6l32 64c10.8 21.7 33 35.4 57.2 35.4L576 448c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64zM96 240a64 64 0 1 1 128 0A64 64 0 1 1 96 240zm384-64a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"]
|
|
5368
|
-
};
|
|
5369
|
-
const faArrowTurnDown = {
|
|
5370
|
-
prefix: 'fas',
|
|
5371
|
-
iconName: 'arrow-turn-down',
|
|
5372
|
-
icon: [384, 512, ["level-down"], "f149", "M32 64C14.3 64 0 49.7 0 32S14.3 0 32 0l96 0c53 0 96 43 96 96l0 306.7 73.4-73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 402.7 160 96c0-17.7-14.3-32-32-32L32 64z"]
|
|
5373
|
-
};
|
|
5374
|
-
const faCircleXmark = {
|
|
5375
|
-
prefix: 'fas',
|
|
5376
|
-
iconName: 'circle-xmark',
|
|
5377
|
-
icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
|
|
5378
|
-
};
|
|
5379
|
-
const faVideo = {
|
|
5380
|
-
prefix: 'fas',
|
|
5381
|
-
iconName: 'video',
|
|
5382
|
-
icon: [576, 512, ["video-camera"], "f03d", "M0 128C0 92.7 28.7 64 64 64l256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2l0 256c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1l0-17.1 0-128 0-17.1 14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z"]
|
|
5383
|
-
};
|
|
5384
|
-
|
|
5385
5422
|
const MappedKeyDisplay = {
|
|
5386
5423
|
KeyA: 'A',
|
|
5387
5424
|
KeyB: 'B',
|
|
@@ -5722,6 +5759,8 @@
|
|
|
5722
5759
|
'y-button': 'KeyZ',
|
|
5723
5760
|
trigger: 'KeyQ',
|
|
5724
5761
|
squeeze: 'KeyE',
|
|
5762
|
+
pinch: 'MouseLeft',
|
|
5763
|
+
pose: 'KeyF',
|
|
5725
5764
|
},
|
|
5726
5765
|
right: {
|
|
5727
5766
|
'thumbstick-up': 'ArrowUp',
|
|
@@ -5733,6 +5772,8 @@
|
|
|
5733
5772
|
'b-button': 'ShiftRight',
|
|
5734
5773
|
trigger: 'MouseLeft',
|
|
5735
5774
|
squeeze: 'MouseRight',
|
|
5775
|
+
pinch: 'MouseRight',
|
|
5776
|
+
pose: 'Backslash',
|
|
5736
5777
|
},
|
|
5737
5778
|
};
|
|
5738
5779
|
const useKeyMapStore = create((set) => ({
|
|
@@ -5758,7 +5799,7 @@
|
|
|
5758
5799
|
margin-bottom: 0;
|
|
5759
5800
|
}
|
|
5760
5801
|
`;
|
|
5761
|
-
const
|
|
5802
|
+
const ControlsMapper = ({ handedness, actions, }) => {
|
|
5762
5803
|
const { keyMap, bindKey } = useKeyMapStore();
|
|
5763
5804
|
const [currentMapping, setCurrentMapping] = reactExports.useState(null);
|
|
5764
5805
|
const startMapping = (action) => {
|
|
@@ -5796,7 +5837,9 @@
|
|
|
5796
5837
|
window.removeEventListener('contextmenu', preventDefaultContextMenu);
|
|
5797
5838
|
};
|
|
5798
5839
|
}, [currentMapping]);
|
|
5799
|
-
return Object.keys(keyMap[handedness])
|
|
5840
|
+
return Object.keys(keyMap[handedness])
|
|
5841
|
+
.filter((action) => actions.includes(action))
|
|
5842
|
+
.map((action) => (jsxRuntimeExports.jsxs(Row, { children: [jsxRuntimeExports.jsx(GamepadIcon, { buttonName: action === 'up' ? 'thumbstick' : action, handedness: handedness }), jsxRuntimeExports.jsxs(ButtonGroup, { "$reverse": false, children: [jsxRuntimeExports.jsx(Button, { "$reverse": false, style: {
|
|
5800
5843
|
width: '100px',
|
|
5801
5844
|
background: currentMapping && currentMapping.action === action
|
|
5802
5845
|
? Colors.gradientLightGreyTranslucent
|
|
@@ -6299,13 +6342,25 @@
|
|
|
6299
6342
|
});
|
|
6300
6343
|
return transformed;
|
|
6301
6344
|
}
|
|
6302
|
-
const ControlsUI = ({ xrDevice, inputLayer, pointerLocked, }) => {
|
|
6303
|
-
return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: Object.entries(xrDevice.controllers).map(([handedness, controller]) => (jsxRuntimeExports.jsx(ControllerUI, { controller: controller, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `controller-${handedness}`))) }));
|
|
6304
|
-
};
|
|
6305
6345
|
const ControllerUI = ({ controller, handle, handedness, pointerLocked, }) => {
|
|
6306
6346
|
const { keyMap } = useKeyMapStore();
|
|
6307
6347
|
const [connected, setConnected] = React.useState(controller.connected);
|
|
6308
6348
|
const [settingsOpen, setSettingsOpen] = React.useState(false);
|
|
6349
|
+
const transformedConfig = transformGamepadConfig(controller.gamepadConfig);
|
|
6350
|
+
const actions = transformedConfig.flatMap((config) => {
|
|
6351
|
+
if (config.hasAxes) {
|
|
6352
|
+
return [
|
|
6353
|
+
`${config.id}-left`,
|
|
6354
|
+
`${config.id}-right`,
|
|
6355
|
+
`${config.id}-up`,
|
|
6356
|
+
`${config.id}-down`,
|
|
6357
|
+
config.id,
|
|
6358
|
+
];
|
|
6359
|
+
}
|
|
6360
|
+
else {
|
|
6361
|
+
return config.id;
|
|
6362
|
+
}
|
|
6363
|
+
});
|
|
6309
6364
|
React.useEffect(() => {
|
|
6310
6365
|
if (pointerLocked) {
|
|
6311
6366
|
setSettingsOpen(false);
|
|
@@ -6336,7 +6391,7 @@
|
|
|
6336
6391
|
controller.connected = true;
|
|
6337
6392
|
setConnected(true);
|
|
6338
6393
|
}, style: { marginLeft: '5px' }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faPlug }) })) })] }) })), connected && !pointerLocked && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [!settingsOpen && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, {}), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.position, label: "Position", marginBottom: ControlButtonStyles.gap }), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.rotation, label: "Rotation" })] })), jsxRuntimeExports.jsx(SectionBreak, {})] })), connected &&
|
|
6339
|
-
(settingsOpen ? (jsxRuntimeExports.jsx(
|
|
6394
|
+
(settingsOpen ? (jsxRuntimeExports.jsx(ControlsMapper, { handedness: handedness, actions: actions })) : (transformedConfig.map((buttonConfig) => {
|
|
6340
6395
|
const mapping = keyMap[handedness];
|
|
6341
6396
|
if (buttonConfig.hasAxes) {
|
|
6342
6397
|
return (jsxRuntimeExports.jsx(Joystick, { xrController: controller, pointerLocked: pointerLocked, buttonId: buttonConfig.id, mappedKeyUp: keyMap[handedness][`${buttonConfig.id}-up`], mappedKeyDown: mapping[`${buttonConfig.id}-down`], mappedKeyLeft: mapping[`${buttonConfig.id}-left`], mappedKeyRight: mapping[`${buttonConfig.id}-right`], mappedKeyPressed: mapping[buttonConfig.id] }, buttonConfig.id));
|
|
@@ -6350,6 +6405,190 @@
|
|
|
6350
6405
|
})))] }, handedness));
|
|
6351
6406
|
};
|
|
6352
6407
|
|
|
6408
|
+
const pinchSliderWidth = `calc(${ControlButtonStyles.widthLong} + ${ControlButtonStyles.widthShort} + ${ControlButtonStyles.gap})`;
|
|
6409
|
+
const PinchControl = ({ hand, pointerLocked, mappedKey, }) => {
|
|
6410
|
+
const [isPressed, setIsPressed] = reactExports.useState(false);
|
|
6411
|
+
const [isKeyPressed, setIsKeyPressed] = reactExports.useState(false);
|
|
6412
|
+
const [analogValue, setAnalogValue] = reactExports.useState(0);
|
|
6413
|
+
const handedness = hand.inputSource.handedness;
|
|
6414
|
+
reactExports.useEffect(() => {
|
|
6415
|
+
const handleKeyDown = (event) => {
|
|
6416
|
+
if (event.code === mappedKey) {
|
|
6417
|
+
hand.updatePinchValue(1);
|
|
6418
|
+
setIsKeyPressed(true);
|
|
6419
|
+
}
|
|
6420
|
+
};
|
|
6421
|
+
const handleKeyUp = (event) => {
|
|
6422
|
+
if (event.code === mappedKey) {
|
|
6423
|
+
hand.updatePinchValue(0);
|
|
6424
|
+
setIsKeyPressed(false);
|
|
6425
|
+
}
|
|
6426
|
+
};
|
|
6427
|
+
const handleMouseDown = (event) => {
|
|
6428
|
+
if ((mappedKey === 'MouseLeft' && event.button === 0) ||
|
|
6429
|
+
(mappedKey === 'MouseRight' && event.button === 2)) {
|
|
6430
|
+
hand.updatePinchValue(1);
|
|
6431
|
+
setIsKeyPressed(true);
|
|
6432
|
+
}
|
|
6433
|
+
};
|
|
6434
|
+
const handleMouseUp = (event) => {
|
|
6435
|
+
if ((mappedKey === 'MouseLeft' && event.button === 0) ||
|
|
6436
|
+
(mappedKey === 'MouseRight' && event.button === 2)) {
|
|
6437
|
+
hand.updatePinchValue(0);
|
|
6438
|
+
setIsKeyPressed(false);
|
|
6439
|
+
}
|
|
6440
|
+
};
|
|
6441
|
+
if (pointerLocked) {
|
|
6442
|
+
if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
|
|
6443
|
+
window.addEventListener('mousedown', handleMouseDown);
|
|
6444
|
+
window.addEventListener('mouseup', handleMouseUp);
|
|
6445
|
+
}
|
|
6446
|
+
else {
|
|
6447
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
6448
|
+
window.addEventListener('keyup', handleKeyUp);
|
|
6449
|
+
}
|
|
6450
|
+
}
|
|
6451
|
+
else {
|
|
6452
|
+
if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
|
|
6453
|
+
window.removeEventListener('mousedown', handleMouseDown);
|
|
6454
|
+
window.removeEventListener('mouseup', handleMouseUp);
|
|
6455
|
+
}
|
|
6456
|
+
else {
|
|
6457
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
6458
|
+
window.removeEventListener('keyup', handleKeyUp);
|
|
6459
|
+
}
|
|
6460
|
+
}
|
|
6461
|
+
return () => {
|
|
6462
|
+
if (mappedKey === 'MouseLeft' || mappedKey === 'MouseRight') {
|
|
6463
|
+
window.removeEventListener('mousedown', handleMouseDown);
|
|
6464
|
+
window.removeEventListener('mouseup', handleMouseUp);
|
|
6465
|
+
}
|
|
6466
|
+
else {
|
|
6467
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
6468
|
+
window.removeEventListener('keyup', handleKeyUp);
|
|
6469
|
+
}
|
|
6470
|
+
};
|
|
6471
|
+
}, [mappedKey, pointerLocked, hand]);
|
|
6472
|
+
return (jsxRuntimeExports.jsxs(ButtonContainer, { "$reverse": handedness === 'right', children: [jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandLizard, "$reverse": handedness === 'left' }), jsxRuntimeExports.jsx(ButtonGroup, { "$reverse": handedness === 'right', children: pointerLocked ? (jsxRuntimeExports.jsx(MappedKeyBlock, { "$pressed": isKeyPressed, children: MappedKeyDisplay[mappedKey] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Button, { "$reverse": handedness === 'right', style: {
|
|
6473
|
+
background: isPressed
|
|
6474
|
+
? Colors.gradientLightGreyTranslucent
|
|
6475
|
+
: Colors.gradientGreyTranslucent,
|
|
6476
|
+
width: ControlButtonStyles.widthLong,
|
|
6477
|
+
}, onClick: () => {
|
|
6478
|
+
setIsPressed(true);
|
|
6479
|
+
hand.updatePinchValue(1);
|
|
6480
|
+
setTimeout(() => {
|
|
6481
|
+
setIsPressed(false);
|
|
6482
|
+
hand.updatePinchValue(0);
|
|
6483
|
+
}, 250);
|
|
6484
|
+
}, children: "Pinch" }), jsxRuntimeExports.jsx(RangeSelector$1, { "$reverse": handedness === 'right', value: analogValue, onChange: (e) => {
|
|
6485
|
+
const value = Number(e.target.value);
|
|
6486
|
+
setAnalogValue(value);
|
|
6487
|
+
hand.updatePinchValue(value / 100);
|
|
6488
|
+
}, style: { width: pinchSliderWidth }, min: "0", max: "100" })] })) })] }));
|
|
6489
|
+
};
|
|
6490
|
+
|
|
6491
|
+
const poses = ['default', 'point'];
|
|
6492
|
+
const poseButtonWidth = `calc(2 * ${ControlButtonStyles.widthLong} - ${ControlButtonStyles.widthShort})`;
|
|
6493
|
+
const PoseSelector = ({ hand, pointerLocked, mappedKey, }) => {
|
|
6494
|
+
const [poseId, setPoseId] = reactExports.useState(hand.poseId);
|
|
6495
|
+
const [isKeyPressed, setIsKeyPressed] = reactExports.useState(false);
|
|
6496
|
+
const handedness = hand.inputSource.handedness;
|
|
6497
|
+
const cyclePose = (delta) => {
|
|
6498
|
+
const poseIdx = poses.indexOf(hand.poseId);
|
|
6499
|
+
const newPoseIdx = (poseIdx + poses.length + delta) % poses.length;
|
|
6500
|
+
setPoseId(poses[newPoseIdx]);
|
|
6501
|
+
hand.poseId = poses[newPoseIdx];
|
|
6502
|
+
};
|
|
6503
|
+
const layoutReverse = handedness === 'right';
|
|
6504
|
+
reactExports.useEffect(() => {
|
|
6505
|
+
const handleKeyDown = (event) => {
|
|
6506
|
+
if (event.code === mappedKey) {
|
|
6507
|
+
cyclePose(1);
|
|
6508
|
+
setIsKeyPressed(true);
|
|
6509
|
+
}
|
|
6510
|
+
};
|
|
6511
|
+
const handleKeyUp = (event) => {
|
|
6512
|
+
if (event.code === mappedKey) {
|
|
6513
|
+
setIsKeyPressed(false);
|
|
6514
|
+
}
|
|
6515
|
+
};
|
|
6516
|
+
if (pointerLocked) {
|
|
6517
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
6518
|
+
window.addEventListener('keyup', handleKeyUp);
|
|
6519
|
+
}
|
|
6520
|
+
else {
|
|
6521
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
6522
|
+
window.removeEventListener('keyup', handleKeyUp);
|
|
6523
|
+
}
|
|
6524
|
+
return () => {
|
|
6525
|
+
window.removeEventListener('keydown', handleKeyDown);
|
|
6526
|
+
window.removeEventListener('keyup', handleKeyUp);
|
|
6527
|
+
};
|
|
6528
|
+
}, [mappedKey, pointerLocked, hand]);
|
|
6529
|
+
return (jsxRuntimeExports.jsxs(ButtonContainer, { "$reverse": layoutReverse, children: [jsxRuntimeExports.jsx(FAControlIcon, { icon: faHandScissors, "$reverse": handedness === 'left' }), jsxRuntimeExports.jsx(ButtonGroup, { "$reverse": layoutReverse, children: pointerLocked ? (jsxRuntimeExports.jsx(MappedKeyBlock, { "$pressed": isKeyPressed, children: MappedKeyDisplay[mappedKey] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Button, { "$reverse": layoutReverse, style: {
|
|
6530
|
+
width: ControlButtonStyles.widthShort,
|
|
6531
|
+
}, onClick: () => {
|
|
6532
|
+
cyclePose(layoutReverse ? 1 : -1);
|
|
6533
|
+
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: layoutReverse ? faChevronRight : faChevronLeft }) }), jsxRuntimeExports.jsxs(Button, { "$reverse": layoutReverse, style: {
|
|
6534
|
+
width: poseButtonWidth,
|
|
6535
|
+
}, disabled: true, children: ["Pose: ", poseId] }), jsxRuntimeExports.jsx(Button, { "$reverse": layoutReverse, style: {
|
|
6536
|
+
width: ControlButtonStyles.widthShort,
|
|
6537
|
+
}, onClick: () => {
|
|
6538
|
+
cyclePose(layoutReverse ? -1 : 1);
|
|
6539
|
+
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: layoutReverse ? faChevronLeft : faChevronRight }) })] })) })] }));
|
|
6540
|
+
};
|
|
6541
|
+
|
|
6542
|
+
const HandUI = ({ hand, handle, handedness, pointerLocked, }) => {
|
|
6543
|
+
const { keyMap } = useKeyMapStore();
|
|
6544
|
+
const [connected, setConnected] = React.useState(hand.connected);
|
|
6545
|
+
const [settingsOpen, setSettingsOpen] = React.useState(false);
|
|
6546
|
+
React.useEffect(() => {
|
|
6547
|
+
if (pointerLocked) {
|
|
6548
|
+
setSettingsOpen(false);
|
|
6549
|
+
}
|
|
6550
|
+
}, [pointerLocked]);
|
|
6551
|
+
return (jsxRuntimeExports.jsxs(ControlPanel, { style: handedness === 'left'
|
|
6552
|
+
? { left: '8px', bottom: '8px' }
|
|
6553
|
+
: { right: '8px', bottom: '8px' }, children: [!pointerLocked && (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs("div", { style: {
|
|
6554
|
+
display: 'flex',
|
|
6555
|
+
flexDirection: 'row',
|
|
6556
|
+
justifyContent: 'space-between',
|
|
6557
|
+
alignItems: 'center',
|
|
6558
|
+
}, children: [jsxRuntimeExports.jsxs("div", { style: {
|
|
6559
|
+
fontSize: '13px',
|
|
6560
|
+
display: 'flex',
|
|
6561
|
+
flexDirection: 'row',
|
|
6562
|
+
alignItems: 'center',
|
|
6563
|
+
}, children: [jsxRuntimeExports.jsx(FAIcon, { icon: faHand, "$reverse": handedness === 'left', style: { marginRight: '5px' } }), "Hand\u00A0", jsxRuntimeExports.jsxs("span", { style: { fontWeight: 'bold' }, children: ["[", handedness === 'left' ? 'L' : 'R', "]"] })] }), jsxRuntimeExports.jsx("div", { style: {
|
|
6564
|
+
display: 'flex',
|
|
6565
|
+
flexDirection: 'row',
|
|
6566
|
+
gap: '1px',
|
|
6567
|
+
}, children: connected ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to ${settingsOpen ? 'close' : 'change'} key bindings`, onClick: () => {
|
|
6568
|
+
setSettingsOpen(!settingsOpen);
|
|
6569
|
+
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: faGear }) }), jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to disconnect ${handedness} controller`, "$isRed": true, onClick: () => {
|
|
6570
|
+
hand.connected = false;
|
|
6571
|
+
setConnected(false);
|
|
6572
|
+
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCircleXmark }) })] })) : (jsxRuntimeExports.jsx(PanelHeaderButton, { title: `Click to reconnect ${handedness} controller`, onClick: () => {
|
|
6573
|
+
hand.connected = true;
|
|
6574
|
+
setConnected(true);
|
|
6575
|
+
}, style: { marginLeft: '5px' }, children: jsxRuntimeExports.jsx(FAIcon, { icon: faPlug }) })) })] }) })), connected && !pointerLocked && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [!settingsOpen && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, {}), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.position, label: "Position", marginBottom: ControlButtonStyles.gap }), jsxRuntimeExports.jsx(Vector3Input, { vector: handle.rotation, label: "Rotation" })] })), jsxRuntimeExports.jsx(SectionBreak, {})] })), connected &&
|
|
6576
|
+
(settingsOpen ? (jsxRuntimeExports.jsx(ControlsMapper, { handedness: handedness, actions: ['pose', 'pinch'] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(PoseSelector, { hand: hand, pointerLocked: pointerLocked, mappedKey: keyMap[handedness].pose }), jsxRuntimeExports.jsx(PinchControl, { hand: hand, pointerLocked: pointerLocked, mappedKey: keyMap[handedness].pinch })] })))] }, handedness));
|
|
6577
|
+
};
|
|
6578
|
+
|
|
6579
|
+
const useInputModeStore = create((set) => ({
|
|
6580
|
+
inputMode: 'controller',
|
|
6581
|
+
setInputMode: (mode) => set(() => ({
|
|
6582
|
+
inputMode: mode,
|
|
6583
|
+
})),
|
|
6584
|
+
}));
|
|
6585
|
+
const ControlsUI = ({ xrDevice, inputLayer, pointerLocked, }) => {
|
|
6586
|
+
const { inputMode } = useInputModeStore();
|
|
6587
|
+
return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: inputMode === 'controller'
|
|
6588
|
+
? Object.entries(xrDevice.controllers).map(([handedness, controller]) => (jsxRuntimeExports.jsx(ControllerUI, { controller: controller, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `controller-${handedness}`)))
|
|
6589
|
+
: Object.entries(xrDevice.hands).map(([handedness, hand]) => (jsxRuntimeExports.jsx(HandUI, { hand: hand, handle: inputLayer.transformHandles.get(handedness), handedness: handedness, pointerLocked: pointerLocked }, `hand-${handedness}`))) }));
|
|
6590
|
+
};
|
|
6591
|
+
|
|
6353
6592
|
const VersionTableCol1 = dt.td `
|
|
6354
6593
|
text-align: right;
|
|
6355
6594
|
color: ${Colors.textWhite};
|
|
@@ -6367,6 +6606,7 @@
|
|
|
6367
6606
|
const [boxesVisible, setBoxesVisible] = React.useState(Boolean((_b = xrDevice.sem) === null || _b === void 0 ? void 0 : _b.boundingBoxesVisible));
|
|
6368
6607
|
const [meshesVisible, setMeshesVisible] = React.useState(Boolean((_c = xrDevice.sem) === null || _c === void 0 ? void 0 : _c.meshesVisible));
|
|
6369
6608
|
const [infoPanelOpen, setInfoPanelOpen] = React.useState(false);
|
|
6609
|
+
const { inputMode, setInputMode } = useInputModeStore();
|
|
6370
6610
|
return (jsxRuntimeExports.jsxs("div", { style: {
|
|
6371
6611
|
display: 'flex',
|
|
6372
6612
|
justifyContent: 'center',
|
|
@@ -6382,7 +6622,16 @@
|
|
|
6382
6622
|
inputLayer.resetDeviceTransforms();
|
|
6383
6623
|
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: faRotateLeft, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to activate play mode", onClick: () => {
|
|
6384
6624
|
inputLayer.lockPointer();
|
|
6385
|
-
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCirclePlay, "$size": 16 }) }),
|
|
6625
|
+
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: faCirclePlay, "$size": 16 }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle input mode", onClick: () => {
|
|
6626
|
+
if (inputMode === 'controller') {
|
|
6627
|
+
setInputMode('hand');
|
|
6628
|
+
xrDevice.primaryInputMode = 'hand';
|
|
6629
|
+
}
|
|
6630
|
+
else {
|
|
6631
|
+
setInputMode('controller');
|
|
6632
|
+
xrDevice.primaryInputMode = 'controller';
|
|
6633
|
+
}
|
|
6634
|
+
}, children: jsxRuntimeExports.jsx(FAIcon, { icon: inputMode === 'controller' ? faGamepad : faHand, "$size": 16 }) }), xrDevice.sem && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(SectionBreak, { "$horizontal": false }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of planes", onClick: () => {
|
|
6386
6635
|
xrDevice.sem.planesVisible = !planesVisible;
|
|
6387
6636
|
setPlanesVisible(!planesVisible);
|
|
6388
6637
|
}, children: jsxRuntimeExports.jsx(PlaneIcon, { size: 16, color: planesVisible ? Colors.textWhite : Colors.textGrey }) }), jsxRuntimeExports.jsx(HeaderButton, { title: "Click to toggle visibility of bounding boxes", onClick: () => {
|
|
@@ -42197,7 +42446,6 @@ void main() {
|
|
|
42197
42446
|
transformHandle.space = 'local';
|
|
42198
42447
|
this.transformHandles.set(handedness, transformHandle);
|
|
42199
42448
|
transformHandle.addEventListener('click', () => {
|
|
42200
|
-
console.log('click');
|
|
42201
42449
|
if (transformHandle.userData.mode === 'translate') {
|
|
42202
42450
|
transformHandle.userData.setMode('rotate');
|
|
42203
42451
|
}
|
|
@@ -42305,8 +42553,11 @@ void main() {
|
|
|
42305
42553
|
xrDevice.position.copy(cameraRig.getWorldPosition(this.vec3));
|
|
42306
42554
|
xrDevice.quaternion.copy(cameraRig.getWorldQuaternion(this.quat));
|
|
42307
42555
|
transformHandles.forEach((transformHandle, handedness) => {
|
|
42308
|
-
xrDevice.
|
|
42309
|
-
|
|
42556
|
+
const emulatedInput = xrDevice.primaryInputMode === 'controller'
|
|
42557
|
+
? xrDevice.controllers[handedness]
|
|
42558
|
+
: xrDevice.hands[handedness];
|
|
42559
|
+
emulatedInput.position.copy(transformHandle.getWorldPosition(this.vec3));
|
|
42560
|
+
emulatedInput.quaternion.copy(transformHandle.getWorldQuaternion(this.quat));
|
|
42310
42561
|
});
|
|
42311
42562
|
}
|
|
42312
42563
|
renderScene(time) {
|
|
@@ -42368,7 +42619,7 @@ void main() {
|
|
|
42368
42619
|
}
|
|
42369
42620
|
}
|
|
42370
42621
|
|
|
42371
|
-
const VERSION = "1.0
|
|
42622
|
+
const VERSION = "1.1.0";
|
|
42372
42623
|
|
|
42373
42624
|
var client = {};
|
|
42374
42625
|
|
|
@@ -42802,6 +43053,7 @@ void main() {
|
|
|
42802
43053
|
constructor(xrDevice) {
|
|
42803
43054
|
this.version = VERSION;
|
|
42804
43055
|
xrDevice.ipd = 0;
|
|
43056
|
+
useInputModeStore.getState().setInputMode(xrDevice.primaryInputMode);
|
|
42805
43057
|
this.devUIContainer = document.createElement('div');
|
|
42806
43058
|
this.devUIContainer.style.position = 'fixed';
|
|
42807
43059
|
this.devUIContainer.style.width = '100vw';
|