@babylonjs/shared-ui-components 8.25.0 → 8.25.1
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/constToOptionsMaps.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Constants } from "@babylonjs/core/Engines.js";
|
|
2
|
-
import { ParticleSystem } from "@babylonjs/core/Particles.js";
|
|
1
|
+
import { Constants } from "@babylonjs/core/Engines/constants.js";
|
|
2
|
+
import { ParticleSystem } from "@babylonjs/core/Particles/particleSystem.js";
|
|
3
3
|
/**
|
|
4
4
|
* Used by both particleSystem and alphaBlendModes
|
|
5
5
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,6CAA+B;AACnD,OAAO,EAAE,cAAc,EAAE,oDAAsC;AAE/D;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IACjE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,8BAA8B,EAAE;IACxF,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IAChE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,kBAAkB,EAAE;IAChE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,CAAC,6BAA6B,EAAE;IAC5F,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,oBAAoB,EAAE;IAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,CAAC,sBAAsB,EAAE;CACzE,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE;IAC5D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;CAClE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE;IACnD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;IACtD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;CACzD,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Constants } from \"core/Engines/constants\";\r\nimport { ParticleSystem } from \"core/Particles/particleSystem\";\r\n\r\n/**\r\n * Used by both particleSystem and alphaBlendModes\r\n */\r\nexport const CommonBlendModes = [\r\n { label: \"Maximized\", value: Constants.ALPHA_MAXIMIZED },\r\n { label: \"Pre-multiplied\", value: Constants.ALPHA_PREMULTIPLIED },\r\n { label: \"Pre-multiplied Porter Duff\", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },\r\n { label: \"Screen Mode\", value: Constants.ALPHA_SCREENMODE },\r\n { label: \"OneOne OneOne\", value: Constants.ALPHA_ONEONE_ONEONE },\r\n { label: \"Alpha to Color\", value: Constants.ALPHA_ALPHATOCOLOR },\r\n { label: \"Reverse One Minus\", value: Constants.ALPHA_REVERSEONEMINUS },\r\n { label: \"Source+Dest * (1 - SourceAlpha)\", value: Constants.ALPHA_SRC_DSTONEMINUSSRCALPHA },\r\n { label: \"OneOne OneZero\", value: Constants.ALPHA_ONEONE_ONEZERO },\r\n { label: \"Exclusion\", value: Constants.ALPHA_EXCLUSION },\r\n { label: \"Layer Accumulate\", value: Constants.ALPHA_LAYER_ACCUMULATE },\r\n];\r\n\r\n/**\r\n * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference\r\n * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)\r\n */\r\nexport const BlendModeOptions = [\r\n { label: \"Add\", value: ParticleSystem.BLENDMODE_ADD },\r\n { label: \"Multiply\", value: ParticleSystem.BLENDMODE_MULTIPLY },\r\n { label: \"Multiply Add\", value: ParticleSystem.BLENDMODE_MULTIPLYADD },\r\n { label: \"One One\", value: ParticleSystem.BLENDMODE_ONEONE },\r\n { label: \"Standard\", value: ParticleSystem.BLENDMODE_STANDARD },\r\n { label: \"Subtract\", value: ParticleSystem.BLENDMODE_SUBTRACT },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n */\r\nexport const AlphaModeOptions = [\r\n { label: \"Combine\", value: Constants.ALPHA_COMBINE },\r\n { label: \"One One\", value: Constants.ALPHA_ONEONE },\r\n { label: \"Add\", value: Constants.ALPHA_ADD },\r\n { label: \"Subtract\", value: Constants.ALPHA_SUBTRACT },\r\n { label: \"Multiply\", value: Constants.ALPHA_MULTIPLY },\r\n].concat(CommonBlendModes);\r\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Children, isValidElement, useMemo } from "react";
|
|
3
|
-
import {
|
|
2
|
+
import { Children, isValidElement, useCallback, useEffect, useMemo, useState } from "react";
|
|
3
|
+
import { AccordionHeader, AccordionItem, AccordionPanel, Accordion as FluentAccordion, Subtitle1, makeStyles, tokens } from "@fluentui/react-components";
|
|
4
4
|
const useStyles = makeStyles({
|
|
5
5
|
accordion: {
|
|
6
6
|
overflowX: "hidden",
|
|
@@ -39,7 +39,31 @@ export const Accordion = (props) => {
|
|
|
39
39
|
return null;
|
|
40
40
|
})?.filter(Boolean) ?? []);
|
|
41
41
|
}, [children]);
|
|
42
|
-
|
|
42
|
+
// Tracks open items, and used to tell the Accordion which sections should be expanded.
|
|
43
|
+
const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));
|
|
44
|
+
// Tracks closed items, which is needed so that when the children change, we only update the open/closed state
|
|
45
|
+
// (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.
|
|
46
|
+
const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {
|
|
49
|
+
// If a child is not marked as collapseByDefault, then it should be opened by default, and
|
|
50
|
+
// it is only "default" if it hasn't already been explicitly added to the opened or closed list.
|
|
51
|
+
if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {
|
|
52
|
+
setOpenItems((prev) => [...prev, defaultOpenItem]);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}, [validChildren]);
|
|
56
|
+
const onToggle = useCallback((event, data) => {
|
|
57
|
+
if (data.openItems.includes(data.value)) {
|
|
58
|
+
setOpenItems((prev) => [...prev, data.value]);
|
|
59
|
+
setClosedItems((prev) => prev.filter((item) => item !== data.value));
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
setClosedItems((prev) => [...prev, data.value]);
|
|
63
|
+
setOpenItems((prev) => prev.filter((item) => item !== data.value));
|
|
64
|
+
}
|
|
65
|
+
}, []);
|
|
66
|
+
return (_jsx(FluentAccordion, { className: classes.accordion, collapsible: true, multiple: true, onToggle: onToggle, openItems: openItems, ...rest, children: validChildren.map((child) => {
|
|
43
67
|
return (_jsxs(AccordionItem, { value: child.title, children: [_jsx(AccordionHeader, { expandIconPosition: "end", children: _jsx(Subtitle1, { children: child.title }) }), _jsx(AccordionPanel, { children: _jsx("div", { className: classes.panelDiv, children: child.content }) })] }, child.title));
|
|
44
68
|
}) }));
|
|
45
69
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/accordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AccordionToggleData, AccordionToggleEvent } from \"@fluentui/react-components\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\n\r\nimport { Children, isValidElement, useCallback, useEffect, useMemo, useState } from \"react\";\r\n\r\nimport { AccordionHeader, AccordionItem, AccordionPanel, Accordion as FluentAccordion, Subtitle1, makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nconst useStyles = makeStyles({\r\n accordion: {\r\n overflowX: \"hidden\",\r\n overflowY: \"auto\",\r\n paddingBottom: tokens.spacingVerticalM,\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n rowGap: tokens.spacingVerticalM,\r\n height: \"100%\",\r\n },\r\n panelDiv: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n overflow: \"hidden\",\r\n },\r\n});\r\n\r\nexport type AccordionSectionProps = {\r\n title: string;\r\n collapseByDefault?: boolean;\r\n};\r\n\r\nexport const AccordionSection: FunctionComponent<PropsWithChildren<AccordionSectionProps>> = (props) => {\r\n const classes = useStyles();\r\n\r\n return <div className={classes.panelDiv}>{props.children}</div>;\r\n};\r\n\r\nexport const Accordion: FunctionComponent<PropsWithChildren> = (props) => {\r\n const classes = useStyles();\r\n\r\n const { children, ...rest } = props;\r\n const validChildren = useMemo(() => {\r\n return (\r\n Children.map(children, (child) => {\r\n if (isValidElement(child)) {\r\n const childProps = child.props as Partial<AccordionSectionProps>;\r\n if (childProps.title) {\r\n return {\r\n title: childProps.title,\r\n collapseByDefault: childProps.collapseByDefault,\r\n content: child,\r\n };\r\n }\r\n }\r\n return null;\r\n })?.filter(Boolean) ?? []\r\n );\r\n }, [children]);\r\n\r\n // Tracks open items, and used to tell the Accordion which sections should be expanded.\r\n const [openItems, setOpenItems] = useState(validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title));\r\n\r\n // Tracks closed items, which is needed so that when the children change, we only update the open/closed state\r\n // (depending on the collapseByDefault prop) for items that have not been explicitly opened or closed.\r\n const [closedItems, setClosedItems] = useState(validChildren.filter((child) => child.collapseByDefault).map((child) => child.title));\r\n\r\n useEffect(() => {\r\n for (const defaultOpenItem of validChildren.filter((child) => !child.collapseByDefault).map((child) => child.title)) {\r\n // If a child is not marked as collapseByDefault, then it should be opened by default, and\r\n // it is only \"default\" if it hasn't already been explicitly added to the opened or closed list.\r\n if (!closedItems.includes(defaultOpenItem) && !openItems.includes(defaultOpenItem)) {\r\n setOpenItems((prev) => [...prev, defaultOpenItem]);\r\n }\r\n }\r\n }, [validChildren]);\r\n\r\n const onToggle = useCallback((event: AccordionToggleEvent, data: AccordionToggleData<string>) => {\r\n if (data.openItems.includes(data.value)) {\r\n setOpenItems((prev) => [...prev, data.value]);\r\n setClosedItems((prev) => prev.filter((item) => item !== data.value));\r\n } else {\r\n setClosedItems((prev) => [...prev, data.value]);\r\n setOpenItems((prev) => prev.filter((item) => item !== data.value));\r\n }\r\n }, []);\r\n\r\n return (\r\n <FluentAccordion className={classes.accordion} collapsible multiple onToggle={onToggle} openItems={openItems} {...rest}>\r\n {validChildren.map((child) => {\r\n return (\r\n <AccordionItem key={child.title} value={child.title}>\r\n <AccordionHeader expandIconPosition=\"end\">\r\n <Subtitle1>{child.title}</Subtitle1>\r\n </AccordionHeader>\r\n <AccordionPanel>\r\n <div className={classes.panelDiv}>{child.content}</div>\r\n </AccordionPanel>\r\n </AccordionItem>\r\n );\r\n })}\r\n </FluentAccordion>\r\n );\r\n};\r\n"]}
|