@babylonjs/shared-ui-components 6.38.0 → 6.39.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 (35) hide show
  1. package/components/MessageDialog.js +1 -0
  2. package/components/MessageDialog.js.map +1 -1
  3. package/components/TextInputWithSubmit.js +1 -2
  4. package/components/TextInputWithSubmit.js.map +1 -1
  5. package/components/Toggle.js +6 -6
  6. package/components/Toggle.js.map +1 -1
  7. package/components/layout/FlexibleTabsContainer.js +1 -1
  8. package/components/layout/FlexibleTabsContainer.js.map +1 -1
  9. package/components/lines/OptionsLineComponent.js +2 -4
  10. package/components/lines/OptionsLineComponent.js.map +1 -1
  11. package/components/reactGraphSystem/GraphNodesContainer.js +1 -2
  12. package/components/reactGraphSystem/GraphNodesContainer.js.map +1 -1
  13. package/components/reactGraphSystem/NodeRenderer.js +1 -0
  14. package/components/reactGraphSystem/NodeRenderer.js.map +1 -1
  15. package/lines/checkBoxLineComponent.js +10 -10
  16. package/lines/checkBoxLineComponent.js.map +1 -1
  17. package/lines/colorPickerComponent.js +1 -2
  18. package/lines/colorPickerComponent.js.map +1 -1
  19. package/lines/hexLineComponent.js +1 -2
  20. package/lines/hexLineComponent.js.map +1 -1
  21. package/lines/inputArrowsComponent.js +9 -12
  22. package/lines/inputArrowsComponent.js.map +1 -1
  23. package/lines/optionsLineComponent.js +1 -2
  24. package/lines/optionsLineComponent.js.map +1 -1
  25. package/lines/textInputLineComponent.js +1 -2
  26. package/lines/textInputLineComponent.js.map +1 -1
  27. package/lines/textLineComponent.js +1 -2
  28. package/lines/textLineComponent.js.map +1 -1
  29. package/nodeGraphSystem/graphCanvas.js +4 -6
  30. package/nodeGraphSystem/graphCanvas.js.map +1 -1
  31. package/nodeGraphSystem/graphFrame.js +3 -6
  32. package/nodeGraphSystem/graphFrame.js.map +1 -1
  33. package/nodeGraphSystem/tools.js +1 -1
  34. package/nodeGraphSystem/tools.js.map +1 -1
  35. package/package.json +1 -1
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ /* eslint-disable @typescript-eslint/naming-convention */
2
3
  import { useState, useEffect } from "react";
3
4
  import { ClassNames } from "./classNames.js";
4
5
  import styles from "./MessageDialog.modules.scss";
@@ -1 +1 @@
1
- {"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/MessageDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAQlD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,YACtC,eAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,aAC5B,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YAAG,OAAO,GAAO,EACzD,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YACpC,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,mBAE5F,GACJ,IACJ,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useState, useEffect } from \"react\";\r\nimport * as React from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./MessageDialog.modules.scss\";\r\n\r\nexport interface MessageDialogProps {\r\n message: string;\r\n isError: boolean;\r\n onClose?: () => void;\r\n}\r\n\r\nexport const MessageDialog: React.FC<MessageDialogProps> = (props) => {\r\n const [message, setMessage] = useState(props.message);\r\n const [isError, setIsError] = useState(props.isError);\r\n\r\n useEffect(() => {\r\n setMessage(props.message);\r\n setIsError(props.isError);\r\n }, [props]);\r\n\r\n const onClick = () => {\r\n setMessage(\"\");\r\n if (props.onClose) {\r\n props.onClose();\r\n }\r\n };\r\n\r\n if (!message) {\r\n return null;\r\n }\r\n\r\n return (\r\n <div className={styles[\"dialog-container\"]}>\r\n <div className={styles[\"dialog\"]}>\r\n <div className={styles[\"dialog-message\"]}>{message}</div>\r\n <div className={styles[\"dialog-buttons\"]}>\r\n <div className={ClassNames({ \"dialog-button-ok\": true, error: isError }, styles)} onClick={onClick}>\r\n OK\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/MessageDialog.tsx"],"names":[],"mappings":";AAAA,yDAAyD;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAQlD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,YACtC,eAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,aAC5B,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YAAG,OAAO,GAAO,EACzD,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YACpC,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,mBAE5F,GACJ,IACJ,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect } from \"react\";\r\nimport * as React from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./MessageDialog.modules.scss\";\r\n\r\nexport interface MessageDialogProps {\r\n message: string;\r\n isError: boolean;\r\n onClose?: () => void;\r\n}\r\n\r\nexport const MessageDialog: React.FC<MessageDialogProps> = (props) => {\r\n const [message, setMessage] = useState(props.message);\r\n const [isError, setIsError] = useState(props.isError);\r\n\r\n useEffect(() => {\r\n setMessage(props.message);\r\n setIsError(props.isError);\r\n }, [props]);\r\n\r\n const onClick = () => {\r\n setMessage(\"\");\r\n if (props.onClose) {\r\n props.onClose();\r\n }\r\n };\r\n\r\n if (!message) {\r\n return null;\r\n }\r\n\r\n return (\r\n <div className={styles[\"dialog-container\"]}>\r\n <div className={styles[\"dialog\"]}>\r\n <div className={styles[\"dialog-message\"]}>{message}</div>\r\n <div className={styles[\"dialog-buttons\"]}>\r\n <div className={ClassNames({ \"dialog-button-ok\": true, error: isError }, styles)} onClick={onClick}>\r\n OK\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
@@ -22,8 +22,7 @@ export const TextInputWithSubmit = (props) => {
22
22
  props.submitValue(value);
23
23
  };
24
24
  const onClickCancel = () => {
25
- var _a;
26
- (_a = props.cancelSubmit) === null || _a === void 0 ? void 0 : _a.call(props);
25
+ props.cancelSubmit?.();
27
26
  setValue("");
28
27
  };
29
28
  return (_jsxs("div", { className: ClassNames({ line: true, valid, invalid: !valid }, style), children: [props.label && _jsx("label", { children: props.label }), _jsx("input", { className: style.input, type: "text", placeholder: props.placeholder, value: value, onChange: onChange }), _jsxs("div", { children: [_jsx(Button, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickSubmit, disabled: !valid, children: _jsx(Icon, { icon: submitIcon, color: "dark" }) }), _jsx(Button, { color: "light", size: "smaller", backgroundColor: "inherit", onClick: onClickCancel, children: _jsx(Icon, { icon: cancelIcon, color: "dark" }) })] })] }));
@@ -1 +1 @@
1
- {"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAEvD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;;QACvB,MAAA,KAAK,CAAC,YAAY,qDAAI,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YACnG,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YACjF,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport style from \"./TextInputWithSubmit.modules.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n label?: string;\r\n placeholder?: string;\r\n submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/**\r\n * This component represents a text input that can be submitted or cancelled on buttons\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n const [value, setValue] = useState(\"\");\r\n const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n useEffect(() => {\r\n setValid(props.validateValue ? props.validateValue(value) : true);\r\n }, [value]);\r\n\r\n const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setValue(event.target.value);\r\n };\r\n\r\n const onClickSubmit = () => {\r\n props.submitValue(value);\r\n };\r\n\r\n const onClickCancel = () => {\r\n props.cancelSubmit?.();\r\n setValue(\"\");\r\n };\r\n\r\n return (\r\n <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n {props.label && <label>{props.label}</label>}\r\n <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n <div>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n </Button>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAEvD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,YAAY,EAAE,EAAE,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YACnG,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YACjF,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport style from \"./TextInputWithSubmit.modules.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n label?: string;\r\n placeholder?: string;\r\n submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/**\r\n * This component represents a text input that can be submitted or cancelled on buttons\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n const [value, setValue] = useState(\"\");\r\n const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n useEffect(() => {\r\n setValid(props.validateValue ? props.validateValue(value) : true);\r\n }, [value]);\r\n\r\n const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setValue(event.target.value);\r\n };\r\n\r\n const onClickSubmit = () => {\r\n props.submitValue(value);\r\n };\r\n\r\n const onClickCancel = () => {\r\n props.cancelSubmit?.();\r\n setValue(\"\");\r\n };\r\n\r\n return (\r\n <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n {props.label && <label>{props.label}</label>}\r\n <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n <div>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n </Button>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
@@ -1,14 +1,14 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import styles from "./Toggle.modules.scss";
3
3
  import { ClassNames } from "./classNames.js";
4
- import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
5
- import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
6
- import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
4
+ import toggleOnIcon30px from "../imgs/toggleOnIcon_30px.svg";
5
+ import toggleMixedIcon30px from "../imgs/toggleMixedIcon_30px.svg";
6
+ import toggleOffIcon30px from "../imgs/toggleOffIcon_30px.svg";
7
7
  import { Icon } from "./Icon.js";
8
8
  const Icons = {
9
- on: toggleOnIcon_30px,
10
- mixed: toggleMixedIcon_30px,
11
- off: toggleOffIcon_30px,
9
+ on: toggleOnIcon30px,
10
+ mixed: toggleMixedIcon30px,
11
+ off: toggleOffIcon30px,
12
12
  };
13
13
  export const Toggle = ({ color = "dark", toggled = "off", padded = false, onToggle = () => { } }) => {
14
14
  return (_jsxs("label", { className: ClassNames({ toggle: true, padded }, styles), children: [_jsx("input", { type: "checkbox", style: { display: "none" }, checked: toggled === "on", onChange: () => onToggle() }), _jsx(Icon, { icon: Icons[toggled], color: color })] }));
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,KAAK,GAAG;IACV,EAAE,EAAE,iBAAiB;IACrB,KAAK,EAAE,oBAAoB;IAC3B,GAAG,EAAE,kBAAkB;CAC1B,CAAC;AASF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,EAAE;IACtH,OAAO,CACH,iBAAO,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,aAC1D,gBAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAI,EAC5G,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,IACxC,CACX,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"./Toggle.modules.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nimport toggleOnIcon_30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon_30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon_30px from \"../imgs/toggleOffIcon_30px.svg\";\r\nimport { Icon } from \"./Icon\";\r\n\r\nconst Icons = {\r\n on: toggleOnIcon_30px,\r\n mixed: toggleMixedIcon_30px,\r\n off: toggleOffIcon_30px,\r\n};\r\n\r\nexport type ToggleProps = {\r\n toggled: \"on\" | \"mixed\" | \"off\";\r\n onToggle?: () => void;\r\n padded?: boolean;\r\n color?: \"dark\" | \"light\";\r\n};\r\n\r\nexport const Toggle: React.FC<ToggleProps> = ({ color = \"dark\", toggled = \"off\", padded = false, onToggle = () => {} }) => {\r\n return (\r\n <label className={ClassNames({ toggle: true, padded }, styles)}>\r\n <input type=\"checkbox\" style={{ display: \"none\" }} checked={toggled === \"on\"} onChange={() => onToggle()} />\r\n <Icon icon={Icons[toggled]} color={color} />\r\n </label>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,KAAK,GAAG;IACV,EAAE,EAAE,gBAAgB;IACpB,KAAK,EAAE,mBAAmB;IAC1B,GAAG,EAAE,iBAAiB;CACzB,CAAC;AASF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,EAAE;IACtH,OAAO,CACH,iBAAO,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,aAC1D,gBAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAI,EAC5G,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,IACxC,CACX,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"./Toggle.modules.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\nimport { Icon } from \"./Icon\";\r\n\r\nconst Icons = {\r\n on: toggleOnIcon30px,\r\n mixed: toggleMixedIcon30px,\r\n off: toggleOffIcon30px,\r\n};\r\n\r\nexport type ToggleProps = {\r\n toggled: \"on\" | \"mixed\" | \"off\";\r\n onToggle?: () => void;\r\n padded?: boolean;\r\n color?: \"dark\" | \"light\";\r\n};\r\n\r\nexport const Toggle: React.FC<ToggleProps> = ({ color = \"dark\", toggled = \"off\", padded = false, onToggle = () => {} }) => {\r\n return (\r\n <label className={ClassNames({ toggle: true, padded }, styles)}>\r\n <input type=\"checkbox\" style={{ display: \"none\" }} checked={toggled === \"on\"} onChange={() => onToggle()} />\r\n <Icon icon={Icons[toggled]} color={color} />\r\n </label>\r\n );\r\n};\r\n"]}
@@ -49,6 +49,6 @@ export const FlexibleTabsContainer = (props) => {
49
49
  };
50
50
  return (_jsxs("div", { className: style.rootContainer, children: [_jsxs("div", { draggable: false, className: style.tabsLineContainer, children: [_jsx("div", { className: style.tabsContainer, children: tabs.map((tab) => {
51
51
  return (_jsx(FlexibleTab, { title: tab.title, selected: tab.id === selectedTab, onClick: () => selectTab(tab.id), item: { rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }, onTabDroppedAction: (item) => addTabAfter(item, tab.id) }, tab.id));
52
- }) }), _jsx(DraggableIcon, { src: dragIcon, item: { rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }, type: ElementTypes.TAB_GROUP })] }), _jsx("div", { className: style.contentContainer, children: selectedTabObject === null || selectedTabObject === void 0 ? void 0 : selectedTabObject.component })] }));
52
+ }) }), _jsx(DraggableIcon, { src: dragIcon, item: { rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }, type: ElementTypes.TAB_GROUP })] }), _jsx("div", { className: style.contentContainer, children: selectedTabObject?.component })] }));
53
53
  };
54
54
  //# sourceMappingURL=FlexibleTabsContainer.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { FlexibleTab } from \"./FlexibleTab\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport style from \"./FlexibleTabsContainer.modules.scss\";\r\n\r\nimport dragIcon from \"../../imgs/dragDotsIcon_white.svg\";\r\nimport { getPosInLayout, removeLayoutRowAndRedistributePercentages } from \"./utils\";\r\nimport { DraggableIcon } from \"./DraggableIcon\";\r\nimport type { LayoutTab, LayoutTabsRow, TabDrag } from \"./types\";\r\nimport { ElementTypes } from \"./types\";\r\n\r\n/**\r\n * Arguments for the TabsContainer component.\r\n */\r\nexport interface IFlexibleTabsContainerProps {\r\n /**\r\n * The tabs to display\r\n */\r\n tabs: LayoutTab[];\r\n /**\r\n * Row index of component in layout\r\n */\r\n rowIndex: number;\r\n /**\r\n * Column index of component in layout\r\n */\r\n columnIndex: number;\r\n /**\r\n * Which tab is selected in the layout\r\n */\r\n selectedTab?: string;\r\n}\r\n\r\n/**\r\n * This component contains a set of tabs of which only one is visible at a time.\r\n * The tabs can also be dragged from and to different containers.\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n const { tabs, selectedTab } = props;\r\n const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n const selectTab = (tabId: string) => {\r\n const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n layoutPos.selectedTab = tabId;\r\n setLayout({ ...layout });\r\n };\r\n\r\n const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n // Get layout element corresponding to dropped tabs\r\n const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n // Get layout element corresponding to dropzone\r\n const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n for (const { id } of droppedTabItem.tabs) {\r\n const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n // Add dropped tab after dropZoneTabId\r\n const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n // Remove dropped tab from its original position\r\n layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n }\r\n\r\n if (layoutDropped.tabs.length === 0) {\r\n // Check if the layout that was dropped from is empty now\r\n removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n //Check if the layout that was dropped from's active tab is still in the layout\r\n layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n }\r\n\r\n // Update layout\r\n setLayout({ ...layout });\r\n };\r\n\r\n return (\r\n <div className={style.rootContainer}>\r\n <div draggable={false} className={style.tabsLineContainer}>\r\n <div className={style.tabsContainer}>\r\n {tabs.map((tab) => {\r\n return (\r\n <FlexibleTab\r\n key={tab.id}\r\n title={tab.title}\r\n selected={tab.id === selectedTab}\r\n onClick={() => selectTab(tab.id)}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n />\r\n );\r\n })}\r\n </div>\r\n <DraggableIcon\r\n src={dragIcon}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n type={ElementTypes.TAB_GROUP}\r\n />\r\n </div>\r\n <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { FlexibleTab } from \"./FlexibleTab\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport style from \"./FlexibleTabsContainer.modules.scss\";\r\n\r\nimport dragIcon from \"../../imgs/dragDotsIcon_white.svg\";\r\nimport { getPosInLayout, removeLayoutRowAndRedistributePercentages } from \"./utils\";\r\nimport { DraggableIcon } from \"./DraggableIcon\";\r\nimport type { LayoutTab, LayoutTabsRow, TabDrag } from \"./types\";\r\nimport { ElementTypes } from \"./types\";\r\n\r\n/**\r\n * Arguments for the TabsContainer component.\r\n */\r\nexport interface IFlexibleTabsContainerProps {\r\n /**\r\n * The tabs to display\r\n */\r\n tabs: LayoutTab[];\r\n /**\r\n * Row index of component in layout\r\n */\r\n rowIndex: number;\r\n /**\r\n * Column index of component in layout\r\n */\r\n columnIndex: number;\r\n /**\r\n * Which tab is selected in the layout\r\n */\r\n selectedTab?: string;\r\n}\r\n\r\n/**\r\n * This component contains a set of tabs of which only one is visible at a time.\r\n * The tabs can also be dragged from and to different containers.\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n const { tabs, selectedTab } = props;\r\n const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n const selectTab = (tabId: string) => {\r\n const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n layoutPos.selectedTab = tabId;\r\n setLayout({ ...layout });\r\n };\r\n\r\n const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n // Get layout element corresponding to dropped tabs\r\n const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n // Get layout element corresponding to dropzone\r\n const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n for (const { id } of droppedTabItem.tabs) {\r\n const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n // Add dropped tab after dropZoneTabId\r\n const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n // Remove dropped tab from its original position\r\n layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n }\r\n\r\n if (layoutDropped.tabs.length === 0) {\r\n // Check if the layout that was dropped from is empty now\r\n removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n //Check if the layout that was dropped from's active tab is still in the layout\r\n layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n }\r\n\r\n // Update layout\r\n setLayout({ ...layout });\r\n };\r\n\r\n return (\r\n <div className={style.rootContainer}>\r\n <div draggable={false} className={style.tabsLineContainer}>\r\n <div className={style.tabsContainer}>\r\n {tabs.map((tab) => {\r\n return (\r\n <FlexibleTab\r\n key={tab.id}\r\n title={tab.title}\r\n selected={tab.id === selectedTab}\r\n onClick={() => selectTab(tab.id)}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n />\r\n );\r\n })}\r\n </div>\r\n <DraggableIcon\r\n src={dragIcon}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n type={ElementTypes.TAB_GROUP}\r\n />\r\n </div>\r\n <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n </div>\r\n );\r\n};\r\n"]}
@@ -13,7 +13,6 @@ var OptionStates;
13
13
  })(OptionStates || (OptionStates = {}));
14
14
  const _OptionAddKey = "addCustomOption";
15
15
  export const OptionsLineComponent = (props) => {
16
- var _a;
17
16
  const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component
18
17
  const onOptionChange = (evt) => {
19
18
  if (evt.target.value === _OptionAddKey) {
@@ -24,16 +23,15 @@ export const OptionsLineComponent = (props) => {
24
23
  }
25
24
  };
26
25
  const onOptionAdd = (value) => {
27
- var _a;
28
26
  const newOptionText = value;
29
27
  const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };
30
- (_a = props.onOptionAdded) === null || _a === void 0 ? void 0 : _a.call(props, newOption);
28
+ props.onOptionAdded?.(newOption);
31
29
  props.onOptionSelected(newOption.value);
32
30
  setOptionState(OptionStates.Default);
33
31
  };
34
32
  const onCancelOptionAdd = () => {
35
33
  setOptionState(OptionStates.Default);
36
34
  };
37
- return (_jsxs("div", { className: style.optionsLine, children: [optionState === OptionStates.Adding && (_jsx(TextInputWithSubmit, { submitValue: onOptionAdd, placeholder: props.addOptionPlaceholder, validateValue: props.validateNewOptionValue, cancelSubmit: onCancelOptionAdd })), optionState === OptionStates.Default && (_jsxs("select", { className: style.optionsSelect, onChange: onOptionChange, value: props.selectedOptionValue, children: [props.onOptionAdded && (_jsx("option", { value: _OptionAddKey, children: (_a = props.addOptionText) !== null && _a !== void 0 ? _a : "Custom" }, _OptionAddKey)), props.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.id)))] }))] }));
35
+ return (_jsxs("div", { className: style.optionsLine, children: [optionState === OptionStates.Adding && (_jsx(TextInputWithSubmit, { submitValue: onOptionAdd, placeholder: props.addOptionPlaceholder, validateValue: props.validateNewOptionValue, cancelSubmit: onCancelOptionAdd })), optionState === OptionStates.Default && (_jsxs("select", { className: style.optionsSelect, onChange: onOptionChange, value: props.selectedOptionValue, children: [props.onOptionAdded && (_jsx("option", { value: _OptionAddKey, children: props.addOptionText ?? "Custom" }, _OptionAddKey)), props.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.id)))] }))] }));
38
36
  };
39
37
  //# sourceMappingURL=OptionsLineComponent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"OptionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,MAAM,qCAAqC,CAAC;AAsBxD;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAExC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAiC,EAAE,EAAE;;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;IAE/F,MAAM,cAAc,GAAG,CAAC,GAAmC,EAAE,EAAE;QAC3D,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,EAAE;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SACvC;aAAM;YACH,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5C;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC;QAC5B,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC5F,MAAA,KAAK,CAAC,aAAa,sDAAG,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,aAC5B,WAAW,KAAK,YAAY,CAAC,MAAM,IAAI,CACpC,KAAC,mBAAmB,IAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,CAAC,oBAAoB,EACvC,aAAa,EAAE,KAAK,CAAC,sBAAsB,EAC3C,YAAY,EAAE,iBAAiB,GACjC,CACL,EACA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACrC,kBAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,mBAAmB,aAC7F,KAAK,CAAC,aAAa,IAAI,CACpB,iBAA4B,KAAK,EAAE,aAAa,YAC3C,MAAA,KAAK,CAAC,aAAa,mCAAI,QAAQ,IADvB,aAAa,CAEjB,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,iBAAwB,KAAK,EAAE,MAAM,CAAC,KAAK,YACtC,MAAM,CAAC,KAAK,IADJ,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACG,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ChangeEvent } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { TextInputWithSubmit } from \"../TextInputWithSubmit\";\r\nimport style from \"./OptionsLineComponent.modules.scss\";\r\n\r\n/**\r\n * This components represents an options menu with optional\r\n * customizable properties. Option IDs should be unique.\r\n */\r\nexport interface IOption {\r\n label: string;\r\n value: string;\r\n id: string;\r\n}\r\n\r\nexport interface IOptionsLineComponentProps {\r\n options: IOption[];\r\n addOptionPlaceholder?: string; // Placeholder text to display when adding a new option\r\n onOptionAdded?: (newOption: IOption) => void; // Optional function that can be used to add a new option to the menu\r\n onOptionSelected: (selectedOptionValue: string) => void;\r\n selectedOptionValue: string; // The value of the currently selected option\r\n validateNewOptionValue?: (newOptionValue: string) => boolean; // Optional function that can be used to validate the value of a new option\r\n addOptionText?: string; // Optional text to display on the add option button\r\n}\r\n\r\n/**\r\n * We have two possible states. The user starts in the Default option, and can choose to\r\n * add a new option.\r\n */\r\nenum OptionStates {\r\n Default = 0, // Default state,\r\n Adding = 1, // State when the user is adding a new option to the menu\r\n}\r\n\r\nconst _OptionAddKey = \"addCustomOption\";\r\n\r\nexport const OptionsLineComponent = (props: IOptionsLineComponentProps) => {\r\n const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component\r\n\r\n const onOptionChange = (evt: ChangeEvent<HTMLSelectElement>) => {\r\n if (evt.target.value === _OptionAddKey) {\r\n setOptionState(OptionStates.Adding);\r\n } else {\r\n props.onOptionSelected(evt.target.value);\r\n }\r\n };\r\n\r\n const onOptionAdd = (value: string) => {\r\n const newOptionText = value;\r\n const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };\r\n props.onOptionAdded?.(newOption);\r\n props.onOptionSelected(newOption.value);\r\n setOptionState(OptionStates.Default);\r\n };\r\n\r\n const onCancelOptionAdd = () => {\r\n setOptionState(OptionStates.Default);\r\n };\r\n\r\n return (\r\n <div className={style.optionsLine}>\r\n {optionState === OptionStates.Adding && (\r\n <TextInputWithSubmit\r\n submitValue={onOptionAdd}\r\n placeholder={props.addOptionPlaceholder}\r\n validateValue={props.validateNewOptionValue}\r\n cancelSubmit={onCancelOptionAdd}\r\n />\r\n )}\r\n {optionState === OptionStates.Default && (\r\n <select className={style.optionsSelect} onChange={onOptionChange} value={props.selectedOptionValue}>\r\n {props.onOptionAdded && (\r\n <option key={_OptionAddKey} value={_OptionAddKey}>\r\n {props.addOptionText ?? \"Custom\"}\r\n </option>\r\n )}\r\n {props.options.map((option) => (\r\n <option key={option.id} value={option.value}>\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n )}\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"OptionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,MAAM,qCAAqC,CAAC;AAsBxD;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAExC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;IAE/F,MAAM,cAAc,GAAG,CAAC,GAAmC,EAAE,EAAE;QAC3D,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,EAAE;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SACvC;aAAM;YACH,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5C;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC;QAC5B,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC5F,KAAK,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,aAC5B,WAAW,KAAK,YAAY,CAAC,MAAM,IAAI,CACpC,KAAC,mBAAmB,IAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,CAAC,oBAAoB,EACvC,aAAa,EAAE,KAAK,CAAC,sBAAsB,EAC3C,YAAY,EAAE,iBAAiB,GACjC,CACL,EACA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACrC,kBAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,mBAAmB,aAC7F,KAAK,CAAC,aAAa,IAAI,CACpB,iBAA4B,KAAK,EAAE,aAAa,YAC3C,KAAK,CAAC,aAAa,IAAI,QAAQ,IADvB,aAAa,CAEjB,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,iBAAwB,KAAK,EAAE,MAAM,CAAC,KAAK,YACtC,MAAM,CAAC,KAAK,IADJ,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACG,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ChangeEvent } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { TextInputWithSubmit } from \"../TextInputWithSubmit\";\r\nimport style from \"./OptionsLineComponent.modules.scss\";\r\n\r\n/**\r\n * This components represents an options menu with optional\r\n * customizable properties. Option IDs should be unique.\r\n */\r\nexport interface IOption {\r\n label: string;\r\n value: string;\r\n id: string;\r\n}\r\n\r\nexport interface IOptionsLineComponentProps {\r\n options: IOption[];\r\n addOptionPlaceholder?: string; // Placeholder text to display when adding a new option\r\n onOptionAdded?: (newOption: IOption) => void; // Optional function that can be used to add a new option to the menu\r\n onOptionSelected: (selectedOptionValue: string) => void;\r\n selectedOptionValue: string; // The value of the currently selected option\r\n validateNewOptionValue?: (newOptionValue: string) => boolean; // Optional function that can be used to validate the value of a new option\r\n addOptionText?: string; // Optional text to display on the add option button\r\n}\r\n\r\n/**\r\n * We have two possible states. The user starts in the Default option, and can choose to\r\n * add a new option.\r\n */\r\nenum OptionStates {\r\n Default = 0, // Default state,\r\n Adding = 1, // State when the user is adding a new option to the menu\r\n}\r\n\r\nconst _OptionAddKey = \"addCustomOption\";\r\n\r\nexport const OptionsLineComponent = (props: IOptionsLineComponentProps) => {\r\n const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component\r\n\r\n const onOptionChange = (evt: ChangeEvent<HTMLSelectElement>) => {\r\n if (evt.target.value === _OptionAddKey) {\r\n setOptionState(OptionStates.Adding);\r\n } else {\r\n props.onOptionSelected(evt.target.value);\r\n }\r\n };\r\n\r\n const onOptionAdd = (value: string) => {\r\n const newOptionText = value;\r\n const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };\r\n props.onOptionAdded?.(newOption);\r\n props.onOptionSelected(newOption.value);\r\n setOptionState(OptionStates.Default);\r\n };\r\n\r\n const onCancelOptionAdd = () => {\r\n setOptionState(OptionStates.Default);\r\n };\r\n\r\n return (\r\n <div className={style.optionsLine}>\r\n {optionState === OptionStates.Adding && (\r\n <TextInputWithSubmit\r\n submitValue={onOptionAdd}\r\n placeholder={props.addOptionPlaceholder}\r\n validateValue={props.validateNewOptionValue}\r\n cancelSubmit={onCancelOptionAdd}\r\n />\r\n )}\r\n {optionState === OptionStates.Default && (\r\n <select className={style.optionsSelect} onChange={onOptionChange} value={props.selectedOptionValue}>\r\n {props.onOptionAdded && (\r\n <option key={_OptionAddKey} value={_OptionAddKey}>\r\n {props.addOptionText ?? \"Custom\"}\r\n </option>\r\n )}\r\n {props.options.map((option) => (\r\n <option key={option.id} value={option.value}>\r\n {option.label}\r\n </option>\r\n ))}\r\n </select>\r\n )}\r\n </div>\r\n );\r\n};\r\n"]}
@@ -13,11 +13,10 @@ export const GraphNodesContainer = (props) => {
13
13
  isDragging: monitor.isDragging(),
14
14
  }));
15
15
  useEffect(() => {
16
- var _a;
17
16
  if (currentOffset && item) {
18
17
  if (lastDragPos.current) {
19
18
  const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);
20
- (_a = props.onNodeMoved) === null || _a === void 0 ? void 0 : _a.call(props, item.id, delta.x, delta.y);
19
+ props.onNodeMoved?.(item.id, delta.x, delta.y);
21
20
  }
22
21
  lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);
23
22
  }
@@ -1 +1 @@
1
- {"version":3,"file":"GraphNodesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNodesContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMzC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA6B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEpD,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACnE,aAAa,EAAE,OAAO,CAAC,qBAAqB,EAAE;QAC9C,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE;QACvB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;KACnC,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;;QACX,IAAI,aAAa,IAAI,IAAI,EAAE;YACvB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACrB,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC1F,MAAA,KAAK,CAAC,WAAW,sDAAG,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;aAClD;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;SACvE;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE;YACb,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;SAC9B;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,OAAO,wBAAM,KAAK,CAAC,QAAQ,GAAO,CAAC;AACvC,CAAC,CAAC","sourcesContent":["import { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FC } from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { useDragLayer } from \"react-dnd\";\r\nexport interface IGraphContainerProps {\r\n onNodeMoved: (id: string, x: number, y: number) => void;\r\n id: string;\r\n}\r\n\r\n/**\r\n * This component contains all the nodes and handles their dragging\r\n */\r\nexport const GraphNodesContainer: FC<IGraphContainerProps> = (props) => {\r\n const lastDragPos = useRef<Nullable<Vector2>>(null);\r\n\r\n const { currentOffset, item, isDragging } = useDragLayer((monitor) => ({\r\n currentOffset: monitor.getSourceClientOffset(),\r\n item: monitor.getItem(),\r\n isDragging: monitor.isDragging(),\r\n }));\r\n\r\n useEffect(() => {\r\n if (currentOffset && item) {\r\n if (lastDragPos.current) {\r\n const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);\r\n props.onNodeMoved?.(item.id, delta.x, delta.y);\r\n }\r\n lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);\r\n }\r\n }, [currentOffset, item]);\r\n useEffect(() => {\r\n if (!isDragging) {\r\n lastDragPos.current = null;\r\n }\r\n }, [isDragging]);\r\n return <div>{props.children}</div>;\r\n};\r\n"]}
1
+ {"version":3,"file":"GraphNodesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNodesContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMzC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAA6B,CAAC,KAAK,EAAE,EAAE;IACnE,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEpD,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACnE,aAAa,EAAE,OAAO,CAAC,qBAAqB,EAAE;QAC9C,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE;QACvB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;KACnC,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,aAAa,IAAI,IAAI,EAAE;YACvB,IAAI,WAAW,CAAC,OAAO,EAAE;gBACrB,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC1F,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;aAClD;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;SACvE;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE;YACb,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;SAC9B;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,OAAO,wBAAM,KAAK,CAAC,QAAQ,GAAO,CAAC;AACvC,CAAC,CAAC","sourcesContent":["import { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FC } from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { useDragLayer } from \"react-dnd\";\r\nexport interface IGraphContainerProps {\r\n onNodeMoved: (id: string, x: number, y: number) => void;\r\n id: string;\r\n}\r\n\r\n/**\r\n * This component contains all the nodes and handles their dragging\r\n */\r\nexport const GraphNodesContainer: FC<IGraphContainerProps> = (props) => {\r\n const lastDragPos = useRef<Nullable<Vector2>>(null);\r\n\r\n const { currentOffset, item, isDragging } = useDragLayer((monitor) => ({\r\n currentOffset: monitor.getSourceClientOffset(),\r\n item: monitor.getItem(),\r\n isDragging: monitor.isDragging(),\r\n }));\r\n\r\n useEffect(() => {\r\n if (currentOffset && item) {\r\n if (lastDragPos.current) {\r\n const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);\r\n props.onNodeMoved?.(item.id, delta.x, delta.y);\r\n }\r\n lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);\r\n }\r\n }, [currentOffset, item]);\r\n useEffect(() => {\r\n if (!isDragging) {\r\n lastDragPos.current = null;\r\n }\r\n }, [isDragging]);\r\n return <div>{props.children}</div>;\r\n};\r\n"]}
@@ -59,6 +59,7 @@ export const NodeRenderer = (props) => {
59
59
  const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);
60
60
  return (_jsx("div", { style: fullscreenStyle, children: _jsx(GraphContextManager.Provider, { value: graphContext, children: _jsxs(GraphContainer, { children: [_jsx(GraphNodesContainer, { id: props.id, onNodeMoved: updatePos, children: nodes.map(({ id, label, customData }) => {
61
61
  const posInRecord = pos[id] || { x: 0, y: 0 };
62
+ // eslint-disable-next-line @typescript-eslint/naming-convention
62
63
  const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];
63
64
  return (_jsx(GraphNode, { parentContainerId: props.id, id: id, name: label, x: posInRecord.x, y: posInRecord.y, selected: id === selectedNode, highlighted: id === highlightedNode, children: CustomComponent && _jsx(CustomComponent, { ...customData.value }) }, id));
64
65
  }) }), _jsx(GraphLinesContainer, { id: props.id, children: connections.map(({ id, sourceId, targetId }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { GraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst fullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\nexport type ICustomDataType = { type: string; value: any };\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n /**\r\n * array of connections between nodes\r\n */\r\n connections: IConnectionType[];\r\n /**\r\n * function called when a new connection is created\r\n */\r\n updateConnections: (sourceId: string, targetId: string) => void;\r\n /**\r\n * function called when a connection is deleted\r\n */\r\n deleteLine: (lineId: string) => void;\r\n /**\r\n * function called when a node is deleted\r\n */\r\n deleteNode: (nodeId: string) => void;\r\n /**\r\n * array of all nodes\r\n */\r\n nodes: INodeType[];\r\n /**\r\n * id of the node to highlight\r\n */\r\n highlightedNode?: Nullable<string>;\r\n /**\r\n * function to be called if a node is selected\r\n */\r\n selectNode?: (nodeId: Nullable<string>) => void;\r\n /**\r\n * id of this renderer\r\n */\r\n id: string;\r\n /**\r\n * optional list of custom components to be rendered inside nodes of\r\n * a certain type\r\n */\r\n customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: INodeRendererProps) => {\r\n const { nodes, connections, updateConnections, highlightedNode } = props;\r\n // Store the nodes positions\r\n const [pos, setPos] = useState<IVisualRecordsType>({});\r\n const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n const updatePos = (id: string, x: number, y: number) => {\r\n setPos((currentPos) => {\r\n const currPos = currentPos[id] || { x: 0, y: 0 };\r\n currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n return { ...currentPos };\r\n });\r\n };\r\n\r\n const onNodesConnected = (sourceId: string, targetId: string) => {\r\n updateConnections(sourceId, targetId);\r\n };\r\n\r\n const onLineSelected = (lineId: string) => {\r\n setSelectedLine(lineId);\r\n setSelectedNode(null);\r\n };\r\n\r\n const onNodeSelected = (nodeId: string) => {\r\n setSelectedNode(nodeId);\r\n setSelectedLine(null);\r\n };\r\n\r\n useEffect(() => {\r\n props.selectNode && props.selectNode(selectedNode);\r\n }, [selectedNode]);\r\n\r\n const onKeyDown = (evt: KeyboardEvent) => {\r\n if (evt.key === \"Delete\") {\r\n if (selectedLine) {\r\n props.deleteLine(selectedLine);\r\n } else if (selectedNode) {\r\n props.deleteNode(selectedNode);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"keydown\", onKeyDown);\r\n return () => {\r\n document.removeEventListener(\"keydown\", onKeyDown);\r\n };\r\n }, [selectedLine, selectedNode]);\r\n\r\n const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n return (\r\n <div style={fullscreenStyle}>\r\n <GraphContextManager.Provider value={graphContext}>\r\n <GraphContainer>\r\n <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n {nodes.map(({ id, label, customData }) => {\r\n const posInRecord = pos[id] || { x: 0, y: 0 };\r\n const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n return (\r\n <GraphNode\r\n parentContainerId={props.id}\r\n key={id}\r\n id={id}\r\n name={label}\r\n x={posInRecord.x}\r\n y={posInRecord.y}\r\n selected={id === selectedNode}\r\n highlighted={id === highlightedNode}\r\n >\r\n {CustomComponent && <CustomComponent {...customData.value} />}\r\n </GraphNode>\r\n );\r\n })}\r\n </GraphNodesContainer>\r\n <GraphLinesContainer id={props.id}>\r\n {connections.map(({ id, sourceId, targetId }) => {\r\n const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n })}\r\n </GraphLinesContainer>\r\n </GraphContainer>\r\n </GraphContextManager.Provider>\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { GraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst fullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\nexport type ICustomDataType = { type: string; value: any };\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n /**\r\n * array of connections between nodes\r\n */\r\n connections: IConnectionType[];\r\n /**\r\n * function called when a new connection is created\r\n */\r\n updateConnections: (sourceId: string, targetId: string) => void;\r\n /**\r\n * function called when a connection is deleted\r\n */\r\n deleteLine: (lineId: string) => void;\r\n /**\r\n * function called when a node is deleted\r\n */\r\n deleteNode: (nodeId: string) => void;\r\n /**\r\n * array of all nodes\r\n */\r\n nodes: INodeType[];\r\n /**\r\n * id of the node to highlight\r\n */\r\n highlightedNode?: Nullable<string>;\r\n /**\r\n * function to be called if a node is selected\r\n */\r\n selectNode?: (nodeId: Nullable<string>) => void;\r\n /**\r\n * id of this renderer\r\n */\r\n id: string;\r\n /**\r\n * optional list of custom components to be rendered inside nodes of\r\n * a certain type\r\n */\r\n customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: INodeRendererProps) => {\r\n const { nodes, connections, updateConnections, highlightedNode } = props;\r\n // Store the nodes positions\r\n const [pos, setPos] = useState<IVisualRecordsType>({});\r\n const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n const updatePos = (id: string, x: number, y: number) => {\r\n setPos((currentPos) => {\r\n const currPos = currentPos[id] || { x: 0, y: 0 };\r\n currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n return { ...currentPos };\r\n });\r\n };\r\n\r\n const onNodesConnected = (sourceId: string, targetId: string) => {\r\n updateConnections(sourceId, targetId);\r\n };\r\n\r\n const onLineSelected = (lineId: string) => {\r\n setSelectedLine(lineId);\r\n setSelectedNode(null);\r\n };\r\n\r\n const onNodeSelected = (nodeId: string) => {\r\n setSelectedNode(nodeId);\r\n setSelectedLine(null);\r\n };\r\n\r\n useEffect(() => {\r\n props.selectNode && props.selectNode(selectedNode);\r\n }, [selectedNode]);\r\n\r\n const onKeyDown = (evt: KeyboardEvent) => {\r\n if (evt.key === \"Delete\") {\r\n if (selectedLine) {\r\n props.deleteLine(selectedLine);\r\n } else if (selectedNode) {\r\n props.deleteNode(selectedNode);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"keydown\", onKeyDown);\r\n return () => {\r\n document.removeEventListener(\"keydown\", onKeyDown);\r\n };\r\n }, [selectedLine, selectedNode]);\r\n\r\n const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n return (\r\n <div style={fullscreenStyle}>\r\n <GraphContextManager.Provider value={graphContext}>\r\n <GraphContainer>\r\n <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n {nodes.map(({ id, label, customData }) => {\r\n const posInRecord = pos[id] || { x: 0, y: 0 };\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n return (\r\n <GraphNode\r\n parentContainerId={props.id}\r\n key={id}\r\n id={id}\r\n name={label}\r\n x={posInRecord.x}\r\n y={posInRecord.y}\r\n selected={id === selectedNode}\r\n highlighted={id === highlightedNode}\r\n >\r\n {CustomComponent && <CustomComponent {...customData.value} />}\r\n </GraphNode>\r\n );\r\n })}\r\n </GraphNodesContainer>\r\n <GraphLinesContainer id={props.id}>\r\n {connections.map(({ id, sourceId, targetId }) => {\r\n const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n })}\r\n </GraphLinesContainer>\r\n </GraphContainer>\r\n </GraphContextManager.Provider>\r\n </div>\r\n );\r\n};\r\n"]}
@@ -2,21 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4
4
  import { conflictingValuesPlaceholder } from "./targetsProxy.js";
5
- import toggleOnIcon_40px from "../imgs/toggleOnIcon_40px.svg";
6
- import toggleOffIcon_40px from "../imgs/toggleOffIcon_40px.svg";
7
- import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
8
- import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
9
- import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
5
+ import toggleOnIcon40px from "../imgs/toggleOnIcon_40px.svg";
6
+ import toggleOffIcon40px from "../imgs/toggleOffIcon_40px.svg";
7
+ import toggleOnIcon30px from "../imgs/toggleOnIcon_30px.svg";
8
+ import toggleMixedIcon30px from "../imgs/toggleMixedIcon_30px.svg";
9
+ import toggleOffIcon30px from "../imgs/toggleOffIcon_30px.svg";
10
10
  const Icons = {
11
11
  size30: {
12
- on: toggleOnIcon_30px,
13
- mixed: toggleMixedIcon_30px,
14
- off: toggleOffIcon_30px,
12
+ on: toggleOnIcon30px,
13
+ mixed: toggleMixedIcon30px,
14
+ off: toggleOffIcon30px,
15
15
  },
16
16
  size40: {
17
- on: toggleOnIcon_40px,
17
+ on: toggleOnIcon40px,
18
18
  mixed: "",
19
- off: toggleOffIcon_40px,
19
+ off: toggleOffIcon40px,
20
20
  },
21
21
  };
22
22
  export class CheckBoxLineComponent extends React.Component {
@@ -1 +1 @@
1
- {"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n label?: string;\r\n target?: any;\r\n propertyName?: string;\r\n isSelected?: () => boolean;\r\n onSelect?: (value: boolean) => void;\r\n onValueChanged?: () => void;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n disabled?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon_40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon_40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon_30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon_30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon_30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n size30: {\r\n on: toggleOnIcon_30px,\r\n mixed: toggleMixedIcon_30px,\r\n off: toggleOffIcon_30px,\r\n },\r\n size40: {\r\n on: toggleOnIcon_40px,\r\n mixed: \"\", // unneeded\r\n off: toggleOffIcon_40px,\r\n },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n private _localChange = false;\r\n constructor(props: ICheckBoxLineComponentProps) {\r\n super(props);\r\n\r\n if (this.props.isSelected) {\r\n this.state = { isSelected: this.props.isSelected(), isConflict: false };\r\n } else {\r\n this.state = {\r\n isSelected: this.props.target[this.props.propertyName!] === true,\r\n isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n };\r\n }\r\n\r\n if (this.props.disabled) {\r\n this.state = { ...this.state, isDisabled: this.props.disabled };\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n let selected: boolean;\r\n\r\n if (nextProps.isSelected) {\r\n selected = nextProps.isSelected!();\r\n } else {\r\n selected = nextProps.target[nextProps.propertyName!] === true;\r\n if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n nextState.isConflict = true;\r\n }\r\n }\r\n\r\n if (selected !== nextState.isSelected || this._localChange) {\r\n nextState.isSelected = selected;\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n if (nextProps.disabled !== nextState.isDisabled) {\r\n return true;\r\n }\r\n\r\n return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n }\r\n\r\n onChange() {\r\n this._localChange = true;\r\n if (this.props.onSelect) {\r\n this.props.onSelect(!this.state.isSelected);\r\n } else {\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName!,\r\n value: !this.state.isSelected,\r\n initialValue: this.state.isSelected,\r\n });\r\n }\r\n\r\n if (this.props.target && this.props.propertyName) {\r\n this.props.target[this.props.propertyName!] = !this.state.isSelected;\r\n }\r\n }\r\n\r\n if (this.props.onValueChanged) {\r\n this.props.onValueChanged();\r\n }\r\n\r\n this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n }\r\n\r\n render() {\r\n const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n return (\r\n <div className=\"checkBoxLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {this.props.label && (\r\n <div className=\"label\" title={this.props.iconLabel}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n {this.props.faIcons && (\r\n <FontAwesomeIcon\r\n className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n onClick={() => !this.props.disabled && this.onChange()}\r\n />\r\n )}\r\n {!this.props.faIcons && (\r\n <div className=\"checkBox\">\r\n <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n <input\r\n type=\"checkbox\"\r\n className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n checked={this.state.isSelected}\r\n onChange={() => this.onChange()}\r\n disabled={!!this.props.disabled}\r\n />\r\n <img className=\"icon\" src={icon} alt={this.props.label} />\r\n </label>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n label?: string;\r\n target?: any;\r\n propertyName?: string;\r\n isSelected?: () => boolean;\r\n onSelect?: (value: boolean) => void;\r\n onValueChanged?: () => void;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n disabled?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n size30: {\r\n on: toggleOnIcon30px,\r\n mixed: toggleMixedIcon30px,\r\n off: toggleOffIcon30px,\r\n },\r\n size40: {\r\n on: toggleOnIcon40px,\r\n mixed: \"\", // unneeded\r\n off: toggleOffIcon40px,\r\n },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n private _localChange = false;\r\n constructor(props: ICheckBoxLineComponentProps) {\r\n super(props);\r\n\r\n if (this.props.isSelected) {\r\n this.state = { isSelected: this.props.isSelected(), isConflict: false };\r\n } else {\r\n this.state = {\r\n isSelected: this.props.target[this.props.propertyName!] === true,\r\n isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n };\r\n }\r\n\r\n if (this.props.disabled) {\r\n this.state = { ...this.state, isDisabled: this.props.disabled };\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n let selected: boolean;\r\n\r\n if (nextProps.isSelected) {\r\n selected = nextProps.isSelected!();\r\n } else {\r\n selected = nextProps.target[nextProps.propertyName!] === true;\r\n if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n nextState.isConflict = true;\r\n }\r\n }\r\n\r\n if (selected !== nextState.isSelected || this._localChange) {\r\n nextState.isSelected = selected;\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n if (nextProps.disabled !== nextState.isDisabled) {\r\n return true;\r\n }\r\n\r\n return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n }\r\n\r\n onChange() {\r\n this._localChange = true;\r\n if (this.props.onSelect) {\r\n this.props.onSelect(!this.state.isSelected);\r\n } else {\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName!,\r\n value: !this.state.isSelected,\r\n initialValue: this.state.isSelected,\r\n });\r\n }\r\n\r\n if (this.props.target && this.props.propertyName) {\r\n this.props.target[this.props.propertyName!] = !this.state.isSelected;\r\n }\r\n }\r\n\r\n if (this.props.onValueChanged) {\r\n this.props.onValueChanged();\r\n }\r\n\r\n this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n }\r\n\r\n render() {\r\n const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n return (\r\n <div className=\"checkBoxLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {this.props.label && (\r\n <div className=\"label\" title={this.props.iconLabel}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n {this.props.faIcons && (\r\n <FontAwesomeIcon\r\n className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n onClick={() => !this.props.disabled && this.onChange()}\r\n />\r\n )}\r\n {!this.props.faIcons && (\r\n <div className=\"checkBox\">\r\n <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n <input\r\n type=\"checkbox\"\r\n className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n checked={this.state.isSelected}\r\n onChange={() => this.onChange()}\r\n disabled={!!this.props.disabled}\r\n />\r\n <img className=\"icon\" src={icon} alt={this.props.label} />\r\n </label>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
@@ -46,8 +46,7 @@ export class ColorPickerLineComponent extends React.Component {
46
46
  }
47
47
  render() {
48
48
  return (_jsxs("div", { className: "color-picker", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: _jsx("div", { className: "color-rect", style: { background: this.state.hex } }) }), this.state.pickerEnabled && (_jsx(_Fragment, { children: _jsx("div", { className: "color-picker-cover", onClick: (evt) => {
49
- var _a, _b;
50
- if (evt.target !== ((_b = (_a = this._floatRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelector(".color-picker-cover"))) {
49
+ if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(".color-picker-cover")) {
51
50
  return;
52
51
  }
53
52
  this.setState({ pickerEnabled: false });
@@ -1 +1 @@
1
- {"version":3,"file":"colorPickerComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/colorPickerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Color4, Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPicker } from \"../colorPicker/colorPicker\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\nexport interface IColorPickerComponentProps {\r\n value: Color4 | Color3;\r\n linearHint?: boolean;\r\n onColorChanged: (newOne: string) => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n shouldPopRight?: boolean;\r\n lockObject?: LockObject;\r\n}\r\n\r\ninterface IColorPickerComponentState {\r\n pickerEnabled: boolean;\r\n color: Color3 | Color4;\r\n hex: string;\r\n}\r\n\r\nexport class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {\r\n private _floatRef: React.RefObject<HTMLDivElement>;\r\n private _floatHostRef: React.RefObject<HTMLDivElement>;\r\n\r\n constructor(props: IColorPickerComponentProps) {\r\n super(props);\r\n\r\n this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };\r\n\r\n this._floatRef = React.createRef();\r\n this._floatHostRef = React.createRef();\r\n }\r\n\r\n syncPositions() {\r\n const div = this._floatRef.current as HTMLDivElement;\r\n const host = this._floatHostRef.current as HTMLDivElement;\r\n\r\n if (!div || !host) {\r\n return;\r\n }\r\n\r\n let top = host.getBoundingClientRect().top;\r\n const height = div.getBoundingClientRect().height;\r\n\r\n if (top + height + 10 > window.innerHeight) {\r\n top = window.innerHeight - height - 10;\r\n }\r\n\r\n div.style.top = top + \"px\";\r\n if (!this.props.shouldPopRight) {\r\n div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + \"px\";\r\n } else {\r\n div.style.left = host.getBoundingClientRect().left + \"px\";\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {\r\n const diffProps = this.getHexString(nextProps) !== this.getHexString();\r\n\r\n if (diffProps) {\r\n nextState.color = nextProps.value;\r\n nextState.hex = this.getHexString(nextProps);\r\n }\r\n\r\n return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;\r\n }\r\n\r\n getHexString(props = this.props) {\r\n return props.value.toHexString();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.syncPositions();\r\n }\r\n\r\n componentDidMount() {\r\n this.syncPositions();\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"color-picker\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <div className=\"color-rect-background\" ref={this._floatHostRef} onClick={() => this.setState({ pickerEnabled: true })}>\r\n <div className=\"color-rect\" style={{ background: this.state.hex }}></div>\r\n </div>\r\n {this.state.pickerEnabled && (\r\n <>\r\n <div\r\n className=\"color-picker-cover\"\r\n onClick={(evt) => {\r\n if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(\".color-picker-cover\")) {\r\n return;\r\n }\r\n this.setState({ pickerEnabled: false });\r\n }}\r\n >\r\n <div className=\"color-picker-float\" ref={this._floatRef}>\r\n <ColorPicker\r\n lockObject={this.props.lockObject || ({} as any)}\r\n color={this.state.color}\r\n linearhint={this.props.linearHint}\r\n onColorChanged={(color: Color3 | Color4) => {\r\n const hex: string = color.toHexString();\r\n this.setState({ hex, color });\r\n this.props.onColorChanged(hex);\r\n }}\r\n />\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"colorPickerComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/colorPickerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Color4, Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPicker } from \"../colorPicker/colorPicker\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\nexport interface IColorPickerComponentProps {\r\n value: Color4 | Color3;\r\n linearHint?: boolean;\r\n onColorChanged: (newOne: string) => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n shouldPopRight?: boolean;\r\n lockObject?: LockObject;\r\n}\r\n\r\ninterface IColorPickerComponentState {\r\n pickerEnabled: boolean;\r\n color: Color3 | Color4;\r\n hex: string;\r\n}\r\n\r\nexport class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {\r\n private _floatRef: React.RefObject<HTMLDivElement>;\r\n private _floatHostRef: React.RefObject<HTMLDivElement>;\r\n\r\n constructor(props: IColorPickerComponentProps) {\r\n super(props);\r\n\r\n this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };\r\n\r\n this._floatRef = React.createRef();\r\n this._floatHostRef = React.createRef();\r\n }\r\n\r\n syncPositions() {\r\n const div = this._floatRef.current as HTMLDivElement;\r\n const host = this._floatHostRef.current as HTMLDivElement;\r\n\r\n if (!div || !host) {\r\n return;\r\n }\r\n\r\n let top = host.getBoundingClientRect().top;\r\n const height = div.getBoundingClientRect().height;\r\n\r\n if (top + height + 10 > window.innerHeight) {\r\n top = window.innerHeight - height - 10;\r\n }\r\n\r\n div.style.top = top + \"px\";\r\n if (!this.props.shouldPopRight) {\r\n div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + \"px\";\r\n } else {\r\n div.style.left = host.getBoundingClientRect().left + \"px\";\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {\r\n const diffProps = this.getHexString(nextProps) !== this.getHexString();\r\n\r\n if (diffProps) {\r\n nextState.color = nextProps.value;\r\n nextState.hex = this.getHexString(nextProps);\r\n }\r\n\r\n return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;\r\n }\r\n\r\n getHexString(props = this.props) {\r\n return props.value.toHexString();\r\n }\r\n\r\n componentDidUpdate() {\r\n this.syncPositions();\r\n }\r\n\r\n componentDidMount() {\r\n this.syncPositions();\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"color-picker\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <div className=\"color-rect-background\" ref={this._floatHostRef} onClick={() => this.setState({ pickerEnabled: true })}>\r\n <div className=\"color-rect\" style={{ background: this.state.hex }}></div>\r\n </div>\r\n {this.state.pickerEnabled && (\r\n <>\r\n <div\r\n className=\"color-picker-cover\"\r\n onClick={(evt) => {\r\n if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(\".color-picker-cover\")) {\r\n return;\r\n }\r\n this.setState({ pickerEnabled: false });\r\n }}\r\n >\r\n <div className=\"color-picker-float\" ref={this._floatRef}>\r\n <ColorPicker\r\n lockObject={this.props.lockObject || ({} as any)}\r\n color={this.state.color}\r\n linearhint={this.props.linearHint}\r\n onColorChanged={(color: Color3 | Color4) => {\r\n const hex: string = color.toHexString();\r\n this.setState({ hex, color });\r\n this.props.onColorChanged(hex);\r\n }}\r\n />\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
@@ -26,7 +26,6 @@ export class HexLineComponent extends React.Component {
26
26
  return false;
27
27
  }
28
28
  raiseOnPropertyChanged(newValue, previousValue) {
29
- var _a;
30
29
  if (this.props.onChange) {
31
30
  this.props.onChange(newValue);
32
31
  }
@@ -34,7 +33,7 @@ export class HexLineComponent extends React.Component {
34
33
  return;
35
34
  }
36
35
  this.props.onPropertyChangedObservable.notifyObservers({
37
- object: (_a = this.props.replaySourceReplacement) !== null && _a !== void 0 ? _a : this.props.target,
36
+ object: this.props.replaySourceReplacement ?? this.props.target,
38
37
  property: this.props.propertyName,
39
38
  value: newValue,
40
39
  initialValue: previousValue,
@@ -1 +1 @@
1
- {"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/hexLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IHexLineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n lockObject?: LockObject;\r\n onChange?: (newValue: number) => void;\r\n isInteger?: boolean;\r\n replaySourceReplacement?: string;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n additionalClass?: string;\r\n step?: string;\r\n digits?: number;\r\n useEuler?: boolean;\r\n min?: number;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class HexLineComponent extends React.Component<IHexLineComponentProps, { value: string }> {\r\n private _localChange = false;\r\n private _store: number;\r\n private _propertyChange = true;\r\n\r\n constructor(props: IHexLineComponentProps) {\r\n super(props);\r\n\r\n const currentValue = this.props.target[this.props.propertyName];\r\n this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : \"0\" };\r\n this._store = currentValue;\r\n }\r\n\r\n componentWillUnmount() {\r\n this.unlock();\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string }) {\r\n if (this._localChange) {\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n const newValue = nextProps.target[nextProps.propertyName];\r\n const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : \"0\";\r\n\r\n if (newValueString !== nextState.value) {\r\n nextState.value = newValueString;\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n if (this.props.onChange) {\r\n this.props.onChange(newValue);\r\n }\r\n\r\n if (!this.props.onPropertyChangedObservable) {\r\n return;\r\n }\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.replaySourceReplacement ?? this.props.target,\r\n property: this.props.propertyName,\r\n value: newValue,\r\n initialValue: previousValue,\r\n });\r\n }\r\n\r\n convertToHexString(valueString: string): string {\r\n while (valueString.length < 10) {\r\n valueString += \"0\";\r\n }\r\n return valueString;\r\n }\r\n\r\n updateValue(valueString: string, raisePropertyChanged: boolean) {\r\n if (valueString.substr(0, 2) != \"0x\") {\r\n if (valueString.substr(0, 1) != \"0\") {\r\n valueString = \"0x\" + valueString;\r\n } else {\r\n valueString = \"0x\" + valueString.substr(1);\r\n }\r\n }\r\n\r\n const valueSubstr = valueString.substr(2);\r\n if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n return;\r\n }\r\n\r\n if (valueString.length > 10) {\r\n return;\r\n }\r\n\r\n const valueStringAsHex = this.convertToHexString(valueString);\r\n let valueAsNumber: number;\r\n\r\n valueAsNumber = parseInt(valueStringAsHex);\r\n\r\n if (!isNaN(valueAsNumber) && this.props.min !== undefined) {\r\n if (valueAsNumber < this.props.min) {\r\n valueAsNumber = this.props.min;\r\n valueString = valueAsNumber.toString();\r\n }\r\n }\r\n\r\n this._localChange = true;\r\n\r\n if (isNaN(valueAsNumber)) {\r\n return;\r\n }\r\n\r\n this.setState({ value: valueString });\r\n if (raisePropertyChanged) {\r\n this._propertyChange = true;\r\n this.props.target[this.props.propertyName] = valueAsNumber;\r\n this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n } else {\r\n this._propertyChange = false;\r\n }\r\n\r\n this._store = valueAsNumber;\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n render() {\r\n let valueAsHex: string;\r\n if (this._propertyChange) {\r\n const valueAsNumber = parseInt(this.state.value);\r\n valueAsHex = valueAsNumber.toString(16);\r\n let hex0String = \"\";\r\n for (let i = 0; i < 8 - valueAsHex.length; i++) {\r\n //padding the '0's\r\n hex0String += \"0\";\r\n }\r\n valueAsHex = \"0x\" + hex0String + valueAsHex.toUpperCase();\r\n } else {\r\n valueAsHex = this.state.value;\r\n }\r\n\r\n return (\r\n <div>\r\n {!this.props.useEuler && (\r\n <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <div className=\"label\" title={this.props.label}>\r\n {this.props.label}\r\n </div>\r\n <div className=\"value\">\r\n <input\r\n type=\"string\"\r\n className=\"hex-input\"\r\n value={valueAsHex}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateValue(evt.target.value, false)}\r\n onKeyDown={(evt) => {\r\n if (evt.keyCode !== 13) {\r\n return;\r\n }\r\n this.updateValue(this.state.value, true);\r\n }}\r\n />\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/hexLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IHexLineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n lockObject?: LockObject;\r\n onChange?: (newValue: number) => void;\r\n isInteger?: boolean;\r\n replaySourceReplacement?: string;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n additionalClass?: string;\r\n step?: string;\r\n digits?: number;\r\n useEuler?: boolean;\r\n min?: number;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class HexLineComponent extends React.Component<IHexLineComponentProps, { value: string }> {\r\n private _localChange = false;\r\n private _store: number;\r\n private _propertyChange = true;\r\n\r\n constructor(props: IHexLineComponentProps) {\r\n super(props);\r\n\r\n const currentValue = this.props.target[this.props.propertyName];\r\n this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : \"0\" };\r\n this._store = currentValue;\r\n }\r\n\r\n componentWillUnmount() {\r\n this.unlock();\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string }) {\r\n if (this._localChange) {\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n const newValue = nextProps.target[nextProps.propertyName];\r\n const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : \"0\";\r\n\r\n if (newValueString !== nextState.value) {\r\n nextState.value = newValueString;\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n if (this.props.onChange) {\r\n this.props.onChange(newValue);\r\n }\r\n\r\n if (!this.props.onPropertyChangedObservable) {\r\n return;\r\n }\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.replaySourceReplacement ?? this.props.target,\r\n property: this.props.propertyName,\r\n value: newValue,\r\n initialValue: previousValue,\r\n });\r\n }\r\n\r\n convertToHexString(valueString: string): string {\r\n while (valueString.length < 10) {\r\n valueString += \"0\";\r\n }\r\n return valueString;\r\n }\r\n\r\n updateValue(valueString: string, raisePropertyChanged: boolean) {\r\n if (valueString.substr(0, 2) != \"0x\") {\r\n if (valueString.substr(0, 1) != \"0\") {\r\n valueString = \"0x\" + valueString;\r\n } else {\r\n valueString = \"0x\" + valueString.substr(1);\r\n }\r\n }\r\n\r\n const valueSubstr = valueString.substr(2);\r\n if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n return;\r\n }\r\n\r\n if (valueString.length > 10) {\r\n return;\r\n }\r\n\r\n const valueStringAsHex = this.convertToHexString(valueString);\r\n let valueAsNumber: number;\r\n\r\n valueAsNumber = parseInt(valueStringAsHex);\r\n\r\n if (!isNaN(valueAsNumber) && this.props.min !== undefined) {\r\n if (valueAsNumber < this.props.min) {\r\n valueAsNumber = this.props.min;\r\n valueString = valueAsNumber.toString();\r\n }\r\n }\r\n\r\n this._localChange = true;\r\n\r\n if (isNaN(valueAsNumber)) {\r\n return;\r\n }\r\n\r\n this.setState({ value: valueString });\r\n if (raisePropertyChanged) {\r\n this._propertyChange = true;\r\n this.props.target[this.props.propertyName] = valueAsNumber;\r\n this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n } else {\r\n this._propertyChange = false;\r\n }\r\n\r\n this._store = valueAsNumber;\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n render() {\r\n let valueAsHex: string;\r\n if (this._propertyChange) {\r\n const valueAsNumber = parseInt(this.state.value);\r\n valueAsHex = valueAsNumber.toString(16);\r\n let hex0String = \"\";\r\n for (let i = 0; i < 8 - valueAsHex.length; i++) {\r\n //padding the '0's\r\n hex0String += \"0\";\r\n }\r\n valueAsHex = \"0x\" + hex0String + valueAsHex.toUpperCase();\r\n } else {\r\n valueAsHex = this.state.value;\r\n }\r\n\r\n return (\r\n <div>\r\n {!this.props.useEuler && (\r\n <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <div className=\"label\" title={this.props.label}>\r\n {this.props.label}\r\n </div>\r\n <div className=\"value\">\r\n <input\r\n type=\"string\"\r\n className=\"hex-input\"\r\n value={valueAsHex}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateValue(evt.target.value, false)}\r\n onKeyDown={(evt) => {\r\n if (evt.keyCode !== 13) {\r\n return;\r\n }\r\n this.updateValue(this.state.value, true);\r\n }}\r\n />\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
@@ -10,28 +10,25 @@ export class InputArrowsComponent extends React.Component {
10
10
  this.props.incrementValue(-event.movementY);
11
11
  };
12
12
  this._releaseListener = () => {
13
- var _a, _b, _c, _d;
14
13
  this.props.setDragging(false);
15
- (_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.exitPointerLock();
16
- (_b = this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.defaultView.removeEventListener("pointerup", this._releaseListener);
17
- (_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.removeEventListener("pointerlockchange", this._lockChangeListener);
18
- (_d = this._arrowsRef.current) === null || _d === void 0 ? void 0 : _d.ownerDocument.defaultView.removeEventListener("mousemove", this._drag);
14
+ this._arrowsRef.current?.ownerDocument.exitPointerLock();
15
+ this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("pointerup", this._releaseListener);
16
+ this._arrowsRef.current?.ownerDocument.removeEventListener("pointerlockchange", this._lockChangeListener);
17
+ this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("mousemove", this._drag);
19
18
  };
20
19
  this._lockChangeListener = () => {
21
- var _a;
22
- if (((_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.pointerLockElement) !== this._arrowsRef.current) {
20
+ if (this._arrowsRef.current?.ownerDocument.pointerLockElement !== this._arrowsRef.current) {
23
21
  this._releaseListener();
24
22
  }
25
23
  };
26
24
  }
27
25
  render() {
28
26
  return (_jsxs("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: () => {
29
- var _a, _b, _c, _d;
30
- (_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.addEventListener("pointerlockchange", this._lockChangeListener);
31
- (_b = this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.defaultView.addEventListener("pointerup", this._releaseListener);
32
- (_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
27
+ this._arrowsRef.current?.ownerDocument.addEventListener("pointerlockchange", this._lockChangeListener);
28
+ this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("pointerup", this._releaseListener);
29
+ this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
33
30
  this.props.setDragging(true);
34
- (_d = this._arrowsRef.current) === null || _d === void 0 ? void 0 : _d.requestPointerLock();
31
+ this._arrowsRef.current?.requestPointerLock();
35
32
  }, onDragStart: (evt) => evt.preventDefault(), children: [_jsx("img", { className: "upArrowIcon", src: upArrowIcon, alt: "Increase Value" }), _jsx("img", { className: "downArrowIcon", src: downArrowIcon, alt: "Increase Value" })] }));
36
33
  }
37
34
  }