npm - @babylonjs/shared-ui-components - Versions diffs - 9.30.0 → 9.31.0 - Mend

@babylonjs/shared-ui-components 9.30.0 → 9.31.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.

Files changed (32) hide show

package/fluent/primitives/toggleButton.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ToggleButton as FluentToggleButton, makeStyles } from "@fluentui/react-components";
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useContext } from "react";
 import { ToolContext } from "../hoc/fluentToolWrapper.js";
 import { Tooltip } from "./tooltip.js";
 const useStyles = makeStyles({
@@ -11,28 +11,21 @@ const useStyles = makeStyles({
     },
 });
 /**
- * Toggles between two states using a button with icons.
- * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change
+ * Displays a controlled toggle button with icons.
+ * The parent supplies the checked state through value; clicks request the opposite value through onChange.
+ * If no uncheckedIcon is provided, the same icon is used for both states.
  *
- * @param props
- * @returns
+ * @param props The controlled state, change callback, icons, and button presentation.
+ * @returns The toggle button.
  */
 export const ToggleButton = (props) => {
     ToggleButton.displayName = "ToggleButton";
     const { value, onChange, title, appearance = "subtle", ariaLabel } = props;
     const { size } = useContext(ToolContext);
     const classes = useStyles();
-    const [checked, setChecked] = useState(value);
     const toggle = useCallback(() => {
-        setChecked((prevChecked) => {
-            const enabled = !prevChecked;
-            onChange(enabled);
-            return enabled;
-        });
-    }, [onChange]);
-    useEffect(() => {
-        setChecked(props.value);
-    }, [props.value]);
-    return (_jsx(Tooltip, { content: title ?? "", positioning: props.titlePositioning, children: _jsx(FluentToggleButton, { className: classes.button, size: size, "aria-label": ariaLabel ?? title, icon: checked ? _jsx(props.checkedIcon, {}) : props.uncheckedIcon ? _jsx(props.uncheckedIcon, {}) : _jsx(props.checkedIcon, {}), appearance: appearance, checked: checked, onClick: toggle }) }));
+        onChange(!value);
+    }, [value, onChange]);
+    return (_jsx(Tooltip, { content: title ?? "", positioning: props.titlePositioning, children: _jsx(FluentToggleButton, { className: classes.button, size: size, "aria-label": ariaLabel ?? title, icon: value ? _jsx(props.checkedIcon, {}) : props.uncheckedIcon ? _jsx(props.uncheckedIcon, {}) : _jsx(props.checkedIcon, {}), appearance: appearance, checked: value, onClick: toggle }) }));
 };
 //# sourceMappingURL=toggleButton.js.map

package/fluent/primitives/toggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,UAAU,EAAqB,MAAM,4BAA4B,CAAC;AAE/G,OAAO,EAAE,WAAW,EAAE,UAAU,~~EAAE,SAAS,EAAE,QAAQ,~~EAA0B,MAAM,OAAO,CAAC;~~AAE7F~~,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAC;~~AAUH;;;;;;GAMG~~;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,~~CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,~~MAAM,~~MAAM,~~GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,~~UAAU,CAAC,CAAC,WAAW,EAAE,EAAE;YACvB,MAAM,OAAO,GAAG,CAAC,WAAW,CAAC;YAC7B,~~QAAQ,CAAC,~~OAAO,~~CAAC,~~CAAC;YAClB~~,~~OAAO,OAAO,~~CAAC~~;QACnB~~,CAAC~~,CAAC,CAAC~~;~~IACP~~,CAAC,EAAE,CAAC,~~QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,~~KAAK,~~CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,~~EAAE,~~CAAC~~,~~KAAK,~~CAAC,~~KAAK,~~CAAC,CAAC~~,CAAC~~;~~IAElB~~,OAAO,CACH,KAAC,OAAO,IAAC,OAAO,EAAE,KAAK,IAAI,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,gBAAgB,YAC9D,KAAC,kBAAkB,IACf,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,IAAI,EAAE,IAAI,gBACE,SAAS,IAAI,KAAK,EAC9B,IAAI,EAAE,~~OAAO~~,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,~~EAC7G~~,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,~~OAAO~~,~~EAChB~~,OAAO,EAAE,MAAM,GACjB,GACI,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton, makeStyles, type TooltipProps } from \"@fluentui/react-components\";\r\nimport { type ButtonProps } from \"./button\";\r\nimport { useCallback, useContext, ~~useEffect, useState,~~ type FunctionComponent } from \"react\";\r\nimport { type FluentIcon } from \"@fluentui/react-icons\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { Tooltip } from \"./tooltip\";\r\n\r\nconst useStyles = makeStyles({\r\n button: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n});\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" \| \"onClick\"> & {\r\n value: boolean;\r\n checkedIcon: FluentIcon;\r\n uncheckedIcon?: FluentIcon;\r\n onChange: (checked: boolean) => void;\r\n titlePositioning?: TooltipProps[\"positioning\"];\r\n};\r\n\r\n/*\r\n ~~Toggles~~ ~~between~~ ~~two~~ ~~states~~ ~~using a~~ button with icons.\r\n * If no ~~disabledIcon~~ is provided, the ~~button~~ ~~will~~ ~~toggle~~ ~~between~~ ~~visual~~ ~~enabled/disabled~~ states ~~without an icon change\~~r\n \r\n @param props\r\n * @returns\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n ToggleButton.displayName = \"ToggleButton\";\r\n const { value, onChange, title, appearance = \"subtle\", ariaLabel } = props;\r\n const { size } = useContext(ToolContext);\r\n const classes = useStyles();\r\n const ~~[checked, setChecked] = useState(value);\r\n const~~ toggle = useCallback(() => {\r\n ~~setChecked~~(~~(prevChecked) => {\r\n const enabled =~~ !~~prevChecked;\r\n onChange(enabled~~);\r\n ~~return enabled;\r\n });\r\n~~ }, [~~onChange]);\r\n\r\n useEffect(() => {\r\n setChecked(props.~~value~~);\r\n }~~, ~~[props.value~~]);\r\n\r\n return (\r\n <Tooltip content={title ?? \"\"} positioning={props.titlePositioning}>\r\n <FluentToggleButton\r\n className={classes.button}\r\n size={size}\r\n aria-label={ariaLabel ?? title}\r\n icon={~~checked~~ ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n appearance={appearance}\r\n checked={~~checked~~}\r\n onClick={toggle}\r\n />\r\n </Tooltip>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"toggleButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/toggleButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,IAAI,kBAAkB,EAAE,UAAU,EAAqB,MAAM,4BAA4B,CAAC;AAE/G,OAAO,EAAE,WAAW,EAAE,UAAU,EAA0B,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KAC3B;CACJ,CAAC,CAAC;AAYH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACxE,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;IAC1C,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5B,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,OAAO,CACH,KAAC,OAAO,IAAC,OAAO,EAAE,KAAK,IAAI,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,gBAAgB,YAC9D,KAAC,kBAAkB,IACf,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,IAAI,EAAE,IAAI,gBACE,SAAS,IAAI,KAAK,EAC9B,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,KAAK,CAAC,WAAW,KAAG,EAC3G,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,MAAM,GACjB,GACI,CACb,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { ToggleButton as FluentToggleButton, makeStyles, type TooltipProps } from \"@fluentui/react-components\";\r\nimport { type ButtonProps } from \"./button\";\r\nimport { useCallback, useContext, type FunctionComponent } from \"react\";\r\nimport { type FluentIcon } from \"@fluentui/react-icons\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\nimport { Tooltip } from \"./tooltip\";\r\n\r\nconst useStyles = makeStyles({\r\n button: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n});\r\n\r\ntype ToggleButtonProps = Omit<ButtonProps, \"icon\" \| \"onClick\"> & {\r\n /** The checked state supplied by the parent. /\r\n value: boolean;\r\n checkedIcon: FluentIcon;\r\n uncheckedIcon?: FluentIcon;\r\n /* Requests a new checked state. The parent must update value to accept the change. /\r\n onChange: (checked: boolean) => void;\r\n titlePositioning?: TooltipProps[\"positioning\"];\r\n};\r\n\r\n/\r\n Displays a controlled toggle button with icons.\r\n * The parent supplies the checked state through value; clicks request the opposite value through onChange.\r\n * If no uncheckedIcon is provided, the same icon is used for both states.\r\n \r\n @param props The controlled state, change callback, icons, and button presentation.\r\n * @returns The toggle button.\r\n */\r\nexport const ToggleButton: FunctionComponent<ToggleButtonProps> = (props) => {\r\n ToggleButton.displayName = \"ToggleButton\";\r\n const { value, onChange, title, appearance = \"subtle\", ariaLabel } = props;\r\n const { size } = useContext(ToolContext);\r\n const classes = useStyles();\r\n const toggle = useCallback(() => {\r\n onChange(!value);\r\n }, [value, onChange]);\r\n\r\n return (\r\n <Tooltip content={title ?? \"\"} positioning={props.titlePositioning}>\r\n <FluentToggleButton\r\n className={classes.button}\r\n size={size}\r\n aria-label={ariaLabel ?? title}\r\n icon={value ? <props.checkedIcon /> : props.uncheckedIcon ? <props.uncheckedIcon /> : <props.checkedIcon />}\r\n appearance={appearance}\r\n checked={value}\r\n onClick={toggle}\r\n />\r\n </Tooltip>\r\n );\r\n};\r\n"]}

package/lines/buttonLineComponent.js CHANGED Viewed

@@ -12,7 +12,7 @@ export class ButtonLineComponent extends React.Component {
         return _jsx(ButtonLine, { label: this.props.label, icon: fluentIcon, onClick: this.props.onClick, disabled: this.props.isDisabled });
     }
     renderOriginal() {
-        return (_jsxs("div", { className: "buttonLine" + (this.props.isDisabled ? " disabled" : ""), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("button", { onClick: () => this.props.onClick(), children: this.props.label })] }));
+        return (_jsxs("div", { className: "buttonLine" + (this.props.isDisabled ? " disabled" : ""), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("button", { disabled: this.props.isDisabled, onClick: () => this.props.onClick(), children: this.props.label })] }));
     }
     render() {
         return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });

package/lines/buttonLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"buttonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/buttonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAU9D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,YAAY;QACR,+FAA+F;QAC/F,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9J,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAI,CAAC;IACnI,CAAC;IACD,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,aACpE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,~~YAAG~~,IAAI,CAAC,KAAK,CAAC,KAAK,~~GAAU~~,~~IACtE~~,CACT,CAAC;IACN,CAAC;IAEQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { ButtonLine } from \"../fluent/hoc/buttonLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n label: string;\r\n onClick: () => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n isDisabled?: boolean;\r\n}\r\n\r\nexport class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {\r\n constructor(props: IButtonLineComponentProps) {\r\n super(props);\r\n }\r\n\r\n renderFluent() {\r\n // NOTE when callsit replaces usage of this with the ButtonLine, can pass in a true fluent icon\r\n const fluentIcon = this.props.icon ? () => <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" /> : undefined;\r\n return <ButtonLine label={this.props.label} icon={fluentIcon} onClick={this.props.onClick} disabled={this.props.isDisabled} />;\r\n }\r\n renderOriginal() {\r\n return (\r\n <div className={\"buttonLine\" + (this.props.isDisabled ? \" disabled\" : \"\")}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <button onClick={() => this.props.onClick()}>{this.props.label}</button>\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"buttonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/buttonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAU9D,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,YAAY;QACR,+FAA+F;QAC/F,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAC9J,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAI,CAAC;IACnI,CAAC;IACD,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,aACpE,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,iBAAQ,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YACvE,IAAI,CAAC,KAAK,CAAC,KAAK,GACZ,IACP,CACT,CAAC;IACN,CAAC;IAEQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { ButtonLine } from \"../fluent/hoc/buttonLine\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IButtonLineComponentProps {\r\n label: string;\r\n onClick: () => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n isDisabled?: boolean;\r\n}\r\n\r\nexport class ButtonLineComponent extends React.Component<IButtonLineComponentProps> {\r\n constructor(props: IButtonLineComponentProps) {\r\n super(props);\r\n }\r\n\r\n renderFluent() {\r\n // NOTE when callsit replaces usage of this with the ButtonLine, can pass in a true fluent icon\r\n const fluentIcon = this.props.icon ? () => <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" /> : undefined;\r\n return <ButtonLine label={this.props.label} icon={fluentIcon} onClick={this.props.onClick} disabled={this.props.isDisabled} />;\r\n }\r\n renderOriginal() {\r\n return (\r\n <div className={\"buttonLine\" + (this.props.isDisabled ? \" disabled\" : \"\")}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <button disabled={this.props.isDisabled} onClick={() => this.props.onClick()}>\r\n {this.props.label}\r\n </button>\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n }\r\n}\r\n"]}

package/lite/fluent/hoc/propertyLines/vectorPropertyLine.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { eulerToQuat, quatToEulerXYZ } from "@babylonjs/lite";
+import { eulerXYZToQuatTuple, quatToEulerXYZTuple } from "@babylonjs/lite";
 import { ControlledQuaternionPropertyLine, ControlledRotationVectorPropertyLine, ControlledTensorPropertyLine, } from "../../../../fluent/hoc/propertyLines/vectorPropertyLineCore.js";
 const ComponentIndices = {
     x: 0,
@@ -69,7 +69,7 @@ const QuaternionTensorAdapter = {
  */
 export function CreateQuaternionFromEuler(value, source) {
     const [x, y, z] = "x" in value ? [value.x, value.y, value.z] : value;
-    const quaternion = eulerToQuat(x, y, z);
+    const quaternion = eulerXYZToQuatTuple(x, y, z);
     return "x" in source ? { x: quaternion[0], y: quaternion[1], z: quaternion[2], w: quaternion[3] } : quaternion;
 }
 const QuaternionAdapter = {
@@ -78,7 +78,7 @@ const QuaternionAdapter = {
     fromEuler: CreateQuaternionFromEuler,
     toEuler: (value) => {
         const [x, y, z, w] = "x" in value ? [value.x, value.y, value.z, value.w] : value;
-        return quatToEulerXYZ(x, y, z, w);
+        return quatToEulerXYZTuple(x, y, z, w);
     },
 };
 export const Vector2PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector2Adapter });

package/lite/fluent/hoc/propertyLines/vectorPropertyLine.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../../dev/sharedUiComponents/src/lite/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,cAAc,EAA8C,MAAM,iBAAiB,CAAC;AAG1G,OAAO,EACH,gCAAgC,EAChC,oCAAoC,EACpC,4BAA4B,GAK/B,MAAM,sEAAsE,CAAC;AAS9E,MAAM,gBAAgB,GAA8C;IAChE,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACP,CAAC;AAIF,SAAS,aAAa,CAAC,KAAmE;IACtF,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,YAAY,CAAC,KAAmE,EAAE,SAA0B;IACjH,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9C,CAAC;IACD,QAAQ,SAAS,EAAE,CAAC;QAChB,KAAK,GAAG;YACJ,OAAO,KAAK,CAAC,CAAC,CAAC;QACnB,KAAK,GAAG;YACJ,OAAO,KAAK,CAAC,CAAC,CAAC;QACnB,KAAK,GAAG;YACJ,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,KAAK,GAAG;YACJ,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC;AACL,CAAC;AAED,MAAM,cAAc,GAAqC;IACrD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;IACtB,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACxK,CAAC;AACF,MAAM,cAAc,GAAqC;IACrD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IAC3B,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC;QAChB,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC/I,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACtD,CAAC;AACF,MAAM,cAAc,GAAqC;IACrD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IAChC,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC;QAChB,CAAC,CAAC;YACI,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;SAChD;QACH,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACtD,CAAC;AACF,MAAM,uBAAuB,GAAwC;IACjE,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IAChC,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC;QAChB,CAAC,CAAC;YACI,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;SAChD;QACH,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACtD,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAmB,EAAE,MAAuB;IAClF,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrE,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACxC,OAAO,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AACnH,CAAC;AAED,MAAM,iBAAiB,GAA0D;IAC7E,UAAU,EAAE,uBAAuB;IACnC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,yBAAyB;IACpC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACjF,OAAO,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACtC,CAAC;CACJ,CAAC;AAWF,MAAM,CAAC,MAAM,mBAAmB,GAA6D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAAC;AAC7K,MAAM,CAAC,MAAM,mBAAmB,GAA6D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAAC;AAC7K,MAAM,CAAC,MAAM,mBAAmB,GAA6D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAAC;AAC7K,MAAM,CAAC,MAAM,0BAA0B,GAAuD,CAAC,KAAK,EAAE,EAAE,CAAC,CACrG,KAAC,oCAAoC,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAC/E,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAmD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,gCAAgC,OAAK,KAAK,EAAE,OAAO,EAAE,iBAAiB,GAAI,CAAC","sourcesContent":["import { eulerToQuat, quatToEulerXYZ, type Quat, type Vec2, type Vec3, type Vec4 } from \"@babylonjs/lite\";\r\nimport { type FunctionComponent } from \"react\";\r\n\r\nimport {\r\n ControlledQuaternionPropertyLine,\r\n ControlledRotationVectorPropertyLine,\r\n ControlledTensorPropertyLine,\r\n type QuaternionValueAdapter,\r\n type TensorComponent,\r\n type TensorPropertyLineProps as RuntimeNeutralTensorPropertyLineProps,\r\n type TensorValueAdapter,\r\n} from \"shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLineCore\";\r\n\r\nexport type Vector2Value = Vec2 \| readonly [number, number];\r\nexport type Vector3Value = Vec3 \| readonly [number, number, number];\r\nexport type Vector4Value = Vec4 \| readonly [number, number, number, number];\r\nexport type QuaternionValue = Quat \| readonly [number, number, number, number];\r\n\r\nexport type TensorPropertyLineProps<ValueT extends Vector2Value \| Vector3Value \| Vector4Value \| QuaternionValue> = RuntimeNeutralTensorPropertyLineProps<ValueT>;\r\n\r\nconst ComponentIndices: Readonly<Record<TensorComponent, number>> = {\r\n x: 0,\r\n y: 1,\r\n z: 2,\r\n w: 3,\r\n};\r\n\r\ntype TupleValue = readonly [number, number] \| readonly [number, number, number] \| readonly [number, number, number, number];\r\n\r\nfunction IsNumberTuple(value: Vector2Value \| Vector3Value \| Vector4Value \| QuaternionValue): value is TupleValue {\r\n return Array.isArray(value);\r\n}\r\n\r\nfunction GetComponent(value: Vector2Value \| Vector3Value \| Vector4Value \| QuaternionValue, component: TensorComponent): number {\r\n if (IsNumberTuple(value)) {\r\n return value[ComponentIndices[component]];\r\n }\r\n switch (component) {\r\n case \"x\":\r\n return value.x;\r\n case \"y\":\r\n return value.y;\r\n case \"z\":\r\n return \"z\" in value ? value.z : 0;\r\n case \"w\":\r\n return \"w\" in value ? value.w : 0;\r\n }\r\n}\r\n\r\nconst Vector2Adapter: TensorValueAdapter<Vector2Value> = {\r\n components: [\"x\", \"y\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value) ? [component === \"x\" ? componentValue : value[0], component === \"y\" ? componentValue : value[1]] : { ...value, [component]: componentValue },\r\n};\r\nconst Vector3Adapter: TensorValueAdapter<Vector3Value> = {\r\n components: [\"x\", \"y\", \"z\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value)\r\n ? [component === \"x\" ? componentValue : value[0], component === \"y\" ? componentValue : value[1], component === \"z\" ? componentValue : value[2]]\r\n : { ...value, [component]: componentValue },\r\n};\r\nconst Vector4Adapter: TensorValueAdapter<Vector4Value> = {\r\n components: [\"x\", \"y\", \"z\", \"w\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value)\r\n ? [\r\n component === \"x\" ? componentValue : value[0],\r\n component === \"y\" ? componentValue : value[1],\r\n component === \"z\" ? componentValue : value[2],\r\n component === \"w\" ? componentValue : value[3],\r\n ]\r\n : { ...value, [component]: componentValue },\r\n};\r\nconst QuaternionTensorAdapter: TensorValueAdapter<QuaternionValue> = {\r\n components: [\"x\", \"y\", \"z\", \"w\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value)\r\n ? [\r\n component === \"x\" ? componentValue : value[0],\r\n component === \"y\" ? componentValue : value[1],\r\n component === \"z\" ? componentValue : value[2],\r\n component === \"w\" ? componentValue : value[3],\r\n ]\r\n : { ...value, [component]: componentValue },\r\n};\r\n\r\n/*\r\n Converts a Lite Euler value to a quaternion while preserving tuple versus structural representation.\r\n * @param value The Euler value in radians.\r\n * @param source The source quaternion whose representation should be preserved.\r\n * @returns The converted quaternion.\r\n */\r\nexport function CreateQuaternionFromEuler(value: Vector3Value, source: QuaternionValue): QuaternionValue {\r\n const [x, y, z] = \"x\" in value ? [value.x, value.y, value.z] : value;\r\n const quaternion = eulerToQuat(x, y, z);\r\n return \"x\" in source ? { x: quaternion[0], y: quaternion[1], z: quaternion[2], w: quaternion[3] } : quaternion;\r\n}\r\n\r\nconst QuaternionAdapter: QuaternionValueAdapter<QuaternionValue, Vector3Value> = {\r\n quaternion: QuaternionTensorAdapter,\r\n euler: Vector3Adapter,\r\n fromEuler: CreateQuaternionFromEuler,\r\n toEuler: (value) => {\r\n const [x, y, z, w] = \"x\" in value ? [value.x, value.y, value.z, value.w] : value;\r\n return quatToEulerXYZ(x, y, z, w);\r\n },\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3Value> & {\r\n useDegrees?: boolean;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<QuaternionValue> & {\r\n useDegrees?: boolean;\r\n useEuler?: boolean;\r\n};\r\n\r\nexport const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector2Adapter} />;\r\nexport const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector3Adapter} />;\r\nexport const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector4Adapter} />;\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => (\r\n <ControlledRotationVectorPropertyLine {...props} adapter={Vector3Adapter} />\r\n);\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => <ControlledQuaternionPropertyLine {...props} adapter={QuaternionAdapter} />;\r\n"]}
1	+ {"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../../dev/sharedUiComponents/src/lite/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAA8C,MAAM,iBAAiB,CAAC;AAGvH,OAAO,EACH,gCAAgC,EAChC,oCAAoC,EACpC,4BAA4B,GAK/B,MAAM,sEAAsE,CAAC;AAS9E,MAAM,gBAAgB,GAA8C;IAChE,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACP,CAAC;AAIF,SAAS,aAAa,CAAC,KAAmE;IACtF,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,YAAY,CAAC,KAAmE,EAAE,SAA0B;IACjH,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;QACvB,OAAO,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9C,CAAC;IACD,QAAQ,SAAS,EAAE,CAAC;QAChB,KAAK,GAAG;YACJ,OAAO,KAAK,CAAC,CAAC,CAAC;QACnB,KAAK,GAAG;YACJ,OAAO,KAAK,CAAC,CAAC,CAAC;QACnB,KAAK,GAAG;YACJ,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,KAAK,GAAG;YACJ,OAAO,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,CAAC;AACL,CAAC;AAED,MAAM,cAAc,GAAqC;IACrD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;IACtB,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACxK,CAAC;AACF,MAAM,cAAc,GAAqC;IACrD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IAC3B,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC;QAChB,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC/I,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACtD,CAAC;AACF,MAAM,cAAc,GAAqC;IACrD,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IAChC,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC;QAChB,CAAC,CAAC;YACI,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;SAChD;QACH,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACtD,CAAC;AACF,MAAM,uBAAuB,GAAwC;IACjE,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;IAChC,YAAY,EAAE,YAAY;IAC1B,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,CAChD,aAAa,CAAC,KAAK,CAAC;QAChB,CAAC,CAAC;YACI,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC7C,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;SAChD;QACH,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,cAAc,EAAE;CACtD,CAAC;AAEF;;;;;GAKG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAmB,EAAE,MAAuB;IAClF,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACrE,MAAM,UAAU,GAAG,mBAAmB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAChD,OAAO,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;AACnH,CAAC;AAED,MAAM,iBAAiB,GAA0D;IAC7E,UAAU,EAAE,uBAAuB;IACnC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,yBAAyB;IACpC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACjF,OAAO,mBAAmB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC3C,CAAC;CACJ,CAAC;AAWF,MAAM,CAAC,MAAM,mBAAmB,GAA6D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAAC;AAC7K,MAAM,CAAC,MAAM,mBAAmB,GAA6D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAAC;AAC7K,MAAM,CAAC,MAAM,mBAAmB,GAA6D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,4BAA4B,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAAC;AAC7K,MAAM,CAAC,MAAM,0BAA0B,GAAuD,CAAC,KAAK,EAAE,EAAE,CAAC,CACrG,KAAC,oCAAoC,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAC/E,CAAC;AACF,MAAM,CAAC,MAAM,sBAAsB,GAAmD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,gCAAgC,OAAK,KAAK,EAAE,OAAO,EAAE,iBAAiB,GAAI,CAAC","sourcesContent":["import { eulerXYZToQuatTuple, quatToEulerXYZTuple, type Quat, type Vec2, type Vec3, type Vec4 } from \"@babylonjs/lite\";\r\nimport { type FunctionComponent } from \"react\";\r\n\r\nimport {\r\n ControlledQuaternionPropertyLine,\r\n ControlledRotationVectorPropertyLine,\r\n ControlledTensorPropertyLine,\r\n type QuaternionValueAdapter,\r\n type TensorComponent,\r\n type TensorPropertyLineProps as RuntimeNeutralTensorPropertyLineProps,\r\n type TensorValueAdapter,\r\n} from \"shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLineCore\";\r\n\r\nexport type Vector2Value = Vec2 \| readonly [number, number];\r\nexport type Vector3Value = Vec3 \| readonly [number, number, number];\r\nexport type Vector4Value = Vec4 \| readonly [number, number, number, number];\r\nexport type QuaternionValue = Quat \| readonly [number, number, number, number];\r\n\r\nexport type TensorPropertyLineProps<ValueT extends Vector2Value \| Vector3Value \| Vector4Value \| QuaternionValue> = RuntimeNeutralTensorPropertyLineProps<ValueT>;\r\n\r\nconst ComponentIndices: Readonly<Record<TensorComponent, number>> = {\r\n x: 0,\r\n y: 1,\r\n z: 2,\r\n w: 3,\r\n};\r\n\r\ntype TupleValue = readonly [number, number] \| readonly [number, number, number] \| readonly [number, number, number, number];\r\n\r\nfunction IsNumberTuple(value: Vector2Value \| Vector3Value \| Vector4Value \| QuaternionValue): value is TupleValue {\r\n return Array.isArray(value);\r\n}\r\n\r\nfunction GetComponent(value: Vector2Value \| Vector3Value \| Vector4Value \| QuaternionValue, component: TensorComponent): number {\r\n if (IsNumberTuple(value)) {\r\n return value[ComponentIndices[component]];\r\n }\r\n switch (component) {\r\n case \"x\":\r\n return value.x;\r\n case \"y\":\r\n return value.y;\r\n case \"z\":\r\n return \"z\" in value ? value.z : 0;\r\n case \"w\":\r\n return \"w\" in value ? value.w : 0;\r\n }\r\n}\r\n\r\nconst Vector2Adapter: TensorValueAdapter<Vector2Value> = {\r\n components: [\"x\", \"y\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value) ? [component === \"x\" ? componentValue : value[0], component === \"y\" ? componentValue : value[1]] : { ...value, [component]: componentValue },\r\n};\r\nconst Vector3Adapter: TensorValueAdapter<Vector3Value> = {\r\n components: [\"x\", \"y\", \"z\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value)\r\n ? [component === \"x\" ? componentValue : value[0], component === \"y\" ? componentValue : value[1], component === \"z\" ? componentValue : value[2]]\r\n : { ...value, [component]: componentValue },\r\n};\r\nconst Vector4Adapter: TensorValueAdapter<Vector4Value> = {\r\n components: [\"x\", \"y\", \"z\", \"w\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value)\r\n ? [\r\n component === \"x\" ? componentValue : value[0],\r\n component === \"y\" ? componentValue : value[1],\r\n component === \"z\" ? componentValue : value[2],\r\n component === \"w\" ? componentValue : value[3],\r\n ]\r\n : { ...value, [component]: componentValue },\r\n};\r\nconst QuaternionTensorAdapter: TensorValueAdapter<QuaternionValue> = {\r\n components: [\"x\", \"y\", \"z\", \"w\"],\r\n getComponent: GetComponent,\r\n withComponent: (value, component, componentValue) =>\r\n IsNumberTuple(value)\r\n ? [\r\n component === \"x\" ? componentValue : value[0],\r\n component === \"y\" ? componentValue : value[1],\r\n component === \"z\" ? componentValue : value[2],\r\n component === \"w\" ? componentValue : value[3],\r\n ]\r\n : { ...value, [component]: componentValue },\r\n};\r\n\r\n/*\r\n Converts a Lite Euler value to a quaternion while preserving tuple versus structural representation.\r\n * @param value The Euler value in radians.\r\n * @param source The source quaternion whose representation should be preserved.\r\n * @returns The converted quaternion.\r\n */\r\nexport function CreateQuaternionFromEuler(value: Vector3Value, source: QuaternionValue): QuaternionValue {\r\n const [x, y, z] = \"x\" in value ? [value.x, value.y, value.z] : value;\r\n const quaternion = eulerXYZToQuatTuple(x, y, z);\r\n return \"x\" in source ? { x: quaternion[0], y: quaternion[1], z: quaternion[2], w: quaternion[3] } : quaternion;\r\n}\r\n\r\nconst QuaternionAdapter: QuaternionValueAdapter<QuaternionValue, Vector3Value> = {\r\n quaternion: QuaternionTensorAdapter,\r\n euler: Vector3Adapter,\r\n fromEuler: CreateQuaternionFromEuler,\r\n toEuler: (value) => {\r\n const [x, y, z, w] = \"x\" in value ? [value.x, value.y, value.z, value.w] : value;\r\n return quatToEulerXYZTuple(x, y, z, w);\r\n },\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3Value> & {\r\n useDegrees?: boolean;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<QuaternionValue> & {\r\n useDegrees?: boolean;\r\n useEuler?: boolean;\r\n};\r\n\r\nexport const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector2Adapter} />;\r\nexport const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector3Adapter} />;\r\nexport const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4Value>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector4Adapter} />;\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => (\r\n <ControlledRotationVectorPropertyLine {...props} adapter={Vector3Adapter} />\r\n);\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => <ControlledQuaternionPropertyLine {...props} adapter={QuaternionAdapter} />;\r\n"]}

package/nodeGraphSystem/graphCanvas.d.ts CHANGED Viewed

@@ -74,6 +74,7 @@ export declare class GraphCanvasComponent extends React.Component<IGraphCanvasCo
     private _keyUpHandler;
     private _keyDownHandler;
     private _blurHandler;
+    private _onFocusNodeObserver;
     _frameIsMoving: boolean;
     _isLoading: boolean;
     _targetLinkCandidate: Nullable<NodeLink>;
@@ -140,7 +141,7 @@ export declare class GraphCanvasComponent extends React.Component<IGraphCanvasCo
     onWheel(evt: React.WheelEvent): void;
     zoomToFit(): void;
     /**
-     * Pans the canvas so the given node is visible and roughly centered.
+     * Reveals and centers the given node without changing selection or zoom.
      * @param node - the node to bring into view
      */
     zoomToNode(node: GraphNode): void;

package/nodeGraphSystem/graphCanvas.js CHANGED Viewed

@@ -155,6 +155,7 @@ export class GraphCanvasComponent extends React.Component {
         this._keyUpHandler = null;
         this._keyDownHandler = null;
         this._blurHandler = null;
+        this._onFocusNodeObserver = null;
         this._frameIsMoving = false;
         this._isLoading = false;
         this._targetLinkCandidate = null;
@@ -820,10 +821,19 @@ export class GraphCanvasComponent extends React.Component {
         this._svgCanvas = this._svgCanvasRef.current;
         this._selectionContainer = this._selectionContainerRef.current;
         this._frameContainer = this._frameContainerRef.current;
+        this._onFocusNodeObserver = this.stateManager.onFocusNodeObservable.add((data) => {
+            const node = this.findNodeFromData(data);
+            if (!node) {
+                this.stateManager.onErrorMessageDialogRequiredObservable.notifyObservers("The referenced node is not available in the graph.");
+                return;
+            }
+            this.zoomToNode(node);
+        });
         this.gridSize = DataStorage.ReadNumber("GridSize", 20);
         this.updateTransform();
     }
     componentWillUnmount() {
+        this.stateManager.onFocusNodeObservable.remove(this._onFocusNodeObserver);
         const doc = this.props.stateManager.hostDocument;
         if (this._keyUpHandler) {
             doc.removeEventListener("keyup", this._keyUpHandler);
@@ -1112,14 +1122,17 @@ export class GraphCanvasComponent extends React.Component {
         this.y = 0;
     }
     /**
-     * Pans the canvas so the given node is visible and roughly centered.
+     * Reveals and centers the given node without changing selection or zoom.
      * @param node - the node to bring into view
      */
     zoomToNode(node) {
-        const containerWidth = this._rootContainer.clientWidth;
-        const containerHeight = this._rootContainer.clientHeight;
-        this.x = -node.x + containerWidth / (2 * this.zoom) - 100;
-        this.y = -node.y + containerHeight / (2 * this.zoom) - 20;
+        for (const frame of this.frames) {
+            if (frame.isCollapsed && frame.nodes.includes(node)) {
+                frame.isCollapsed = false;
+            }
+        }
+        this.x = this._hostCanvas.clientWidth / 2 - (node.x + node.width / 2) * this.zoom;
+        this.y = this._hostCanvas.clientHeight / 2 - (node.y + node.height / 2) * this.zoom;
     }
     processCandidatePort() {
         let pointB = this._candidateLink.portA.portData;